:root { --ink:#111827; --muted:#6b7280; --line:#e5e7eb; --bg:#f6f7f9; --brand:#1fa3dc; }
* { box-sizing:border-box; margin:0; padding:0; }
[hidden] { display:none !important; }
body { font-family:-apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background:var(--bg); color:var(--ink); min-height:100vh; -webkit-tap-highlight-color:transparent; }
a { color:inherit; text-decoration:none; }
.wrap { max-width:560px; margin:0 auto; padding:0 20px 40px; }

header { text-align:center; padding:32px 0 26px; }
.logo-img { width:100%; max-width:380px; max-height:110px; object-fit:contain; }
.logo-text { font-size:28px; font-weight:800; letter-spacing:.5px; }

/* Home: list on phones, squares across on iPad / computer */
.list { display:grid; gap:12px; }
.item { display:flex; align-items:center; justify-content:space-between; padding:22px; background:#fff; border:1px solid var(--line); border-radius:14px; font-size:20px; font-weight:600; }
.item:active { transform:scale(.99); background:#fafafa; }
.item .arrow { color:var(--muted); font-size:22px; }
.empty { text-align:center; color:var(--muted); font-size:18px; padding:40px 0; }
@media (min-width:700px) {
  .wrap { max-width:1100px; }
  #product { max-width:560px; margin:0 auto; }
  .list { grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:18px; }
  .item { justify-content:center; text-align:center; padding:40px 20px; font-size:22px; }
  .item .arrow { display:none; }
}

/* Product page */
.back { display:inline-flex; align-items:center; gap:6px; margin:8px 0; padding:10px 16px 10px 12px; background:#fff; border:1px solid var(--line); border-radius:999px; font-size:17px; font-weight:600; }
.hero { text-align:center; padding:18px 0 22px; }
.icon { width:96px; height:96px; margin:0 auto 14px; border-radius:24px; background:var(--brand); color:#fff; display:grid; place-items:center; }
.icon svg { width:52px; height:52px; }
.icon.photo { width:180px; height:180px; background:#fff; border:1px solid var(--line); overflow:hidden; }
.icon.photo img { width:100%; height:100%; object-fit:contain; }
.pics td { font-size:16px; padding:10px 12px; vertical-align:middle; }
.pics .thumb { width:52px; height:52px; border-radius:10px; border:1px solid var(--line); object-fit:contain; background:#fff; display:block; }
.pics .nopic { width:52px; height:52px; border-radius:10px; background:#f3f4f6; display:block; }
.pics form { display:inline; }
.pics .btn { padding:8px 12px; font-size:14px; }
.hero h1 { font-size:30px; font-weight:800; }
table { width:100%; border-collapse:separate; border-spacing:0; background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; }
th { text-align:left; font-size:14px; letter-spacing:1px; text-transform:uppercase; color:var(--muted); padding:14px 22px; background:#fafafa; border-bottom:1px solid var(--line); }
td { padding:24px 22px; font-size:24px; border-bottom:1px solid var(--line); }
tr:last-child td { border-bottom:0; }
.price { text-align:right; }
td.price { font-weight:800; }
.group { margin-bottom:44px; padding-bottom:6px; }
.group + .group { border-top:2px solid var(--line); padding-top:28px; }
.size { font-size:22px; font-weight:800; margin:0 4px 4px; }
.sub { color:var(--muted); font-size:16px; line-height:1.4; margin:0 4px 10px; }
.note { color:var(--muted); font-size:14px; font-weight:400; line-height:1.35; margin-top:4px; }

/* Upload page */
.admin { max-width:640px; margin:0 auto; }
.card { background:#fff; border:1px solid var(--line); border-radius:14px; padding:24px; margin-bottom:18px; }
.card h2 { font-size:20px; margin-bottom:12px; }
.card p { color:var(--muted); line-height:1.5; margin-bottom:12px; }
.drop { display:block; border:2px dashed #cbd5e1; border-radius:12px; padding:34px 16px; text-align:center; color:var(--muted); font-size:17px; cursor:pointer; margin-bottom:14px; }
.drop.over { border-color:var(--brand); background:#f0f9fe; color:var(--ink); }
.drop strong { color:var(--ink); }
.btn { display:inline-block; padding:12px 20px; border-radius:10px; border:0; background:var(--ink); color:#fff; font-size:16px; font-weight:600; cursor:pointer; }
.btn.light { background:#fff; color:var(--ink); border:1px solid var(--line); }
.btn:disabled { opacity:.4; cursor:default; }
.msg { padding:14px 16px; border-radius:10px; margin-bottom:18px; font-weight:600; }
.msg.ok { background:#ecfdf3; color:#067647; }
.msg.err { background:#fef3f2; color:#b42318; }
.admin-title { font-size:22px; font-weight:800; margin-top:14px; }
.lock { max-width:420px; margin:10px auto 0; text-align:center; }
.lock .btn { width:100%; }
input[type=password] { width:100%; padding:14px; font-size:17px; border:1px solid var(--line); border-radius:10px; margin-bottom:14px; }
.small { font-size:14px; color:var(--muted); }
.preview td, .preview th { font-size:15px; padding:8px 12px; }
.row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }