/* Sketch bottom note: color background hex = 222224 */
:root { --bg:#222224; --ink:#f2f0eb; --muted:#a8a49b; --line:#6b675f; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:Verdana, Geneva, sans-serif; padding:32px 18px 64px; }
body.has-bg-image { background-image:var(--bg-image); background-size:cover; background-position:center; background-repeat:no-repeat; background-attachment:fixed; }
header { text-align:center; margin-bottom:28px; }
.logo { display:block; width:120px; height:120px; object-fit:cover; margin:0 auto 10px; border-radius:14px; }
h1 { font-family:Georgia, 'Times New Roman', serif; font-size:clamp(3rem,9vw,5.5rem); line-height:1; margin:8px 0 6px; letter-spacing:.01em; }
.hint { color:var(--muted); font-size:.85rem; margin:0; }
.legend { color:var(--muted); font-size:.9rem; margin:14px 0 0; }
.dot { display:inline-block; width:12px; height:12px; border-radius:50%; vertical-align:-1px; }
button.dot.light { width:26px; height:26px; flex:0 0 26px; border:none; padding:0; cursor:pointer; align-self:center; }
button.dot.light:focus-visible { outline:2px dashed var(--ink); outline-offset:4px; }
.dot.nostock { background:#ff4d4d; box-shadow:0 0 10px #ff4d4d; }
.dot.low { background:#ffd23d; box-shadow:0 0 10px #ffd23d; }
.dot.ok { background:#3ddc74; box-shadow:0 0 10px #3ddc74; }
.dot.unknown { background:#8a867e; box-shadow:0 0 8px rgba(180,175,165,.6); }
.card.unknown { border-color:#4a4a4e; box-shadow:none; }
.forgot { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:.85rem; cursor:pointer; }
.forgot input { width:auto; }
.field input:disabled { opacity:.55; cursor:not-allowed; }
.cal-detail .unknown-text { color:#b8b3a9; }

main { max-width:1060px; margin:0 auto; display:grid; gap:20px; }
.cards-month { max-width:1060px; margin:0 auto 12px; color:var(--muted); font-size:.9rem; }
/* Cards glow: red = no stock, yellow = low stock, green = in stock */
.card { background:#2a2a2d; border:1px solid #3a3a3e; border-radius:8px; padding:20px; }
.card.nostock { border-color:#ff4d4d; box-shadow:0 0 18px rgba(255,60,60,.55), 0 0 42px rgba(255,60,60,.22); }
.card.low { border-color:#ffd23d; box-shadow:0 0 18px rgba(255,210,61,.5), 0 0 42px rgba(255,210,61,.2); }
.card.ok { border-color:#3ddc74; box-shadow:0 0 18px rgba(50,220,110,.5), 0 0 42px rgba(50,220,110,.2); }
.card-head { display:flex; gap:14px; align-items:end; flex-wrap:wrap; border-bottom:1px solid #3a3a3e; padding-bottom:14px; margin-bottom:14px; }
.card-head .grow { flex:1 1 220px; }
.remove { margin-left:auto; background:none; border:1px solid var(--line); color:var(--muted); border-radius:6px; width:34px; height:34px; cursor:pointer; font-size:1rem; }
.grid { display:flex; gap:16px; flex-wrap:wrap; align-items:end; }
.field { display:flex; flex-direction:column; gap:4px; min-width:130px; flex:1 1 130px; }
.field label { font-size:.78rem; color:var(--muted); }
.field input, .field select { background:transparent; color:var(--ink); border:none; border-bottom:2px solid var(--line); padding:7px 2px; font:inherit; font-size:1rem; border-radius:0; }
.field input:focus, .field select:focus { outline:none; border-bottom-color:var(--ink); }
.field select option { color:#111; }
.maps { align-self:end; background:#f2f0eb; color:#222224; border:none; border-radius:6px; padding:9px 14px; font:inherit; font-weight:700; cursor:pointer; white-space:nowrap; }
.add { display:block; margin:26px auto 0; background:transparent; color:var(--ink); border:1.5px solid var(--ink); border-radius:8px; padding:12px 22px; font:inherit; font-size:1.05rem; cursor:pointer; }
.add:hover, .maps:hover, .remove:hover { opacity:.85; }
.status { text-align:center; color:var(--muted); min-height:1.2em; }
.cal-btn { display:inline-flex; align-items:center; gap:8px; margin-top:16px; background:#f2f0eb; color:#222224; border:none; border-radius:6px; padding:9px 16px; font:inherit; font-weight:700; cursor:pointer; }
.calendar-wrap { max-width:1060px; margin:0 auto 24px; background:#2a2a2d; border:1px solid #3a3a3e; border-radius:8px; padding:18px; }
.cal-head { display:flex; align-items:center; justify-content:space-between; }
.cal-head h2 { font-family:Georgia, 'Times New Roman', serif; font-size:1.5rem; margin:0; }
.cal-nav { background:none; border:1px solid var(--line); color:var(--ink); border-radius:6px; width:38px; height:38px; font-size:1.4rem; cursor:pointer; }
.cal-weekdays, .cal-grid { display:grid; grid-template-columns:repeat(7, 1fr); gap:6px; }
.cal-weekdays { color:var(--muted); font-size:.78rem; text-align:center; margin:14px 0 6px; }
.cal-day { min-height:74px; background:#222224; border:1px solid #3a3a3e; border-radius:6px; color:var(--ink); padding:6px; text-align:left; font:inherit; cursor:pointer; display:flex; flex-direction:column; gap:3px; }
.cal-day.empty { background:transparent; border:none; cursor:default; }
.cal-day.today { border-color:var(--ink); }
.cal-day.selected { outline:2px solid var(--ink); outline-offset:1px; }
.cal-day.stocked { border-color:#3ddc74; box-shadow:inset 0 0 0 1px #3ddc74, 0 0 10px rgba(50,220,110,.35); }
.cal-day.notstocked { border-color:#ff4d4d; box-shadow:inset 0 0 0 1px #ff4d4d, 0 0 10px rgba(255,60,60,.35); }
.cal-day.stocked.notstocked { border-color:#f2f0eb; box-shadow:inset 0 0 0 1px #f2f0eb, 0 0 10px rgba(242,240,235,.25); }
.cal-day.lowstock { border-color:#ffd23d; box-shadow:inset 0 0 0 1px #ffd23d, 0 0 10px rgba(255,210,61,.35); }
.cal-day .num { font-weight:700; font-size:.9rem; }
.cal-day .cal-names { font-size:.68rem; color:var(--muted); overflow:hidden; }
.cal-dots { display:flex; gap:4px; }
.cal-detail { margin-top:14px; border-top:1px solid #3a3a3e; padding-top:12px; line-height:1.6; }
.cal-detail .ok-text { color:#3ddc74; } .cal-detail .low-text { color:#ffd23d; } .cal-detail .nostock-text { color:#ff8080; }
#calAdd { margin-top:10px; }
@media (max-width:640px) { .cal-day { min-height:54px; } .cal-day .cal-names { display:none; } }
.account-bar { max-width:1060px; margin:0 auto 16px; text-align:right; color:var(--muted); }
.account-logout { width:auto; height:auto; padding:8px 14px; font-size:.95rem; margin-left:10px; }
.auth { max-width:520px; margin:0 auto 24px; background:#2a2a2d; border:1px solid #3a3a3e; border-radius:8px; padding:22px; }
.auth h2 { font-family:Georgia, 'Times New Roman', serif; margin:0 0 6px; }
.auth-tabs { display:flex; gap:10px; margin:16px 0; }
.auth-tab { width:auto; height:auto; padding:9px 16px; font-size:1rem; }
.auth .field { margin-bottom:14px; }
.auth-submit { width:100%; padding:12px; }
.auth-error { color:#ff8080; min-height:1.2em; margin:10px 0 0; }
.totp-code { display:block; word-break:break-all; background:#222224; border:1px solid #3a3a3e; border-radius:6px; padding:10px; font-size:.9rem; }
#totpCancel { margin-top:10px; }
/* Mobile support: big tap targets, no iOS zoom on inputs, nothing sideways */
@media (max-width:700px) {
  body { padding:18px 10px 48px; }
  .logo { width:84px; height:84px; }
  .card { padding:14px; }
  .card-head { gap:10px; } .card-head .grow { flex:1 1 100%; }
  .grid { gap:10px; }
  .field { flex:1 1 46%; min-width:0; }
  .field input, .field select { font-size:16px; min-height:44px; }
  .maps, .add, .cal-btn, .cal-nav, .remove, button.dot.light { min-height:44px; }
  .remove { width:44px; }
  .maps { flex:1 1 100%; padding:12px; }
  .add { width:100%; max-width:440px; padding:14px; }
  .calendar-wrap { padding:12px; }
  .cal-weekdays, .cal-grid { gap:4px; }
  .cal-day { min-height:52px; padding:4px; }
  .legend { line-height:1.7; }
  .auth { padding:16px; }
}
@media (max-width:380px) { .field { flex:1 1 100%; } }
@media (prefers-reduced-motion: reduce) { * { transition:none !important; } }

.bg-picker { display:inline-flex; align-items:center; gap:6px; margin-left:12px; color:var(--muted); font-size:.9rem; }
.bg-picker input[type="file"] { max-width:220px; color:var(--muted); font-size:.85rem; cursor:pointer; }

.danger { border-color:#ff4d4d; color:#ff8080; }
.danger-btn { background:#ff4d4d; color:#222224; margin-top:6px; }
#deleteCancel { margin-top:10px; }