:root{
  --navy:#1F3864; --blue:#2E5496; --ink:#1a1e26; --muted:#5b6472;
  --line:#dfe3ea; --bg:#eef1f5; --card:#ffffff; --soft:#f5f7fa;
  --g:#1f8a4c; --a:#c9820a; --r:#c0392b;
  --shadow:0 1px 2px rgba(31,56,100,.06),0 6px 20px rgba(31,56,100,.06);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:14px;line-height:1.45}
h1,h2,h3,.brand-mark,.mh-title strong{font-family:Georgia,"Times New Roman",serif}
button{font:inherit;cursor:pointer;border-radius:7px;border:1px solid transparent;padding:.5rem .9rem}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:#182c4f}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.btn-ghost:hover{background:rgba(255,255,255,.12)}
.err{color:var(--r);font-size:.85rem;margin:.4rem 0 0}

/* login */
.login-screen{min-height:100vh;display:grid;place-items:center;
  background:linear-gradient(140deg,#1F3864,#2E5496)}
.login-card{background:#fff;border-radius:14px;padding:2.2rem 2rem;width:min(92vw,380px);
  box-shadow:0 20px 60px rgba(0,0,0,.25);display:flex;flex-direction:column}
.login-brand{display:flex;align-items:baseline;gap:.5rem;margin-bottom:1.3rem}
.brand-mark{background:var(--navy);color:#fff;font-weight:700;letter-spacing:.06em;
  padding:.25rem .5rem;border-radius:6px;font-size:1.05rem}
.brand-mark.small{font-size:.85rem;padding:.2rem .45rem}
.brand-sub{color:var(--muted);font-size:.8rem;letter-spacing:.04em;text-transform:uppercase}
.login-card h1{font-size:1.35rem;color:var(--navy);margin:.2rem 0 .1rem}
.login-note{color:var(--muted);font-size:.82rem;margin:0 0 1.3rem}
.login-card label{display:flex;flex-direction:column;gap:.3rem;font-size:.8rem;color:var(--muted);margin-bottom:.9rem}
.login-card input{padding:.6rem .7rem;border:1px solid var(--line);border-radius:8px;font-size:.95rem;color:var(--ink)}
.login-card .btn-primary{margin-top:.4rem;padding:.65rem}

/* masthead */
.masthead{position:sticky;top:0;z-index:20;background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:space-between;padding:.6rem 1.1rem;gap:1rem}
.mh-left{display:flex;align-items:center;gap:.7rem}
.mh-title{display:flex;flex-direction:column;line-height:1.2}
.mh-title strong{font-size:1rem}
.mh-title span{font-size:.74rem;color:#c3cee2}
.mh-right{display:flex;align-items:center;gap:.5rem}
.who{font-size:.8rem;color:#c3cee2;margin-right:.3rem}

/* tabs */
.tabs{position:sticky;top:52px;z-index:15;background:#fff;border-bottom:1px solid var(--line);
  display:flex;gap:.2rem;padding:0 1rem;overflow-x:auto}
.tab{border:none;background:none;padding:.85rem .9rem .7rem;border-bottom:3px solid transparent;
  color:var(--muted);font-weight:600;white-space:nowrap;display:flex;flex-direction:column;gap:.25rem;align-items:flex-start;border-radius:0}
.tab .tab-id{color:var(--navy)}
.tab.active{border-bottom-color:var(--blue);color:var(--ink)}
.tab.disabled{opacity:.4;cursor:not-allowed}
.tab .bar{width:88px;height:4px;background:var(--soft);border-radius:3px;overflow:hidden}
.tab .bar>i{display:block;height:100%;background:var(--blue)}
.tab small{font-size:.68rem;color:var(--muted);font-weight:500}

/* toolbar */
.toolbar{display:flex;align-items:center;gap:1rem;padding:.75rem 1.1rem;max-width:1080px;margin:0 auto;width:100%}
.filter{flex:1;padding:.55rem .75rem;border:1px solid var(--line);border-radius:8px;font-size:.9rem;background:#fff}
.rowcount{color:var(--muted);font-size:.8rem;white-space:nowrap}

/* rows */
.rows{max-width:1080px;margin:0 auto;padding:0 1.1rem 4rem;width:100%}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow);margin-bottom:1rem;overflow:hidden}
.card-head{display:flex;justify-content:space-between;gap:1rem;padding:.85rem 1rem;
  background:var(--soft);border-bottom:1px solid var(--line)}
.chead-l{min-width:0}
.so{font-family:Georgia,serif;color:var(--navy);font-weight:700}
.ka{font-weight:600;margin-top:.15rem}
.kpi{color:var(--muted);font-size:.85rem;margin-top:.1rem}
.chead-r{text-align:right;white-space:nowrap;font-size:.72rem;color:var(--muted)}
.pa-tag{display:inline-block;background:#e7ecf5;color:var(--navy);border-radius:20px;
  padding:.1rem .55rem;font-size:.7rem;font-weight:600;margin-bottom:.35rem}

.ref{display:grid;grid-template-columns:1fr 1fr;gap:.1rem 1.4rem;padding:.8rem 1rem;
  border-bottom:1px dashed var(--line);font-size:.82rem}
.ref div{padding:.2rem 0}
.ref b{color:var(--muted);font-weight:600;margin-right:.35rem}
.ref .full{grid-column:1/-1}

.entry{padding:.9rem 1rem;display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
.field{display:flex;flex-direction:column;gap:.28rem}
.field.full{grid-column:1/-1}
.field label{font-size:.72rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.field textarea,.field input,.field select{border:1px solid var(--line);border-radius:8px;
  padding:.5rem .6rem;font:inherit;font-size:.88rem;color:var(--ink);background:#fff;resize:vertical}
.field textarea{min-height:52px}
.field :focus{outline:2px solid var(--blue);outline-offset:0;border-color:var(--blue)}

.pct-wrap{display:flex;align-items:center;gap:.6rem}
.pct-wrap input{width:90px}
.pct-wrap .suffix{color:var(--muted)}
.derived{display:flex;gap:.4rem;align-items:center}
.pill{font-size:.72rem;font-weight:700;padding:.18rem .55rem;border-radius:20px;background:var(--soft);color:var(--muted)}
.rag{width:1.6rem;height:1.6rem;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:.78rem}
.rag.G{background:var(--g)}.rag.A{background:var(--a)}.rag.R{background:var(--r)}.rag.none{background:#c2c8d2}
.rating-txt{font-size:.78rem;font-weight:600}

.card-foot{padding:.5rem 1rem;font-size:.72rem;color:var(--muted);display:flex;justify-content:space-between;
  border-top:1px solid var(--line);background:#fbfcfe}
.saved{color:var(--g);font-weight:600}
.saving{color:var(--blue)}

/* admin drawer */
.drawer{position:fixed;inset:0;background:rgba(20,30,50,.45);z-index:40;display:flex;justify-content:flex-end}
.drawer-panel{background:#fff;width:min(94vw,560px);height:100%;overflow:auto;padding:1.3rem}
.drawer-head{display:flex;justify-content:space-between;align-items:center}
.drawer-head .btn-ghost{color:var(--navy);border-color:var(--line)}
.drawer h2{color:var(--navy);margin:.2rem 0 1rem}
.cust-table{width:100%;border-collapse:collapse;font-size:.82rem;margin-bottom:1.4rem}
.cust-table td,.cust-table th{border-bottom:1px solid var(--line);padding:.45rem .4rem;text-align:left}
.cust-form{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;margin-top:.5rem}
.cust-form input,.cust-form select{padding:.5rem .6rem;border:1px solid var(--line);border-radius:7px;font:inherit}
.cust-form .btn-primary{grid-column:1/-1}

/* toast */
.toast{position:fixed;bottom:1.2rem;left:50%;transform:translateX(-50%);z-index:60;
  background:var(--navy);color:#fff;padding:.6rem 1.1rem;border-radius:8px;box-shadow:var(--shadow);font-size:.85rem}

@media(max-width:720px){
  .ref,.entry{grid-template-columns:1fr}
  .chead-r{display:none}
  .cust-form{grid-template-columns:1fr}
}