@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;600;700&display=swap');

@font-face { font-family:'Gotham'; src:url('assets/fonts/GothamBook.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:'D-DIN Pro'; src:url('assets/fonts/D-DIN-PRO-500-Medium.otf') format('opentype'); font-weight:500; font-display:swap; }
@font-face { font-family:'D-DIN Pro'; src:url('assets/fonts/D-DIN-PRO-600-SemiBold.otf') format('opentype'); font-weight:600; font-display:swap; }

:root{
  --navy:#233B54; --navy-deep:#16324D; --gold:#C9A63E; --gold-bright:#D1A449; --pink:#EC008C;
  --ink-1:#1C1C1C; --ink-2:#4A4A4A; --ink-3:#8A8A8A;
  --paper:#FFFFFF; --paper-warm:#FAF6F0; --line:#E3DDD2;
  --wa:#25D366;
  --body:'Gotham','Montserrat',system-ui,-apple-system,sans-serif;
  --display:'Josefin Sans',var(--body);
  --label:'D-DIN Pro',var(--body);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--paper-warm);font-family:var(--body);color:var(--ink-1);-webkit-font-smoothing:antialiased;line-height:1.5}
input,select,textarea,button{font-family:inherit}
a{color:var(--navy)} a:hover{color:var(--gold-bright)}
::placeholder{color:#B9B2A6}

.wrap{max-width:620px;margin:0 auto;padding:16px 16px 120px}

/* ---- framed navy header (business-card motif) ---- */
.masthead{background:var(--navy);border-radius:4px;padding:7px;margin:4px 0 14px}
.masthead-inner{border:1px solid rgba(255,255,255,.42);border-radius:2px;padding:16px 18px;display:flex;align-items:flex-end;justify-content:space-between;gap:14px}
.masthead img{height:34px;width:auto;display:block}
.masthead .kicker{font-family:var(--label);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:#C3CEDC;margin-top:10px;font-weight:500}
.counter{text-align:right;min-width:118px}
.counter .cap{font-family:var(--label);font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#8CA0B8}
.counter .num{font-family:var(--label);font-weight:600;font-size:26px;color:var(--gold);line-height:1.1;margin-top:3px}
.counter .num small{font-size:14px;color:#8CA0B8;font-weight:500}
.bar{height:4px;background:#33456B;border-radius:2px;margin-top:8px;overflow:hidden}
.bar span{display:block;height:100%;width:0;background:var(--gold);transition:width .3s}

/* ---- tabs ---- */
.tabs{display:flex;gap:0;border:1px solid var(--line);border-radius:3px;overflow:hidden;margin-bottom:16px;background:var(--paper)}
.tabs button{flex:1;padding:13px 8px;border:none;background:none;font-family:var(--label);font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);cursor:pointer;border-bottom:2px solid transparent}
.tabs button+button{border-left:1px solid var(--line)}
.tabs button:hover{color:var(--navy)}
.tabs button[aria-selected="true"]{color:var(--navy);border-bottom-color:var(--gold);background:#FFFDF9}

/* ---- panels ---- */
.card{background:var(--paper);border:1px solid var(--line);border-radius:3px;padding:20px;margin-bottom:14px}
h2.sec{font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:.03em;margin:0 0 4px;color:var(--navy);text-transform:uppercase}
.sec-note{font-size:12.5px;color:var(--ink-3);margin:0 0 14px}
.rule{display:flex;align-items:center;gap:9px;color:var(--gold);margin:18px 0;font-size:9px}
.rule::before,.rule::after{content:"";flex:1;height:1px;background:var(--line)}

label.lbl{display:block;font-family:var(--label);font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.in,.sel,textarea.in{width:100%;padding:12px 13px;border:1px solid var(--line);border-radius:2px;font-size:15px;background:#FFFDFA;color:var(--ink-1)}
.sel{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);background-position:calc(100% - 18px) 52%,calc(100% - 13px) 52%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px}
.in:focus,.sel:focus,textarea.in:focus{outline:none;border-color:var(--navy)}
textarea.in{min-height:170px;line-height:1.6;resize:vertical}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.stack{display:grid;gap:12px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 18px;border-radius:2px;font-family:var(--label);font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;border:1px solid transparent;transition:background .15s,color .15s}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:var(--navy-deep)}
.btn-ghost{background:var(--paper);color:var(--navy);border-color:var(--navy)}
.btn-ghost:hover{background:#F4F1EA}
.btn-quiet{background:none;color:var(--ink-3);border-color:var(--line)}
.btn-quiet:hover{color:var(--navy)}
.btn-wa{background:var(--wa);color:#fff;min-height:46px}
.btn-wa:hover{background:#1FB856}
.btn-full{width:100%}
.btn-sm{min-height:38px;padding:0 12px;font-size:11px}
.btn:disabled{opacity:.45;cursor:not-allowed}

.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px;align-items:center}
.chip{padding:7px 12px;border:1px solid var(--line);background:#FFFDFA;color:var(--navy);border-radius:2px;font-family:var(--label);font-size:12px;font-weight:500;cursor:pointer}
.chip:hover{border-color:var(--gold);color:var(--gold-bright)}

.badge{font-family:var(--label);font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border-radius:2px;border:1px solid}
.badge-tier{color:var(--pink);background:#FDEAF5;border-color:#F7C4E1}
.badge-intl{color:var(--navy);background:#EAF0F6;border-color:#C8D6E4}
.badge-warn{color:#8A6300;background:#FBF3DE;border-color:#EBDCB0}
.badge-done{color:#2E6B2A;background:#EDF5E9;border-color:#CBE2C2}

.note{font-size:12px;color:var(--ink-3);margin:9px 0 0;line-height:1.55}
.note b{color:var(--navy)}

.status{margin-top:13px;padding:12px 14px;border-radius:2px;font-size:13px;line-height:1.5}
.status-ok{background:#EDF5E9;border:1px solid #CBE2C2;color:#2E6B2A}
.status-warn{background:#FBF3DE;border:1px solid #EBDCB0;color:#7A5A12}
.status-info{background:#EAF0F6;border:1px solid #C8D6E4;color:var(--navy)}

.row{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid #F0EBE1}
.row:last-child{border-bottom:none}
.row-main{flex:1;min-width:0}
.row-name{font-size:15.5px;font-weight:400;color:var(--ink-1);display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.row-sub{font-family:var(--label);font-size:12.5px;color:var(--ink-3);margin-top:3px}
.row-act{display:flex;align-items:center;gap:7px;flex-shrink:0}
.icon-btn{width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;background:var(--paper);color:var(--ink-2);border:1px solid var(--line);border-radius:2px;font-size:15px;cursor:pointer}
.icon-btn:hover{border-color:var(--navy);color:var(--navy)}

.empty{text-align:center;padding:28px 12px;color:var(--ink-3);font-size:14px;line-height:1.6}

.drop{display:flex;align-items:center;justify-content:center;gap:10px;border:1px dashed var(--gold);border-radius:2px;padding:16px;cursor:pointer;background:#FFFDF7;text-align:center;font-family:var(--label);font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--navy)}
.drop:hover{background:#FDF9EE}

.preview{margin-top:15px;background:#FFFDF7;border:1px solid var(--line);border-left:2px solid var(--gold);padding:15px}
.preview .cap{font-family:var(--label);font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-bright);margin-bottom:8px}
.preview .body{font-size:14.5px;line-height:1.65;white-space:pre-wrap;color:#2B2B2B}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--navy);color:#fff;padding:13px 22px;border-radius:2px;font-size:14px;box-shadow:0 8px 24px rgba(35,59,84,.3);z-index:60;max-width:90vw;text-align:center}

.gate{max-width:420px;margin:16vh auto;padding:0 20px;text-align:center}
.gate .card{padding:34px 26px}
.gate h1{font-family:var(--display);font-weight:600;font-size:20px;letter-spacing:.12em;text-transform:uppercase;color:var(--navy);margin:18px 0 6px}
.gate p{font-size:13.5px;color:var(--ink-3);margin:0 0 22px;line-height:1.6}
.hide{display:none !important}

@media(max-width:520px){ .grid2{grid-template-columns:1fr} .wrap{padding:12px 12px 110px} }
@media print{ body{background:#fff} .tabs,.row-act,.btn{display:none} }