:root { color-scheme: dark; --bg:#550050; --bg-deep:#43003f; --panel:rgba(255,255,255,.105); --row:rgba(255,255,255,.10); --row-hover:rgba(255,255,255,.15); --line:rgba(255,255,255,.18); --text:#fff8ff; --muted:#d9bfd8; --accent:#bd60b2; --danger:#ff785f; --shadow:0 18px 52px rgba(28,0,30,.22); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; min-height:100dvh; background:radial-gradient(circle at 18% 10%, #650662 0, transparent 31rem), linear-gradient(135deg,var(--bg),var(--bg-deep)); color:var(--text); }
.auth-pending .app-shell { display:none; }
button,input { font:inherit; }
button { cursor:pointer; touch-action:manipulation; }
.app-shell { width:min(1500px,100%); min-height:100vh; margin:auto; padding:clamp(26px,4vw,64px); }
.topbar { display:grid; grid-template-columns:minmax(300px,1fr) minmax(240px,.65fr) auto; grid-template-areas:"title updated status" "title updated account"; align-items:center; column-gap:32px; row-gap:12px; margin-bottom:clamp(34px,5vw,72px); }
.title-group { grid-area:title; display:flex; align-items:center; gap:18px; }
.cart-mark { display:grid; place-items:center; width:62px; height:62px; border-radius:17px; background:linear-gradient(145deg,rgba(255,255,255,.2),rgba(255,255,255,.08)); font-size:30px; box-shadow:inset 0 1px 0 rgba(255,255,255,.15); }
h1 { margin:0; font-size:clamp(2rem,3.2vw,3.2rem); line-height:1; letter-spacing:-.035em; }
.title-group p { margin:10px 0 0; color:var(--muted); font-size:1.08rem; font-weight:600; }
.title-group i { margin:0 7px; font-style:normal; opacity:.7; }
.updated { grid-area:updated; display:flex; align-items:flex-start; gap:10px; color:var(--muted); }
.updated>span { font-size:25px; line-height:1; }
.updated small,.updated strong { display:block; }
.updated small { font-size:.94rem; margin-bottom:3px; }
.updated strong { color:var(--text); font-size:1rem; }
.connection { grid-area:status; justify-self:end; display:flex; align-items:center; gap:8px; padding:9px 12px; border:1px solid var(--line); border-radius:999px; color:var(--muted); font-size:.82rem; }
.connection span { width:8px; height:8px; border-radius:50%; background:#d8b64b; box-shadow:0 0 0 4px rgba(216,182,75,.13); }
.connection.online span { background:#65d68a; box-shadow:0 0 0 4px rgba(101,214,138,.14); }
.connection.offline span { background:#ff785f; box-shadow:0 0 0 4px rgba(255,120,95,.14); }
.account { grid-area:account; justify-self:end; display:flex; align-items:center; gap:8px; padding:5px 5px 5px 11px; border:1px solid rgba(255,255,255,.14); border-radius:999px; background:rgba(255,255,255,.07); box-shadow:0 6px 22px rgba(20,0,20,.12); color:var(--muted); font-size:.86rem; }
.account[hidden] { display:none; }
.account .user-badge { width:9px; height:9px; overflow:hidden; border-radius:50%; background:#d38acb; color:transparent; box-shadow:0 0 0 4px rgba(211,138,203,.12); }
.account strong { margin:0 4px 0 1px; color:var(--text); font-weight:750; }
.account button { display:inline-flex; align-items:center; gap:6px; min-height:34px; border:0; border-radius:999px; padding:6px 11px; color:var(--text); background:rgba(255,255,255,.09); transition:background .16s ease,transform .16s ease; }
.account button[hidden] { display:none; }
.account button:hover { background:rgba(255,255,255,.17); transform:translateY(-1px); }
.account button:last-child { color:#ffd3d0; background:rgba(255,110,100,.10); }
.workspace { display:grid; grid-template-columns:minmax(0,1.58fr) minmax(330px,.82fr); gap:clamp(28px,5vw,74px); align-items:stretch; }
.list-panel { min-height:620px; padding:22px; border:1px solid var(--line); border-radius:24px; background:var(--panel); box-shadow:var(--shadow); backdrop-filter:blur(12px); }
.shopping-list { display:flex; flex-direction:column; gap:6px; }
.item { display:grid; grid-template-columns:44px minmax(90px,1fr) 42px 42px 42px 46px; align-items:center; gap:9px; min-height:58px; padding:6px 10px; border-radius:11px; background:var(--row); transition:.16s ease; }
.item:hover { background:var(--row-hover); }
.item button { display:grid; place-items:center; width:38px; height:38px; padding:0; border:1px solid rgba(255,255,255,.09); border-radius:9px; background:rgba(255,255,255,.08); color:var(--text); font-size:1.35rem; }
.item .check { width:38px; color:white; font-weight:900; }
.item .name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:1.17rem; font-weight:650; }
.item .amount { text-align:center; font-size:1.12rem; font-weight:800; }
.item .delete { font-size:1rem; background:rgba(255,90,90,.07); }
.item.done { opacity:.63; }
.item.done .name { text-decoration:line-through; }
.item.done .check { background:#438b5d; opacity:1; }
.empty { min-height:500px; display:grid; place-content:center; text-align:center; color:var(--muted); }
.empty[hidden], .confirm-card[hidden] { display:none; }
.empty>span { font-size:3rem; filter:grayscale(.3); margin-bottom:12px; }
.empty strong { color:var(--text); font-size:1.18rem; }
.empty p { margin:6px 0; }
.controls { min-height:620px; display:flex; flex-direction:column; padding:38px 0 0; }
.add-form>label { display:block; font-size:1.16rem; font-weight:800; font-family:Georgia,serif; }
.line-input { position:relative; margin-top:7px; }
.line-input input,.quantity-field input { width:100%; height:46px; border:0; border-bottom:2px solid rgba(10,0,10,.7); border-radius:0; outline:0; background:transparent; color:white; padding:0 38px 0 2px; }
.line-input input:focus,.quantity-field input:focus { border-color:#dc9ed4; }
.line-input input::placeholder { color:rgba(255,255,255,.32); }
.clear-input { position:absolute; right:0; top:0; width:38px; height:42px; border:0; background:transparent; color:#a557a2; font-size:1.5rem; }
.add-row { display:grid; grid-template-columns:1.3fr .7fr; align-items:end; gap:38px; margin-top:48px; }
.primary,.light-button,.confirm-card button { min-height:44px; border:0; border-radius:6px; background:#fff; color:#171017; box-shadow:0 3px 14px rgba(0,0,0,.14); }
.primary { font-family:Georgia,serif; font-size:1rem; }
.quantity-field { font-family:Georgia,serif; font-size:.88rem; font-weight:700; }
.quantity-field input { height:38px; padding:0 4px; font-size:1.1rem; }
.list-actions { display:grid; gap:54px; width:210px; margin:auto auto 20px; }
.light-button { width:100%; }
.confirm-card { margin-top:24px; padding:24px; border:1px solid var(--line); border-radius:20px; background:var(--panel); text-align:center; }
.confirm-card strong { display:block; margin-bottom:18px; color:var(--danger); font-size:1.05rem; }
.confirm-card div { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.toast { position:fixed; left:50%; bottom:26px; z-index:5; transform:translate(-50%,20px); padding:12px 18px; border:1px solid var(--line); border-radius:999px; background:#241123; box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:.2s ease; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.auth-screen { position:fixed; inset:0; z-index:20; display:grid; place-items:center; padding:20px; background:radial-gradient(circle at 25% 10%,#720a6f,transparent 32rem),linear-gradient(135deg,#550050,#350033); }
.auth-screen[hidden] { display:none; }
.auth-card { width:min(430px,100%); padding:40px; border:1px solid rgba(255,255,255,.18); border-radius:28px; background:linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.075)); box-shadow:0 30px 90px rgba(0,0,0,.38); backdrop-filter:blur(20px); }
.auth-icon { display:grid; place-items:center; width:62px; height:62px; border-radius:18px; background:rgba(255,255,255,.12); font-size:2rem; box-shadow:inset 0 1px rgba(255,255,255,.15); }.auth-kicker { margin:24px 0 7px; color:#e4a7dc; font-size:.75rem; font-weight:850; letter-spacing:.16em; }.auth-card h2 { margin:0; font-size:2.15rem; letter-spacing:-.025em; }.auth-card>p:not(.auth-kicker) { margin:10px 0 26px; color:var(--muted); line-height:1.5; }.auth-card label { display:block; margin:16px 0 0; color:#f8eaf7; font-size:.9rem; font-weight:700; }.auth-card input { display:block; width:100%; height:50px; margin-top:8px; border:1px solid rgba(255,255,255,.16); border-radius:12px; padding:0 14px; outline:0; background:rgba(20,0,22,.30); color:white; }.auth-card input:focus { border-color:#e3a4db; box-shadow:0 0 0 3px rgba(227,164,219,.12); }.auth-card button,.user-form button { width:100%; min-height:50px; margin-top:25px; border:0; border-radius:12px; background:white; color:#341031; font-weight:850; box-shadow:0 8px 26px rgba(0,0,0,.16); }.auth-error { min-height:22px; margin:12px 0 0!important; color:#ffad9d!important; }
.admin-dialog { width:min(920px,calc(100% - 24px)); max-height:88vh; border:1px solid var(--line); border-radius:22px; padding:0; background:#4b0848; color:var(--text); box-shadow:var(--shadow); }.admin-dialog::backdrop { background:rgba(20,0,20,.72); backdrop-filter:blur(5px); }.admin-head { display:flex; justify-content:space-between; align-items:center; padding:24px; border-bottom:1px solid var(--line); }.admin-head small { color:#e4a7dc; font-weight:800; letter-spacing:.13em; }.admin-head h2 { margin:4px 0 0; }.admin-head button { border:0; background:none; color:white; font-size:2rem; }.user-form { display:grid; grid-template-columns:1fr 1fr 150px 180px; gap:10px; padding:22px; border-bottom:1px solid var(--line); }.user-form h3 { grid-column:1/-1; margin:0 0 5px; }.user-form input,.user-form select { min-height:42px; border:1px solid var(--line); border-radius:8px; padding:0 10px; background:rgba(0,0,0,.18); color:white; }.user-form button { min-height:42px; margin:0; }.admin-columns { display:grid; grid-template-columns:.8fr 1.2fr; gap:28px; padding:22px; overflow:auto; }.admin-columns h3 { margin-top:0; }.admin-entry { padding:10px 0; border-bottom:1px solid var(--line); font-size:.9rem; }.admin-entry small { display:block; color:var(--muted); margin-top:3px; }

@media (max-width:850px) {
  .app-shell { padding:24px 18px 38px; }
  .topbar { grid-template-columns:1fr auto; grid-template-areas:"title status" "updated updated" "account account"; gap:18px 12px; margin-bottom:26px; }
  .connection b { display:none; }
  .connection { padding:10px; }
  .account { justify-self:stretch; justify-content:flex-end; margin:0; }
  .workspace { display:flex; flex-direction:column; gap:22px; }
  .controls { order:-1; min-height:0; padding:22px; border:1px solid var(--line); border-radius:20px; background:rgba(255,255,255,.07); }
  .add-row { margin-top:22px; }
  .list-actions { grid-template-columns:1fr 1fr; gap:12px; width:100%; margin:28px 0 0; }
  .confirm-card { order:3; }
  .list-panel { min-height:360px; padding:12px; border-radius:20px; }
  .empty { min-height:300px; }
}
@media (max-width:700px) { .user-form { grid-template-columns:1fr; }.user-form h3 { grid-column:auto; }.admin-columns { grid-template-columns:1fr; } }
@media (max-width:520px) {
  .cart-mark { width:50px; height:50px; border-radius:14px; font-size:24px; }
  .title-group { gap:12px; }
  h1 { font-size:1.82rem; }
  .title-group p { margin-top:7px; font-size:.9rem; }
  .add-row { grid-template-columns:1fr 92px; gap:18px; }
  .item { grid-template-columns:38px minmax(0,1fr) 38px 34px 38px 38px; gap:4px; padding:6px; }
  .item button { width:34px; height:38px; }
  .item .name { font-size:1rem; }
  .item .amount { font-size:1rem; }
  .list-actions { grid-template-columns:1fr; }
  .account { justify-content:flex-start; overflow-x:auto; border-radius:16px; }
  .account button { padding:6px 9px; }
  .auth-card { padding:28px 24px; border-radius:22px; }
}
@media (max-width:390px) {
  .topbar { grid-template-columns:1fr; }
  .connection { position:absolute; top:22px; right:16px; }
  .item { grid-template-columns:36px minmax(0,1fr) 36px 30px 36px 36px; }
  .item button { width:32px; }
}