:root{
    --bg:#fff; --fg:#141414; --muted:#6b6b6b; --line:#e4e4e4;
    --accent:#1f6feb; --accent_fg:#fff; --field_bg:#fff;
    --maxw:720px; --radius:10px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{
    background:var(--bg); color:var(--fg);
    font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
}
a{color:var(--accent)}
.wrap{max-width:var(--maxw); margin:0 auto; padding:2rem 1.25rem 4rem}
.is-admin .wrap{max-width:1100px}

.topbar{
    display:flex; align-items:center; justify-content:space-between;
    padding:1rem 1.25rem; border-bottom:1px solid var(--line);
    max-width:1100px; margin:0 auto;
}
.brand-name{font-weight:700; letter-spacing:.01em; color:var(--fg); text-decoration:none}
.brand{text-decoration:none}
.logout .link{color:var(--muted)}

h1{font-size:1.7rem; margin:.2rem 0 .6rem}
.lede{color:var(--muted); margin-top:0}
.intro{margin-bottom:2rem}

fieldset{border:1px solid var(--line); border-radius:var(--radius); padding:1.25rem; margin:0 0 1.5rem}
legend{padding:0 .5rem; font-weight:600; color:var(--muted); text-transform:uppercase; font-size:.8rem; letter-spacing:.08em}

.field{display:block; margin:0 0 1rem}
.field > span{display:block; font-weight:600; margin-bottom:.35rem; font-size:.92rem}
.field b{color:var(--accent)}
.field-narrow{max-width:220px}
input[type=text],input[type=email],input[type=tel],input[type=date],input[type=password],select,textarea{
    width:100%; padding:.6rem .7rem; border:1px solid var(--line); border-radius:8px;
    background:var(--field_bg); color:var(--fg); font:inherit;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)}
textarea{resize:vertical}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
@media (max-width:560px){ .grid-2{grid-template-columns:1fr} }

.hint{color:var(--muted); font-size:.88rem; margin:.3rem 0}
.field-error{color:#c0392b; font-size:.86rem; margin:.3rem 0 0}
.alert{padding:.8rem 1rem; border-radius:8px; margin-bottom:1.5rem}
.alert-error{background:#fdecea; color:#a12; border:1px solid #f5c6cb}

.radio-row{display:flex; gap:1.25rem}
.radio-col{display:flex; flex-direction:column; gap:.5rem}
.radio{font-weight:400; display:flex; gap:.45rem; align-items:center}

.pantone-rows{display:flex; flex-direction:column; gap:.5rem; margin-bottom:.5rem}
.pantone-row{display:flex; gap:.5rem; align-items:center}
.pantone-row input{flex:1}

.link{background:none; border:0; color:var(--accent); cursor:pointer; padding:0; font:inherit; text-decoration:underline}

.dropzone{
    border:2px dashed var(--line); border-radius:var(--radius); padding:2rem 1rem;
    text-align:center; color:var(--muted); transition:border-color .15s,background .15s;
}
.dropzone.is-drag{border-color:var(--accent); background:color-mix(in srgb,var(--accent) 8%,transparent)}
.file-list{list-style:none; padding:0; margin:1rem 0 0; display:flex; flex-direction:column; gap:.5rem}
.file-list li{display:flex; align-items:center; gap:.75rem; font-size:.9rem; border:1px solid var(--line); border-radius:8px; padding:.5rem .7rem}
.file-list .fname{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.file-list .fbar{width:120px; height:6px; background:var(--line); border-radius:3px; overflow:hidden}
.file-list .fbar > i{display:block; height:100%; width:0; background:var(--accent)}
.file-list .fstate{width:70px; text-align:right; color:var(--muted)}
.file-list .frm{color:var(--muted)}

.cc-note{background:color-mix(in srgb,var(--accent) 8%,transparent); border:1px solid var(--line); border-radius:8px; padding:.6rem .8rem; font-size:.88rem; margin-top:.6rem}

.submit-row{margin-top:1rem}
.btn{
    display:inline-block; background:var(--accent); color:var(--accent_fg); border:0;
    padding:.75rem 1.4rem; border-radius:8px; font:inherit; font-weight:600; cursor:pointer; text-decoration:none;
}
.btn:disabled{opacity:.55; cursor:progress}
.fineprint{color:var(--muted); font-size:.82rem; margin-top:1rem; max-width:52ch}

.sitefoot{max-width:var(--maxw); margin:0 auto; padding:2rem 1.25rem; border-top:1px solid var(--line); color:var(--muted)}
.sitefoot .fineprint{margin:0 0 .5rem}
.muted{color:var(--muted)}
.legal{font-size:.76rem; line-height:1.5; max-width:72ch; margin-top:.75rem}

.panel{border:1px solid var(--line); border-radius:var(--radius); padding:2rem}
.panel-center{text-align:center}
.panel-narrow{max-width:380px; margin:2rem auto}
.reference{font-size:1.1rem; margin-top:1.5rem}
.stack{display:flex; flex-direction:column; gap:1rem}

/* admin */
.tabs{display:flex; gap:.25rem; margin:1rem 0; flex-wrap:wrap}
.tabs-sub{margin-top:0}
.tab{padding:.4rem .8rem; border:1px solid var(--line); border-radius:999px; text-decoration:none; color:var(--muted); font-size:.88rem; transition:background-color .15s, color .15s, border-color .15s}
.tab:not(.is-active):hover{background:color-mix(in srgb,var(--accent) 8%,transparent); color:var(--fg); border-color:var(--muted)}
.tab:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.tab.is-active{background:var(--fg); color:var(--bg); border-color:var(--fg)}
.tab .count{opacity:.6; margin-left:.3rem}
.table-wrap{overflow-x:auto}
table.grid{width:100%; border-collapse:collapse; font-size:.9rem}
table.grid th,table.grid td{text-align:left; padding:.6rem .7rem; border-bottom:1px solid var(--line); vertical-align:top}
table.grid tbody tr{cursor:pointer}
table.grid tbody tr:hover{background:color-mix(in srgb,var(--accent) 6%,transparent)}
.pill{display:inline-block; padding:.1rem .5rem; border-radius:999px; font-size:.75rem; border:1px solid var(--line)}
.pill-hawthorne{background:#eef4ff}
.pill-mutiny{background:#1f1f22; color:#e5b567}
.status{font-size:.8rem; padding:.1rem .5rem; border-radius:6px; background:var(--line)}
.cols{display:grid; grid-template-columns:1fr 1fr; gap:2rem}
@media (max-width:800px){ .cols{grid-template-columns:1fr} }
dl{display:grid; grid-template-columns:auto 1fr; gap:.3rem .9rem; margin:.5rem 0 1.5rem}
dl dt{color:var(--muted); font-size:.85rem}
dl dd{margin:0}
.details-text{white-space:pre-wrap; border:1px solid var(--line); border-radius:8px; padding:.8rem; background:var(--field_bg)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* admin nav */
.admin-nav{display:flex; align-items:center; gap:1.1rem}
.admin-nav a{color:var(--muted); text-decoration:none; font-size:.9rem}
.admin-nav a:hover{color:var(--fg)}

/* analytics */
.stat-row{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin:1.5rem 0}
@media (max-width:700px){ .stat-row{grid-template-columns:repeat(2,1fr)} }
.stat{border:1px solid var(--line); border-radius:var(--radius); padding:1rem 1.1rem}
.stat .n{display:block; font-size:1.6rem; font-weight:700}
.stat .l{display:block; color:var(--muted); font-size:.82rem; margin-top:.2rem}
.chart-block{border:1px solid var(--line); border-radius:var(--radius); padding:1.25rem; margin-bottom:1.5rem}
.chart-block h2{font-size:1rem; margin:0 0 1rem}
.daybars{display:flex; align-items:flex-end; gap:3px; height:120px}
.daybar{flex:1; display:flex; align-items:flex-end; min-width:2px}
.daybar > span{display:block; width:100%; background:var(--accent); border-radius:2px 2px 0 0; min-height:2px}
.grid-cards{display:grid; grid-template-columns:repeat(2,1fr); gap:1rem}
@media (max-width:800px){ .grid-cards{grid-template-columns:1fr} }
.card{border:1px solid var(--line); border-radius:var(--radius); padding:1.1rem}
.card h2{font-size:.95rem; margin:0 0 .75rem}
table.mini{width:100%; border-collapse:collapse; font-size:.85rem}
table.mini th{text-align:left; color:var(--muted); font-weight:600; font-size:.78rem; padding:.2rem .4rem; border-bottom:1px solid var(--line)}
table.mini td{padding:.3rem .4rem; border-bottom:1px solid var(--line); vertical-align:middle}
table.mini td.num{text-align:right; font-variant-numeric:tabular-nums; width:3.5rem}
table.mini td.barcell{width:38%}
table.mini td.barcell > span{display:block; height:7px; background:var(--accent); border-radius:3px; opacity:.55}