/* Lux Sip – giao diện chung. Màu đen & vàng theo logo Lux Nails Lounge. */
:root{
  --bg:#f6f3ec; --surface:#ffffff; --sunk:#ece6d8; --line:#ddd3bd;
  --fg:#1c1914; --muted:#75695a;
  --brand:#1c1914; --brand-ink:#e6c77a; --brand-soft:#f3e7c4;
  --gold:#a8822e;
  --help:#b8621b; --help-soft:#fbead9;
  --way:#2e7a70; --way-soft:#dcefeb;
  --display:"Gloock", Georgia, "Times New Roman", serif;
  --body:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, Menlo, monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:15px;line-height:1.45;
  padding-inline:16px;padding-block:calc(14px + env(safe-area-inset-top,0px)) calc(40px + env(safe-area-inset-bottom,0px))}
[hidden]{display:none!important}
img{max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.wrap{max-width:1280px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.brandbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.brandbar img{height:48px;width:auto;border-radius:8px}
.brandbar img + div h1{display:none}
.brandbar h1{font-family:var(--display);font-weight:400;font-size:1.6rem;margin:0}
.brandbar .sub{color:var(--muted);font-size:.85rem}
.spacer{flex:1}
.meta{font-size:.74rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.muted{color:var(--muted)}
.note{font-size:.84rem;color:var(--muted);background:var(--sunk);border-radius:10px;padding:8px 12px}
.btn{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:8px 12px;font-weight:600;font-size:.86rem}
.btn.on,.btn.primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.btn.danger{color:#b3261e;border-color:#e8b4b0}
.btn:disabled{opacity:.5;cursor:default}
input[type=text],input[type=email],input[type=password],input[type=number],textarea,select{
  border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:9px 11px;width:100%}
label{font-size:.82rem;font-weight:600;display:flex;flex-direction:column;gap:4px}
.pill{font-size:.72rem;font-weight:700;border-radius:999px;padding:2px 9px;white-space:nowrap}
.pill.new{background:var(--brand-soft);color:var(--brand)}
.pill.way{background:var(--way-soft);color:var(--way)}
.pill.done{background:var(--sunk);color:var(--muted)}
.pill.help{background:var(--help-soft);color:var(--help)}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);
  background:var(--fg);color:var(--bg);padding:10px 16px;border-radius:12px;font-weight:600;font-size:.9rem;max-width:calc(100% - 32px);z-index:50}
.login{max-width:360px;margin:8vh auto 0;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:12px}
.login h2{font-family:var(--display);font-weight:400;margin:0}
.err{color:#b3261e;font-size:.85rem}
.tabs{display:flex;gap:4px;background:var(--sunk);padding:4px;border-radius:999px;flex-wrap:wrap;width:fit-content;max-width:100%}
.tabs button{border:0;background:transparent;padding:8px 14px;border-radius:999px;font-weight:600;font-size:.88rem;color:var(--muted)}
.tabs button[aria-selected="true"]{background:var(--surface);color:var(--fg);box-shadow:0 1px 3px rgb(0 0 0 / .08)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* ---- Sơ đồ tiệm (lưới 24 × 16) ---- */
.plan{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));grid-template-rows:repeat(24,minmax(0,1fr));aspect-ratio:1/1;gap:3px;
  width:100%;background:var(--sunk);border:1px solid var(--line);border-radius:12px;padding:6px;position:relative}
.plan.edit{background-color:var(--sunk);background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:calc((100% - 12px)/24) calc((100% - 12px)/24);background-position:6px 6px}
.plan > *{min-width:0;min-height:0}
.fi{display:flex;align-items:center;justify-content:center;text-align:center;border:1.5px dashed var(--muted);border-radius:8px;color:var(--muted);
  font-size:clamp(.5rem,1vw,.8rem);font-weight:600;overflow:hidden;padding:2px;line-height:1.1}
.fi-desk{background:var(--brand);color:var(--brand-ink);border:0}
.fi-door{border:0;border-bottom:4px solid var(--gold);color:var(--gold);align-items:flex-end;border-radius:0}
.fi-block{background:var(--line);border:0;color:var(--fg)}
.fi-label{border:0;color:var(--fg);font-size:clamp(.55rem,1.1vw,.9rem)}
.pst{display:flex;align-items:center;justify-content:center;border:1px solid var(--line);background:var(--surface);border-radius:8px;
  font-family:var(--mono);font-weight:600;font-size:clamp(.5rem,1.1vw,.9rem);overflow:hidden}
.pst.off{opacity:.4}
.plan.edit .pl{cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.plan.edit .pl.dragging{cursor:grabbing;opacity:.85;z-index:3}
.plan.edit .pl.sel{outline:2px solid var(--gold);outline-offset:1px;z-index:2}