@import url(https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap);
/* Ported from docs/prototype.html. Keep the two in sync when the look changes. */
:root{
  --navy:#142344; --navy-2:#1f3360; --navy-3:#26406f; --gold:#c9a263; --gold-ink:#7a5a1e; --gold-bg:#f6efe0;
  --bg:#ffffff; --card:#ffffff; --line:#e3e6ee; --line-2:#c9cfdd; --ink:#1a2238; --ink-2:#3a4460; --mute:#5b6680;
  --ok-bg:#e3f1e8; --ok:#1f5b39; --warn-bg:#fbe9e3; --warn:#7a2e1e; --info-bg:#e4ecfa; --info:#23457a;
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}
body{margin:0;background:#ffffff;background:var(--bg);color:#1a2238;color:var(--ink);font-family:'DM Sans',system-ui,-apple-system,Segoe UI,sans-serif;font-size:14px;line-height:1.45}
a{color:inherit}
button{font:inherit;cursor:pointer}
input,select,textarea{font:inherit;color:#1a2238;color:var(--ink);background:#ffffff;background:var(--card)}
.app{display:flex;min-height:100%}
nav.side{flex:0 0 232px;background:#142344;background:var(--navy);color:#e8eaf1;padding:22px 14px;display:flex;flex-direction:column;gap:4px;position:sticky;top:env(safe-area-inset-top,0px);height:100vh}
.brand{padding:4px 12px 22px}
.brand .l1{font-size:20px;font-weight:700;letter-spacing:.16em;color:#fff}
.brand .l2{font-size:9px;letter-spacing:.42em;color:#c7cddb}
.brand .l3{margin-top:12px;font-size:12px;color:#c9a263;color:var(--gold);font-weight:600}
nav.side a{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:8px;color:#d5dae6;text-decoration:none;min-height:44px}
nav.side a.on{background:#1f3360;background:var(--navy-2);color:#fff;font-weight:600}
nav.side a:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid #c9a263;outline:3px solid var(--gold);outline-offset:2px}
.pill{margin-left:auto;background:#c9a263;background:var(--gold);color:#142344;color:var(--navy);font-size:11px;font-weight:700;padding:2px 8px;border-radius:10px}
.cnt{margin-left:auto;color:#a9b2c8;font-size:12px}
.sep{height:1px;background:#26406f;background:var(--navy-3);margin:10px 8px}
.srcs{margin-top:auto;padding:12px;font-size:12px;color:#a9b2c8;line-height:1.6}
.srcs b{color:#fff;font-weight:600}
main{flex:1 1 auto;min-width:0;padding:26px 34px 60px;display:flex;flex-direction:column;gap:18px}
h1{margin:0;font-size:24px;font-weight:700}
h2{margin:0;font-size:15px;font-weight:700}
.sub{color:#5b6680;color:var(--mute)}
.crumb{font-size:12px;color:#5b6680;color:var(--mute)}
.crumb a{color:#5b6680;color:var(--mute);text-decoration:none}
.crumb a:hover{text-decoration:underline}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.grow{flex:1 1 auto;min-width:0}
.btn{min-height:44px;padding:0 16px;border-radius:8px;border:1px solid #c9cfdd;border:1px solid var(--line-2);background:#ffffff;background:var(--card);color:#1a2238;color:var(--ink);font-weight:600;display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.btn.pri{background:#142344;background:var(--navy);border-color:#142344;border-color:var(--navy);color:#fff}
.btn.danger{color:#7a2e1e;color:var(--warn)}
.btn.sm{min-height:40px;padding:0 13px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.back{border-color:transparent;background:transparent;padding-left:4px;color:#5b6680;color:var(--mute)}
.btn.back:hover{color:#1a2238;color:var(--ink)}
.chip{min-height:40px;padding:0 14px;border-radius:20px;border:1px solid #142344;border:1px solid var(--navy);background:#ffffff;background:var(--card);color:#1a2238;color:var(--ink);font-weight:600}
.chip.on{background:#142344;background:var(--navy);color:#fff}
.card{background:#ffffff;background:var(--card);border:1px solid #e3e6ee;border:1px solid var(--line);border-radius:12px;padding:18px 20px;display:flex;flex-direction:column;gap:12px}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-gap:14px;gap:14px}
.stat{background:#f7f8fb;border:1px solid #e3e6ee;border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.stat .n{font-size:26px;font-weight:700}
.stat .k{font-size:12px;color:#5b6680;color:var(--mute)}
.tbl{background:#ffffff;background:var(--card);border:1px solid #e3e6ee;border:1px solid var(--line);border-radius:12px;overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:900px}
th{text-align:left;color:#5b6680;color:var(--mute);font-size:12px;font-weight:600;padding:13px 14px;border-bottom:1px solid #e3e6ee;border-bottom:1px solid var(--line)}
td{padding:14px;border-bottom:1px solid #e3e6ee;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
.tag{display:inline-block;font-size:12px;padding:3px 9px;border-radius:10px;background:#eef1f7;color:#3a4460;color:var(--ink-2);margin-right:4px}
.tag.gold{background:#f6efe0;background:var(--gold-bg);color:#7a5a1e;color:var(--gold-ink)}
.st{display:inline-block;font-size:12px;font-weight:600;padding:4px 10px;border-radius:10px}
.st.ready{background:#f6efe0;background:var(--gold-bg);color:#7a5a1e;color:var(--gold-ink)}
.st.draft{background:#e4ecfa;background:var(--info-bg);color:#23457a;color:var(--info)}
.st.posted{background:#e3f1e8;background:var(--ok-bg);color:#1f5b39;color:var(--ok)}
.st.wait{background:#fbe9e3;background:var(--warn-bg);color:#7a2e1e;color:var(--warn)}
.st.low{background:#eef1f7;color:#5b6680;color:var(--mute)}
.bar{display:inline-block;width:70px;height:6px;background:#e3e6ee;background:var(--line);border-radius:3px;overflow:hidden;vertical-align:middle;margin-right:8px}
.bar i{display:block;height:6px;background:#7a5a1e;background:var(--gold-ink)}
.two{display:grid;grid-template-columns:minmax(0,1fr) 360px;grid-gap:20px;gap:20px;align-items:start}
.cand{border:2px solid #e3e6ee;border:2px solid var(--line);border-radius:12px;padding:16px 18px;display:flex;gap:14px;align-items:flex-start;background:#ffffff;background:var(--card)}
.cand.on{border-color:#c9a263;border-color:var(--gold)}
.rank{flex:0 0 44px;width:44px;height:44px;border-radius:22px;border:2px solid #c9a263;border:2px solid var(--gold);background:#142344;background:var(--navy);color:#fff;font-weight:700}
.cand.on .rank{background:#c9a263;background:var(--gold);color:#142344;color:var(--navy)}
.hook{font-size:16px;font-weight:700;line-height:1.35}
.fit{font-size:11px;font-weight:700;padding:3px 8px;border-radius:8px}
.meta{font-size:12px;color:#5b6680;color:var(--mute);display:flex;gap:14px;flex-wrap:wrap}
.meta b{color:#1a2238;color:var(--ink);font-weight:600}
textarea,input[type=text]{width:100%;padding:11px 13px;border:1px solid #c9cfdd;border:1px solid var(--line-2);border-radius:8px;line-height:1.55;resize:vertical}
input[type=text]{min-height:44px}
label.lbl{font-size:12px;color:#5b6680;color:var(--mute)}
.seg{display:flex;border:1px solid #142344;border:1px solid var(--navy);border-radius:8px;overflow:hidden}
.seg button{min-height:44px;padding:0 18px;border:0;background:#ffffff;background:var(--card);color:#1a2238;color:var(--ink);font-weight:600}
.seg button.on{background:#142344;background:var(--navy);color:#fff}
.vers{display:flex;gap:6px;flex-wrap:wrap;align-items:center;font-size:12px;color:#5b6680;color:var(--mute)}
.ver{min-height:32px;padding:0 10px;border-radius:8px;border:1px solid #c9cfdd;border:1px solid var(--line-2);background:#ffffff;background:var(--card);color:#1a2238;color:var(--ink);font-weight:600}
.ver.on{background:#142344;background:var(--navy);border-color:#142344;border-color:var(--navy);color:#fff}
.chk{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid #c9cfdd;border:1px solid var(--line-2);border-radius:8px;background:#ffffff;background:var(--card)}
.chk input{width:18px;height:18px}
.chk.inline{border:0;padding:0;min-height:36px}
.note{font-size:12px;color:#5b6680;color:var(--mute);line-height:1.5}
.banner{font-size:12px;font-weight:600;padding:5px 10px;border-radius:10px}
.banner.ok{background:#e3f1e8;background:var(--ok-bg);color:#1f5b39;color:var(--ok)}
.banner.warn{background:#fbe9e3;background:var(--warn-bg);color:#7a2e1e;color:var(--warn)}
.img{width:100%;max-width:100%;height:auto;border-radius:8px;border:1px solid #e3e6ee;border:1px solid var(--line)}
.hist{display:flex;flex-direction:column;gap:10px;font-size:13px}
.hist div b{font-weight:700}
.kv{display:flex;justify-content:space-between;gap:10px;padding:9px 12px;border:1px solid #e3e6ee;border:1px solid var(--line);border-radius:8px}
.kv b{font-weight:600;text-align:right}
.tabs{display:flex;gap:4px;border-bottom:1px solid #c9cfdd;border-bottom:1px solid var(--line-2);flex-wrap:wrap}
.tabs button{min-height:46px;padding:0 16px;border:0;border-bottom:3px solid transparent;background:transparent;color:#5b6680;color:var(--mute);font-weight:600}
.tabs button.on{border-bottom-color:#c9a263;border-bottom-color:var(--gold);color:#1a2238;color:var(--ink)}
.learn{background:#f6efe0;background:var(--gold-bg);border:1px solid #e8d9b5}
.learn .it{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap}
.learn .it p{margin:0;flex:1 1 220px;line-height:1.45}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:#142344;background:var(--navy);color:#fff;padding:12px 18px;border-radius:10px;font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.25);opacity:0;pointer-events:none;transition:opacity .2s}
.toast.show{opacity:1}
.modal{position:fixed;inset:0;background:rgba(10,18,38,.55);display:none;align-items:center;justify-content:center;padding:20px}
.modal.show{display:flex}
.modal .box{background:#ffffff;background:var(--card);border-radius:14px;padding:22px 24px;max-width:520px;width:100%;display:flex;flex-direction:column;gap:14px}
.drop{border:2px dashed #c9cfdd;border:2px dashed var(--line-2);border-radius:10px;padding:28px;text-align:center;color:#5b6680;color:var(--mute)}
.prog{height:8px;background:#e3e6ee;background:var(--line);border-radius:4px;overflow:hidden}
.prog i{display:block;height:8px;width:0;background:#c9a263;background:var(--gold);transition:width .4s}
.thinking{display:flex;align-items:center;gap:10px;color:#5b6680;color:var(--mute);font-size:13px}
.thinking i{width:10px;height:10px;border-radius:5px;background:#c9a263;background:var(--gold);animation:pulse 1s infinite}
@keyframes pulse{0%,100%{opacity:.3}50%{opacity:1}}
@media (prefers-reduced-motion: reduce){.thinking i{animation:none}}
.empty{padding:40px;text-align:center;color:#5b6680;color:var(--mute)}
@media (max-width:980px){
  .app{flex-direction:column}
  nav.side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center}
  nav.side .brand{padding:4px 12px}
  .srcs{display:none}
  .sep{display:none}
  main{padding:18px 16px 60px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .two{grid-template-columns:minmax(0,1fr)}
}

html,body,#root{min-height:100%}
.modal{display:flex}
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#142344;background:var(--navy)}
.login .box{background:#ffffff;background:var(--card);border-radius:14px;padding:32px 36px;max-width:420px;width:100%;display:flex;flex-direction:column;gap:14px;align-items:center;text-align:center}
.login .box h1{font-size:20px}
.login .err{color:#7a2e1e;color:var(--warn);font-size:13px}