@import url('brand-tokens.css');

*{box-sizing:border-box}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-body);font-size:16px;line-height:1.5}

#hdr{background:var(--surface-card);border-bottom:3px solid var(--action-primary);padding:8px 16px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:5}
#hdr .brand{display:flex;align-items:center;gap:10px;text-decoration:none}
#hdr .brand img{height:36px;width:auto;display:block}
#hdr h1{margin:0;font-family:var(--font-display);font-size:20px;font-weight:700;color:var(--text-strong);letter-spacing:-0.01em;line-height:1.05}
#hdr h1 .dot{color:var(--action-accent)}
#hdr h1 small{display:block;font-family:var(--font-mono);font-weight:700;font-size:10px;letter-spacing:.12em;color:var(--text-brand);text-transform:uppercase;margin-top:2px}

.wrap{max-width:920px;margin:0 auto;padding:16px}
.card{background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius);padding:16px;margin-bottom:14px;box-shadow:0 1px 2px rgba(24,26,23,.04)}
.card h3{margin:0 0 6px;font-family:var(--font-display);font-size:17px;font-weight:600;color:var(--text-strong)}
.card h3 small{font-family:var(--font-mono);color:var(--text-muted);font-weight:400;font-size:11px;text-transform:uppercase;letter-spacing:.08em}
h4{margin:14px 0 4px;font-family:var(--font-mono);font-size:11px;text-transform:uppercase;color:var(--text-muted);letter-spacing:.12em;font-weight:700}

label{display:block;font-family:var(--font-mono);font-size:11px;color:var(--text-muted);margin:8px 0 3px;text-transform:uppercase;letter-spacing:.08em}
input,select,textarea{width:100%;padding:10px;border:1px solid var(--border-default);border-radius:var(--radius-sm);font-size:16px;font-family:var(--font-body);background:var(--surface-card);color:var(--text-strong)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--focus-ring);outline-offset:1px;border-color:var(--border-brand)}
input:disabled,select:disabled{background:var(--surface-sunken);color:var(--text-faint)}
textarea{min-height:56px}
.row{display:flex;gap:8px}.row>*{flex:1}

.btn,button.btn{display:inline-block;padding:10px 16px;border:0;border-radius:var(--radius-sm);background:var(--action-primary);color:var(--text-on-brand);font-size:15px;font-family:var(--font-body);font-weight:600;text-decoration:none;cursor:pointer}
.btn:hover{background:var(--action-primary-hover)}
.btn.sub{background:var(--surface-card);color:var(--text-brand);border:1px solid var(--border-brand)}
.btn.accent{background:var(--action-accent);color:var(--text-on-accent)}
.btn.accent:hover{background:var(--action-accent-hover)}

.note{font-size:13px;color:var(--text-muted);margin:6px 0;line-height:1.5}
.stat{font-size:14px;margin-top:8px;color:var(--text-body)}
.result{font-family:var(--font-mono);font-size:14px;margin-top:10px;padding:10px 12px;background:var(--surface-brand-soft);border:1px solid var(--pine-200);border-radius:var(--radius-sm);color:var(--text-strong);line-height:1.5}
.result b{color:var(--text-brand)}
.big{font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--text-brand)}

.fixrow{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--border-subtle)}
.fixrow span{flex:1;font-size:14px}
.fixrow input{width:64px;text-align:center;padding:6px}

.nav{display:flex;gap:6px;overflow-x:auto;margin-bottom:12px;padding-bottom:2px}
.nav button{flex:0 0 auto;padding:8px 14px;border:1px solid var(--border-default);background:var(--surface-card);border-radius:999px;font-size:14px;font-family:var(--font-body);color:var(--text-body);cursor:pointer}
.nav button.on{background:var(--action-primary);color:var(--text-on-brand);border-color:var(--action-primary)}

.proj{background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius);padding:14px;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center}
.proj .pmeta{cursor:pointer}
.proj b{font-family:var(--font-display);color:var(--text-strong);font-weight:600}
.proj small{color:var(--text-muted);display:block;font-size:12px;margin-top:2px}

.banner{background:var(--status-warn-bg);border:1px solid var(--amber-400);border-radius:var(--radius-sm);padding:10px 12px;font-size:13px;margin-bottom:12px;color:var(--ink-800)}
code{font-family:var(--font-mono);font-size:12px;background:var(--surface-sunken);padding:1px 5px;border-radius:4px}
.del{color:var(--status-fail);border:0;background:none;font-size:16px;cursor:pointer;padding:4px}
.pill{display:inline-block;font-family:var(--font-mono);font-size:11px;padding:2px 8px;border-radius:999px;background:var(--pine-100);color:var(--text-brand)}