:root{
  color-scheme: light dark;
  --paper:#eeece5;
  --paper-raised:#f7f5ef;
  --ink:#1b1f1d;
  --ink-soft:#5b6560;
  --accent:#3c6e59;
  --accent-soft:#d9e6de;
  --gold:#95692a;
  --gold-soft:#eee0c8;
  --line:#d3cfc2;
  --danger:#96402f;
  --danger-soft:#ecdcd6;
  --shadow: 0 1px 2px rgba(27,31,29,.06), 0 8px 24px -12px rgba(27,31,29,.18);
  /* Fixed (non-theme-swapping) tones for the "developed negative" receipt card —
     it's a deliberate single dark look in both page themes, never inverted. */
  --negative-bg:#181512;
  --negative-fg:#eeece5;
  --negative-gold:#d9a955;
  --negative-line:rgba(238,236,229,.18);
  --negative-line-soft:rgba(238,236,229,.55);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#15181a; --paper-raised:#1d2123; --ink:#eae7de; --ink-soft:#9aa39d;
    --accent:#74b199; --accent-soft:#233530; --gold:#d9a955; --gold-soft:#332a17;
    --line:#31363578; --danger:#d98873; --danger-soft:#3a241f;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --paper:#15181a; --paper-raised:#1d2123; --ink:#eae7de; --ink-soft:#9aa39d;
  --accent:#74b199; --accent-soft:#233530; --gold:#d9a955; --gold-soft:#332a17;
  --line:#31363578; --danger:#d98873; --danger-soft:#3a241f;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
html, body{ background:var(--paper); }
body{
  background:var(--paper); color:var(--ink);
  font-family:'IBM Plex Sans', system-ui, sans-serif;
  margin:0; padding:0 16px; padding-block: 28px 60px;
  line-height:1.45;
}
.wrap{max-width:1120px; margin:0 auto;}
h1,h2,h3{font-family:'Fraunces', Georgia, serif; font-weight:600; text-wrap:balance; margin:0;}
code{background:var(--paper); border:1px solid var(--line); border-radius:4px; padding:1px 5px; font-family:'IBM Plex Mono',monospace; font-size:.85em;}

header.top{display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:6px;}
header.top h1{font-size:1.7rem;}
.sub{color:var(--ink-soft); font-size:.9rem; max-width:640px;}
.frame-tag{font-family:'IBM Plex Mono',monospace; font-size:.72rem; letter-spacing:.08em; color:var(--gold); border:1px solid var(--gold); border-radius:20px; padding:3px 10px; white-space:nowrap;}

.wizard{max-width:640px; margin:26px auto 0;}

.card{background:var(--paper-raised); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:20px;}
.card + .card{margin-top:18px;}

.step-label{display:flex; align-items:center; gap:10px; margin-bottom:14px;}
.step-label .fr{font-family:'IBM Plex Mono',monospace; font-size:.75rem; color:var(--ink-soft); border:1px solid var(--line); border-radius:5px; padding:2px 7px;}
.step-label h2{font-size:1.05rem;}

.cat-group{margin-bottom:16px;}
.cat-group h3{font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); font-family:'IBM Plex Sans'; font-weight:600; margin-bottom:8px;}
.cat-options{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px;}
.cat-btn{border:1px solid var(--line); background:var(--paper); border-radius:10px; padding:10px 12px; text-align:left; cursor:pointer; font:inherit; color:var(--ink);}
.cat-btn:hover{border-color:var(--accent);}
.cat-btn.sel{background:var(--accent-soft); border-color:var(--accent); box-shadow: inset 0 0 0 1px var(--accent);}
.cat-btn .t{display:block; font-weight:500; font-size:.9rem;}
.cat-btn .c{display:block; font-size:.72rem; color:var(--ink-soft); margin-top:2px;}
.conf{display:inline-block; font-size:.65rem; font-family:'IBM Plex Mono'; letter-spacing:.03em; padding:1px 6px; border-radius:8px; margin-top:5px;}
.conf.high{background:var(--accent-soft); color:var(--accent);}
.conf.medium{background:var(--gold-soft); color:var(--gold);}
.conf.low{background:var(--danger-soft); color:var(--danger);}
.conf.custom{background:var(--line); color:var(--ink-soft);}

fieldset{border:none; padding:0; margin:0 0 16px;}
.row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--line);}
.row:last-child{border-bottom:none;}
.row.block{flex-direction:column; align-items:stretch;}
.row .lab{font-size:.88rem;}
.row .hint{font-size:.74rem; color:var(--ink-soft); display:block; margin-top:2px;}
.row .ctl{display:flex; align-items:center; gap:8px; flex-shrink:0;}
.row.block .ctl{width:100%; margin-top:8px;}
.seg{display:flex; gap:6px; flex-wrap:wrap;}
.seg-btn{border:1px solid var(--line); background:var(--paper); border-radius:8px; padding:6px 10px; font:inherit; font-family:'IBM Plex Mono',monospace; font-size:.74rem; cursor:pointer; color:var(--ink);}
.seg-btn:hover{border-color:var(--accent);}
.seg-btn.sel{background:var(--accent-soft); border-color:var(--accent); font-weight:600; color:var(--ink);}
select, input[type=number], input[type=text]{
  font:inherit; font-family:'IBM Plex Mono',monospace; font-size:.85rem;
  background:var(--paper); color:var(--ink); border:1px solid var(--line); border-radius:7px; padding:6px 8px;
}
input[type=number]{width:64px;}
input[type=checkbox]{width:17px; height:17px; accent-color:var(--accent);}
input[type=range]{width:100%; accent-color:var(--accent);}

.attitude{margin-top:4px;}
.att-labels{display:flex; justify-content:space-between; font-size:.68rem; color:var(--ink-soft); margin-top:6px; font-family:'IBM Plex Mono';}
.att-current{background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin-top:10px;}
.att-current .t{font-weight:600; font-size:.92rem;}
.att-current .d{font-size:.78rem; color:var(--ink-soft); margin-top:2px;}
.att-current .p{font-family:'IBM Plex Mono'; font-size:.8rem; margin-top:4px;}
.att-current .p.neg{color:var(--accent);}
.att-current .p.pos{color:var(--danger);}

/* Receipt / contact-sheet strip — nested .card inside .strip gets a dark "developed negative"
   look, deliberately fixed (not theme-swapping) so it never inverts in dark mode. */
.strip .card{position:relative; background:var(--negative-bg); color:var(--negative-fg); border-color:var(--negative-bg);}
.strip .card::before, .strip .card::after{
  content:""; position:absolute; left:0; right:0; height:14px;
  background-image: radial-gradient(circle, var(--negative-fg) 3px, transparent 3.2px);
  background-size: 22px 14px; background-repeat:repeat-x; opacity:.35;
}
.strip .card::before{top:0;} .strip .card::after{bottom:0;}
.strip .card h2{color:var(--negative-fg); font-size:1rem;}
.strip .cat-name{font-size:.75rem; color:var(--negative-gold); font-family:'IBM Plex Mono'; letter-spacing:.03em; margin-top:2px;}
.line-item{display:flex; justify-content:space-between; font-size:.8rem; padding:6px 0; border-bottom:1px dashed var(--negative-line); gap:10px;}
.line-item .k{color:var(--negative-line-soft);}
.line-item .v{font-family:'IBM Plex Mono'; white-space:nowrap;}
.totals{margin-top:14px; padding-top:10px; border-top:1px solid var(--negative-line);}
.tot-row{display:flex; justify-content:space-between; align-items:baseline; margin-top:8px;}
.tot-row .k{font-size:.82rem; color:var(--negative-line-soft);}
.tot-row .v{font-family:'IBM Plex Mono'; font-size:1rem;}
.tot-row.grand .v{font-size:1.5rem; color:var(--negative-gold); font-weight:500;}
.range-note{font-size:.72rem; color:var(--negative-line-soft); opacity:.85; margin-top:2px;}

button.save{
  width:100%; margin-top:16px; background:var(--gold); color:#1b1508; border:none; border-radius:9px;
  padding:10px 14px; font:inherit; font-weight:600; font-size:.85rem; cursor:pointer;
}
button.save:hover{filter:brightness(1.06);}
.history{margin-top:10px;}
.history .h-item{display:flex; justify-content:space-between; font-size:.76rem; padding:6px 2px; border-bottom:1px solid var(--line); color:var(--ink-soft);}
.history .h-item button{background:none; border:none; color:var(--danger); cursor:pointer; font-size:.75rem; font:inherit;}

.empty-note{font-size:.85rem; color:var(--ink-soft); text-align:center; padding:30px 10px;}
.foot-note{font-size:.75rem; color:var(--ink-soft); margin-top:22px; line-height:1.6;}

/* ---------- Admin panel ---------- */
.admin-bar{background:var(--gold-soft); border:1px solid var(--gold); border-radius:14px; padding:18px 20px; margin-bottom:24px;}
.admin-bar h2{font-size:1.1rem;}
.admin-bar .sub{margin:4px 0 0;}
.admin-section-title{font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); margin:18px 0 6px; font-weight:600;}
.overflow-x{overflow-x:auto;}
table.admin-table{width:100%; border-collapse:collapse; font-size:.78rem; margin-top:4px; min-width:640px;}
table.admin-table th, table.admin-table td{border-bottom:1px solid var(--line); padding:6px 8px; text-align:left; white-space:nowrap;}
table.admin-table th{font-size:.68rem; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-soft);}
table.admin-table td.wide{white-space:normal; min-width:140px;}
.admin-actions{display:flex; gap:8px; flex-wrap:wrap; margin-top:16px;}
.admin-actions button, .admin-actions label.file-btn{
  font:inherit; font-size:.8rem; padding:9px 14px; border-radius:8px; border:1px solid var(--line);
  background:var(--paper-raised); cursor:pointer; color:var(--ink); display:inline-block;
}
.admin-actions button.primary{background:var(--accent); color:#fff; border-color:var(--accent);}
.admin-actions button.danger{border-color:var(--danger); color:var(--danger); background:var(--paper-raised);}
.admin-actions input[type=file]{display:none;}
.admin-msg{font-size:.78rem; color:var(--accent); margin-top:10px; min-height:1em;}
.eur-row{display:flex; align-items:center; gap:10px; margin-top:10px; font-size:.85rem;}

/* ---------- Login / setup forms ---------- */
.login-box{max-width:360px;}
.field{margin-bottom:12px;}
.field label{display:block; font-size:.8rem; margin-bottom:4px; color:var(--ink-soft);}
.field input{width:100%;}
.error-msg{font-size:.78rem; color:var(--danger); margin-top:8px; min-height:1em;}

/* ---------- Guest notice ---------- */
.guest-notice{background:var(--paper-raised); border:1px dashed var(--line); border-radius:12px; padding:12px 16px; margin-bottom:20px; font-size:.8rem; color:var(--ink-soft); display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.guest-notice button{font:inherit; font-size:.78rem; padding:7px 12px; border-radius:7px; border:1px solid var(--line); background:var(--paper); cursor:pointer; color:var(--ink); white-space:nowrap;}
.guest-notice button:hover{border-color:var(--accent);}