/* =====================================================================
       KOGNITIVE 360 — Design system v2 (presentational refresh only)
       Premium light theme · refined teal accent · no markup/behaviour change
    ===================================================================== */
    :root{
      /* Neutral foundation — flat surfaces, hairline borders */
      --bg: #FAFAFA;
      --surface: #FFFFFF;
      --sidebar: #F1F1F3;
      --surface-2: #F4F4F5;
      --stroke: #E4E4E7;
      --stroke-strong: #D4D4D8;

      /* Type */
      --text: #0A0A0A;
      --muted: #52525B;
      --muted2: #8A8A93;

      /* Accent — deep teal, carried over from the mark */
      --accent: #0F766E;
      --accent-deep: #115E59;
      --accent2: #0F766E;
      --accent-grad: #0F766E;
      --accent-tint: #F0FDFA;
      --ring: rgba(15,118,110,0.14);

      /* Status */
      --info: #2F5BFF;
      --danger: #D13A2F;
      --warn: #B57A0F;

      /* Depth: hairlines do the work, shadows stay barely-there */
      --shadow: 0 1px 2px rgba(9,9,11,0.04);
      --shadow-md: 0 4px 16px rgba(9,9,11,0.06);
      --shadow-lg: 0 24px 56px rgba(9,9,11,0.14);
      --glow: 0 1px 2px rgba(9,9,11,0.06);

      --font-display: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
      --radius: 12px;
      --radius2: 10px;
      --gap: 20px;
      --pad: 24px;
      --inner-pad: 18px;
      --side-col: 300px;
      --lower-row-height: 1100px;
      --dashboard-row-height: 360px;
    }
    *{ box-sizing:border-box; }
    html, body{
      min-height: 100%;
      margin: 0;
      background-color: var(--bg);
    }
    body{
      min-height: 100dvh;
      font-family: var(--font-display);
      color: var(--text);
      background-color: var(--bg);
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }
    a{ color:inherit; text-decoration:none; }

    /* Subtle, consistent scrollbars */
    ::-webkit-scrollbar{ width: 10px; height: 10px; }
    ::-webkit-scrollbar-track{ background: transparent; }
    ::-webkit-scrollbar-thumb{
      background: rgba(16,24,40,0.14);
      border-radius: 999px;
      border: 3px solid transparent;
      background-clip: padding-box;
    }
    ::-webkit-scrollbar-thumb:hover{ background-color: rgba(16,24,40,0.24); background-clip: padding-box; }

    /* ------------------------------------------------- App shell */
    .app{
      display:grid;
      grid-template-columns: 264px minmax(0, 1fr);
      min-height: 100dvh;
    }
    .sidebar{
      position: sticky;
      top: 0;
      height: 100dvh;
      display:flex;
      flex-direction:column;
      padding: 22px 16px;
      background: var(--sidebar);
      border-right: 1px solid var(--stroke);
      min-width: 0;
      overflow-y: auto;
    }
    .side-nav{
      display:flex;
      flex-direction:column;
      gap: 5px;
      margin-top: 26px;
    }
    .nav-item{
      display:flex;
      align-items:center;
      gap: 11px;
      width: 100%;
      padding: 11px 13px;
      border: 1px solid transparent;
      border-radius: 11px;
      background: transparent;
      color: var(--muted);
      font-family: inherit;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.01em;
      cursor: pointer;
      text-align: left;
      position: relative;
      transition: background .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease;
    }
    .nav-item:hover{ background: var(--surface-2); color: var(--text); }
    .nav-item.active{
      background: var(--surface);
      color: var(--text);
      border-color: var(--stroke);
      box-shadow: 0 1px 2px rgba(9,9,11,0.05);
      font-weight: 600;
    }
    /* Accent marker so the selection is unmistakable at a glance */
    .nav-item.active::before{
      content:"";
      position:absolute;
      left: 5px;
      top: 50%;
      transform: translateY(-50%);
      width: 3px;
      height: 16px;
      border-radius: 999px;
      background: var(--accent);
    }
    .nav-item svg{ flex: 0 0 auto; }
    .side-foot{
      margin-top: auto;
      display:flex;
      flex-direction:column;
      gap: 6px;
      padding-top: 16px;
      margin-top: auto;
      border-top: 1px solid var(--stroke);
    }
    .side-foot .chip{ justify-content:flex-start; }
    /* Account chip and Sign out sit stacked in the sidebar foot and must read as
       a matched pair. Scoped to .sidebar so this beats .btn.ghost / .btn.sm,
       which are declared later in this stylesheet at equal specificity and were
       otherwise winning on padding and border — leaving the two labels sitting
       a pixel apart inside boxes that were themselves identical. */
    .sidebar .side-foot .account-chip,
    .sidebar .side-foot .btn{
      width: 100%;
      /* styles.css carries a legacy global rule: button { margin-left: 8px }.
         The account chip is a span and Sign out is a button element, so that
         rule shifted only one of the pair and left them permanently offset by
         8px. Reset the margin here rather than relying on that file. */
      margin: 0;
      /* Fixed, not min-height: the tier badge inside the chip is taller than the
         text line and would otherwise stretch that box past the button. */
      height: 38px;
      padding: 9px 12px;
      font-size: 12px;
      font-weight: 600;
      line-height: 18px;
      border-radius: 9px;
      border: 1px solid var(--stroke);
      display: flex;
      align-items: center;
      box-sizing: border-box;
    }
    .side-foot .account-chip{
      background: var(--surface-2);
      border-color: var(--stroke);
      color: var(--text);
      /* A long username would otherwise spill past the border and make this
         box look a different size from the Sign out button beneath it. Clip
         the name instead; the icon and tier badge always keep their space. */
      overflow: hidden;
    }
    .side-foot .account-chip > svg,
    .side-foot .account-chip .tier-badge{ flex: 0 0 auto; }
    .side-foot .account-chip #currentUserName{
      flex: 0 1 auto;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .side-foot .btn{
      justify-content: flex-start;
      text-align: left;
      color: var(--muted);
      background: transparent;
      border-color: transparent;
      box-shadow: none;
    }
    .side-foot .btn.ghost:hover{
      background: var(--surface-2);
      color: var(--text);
      border-color: transparent;
    }
    .main-area{ min-width: 0; display:flex; flex-direction:column; }
    .content{
      width: 100%;
      max-width: 1480px;
      margin: 0 auto;
      padding: 24px 28px 48px;
      flex: 1 1 auto;
    }
    .view{ display:none; }
    .view.active{ display:block; }
    .view > * + *{ margin-top: var(--gap); }
    .page-heading{ min-width: 0; }
    .page-heading h2{
      margin: 0;
      font-family: var(--font-display);
      font-size: 17px;
      font-weight: 600;
      letter-spacing: -0.01em;
    }
    .page-heading p{
      margin: 2px 0 0;
      font-size: 12px;
      color: var(--muted2);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* ------------------------------------------------- Top bar */
    .topbar{
      position: sticky;
      top: 0;
      z-index: 30;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: var(--gap);
      padding: 14px 28px;
      border-bottom: 1px solid rgba(226,232,240,0.8);
      background: rgba(255,255,255,0.72);
      backdrop-filter: blur(14px) saturate(1.4);
      -webkit-backdrop-filter: blur(14px) saturate(1.4);
      box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset;
    }
    .brand{
      display:flex;
      align-items:center;
      gap: 12px;
      min-width: 0;
    }
    .logo{
      width: 40px;
      height: 40px;
      border-radius: 10px;
      background: #ffffff;
      border: 1px solid var(--stroke);
      display:flex;
      align-items:center;
      justify-content:center;
      flex: 0 0 auto;
      overflow: hidden;
      box-shadow: var(--shadow);
    }
    .logo img{
      width: 100%;
      height: 100%;
      object-fit: contain;
      padding: 4px;
      display:block;
      background: #ffffff;
    }
    .brand h1{
      margin:0;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: -0.01em;
      white-space: nowrap;
      overflow:hidden;
      text-overflow: ellipsis;
    }
    .brand p{
      margin: 2px 0 0;
      font-size: 12px;
      color: var(--muted2);
      white-space: nowrap;
      overflow:hidden;
      text-overflow: ellipsis;
    }
    .chipset{
      display:flex;
      align-items:center;
      gap: 8px;
      flex-wrap: wrap;
      justify-content:flex-end;
    }
    /* Chipset lives in the sidebar: render as a vertical menu section */
    .sidebar .chipset{
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      flex-wrap: nowrap;
      gap: 4px;
      margin-top: 20px;
      padding-top: 18px;
      border-top: 1px solid var(--stroke);
    }
    .sidebar .chipset .btn{
      width: 100%;
      justify-content: flex-start;
      text-align: left;
      border-color: transparent;
      background: transparent;
      color: var(--muted);
      font-weight: 600;
      padding: 10px 12px;
      border-radius: 10px;
      box-shadow: none;
    }
    .sidebar .chipset .btn:hover{
      background: var(--surface-2);
      color: var(--text);
      border-color: transparent;
    }
    .sidebar .chipset .chip{
      width: 100%;
      justify-content: flex-start;
      margin-top: 6px;
    }
    .sidebar .chipset .notif-dot{
      position: absolute;
      top: 10px;
      right: 12px;
    }
    .chip{
      display:inline-flex;
      align-items:center;
      gap: 7px;
      padding: 7px 12px;
      border-radius: 8px;
      border: 1px solid var(--stroke);
      background: var(--surface-2);
      color: var(--muted);
      font-size: 12px;
      font-weight: 500;
    }

    /* ------------------------------------------------- Hero */
    .hero{
      margin-top: 0;
      padding: 22px 28px;
      border-radius: 16px;
      border: 1px solid var(--stroke);
      background: var(--surface);
      box-shadow: 0 1px 2px rgba(9,9,11,0.04), 0 1px 1px rgba(9,9,11,0.03);
      position: relative;
      overflow: hidden;
    }
    /* The brain mark, cropped by the hero's overflow — identity without noise. */
        .hero-copy{ min-width: 0; }
    .hero-title-row{
      display:flex;
      align-items:center;
      gap: 16px;
      min-width: 0;
    }
    .hero-title-row .hero-mark{
      flex: none;
      width: 50px;
      height: 50px;
      color: var(--accent);
      opacity: 0.22;
      pointer-events: none;
    }
    .hero-grid{ position: relative; z-index: 1; }
    @media (max-width: 900px){ .hero-title-row .hero-mark{ display:none; } }
    .hero:before{
      content:"";
      position:absolute;
      inset:-1px;
      background: transparent; /* painted by per-account branding when set */
      pointer-events:none;
    }
    .hero:after{
      content:"";
      position:absolute;
      inset: 0 0 auto 0;
      height: 3px;
      background: var(--accent);
      opacity: 0.9;
      pointer-events:none;
    }
    /* When an account's custom branding is active, its wash replaces the strip */
    html:has(#brandStyle) .hero:after{ display:none; }
    .hero > *{ position:relative; }
    .hero-grid{
      display:grid;
      grid-template-columns: 1fr;
      gap: var(--gap);
    }
    @media (min-width: 920px){
      .hero-grid{
        grid-template-columns: 1.25fr 0.75fr;
        align-items: center;
      }
    }
    .hero h2{
      margin:0;
      font-family: var(--font-display);
      font-size: 20px;
      font-weight: 600;
      letter-spacing: normal;
      line-height: 1.3;
      color: var(--text);
      width: fit-content;
    }
    .hero small{
      display:block;
      margin-top: 6px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display:block;
      margin-top: 12px;
      color: var(--muted);
      font-size: 13.5px;
      line-height: 1.65;
      max-width: 64ch;
    }
    .hero-cards{
      display:flex;
      gap: 10px;
      flex-wrap: wrap;
      justify-content:flex-start;
    }
    @media (min-width: 920px){
      .hero-cards{ justify-content:flex-end; }
    }
    .mini{
      padding: 13px 16px;
      border-radius: var(--radius2);
      border: 1px solid rgba(13,148,136,0.18);
      background: var(--surface);
      box-shadow: var(--shadow);
      min-width: 170px;
    }
    .mini .k{
      font-size: 10.5px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--accent-deep);
      margin-bottom: 5px;
    }
    .mini .v{
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
    }
    .status{
      display:none;
      align-items:flex-start;
      gap:10px;
      padding:10px 14px;
      border-radius:10px;
      border:1px solid var(--stroke);
      background: var(--surface-2);
      color: var(--muted);
      font-size: 12.5px;
      line-height: 1.5;
      /* Per-file skip reasons and warnings are sent as separate lines. */
      white-space: pre-line;
      margin-top: 12px;
    }

    /* ------------------------------------------------- Layout shells */
    .page-sections{
      display:grid;
      grid-template-columns: 1fr;
      gap: var(--gap);
      margin-top: var(--gap);
    }
    .card{
      border: 1px solid var(--stroke);
      background: var(--surface);
      border-radius: var(--radius);
      box-shadow: 0 1px 2px rgba(9,9,11,0.04), 0 1px 1px rgba(9,9,11,0.03);
      overflow:hidden;
      min-width: 0;
    }
    .card-head{
      padding: 18px 20px 14px;
      border-bottom: 1px solid var(--stroke);
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap: 12px;
    }
    .card-head h3{
      margin:0;
      font-family: var(--font-display);
      font-size: 14.5px;
      font-weight: 600;
      letter-spacing: 0;
      display:flex;
      align-items:center;
      gap: 9px;
    }
    .card-head p{
      margin: 5px 0 0;
      color: var(--muted2);
      font-size: 12.5px;
      line-height: 1.45;
    }
    .card-body{
      padding: var(--pad);
      display:flex;
      flex-direction:column;
      min-height: 0;
    }

    /* ------------------------------------------------- Dashboard */
    .dashboard{
      display:grid;
      grid-template-columns: 1fr;
      gap: 28px;
      margin-top: 28px;
    }
    .dashboard-metrics{
      display:grid;
      grid-template-columns: repeat(1, 1fr);
      gap: var(--gap);
    }
    @media (min-width: 700px){
      .dashboard-metrics{
        grid-template-columns: repeat(2, 1fr);
      }
    }
    @media (min-width: 1100px){
      .dashboard-metrics{
        grid-template-columns: repeat(4, 1fr);
      }
    }
    .stat-card{
      border: 1px solid var(--stroke);
      background: var(--surface);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 20px;
      min-height: 126px;
      display:flex;
      flex-direction:column;
      justify-content:center;
      position: relative;
      overflow: hidden;
      transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
    }
    .stat-card:before{
      content:"";
      position:absolute;
      inset: 0 auto 0 0;
      width: 3px;
      background: var(--accent-grad);
      opacity: 0.85;
    }
    .stat-card:hover{
      border-color: rgba(13,148,136,0.35);
      box-shadow: var(--shadow-md);
      transform: translateY(-2px);
    }
    .stat-label{
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.09em;
      color: var(--muted2);
      margin-bottom: 8px;
      font-weight: 600;
    }
    .stat-value{
      font-family: var(--font-display);
      font-size: 30px;
      font-weight: 600;
      letter-spacing: -0.01em;
      color: var(--text);
      width: fit-content;
      max-width: 100%;
      line-height: 1.12;
      font-variant-numeric: tabular-nums;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .stat-sub{
      margin-top: 8px;
      font-size: 12px;
      color: var(--muted2);
      line-height: 1.45;
    }
    .dashboard-top,
    .dashboard-bottom{
      display:grid;
      grid-template-columns: 1fr;
      gap: var(--gap);
      align-items:stretch;
    }
    @media (min-width: 1100px){
      .dashboard-top,
      .dashboard-bottom{
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.82fr);
      }
      .dashboard-top > .card,
      .dashboard-bottom > .card{
        min-height: var(--dashboard-row-height);
      }
    }
    .chart-card .card-body{
      padding: 16px 20px 20px;
    }
    .chart-wrap,
    .small-chart-wrap{
      height: 240px;
      position: relative;
      flex: 1 1 auto;
      min-height: 0;
    }
    .chart-wrap canvas,
    .small-chart-wrap canvas{
      width: 100% !important;
      height: 100% !important;
      display:block;
    }
    .comparison-stack{
      display:grid;
      grid-template-columns: 1fr;
      gap: 12px;
      align-content:start;
    }
    .comparison-mini{
      border: 1px solid var(--stroke);
      border-radius: var(--radius2);
      background: var(--surface-2);
      padding: 16px 18px;
      min-height: 88px;
      display:flex;
      flex-direction:column;
      justify-content:center;
    }

    /* ------------------------------------------------- Workspace layout */
    /* Asking a question is the primary task, so it gets the width. Upload and
       the document library sit beneath the answer; question history runs down
       a narrow rail. Panels size to their content rather than a fixed height —
       the old fixed height left large empty gaps on shorter screens. */
    .main-grid{
      display:grid;
      grid-template-columns: 1fr;
      gap: var(--gap);
      align-items:start;
    }
    @media (min-width: 1100px){
      .main-grid{
        grid-template-columns: minmax(0, 1fr) 340px;
        grid-template-areas:
          "center right"
          "left   right";
      }
      .left-column   { grid-area: left; }
      .center-column { grid-area: center; }
      .right-column  { grid-area: right; }
    }
    .column{
      display:grid;
      grid-template-columns: 1fr;
      gap: var(--gap);
      min-width: 0;
      align-content:start;
    }
    @media (min-width: 1100px){
      /* Upload and the library share the row under the answer area */
      .left-column{ grid-template-columns: 1fr 1fr; align-items:stretch; }
    }
    .upload-card,
    .library-card,
    .ask-card,
    .history-card{
      display:flex;
      flex-direction:column;
      min-height: 0;
    }
    @media (min-width: 1100px){
      /* Bound the scrolling lists now that the columns are content-sized */
      .ask-card{ min-height: 620px; }
      .library-card .doc-list-wrap{ max-height: 300px; }
      /* The history rail must finish level with the left column and never
         drive the grid taller. Taking the card out of flow (absolute inside a
         relative, stretched column) means the column contributes no intrinsic
         height, so the rows are sized purely by the ask/upload/library side —
         however many questions there are. The card then fills that height
         exactly and the list scrolls within it. */
      .right-column{
        align-self: stretch;
        position: relative;
        display: block;
        min-height: 320px;
      }
      .right-column > .history-card{
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        min-height: 0;
      }
      .history-card .history-list-wrap{
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        overflow-y: auto;
      }
    }

    /* ------------------------------------------------- Upload drop zone */
    .drop{
      border: 1.5px dashed var(--stroke-strong);
      background: var(--surface-2);
      border-radius: var(--radius2);
      padding: 18px;
      display:flex;
      gap: 14px;
      align-items:center;
      cursor:pointer;
      user-select:none;
      transition: border-color .15s ease, background .15s ease;
      position: relative;
      overflow:hidden;
      margin-top: 12px;
      min-height: 96px;
    }
    .drop:hover{
      border-color: var(--accent);
      background:
        var(--accent-tint);
      box-shadow: 0 0 0 4px rgba(13,148,136,0.08);
    }
    .drop:before{
      content:"";
      position:absolute;
      inset:-1px;
      background: transparent; /* painted by per-account branding when set */
      pointer-events:none;
    }
    .drop > *{ position: relative; }
    .drop .icon{
      width: 40px;
      height: 40px;
      border-radius: 10px;
      display:grid;
      place-items:center;
      background: var(--accent-tint);
      border: 1px solid rgba(13,148,136,0.22);
      flex: 0 0 auto;
    }
    .drop strong{
      display:block;
      font-size: 13px;
      margin-bottom: 4px;
      font-weight: 600;
    }
    .drop span{
      display:block;
      color: var(--muted2);
      font-size: 12.5px;
      line-height: 1.45;
    }
    .row{
      display:grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: var(--gap);
      align-items:center;
      margin-top: 12px;
    }

    /* ------------------------------------------------- Buttons */
    .btn{
      border: 1px solid var(--stroke-strong);
      background: var(--surface);
      color: var(--text);
      padding: 9px 15px;
      border-radius: 10px;
      font-weight: 600;
      font-size: 13px;
      cursor: pointer;
      transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap: 8px;
      user-select: none;
      white-space: nowrap;
      min-width: 0;
      font-family: inherit;
      box-shadow: 0 1px 2px rgba(11,22,38,0.06);
    }
    .btn:hover{
      background: var(--surface-2);
      border-color: #B8C4D2;
    }
    .btn:active{ box-shadow: none; transform: translateY(1px); }
    .btn.primary,
    .btn.success{
      background: var(--text);
      border-color: transparent;
      box-shadow: none;
      color: #ffffff;
    }
    .btn.primary:hover,
    .btn.success:hover{
      background: #27272A;
      border-color: transparent;
      box-shadow: none;
    }
    .btn.ghost{
      background: transparent;
      border-color: var(--stroke);
      box-shadow: none;
      padding: 8px 12px;
      font-weight: 600;
      font-size: 12px;
      border-radius: 8px;
      color: var(--muted);
    }
    .btn.ghost:hover{
      background: var(--surface-2);
      color: var(--text);
      border-color: var(--stroke-strong);
    }
    .btn.sm{
      padding: 8px 12px;
      font-size: 12px;
      border-radius: 8px;
    }

    /* ------------------------------------------------- Form controls */
    .field-label{
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.07em;
      color: var(--muted2);
      margin-bottom: 8px;
    }
    select,
    input[type="text"],
    input[type="password"]{
      width: 100%;
      min-width: 0;
      padding: 12px 42px 12px 14px;
      border-radius: var(--radius2);
      border: 1px solid var(--stroke-strong);
      background-color: var(--surface);
      color: var(--text);
      outline: none;
      font-size: 13px;
      font-family: inherit;
      box-shadow: 0 1px 2px rgba(16,24,40,0.04);
      transition: border-color .15s ease, box-shadow .15s ease;
      overflow: hidden;
      text-overflow: ellipsis;
      min-height: 46px;
    }
    select:focus,
    input[type="text"]:focus,
    input[type="password"]:focus{
      border-color: var(--accent);
      box-shadow: 0 0 0 4px var(--ring), 0 4px 14px rgba(13,148,136,0.10);
      background: #ffffff;
    }
    select{
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      background-image:
        linear-gradient(45deg, transparent 50%, var(--muted) 50%),
        linear-gradient(135deg, var(--muted) 50%, transparent 50%);
      background-position:
        calc(100% - 19px) calc(50% - 2px),
        calc(100% - 14px) calc(50% - 2px);
      background-size: 5px 5px, 5px 5px;
      background-repeat: no-repeat;
      cursor: pointer;
    }
    input[type="text"]::placeholder,
    input[type="password"]::placeholder{
      color: var(--muted2);
    }
    .login-card input[type="text"],
    .login-card input[type="password"] {
      padding: 12px 14px;
    }

    /* ------------------------------------------------- Library toolbar */
    .library-toolbar{
      display:grid;
      grid-template-columns: 1fr;
      gap: 10px;
      margin: 0 0 14px;
    }
    .library-toolbar select{
      min-height: 48px;
      font-size: 13.5px;
      padding: 13px 44px 13px 16px;
    }
    .library-actions{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    /* ------------------------------------------------- Ask / answer area */
    .chatbox{
      display:grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items:center;
      margin-top: 14px;
    }
    .chatbox .btn{ min-height: 46px; padding-left: 22px; padding-right: 22px; }
    .answer-sources{
      display:grid;
      grid-template-columns: 1fr;
      gap: var(--gap);
      margin-top: 16px;
      min-height: 0;
      flex: 1 1 auto;
      align-content:start;
      padding: 0;
    }
    /* ------------------------------------------------- Blueprint actions
       A plan can hold a dozen or more actions. Showing every control on every
       row turned the list into a wall of widgets that buried the actual text,
       so each action collapses to a single scannable line and opens on click. */
    .bp-group{ margin-top: 22px; }
    .bp-group:first-of-type{ margin-top: 6px; }
    .bp-group-h{
      display:flex; align-items:center; gap:9px;
      padding: 0 0 7px; margin-bottom: 2px;
      border-bottom: 1px solid var(--stroke);
    }
    .bp-group-h .lbl{
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: 10px; letter-spacing: .11em; text-transform: uppercase;
      font-weight: 700; color: var(--muted2);
    }
    .bp-group-h .dot{ width:7px; height:7px; border-radius:50%; flex:0 0 auto; }
    .bp-group-h .n{ font-size: 11.5px; color: var(--muted2); margin-left:auto; }

    .bp-item{ border-bottom: 1px solid var(--stroke); }
    .bp-item:last-child{ border-bottom: none; }
    .bp-row{
      display:flex; align-items:center; gap: 10px;
      padding: 11px 4px; cursor: pointer; user-select: none;
      transition: background .12s ease;
    }
    .bp-row:hover{ background: var(--surface-2); }
    .bp-caret{
      flex:0 0 auto; width:14px; text-align:center; color: var(--muted2);
      font-size: 10px; transition: transform .16s ease;
    }
    .bp-item.open .bp-caret{ transform: rotate(90deg); }
    .bp-title{
      flex: 1 1 auto; min-width: 0; font-size: 13.5px; font-weight: 600;
      color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .bp-item.done .bp-title{ color: var(--muted2); text-decoration: line-through; }
    .bp-owner{
      flex:0 0 auto; font-size: 11.5px; color: var(--muted);
      max-width: 120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    }
    .bp-owner.none{ color: var(--muted2); font-style: italic; }
    /* Effort and impact as two small bars rather than repeating the words on
       every row, where they were near-identical and pure noise. */
    .bp-ei{ display:inline-flex; gap:3px; flex:0 0 auto; align-items:flex-end; height:12px; }
    .bp-ei i{ display:block; width:4px; border-radius:1px; background: var(--stroke-strong); }
    .bp-ei i[data-l="low"]{ height:4px; }
    .bp-ei i[data-l="medium"]{ height:8px; }
    .bp-ei i[data-l="high"]{ height:12px; background: var(--accent); }
    .bp-status{
      flex:0 0 auto; width:auto; min-height:26px; padding:3px 24px 3px 9px;
      font-size:11px; font-weight:600; border-radius:999px; min-width:0;
      background-position: calc(100% - 12px) calc(50% - 1px), calc(100% - 8px) calc(50% - 1px);
    }
    .bp-detail{ padding: 2px 4px 16px 28px; }
    .bp-detail p{ font-size:12.5px; color:var(--muted); line-height:1.6; margin:0 0 10px; }
    .bp-meta{ font-size:11.5px; color:var(--muted2); margin-bottom:10px; }
    .bp-ev{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-bottom:12px; }
    .bp-ev .k{
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size:9.5px; letter-spacing:.09em; text-transform:uppercase;
      font-weight:700; color:var(--muted2);
    }
    .bp-controls{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
    .bp-controls select{ width:auto; min-height:32px; padding:5px 26px 5px 10px; font-size:11.5px; }

    /* Ask card: the answer takes all the free height and sources sits at the
       bottom of the column, so the middle card doesn't leave a large dead gap
       underneath. Both boxes scroll internally rather than growing the card. */
    .ask-card .card-body{ overflow-y: auto; min-height: 0; flex: 1 1 auto; }
    .ask-card .answer-sources{
      display: flex;
      flex-direction: column;
      gap: 12px;
      flex: 1 1 auto;
      min-height: 0;
    }
    .ask-card .answer{
      flex: 1 1 auto;
      height: auto;
      min-height: 150px;
    }
    .ask-card .evidence-box{ flex: 0 0 auto; }
    .ask-card .sources{
      flex: 0 0 auto;
      height: auto;
      min-height: 0;
      max-height: 210px;
      margin-top: auto;   /* pin to the bottom even when the answer is short */
    }
    .ask-card .suggest-box,
    .ask-card .conv-bar,
    .ask-card .fb-bar{ flex: 0 0 auto; }
    .answer,
    .sources,
    .history-list-wrap,
    .doc-list-wrap{
      border: 1px solid var(--stroke);
      background: var(--surface-2);
      border-radius: var(--radius2);
      width: auto;
      min-width: 0;
      margin: 0;
      padding: 16px;
    }
    .answer{
      min-height: 260px;
      overflow-y: auto;
      flex: 1 1 auto;
    }
    .sources{
      height: 200px;
      min-height: 200px;
      max-height: 200px;
      overflow-y: auto;
      flex: 0 0 auto;
      position: relative;
      z-index: 1;
    }
    .doc-list-wrap{
      min-height: 0;
      overflow-y: auto;
      flex: 1 1 auto;
    }
    .history-list-wrap{
      min-height: 0;
      overflow-y: auto;
      flex: 1 1 auto;
    }
    .answer-text{
      margin: 0;
      white-space: pre-wrap;
      word-wrap: break-word;
      font-family: var(--font-display);
      color: var(--text);
      font-size: 13px;
      line-height: 1.7;
      background: transparent;
    }
    .evidence-box{
      display: none;
      padding: 16px;
      border: 1px solid var(--stroke);
      background: var(--surface);
      border-radius: var(--radius2);
      margin: 0;
    }
    .evidence-label{
      font-size: 10.5px;
      font-weight: 700;
      color: var(--accent);
      margin-bottom: 10px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
    }
    .evidence-content{
      font-size: 13px;
      line-height: 1.75;
      color: var(--text);
      background: var(--surface-2);
      padding: 14px;
      border-radius: 8px;
      border-left: 3px solid var(--accent);
    }
    ul{
      margin: 0;
      padding-left: 0;
      list-style: none;
      color: var(--muted);
      font-size: 12.5px;
      line-height: 1.5;
    }
    li{
      margin: 0;
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap: 10px;
      padding: 12px 0;
      border-bottom: 1px solid #EAEEF3;
    }
    li:last-child{
      border-bottom: none;
    }
    .src-meta{
      display:flex;
      flex-direction:column;
      gap: 2px;
      min-width:0;
      flex: 1 1 auto;
    }
    .src-title{
      color: var(--text);
      font-size: 12.5px;
      white-space: normal;
      overflow-wrap: anywhere;
      word-break: break-word;
    }
    .src-sub{
      color: var(--muted2);
      font-size: 11.5px;
      margin-top: 2px;
    }
    .list-item{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap: 12px;
      padding: 12px 0;
      border-bottom: 1px solid #EAEEF3;
    }
    .list-item:last-child{
      border-bottom:none;
    }
    .list-item-main{
      flex: 1 1 auto;
      min-width: 0;
    }
    .list-item-title{
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 4px;
      overflow-wrap:anywhere;
    }
    .list-item-sub{
      font-size: 11.5px;
      color: var(--muted2);
      line-height: 1.5;
    }
    .empty-state{
      font-size: 12.5px;
      color: var(--muted2);
    }

    /* ------------------------------------------------- Modals */
    .modal-backdrop{
      position: fixed;
      inset: 0;
      background: rgba(8,17,28,0.55);
      backdrop-filter: blur(8px);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 18px;
      z-index: 50;
    }
    .modal{
      width: min(920px, 100%);
      max-height: min(80vh, 820px);
      overflow: hidden;
      border-radius: var(--radius);
      border: 1px solid var(--stroke);
      background: var(--surface);
      box-shadow: var(--shadow-lg);
      display:flex;
      flex-direction:column;
    }
    .modal-head{
      padding: 14px 18px;
      border-bottom: 1px solid var(--stroke);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 10px;
    }
    .modal-title{
      display:flex;
      flex-direction:column;
      gap: 2px;
      min-width: 0;
    }
    .modal-title strong{
      font-size: 13.5px;
      font-weight: 650;
      color: var(--text);
      white-space: nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .modal-title span{
      font-size: 12px;
      color: var(--muted2);
    }
    .modal-body{
      padding: 20px;
      overflow:auto;
      background: var(--surface-2);
    }
    .snippet{
      font-family: var(--font-display);
      font-size: 14px;
      line-height: 1.75;
      color: var(--text);
      white-space: pre-wrap;
      background: var(--surface);
      border: 1px solid var(--stroke);
      border-radius: var(--radius2);
      padding: 18px 18px 20px;
      box-shadow: var(--shadow);
    }
    mark{
      background: rgba(13,148,136,0.16);
      color: var(--text);
      padding: 1px 3px;
      border-radius: 4px;
    }
    .guide-content{
      display:flex;
      flex-direction:column;
      gap: 14px;
    }
    .guide-section{
      background: var(--surface);
      border: 1px solid var(--stroke);
      border-radius: var(--radius2);
      padding: 16px 18px;
    }
    .guide-section h4{
      margin: 0 0 8px 0;
      font-size: 13.5px;
      font-weight: 650;
      color: var(--text);
    }
    .guide-section p,
    .guide-section li{
      font-size: 13px;
      color: var(--muted);
      line-height: 1.6;
      border-bottom: none;
      padding: 0;
      margin: 0;
    }
    .guide-section ul{
      padding-left: 18px;
      list-style: disc;
    }
    .guide-section ul li{
      margin: 6px 0;
      display:list-item;
    }
    #fileInput{ display:none !important; }

    /* -----------------------------------------------
       PDF preview modal mode
    ----------------------------------------------- */
    .modal.pdf-mode {
      max-height: 94vh;
      height: 94vh;
    }
    .modal.pdf-mode .modal-body {
      flex: 1 1 0;
      padding: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    #sourcePdfFrame {
      flex: 1 1 auto;
      min-height: 0;
      width: 100%;
      border: none;
      display: block;
    }

    /* -----------------------------------------------
       Login overlay
    ----------------------------------------------- */
    #loginOverlay {
      position: fixed;
      inset: 0;
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 18px;
      background-color: var(--bg);
      background-image:
        var(--bg);
      background-repeat: no-repeat;
      background-attachment: fixed;
      transition: opacity 0.35s ease;
    }
    #loginOverlay.fade-out {
      opacity: 0;
      pointer-events: none;
    }
    .login-card {
      width: min(430px, 100%);
      background: var(--surface);
      border: 1px solid var(--stroke);
      border-radius: 22px;
      box-shadow:
        var(--shadow-lg),
        0 0 60px rgba(13,148,136,0.10);
      padding: 38px 34px 32px;
    }
    .login-logo-wrap {
      display: flex;
      justify-content: center;
      margin-bottom: 22px;
    }
    .login-logo-wrap .logo {
      width: 60px;
      height: 60px;
      border-radius: 16px;
      box-shadow: 0 12px 30px rgba(13,148,136,0.28);
    }
    .login-title {
      margin: 0 0 6px;
      font-family: var(--font-display);
      font-size: 22px;
      font-weight: 700;
      letter-spacing: -0.01em;
      text-align: center;
      color: var(--text);
    }
    .login-sub {
      margin: 0 0 24px;
      font-size: 13px;
      color: var(--muted);
      text-align: center;
      line-height: 1.5;
    }
    .login-fields {
      display: flex;
      flex-direction: column;
      gap: 14px;
      margin-bottom: 6px;
    }
    .login-field-group {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .login-field-group .field-label {
      margin-bottom: 0;
    }
    .login-error {
      min-height: 22px;
      font-size: 12.5px;
      color: var(--danger);
      margin: 8px 0 10px;
      text-align: center;
      line-height: 1.4;
    }
    .login-submit-btn {
      width: 100%;
      padding: 12px 16px;
      font-size: 14px;
      border-radius: var(--radius2);
      margin-bottom: 16px;
    }
    .login-toggle {
      margin: 0;
      font-size: 12.5px;
      color: var(--muted);
      text-align: center;
    }
    .login-toggle a {
      color: var(--accent);
      font-weight: 600;
      cursor: pointer;
      text-decoration: underline;
      text-decoration-color: rgba(13,148,136,0.3);
    }
    .login-toggle a:hover {
      color: var(--accent-deep);
    }

    /* -----------------------------------------------
       Phase 3: Streaming cursor
    ----------------------------------------------- */
    .answer-text.streaming::after {
      content: '▋';
      animation: blink 1s step-end infinite;
      color: var(--accent);
      margin-left: 2px;
    }
    @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

    /* -----------------------------------------------
       Phase 3: Feedback bar
    ----------------------------------------------- */
    .fb-bar {
      display: none;
      align-items: center;
      gap: 8px;
      padding: 14px 0 6px;
      margin-top: 10px;
      border-top: 1px solid var(--stroke);
      flex-wrap: wrap;
    }
    .fb-label { font-size: 12px; color: var(--muted); }
    .fb-btn {
      padding: 6px 14px;
      border-radius: 8px;
      border: 1px solid var(--stroke-strong);
      background: var(--surface);
      cursor: pointer;
      font-size: 13px;
      font-family: inherit;
      transition: all 0.15s ease;
    }
    .fb-btn:hover { background: var(--surface-2); border-color: #C4CDD8; }
    .fb-btn.active-pos { background: rgba(13,148,136,0.10); border-color: rgba(13,148,136,0.45); }
    .fb-btn.active-neg { background: rgba(217,45,32,0.08); border-color: rgba(217,45,32,0.38); }
    .fb-btn.active-flag { background: rgba(220,104,3,0.08); border-color: rgba(220,104,3,0.38); }

    /* -----------------------------------------------
       Phase 3: Conversation bar
    ----------------------------------------------- */
    .conv-bar {
      display: none;
      align-items: center;
      gap: 10px;
      row-gap: 10px;
      flex-wrap: wrap;
      padding: 16px 0 2px;
      margin-top: 10px;
      border-top: 1px solid var(--stroke);
    }
    .conv-bar .btn { flex-shrink: 0; }
    .conv-badge {
      background: var(--accent-tint);
      border: 1px solid rgba(13,148,136,0.28);
      border-radius: 999px;
      padding: 3px 10px;
      font-size: 11px;
      font-weight: 600;
      color: rgba(16,27,41,0.82);
    }

    /* -----------------------------------------------
       Phase 3: Admin panel overlay
    ----------------------------------------------- */
    #adminPanel, #companyPanel {
      position: fixed;
      inset: 0;
      z-index: 8888;
      background: rgba(16,24,40,0.40);
      backdrop-filter: blur(4px);
      display: none;
      align-items: flex-start;
      justify-content: center;
      padding: 24px 18px 40px;
      overflow-y: auto;
    }
    .admin-modal {
      width: min(1100px, 100%);
      background: var(--surface);
      border: 1px solid var(--stroke);
      border-radius: var(--radius);
      box-shadow: var(--shadow-lg);
      overflow: hidden;
      margin: auto;
    }
    .admin-head {
      padding: 16px 22px;
      border-bottom: 1px solid var(--stroke);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .admin-head strong { font-size: 14.5px; font-weight: 650; letter-spacing: -0.01em; }
    .admin-tabs {
      display: flex;
      gap: 2px;
      padding: 10px 18px 0;
      border-bottom: 1px solid var(--stroke);
      flex-wrap: wrap;
    }
    .admin-tab, .co-tab {
      padding: 9px 14px 11px;
      border-radius: 0;
      border: none;
      border-bottom: 2px solid transparent;
      background: transparent;
      cursor: pointer;
      font-size: 13px;
      font-weight: 600;
      color: var(--muted2);
      transition: color 0.15s, border-color 0.15s;
      font-family: inherit;
      margin-bottom: -1px;
    }
    .admin-tab:hover, .co-tab:hover { color: var(--text); }
    .admin-tab.active, .co-tab.active {
      background: transparent;
      border-bottom-color: var(--accent);
      color: var(--text);
    }
    .admin-body { padding: 22px; min-height: 400px; }
    .admin-section, .co-section { display: none; }
    .admin-section.active, .co-section.active { display: block; }
    .admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
    .admin-table th {
      text-align: left;
      padding: 10px 12px;
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--muted2);
      border-bottom: 1px solid var(--stroke);
      background: var(--surface-2);
    }
    .admin-table td {
      padding: 11px 12px;
      border-bottom: 1px solid var(--stroke);
      color: var(--text);
      vertical-align: middle;
    }
    .admin-table tr:last-child td { border-bottom: none; }
    .role-badge, .status-badge {
      display: inline-flex;
      padding: 3px 10px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 600;
    }
    .role-badge.admin { background: rgba(13,148,136,0.10); color: var(--accent-deep); }
    .role-badge.user  { background: rgba(87,103,122,0.10); color: var(--muted); }
    .status-badge.enabled  { background: rgba(13,148,136,0.10); color: var(--accent-deep); }
    .status-badge.disabled { background: rgba(217,45,32,0.08); color: #B42318; }
    .flagged-entry, .audit-entry {
      padding: 12px 16px;
      border: 1px solid var(--stroke);
      border-radius: var(--radius2);
      margin-bottom: 8px;
      background: var(--surface);
      font-size: 13px;
    }
    .flagged-entry .fq { font-weight: 600; margin-bottom: 4px; color: var(--text); }
    .flagged-entry .fa { color: var(--muted); font-size: 12px; line-height: 1.5; }
    .flagged-entry .fm { font-size: 11px; color: var(--muted2); margin-top: 6px; }
    .audit-entry { display: flex; gap: 12px; align-items: flex-start; }
    .audit-time   { color: var(--muted2); font-size: 11.5px; white-space: nowrap; flex-shrink: 0; }
    .audit-action { font-weight: 600; color: var(--text); font-size: 13px; }
    .audit-detail { color: var(--muted); font-size: 12px; }
    .admin-stat-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
      gap: 14px;
      margin-bottom: 22px;
    }
    .admin-stat-box {
      border: 1px solid var(--stroke);
      border-radius: var(--radius2);
      background: var(--surface-2);
      padding: 16px;
    }
    .shared-badge {
      font-size: 10px;
      background: rgba(13,148,136,0.10);
      color: var(--accent-deep);
      padding: 1px 7px;
      border-radius: 999px;
      font-weight: 600;
      margin-left: 4px;
    }

    /* -----------------------------------------------
       Phase 4: tier & role badges
    ----------------------------------------------- */
    .tier-badge {
      font-size: 10px;
      padding: 2px 8px;
      border-radius: 999px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
    .tier-badge.basic      { background: rgba(87,103,122,0.10); color: var(--muted); }
    .tier-badge.pro        { background: rgba(46,111,216,0.10);  color: #1D4FA8; }
    .tier-badge.enterprise { background: rgba(13,148,136,0.10);  color: var(--accent-deep); }
    .role-badge.company_admin { background: rgba(46,111,216,0.10); color: #1D4FA8; }
    .role-badge.member    { background: rgba(87,103,122,0.10); color: var(--muted); }
    .role-badge.viewer    { background: rgba(220,104,3,0.10); color: #B54708; }

    /* -----------------------------------------------
       Phase 4: login extras (remember me, forgot, invite)
    ----------------------------------------------- */
    .login-options {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin: 10px 2px 0;
      font-size: 12.5px;
      color: var(--muted);
    }
    .remember-label {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      cursor: pointer;
      user-select: none;
    }
    .remember-label input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
    .forgot-link {
      color: var(--accent);
      font-weight: 600;
      cursor: pointer;
      text-decoration: underline;
      text-decoration-color: rgba(13,148,136,0.3);
    }
    .invite-notice {
      background: var(--accent-tint);
      border: 1px solid rgba(13,148,136,0.28);
      border-radius: var(--radius2);
      padding: 10px 14px;
      font-size: 12.5px;
      color: var(--accent-deep);
      margin-bottom: 14px;
      line-height: 1.5;
    }
    .login-success {
      min-height: 22px;
      font-size: 12.5px;
      color: var(--accent-deep);
      margin: 8px 0 10px;
      text-align: center;
      line-height: 1.4;
    }

    /* -----------------------------------------------
       Phase 4: changelog ("What's new")
    ----------------------------------------------- */
    .notif-dot {
      position: absolute;
      top: -3px;
      right: -3px;
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--danger);
      border: 2px solid #fff;
    }
    .changelog-entry {
      background: var(--surface);
      border: 1px solid var(--stroke);
      border-radius: var(--radius2);
      padding: 16px 18px;
      margin-bottom: 12px;
    }
    .changelog-entry h4 { margin: 0 0 6px; font-size: 14px; font-weight: 650; color: var(--text); }
    .changelog-entry .cl-date { font-size: 11.5px; color: var(--muted2); margin-bottom: 8px; }
    .changelog-entry .cl-body { font-size: 13px; color: var(--muted); line-height: 1.6; white-space: pre-wrap; }

    /* -----------------------------------------------
       Phase 4: preferences modal
    ----------------------------------------------- */
    .prefs-group { margin-bottom: 16px; }
    .prefs-hint { font-size: 11.5px; color: var(--muted2); margin: 6px 2px 0; line-height: 1.5; }
    .pref-toggle {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 12px 2px;
      font-size: 13px;
      color: var(--text);
      cursor: pointer;
      user-select: none;
      border-bottom: 1px solid var(--stroke);
      line-height: 1.5;
    }
    .pref-toggle input { width: 17px; height: 17px; margin-top: 1px; accent-color: var(--accent); cursor: pointer; flex-shrink: 0; }

    /* -----------------------------------------------
       Phase 4: admin invites / settings / changelog tabs
    ----------------------------------------------- */
    .admin-form-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto auto auto;
      gap: 10px;
      align-items: center;
      margin-bottom: 14px;
    }
    .admin-form-row input[type="text"], .admin-form-row select { min-height: 44px; padding: 10px 14px; border-radius: var(--radius2); }
    .admin-form-row select { padding-right: 40px; }
    .admin-textarea {
      width: 100%;
      min-height: 110px;
      padding: 12px 14px;
      border-radius: var(--radius2);
      border: 1px solid var(--stroke-strong);
      background: var(--surface);
      color: var(--text);
      font-size: 13px;
      font-family: inherit;
      outline: none;
      resize: vertical;
      box-sizing: border-box;
      transition: border-color .15s ease, box-shadow .15s ease;
    }
    .admin-textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--ring); }
    .invite-link-box {
      background: var(--surface-2);
      border: 1px dashed var(--stroke-strong);
      border-radius: 8px;
      padding: 10px 12px;
      font-size: 12px;
      color: var(--text);
      word-break: break-all;
      margin: 8px 0;
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    }
    .status-badge.pending { background: rgba(46,111,216,0.08); color: #1D4FA8; }
    .status-badge.used    { background: rgba(87,103,122,0.10); color: var(--muted); }
    .status-badge.expired { background: rgba(217,45,32,0.08); color: #B42318; }
    .admin-table-scroll { overflow-x: auto; }

    /* -----------------------------------------------
       Phase 4: confidence indicator (Pro)
    ----------------------------------------------- */
    .confidence-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 12px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }
    .confidence-badge.high   { background: rgba(13,148,136,0.10);  color: var(--accent-deep); border: 1px solid rgba(13,148,136,0.28); }
    .confidence-badge.medium { background: rgba(220,104,3,0.08);  color: #B54708; border: 1px solid rgba(220,104,3,0.28); }
    .confidence-badge.low    { background: rgba(217,45,32,0.08);   color: #B42318;  border: 1px solid rgba(217,45,32,0.26); }

    /* -----------------------------------------------
       Phase 4: suggested questions (Pro)
    ----------------------------------------------- */
    .suggest-box {
      display: none;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      padding: 16px 0 2px;
      margin-top: 6px;
      border-top: 1px solid var(--stroke);
    }
    .suggest-label {
      flex: 0 0 100%;
      font-size: 10.5px;
      font-weight: 600;
      color: var(--muted2);
      text-transform: uppercase;
      letter-spacing: 0.07em;
      margin-bottom: 2px;
    }
    .suggest-chip {
      border: 1px solid rgba(46,111,216,0.26);
      background: rgba(46,111,216,0.06);
      color: #1D4FA8;
      border-radius: 999px;
      padding: 7px 14px;
      font-size: 12px;
      font-weight: 500;
      cursor: pointer;
      font-family: inherit;
      text-align: left;
      transition: background .15s ease;
    }
    .suggest-chip:hover { background: rgba(46,111,216,0.12); }

    /* -----------------------------------------------
       Phase 4: support chatbot (Enterprise)
    ----------------------------------------------- */
    #supportWidget {
      position: fixed;
      bottom: 20px;
      right: 20px;
      z-index: 7000;
      display: none;
      flex-direction: column;
      align-items: flex-end;
      gap: 10px;
    }
    #supportToggle {
      width: 54px;
      height: 54px;
      border-radius: 50%;
      border: none;
      background: var(--accent-grad);
      color: #fff;
      font-size: 20px;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 12px 32px rgba(13,148,136,0.45), inset 0 1px 0 rgba(255,255,255,0.25);
      transition: box-shadow .15s ease, transform .15s ease;
    }
    #supportToggle:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(13,148,136,0.55), inset 0 1px 0 rgba(255,255,255,0.25); }
    #supportPanel {
      display: none;
      width: min(340px, calc(100vw - 40px));
      height: 440px;
      max-height: 70vh;
      background: var(--surface);
      border: 1px solid var(--stroke);
      border-radius: var(--radius);
      box-shadow: var(--shadow-lg);
      flex-direction: column;
      overflow: hidden;
    }
    .support-head {
      padding: 13px 16px;
      background: var(--accent-grad);
      color: #fff;
      font-weight: 650;
      font-size: 13px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .support-msgs {
      flex: 1;
      overflow-y: auto;
      padding: 14px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .support-msg {
      max-width: 85%;
      padding: 9px 12px;
      border-radius: 10px;
      font-size: 12.5px;
      line-height: 1.5;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }
    .support-msg.user { align-self: flex-end; background: var(--accent-tint); }
    .support-msg.bot  { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--stroke); }
    .support-input {
      display: flex;
      gap: 8px;
      padding: 10px;
      border-top: 1px solid var(--stroke);
    }
    .support-input input { flex: 1; min-height: 40px; padding: 8px 12px; }

    /* -----------------------------------------------
       Phase 4: 2FA setup + integrations admin
    ----------------------------------------------- */
    .twofa-qr { display: flex; justify-content: center; margin: 12px 0; }
    .twofa-secret {
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: 12px;
      background: var(--surface-2);
      border: 1px dashed var(--stroke-strong);
      border-radius: 8px;
      padding: 8px 10px;
      word-break: break-all;
      margin: 8px 0;
    }
    .integration-card {
      border: 1px solid var(--stroke);
      border-radius: var(--radius2);
      background: var(--surface);
      padding: 16px;
      margin-bottom: 12px;
    }
    .intg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
    @media (max-width: 700px){ .intg-grid { grid-template-columns: 1fr; } }

    /* Document library action buttons — stacked so filenames keep their width */
    .doc-actions {
      display: flex;
      flex-direction: column;
      gap: 6px;
      flex-shrink: 0;
      align-items: stretch;
    }
    .list-item-main { min-width: 110px; }

    /* -----------------------------------------------
       Phase 4: mobile-friendly responsive design
       (all core features usable at 375px wide)
    ----------------------------------------------- */
    @media (max-width: 1000px){
      .app{ grid-template-columns: 1fr; }
      .sidebar{
        position: static;
        height: auto;
        flex-direction: row;
        align-items: center;
        gap: 12px;
        padding: 10px 16px;
        border-right: none;
        border-bottom: 1px solid var(--stroke);
      }
      .side-nav{ flex-direction: row; margin-top: 0; margin-left: auto; }
      .nav-item{ width: auto; padding: 9px 12px; }
      .side-foot{
        flex-direction: row;
        align-items: center;
        gap: 8px;
        margin-top: 0;
        padding-top: 0;
        border-top: none;
      }
      .side-foot .account-chip{ width: auto; }
      .side-foot .btn{ width: auto; padding: 8px 11px; }
      .sidebar .chipset{
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        margin-top: 0;
        padding-top: 0;
        border-top: none;
      }
      .sidebar .chipset .btn{ width: auto; padding: 8px 11px; }
      .sidebar .chipset .chip{ width: auto; margin-top: 0; }
      .sidebar .chipset .notif-dot{ top: 5px; right: 6px; }
      .topbar{ position: static; padding: 12px 16px; }
      .page-heading p{ display: none; }
    }
    .btn, select, input[type="text"], input[type="password"] { touch-action: manipulation; }
    @media (max-width: 700px){
      .content{ padding: 12px 10px 28px; }
      .topbar{ padding: 12px; }
      .chip.decor-chip{ display:none; }
      .brand p{ display:none; }
      /* Logo-only brand on small screens — stops the logo sliding under the
         nav pills when the brand block shrinks. */
      .brand{ flex: 0 0 auto; }
      .brand h1{ display:none; }
      /* Let the top bar flow onto extra rows instead of clipping the
         What's new / Settings / Guide buttons off-screen. */
      .sidebar{ flex-wrap: wrap; row-gap: 4px; }
      .hero{ padding: 18px 16px; }
      .hero h2{ font-size: 20px; }
      .hero-cards{ display:none; }
      .chart-wrap, .small-chart-wrap{ height: 240px; }
      .stat-card{ min-height: 100px; padding: 14px; }
      .stat-value{ font-size: 22px; }
      .card-head{ padding: 14px 14px 12px; }
      .card-body{ padding: 14px; }
      .btn{ min-height: 44px; }
      .btn.sm, .btn.ghost{ min-height: 40px; }
      .chatbox{ grid-template-columns: 1fr; }
      .row{ grid-template-columns: 1fr; }
      .answer{ height: 240px; }
      .sources{ height: 170px; min-height: 170px; max-height: 170px; }
      .doc-list-wrap, .history-list-wrap{ max-height: 320px; }
      .conv-bar{ flex-wrap: wrap; }
      .conv-bar .btn{ flex: 1 1 auto; }
      .fb-bar .fb-btn{ min-height: 40px; }
      .modal{ max-height: 92vh; }
      .modal-body{ padding: 14px; }
      .login-card{ padding: 26px 18px 22px; }
      .admin-body{ padding: 14px; min-height: 300px; }
      .admin-tabs{ padding: 10px 14px 0; gap: 2px; }
      .admin-tab, .co-tab{ padding: 8px 10px; font-size: 12px; }
      .admin-table{ min-width: 640px; }
      .admin-form-row{ grid-template-columns: 1fr; }
      #adminPanel, #companyPanel{ padding: 10px 6px 24px; }
    }

    /* =====================================================================
       Lower-section refinement — document library, question history, answer
       and sources. Presentational only (scoped overrides); no markup or
       behaviour change. The library and history lists share one card style.
    ===================================================================== */
    .library-card .doc-list-wrap,
    .history-card .history-list-wrap{
      padding: 8px;
      background: var(--surface-2);
      border-color: var(--stroke);
    }
    .library-card .doc-list-wrap .list-item,
    .history-card .history-list-wrap .list-item{
      border: 1px solid var(--stroke);
      background: var(--surface);
      border-radius: var(--radius2);
      padding: 13px 14px;
      margin-bottom: 8px;
      align-items: center;
      transition: border-color .15s ease, box-shadow .15s ease;
    }
    .library-card .doc-list-wrap .list-item:last-child,
    .history-card .history-list-wrap .list-item:last-child{
      margin-bottom: 0;
      border-bottom: 1px solid var(--stroke);
    }
    .library-card .doc-list-wrap .list-item:hover,
    .history-card .history-list-wrap .list-item:hover{
      border-color: var(--stroke-strong);
      box-shadow: var(--shadow-md);
    }
    .library-card .list-item-title,
    .history-card .list-item-title{
      font-size: 13px;
      font-weight: 600;
      letter-spacing: -0.01em;
      line-height: 1.38;
    }
    .library-card .list-item-sub,
    .history-card .list-item-sub{
      font-size: 11px;
      color: var(--muted2);
      letter-spacing: 0.01em;
      margin-top: 4px;
    }
    .library-card .doc-actions .btn{
      padding: 6px 12px;
      font-size: 11.5px;
      min-height: 0;
      border-radius: 7px;
    }
    /* History pin button — quieter until hovered */
    .history-card .history-list-wrap .list-item .btn.ghost{
      border-color: transparent;
      background: transparent;
      opacity: 0.5;
      transition: opacity .15s ease, background .15s ease;
    }
    .history-card .history-list-wrap .list-item:hover .btn.ghost{ opacity: 1; }
    .library-card .empty-state,
    .history-card .empty-state{
      text-align: center;
      padding: 30px 14px;
      color: var(--muted2);
    }
    /* Answer + Sources cards */
    .answer-sources .answer,
    .answer-sources .sources{
      border: 1px solid var(--stroke);
      background: var(--surface);
      border-radius: var(--radius2);
      box-shadow: var(--shadow);
      padding: 16px 18px 18px;
    }
    .answer-sources .answer::before,
    .answer-sources .sources::before{
      content: "Answer";
      display: block;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 11px;
    }
    .answer-sources .sources::before{ content: "Sources"; }
    .answer-sources .answer-text{
      font-size: 13.5px;
      line-height: 1.78;
    }
    .answer-sources .sources li{ padding: 11px 0; }
    .answer-sources .src-title{ font-size: 12.5px; line-height: 1.5; }
    /* Indexing "Folder" row — match the select height to the New folder button */
    #uploadFolderSelect{
      min-height: 44px;
      padding-top: 10px;
      padding-bottom: 10px;
      border-radius: 8px;
    }
    #newFolderBtn{ min-height: 44px; }
    /* Library file cards — details span the full width on top, the Analyse /
       Delete buttons sit in an even row across the bottom (no side overlap). */
    .library-card .doc-list-wrap .list-item{
      flex-direction: column;
      align-items: stretch;
      gap: 10px;
    }
    .library-card .doc-list-wrap .list-item .list-item-main{
      width: 100%;
      min-width: 0;
    }
    .library-card .doc-list-wrap .list-item .doc-actions{
      flex-direction: row;
      gap: 8px;
      width: 100%;
    }
    .library-card .doc-list-wrap .list-item .doc-actions .btn,
    .library-card .doc-list-wrap .list-item > .btn{
      flex: 1 1 0;
      min-width: 0;
      padding: 7px 10px;
      font-size: 11px;
      text-align: center;
    }

    /* =====================================================================
       Billing — customer plan view and the admin plan dashboard
    ===================================================================== */
    .billing-head-actions{
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end;
      align-items: center;
    }
    #view-billing .btn[disabled]{
      opacity: 0.5;
      cursor: not-allowed;
      box-shadow: none;
      transform: none;
    }
    .billing-banner{
      border: 1px solid var(--stroke-strong);
      border-left: 3px solid var(--warn);
      background: var(--surface-2);
      border-radius: var(--radius);
      padding: var(--inner-pad);
      box-shadow: var(--shadow);
    }
    .billing-banner strong{
      display: block;
      font-size: 13.5px;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 6px;
    }
    .billing-banner p{
      margin: 0;
      font-size: 12.5px;
      line-height: 1.55;
      color: var(--muted);
    }
    .billing-note{
      font-size: 12px;
      line-height: 1.55;
      color: var(--muted2);
      margin: 10px 0 0;
    }
    .billing-summary{
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--gap);
    }
    @media (min-width: 760px){
      .billing-summary{ grid-template-columns: 1fr 1fr; }
    }
    .billing-block{
      border: 1px solid var(--stroke);
      border-radius: var(--radius2);
      background: var(--surface-2);
      padding: 16px;
      min-width: 0;
    }
    .billing-tier-row{
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 10px;
    }
    .billing-tier-name{
      font-family: var(--font-display);
      font-size: 20px;
      font-weight: 600;
      letter-spacing: -0.01em;
      color: var(--text);
    }
    .billing-line{
      font-size: 12.5px;
      line-height: 1.6;
      color: var(--muted);
    }
    .billing-line + .billing-line{ margin-top: 4px; }
    .billing-line b{ color: var(--text); font-weight: 600; }
    .billing-meter{ margin-top: 14px; }
    .billing-meter:first-child{ margin-top: 0; }
    .billing-meter-head{
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 10px;
      font-size: 12.5px;
      color: var(--muted);
      margin-bottom: 7px;
    }
    .billing-meter-head b{ color: var(--text); font-weight: 600; }
    .billing-meter-track{
      height: 8px;
      border-radius: 999px;
      background: var(--surface);
      border: 1px solid var(--stroke);
      overflow: hidden;
    }
    .billing-meter-fill{
      display: block;
      height: 100%;
      border-radius: 999px;
      background: var(--accent);
    }
    .billing-meter-fill.warn{ background: var(--warn); }
    .billing-meter-fill.over{ background: var(--danger); }
    .status-badge.billing-active  { background: var(--accent-tint); color: var(--accent-deep); }
    .status-badge.billing-warn    { background: var(--surface-2); color: var(--warn); }
    .status-badge.billing-danger  { background: var(--surface-2); color: var(--danger); }
    .status-badge.billing-none    { background: var(--surface-2); color: var(--muted); }
    .billing-plan-grid{
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--gap);
    }
    @media (min-width: 760px){
      .billing-plan-grid{ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
    }
    .billing-plan-card{
      border: 1px solid var(--stroke);
      border-radius: var(--radius2);
      background: var(--surface);
      padding: 18px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      min-width: 0;
    }
    .billing-plan-card.current{
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--ring);
    }
    .billing-plan-name{
      font-family: var(--font-display);
      font-size: 15px;
      font-weight: 600;
      color: var(--text);
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .billing-plan-price{
      font-family: var(--font-display);
      font-size: 24px;
      font-weight: 600;
      letter-spacing: -0.01em;
      color: var(--text);
      font-variant-numeric: tabular-nums;
    }
    .billing-plan-price span{
      font-size: 12px;
      font-weight: 600;
      color: var(--muted2);
      letter-spacing: 0;
    }
    .billing-plan-list{
      margin: 0;
      padding: 0;
      list-style: none;
      font-size: 12.5px;
      line-height: 1.6;
      color: var(--muted);
    }
    .billing-plan-card .btn{ margin-top: auto; }
    .billing-current-pill{
      font-size: 10px;
      padding: 2px 8px;
      border-radius: 999px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      background: var(--accent-tint);
      color: var(--accent-deep);
    }
    /* Nothing on this screen may fail silently, so errors get a real block
       rather than a colour change on existing text. */
    .billing-error{
      border: 1px solid var(--stroke-strong);
      border-left: 3px solid var(--danger);
      background: var(--surface-2);
      border-radius: var(--radius2);
      padding: 12px 14px;
      font-size: 12.5px;
      line-height: 1.55;
      color: var(--danger);
    }
    .card-body > .billing-error{ margin-top: 4px; }
    .billing-line.billing-ending{ color: var(--warn); }
    .billing-line.billing-card-summary{
      font-size: 14px;
      color: var(--text);
      font-weight: 600;
      font-variant-numeric: tabular-nums;
    }
    /* The inline card form: revealed in place under the saved-card summary,
       never in a modal — losing a half-typed card number to a stray click
       outside a dialog is a bad way to buy something. */
    .billing-card-form{
      margin-top: 16px;
      padding-top: 16px;
      border-top: 1px solid var(--stroke);
    }
    .billing-card-label{
      display: block;
      font-size: 12px;
      font-weight: 600;
      color: var(--muted);
      margin-bottom: 7px;
    }
    /* Stripe mounts its own iframe in here; this is the frame around it, and
       it has to reserve its own height because the iframe starts at zero. */
    .billing-card-element{
      border: 1px solid var(--stroke-strong);
      border-radius: var(--radius2);
      background: var(--surface);
      padding: 12px 14px;
      min-height: 44px;
      box-shadow: var(--shadow);
    }
    .billing-card-element.StripeElement--focus{
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--ring);
    }
    .billing-card-element.StripeElement--invalid{ border-color: var(--danger); }
    .billing-card-form .billing-error{ margin-top: 10px; }
    .billing-form-actions{
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      align-items: center;
      margin-top: 14px;
    }
    .billing-pdf-link{
      color: var(--accent-deep);
      font-weight: 600;
      text-decoration: none;
      border-bottom: 1px solid var(--stroke-strong);
    }
    .billing-pdf-link:hover{ border-bottom-color: var(--accent); }
    .billing-dash{ color: var(--muted2); }
    .admin-billing-sub{
      font-size: 11.5px;
      color: var(--muted2);
      display: block;
      margin-top: 2px;
    }
    .admin-table td .billing-extra{
      font-size: 11.5px;
      color: var(--muted2);
    }

/* Admin billing tiles hold money as well as counts; money is much wider than a
   plain figure, so step the size down rather than ellipsing it. */
.admin-stat-box .stat-value{
  font-size: 20px;
  letter-spacing: normal;
  /* Money carries a currency suffix and will not fit on one line in these
     narrow tiles. Wrap it rather than ellipsing digits away — a truncated
     revenue figure is worse than a two-line one. */
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  width: auto;
}

/* Seats panel */
.billing-seats-detail{ color: var(--muted); font-size: 13px; margin-top: 8px; }
.billing-seats-full{ color: var(--warn); font-weight: 600; }

/* Archive indexing progress
   A zip is expanded by a background worker, so the upload card has to show
   work that outlives the request. One row per archive, under the status line. */
.upload-jobs{ display:none; margin-top:10px; }
.job-row{
  padding:10px 12px;
  border:1px solid var(--stroke);
  border-radius:10px;
  background: var(--surface);
  margin-top:8px;
}
.job-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
}
.job-name{
  font-size:12.5px; font-weight:600; color:var(--text);
  /* Pack names are long; keep the count on the same line and readable. */
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;
}
.job-count{ font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums; flex:0 0 auto; }
.job-bar{
  height:4px; margin:8px 0 6px;
  border-radius:999px; background:var(--stroke); overflow:hidden;
}
.job-bar > i{
  display:block; height:100%; width:0;
  border-radius:999px; background:var(--accent);
  transition: width .4s ease;
}
.job-sub{
  font-size:11.5px; color:var(--muted); line-height:1.45;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.job-failed{ color:#B42318; }
/* A path is better truncated than wrapped, but an error is the one thing the
   user has to be able to read, so it wraps. */
.job-sub.job-failed{ white-space:normal; }
.job-toggle{
  margin-top:6px; padding:0;
  background:none; border:0; cursor:pointer;
  font:inherit; font-size:11.5px; color:var(--accent); text-decoration:underline;
}
.job-skips{
  margin:6px 0 0; padding:0; list-style:none;
  max-height:160px; overflow-y:auto;
  font-size:11.5px; color:var(--muted); line-height:1.45;
}
/* A bare `li` rule earlier in this file sets display:flex and a bottom border
   for the document and source lists, so both are reset here explicitly. */
.job-skips li{
  display:block; padding:5px 0;
  border-bottom:0; border-top:1px solid var(--stroke);
}
.job-skips li:first-child{ border-top:0; }
/* File on its own line, reason under it — a narrow column cannot carry both. */
.job-skips b{ display:block; color:var(--text); font-weight:600; word-break:break-word; }
.job-skips span{ display:block; margin-top:1px; }

/* ── Upgrade screen (demo ended / upgrade from the demo banner) ───────────
   The customer picks a plan and pays here without leaving the app. */
.tx-overlay{
  position:fixed; inset:0; z-index:99999;
  display:flex; align-items:center; justify-content:center;
  padding:24px 16px; overflow-y:auto;
  background:rgba(244,244,245,0.94); backdrop-filter:blur(6px);
  font-family:var(--font-display);
}
.tx-card{
  position:relative; width:100%; max-width:520px; margin:auto;
  background:var(--surface); border:1px solid var(--stroke);
  border-radius:18px; box-shadow:0 28px 64px rgba(10,10,10,0.16);
  padding:32px 30px 22px; text-align:left; color:var(--text);
}
.tx-close{
  position:absolute; top:12px; right:14px; width:32px; height:32px;
  border:0; background:none; border-radius:8px; cursor:pointer;
  font-size:22px; line-height:1; color:var(--muted);
}
.tx-close:hover{ background:var(--surface-2); color:var(--text); }
.tx-logo{ height:36px; display:block; margin:0 0 16px; }
.tx-card h2{ font-size:21px; font-weight:600; letter-spacing:-0.01em; margin:0 0 6px; }
.tx-lead{ font-size:14px; line-height:1.55; color:var(--muted); margin:0 0 20px; }
.tx-loading, .tx-note{ font-size:13.5px; color:var(--muted); margin:8px 0 16px; }

.tx-plans{ display:flex; flex-direction:column; gap:8px; margin-bottom:18px; }
.tx-plan{
  display:flex; align-items:center; gap:12px; width:100%;
  padding:13px 14px; text-align:left; cursor:pointer;
  background:var(--surface); color:var(--text);
  border:1px solid var(--stroke); border-radius:12px;
  font:inherit; transition:border-color .15s, box-shadow .15s, background .15s;
}
.tx-plan:hover{ border-color:var(--stroke-strong); }
.tx-plan.is-on{ border-color:var(--accent); box-shadow:0 0 0 3px var(--ring); background:rgba(15,118,110,0.03); }
.tx-plan:disabled{ cursor:default; opacity:.7; }
.tx-radio{
  flex:0 0 auto; width:16px; height:16px; border-radius:50%;
  border:1.5px solid var(--stroke-strong); position:relative;
}
.tx-plan.is-on .tx-radio{ border-color:var(--accent); }
.tx-plan.is-on .tx-radio::after{
  content:""; position:absolute; inset:3px; border-radius:50%; background:var(--accent);
}
.tx-plan-main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.tx-plan-main b{ font-size:14.5px; font-weight:600; }
.tx-plan-main small{ font-size:12px; color:var(--muted); line-height:1.4; }
.tx-price{ flex:0 0 auto; font-size:15px; font-weight:600; font-variant-numeric:tabular-nums; }
.tx-price small{ font-size:12px; font-weight:500; color:var(--muted); margin-left:1px; }

.tx-label{ display:block; font-size:12px; font-weight:600; color:var(--muted); margin:0 0 6px; }
.tx-card-field{ padding:13px 14px; }
.tx-error{ min-height:18px; margin:8px 0 6px; font-size:12.5px; color:var(--danger); line-height:1.45; }
.tx-primary{
  display:block; width:100%; box-sizing:border-box; text-align:center; text-decoration:none;
  padding:13px 16px; border:0; border-radius:12px; cursor:pointer;
  background:var(--text); color:#fff; font:inherit; font-size:14.5px; font-weight:600;
}
.tx-primary:hover{ background:#27272A; }
.tx-primary:disabled{ opacity:.65; cursor:progress; }
.tx-fine{ font-size:11.5px; color:var(--muted); text-align:center; margin:10px 0 0; line-height:1.5; }
.tx-foot{
  display:flex; justify-content:center; align-items:center; gap:8px;
  margin-top:18px; padding-top:14px; border-top:1px solid var(--stroke);
  font-size:12.5px; color:var(--muted);
}
.tx-link{ background:none; border:0; padding:0; font:inherit; color:var(--muted); cursor:pointer; text-decoration:none; }
.tx-link:hover{ color:var(--text); text-decoration:underline; }

/* Centred so it never sits on the help button in the bottom-right corner. */
.tx-banner{
  position:fixed; bottom:18px; left:50%; transform:translateX(-50%); z-index:9000;
  white-space:nowrap;
  display:flex; align-items:center; gap:12px;
  background:var(--surface); border:1px solid var(--stroke-strong); border-radius:999px;
  box-shadow:0 10px 28px rgba(10,10,10,0.12); padding:8px 8px 8px 16px;
  font-size:13px; color:var(--text); font-family:var(--font-display);
}
.tx-banner strong{ font-weight:600; }
.tx-banner-dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); flex:none; }
.tx-banner button{
  border:0; border-radius:999px; padding:7px 14px; cursor:pointer;
  background:var(--text); color:#fff; font:inherit; font-size:12.5px; font-weight:600;
}
@media (max-width: 480px){
  .tx-card{ padding:26px 18px 18px; }
  .tx-plan{ padding:12px; gap:10px; }
  .tx-banner{ left:16px; right:84px; bottom:16px; transform:none; justify-content:space-between; }
}