:root{
  --bg:#0f1117;
  --surface:#1a1d27;
  --card:#22263a;
  --accent:#6c63ff;
  --accent2:#e91e8c;
  --green:#2ecc71;
  --yellow:#f39c12;
  --red:#e74c3c;
  --orange:#e67e22;
  --text:#e8eaf6;
  --muted:#8892b0;
  --border:#2e3250;
  --radius:14px;
  --font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

html[data-theme="light"]{
  --bg:#f6f7fb;
  --surface:#ffffff;
  --card:#ffffff;
  --text:#1d2433;
  --muted:#657084;
  --border:#d8deea;
  --green:#12805c;
  --yellow:#b7791f;
  --red:#c53030;
  --orange:#c05621;
  color-scheme:light;
}

*{box-sizing:border-box;margin:0;padding:0;}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-family);
  min-height:100vh;
}

html[data-theme="light"] .auth-box,
html[data-theme="light"] .modal,
html[data-theme="light"] .item-card,
html[data-theme="light"] .summary-card,
html[data-theme="light"] .chore-card,
html[data-theme="light"] .log-item{
  box-shadow:0 8px 24px rgba(18,29,47,.08);
}

html[data-theme="light"] .count-stocked,
html[data-theme="light"] .action-btn.green,
html[data-theme="light"] .rating-opt.selected-love{background:#e7f7ef;}
html[data-theme="light"] .count-open,
html[data-theme="light"] .action-btn.yellow{background:#fff5dc;}
html[data-theme="light"] .badge-hate,
html[data-theme="light"] .badge-expired,
html[data-theme="light"] .action-btn.red,
html[data-theme="light"] .rating-opt.selected-hate{background:#ffe8e8;}
html[data-theme="light"] .badge-expiring{background:#fff1d6;}
html[data-theme="light"] .badge-priority,
html[data-theme="light"] .pill-monthly{background:#eee9ff;}
html[data-theme="light"] .pill-daily{background:#e7f7ef;}
html[data-theme="light"] .pill-weekly{background:#e8f1ff;}
html[data-theme="light"] .pill-once{background:#fff1d6;}
html[data-theme="light"] .sleep-banner{background:linear-gradient(135deg,#e7fbff,#eef4ff);}

.app-screen{display:none;flex-direction:column;min-height:100vh;max-width:600px;margin:0 auto;}

header{background:var(--surface);border-bottom:1px solid var(--border);padding:12px 16px;display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:10;flex-wrap:wrap;}
.header-left{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}
.header-logo{font-size:22px;flex-shrink:0;}
.header-icon{font-size:22px;flex-shrink:0;}
.header-title{font-size:18px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.header-title span{background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.header-actions{display:flex;align-items:center;gap:6px;flex-shrink:0;margin-left:auto;}
.icon-btn{background:var(--card);border:1px solid var(--border);border-radius:8px;min-width:38px;height:38px;padding:0 9px;color:var(--text);cursor:pointer;font-size:15px;display:inline-flex;align-items:center;justify-content:center;line-height:1;}
.icon-btn:active{opacity:.78;}
.theme-toggle{font-size:16px;}

.tabs{display:flex;background:var(--surface);border-bottom:1px solid var(--border);}
.tab{flex:1;padding:12px 4px;text-align:center;font-size:12px;font-weight:600;color:var(--muted);cursor:pointer;border:0;border-bottom:2px solid transparent;background:transparent;white-space:nowrap;font-family:inherit;}
.tab.active{color:var(--accent);border-bottom-color:var(--accent);}

.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:100;display:flex;align-items:flex-end;justify-content:center;}
.modal{background:var(--surface);border-radius:20px 20px 0 0;width:100%;max-width:600px;max-height:92vh;overflow-y:auto;padding:20px 20px 40px;}
.modal-handle{width:36px;height:4px;background:var(--border);border-radius:2px;margin:0 auto 16px;}
.modal h2{font-size:18px;margin-bottom:16px;font-weight:700;}
.modal-close{float:right;background:none;border:none;color:var(--muted);font-size:20px;cursor:pointer;margin-top:-4px;}
.modal .btn{margin-top:8px;}

.btn{width:100%;padding:13px;border:none;border-radius:10px;font-size:15px;font-weight:700;cursor:pointer;transition:opacity .2s;}
.btn:active{opacity:.8;}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;}
.btn-secondary{background:var(--card);color:var(--text);border:1px solid var(--border);margin-top:10px;}

.field{margin-bottom:14px;}
.field label{display:block;font-size:12px;color:var(--muted);margin-bottom:5px;text-transform:uppercase;letter-spacing:.5px;}
.field input,.field select,.field textarea{width:100%;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:12px 14px;color:var(--text);font-size:15px;outline:none;font-family:inherit;}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);}
.field textarea{resize:vertical;min-height:80px;}

.item-card,
.summary-card,
.chore-card,
.log-item{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
}

.empty-state{text-align:center;padding:56px 20px;color:var(--muted);}
.empty-state .big{font-size:48px;margin-bottom:10px;}

#toast{position:fixed;bottom:90px;left:50%;transform:translateX(-50%);background:var(--card);border:1px solid var(--border);border-radius:20px;padding:10px 20px;font-size:13px;opacity:0;transition:opacity .3s;pointer-events:none;z-index:200;white-space:nowrap;}
#toast.show{opacity:1;}
.spinner{display:inline-block;width:16px;height:16px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .6s linear infinite;vertical-align:middle;margin-right:6px;}
.loading,.loading-screen{display:flex;align-items:center;justify-content:center;color:var(--muted);}
.loading{padding:40px;}
.loading-screen{min-height:200px;}

@media (max-width:520px){
  .tabs{overflow-x:auto;scrollbar-width:none;}
  .tabs::-webkit-scrollbar{display:none;}
  .tab{min-width:max-content;padding-left:12px;padding-right:12px;}
  .modal{padding:18px 16px 34px;}
  .field input,.field select,.field textarea{font-size:16px;}
}

@keyframes spin{to{transform:rotate(360deg);}}