@font-face{
  font-family:"Styrene UI";
  font-style:normal;
  font-weight:400;
  src:
    local("Styrene UI"),
    url("./design.html") format("woff2");
}

:root{
  --bg:#f5f6f8;
  --panel:#ffffff;
  --muted:#6b7280;
  --text:#111827;
  --line:#e5e7eb;
  --soft:#f1f3f6;
  --soft2:#eef0f4;
  --field: rgba(11,31,53,.06);
  --fieldHover: rgba(11,31,53,.10);
  --focusRing: 0 0 0 3px rgba(34,136,250,.18);
  --accent:#ef2d2d;
  --accent2:#d92525;
  --shadow: 0 10px 30px rgba(17,24,39,.08);
  --radius:14px;
  --radius2:10px;
  --font: "Styrene UI", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.app{
  display:flex;
  min-height:100vh;
}

.mobileOverlay{
  position:fixed;
  inset:0;
  background: rgba(17,24,39,.55);
  z-index: 900;
}

@media (max-width: 980px){
  /* overlay no longer used; keep it disabled to avoid accidental darkening */
  .mobileOverlay{display:none !important}
}

/* Sidebar */
.sidebar{
  width:84px;
  background:#f2f3f5;
  border-right:1px solid var(--line);
  padding:16px 12px;
  display:flex;
  flex-direction:column;
  gap:14px;
  transition: width .2s ease;
}
.sidebar:not(.sidebar--collapsed){ width:280px; }
.sidebar--collapsed{ width:84px; }
.sidebar .brand__text,
.sidebar .nav__item span:last-child,
.sidebar .sidebar__footer .btn span:last-child,
.sidebar .sidebar__footer .muted{ display:none; }

.sidebar:not(.sidebar--collapsed) .brand__text,
.sidebar:not(.sidebar--collapsed) .nav__item span:last-child,
.sidebar:not(.sidebar--collapsed) .sidebar__footer .btn span:last-child,
.sidebar:not(.sidebar--collapsed) .sidebar__footer .muted{ display:block; }

/* Mobile default: collapsed sidebar, but allow toggling via .sidebar--collapsed as well */
@media (max-width: 720px){
  /* mobile default: collapsed (84px), expands only when class removed */
  .sidebar{width:84px;}
  .sidebar.sidebar--collapsed{width:84px;}
  .sidebar:not(.sidebar--collapsed){width:280px;}
  .sidebar:not(.sidebar--collapsed) .brand__text,
  .sidebar:not(.sidebar--collapsed) .nav__item span:last-child,
  .sidebar:not(.sidebar--collapsed) .sidebar__footer .btn span:last-child,
  .sidebar:not(.sidebar--collapsed) .sidebar__footer .muted{display:block;}

  /* tabs should be swipe-scrollable */
  .tabs{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-wrap:nowrap;white-space:nowrap;gap:16px;}
  .tabs::-webkit-scrollbar{display:none;}
  .tab{flex:0 0 auto;white-space:nowrap;}
}

@media (max-width: 520px){
  /* Ensure menu toggle is always tappable and not overlapped */
  .topbar{position:sticky;top:0;z-index:50;}
  #btnToggleSidebar{
    position:fixed;
    left:10px;
    top:10px;
    z-index:9999;
  }

  /* reserve space for the fixed toggle */
  .topbar__left{padding-left:46px;}

  /* simplify right side to avoid overlap */
  .topbar__right .user{display:none;}
  .topbar__right .pill{display:none;}
  .topbar__right{gap:6px;}
  .iconbtn{min-width:34px;height:34px;padding:0 8px;}
}
.sidebar__brand{
  display:flex;
  gap:10px;
  align-items:center;
  padding:8px 8px;
}
.brand__logo{
  width:38px;height:38px;border-radius:12px;
  display:grid;place-items:center;
  background:var(--accent);
  color:#fff;
  font-weight:800;
}
.brand__name{font-weight:800}
.brand__sub{font-size:12px;color:var(--muted);margin-top:2px}

.nav{display:flex;flex-direction:column;gap:4px}
.nav__item{
  display:flex;align-items:center;gap:10px;
  width:100%;
  border:0;
  background:transparent;
  padding:10px 10px;
  border-radius:12px;
  color:#111827;
  cursor:pointer;
}
.nav__item:hover{background:#e9ebef}
.nav__item--active{background:#e9ebef; box-shadow: inset 2px 0 0 var(--accent);}
.nav__sep{height:10px;border-bottom:1px solid var(--line);margin:8px 10px}
.ico{width:22px;display:inline-flex;justify-content:center}

.sidebar__footer{
  margin-top:auto;
  padding:8px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* Main */
.main{flex:1;display:flex;flex-direction:column;min-width:0}

/* Topbar */
.topbar{
  height:64px;
  background:#f2f3f5;
  border-bottom:1px solid var(--line);
  display:grid;
  grid-template-columns: 1fr minmax(220px, 520px) 1.2fr;
  align-items:center;
  gap:16px;
  padding:0 16px;
}
.topbar__left{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.topbar__center{display:flex;justify-content:center}
.topbar__right{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:10px;
  min-width:0;
}
  flex-shrink: 0; /* Prevent left block from shrinking */
.topbar__search{
  width:100%;
  max-width:520px;
  display:flex;
  gap:8px;
  align-items:center;
  padding:10px 12px;
  border-radius:14px;
  background:#fff;
  border:1px solid var(--line);
}
.topbar__search input{
  border:0; outline:0; width:100%;
  font-size:14px;
}
.topbar__searchIco{opacity:.6}

.badge{
  display:inline-flex;
  min-width:18px;height:18px;
  padding:0 6px;
  border-radius:999px;
  background:#e5e7eb;
  font-size:12px;
  align-items:center;
  justify-content:center;
}
.badge--danger{background:var(--accent); color:#fff}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  font-weight:600;
}
.pill__dot{width:10px;height:10px;border-radius:999px;background:#111827;opacity:.25}
.user{min-width:0}
.user__name{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:300px}
.user__sub{font-size:12px;color:var(--muted)}

/* Content */
.content{
  padding:20px 20px 30px;
  max-width: 1180px;
  margin: 0 auto;
  width: 100%;
}

.pageHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin: 6px 0 14px;
}
.pageHead h1{margin:0 0 10px;font-size:36px;letter-spacing:-.5px}
.pageHead__title{min-width:0}

.tabs{display:flex;gap:22px;border-bottom:1px solid #e9e9ee}
.tab{
  border:0;background:transparent;
  padding:10px 0;
  cursor:pointer;
  color:var(--muted);
  font-weight:500;
  position:relative;
}
.tab--active{color:var(--text)}
.tab--active::after{
  content:"";
  position:absolute;left:0;right:0;bottom:-1px;height:3px;
  border-radius:999px;
  background:var(--accent);
}

.panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow: var(--shadow);
  overflow:hidden;
}
.panel__row{padding:14px 16px;border-top:1px solid var(--line)}
.panel__row:first-child{border-top:0}
.panel__row--search{padding:18px 16px;background:#fafafa}
.panel__row--filters{background:#fafafa}
.panel__row--promo{background:#fafafa}
.panel__row--cards{background:#fff}
.panel__row--tabs{background:#fff}
.panel__row--meta{background:#fff}
.panel__row--table{padding:0}

.input{
  display:flex;align-items:center;gap:8px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px 12px;
}
.input input{border:0;outline:0;width:100%;font-size:14px}
.input--search{position:relative}
.iconbtn--infield{
  position:absolute;
  right:6px;
  top:50%;
  transform:translateY(-50%);
  opacity:.7;
}
.iconbtn--infield:hover{opacity:1}

.filters{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:flex-end;
}
.filters__right{
  margin-left:auto;
  display:flex;
  gap:10px;
  align-items:center;
}
.filter{display:flex;flex-direction:column;gap:6px}
.filter--grow{flex:1;min-width:220px}
.filter__label{font-size:12px;color:var(--muted)}
select{
  height:36px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  padding:0 10px;
  outline:0;
  font-size:14px;
}
.chips{display:flex;flex-wrap:wrap;gap:8px;min-height:36px;align-items:center}
.chip{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--line);
  font-size:13px;
  color:#111827;
}
.chip button{
  border:0;background:transparent;cursor:pointer;opacity:.7
}
.chip button:hover{opacity:1}

.meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
}
.meta__left{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.meta__right{min-width:0;text-align:right}

.tableWrap{overflow:auto; max-height: 520px;}
.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:14px;
}
th,td{padding:12px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
thead th{
  position:sticky; top:0; z-index:2;
  background:#fff;
  font-size:12px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.04em;
}
.col--check{width:44px}
.col--currency{width:90px}
.col--available{width:140px;text-align:right}
td.col--available{text-align:right}

.thBtn{
  display:inline-flex;
  gap:8px;
  align-items:center;
  border:0;background:transparent;
  cursor:pointer;
  font:inherit;
  color:inherit;
  text-transform:inherit;
  letter-spacing:inherit;
  padding:0;
}
.sort{opacity:.55; font-size:12px; width:14px; display:inline-flex; justify-content:center}
.rowGroup{
  background:#fcfcfd;
  font-weight:800;
}
.rowGroup td{border-bottom:1px solid #dfe3ea}
.groupToggle{
  display:inline-flex; gap:8px; align-items:center;
  border:0; background:transparent; cursor:pointer;
  font-weight:800;
}
.groupToggle .arrow{width:18px;display:inline-flex;justify-content:center;opacity:.7}
.muted{color:var(--muted)}
.small{font-size:12px}

.btn{
  height:36px;
  border-radius:12px;
  border:1px solid transparent;
  padding:0 12px;
  cursor:pointer;
  font-weight:600;
  background:#fff;
  border-color: var(--line);
}
.btn:hover{filter:brightness(.98)}
.btn--primary{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}
.btn--primary:hover{background:var(--accent2);border-color:var(--accent2)}
.btn--soft{
  background:#fff;
  border-color:var(--line);
  color:#111827;
}
.btn--ghost{
  background:transparent;
  border-color:transparent;
  color:#111827;
}
.btn--ghost:hover{background:var(--soft)}
.btn--full{width:100%;display:flex;gap:10px;align-items:center;justify-content:center}
.creditsTab{background:#fff}

.guarTop{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
}
.dateRange{
  display:flex;
  gap:8px;
  align-items:center;
}
.dateRange__value{
  height:36px;
  display:inline-flex;
  align-items:center;
  padding:0 10px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  font-weight:700;
  font-size:13px;
}
.guarSearch{flex:1;min-width:260px;max-width:none}

/* New guarantee page */
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.sectionTitle{font-weight:800;margin:4px 0 10px}

.chipsBar{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.chipBtn{
  height:36px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  padding:0 14px;
  cursor:pointer;
  font-weight:800;
  color:#111827;
}
.chipBtn:hover{background:var(--soft)}
.chipBtn--active{background:#111827;border-color:#111827;color:#fff}

/* More neutral bank-like fields */
#page-new-guarantee .panel__row{background:#fff}
#page-new-guarantee{font-size:16px;line-height:20px}
#page-new-guarantee h1{letter-spacing:-.2px}
#page-new-guarantee .muted.small{font-size:13px;line-height:16px}
#page-new-guarantee .sectionTitle{font-weight:700;letter-spacing:-.1px}
#page-new-guarantee .formRow input,
#page-new-guarantee select{
  background: var(--field);
  border-color: transparent;
  border-radius: 14px;
  height: 48px;
  font-size: 16px;
  padding: 0 16px;
}
#page-new-guarantee textarea{
  width:100%;
  background: var(--field);
  border: 1px solid transparent;
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 16px;
  resize: vertical;
  min-height: 140px;
}
#page-new-guarantee .formRow input:focus,
#page-new-guarantee select:focus,
#page-new-guarantee textarea:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(17,24,39,.08);
}
#page-new-guarantee .input{
  background: var(--field);
  border-color: transparent;
  padding: 0 16px;
}
#page-new-guarantee .input input{background:transparent}

/* leave space for in-field icon */
#page-new-guarantee .input--search input{padding-right:44px}
#page-new-guarantee .filter__label{color:rgba(3,3,6,.55);font-size:12px;letter-spacing:.02em}

#page-new-guarantee .chipBtn{
  background:#fff;
  border-color:#d7dbe4;
  font-weight:500;
  font-size: 15px;
  height:36px;
  padding:0 16px;
}
#page-new-guarantee .chipBtn:hover{background:#fff}
#page-new-guarantee .chipBtn--active{background:#111827;border-color:#111827;color:#fff}

#page-new-guarantee .btn--soft{
  background: var(--field);
  border-color: transparent;
}

#page-new-guarantee .btn{
  height:48px;
  border-radius:14px;
  padding: 0 16px;
  font-size:16px;
  font-weight:600;
}
#page-new-guarantee .btn--primary{box-shadow:none}

/* in-field icon like on the screenshot */
#page-new-guarantee .input--search{position:relative}
#page-new-guarantee .infieldIco{
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  opacity:.65;
  pointer-events:none;
}

.btnRow{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

.loadingRow{display:flex;gap:12px;align-items:center;margin:6px 0 14px}
.spinner{
  width:18px;height:18px;
  border-radius:50%;
  border:2px solid #cdd3dd;
  border-top-color:#111827;
  animation: spin .9s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.analyzeText{font-weight:700;font-size:18px;padding:10px 0}

.modal .loadingRow{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:10px;
}
.analyzeLoadingText{line-height:18px}

/* Analyze progress bar (full-width, no radius, 220s) */
.progress{
  height:6px;
  background: rgba(17,24,39,.12);
  overflow:hidden;
}
.progress--full{
  width: calc(100% + 36px);
  margin: -16px -18px 10px;
}
.progress__bar{
  height:100%;
  width:0;
  background: var(--accent);
}
.loading .progress__bar{
  animation: progressFill 5s linear forwards;
}
@keyframes progressFill{
  from{width:0}
  to{width:100%}
}

/* Ensure analyze modal looks like a centered white dialog with darkened backdrop */
#analyzeModal .modal__dialog{
  border-radius:24px;
  width:min(860px, calc(100vw - 48px));
}
#analyzeModal .modal__title{font-size:22px}
#analyzeModal .modal__body{padding:16px 18px 18px}

#analyzeModal.detailsMode .modal__dialog{
  width: min(1180px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
}

.analyzeDetails__grid{
  position:relative;
  display:grid;
  grid-template-columns: 1.8fr 1fr;
  gap:18px;
  align-items:start;
}

.analyzeLinks{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  width:100%;
  height:100%;
  pointer-events:none;
  overflow:visible;
  z-index: 0;
}
.analyzeLinks *{pointer-events:none}
.analyzeDetails__doc,
.analyzeDetails__notes{
  position:relative;
  z-index: 2;
}
.analyzeLinks line,
.analyzeLinks path{
  stroke: rgba(17,24,39,.35);
  stroke-width: 1.5;
  stroke-dasharray: 5 5;
  fill: none;
}
.analyzeDetails__doc{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px;
  line-height:22px;
  max-height: calc(100vh - 240px);
  overflow:auto;
}
.analyzeDetails__doc p{margin:0 0 12px}
.analyzeDetails__notes{
  max-height: calc(100vh - 240px);
  overflow:auto;
  padding-right:4px;
}

.noteCard{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
  margin-bottom:12px;
}
.noteCard__title{font-weight:800;margin:0 0 6px}
.noteCard__text{font-size:13px;line-height:18px}

.noteCard__actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.noteCard__actions{position:relative;z-index:5;pointer-events:auto}
.choiceBtn{
  border:1px solid var(--line);
  background:#fff;
  padding:7px 10px;
  border-radius:12px;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  pointer-events:auto;
  position:relative;
}
.choiceBtn:hover{background: rgba(17,24,39,.03)}

.hl{padding:0 .15em}
.hl--warn{background: rgba(239,45,45,.14)}
.hl--info{background: rgba(34,136,250,.14)}
.hlBlock{padding:10px 12px;border-left:3px solid transparent;background: rgba(17,24,39,.04)}
.hlBlock--info{border-left-color: rgba(34,136,250,.55)}

@media (max-width: 980px){
  .analyzeDetails__grid{grid-template-columns:1fr}
  .analyzeDetails__doc,.analyzeDetails__notes{max-height:none}
}

.uploadBox{
  border:1px dashed #cdd3dd;
  border-radius:16px;
  padding:14px;
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:wrap;
  background:#fafafa;
}

@media (max-width: 980px){
  .grid2{grid-template-columns:1fr}
  .grid3{grid-template-columns:1fr}
}

.iconbtn{
  border:0;
  background:#fff;
  border:1px solid var(--line);
  height:36px;
  min-width:36px;
  padding:0 10px;
  border-radius:12px;
  cursor:pointer;
}
.iconbtn:hover{background:var(--soft)}
.iconbtn:active{transform:translateY(1px)}

.dropdown{position:relative}
.dropdown__menu{
  position:absolute;
  right:0;
  top:44px;
  width:240px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow: var(--shadow);
  padding:10px;
  display:none;
  z-index:10;
}
.dropdown--open .dropdown__menu{display:block}
.dropdown__title{font-weight:800;margin:4px 4px 8px}
.dropdown__sep{height:1px;background:var(--line);margin:8px 0}
.checkRow{
  display:flex;
  gap:10px;
  align-items:center;
  padding:8px 6px;
  border-radius:10px;
  cursor:pointer;
}
.checkRow:hover{background:var(--soft)}
.checkRow input{width:16px;height:16px}

.fab{
  position:fixed;
  right:22px;
  bottom:22px;
  width:56px;height:56px;
  border-radius:999px;
  border:0;
  background:#1f2937;
  color:#fff;
  cursor:pointer;
  box-shadow: 0 12px 26px rgba(0,0,0,.22);
  font-size:20px;
}
.fab:hover{filter:brightness(1.05)}

.toastHost{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:18px;
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:100;
}
.toast{
  background:#111827;
  color:#fff;
  padding:10px 12px;
  border-radius:12px;
  min-width:260px;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  font-size:13px;
}
.toast button{
  border:0;
  background:transparent;
  color:#fff;
  cursor:pointer;
  opacity:.8;
}
.toast button:hover{opacity:1}

/* Modal base (overlay) */
.modal{
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.modal__backdrop{
  position:absolute;
  inset:0;
  background: rgba(17,24,39,.55);
}
.modal__dialog{
  position:relative;
  z-index:1;
  width:min(720px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  overflow:auto;
  background:#fff;
  border-radius:18px;
  border:1px solid var(--line);
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}

/* Larger text input modal (Guarantees ? Analyze) */
#guaranteeAnalyzeInputModal .modal__dialog{
  width:min(980px, calc(100vw - 48px));
}

#guaranteeAnalyzeInputModal textarea{
  width:100%;
  min-height:340px;
  resize:vertical;
}
.modal__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:18px 18px 12px;
  position:sticky;
  top:0;
  background:#fff;
  border-bottom:1px solid rgba(229,231,235,.9);
}
.modal__title{font-size:20px;font-weight:700;letter-spacing:-.2px}
.modal__body{padding:16px 18px 18px}
.modal__actions{display:flex;gap:10px;justify-content:flex-end;margin-top:14px}

body.modalOpen{overflow:hidden}

.hidden{display:none !important}

/* Responsive */
@media (max-width: 980px){
  .topbar{
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "left right"
      "center center";
    height:auto;
    padding:10px 12px;
    row-gap:10px;
  }
  .topbar__left{grid-area:left}
  .topbar__right{grid-area:right}
  .topbar__center{grid-area:center}
  .content{padding:14px}
  .pageHead{flex-direction:column;align-items:stretch}
  .filters__right{width:100%;margin-left:0;justify-content:flex-start;flex-wrap:wrap}
  .sidebar{position:sticky;top:0;height:100vh}
}