:root{
    --ink:#132229; --ink2:#1d3540; --lime:#A3BC5E; --blue:#3C7DA3;
    --paper:#F7F6F2; --card:#ffffff; --line:#E4E0D5; --muted:#6C7880;
    --ok:#3f9142; --ok-bg:#eaf5ea; --none:#b2493a; --none-bg:#fbecea;
    --premium:#8a6d18; --premium-bg:#fbf3df; --premium-line:#e7d4a0;
    --normal:#2f6285; --normal-bg:#eaf2f7; --normal-line:#c9dde9;
    --new:#2f6285; --new-bg:#eaf2f7; --prog:#8a6d18; --prog-bg:#fbf3df;
    --booked:#3f9142; --booked-bg:#eaf5ea; --unable:#b2493a; --unable-bg:#fbecea;
    --warn:#b8791f; --warn-bg:#fdf3e4; --warn-line:#eed7ac;
    --breach:#b2493a; --breach-bg:#fbecea; --breach-line:#eec9c3;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
       background:var(--paper); color:var(--ink); line-height:1.5;}
  .hidden{display:none !important;}
  button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
  .tab:focus-visible, [tabindex]:focus-visible{outline:2.5px solid var(--blue); outline-offset:2px;}
  @media (prefers-reduced-motion: reduce){ *{transition:none !important; animation:none !important;} }

  /* ================= LOGIN ================= */
  #login{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;
         background:linear-gradient(160deg,#132229,#1d3540);}
  .login-card{background:var(--card); border-radius:18px; padding:40px 36px; width:100%; max-width:400px;
              box-shadow:0 20px 60px rgba(0,0,0,.3); text-align:center;}
  .login-card img{height:52px; margin-bottom:22px;}
  .login-card h1{font-family:'Fraunces',Georgia,serif; font-size:21px; font-weight:600; margin-bottom:6px; letter-spacing:-.01em;}
  .login-card p{color:var(--muted); font-size:13.5px; margin-bottom:24px;}
  .role-btns{display:flex; flex-direction:column; gap:11px;}
  .role-btn{padding:14px; border:1.5px solid var(--line); border-radius:11px; background:#fff; cursor:pointer;
            font-size:14.5px; font-weight:600; font-family:inherit; color:var(--ink); transition:all .15s;
            display:flex; align-items:center; justify-content:center; gap:10px;}
  .role-btn:hover{border-color:var(--blue); background:#f5f9fb;}
  .role-btn.sel{border-color:var(--ink); background:var(--ink); color:#fff;}
  .role-btn.sel .sub{color:#9fb4bd;}
  .role-btn .sub{font-weight:400; font-size:12px; color:var(--muted);}
  .pin-row{margin-top:18px; display:none; text-align:left;}
  .pin-row label{display:block; font-size:11.5px; font-weight:600; color:var(--muted); margin-bottom:5px;
                 text-transform:uppercase; letter-spacing:.05em;}
  .pin-row select{width:100%; padding:12px 13px; border:1.5px solid var(--line); border-radius:10px;
                  font-size:14.5px; font-family:inherit; background:#fff; margin-bottom:14px;}
  .pin-row input{width:100%; padding:12px 14px; border:1.5px solid var(--line); border-radius:10px;
                 font-size:16px; text-align:center; letter-spacing:.3em; font-family:inherit;}
  .pin-row select:focus,.pin-row input:focus{outline:none; border-color:var(--blue);}
  .pin-row .go{width:100%; margin-top:10px; padding:12px; background:var(--ink); color:#fff; border:none;
                  border-radius:10px; font-size:14px; font-weight:600; cursor:pointer; font-family:inherit;}
  .pin-err{color:var(--none); font-size:12.5px; margin-top:8px; min-height:16px; text-align:center;}
  .demo-hint{margin-top:20px; font-size:11px; color:var(--muted); line-height:1.6; border-top:1px solid var(--line); padding-top:14px;}

  /* ================= CHROME ================= */
  header{background:var(--ink); color:#fff; padding:0 22px; display:flex; align-items:center;
         justify-content:space-between; height:60px; position:sticky; top:0; z-index:10;}
  header .left{display:flex; align-items:center; gap:13px;}
  header img{height:30px;}
  header .title{font-size:14px; font-weight:600;}
  header .title .role{display:block; font-size:11px; color:var(--lime); font-weight:500; letter-spacing:.04em;}
  header .right{display:flex; align-items:center; gap:10px;}
  .updated{font-size:11.5px; color:#9fb4bd;}
  .icon-btn{background:rgba(255,255,255,.1); color:#fff; border:none; width:34px; height:34px; border-radius:9px;
            font-size:15px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s;}
  .icon-btn:hover{background:rgba(255,255,255,.22);}
  .icon-btn.on{background:var(--lime); color:var(--ink);}
  .logout{background:rgba(255,255,255,.1); color:#fff; border:none; padding:7px 13px; border-radius:8px;
          font-size:12.5px; cursor:pointer; font-family:inherit; font-weight:500;}
  .logout:hover{background:rgba(255,255,255,.2);}

  .tabs{background:var(--ink2); display:flex; padding:0 22px; gap:4px; overflow-x:auto;}
  .tab{padding:12px 18px; color:#9fb4bd; font-size:13px; font-weight:600; cursor:pointer;
       border-bottom:2.5px solid transparent; white-space:nowrap;}
  .tab:hover{color:#fff;}
  .tab.active{color:#fff; border-bottom-color:var(--lime);}
  .tab .badge{background:var(--lime); color:var(--ink); font-size:10.5px; font-weight:700; padding:1px 7px; border-radius:10px; margin-left:6px;}
  .tab .badge.alert{background:#e8564a; color:#fff;}

  .wrap{max-width:1120px; margin:0 auto; padding:22px;}

  .role-banner{border-radius:11px; padding:12px 18px; margin-bottom:18px; font-size:13px;}
  .role-banner.book{background:#eef5f8; border:1px solid #cfe1e9; color:#245066;}
  .role-banner.agent{background:var(--ok-bg); border:1px solid #cfe6cf; color:#2f6b32;}
  .role-banner b{font-weight:650;}

  .legend{display:flex; gap:16px; align-items:center; margin-bottom:14px; font-size:12px; color:var(--muted); flex-wrap:wrap;}
  .tag{font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:2px 8px; border-radius:5px;}
  .tag.premium{background:var(--premium-bg); color:var(--premium); border:1px solid var(--premium-line);}
  .tag.normal{background:var(--normal-bg); color:var(--normal); border:1px solid var(--normal-line);}

  .filters{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:16px;}
  .filters label{font-size:12px; color:var(--muted); font-weight:600; margin-right:2px;}
  .chip{padding:7px 13px; border:1.5px solid var(--line); border-radius:20px; background:#fff; cursor:pointer;
        font-size:12.5px; font-family:inherit; color:var(--ink); transition:all .12s;}
  .chip:hover{border-color:var(--blue);}
  .chip.active{background:var(--ink); color:#fff; border-color:var(--ink);}
  .filters .sep{width:1px; height:22px; background:var(--line); margin:0 4px;}
  .search{padding:8px 13px; border:1.5px solid var(--line); border-radius:20px; font-size:12.5px;
          font-family:inherit; min-width:190px;}
  .search:focus{outline:none; border-color:var(--blue);}

  .cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:14px;}
  .apt-card{background:var(--card); border:1px solid var(--line); border-radius:13px; overflow:hidden; display:flex; flex-direction:column;}
  .apt-head{display:flex; align-items:center; gap:10px; padding:13px 16px; background:#faf9f6; border-bottom:1px solid var(--line);}
  .flag{width:24px; height:17px; border-radius:2px; flex-shrink:0; box-shadow:0 0 0 1px rgba(0,0,0,.08);}
  .apt-head .c-name{font-weight:650; font-size:14.5px;}
  .apt-head .ce-name{font-size:12px; color:var(--muted); margin-left:auto;}
  .type-block{padding:12px 16px; border-bottom:1px solid #f2efe6;}
  .type-block:last-child{border-bottom:none;}
  .type-head{display:flex; align-items:center; gap:8px; margin-bottom:9px;}
  .count-pill{font-size:11px; font-weight:600; color:var(--muted);}
  .dates{display:flex; flex-wrap:wrap; gap:6px;}
  .date-pill{font-size:12px; font-weight:600; padding:4px 10px; border-radius:7px; display:inline-flex; align-items:center; gap:7px;}
  .date-pill.premium{background:var(--premium-bg); color:var(--premium); border:1px solid var(--premium-line);}
  .date-pill.normal{background:var(--normal-bg); color:var(--normal); border:1px solid var(--normal-line);}
  .date-pill .x{cursor:pointer; font-weight:700; opacity:.55; font-size:13px; line-height:1;}
  .date-pill .x:hover{opacity:1;}
  .no-dates{font-size:12px; color:var(--none); background:var(--none-bg); padding:5px 11px; border-radius:7px; display:inline-block; font-weight:600;}
  .add-row{display:flex; gap:7px; margin-top:9px;}
  .add-row input{flex:1; min-width:0; padding:11px 12px; border:1.5px solid var(--line); border-radius:8px;
                 font-size:16px; font-family:inherit; background:#fff; color:var(--ink);
                 position:relative; z-index:1; -webkit-appearance:none; appearance:none;}
  .add-row input:focus{outline:none; border-color:var(--blue);}
  .add-row button{padding:11px 15px; flex:0 0 auto; background:var(--ink); color:#fff; border:none; border-radius:8px; font-size:12.5px; font-weight:600; cursor:pointer; font-family:inherit; white-space:nowrap;}

  .summary{display:flex; gap:12px; margin-bottom:18px; flex-wrap:wrap;}
  .sum-card{flex:1; min-width:120px; background:var(--card); border:1px solid var(--line); border-radius:11px; padding:13px 16px;}
  .sum-card .n{font-family:'Fraunces',Georgia,serif; font-size:24px; font-weight:600; letter-spacing:-.02em;}
  .sum-card .l{font-size:11.5px; color:var(--muted); margin-top:1px;}
  .sum-card.prem .n{color:var(--premium);} .sum-card.norm .n{color:var(--normal);} .sum-card.none .n{color:var(--none);}
  .sum-card.new .n{color:var(--new);} .sum-card.prog .n{color:var(--prog);} .sum-card.booked .n{color:var(--booked);}
  .sum-card.breach .n{color:var(--breach);} .sum-card.good .n{color:var(--ok);}

  .footer-note{text-align:center; font-size:11.5px; color:var(--muted); margin-top:22px; line-height:1.6;}

  /* ---- REQUEST FORM ---- */
  .req-form{background:var(--card); border:1px solid var(--line); border-radius:13px; padding:20px 22px; margin-bottom:22px;}
  .req-form h3{font-family:'Fraunces',Georgia,serif; font-size:17px; font-weight:600; margin-bottom:3px;}
  .req-form .fdesc{font-size:12.5px; color:var(--muted); margin-bottom:16px;}
  .frow{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:13px;}
  .fcol{flex:1; min-width:150px;}
  .fcol label{display:block; font-size:12px; font-weight:600; margin-bottom:5px;}
  .fcol select, .fcol input[type=text], .fcol textarea{width:100%; padding:10px 12px; border:1.5px solid var(--line);
    border-radius:9px; font-size:13.5px; font-family:inherit; background:#fff;}
  .fcol select:focus, .fcol input:focus, .fcol textarea:focus{outline:none; border-color:var(--blue);}
  .fcol textarea{resize:vertical; min-height:58px;}
  .file-drop{border:1.5px dashed var(--line); border-radius:9px; padding:14px; text-align:center; font-size:12.5px; color:var(--muted); cursor:pointer;}
  .file-drop:hover{border-color:var(--blue); background:#f5f9fb;}
  .file-drop.has{border-style:solid; border-color:var(--ok); background:var(--ok-bg); color:var(--ok); font-weight:600;}
  .sla-preview{font-size:12px; color:var(--muted); background:var(--paper); border:1px solid var(--line);
               border-radius:9px; padding:9px 13px; margin-bottom:13px;}
  .sla-preview b{color:var(--ink); font-weight:650;}
  .submit-req{margin-top:6px; padding:12px 22px; background:var(--ink); color:#fff; border:none; border-radius:10px;
              font-size:14px; font-weight:600; cursor:pointer; font-family:inherit;}
  .submit-req:hover{background:#1d3540;}

  /* ---- REQUEST LIST ---- */
  .req-list{display:flex; flex-direction:column; gap:12px;}
  .req{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:15px 18px;}
  .req.unseen{border-color:var(--lime); box-shadow:0 0 0 2.5px rgba(163,188,94,.22);}
  .req-top{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:4px;}
  .req-top .route{font-weight:650; font-size:14px; display:flex; align-items:center; gap:8px;}
  .st{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:3px 10px; border-radius:20px;}
  .st.new{background:var(--new-bg); color:var(--new);} .st.prog{background:var(--prog-bg); color:var(--prog);}
  .st.booked{background:var(--booked-bg); color:var(--booked);} .st.unable{background:var(--unable-bg); color:var(--unable);}
  .req-id{font-size:11.5px; color:var(--muted); margin-left:auto; font-family:ui-monospace,monospace;}
  .client-line{font-size:13.5px; margin-bottom:11px; color:#33454d;}
  .client-line b{font-weight:650; color:var(--ink);}
  .by{font-size:12px; color:var(--muted);}
  .by .who{font-weight:650; color:#33454d;}
  .req-meta{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px 18px; font-size:12.5px; margin-bottom:11px;}
  .req-meta .k{color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.04em;}
  .req-meta .v{font-weight:600; margin-top:1px;}
  .req-notes{font-size:12.5px; background:var(--paper); border-radius:8px; padding:9px 12px; margin-bottom:10px; color:#33454d;}
  .req-notes .k{font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:700; display:block; margin-bottom:2px;}
  .passport-link{font-size:12.5px; color:var(--blue); font-weight:600; text-decoration:none; display:inline-flex; align-items:center; gap:6px; cursor:pointer;}
  .passport-link:hover{text-decoration:underline;}
  .req-actions{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; align-items:center;}
  .req-actions button{padding:8px 14px; border-radius:8px; font-size:12.5px; font-weight:600; cursor:pointer; font-family:inherit; border:1.5px solid var(--line); background:#fff;}
  .req-actions button.prog{border-color:var(--prog); color:var(--prog);}
  .req-actions button.book{background:var(--booked); color:#fff; border-color:var(--booked);}
  .req-actions button.unable{border-color:var(--unable); color:var(--unable);}
  .req-actions button.ghost{color:var(--muted);}
  .req-actions button:hover{filter:brightness(.97);}
  .book-date-in{padding:8px 11px; border:1.5px solid var(--line); border-radius:8px; font-size:12.5px; font-family:inherit; max-width:170px;}

  /* ================= V3: ADMIN, WAITLIST, APPROVALS ================= */
  :root{ --review:#6b4fa8; --review-bg:#f1ecfa; --review-line:#ded1f3;
         --wl:#8a6d18; --wl-bg:#fbf3df; }
  .role-btn.sel .sub{color:#9fb4bd;}
  .role-banner.admin{background:#f1ecfa; border:1px solid var(--review-line); color:#54408a;}
  .st.review{background:var(--review-bg); color:var(--review);}
  .sum-card.review .n{color:var(--review);}
  .tag.wl{background:var(--wl-bg); color:var(--wl); border:1px solid var(--premium-line);}
  .tag.open{background:var(--ok-bg); color:var(--ok); border:1px solid #cfe6cf;}

  .sect-head{display:flex; align-items:center; gap:12px; margin:26px 2px 14px;}
  .sect-head:first-child{margin-top:4px;}
  .sect-head h3{font-family:'Fraunces',Georgia,serif; font-size:16px; font-weight:600;}
  .sect-head .hint{font-size:12.5px; color:var(--muted);}
  .sect-head .rule{flex:1; height:1px; background:var(--line);}
  .wl-note{background:var(--wl-bg); border:1px solid var(--premium-line); color:var(--premium);
           border-radius:10px; padding:11px 15px; font-size:12.5px; margin-bottom:14px;}
  .apt-card.wl{background:#fdfcf8; border-style:dashed;}
  .apt-card.wl .apt-head::after{content:"Waitlist only"; margin-left:auto; font-size:10.5px; font-weight:700;
           letter-spacing:.05em; text-transform:uppercase; color:var(--wl); background:var(--wl-bg);
           border:1px solid var(--premium-line); border-radius:20px; padding:3px 9px;}

  /* submission panel (booker) */
  .sub-panel{margin-top:12px; border:1.5px solid var(--review-line); background:#faf8fe;
             border-radius:11px; padding:14px 16px;}
  .sub-panel h4{font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--review);
                margin-bottom:4px; font-weight:700;}
  .sub-panel .why{font-size:12.5px; color:var(--muted); margin-bottom:12px;}
  .sub-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:11px; margin-bottom:11px;}
  .sub-grid label{display:block; font-size:11.5px; font-weight:600; color:var(--muted); margin-bottom:5px;}
  .sub-grid input{width:100%; padding:9px 12px; border:1.5px solid var(--line); border-radius:8px;
                  font-size:13px; font-family:inherit; background:#fff;}
  .mini-drop{border:1.5px dashed var(--line); border-radius:9px; padding:11px; text-align:center; cursor:pointer;
             font-size:12.5px; color:var(--muted); background:#fff; transition:all .15s;}
  .mini-drop:hover{border-color:var(--blue); color:var(--blue);}
  .mini-drop.has{border-style:solid; border-color:var(--booked); color:var(--booked); background:var(--booked-bg); font-weight:600;}
  .doc-links{display:flex; flex-wrap:wrap; gap:14px; margin-top:10px; padding-top:11px; border-top:1px solid var(--line);}
  .fee-pill{display:inline-flex; align-items:center; gap:6px; background:var(--ink); color:#fff;
            border-radius:20px; padding:4px 12px; font-size:12.5px; font-weight:600;}
  .reject-note{background:var(--breach-bg); border:1px solid var(--breach-line); color:var(--breach);
               border-radius:9px; padding:10px 13px; font-size:12.5px; margin-top:10px;}
  .reject-note b{font-weight:700;}
  .req-actions button.approve{background:var(--ok); color:#fff; border-color:var(--ok);}
  .req-actions button.reject{border-color:var(--unable); color:var(--unable);}
  .req-actions button.submitdocs{background:var(--review); color:#fff; border-color:var(--review);}
  .reason-sel{padding:8px 10px; border:1.5px solid var(--line); border-radius:8px; font-size:12.5px; font-family:inherit; background:#fff;}

  /* country control */
  .ctrl-table{width:100%; border-collapse:collapse; font-size:13.5px;}
  .ctrl-table th{text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.05em;
                 color:var(--muted); padding:0 10px 9px; font-weight:700;}
  .ctrl-table td{padding:12px 10px; border-top:1px solid var(--line); vertical-align:middle;}
  .ctrl-table tr:hover td{background:#faf9f6;}
  .toggle{display:inline-flex; border:1.5px solid var(--line); border-radius:20px; overflow:hidden; background:#fff;}
  .toggle button{padding:7px 15px; border:none; background:#fff; font-size:12.5px; font-weight:600;
                 cursor:pointer; font-family:inherit; color:var(--muted);}
  .toggle button.on.open{background:var(--ok); color:#fff;}
  .toggle button.on.wait{background:var(--wl); color:#fff;}
  .storage-bar{height:9px; border-radius:6px; background:var(--line); overflow:hidden; margin:9px 0 7px;}
  .storage-bar i{display:block; height:100%; background:var(--ok);}
  .storage-bar i.warn{background:var(--warn);} .storage-bar i.breach{background:var(--breach);}

  /* finance review state — internal, never shown to sales agents */
  .fin{font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
       border-radius:20px; padding:3px 10px; white-space:nowrap;}
  .fin.pending{background:var(--review-bg); color:var(--review);}
  .fin.approved{background:var(--ok-bg); color:var(--ok);}
  .fin.queried{background:var(--breach-bg); color:var(--breach);}

  /* ================= V5: TWO WORKFLOWS, CLAIMABLE DATES, COUNTRY ADMIN ========= */
  .kind-switch{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:20px;}
  .kind-btn{text-align:left; padding:13px 15px; border:1.5px solid var(--line); border-radius:11px;
            background:#fff; cursor:pointer; font-family:inherit; color:var(--ink); transition:all .15s;}
  .kind-btn b{display:block; font-size:14px; font-weight:650; margin-bottom:2px;}
  .kind-btn span{font-size:12px; color:var(--muted); line-height:1.4;}
  .kind-btn:hover{border-color:var(--blue);}
  .kind-btn.active{border-color:var(--ink); background:var(--ink); color:#fff;}
  .kind-btn.active span{color:#9fb4bd;}

  .kind{font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
        border-radius:20px; padding:3px 10px; white-space:nowrap;}
  .kind.enq{background:var(--normal-bg); color:var(--normal); border:1px solid var(--normal-line);}
  .kind.book{background:var(--ink); color:#fff;}
  .req.enq{border-left:3px solid var(--blue);}

  .country-picks{display:flex; flex-wrap:wrap; gap:8px;}
  .cpick{display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border:1.5px solid var(--line);
         border-radius:20px; background:#fff; cursor:pointer; font-size:13px; font-weight:500;}
  .cpick:hover{border-color:var(--blue);}
  .cpick:has(input:checked){border-color:var(--ink); background:#f2f5f6; font-weight:600;}
  .cpick input{margin:0; cursor:pointer;}

  .reply-box{width:100%; min-height:96px; padding:12px 14px; border:1.5px solid var(--line); border-radius:9px;
             font-family:inherit; font-size:14px; line-height:1.5; resize:vertical; background:#fff;
             position:relative; z-index:1; -webkit-appearance:none; appearance:none; color:var(--ink);}
  .reply-box:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(60,125,163,.14);}
  .reply-note{background:var(--ok-bg); border:1px solid #cfe6cf; border-radius:9px; padding:11px 14px;
              margin-top:11px; font-size:13.5px; white-space:pre-wrap; color:#2f6b32;}
  .reply-note .k{display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em;
                 font-weight:700; margin-bottom:5px; opacity:.75;}

  .fhint{font-size:11.5px; color:var(--muted); margin-top:6px; line-height:1.45;}
  #rq_date_other{margin-top:8px;}
  .claim-note{background:var(--wl-bg); border:1px solid var(--premium-line); color:var(--premium);
              border-radius:10px; padding:11px 15px; font-size:13px; margin-bottom:16px;}
  .claim-note a{color:var(--premium); font-weight:700; text-decoration:underline; cursor:pointer;}

  .date-pill.pick{cursor:pointer;}
  .date-pill.pick:hover{outline:2px solid var(--blue); outline-offset:1px;}
  .date-pill.held{opacity:.6; text-decoration:line-through; text-decoration-thickness:1px;}
  .date-pill.mine{outline:2px solid var(--lime); outline-offset:1px; opacity:1; text-decoration:none;}
  .hold-by{font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
           margin-left:7px; opacity:.85;}

  .add-country{margin-top:22px; padding-top:18px; border-top:1px solid var(--line);}
  .add-country h4{font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted);
                  font-weight:700; margin-bottom:12px;}
  .ac-row{display:grid; grid-template-columns:1.4fr 1.2fr auto auto; gap:12px; align-items:end;}
  .ac-row label{display:block; font-size:11.5px; font-weight:600; color:var(--muted); margin-bottom:5px;}
  .ac-row input[type=text], .ac-row input:not([type]), .ac-row select{
    width:100%; padding:10px 12px; border:1.5px solid var(--line); border-radius:9px;
    font-size:13.5px; font-family:inherit; background:#fff;}
  .swatches{display:flex; gap:6px;}
  .swatches input[type=color]{width:38px; height:38px; padding:2px; border:1.5px solid var(--line);
                              border-radius:9px; background:#fff; cursor:pointer;}
  .add-btn{padding:10px 18px; background:var(--ink); color:#fff; border:none; border-radius:9px;
           font-size:13.5px; font-weight:600; cursor:pointer; font-family:inherit; white-space:nowrap;}
  .ac-note{font-size:11.5px; color:var(--muted); margin-top:10px;}
  .row-x{border:1.5px solid var(--line); background:#fff; color:var(--muted); border-radius:8px;
         width:30px; height:30px; font-size:17px; line-height:1; cursor:pointer; font-family:inherit;}
  .row-x:hover{border-color:var(--unable); color:var(--unable);}
  .st.answered{background:var(--ok-bg); color:var(--ok);}
  @media (max-width:760px){
    .kind-switch{grid-template-columns:1fr;}
    .ac-row{grid-template-columns:1fr; gap:14px;}
    .add-btn{width:100%; padding:14px;}
    .swatches input[type=color]{width:100%; height:44px;}
    .ctrl-table{min-width:520px;}          /* scrolls inside its own box, not the page */
    .row-x{width:38px; height:38px;}
  }
  .reason-sel{padding:8px 11px; border:1.5px solid var(--line); border-radius:8px; font-size:12.5px; font-family:inherit;}
  .empty-state{text-align:center; color:var(--muted); padding:40px 20px; font-size:13.5px; background:var(--card);
               border:1px dashed var(--line); border-radius:12px;}

  /* ---- SLA BLOCK (signature element) ---- */
  .sla{border:1px solid var(--line); border-radius:10px; padding:11px 13px; background:#fcfbf8; margin-bottom:11px;}
  .sla-line{display:flex; align-items:center; gap:9px; font-size:12px; margin-bottom:7px;}
  .sla-line:last-of-type{margin-bottom:0;}
  .sla-name{color:var(--muted); font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; font-weight:700; width:72px; flex-shrink:0;}
  .sla-track{flex:1; height:6px; background:#ece9e0; border-radius:4px; overflow:hidden; min-width:60px;}
  .sla-track i{display:block; height:100%; border-radius:4px; transition:width .4s ease;}
  .sla-track i.ok{background:var(--ok);} .sla-track i.warn{background:var(--warn);} .sla-track i.breach{background:var(--breach);}
  .sla-val{font-size:11.5px; font-weight:650; white-space:nowrap;}
  .sla-val.ok{color:var(--ok);} .sla-val.warn{color:var(--warn);} .sla-val.breach{color:var(--breach);}
  .sla-val.idle{color:var(--muted); font-weight:500;}

  /* ---- PERFORMANCE ---- */
  .kpi-head{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:6px;}
  .kpi-head h2{font-family:'Fraunces',Georgia,serif; font-size:22px; font-weight:600; letter-spacing:-.015em;}
  .kpi-sub{font-size:12.5px; color:var(--muted); margin-bottom:18px;}
  .panel{background:var(--card); border:1px solid var(--line); border-radius:13px; padding:18px 20px; margin-bottom:16px;}
  .panel h3{font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:13px;}
  table{width:100%; border-collapse:collapse; font-size:13px;}
  th{text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted);
     font-weight:700; padding:0 10px 9px 0; border-bottom:1px solid var(--line);}
  td{padding:11px 10px 11px 0; border-bottom:1px solid #f2efe6;}
  tr:last-child td{border-bottom:none;}
  td.name{font-weight:650;}
  td.num{font-variant-numeric:tabular-nums;}
  .pct{display:inline-flex; align-items:center; gap:7px; font-weight:650; font-variant-numeric:tabular-nums;}
  .pct.ok{color:var(--ok);} .pct.warn{color:var(--warn);} .pct.breach{color:var(--breach);}
  .mini{width:52px; height:5px; background:#ece9e0; border-radius:3px; overflow:hidden;}
  .mini i{display:block; height:100%;}
  .mini i.ok{background:var(--ok);} .mini i.warn{background:var(--warn);} .mini i.breach{background:var(--breach);}
  .sla-config{font-size:12px; color:var(--muted); line-height:1.7;}
  .sla-config b{color:var(--ink);}
  .export{padding:9px 16px; border:1.5px solid var(--line); background:#fff; border-radius:9px; font-size:12.5px;
          font-weight:600; font-family:inherit; cursor:pointer; color:var(--ink);}
  .export:hover{border-color:var(--blue);}

  /* ---- TOAST ---- */
  #toasts{position:fixed; right:20px; bottom:20px; z-index:80; display:flex; flex-direction:column; gap:10px; max-width:330px;
          pointer-events:none;}   /* the strip must not block taps on the form beneath it */
  .toast{pointer-events:auto;}
  .toast{background:var(--ink); color:#fff; border-radius:11px; padding:13px 16px; box-shadow:0 10px 34px rgba(0,0,0,.28);
         font-size:13px; animation:slidein .25s ease;}
  .toast .t{font-weight:650; margin-bottom:2px; display:flex; align-items:center; gap:8px;}
  .toast .t .dot{width:7px; height:7px; border-radius:50%; background:var(--lime);}
  .toast .b{color:#c3d2d8; font-size:12.5px;}
  @keyframes slidein{from{transform:translateY(14px); opacity:0} to{transform:translateY(0); opacity:1}}

  .lb{position:fixed; inset:0; background:rgba(19,34,41,.85); display:none; align-items:center; justify-content:center; z-index:60; padding:30px;}
  .lb img{max-width:92%; max-height:92%; border-radius:8px;}
  .lb .close{position:absolute; top:20px; right:26px; color:#fff; font-size:30px; cursor:pointer;}

  @media(max-width:640px){
    .cards{grid-template-columns:1fr;}
    header{padding:0 14px;} .tabs{padding:0 14px;} .wrap{padding:16px 14px;}
    .updated{display:none;}
    .req-id{margin-left:0; width:100%;}
    .sla-name{width:62px;}
    .table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%;}

  /* The header sticks to the top. When a phone scrolls a field into view to
     open the keyboard, the field could land underneath it and swallow the tap.
     This keeps a header's worth of clearance above anything focusable. */
  input, select, textarea, button, .date-pill, .file-drop, .cpick, .chip{ scroll-margin-top:76px; }
  .type-block, .apt-card, .req, .sub-panel, .add-country{ scroll-margin-top:76px; } table{min-width:520px;}
    #toasts{left:14px; right:14px; max-width:none;}
  }