:root{
    --paper:#F4F6F2; --panel:#FFFFFF; --ink:#16181C; --muted:#585D63; --faint:#8A8F95;
    --rule:#DBDFD7; --rule-soft:#E8EBE4; --brand:#0F8A6E; --brand-soft:#E1F5EE;
    --good:#0F8A6E; --warn:#A06A12; --danger:#B23B3B; --win:#3B6D11;
  }
  @media (prefers-color-scheme:dark){
    :root{
      --paper:#111316; --panel:#191B1F; --ink:#ECEEEA; --muted:#9CA1A7; --faint:#6C7178;
      --rule:#2A2E33; --rule-soft:#22262B; --brand:#3FC4A1; --brand-soft:#16302A;
      --good:#3FC4A1; --warn:#E0A24E; --danger:#E27A7A; --win:#97C459;
    }
  }
  /* per-role brand accent — Supplier: green, Buyer: indigo */
  .app[data-role="supplier"]{ --brand:#0F8A6E; --brand-soft:#E1F5EE; }
  .app[data-role="buyer"]{ --brand:#3A5CCC; --brand-soft:#E6EAFB; }
  @media (prefers-color-scheme:dark){
    .app[data-role="supplier"]{ --brand:#3FC4A1; --brand-soft:#16302A; }
    .app[data-role="buyer"]{ --brand:#7C93F0; --brand-soft:#1C2340; }
  }
  .app,.app .lg,.nav a,.btn-primary,.confbar span,.sc .bar span{transition:background-color .25s, color .25s, border-color .25s;}
  *{box-sizing:border-box; margin:0; padding:0;}
  body{background:var(--paper); color:var(--ink); font-family:"IBM Plex Sans",system-ui,sans-serif; font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased; padding:16px;}
  .mono{font-family:"IBM Plex Mono",monospace;}
  h3{font-family:"Archivo",sans-serif; font-weight:700; letter-spacing:-.01em;}

  .app{display:flex; max-width:1120px; margin:0 auto; min-height:640px; border:0.5px solid var(--rule); border-radius:14px; overflow:hidden; background:var(--panel);}
  /* sidebar */
  .side{width:216px; background:var(--paper); border-right:0.5px solid var(--rule); padding:14px 12px; flex-shrink:0; transition:width .2s;}
  .app.collapsed .side{width:64px;}
  .shead{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;}
  .brand{display:flex; align-items:center; gap:9px; overflow:hidden; white-space:nowrap;}
  .brand .lg{width:26px; height:26px; border-radius:7px; background:var(--brand); flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; font-family:"Archivo"; font-weight:800; font-size:15px;}
  .brand .nm{font-family:"Archivo",sans-serif; font-weight:700; font-size:15px; letter-spacing:-.01em;}
  .app.collapsed .brand .nm{display:none;}
  .cbtn{background:transparent; border:none; cursor:pointer; color:var(--muted); padding:3px; display:flex; font-size:18px;}
  .app.collapsed .cbtn i{transform:rotate(180deg);}
  .roletoggle{display:flex; background:var(--rule-soft); border-radius:8px; padding:3px; margin-bottom:12px;}
  .roletoggle button{flex:1; border:none; background:transparent; font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.04em; padding:6px 4px; border-radius:6px; cursor:pointer; color:var(--muted);}
  .roletoggle button.on{background:var(--panel); color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.06);}
  .app.collapsed .roletoggle{display:none;}
  .app.collapsed .persona-pick{display:none;}
  .persona-pick{margin-bottom:14px;}
  .persona-pick .pl{font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--faint); margin:0 2px 5px;}
  .segrole{display:flex; gap:4px;}
  .segrole button{flex:1; border:0.5px solid var(--rule); background:var(--panel); font-size:11px; padding:5px 3px; border-radius:6px; cursor:pointer; color:var(--muted);}
  .segrole button.on{border-color:var(--brand); color:var(--brand); background:var(--brand-soft);}
  .nav{display:flex; flex-direction:column; gap:2px;}
  .nav a{display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:8px; font-size:13.5px; color:var(--muted); cursor:pointer; white-space:nowrap; overflow:hidden;}
  .nav a i{font-size:18px; flex-shrink:0;}
  .nav a:hover{background:var(--rule-soft);}
  .nav a.on{background:var(--brand-soft); color:var(--brand); font-weight:500;}
  .nav a .nbadge{margin-left:auto; background:var(--brand); color:#fff; font-size:10px; font-family:"IBM Plex Mono"; border-radius:9px; padding:0 6px; line-height:16px; min-width:16px; text-align:center;}
  .app.collapsed .nav .lbl,.app.collapsed .nav .nbadge{display:none;}

  /* main */
  .main{flex:1; min-width:0; display:flex; flex-direction:column;}
  .tbar{display:flex; align-items:center; justify-content:space-between; padding:13px 20px; border-bottom:0.5px solid var(--rule); gap:12px;}
  .tbar h3{font-size:17px;}
  .tbar .right{display:flex; align-items:center; gap:10px;}
  .persona{font-size:12.5px; color:var(--muted); display:flex; align-items:center; gap:8px; white-space:nowrap;}
  .av{width:28px; height:28px; border-radius:50%; background:var(--brand-soft); color:var(--brand); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:500; flex-shrink:0;}
  .body{padding:18px 20px; overflow-y:auto;}
  .view{display:none;} .view.on{display:block;}

  /* shared bits */
  .tag{font-size:10.5px; padding:2px 8px; border-radius:6px;}
  .cotag{font-size:10.5px; padding:2px 8px; border-radius:6px; background:var(--rule-soft); color:var(--muted); display:inline-flex; align-items:center; gap:4px;}
  .kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:11px; margin-bottom:14px;}
  .k{background:var(--paper); border:0.5px solid var(--rule); border-radius:9px; padding:12px;}
  .k .l{font-size:11.5px; color:var(--muted);} .k .v{font-size:22px; font-weight:500; margin-top:2px; font-family:"Archivo";}
  .k .d{font-size:11px; margin-top:2px; color:var(--muted);} .k .up{color:var(--win);}
  .trend{background:var(--paper); border:0.5px solid var(--rule); border-radius:9px; padding:12px 14px; margin-bottom:18px;}
  .trend .th{display:flex; justify-content:space-between; font-size:12.5px; color:var(--muted); margin-bottom:10px;}
  .chart{display:flex; align-items:flex-end; gap:7px; height:56px;}
  .chart .bar{flex:1; background:var(--brand); border-radius:3px 3px 0 0; min-height:4px; opacity:.88;}
  .sec{display:flex; align-items:baseline; justify-content:space-between; margin:4px 0 11px; gap:12px; flex-wrap:wrap;}
  .sec h3{font-size:15px;} .sec .v{font-size:12px; color:var(--muted);}
  .toolbar{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:12px;}
  .fchip{font-size:12px; padding:5px 11px; border-radius:16px; border:0.5px solid var(--rule); background:var(--panel); color:var(--muted); cursor:pointer; white-space:nowrap;}
  .fchip.on{background:var(--brand-soft); border-color:var(--brand); color:var(--brand);}

  .feed{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:11px;}
  .card{position:relative; background:var(--panel); border:0.5px solid var(--rule); border-radius:11px; padding:12px 13px; display:flex; flex-direction:column; gap:7px; cursor:pointer; transition:border-color .15s, box-shadow .15s;}
  .card:hover{border-color:color-mix(in srgb,var(--brand) 45%,var(--rule)); box-shadow:0 0 0 1px color-mix(in srgb,var(--brand) 28%,transparent);}
  .card .arr{position:absolute; top:11px; right:12px; color:var(--brand); font-size:15px; opacity:0; transition:opacity .15s;}
  .card:hover .arr{opacity:1;}
  .card .ti2{font-size:14px; font-weight:500; line-height:1.3; padding-right:16px;}
  .card .pn{font-size:11.5px; color:var(--faint);}
  .card .meta{display:flex; justify-content:space-between; font-size:12px; color:var(--muted); border-top:0.5px solid var(--rule-soft); padding-top:7px;}
  .soon{color:var(--danger); font-weight:500;}

  .list{border:0.5px solid var(--rule); border-radius:11px; overflow:hidden;}
  .li{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; border-top:0.5px solid var(--rule-soft); cursor:pointer;}
  .li:first-child{border-top:none;} .li:hover{background:var(--paper);}
  .li .lt{font-size:14px; font-weight:500;} .li .lm{font-size:12px; color:var(--muted); margin-top:2px;}
  .li .lr{display:flex; align-items:center; gap:14px; font-size:12.5px; color:var(--muted);}
  .pill{font-size:10.5px; font-family:"IBM Plex Mono",monospace; padding:2px 8px; border-radius:11px; white-space:nowrap;}
  .st-good{background:var(--brand-soft); color:var(--brand);} .st-warn{background:#FAEEDA; color:#854F0B;}
  .st-win{background:#EAF3DE; color:#3B6D11;} .st-muted{background:var(--rule-soft); color:var(--muted);}
  .st-danger{background:#FCEBEB; color:#A32D2D;} .st-info{background:#E6F1FB; color:#0C447C;}

  table{width:100%; border-collapse:collapse; font-size:13.5px;}
  th{text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--faint); font-weight:400; padding:8px 10px;}
  td{padding:12px 10px; border-top:0.5px solid var(--rule-soft);}
  tr.best td{background:var(--paper);}
  .minip{font-size:10px; padding:1px 7px; border-radius:5px; margin-left:7px;}
  .mask{letter-spacing:2px; color:var(--faint);}

  .panelcard{background:var(--panel); border:0.5px solid var(--rule); border-radius:12px; padding:16px 18px; margin-bottom:14px;}
  .vault{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; border-left:3px solid var(--brand); padding-left:13px;}
  .vault .t{font-weight:500; font-size:14px;} .vault .n{font-size:12.5px; color:var(--muted); margin-top:2px;}
  label{display:block; font-size:12.5px; color:var(--muted); margin:0 0 5px;}
  .field{margin-bottom:13px;} .row2{display:grid; grid-template-columns:1fr 1fr; gap:14px;} .row3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px;}
  input,select,textarea{width:100%; font-family:inherit; font-size:14px; color:var(--ink); background:var(--panel); border:0.5px solid var(--rule); border-radius:8px; padding:9px 11px;}
  input:focus,select:focus,textarea:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 22%,transparent);}
  textarea{min-height:62px; resize:vertical;}
  .hint{font-size:11.5px; color:var(--faint); margin-top:5px;}
  .actions{display:flex; justify-content:flex-end; gap:10px; margin-top:4px;}
  .btn{font-family:"IBM Plex Sans"; font-size:13px; padding:8px 15px; border-radius:8px; border:0.5px solid var(--rule); background:var(--panel); color:var(--ink); cursor:pointer;}
  .btn:hover{border-color:var(--faint);}
  .btn-primary{background:var(--brand); border-color:var(--brand); color:#fff;}
  .btn-primary:hover{opacity:.92;}
  .btn:disabled,.btn[disabled]{opacity:.45; cursor:not-allowed;}
  .btn:disabled:hover{border-color:var(--rule);}
  .btn-sm{font-size:12px; padding:6px 11px;}
  .btn-ghost{background:transparent;}
  .back{font-size:13px; color:var(--muted); cursor:pointer; margin-bottom:12px; display:inline-flex; align-items:center; gap:5px;}
  .meta-row{display:flex; flex-wrap:wrap; gap:8px 16px; font-size:13px; color:var(--muted); margin:8px 0 18px; align-items:center;}
  .award{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:16px; padding:14px 16px; background:var(--paper); border:0.5px solid var(--rule); border-radius:10px;}
  .award .n{font-size:12.5px; color:var(--muted);}
  .banner{font-size:12.5px; color:var(--warn); background:#FAEEDA; border-radius:8px; padding:9px 12px; margin-bottom:14px; display:flex; gap:8px;}
  .banner.info{color:var(--brand); background:var(--brand-soft);}
  @media (prefers-color-scheme:dark){.banner{background:#2A2113;} .banner.info{background:var(--brand-soft);} .st-warn{background:#2A2113; color:#E0A24E;} .st-win{background:#1B2A10; color:#97C459;} .st-danger{background:#2A1414; color:#E27A7A;} .st-info{background:#14203A; color:#8FB6F0;}}

  .sc-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin-bottom:18px;}
  .sc{background:var(--paper); border:0.5px solid var(--rule); border-radius:10px; padding:14px;}
  .sc .l{font-size:12px; color:var(--muted);} .sc .v{font-size:26px; font-weight:500; font-family:"Archivo"; margin-top:3px;}
  .sc .bar{height:5px; border-radius:3px; background:var(--rule-soft); margin-top:9px; overflow:hidden;}
  .sc .bar span{display:block; height:100%; background:var(--brand);}

  .kanban{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px;}
  .kcol{background:var(--paper); border:0.5px solid var(--rule); border-radius:11px; padding:10px;}
  .khead{display:flex; align-items:center; justify-content:space-between; font-size:12.5px; font-weight:500; margin-bottom:10px; padding:0 2px;}
  .kl{display:flex; align-items:center; gap:7px;}
  .kdot{width:8px; height:8px; border-radius:50%; display:inline-block;}
  .kc{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--muted); background:var(--panel); border-radius:10px; padding:1px 8px;}
  .kcard{position:relative; background:var(--panel); border:0.5px solid var(--rule); border-radius:9px; padding:10px 11px; margin-bottom:8px; cursor:pointer; transition:border-color .15s, box-shadow .15s;}
  .bm{position:absolute; top:9px; right:9px; background:transparent; border:none; cursor:pointer; color:var(--faint); font-size:16px; line-height:1; padding:2px; z-index:2;}
  .bm:hover{color:var(--brand);}
  .bm.on{color:var(--brand);}
  .kcard:hover{border-color:color-mix(in srgb,var(--brand) 45%,var(--rule)); box-shadow:0 0 0 1px color-mix(in srgb,var(--brand) 26%,transparent);}
  .kcard .kt{font-size:13.5px; font-weight:500; line-height:1.3; margin-top:7px;}
  .kcard .km{font-size:11.5px; color:var(--muted); margin-top:7px; display:flex; justify-content:space-between; align-items:center; gap:8px;}
  .kempty{font-size:12px; color:var(--faint); padding:6px 2px;}
  @media (max-width:820px){ .kanban{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:640px){ .kanban{grid-template-columns:1fr;} }
  .prof{display:grid; grid-template-columns:1fr 250px; gap:18px;}
  @media (max-width:760px){ .prof{grid-template-columns:1fr;} }
  .phead{display:flex; align-items:center; gap:14px; margin-bottom:14px;}
  .pav{width:50px; height:50px; border-radius:12px; background:var(--brand-soft); color:var(--brand); display:flex; align-items:center; justify-content:center; font-family:"Archivo"; font-weight:800; font-size:18px; flex-shrink:0;}
  .pname{font-family:"Archivo",sans-serif; font-weight:700; font-size:20px; letter-spacing:-.01em;}
  .pmeta{font-size:12.5px; color:var(--muted); margin-top:3px; display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
  .block{background:var(--panel); border:0.5px solid var(--rule); border-radius:12px; padding:16px 18px; margin-bottom:14px;}
  .block.agent{border-color:color-mix(in srgb,var(--brand) 40%,var(--rule)); box-shadow:inset 3px 0 0 var(--brand);}
  .blabel{display:inline-flex; align-items:center; gap:6px; font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; padding:3px 9px; border-radius:6px; margin-bottom:12px;}
  .bl-self{background:var(--rule-soft); color:var(--muted);}
  .bl-agent{background:var(--brand-soft); color:var(--brand);}
  .kv{display:flex; flex-wrap:wrap; gap:12px 26px; font-size:13.5px;}
  .kv .item .l{font-size:11px; color:var(--faint);} .kv .item .v{font-weight:500;}
  .chips{display:flex; flex-wrap:wrap; gap:6px;}
  .chip2{font-size:11.5px; padding:3px 9px; border-radius:7px; background:var(--paper); border:0.5px solid var(--rule);}
  .seclbl{font-size:11px; color:var(--faint); margin:14px 0 5px; text-transform:uppercase; letter-spacing:.05em;}
  .find{display:flex; gap:11px; padding:11px 0; border-top:0.5px solid var(--rule-soft);}
  .find:first-of-type{border-top:none;}
  .find .fi{margin-top:1px; font-size:17px; flex-shrink:0;}
  .find .fk{font-size:13.5px; font-weight:500;}
  .find .fd{font-size:12.5px; color:var(--muted); margin-top:2px;}
  .find .fsrc{font-size:11px; color:var(--faint); margin-top:3px;}
  .stat{font-size:9.5px; font-family:"IBM Plex Mono",monospace; text-transform:uppercase; letter-spacing:.05em; padding:1px 7px; border-radius:5px; margin-left:8px; vertical-align:1px;}
  .conf{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted);}
  .confbar{flex:1; max-width:140px; height:5px; border-radius:3px; background:var(--rule-soft); overflow:hidden;}
  .confbar span{display:block; height:100%; background:var(--brand);}
  .disc{font-size:11px; color:var(--faint); margin-top:12px; line-height:1.5;}
  .flagbox{background:#FAEEDA; border-radius:8px; padding:9px 12px; font-size:12.5px; color:#854F0B; margin-top:10px; display:flex; gap:8px;}
  @media (prefers-color-scheme:dark){ .flagbox{background:#2A2113; color:#E0A24E;} }
  .rcard{background:var(--paper); border:0.5px solid var(--rule); border-radius:11px; padding:14px; margin-bottom:12px;}
  .rf{display:flex; justify-content:space-between; font-size:12.5px; padding:6px 0; border-top:0.5px solid var(--rule-soft);}
  .rf:first-child{border-top:none;}
  .link{color:var(--brand); cursor:pointer; text-decoration:underline; text-underline-offset:2px;}
  .link:hover{text-decoration:underline;}
  tr.bidrow{cursor:pointer;}
  tr.bidrow:hover td{background:var(--paper);}
  .toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(12px); background:var(--ink); color:var(--paper); font-size:13px; padding:11px 18px; border-radius:10px; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:80; display:flex; align-items:center; gap:8px;}
  .toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

  /* tabs */
  .tabs{display:flex; gap:4px; border-bottom:0.5px solid var(--rule); margin-bottom:16px; flex-wrap:wrap;}
  .tab{font-size:13px; padding:8px 13px; border:none; background:transparent; color:var(--muted); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px;}
  .tab.on{color:var(--brand); border-bottom-color:var(--brand); font-weight:500;}
  .tab .tcount{font-size:10.5px; font-family:"IBM Plex Mono"; background:var(--rule-soft); border-radius:9px; padding:0 6px; margin-left:6px;}

  /* stepper / timeline (Gantt-lite) */
  .steps{display:flex; align-items:center; gap:0; margin:10px 0 4px;}
  .step{display:flex; align-items:center; flex:1;}
  .step .dot{width:15px; height:15px; border-radius:50%; border:2px solid var(--rule); background:var(--panel); flex-shrink:0; display:flex; align-items:center; justify-content:center;}
  .step .dot i{font-size:9px; color:#fff;}
  .step.done .dot{background:var(--brand); border-color:var(--brand);}
  .step.curr .dot{border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft);}
  .step.late .dot{background:var(--danger); border-color:var(--danger);}
  .step .segline{flex:1; height:2px; background:var(--rule);}
  .step.done .segline{background:var(--brand);}
  .step:last-child{flex:0;}
  .steplbls{display:flex; font-size:10.5px; color:var(--faint); margin-top:4px;}
  .steplbls span{flex:1;} .steplbls span:last-child{flex:0; white-space:nowrap;}
  .gantt-row{background:var(--panel); border:0.5px solid var(--rule); border-radius:11px; padding:13px 15px; margin-bottom:10px;}
  .gr-head{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; align-items:center;}
  .gr-t{font-size:14px; font-weight:500;} .gr-m{font-size:12px; color:var(--muted); margin-top:2px;}

  /* chat */
  .chat{display:grid; grid-template-columns:230px 1fr; gap:0; border:0.5px solid var(--rule); border-radius:12px; overflow:hidden; min-height:440px;}
  @media (max-width:640px){ .chat{grid-template-columns:1fr;} .chat .thread{display:none;} .chat.showconv .thread{display:none;} .chat.showlist .clist{display:block;} }
  .clist{border-right:0.5px solid var(--rule); background:var(--paper); overflow-y:auto;}
  .cli{padding:12px 14px; border-top:0.5px solid var(--rule-soft); cursor:pointer;}
  .cli:first-child{border-top:none;} .cli:hover{background:var(--rule-soft);}
  .cli.on{background:var(--brand-soft);}
  .cli .cn{font-size:13px; font-weight:500; display:flex; justify-content:space-between; align-items:center; gap:6px;}
  .cli .cp{font-size:11.5px; color:var(--faint); margin-top:2px;}
  .cli .cprev{font-size:12px; color:var(--muted); margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .cdot{width:8px; height:8px; border-radius:50%; background:var(--brand); flex-shrink:0;}
  .thread{display:flex; flex-direction:column; min-width:0;}
  .thhead{padding:12px 16px; border-bottom:0.5px solid var(--rule); font-size:13px;}
  .thhead .tn{font-weight:500;} .thhead .tp{font-size:11.5px; color:var(--faint); margin-top:1px;}
  .thbody{flex:1; padding:16px; display:flex; flex-direction:column; gap:10px; overflow-y:auto; background:var(--paper);}
  .bub{max-width:78%; padding:9px 12px; border-radius:12px; font-size:13px; line-height:1.45;}
  .bub .bt{font-size:10px; color:var(--faint); margin-top:4px;}
  .bub.them{background:var(--panel); border:0.5px solid var(--rule); align-self:flex-start; border-bottom-left-radius:3px;}
  .bub.me{background:var(--brand); color:#fff; align-self:flex-end; border-bottom-right-radius:3px;}
  .bub.me .bt{color:rgba(255,255,255,.75);}
  .sysmsg{align-self:center; font-size:11px; color:var(--faint); background:var(--rule-soft); padding:3px 10px; border-radius:10px;}
  .composer{display:flex; gap:8px; padding:12px 14px; border-top:0.5px solid var(--rule);}
  .composer input{flex:1;}

  /* modal */
  .overlay{position:fixed; inset:0; background:rgba(0,0,0,.42); display:none; align-items:center; justify-content:center; z-index:70; padding:20px;}
  .overlay.on{display:flex;}
  .modal{background:var(--panel); border:0.5px solid var(--rule); border-radius:14px; padding:20px 22px; max-width:440px; width:100%; max-height:88vh; overflow-y:auto; box-shadow:0 18px 50px rgba(0,0,0,.28);}
  .modal h3{font-size:16px; margin-bottom:4px;}
  .modal .msub{font-size:12.5px; color:var(--muted); margin-bottom:14px;}
  .modal .actions{margin-top:16px;}
  .stars{display:flex; gap:4px; font-size:22px; color:var(--faint); cursor:pointer;}
  .stars i.on{color:#E0A24E;}
  .yn{display:flex; gap:8px;} .yn button{flex:1;}
  .yn button.on{border-color:var(--brand); background:var(--brand-soft); color:var(--brand);}
  .toggle{position:relative; width:38px; height:22px; border-radius:12px; background:var(--rule); border:none; cursor:pointer; flex-shrink:0; transition:background .15s;}
  .toggle::after{content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; transition:left .15s;}
  .toggle.on{background:var(--brand);} .toggle.on::after{left:18px;}
  .setrow{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:11px 0; border-top:0.5px solid var(--rule-soft);}
  .setrow:first-child{border-top:none;}
  .rolebadge{font-size:10.5px; font-family:"IBM Plex Mono"; padding:2px 8px; border-radius:6px;}
  .rb-admin{background:#EEEDFE; color:#3C3489;} .rb-buyer{background:var(--brand-soft); color:var(--brand);} .rb-engineer{background:#E6F1FB; color:#0C447C;}
  @media (prefers-color-scheme:dark){.rb-admin{background:#221E42; color:#B7B0F0;} .rb-engineer{background:#14203A; color:#8FB6F0;}}
  .wizsteps{display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap;}
  .wizstep{font-size:11.5px; padding:5px 10px; border-radius:20px; background:var(--rule-soft); color:var(--muted);}
  .wizstep.on{background:var(--brand-soft); color:var(--brand);} .wizstep.done{background:var(--brand); color:#fff;}
  .choice{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:6px;}
  .choicecard{border:0.5px solid var(--rule); border-radius:11px; padding:14px; cursor:pointer;}
  .choicecard.on{border-color:var(--brand); background:var(--brand-soft);}
  .choicecard .ct{font-weight:500; font-size:14px; display:flex; align-items:center; gap:8px;}
  .choicecard .cd{font-size:12px; color:var(--muted); margin-top:5px;}
  .catgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px;}
  .catopt{display:flex; align-items:center; gap:9px; border:0.5px solid var(--rule); border-radius:9px; padding:10px 12px; cursor:pointer; font-size:13px;}
  .catopt.on{border-color:var(--brand); background:var(--brand-soft); color:var(--brand);}
  .catopt i{font-size:16px;}

  /* notification bell */
  .bell{position:relative; background:transparent; border:none; cursor:pointer; color:var(--muted); font-size:19px; padding:4px; display:flex;}
  .bell:hover{color:var(--ink);}
  .bell .bdot{position:absolute; top:2px; right:2px; min-width:14px; height:14px; background:var(--danger); color:#fff; border-radius:8px; font-size:9px; line-height:14px; text-align:center; padding:0 3px; font-family:"IBM Plex Mono";}
  .notifs{position:absolute; top:52px; right:16px; width:330px; max-height:420px; overflow-y:auto; background:var(--panel); border:0.5px solid var(--rule); border-radius:12px; box-shadow:0 14px 40px rgba(0,0,0,.22); z-index:60; display:none;}
  .notifs.on{display:block;}
  .nhead{display:flex; justify-content:space-between; align-items:center; padding:12px 14px; border-bottom:0.5px solid var(--rule); font-size:13px; font-weight:500;}
  .ni{display:flex; gap:10px; padding:11px 14px; border-top:0.5px solid var(--rule-soft); cursor:pointer;}
  .ni:hover{background:var(--paper);}
  .ni.unread{background:var(--brand-soft);}
  .ni i{font-size:16px; margin-top:1px; flex-shrink:0;}
  .ni .nt{font-size:12.5px;} .ni .nm2{font-size:11px; color:var(--faint); margin-top:2px;}
  .clickable{cursor:pointer;} .clickable:hover{border-color:color-mix(in srgb,var(--brand) 45%,var(--rule));}
  /* selectable bid rows */
  tr.bidrow.sel td{background:var(--brand-soft);}
  tr.bidrow.sel td:first-child{box-shadow:inset 3px 0 0 var(--brand);}
  .selradio{width:16px; height:16px; border-radius:50%; border:2px solid var(--rule); display:inline-block; vertical-align:-3px;}
  tr.bidrow.sel .selradio{border-color:var(--brand); background:radial-gradient(var(--brand) 42%, transparent 46%);}
  .flagack{background:#FAEEDA; border:0.5px solid #E7C98A; border-radius:9px; padding:12px 14px; margin:12px 0; font-size:12.5px; color:#6b430b;}
  @media (prefers-color-scheme:dark){ .flagack{background:#2A2113; border-color:#4a3a17; color:#E0A24E;} }
  .flagack .fl{display:flex; gap:8px; margin-top:7px;} .flagack .fl i{flex-shrink:0; margin-top:1px;}
  .sumrow{display:flex; justify-content:space-between; font-size:13px; padding:7px 0; border-top:0.5px solid var(--rule-soft);}
  .sumrow:first-child{border-top:none;} .sumrow .sv{font-weight:500;}
  .addendum{background:var(--paper); border:0.5px solid var(--rule); border-left:3px solid var(--brand); border-radius:9px; padding:11px 13px; margin-bottom:9px;}
  .addendum .aq{font-size:12px; color:var(--muted);} .addendum .aa{font-size:13px; margin-top:4px;} .addendum .at{font-size:10.5px; color:var(--faint); margin-top:5px;}
  .splitrow{display:flex; align-items:center; gap:10px; padding:9px 0; border-top:0.5px solid var(--rule-soft);}
  .splitrow:first-child{border-top:none;} .splitrow .sn{flex:1; font-size:13px;} .splitrow input{width:74px;}
  .chk{display:flex; align-items:flex-start; gap:9px; font-size:13px; cursor:pointer;} .chk input{width:auto; margin-top:3px;}
  @media (max-width:640px){ .row2,.row3{grid-template-columns:1fr;} .side{width:64px;} .side .nm,.roletoggle,.persona-pick{display:none;} .notifs{right:8px; width:calc(100vw - 32px);} }

/* ---------------- login screen ---------------- */
.login-screen{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:var(--paper); z-index:200; padding:20px;}
.login-card{background:var(--panel); border:0.5px solid var(--rule); border-radius:16px; padding:26px 26px 22px; max-width:400px; width:100%; box-shadow:0 20px 55px rgba(0,0,0,.16);}
.login-brand{display:flex; align-items:center; gap:10px; font-family:"Archivo",sans-serif; font-weight:700; font-size:19px; letter-spacing:-.01em;}
.login-brand .lg{width:30px; height:30px; border-radius:8px; background:#3A5CCC; color:#fff; display:flex; align-items:center; justify-content:center; font-family:"Archivo"; font-weight:800; font-size:16px;}
@media (prefers-color-scheme:dark){ .login-brand .lg{background:#7C93F0;} }
.login-sub{font-size:12.5px; color:var(--muted); margin:6px 0 18px;}
.login-err{background:#FCEBEB; color:#A32D2D; font-size:12.5px; padding:9px 12px; border-radius:8px; margin-bottom:14px;}
@media (prefers-color-scheme:dark){ .login-err{background:#2A1414; color:#E27A7A;} }
.login-demo{font-size:11.5px; color:var(--faint); text-align:center; margin:18px 0 10px; position:relative;}
.login-accts{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.login-accts .btn{width:100%;}

/* ---------------- workspace label + login tabs ---------------- */
.ws{margin:0 2px 14px; padding:9px 10px; background:var(--panel); border:0.5px solid var(--rule); border-radius:9px; overflow:hidden;}
.app.collapsed .ws{display:none;}
.ws-co{font-size:12.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.ws-role{font-size:10.5px; color:var(--faint); text-transform:capitalize; margin-top:1px;}
.login-tabs{display:flex; background:var(--rule-soft); border-radius:9px; padding:3px; margin-bottom:16px;}
.login-tabs button{flex:1; border:none; background:transparent; font-size:11.5px; padding:7px 4px; border-radius:7px; cursor:pointer; color:var(--muted);}
.login-tabs button.on{background:var(--panel); color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.06); font-weight:500;}

/* ============================================================
   UX readability pass (July 2026 review)
   Type scale: xs 12 (footnotes only) · sm 13 · base 14.5–15 · lg 17 · xl 24
   Rule: gray is for labels, ink is for values; no data below 13px.
   ============================================================ */
:root{ --fs-xs:12px; --fs-sm:13px; --fs-base:14.5px; --fs-lg:17px; --fs-xl:24px; --faint:#65696E; }
@media (prefers-color-scheme:dark){ :root{ --faint:#8E939A; } }

/* nav & shell */
.nav a{font-size:var(--fs-base);}
.ws-co{font-size:13.5px;} .ws-role{font-size:var(--fs-xs);}
.persona{font-size:13.5px;}
.tbar h3{font-size:18px;}

/* chips, badges, labels */
.tag,.cotag,.pill,.fchip,.chip2,.seclbl{font-size:var(--fs-sm);}
.minip{font-size:12.5px;}
.stat{font-size:var(--fs-xs); letter-spacing:.04em;}
.rolebadge{font-size:12.5px;}
th{font-size:var(--fs-sm); letter-spacing:.04em;}

/* KPI cards: label 13, number 24, sublabel 13 faint; whole card clickable */
.k{padding:14px;}
.k .l{font-size:var(--fs-sm);}
.k .v{font-size:var(--fs-xl);}
.k .d{font-size:var(--fs-sm); color:var(--faint); margin-top:3px;}
.k.clickable{cursor:pointer; transition:border-color .15s, box-shadow .15s;}
.k.clickable:hover{border-color:color-mix(in srgb,var(--brand) 45%,var(--rule)); box-shadow:0 2px 10px rgba(0,0,0,.07);}

/* sections & cards */
.sec h3{font-size:var(--fs-lg);}
.sec .v{font-size:var(--fs-sm);}
.card{padding:16px; gap:8px;}
.card .ti2{font-size:var(--fs-lg); line-height:1.35; padding-right:20px;}
.card .ti2 .qty{font-size:14px; color:var(--muted); font-weight:400; white-space:nowrap;}
.card .pn{font-size:var(--fs-sm); color:var(--faint);}
.card .meta{font-size:var(--fs-sm); padding-top:9px;}
/* countdowns are decision-critical: 15px semibold, red only when <24h */
.cd{font-size:15px; font-weight:600; color:var(--ink);}
.cd.soon{color:var(--danger);}
.kempty{font-size:13.5px;}

/* rows & tables: ≥48px rows, data ≥14.5, decision numbers 15 ink */
.li{padding:14px 16px; min-height:48px;}
.li .lt{font-size:16px;}
.li .lm{font-size:var(--fs-sm); margin-top:3px;}
.li .lr{font-size:var(--fs-base);}
td{font-size:var(--fs-base); padding:14px 10px;}
.num{font-size:15px; color:var(--ink); font-weight:500;}
.subnum{font-size:var(--fs-sm); color:var(--faint);}
.val{color:var(--ink); font-weight:500;}
.mask{font-size:inherit;}

/* forms */
label{font-size:14px;}
input,select,textarea{font-size:15px;}
.hint{font-size:var(--fs-sm); color:var(--faint); line-height:1.45;}
.btn{font-size:14px;}
.btn-sm{font-size:var(--fs-sm);}
.back{font-size:14px;}
.meta-row{font-size:var(--fs-base); color:var(--ink);}
.banner{font-size:14px; line-height:1.5;}
.award .n{font-size:13.5px;}
.sumrow{font-size:var(--fs-base);}

/* kanban */
.khead{font-size:14px;} .kc{font-size:12.5px;}
.kcard{padding:12px 13px;}
.kcard .kt{font-size:15.5px; line-height:1.35;}
.kcard .km{font-size:var(--fs-sm); margin-top:8px;}

/* tracking */
.gr-t{font-size:16px;} .gr-m{font-size:13.5px; margin-top:3px; line-height:1.5;}
.steplbls{font-size:12.5px;}
.sc .l{font-size:var(--fs-sm);}

/* chat */
.cli .cn{font-size:var(--fs-base);} .cli .cp{font-size:var(--fs-sm);} .cli .cprev{font-size:var(--fs-sm);}
.bub{font-size:var(--fs-base); line-height:1.5;} .bub .bt{font-size:var(--fs-xs);}
.sysmsg{font-size:var(--fs-sm);}
.thhead .tn{font-size:var(--fs-base);} .thhead .tp{font-size:var(--fs-sm);}
.chk{font-size:var(--fs-sm);}

/* supplier profile */
.blabel{font-size:var(--fs-xs);}
.kv{font-size:var(--fs-base);} .kv .item .l{font-size:var(--fs-sm);}
.find .fk{font-size:15px;} .find .fd{font-size:14px; line-height:1.5;} .find .fsrc{font-size:12.5px;}
.conf{font-size:var(--fs-sm);}
.disc{font-size:var(--fs-xs); line-height:1.5;}   /* footnote — allowed at 12 */
.flagbox{font-size:14px; line-height:1.5;}
.flagack{font-size:13.5px; line-height:1.5;}
.rf{font-size:14px;}
.pmeta{font-size:13.5px;}

/* tabs, toasts, notifications */
.tab{font-size:14px;} .tab .tcount{font-size:var(--fs-xs);}
.toast{font-size:14px;}
.notifs{width:360px;}
.nhead{font-size:14px;}
.ni .nt{font-size:14px; line-height:1.5; overflow-wrap:anywhere;}
.ni .nm2{font-size:12.5px;}

/* addenda */
.addendum .aq{font-size:var(--fs-sm);} .addendum .aa{font-size:var(--fs-base); line-height:1.5;} .addendum .at{font-size:var(--fs-xs);}

/* choices / onboarding */
.choicecard .ct{font-size:15px;} .choicecard .cd2,.choicecard .cd{font-size:13.5px; font-weight:400; color:var(--muted); line-height:1.5;}
.catopt{font-size:14px;}
.setrow{padding:13px 0;}

/* login */
.login-sub{font-size:13.5px;} .login-demo{font-size:var(--fs-sm);} .login-err{font-size:13.5px;} .login-tabs button{font-size:var(--fs-sm);}

/* tap targets */
.bm{width:38px; height:38px; display:flex; align-items:center; justify-content:center; font-size:19px; padding:0; top:5px; right:5px; border-radius:9px;}
.bm:hover{background:var(--rule-soft);}
.selradio{width:18px; height:18px;}
.bell{padding:8px;}

/* general line-height for multi-line text */
.lm,.fd,.nt,.cprev,.hint,.banner span,.n{line-height:1.45;}
.bell .bdot{font-size:10.5px; min-width:15px; height:15px; line-height:15px;}
.nav a .nbadge{font-size:11.5px;}
.av{font-size:12.5px;}

/* ============================================================
   DESIGN SYSTEM v2 — FreGo direction (forerun-design-guidelines.md)
   Later-in-file layer: remaps legacy vars to tokens.css and restyles
   shell + components. Requires tokens.css loaded first.
   ============================================================ */

/* legacy var mapping (resolves live, so dark mode flips automatically) */
:root{
  --paper:var(--canvas); --panel:var(--surface);
  --muted:var(--text-2); --faint:var(--text-3);
  --rule:var(--border); --rule-soft:var(--border-soft);
  --good:var(--success); --warn:var(--warning); --win:var(--success);
}
/* single primary accent — retire per-role teal/indigo split */
.app[data-role="supplier"], .app[data-role="buyer"]{ --brand:var(--primary); --brand-soft:var(--primary-tint); }
@media (prefers-color-scheme:dark){
  .app[data-role="supplier"], .app[data-role="buyer"]{ --brand:var(--primary); --brand-soft:var(--primary-tint); }
}

/* type */
body{ background:var(--canvas); color:var(--ink); font-family:var(--font-ui); font-size:var(--fs-base); line-height:var(--lh-base); padding:20px; }
h3,.pname,.brand .nm,.login-brand,.k .v,.sc .v{ font-family:var(--font-ui); letter-spacing:-0.01em; }
.mono{ font-family:var(--font-mono); font-size:13px; }

/* ---- shell: floating white sidebar, transparent content on canvas ---- */
.app{ background:transparent; border:none; box-shadow:none; border-radius:0; max-width:var(--content-max); gap:20px; overflow:visible; min-height:calc(100vh - 40px); }
.side{ background:var(--surface); border-right:none; border-radius:var(--r-card); box-shadow:var(--shadow-card); padding:18px 14px; align-self:flex-start; position:sticky; top:20px; max-height:calc(100vh - 40px); overflow-y:auto; }
.main{ background:transparent; }
.tbar{ border-bottom:none; padding:6px 6px 18px; }
.tbar h3{ font-size:var(--fs-title); font-weight:var(--fw-bold); }
.body{ padding:0 6px 28px; }
@media (prefers-color-scheme:dark){ .side{ border:1px solid var(--border); } }

/* sidebar nav: 44px pill items */
.nav{ gap:4px; }
.nav a{ height:var(--h-nav); padding:0 14px; border-radius:var(--r-pill); font-size:15px; font-weight:var(--fw-medium); color:var(--text-2); transition:background var(--t-fast) var(--ease); }
.nav a i{ font-size:20px; }
.nav a:hover{ background:var(--surface-2); }
.nav a.on{ background:var(--primary-tint); color:var(--primary); font-weight:var(--fw-semibold); }
.nav a .nbadge{ background:var(--danger); }
.ws{ border-radius:var(--r-inner); }
.brand .lg{ background:var(--primary); border-radius:10px; }

/* ---- surfaces: top-level cards get shadow, nested get borders ---- */
.panelcard,.list,.chat,.block,.k,.sc,.card,.gantt-row,.trend{
  background:var(--surface); border:none; border-radius:var(--r-card); box-shadow:var(--shadow-card);
}
@media (prefers-color-scheme:dark){
  .panelcard,.list,.chat,.block,.k,.sc,.card,.gantt-row,.trend{ border:1px solid var(--border); box-shadow:none; }
}
.panelcard{ padding:var(--pad-card); }
.card{ padding:20px; transition:transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.card:hover{ border-color:transparent; transform:translateY(-1px); box-shadow:var(--shadow-hover); }
.block.agent{ box-shadow:var(--shadow-card); border-left:3px solid var(--primary); }
.rcard,.addendum,.kcard,.choicecard,.catopt{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-inner); box-shadow:none; }
.vault{ border-left:3px solid var(--primary); }
.li{ border-top:1px solid var(--border-soft); }
.li:hover{ background:var(--surface-2); }

/* KPI cards */
.kpis{ gap:16px; margin-bottom:20px; }
.k{ padding:18px 20px; }
.k .l{ font-size:13px; font-weight:var(--fw-medium); color:var(--text-2); }
.k .v{ font-size:var(--fs-kpi); line-height:var(--lh-kpi); font-weight:var(--fw-bold); margin-top:6px; }
.k .d{ font-size:13px; color:var(--text-3); margin-top:6px; }
.k.clickable:hover{ border-color:transparent; transform:translateY(-1px); box-shadow:var(--shadow-hover); }

/* ---- controls ---- */
.btn{ height:var(--h-btn); padding:0 18px; border-radius:var(--r-btn); font-size:15px; font-weight:var(--fw-semibold); display:inline-flex; align-items:center; justify-content:center; gap:7px; border:1px solid var(--border); transition:background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.btn:hover{ border-color:var(--text-3); background:var(--surface-2); }
.btn-primary{ background:var(--primary); border-color:var(--primary); color:#fff; }
.btn-primary:hover{ background:var(--primary-hover); border-color:var(--primary-hover); opacity:1; }
.btn-sm{ height:34px; padding:0 13px; font-size:13px; font-weight:var(--fw-medium); }
.btn:focus-visible,input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--primary); box-shadow:var(--focus-ring); }
input,select,textarea{ min-height:var(--h-input); border:1px solid var(--border); border-radius:var(--r-inner); padding:10px 14px; font-size:15px; background:var(--surface); }
textarea{ min-height:72px; }
label{ font-size:13px; font-weight:var(--fw-medium); color:var(--text-2); margin-bottom:6px; }
input[type="number"]{ min-height:38px; }
.toggle{ border-radius:999px; }

/* ---- chips: pills with tint bg + tone text ---- */
.pill,.tag,.cotag,.stat,.minip,.fchip,.chip2{ border-radius:var(--r-pill); font-weight:var(--fw-medium); }
.pill{ padding:4px 11px; font-family:var(--font-ui); font-size:13px; }
.st-good,.st-win{ background:var(--success-tint); color:var(--success); }
.st-warn{ background:var(--warning-tint); color:var(--warning); }
.st-danger{ background:var(--danger-tint); color:var(--danger); }
.st-info{ background:var(--primary-tint); color:var(--primary); }
.st-muted{ background:var(--surface-2); color:var(--text-2); border:1px solid var(--border-soft); }
@media (prefers-color-scheme:dark){ .st-muted{ border:none; } }
.fchip{ padding:7px 14px; border:1px solid var(--border); }
.fchip.on{ background:var(--primary-tint); border-color:var(--primary); color:var(--primary); font-weight:var(--fw-semibold); }
.tag{ padding:4px 11px; }
.cotag{ background:var(--surface-2); border:1px solid var(--border-soft); padding:4px 11px; }

/* ---- tables ---- */
th{ font-size:13px; letter-spacing:var(--ls-caps); color:var(--text-3); padding:10px 12px; }
td{ padding:16px 12px; border-top:1px solid var(--border-soft); font-size:15px; }
tr.bidrow:hover td{ background:var(--surface-2); }
tr.bidrow.sel td{ background:var(--primary-tint); }
tr.bidrow.sel td:first-child{ box-shadow:inset 3px 0 0 var(--primary); }
.num{ font-size:15px; font-weight:var(--fw-semibold); }
#bidcompare th:nth-child(n+3), #bidcompare td:nth-child(n+3){ text-align:right; }
#bidcompare td:nth-child(2), #bidcompare th:nth-child(2){ text-align:left; }

/* ---- progress / tracking ---- */
.step .segline{ height:4px; border-radius:2px; }
.step .dot{ width:20px; height:20px; border-width:2px; }
.step .dot i{ font-size:11px; }
.steplbls{ margin-top:6px; }

/* ---- kanban: columns sit on canvas, cards are white ---- */
.kcol{ background:transparent; border:none; padding:0 2px; }
.kcard{ padding:14px; margin-bottom:10px; transition:box-shadow var(--t-fast) var(--ease); }
.kcard:hover{ box-shadow:var(--shadow-hover); border-color:var(--border); }
.kc{ background:var(--surface); border:1px solid var(--border-soft); }

/* ---- chat ---- */
.chat{ border:none; }
.clist{ background:var(--surface-2); border-right:1px solid var(--border-soft); border-radius:var(--r-card) 0 0 var(--r-card); }
.cli.on{ background:var(--primary-tint); }
.thbody{ background:var(--surface-2); }
.bub{ border-radius:14px; }
.bub.me{ background:var(--primary); border-bottom-right-radius:4px; }
.bub.them{ border-bottom-left-radius:4px; }

/* ---- notifications ---- */
.notifs{ border:none; border-radius:var(--r-card); box-shadow:var(--shadow-modal); }
.ni.unread{ background:var(--primary-tint); }
.bell .bdot{ background:var(--danger); }

/* ---- modal & overlay ---- */
.overlay{ background:rgba(16,24,40,.4); }
.modal{ border:none; border-radius:var(--r-card); box-shadow:var(--shadow-modal); padding:24px; max-width:520px; }
.modal h3{ font-size:var(--fs-lead); font-weight:var(--fw-bold); }
.flagack{ border-radius:var(--r-inner); background:var(--warning-tint); border:1px solid color-mix(in srgb, var(--warning) 25%, transparent); color:var(--warning); }
.banner{ border-radius:var(--r-inner); background:var(--warning-tint); color:var(--warning); }
.banner.info{ background:var(--primary-tint); color:var(--primary); }
.flagbox{ background:var(--warning-tint); color:var(--warning); border-radius:var(--r-inner); }
@media (prefers-color-scheme:dark){ .modal{ border:1px solid var(--border); } }

/* ---- empty states ---- */
.kempty{ padding:24px; text-align:center; font-size:15px; color:var(--text-2); }

/* ---- login ---- */
.login-screen{ background:var(--canvas); }
.login-card{ border:none; border-radius:var(--r-card); box-shadow:var(--shadow-modal); padding:28px; }
.login-brand .lg{ background:var(--primary); }
.login-tabs{ border-radius:var(--r-pill); }
.login-tabs button{ border-radius:var(--r-pill); }
@media (prefers-color-scheme:dark){ .login-card{ border:1px solid var(--border); } }

/* misc */
.toast{ border-radius:var(--r-inner); }
.selradio{ width:20px; height:20px; }
.confbar span,.sc .bar span{ background:var(--primary); }
.chart .bar{ background:var(--primary); }

/* ---- QA fixes (Jul 2026 bug report) ---- */
/* S1/E1: disabled controls unmistakably disabled */
input:disabled, select:disabled, textarea:disabled{
  background:var(--surface-2); color:var(--text-3); border-color:var(--border-soft);
  cursor:not-allowed; -webkit-text-fill-color:var(--text-3);
}
.btn:disabled,.btn[disabled]{
  opacity:1; background:var(--surface-2); border-color:var(--border-soft);
  color:var(--text-3); cursor:not-allowed; pointer-events:none;
}
.btn-primary:disabled{ background:var(--surface-2); border-color:var(--border-soft); color:var(--text-3); }
/* B9: error toasts look like errors */
.toast.error{ background:var(--danger); color:#fff; }

/* ---- archived RFQ: key-dates timeline ---- */
.tl{display:flex; flex-direction:column;}
.tl-item{display:flex; align-items:flex-start; gap:14px; position:relative; padding:0 0 20px;}
.tl-item.last{padding-bottom:0;}
.tl-item::before{content:''; position:absolute; left:15px; top:30px; bottom:0; width:2px; background:var(--border);}
.tl-item.last::before{display:none;}
.tl-dot{width:32px; height:32px; border-radius:var(--r-pill); background:var(--primary-tint);
        display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:16px; z-index:1;}
.tl-body{flex:1; min-width:0; padding-top:5px;}
.tl-label{font-size:15px; font-weight:var(--fw-semibold); color:var(--ink);}
.tl-note{font-size:13px; color:var(--text-3); margin-top:2px;}
.tl-when{font-size:13px; color:var(--text-2); white-space:nowrap; padding-top:7px; text-align:right;}
@media (max-width:560px){ .tl-item{flex-wrap:wrap;} .tl-when{width:100%; text-align:left; padding-left:46px; padding-top:2px;} }

/* ---- My bids kanban: visible dividers between swim lanes ---- */
.kanban{ gap:0; align-items:stretch; }   /* equal-height lanes so dividers run full board height */
.kcol{ background:transparent; padding:0 16px; border-right:1px solid var(--border); min-width:0; min-height:320px; }
.kcol:first-child{ padding-left:0; }
.kcol:last-child{ border-right:none; padding-right:0; }
/* lane header sits above a rule so each lane reads as its own column */
.khead{ padding:0 2px 10px; margin-bottom:14px; border-bottom:1px solid var(--border); }
.kcol .kempty{ padding:14px 2px; text-align:left; }

/* stacked layouts: swap vertical rules for horizontal ones */
@media (max-width:820px){
  .kcol:nth-child(2n){ border-right:none; padding-right:0; }
  .kcol:nth-child(2n+1){ padding-left:0; }
  .kcol{ padding-bottom:18px; margin-bottom:18px; border-bottom:1px solid var(--border); }
  .kcol:nth-last-child(-n+2){ border-bottom:none; margin-bottom:0; padding-bottom:0; }
}
@media (max-width:640px){
  .kcol{ border-right:none; padding:0 0 18px; margin-bottom:18px; border-bottom:1px solid var(--border); }
  .kcol:last-child{ border-bottom:none; margin-bottom:0; padding-bottom:0; }
}