:root{
  --bg:#faf7f1;
  --surface:#ffffff;
  --surface-alt:#f1ebe0;
  --ink:#3a322a;
  --ink-soft:#7a6f62;
  --ink-faint:#a89c8c;
  --border:#e4dac9;
  --accent:#b9793a;
  --accent-ink:#5a3d1c;
  --accent-soft:#f0ddbe;
  --success:#5f8253;
  --success-soft:#e2ead9;
  --danger:#c1523d;
  --danger-soft:#f6dcd4;
  --warning:#b8791f;
  --warning-soft:#f5e3c2;
  --shadow: 0 1px 2px rgba(58,50,42,0.06), 0 4px 14px rgba(58,50,42,0.07);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#221d18; --surface:#2c2620; --surface-alt:#352d24; --ink:#f2ece1; --ink-soft:#b9ac9a; --ink-faint:#8a7d6c;
    --border:#463a2c; --accent:#e0a363; --accent-ink:#f7e6d2; --accent-soft:#4a3822; --success:#8fb37e; --success-soft:#31402c;
    --danger:#e17b63; --danger-soft:#4a2b23; --warning:#e8bc6e; --warning-soft:#453419;
    --shadow: 0 1px 2px rgba(0,0,0,0.25), 0 6px 18px rgba(0,0,0,0.3);
  }
}
:root[data-theme="dark"]{
  --bg:#221d18; --surface:#2c2620; --surface-alt:#352d24; --ink:#f2ece1; --ink-soft:#b9ac9a; --ink-faint:#8a7d6c;
  --border:#463a2c; --accent:#e0a363; --accent-ink:#f7e6d2; --accent-soft:#4a3822; --success:#8fb37e; --success-soft:#31402c;
  --danger:#e17b63; --danger-soft:#4a2b23; --warning:#e8bc6e; --warning-soft:#453419;
  --shadow: 0 1px 2px rgba(0,0,0,0.25), 0 6px 18px rgba(0,0,0,0.3);
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Nunito Sans', system-ui, sans-serif; font-size:14px; -webkit-font-smoothing:antialiased;
}
#app{min-height:100vh; display:flex; flex-direction:column;}

.topbar{display:flex; align-items:center; gap:16px; padding:18px 24px; border-bottom:1px solid var(--border); background:var(--surface); flex-wrap:wrap;}
.brand{display:flex; flex-direction:column; gap:2px; margin-right:auto;}
.brand h1{font-family:'Fraunces', serif; font-weight:600; font-size:22px; margin:0; text-wrap:balance;}
.brand p{margin:0; font-size:12.5px; color:var(--ink-soft);}

.stat-chip{display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; background:var(--surface-alt); font-weight:700; font-size:12.5px; color:var(--ink-soft); white-space:nowrap;}
.stat-chip strong{color:var(--ink); font-variant-numeric:tabular-nums;}
.stat-chip.due{background:var(--danger-soft); color:var(--danger);}
.stat-chip.due strong{color:var(--danger);}
.stat-chip.dup{background:var(--warning-soft); color:var(--warning);}
.stat-chip.dup strong{color:var(--warning);}

.search-box{display:flex; align-items:center; gap:8px; background:var(--surface-alt); border:1px solid var(--border); border-radius:10px; padding:7px 12px; min-width:180px;}
.search-box input{border:none; background:transparent; outline:none; color:var(--ink); font-family:inherit; font-size:13px; width:100%;}
.search-box svg{flex:none; opacity:0.55;}

button{font-family:inherit; cursor:pointer; border:none;}
.btn{display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:10px; font-weight:700; font-size:13px; background:var(--surface-alt); color:var(--ink); border:1px solid var(--border);}
.btn:hover{filter:brightness(0.97);}
.btn.primary{background:var(--accent); color:#fff; border-color:transparent;}
.btn.primary:hover{filter:brightness(1.05);}
.btn.ghost{background:transparent; border-color:transparent; color:var(--ink-soft); padding:6px 8px;}
.btn.danger-outline{background:transparent; border:1px solid var(--danger); color:var(--danger);}
.btn:disabled{opacity:0.5; cursor:not-allowed;}

.user-chip{display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; color:var(--ink-soft); background:var(--surface-alt); border-radius:999px; padding:6px 6px 6px 12px;}
.user-chip .role-pill{background:var(--accent-soft); color:var(--accent-ink); border-radius:999px; padding:2px 8px; font-size:11px; text-transform:uppercase; letter-spacing:0.02em;}

.followups{padding:12px 24px; background:var(--warning-soft); border-bottom:1px solid var(--border); display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.followups .label{font-weight:800; font-size:12.5px; color:var(--warning); white-space:nowrap;}
.followup-chip{display:inline-flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:5px 12px 5px 12px; font-size:12.5px; font-weight:600;}
.followup-chip .dot{width:7px; height:7px; border-radius:50%; background:var(--danger); flex:none;}
.followup-chip.soon .dot{background:var(--warning);}

.board-wrap{flex:1; overflow-x:auto; padding:20px 24px 28px;}
.board{display:flex; gap:16px; align-items:flex-start; min-height:60vh;}

.column{background:var(--surface-alt); border-radius:14px; width:270px; flex:none; display:flex; flex-direction:column; max-height:calc(100vh - 160px);}
.column.dragover{outline:2px dashed var(--accent); outline-offset:-2px;}
.column-head{display:flex; align-items:center; justify-content:space-between; padding:12px 14px 8px;}
.column-head h2{font-size:13px; margin:0; font-weight:800; letter-spacing:0.02em; text-transform:uppercase; color:var(--ink-soft);}
.col-count{font-size:11px; font-weight:800; background:var(--surface); color:var(--ink-soft); border-radius:999px; padding:1px 8px; font-variant-numeric:tabular-nums;}
.column-body{flex:1; overflow-y:auto; padding:4px 10px 10px; display:flex; flex-direction:column; gap:10px; min-height:80px;}
.add-store-btn{margin:0 10px 12px; text-align:left; background:transparent; border:1.5px dashed var(--border); color:var(--ink-soft); border-radius:10px; padding:9px 10px; font-weight:700; font-size:12.5px;}
.add-store-btn:hover{border-color:var(--accent); color:var(--accent-ink);}

.card{background:var(--surface); border-radius:11px; padding:11px 12px; box-shadow:var(--shadow); cursor:grab; border:1px solid transparent;}
.card:hover{border-color:var(--border);}
.card:active{cursor:grabbing;}
.card.dragging{opacity:0.4;}
.card h3{margin:0 0 2px; font-size:14.5px; font-weight:800;}
.card .contact-line{font-size:12px; color:var(--ink-soft); margin-bottom:6px;}
.next-chip{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; padding:3px 8px; border-radius:999px; background:var(--surface-alt); color:var(--ink-soft); margin-bottom:6px;}
.next-chip.overdue{background:var(--danger-soft); color:var(--danger);}
.next-chip.soon{background:var(--warning-soft); color:var(--warning);}
.next-chip.dup-chip{background:var(--warning-soft); color:var(--warning);}
.card .notes-preview{font-size:12px; color:var(--ink-soft); margin:4px 0 0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.card .card-foot{margin-top:8px; padding-top:6px; border-top:1px solid var(--border); display:flex; justify-content:space-between; font-size:11px; color:var(--ink-faint);}

.empty-col{text-align:center; color:var(--ink-faint); font-size:12px; padding:18px 8px;}
.board-empty{padding:60px 20px; text-align:center; color:var(--ink-soft); font-size:14px;}
.board-empty h2{font-family:'Fraunces', serif; font-weight:600; color:var(--ink); font-size:19px; margin-bottom:6px;}

.overlay{position:fixed; inset:0; background:rgba(34,29,24,0.45); display:flex; align-items:flex-start; justify-content:center; padding:40px 16px; overflow-y:auto; z-index:50;}
.modal{background:var(--surface); border-radius:16px; width:100%; max-width:520px; padding:22px 24px 20px; box-shadow:var(--shadow);}
.modal h2{font-family:'Fraunces', serif; font-weight:600; font-size:19px; margin:0 0 14px;}
.field{display:flex; flex-direction:column; gap:4px; margin-bottom:12px;}
.field label{font-size:11.5px; font-weight:800; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.02em;}
.field input, .field select, .field textarea{
  font-family:inherit; font-size:13.5px; padding:8px 10px; border-radius:9px;
  border:1px solid var(--border); background:var(--bg); color:var(--ink); outline:none;
  width:100%; min-width:0; box-sizing:border-box;
}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--accent);}
.field textarea{resize:vertical; min-height:60px;}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:10px;}

.collapsible{margin-bottom:12px; border:1px solid var(--border); border-radius:9px; background:var(--bg);}
.collapsible-toggle{width:100%; display:flex; align-items:center; gap:8px; background:transparent; padding:8px 10px; text-align:left;}
.collapsible-toggle .cl-label{font-size:11.5px; font-weight:800; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.02em; flex:none;}
.collapsible-toggle .cl-summary{flex:1; font-size:13px; color:var(--ink-faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left;}
.collapsible.expanded .cl-summary{color:var(--ink);}
.collapsible-toggle .chevron{flex:none; color:var(--ink-faint); transition:transform 0.15s;}
.collapsible.expanded .collapsible-toggle .chevron{transform:rotate(180deg);}
.collapsible-body{display:none; padding:0 10px 10px;}
.collapsible.expanded .collapsible-body{display:block;}
.collapsible-body .field{margin-bottom:10px;}
.collapsible-body .field:last-child, .collapsible-body .row2:last-child .field{margin-bottom:0;}

.contact-card{border:1px solid var(--border); border-radius:9px; background:var(--surface); padding:12px 12px 2px; margin:10px 0; position:relative;}
.contact-card:first-child{margin-top:0;}
.contact-card-remove{position:absolute; top:8px; right:8px; width:22px; height:22px; border-radius:50%; border:1px solid var(--border); background:var(--bg); color:var(--ink-soft); font-size:14px; line-height:1; padding:0; display:flex; align-items:center; justify-content:center;}
.contact-card-remove:hover{background:var(--danger-soft); color:var(--danger); border-color:var(--danger);}
.add-contact-btn{width:100%; margin-top:2px;}

.notes-entries{max-height:220px; overflow-y:auto; display:flex; flex-direction:column; gap:10px; padding:2px 2px 8px;}
.log-entry{border-bottom:1px solid var(--border); padding-bottom:8px;}
.log-entry:last-child{border-bottom:none; padding-bottom:0;}
.log-entry-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:2px;}
.log-date{font-size:11px; font-weight:800; color:var(--ink-soft); letter-spacing:0.02em; text-transform:uppercase;}
.log-entry-icons{display:flex; gap:2px;}
.icon-btn{background:transparent; color:var(--ink-faint); font-size:12px; padding:3px 5px; border-radius:5px; line-height:1;}
.icon-btn:hover{background:var(--surface-alt); color:var(--ink);}
.log-text{font-size:13px; color:var(--ink); white-space:pre-wrap;}
.log-edit-textarea{width:100%; min-height:56px; font-family:inherit; font-size:13px; padding:6px 8px; border-radius:7px; border:1px solid var(--border); background:var(--surface); color:var(--ink); margin-bottom:6px; resize:vertical;}
.log-entry-actions{display:flex; justify-content:flex-end; gap:6px;}
.log-add-row{display:flex; gap:8px; padding:8px 10px 10px;}
.log-add-row input{flex:1; font-family:inherit; font-size:13px; padding:8px 10px; border-radius:9px; border:1px solid var(--border); background:var(--surface); color:var(--ink); outline:none;}
.log-add-row input:focus{border-color:var(--accent);}
.notes-hint{font-size:12.5px; color:var(--ink-soft); padding:4px 10px 10px;}

.row2-3{display:grid; grid-template-columns:2fr 1fr; gap:10px;}
.row3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px;}
.modal-actions{display:flex; justify-content:space-between; align-items:center; margin-top:16px; gap:10px;}
.modal-actions .right{display:flex; gap:8px;}

.interest-hint{font-size:12px; color:var(--ink-soft); margin:-2px 0 8px;}
.interest-grid{display:flex; flex-wrap:wrap; gap:8px 14px;}
.interest-item{display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; cursor:pointer;}
.interest-item input[type="checkbox"]{width:16px; height:16px; accent-color:var(--accent); cursor:pointer;}
.interest-item:has(input:disabled){opacity:0.4; cursor:not-allowed;}

.col-rows{display:flex; flex-direction:column; gap:8px; margin-bottom:10px;}
.col-row{display:flex; align-items:center; gap:8px;}
.col-row.dragging{opacity:0.4;}
.col-row.dragover-row{outline:2px dashed var(--accent); outline-offset:-2px;}
.drag-handle{flex:none; cursor:grab; color:var(--ink-faint); font-size:13px; letter-spacing:-1px; padding:2px 2px; user-select:none; line-height:1;}
.drag-handle:active{cursor:grabbing;}
.col-row input{flex:1; font-family:inherit; font-size:13.5px; padding:8px 10px; border-radius:9px; border:1px solid var(--border); background:var(--bg); color:var(--ink); outline:none;}
.col-row input:focus{border-color:var(--accent);}
.col-add-row{display:flex; gap:8px; margin-bottom:6px;}
.col-add-row input{flex:1; font-family:inherit; font-size:13.5px; padding:8px 10px; border-radius:9px; border:1px solid var(--border); background:var(--bg); color:var(--ink); outline:none;}
.col-error{background:var(--danger-soft); color:var(--danger); font-size:12.5px; font-weight:600; padding:8px 10px; border-radius:8px; margin-bottom:10px;}

.import-summary p{margin:4px 0 10px; font-size:13.5px; line-height:1.4;}
input[type="file"]{font-family:inherit; font-size:12.5px; color:var(--ink-soft); width:100%;}

.user-rows{display:flex; flex-direction:column; gap:8px; margin-bottom:14px;}
.user-row{display:flex; align-items:center; gap:8px; border:1px solid var(--border); border-radius:9px; padding:8px 10px; background:var(--bg);}
.user-row .u-name{font-weight:700; flex:1;}
.user-row .u-name small{display:block; font-weight:600; color:var(--ink-faint); text-transform:none;}
.user-row.disabled{opacity:0.55;}
.new-user-form{display:flex; flex-direction:column; gap:10px; border-top:1px solid var(--border); padding-top:14px;}
.new-user-form .row2{align-items:end;}

.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;}
.login-card{background:var(--surface); border-radius:16px; box-shadow:var(--shadow); padding:32px 28px; width:100%; max-width:360px;}
.login-card h1{font-family:'Fraunces', serif; font-weight:600; font-size:22px; margin:0 0 4px;}
.login-card p.sub{margin:0 0 22px; color:var(--ink-soft); font-size:13px;}
.login-card .field{margin-bottom:14px;}
.login-error{background:var(--danger-soft); color:var(--danger); font-size:12.5px; font-weight:600; padding:8px 10px; border-radius:8px; margin-bottom:14px;}
.login-card button[type="submit"]{width:100%; justify-content:center; padding:10px;}

::-webkit-scrollbar{height:9px; width:9px;}
::-webkit-scrollbar-thumb{background:var(--border); border-radius:6px;}

@media (max-width:640px){
  .topbar{padding:14px;}
  .board-wrap{padding:14px;}
}