:root {
  --ink:#26324A;
  --ink-2:#182033;
  --ink-3:#39445A;
  --ivory:#F7F4EE;
  --paper:#FFFFFF;
  --sand:#D9C7A3;
  --sand-soft:#EFE6D5;
  --clay:#C96F4A;
  --sage:#6E8B74;
  --sage-soft:#E4EEE6;
  --charcoal:#252525;
  --muted:#6B7280;
  --muted-2:#8A909A;
  --line:#E4E0D8;
  --line-strong:#D6D1C8;
  --danger:#A33B3B;
  --success:#2F6B50;
  --warning:#8C6816;
  --radius-xs:10px;
  --radius-sm:14px;
  --radius:20px;
  --radius-lg:28px;
  --radius-xl:36px;
  --shadow-sm:0 6px 18px rgba(24,32,51,.05);
  --shadow:0 18px 50px rgba(24,32,51,.08);
  --shadow-lg:0 28px 70px rgba(24,32,51,.12);
  --content:1240px;
  --header-h:76px;
  --admin-top:68px;
  --admin-side:252px;
}

* { box-sizing:border-box; }
html { min-width:320px; background:var(--ivory); color:var(--charcoal); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body { margin:0; min-height:100vh; background:linear-gradient(180deg,#FBFAF7 0,#F7F4EE 42%,#F4F0E8 100%); }
a { color:inherit; text-decoration:none; }
button,input,textarea,select { font:inherit; }
button { -webkit-tap-highlight-color:transparent; }
img { display:block; max-width:100%; }
h1,h2,h3,h4,p { margin-top:0; }
::selection { background:var(--sand); color:var(--ink-2); }

/* ---------- Shared shell ---------- */
.site-header { position:sticky; top:0; z-index:50; height:var(--header-h); background:rgba(247,244,238,.92); border-bottom:1px solid rgba(38,50,74,.08); backdrop-filter:blur(18px); }
.site-header-inner { width:min(var(--content),calc(100% - 36px)); height:100%; margin:auto; display:flex; align-items:center; gap:30px; }
.brand { flex:0 0 auto; display:inline-flex; align-items:center; gap:10px; color:var(--ink-2); font-weight:900; letter-spacing:.145em; }
.brand-word { font-size:17px; }
.brand-mark { position:relative; width:39px; height:39px; border-radius:14px; background:var(--ink-2); display:grid; place-items:center; overflow:hidden; box-shadow:0 8px 20px rgba(24,32,51,.15); }
.brand-mark span,.brand-mark:before,.brand-mark:after { content:""; position:absolute; border:1.7px solid rgba(255,255,255,.94); border-radius:50%; }
.brand-mark span { width:17px; height:25px; border-left-color:transparent; border-bottom-color:transparent; transform:rotate(38deg); }
.brand-mark:before { width:9px; height:19px; border-right-color:transparent; border-top-color:transparent; transform:rotate(38deg); }
.brand-mark:after { width:3px; height:3px; background:#fff; border:0; }
.desktop-nav { display:flex; align-items:center; gap:6px; margin-left:8px; }
.desktop-nav a { position:relative; padding:10px 13px; border-radius:12px; color:#596174; font-size:14px; font-weight:720; transition:.18s ease; }
.desktop-nav a:hover,.desktop-nav a.active { color:var(--ink-2); background:rgba(38,50,74,.055); }
.header-actions { margin-left:auto; display:flex; align-items:center; gap:9px; min-width:0; }
.header-search { min-height:42px; display:inline-flex; align-items:center; gap:7px; padding:0 12px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.72); color:#657083; font-size:13px; font-weight:700; }
.header-search>span:first-child { font-size:20px; line-height:1; color:var(--ink); }
.icon-link,.avatar-link,.mobile-menu-btn { width:42px; height:42px; flex:0 0 auto; border:1px solid var(--line); border-radius:14px; background:#fff; display:grid; place-items:center; }
.icon-link { position:relative; color:var(--ink); }
.avatar-link { overflow:hidden; background:var(--sand-soft); color:var(--ink-2); font-weight:850; }
.avatar-link img { width:100%; height:100%; object-fit:cover; }
.badge-dot { position:absolute; right:-5px; top:-6px; min-width:19px; height:19px; padding:0 5px; border:2px solid var(--ivory); border-radius:999px; background:var(--clay); color:#fff; display:grid; place-items:center; font-size:9px; font-weight:850; }
.mobile-menu-btn { display:none; cursor:pointer; color:var(--ink); font-size:19px; }
.mobile-menu { display:none; }

.btn { min-height:44px; padding:0 17px; border:1px solid var(--ink); border-radius:14px; background:var(--ink); color:#fff; display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:780; font-size:14px; cursor:pointer; box-shadow:0 8px 18px rgba(38,50,74,.10); transition:transform .15s ease,box-shadow .15s ease,background .15s ease; }
.btn:hover { transform:translateY(-1px); box-shadow:0 11px 24px rgba(38,50,74,.14); }
.btn:active { transform:translateY(0); }
.btn-ghost { background:#fff; color:var(--ink); border-color:var(--line-strong); box-shadow:none; }
.btn-clay { background:var(--clay); border-color:var(--clay); }
.btn-sage { background:var(--sage); border-color:var(--sage); }
.btn-danger { background:var(--danger); border-color:var(--danger); }
.btn-sm { min-height:34px; padding:0 11px; border-radius:11px; font-size:12px; }

.container { width:min(var(--content),calc(100% - 36px)); margin:auto; padding:26px 0 108px; }
.narrow { width:min(760px,calc(100% - 32px)); margin:auto; padding:30px 0 100px; }
.section { margin:34px 0; }
.section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:16px; }
.section-head h2,.page-title { margin:0; color:var(--ink-2); letter-spacing:-.035em; line-height:1.08; }
.section-head h2 { font-size:clamp(26px,2.8vw,38px); }
.page-title { font-size:clamp(30px,3.3vw,44px); }
.section-head p,.lede { margin:7px 0 0; color:var(--muted); line-height:1.55; }
.eyebrow,.kicker { text-transform:uppercase; letter-spacing:.14em; color:var(--sage); font-size:11px; font-weight:900; }
.muted { color:var(--muted); }
.small { font-size:13px; }
.actions,.hero-actions,.pill-row,.checkbox-row { display:flex; flex-wrap:wrap; gap:10px; }
.actions,.hero-actions { margin-top:20px; }

.flash { width:min(900px,calc(100% - 32px)); margin:14px auto; padding:14px 17px; border:1px solid transparent; border-radius:14px; font-weight:680; }
.flash-success,.flash.success { background:#E6F3E9; color:#28543E; border-color:#CBE3D1; }
.flash-warning,.flash.warning { background:#FFF3D8; color:#72550D; border-color:#F1DCA4; }
.flash-danger,.flash.error,.flash-danger { background:#F9E4E1; color:#7C2727; border-color:#EDC9C4; }
.flash-info,.flash.info { background:#EAF0F8; color:#33445E; border-color:#D5DEEB; }

/* ---------- Public / consumer ---------- */
.hero { min-height:560px; display:grid; grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr); gap:42px; align-items:center; padding:48px 0 42px; }
.hero h1 { max-width:720px; margin:12px 0 18px; color:var(--ink-2); font-size:clamp(48px,6vw,78px); line-height:.985; letter-spacing:-.055em; }
.hero p { max-width:660px; margin-bottom:0; color:#5B6477; font-size:19px; line-height:1.62; }
.hero-art { min-height:440px; position:relative; display:flex; align-items:flex-end; overflow:hidden; padding:26px; border:1px solid rgba(38,50,74,.07); border-radius:38px; background:radial-gradient(circle at 70% 24%,rgba(201,111,74,.22) 0 12%,transparent 32%),radial-gradient(circle at 22% 74%,rgba(110,139,116,.30) 0 15%,transparent 38%),linear-gradient(145deg,#F1E9DC 0,#DDE8E0 60%,#EEE2D8 100%); box-shadow:var(--shadow); }
.hero-art:before,.hero-art:after { content:""; position:absolute; border-radius:50%; border:1px solid rgba(38,50,74,.10); }
.hero-art:before { width:280px; height:280px; right:50px; top:44px; box-shadow:0 0 0 38px rgba(255,255,255,.15),0 0 0 76px rgba(255,255,255,.10); }
.hero-art:after { width:110px; height:110px; right:135px; top:130px; background:rgba(255,255,255,.16); }
.hero-card { position:relative; z-index:1; width:100%; padding:22px; border:1px solid rgba(255,255,255,.72); border-radius:24px; background:rgba(255,255,255,.84); backdrop-filter:blur(12px); box-shadow:0 20px 48px rgba(24,32,51,.10); }
.hero-card strong { display:block; margin-top:4px; color:var(--ink-2); font-size:20px; }
.hero-card .chip { background:rgba(255,255,255,.9); }

.quick-grid { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:12px; }
.quick { min-height:116px; padding:14px 10px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; border:1px solid var(--line); border-radius:22px; background:#fff; color:var(--ink); text-align:center; font-size:13px; font-weight:780; box-shadow:var(--shadow-sm); transition:.16s ease; }
.quick:hover { transform:translateY(-2px); border-color:#CBC5BA; box-shadow:0 12px 28px rgba(24,32,51,.08); }
.quick span { font-size:28px; font-weight:500; }

.search-shell { padding:10px; display:grid; grid-template-columns:1fr auto; gap:10px; border:1px solid var(--line); border-radius:20px; background:#fff; box-shadow:var(--shadow-sm); }
.search-shell input { min-width:0; padding:8px 11px; border:0; outline:0; background:transparent; color:var(--ink-2); font-size:18px; }
.filter-grid { display:grid; grid-template-columns:2fr repeat(5,minmax(0,1fr)); gap:10px; }
.field { margin-bottom:16px; display:flex; flex-direction:column; gap:7px; }
.field label { color:#545D6F; font-size:12px; font-weight:820; }
.field input,.field textarea,.field select { width:100%; min-height:44px; padding:11px 12px; border:1px solid #DCD8D1; border-radius:13px; outline:none; background:#fff; color:var(--charcoal); }
.field textarea { min-height:118px; resize:vertical; }
.field input:focus,.field textarea:focus,.field select:focus { border-color:var(--ink); box-shadow:0 0 0 3px rgba(38,50,74,.08); }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.form-grid .wide { grid-column:1/-1; }
.chip { min-height:36px; padding:8px 11px; border:1px solid #D9D5CD; border-radius:999px; background:#fff; display:inline-flex; align-items:center; gap:6px; color:#50586A; font-size:12px; font-weight:740; }
.chip input { accent-color:var(--ink); }

.cards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.card { overflow:hidden; border:1px solid var(--line); border-radius:22px; background:#fff; box-shadow:var(--shadow-sm); transition:transform .16s ease,box-shadow .16s ease; }
.card:hover { transform:translateY(-2px); box-shadow:0 14px 34px rgba(24,32,51,.08); }
.card-media { height:190px; position:relative; overflow:hidden; background:linear-gradient(135deg,#D7E4DA,#EEE2CF); }
.card-media img { width:100%; height:100%; object-fit:cover; }
.card-tag { position:absolute; left:12px; top:12px; padding:6px 9px; border-radius:10px; background:rgba(255,255,255,.92); color:var(--ink); font-size:10px; font-weight:850; letter-spacing:.07em; text-transform:uppercase; }
.card-body { padding:16px; }
.card-title { margin-bottom:7px; color:var(--ink-2); font-size:17px; font-weight:850; line-height:1.28; }
.card-meta { display:flex; flex-wrap:wrap; gap:6px; color:var(--muted); font-size:12px; }
.card-footer { margin-top:13px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.price { color:var(--ink); font-weight:850; }
.trust { color:var(--sage); display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:850; }

.panel { padding:21px; border:1px solid var(--line); border-radius:21px; background:#fff; box-shadow:var(--shadow-sm); }
.panel h2,.panel h3 { color:var(--ink-2); }
.stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; }
.stat { min-height:116px; padding:18px; border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:0 4px 14px rgba(24,32,51,.025); }
.stat span { color:var(--muted); font-size:12px; font-weight:700; }
.stat strong { display:block; margin-top:7px; color:var(--ink-2); font-size:29px; line-height:1; letter-spacing:-.03em; }
.list { display:flex; flex-direction:column; gap:10px; }
.list-row { padding:12px; display:grid; grid-template-columns:52px minmax(0,1fr) auto; gap:13px; align-items:center; border:1px solid var(--line); border-radius:16px; background:#fff; }
.list-icon { width:48px; height:48px; overflow:hidden; border-radius:14px; background:linear-gradient(135deg,#DCE8DF,#EEE1CF); color:var(--ink); display:grid; place-items:center; font-size:19px; }
.list-icon img { width:100%; height:100%; object-fit:cover; }
.split { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:22px; }
.two-col { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.three-col { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }

.profile-hero { overflow:hidden; border:1px solid var(--line); border-radius:28px; background:#fff; box-shadow:var(--shadow-sm); }
.profile-cover { height:230px; background:linear-gradient(135deg,#CFDED4,#EBDCC6); }
.profile-cover img { width:100%; height:100%; object-fit:cover; }
.profile-main { padding:0 24px 24px; display:flex; align-items:flex-start; gap:18px; }
.profile-avatar { width:112px; height:112px; margin-top:-54px; flex:0 0 auto; overflow:hidden; border:5px solid #fff; border-radius:30px; background:var(--sand); color:var(--ink); display:grid; place-items:center; font-size:34px; font-weight:900; }
.profile-avatar img { width:100%; height:100%; object-fit:cover; }
.profile-info { flex:1; min-width:0; padding-top:16px; }
.profile-info h1 { margin:0; color:var(--ink-2); }
.tabs,.subnav { display:flex; gap:7px; overflow-x:auto; scrollbar-width:none; }
.tabs { padding:10px 0; }
.subnav { position:sticky; top:var(--header-h); z-index:35; padding:10px max(18px,calc((100vw - var(--content))/2)); border-bottom:1px solid var(--line); background:rgba(247,244,238,.96); backdrop-filter:blur(12px); }
.tabs a,.subnav a { padding:8px 12px; white-space:nowrap; border:1px solid var(--line); border-radius:999px; background:#fff; color:#5B6473; font-size:12px; font-weight:740; }
.tabs a:hover,.subnav a:hover { color:var(--ink); border-color:#C7C1B7; }

.auth-shell { min-height:calc(100vh - var(--header-h)); padding:30px 16px; display:grid; place-items:center; background:radial-gradient(circle at 18% 20%,rgba(110,139,116,.14),transparent 30%),radial-gradient(circle at 86% 78%,rgba(201,111,74,.12),transparent 32%); }
.auth-card { width:min(520px,100%); padding:30px; border:1px solid var(--line); border-radius:28px; background:rgba(255,255,255,.96); box-shadow:var(--shadow); }
.auth-card h1 { margin-bottom:10px; color:var(--ink-2); font-size:34px; letter-spacing:-.035em; }
.or { margin:18px 0; display:flex; align-items:center; gap:12px; color:#969AA4; font-size:12px; }
.or:before,.or:after { content:""; height:1px; flex:1; background:#E4E1DB; }
.empty { padding:36px 20px; border:1px dashed #D4CFC6; border-radius:20px; background:rgba(255,255,255,.70); color:var(--muted); text-align:center; }
.message-bubble { max-width:75%; margin:8px 0; padding:10px 13px; border:1px solid var(--line); border-radius:17px; background:#fff; }
.message-bubble.mine { margin-left:auto; border-color:var(--ink); background:var(--ink); color:#fff; }
.pay-box { max-width:520px; margin:40px auto; padding:28px; border:1px solid var(--line); border-radius:26px; background:#fff; text-align:center; box-shadow:var(--shadow-sm); }
.danger-zone { border-color:#EBC4C4; background:#FFFAFA; }
.progress-ring { width:64px; height:64px; border-radius:50%; background:conic-gradient(var(--sage) 0 70%,#E8E6DF 70%); display:grid; place-items:center; }
.progress-ring:after { content:""; width:48px; height:48px; border-radius:50%; background:#fff; }

.site-footer { width:min(var(--content),calc(100% - 36px)); margin:0 auto 88px; padding:28px 0; display:flex; justify-content:space-between; gap:20px; border-top:1px solid #DDD8D0; color:var(--muted); font-size:13px; }
.site-footer strong { display:block; color:var(--ink); letter-spacing:.14em; }
.footer-links { display:flex; flex-wrap:wrap; gap:16px; }
.bottom-nav { display:none; }

/* ---------- Admin console ---------- */
.admin-topbar { position:sticky; top:0; z-index:80; height:var(--admin-top); border-bottom:1px solid #E8E5DF; background:rgba(255,255,255,.97); backdrop-filter:blur(16px); }
.admin-topbar-inner { height:100%; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:0 20px; }
.admin-brand { display:flex; align-items:center; gap:10px; color:var(--ink-2); }
.brand-mark-admin { width:36px; height:36px; border-radius:12px; }
.admin-brand>span:last-child { display:flex; flex-direction:column; line-height:1.06; }
.admin-brand strong { font-size:14px; letter-spacing:.15em; }
.admin-brand small { margin-top:4px; color:var(--muted); font-size:10px; font-weight:750; letter-spacing:.04em; }
.admin-topbar-actions { display:flex; align-items:center; gap:9px; }
.admin-view-app { min-height:38px; padding:0 12px; display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:12px; background:#fff; color:#596174; font-size:12px; font-weight:760; }
.admin-avatar { width:38px; height:38px; border-radius:12px; background:var(--ink); color:#fff; display:grid; place-items:center; font-weight:850; }
.admin-menu-btn { display:none; width:38px; height:38px; border:1px solid var(--line); border-radius:12px; background:#fff; color:var(--ink); font-size:18px; }
.admin-layout { min-height:calc(100vh - var(--admin-top)); display:grid; grid-template-columns:var(--admin-side) minmax(0,1fr); background:#F6F5F2; }
.admin-nav { position:sticky; top:var(--admin-top); height:calc(100vh - var(--admin-top)); overflow-y:auto; padding:16px 12px 28px; border-right:1px solid rgba(255,255,255,.06); background:var(--ink-2); color:#D9DEEA; scrollbar-width:thin; }
.admin-nav-section { margin-bottom:18px; }
.admin-nav-label { padding:8px 11px 7px; color:#828BA0; font-size:9px; font-weight:900; letter-spacing:.15em; text-transform:uppercase; }
.admin-nav a { min-height:39px; padding:8px 10px; display:flex; align-items:center; gap:9px; border-radius:11px; color:#CBD2DF; font-size:12px; font-weight:690; transition:.15s ease; }
.admin-nav a>span { width:22px; height:22px; flex:0 0 auto; display:grid; place-items:center; border-radius:7px; color:#9DA8BC; font-size:13px; }
.admin-nav a:hover { color:#fff; background:rgba(255,255,255,.075); }
.admin-nav a.active { color:#fff; background:rgba(255,255,255,.12); box-shadow:inset 3px 0 0 var(--sand); }
.admin-nav a.active>span { color:var(--sand); }
.admin-main { min-width:0; padding:30px clamp(18px,3vw,42px) 70px; }
.admin-main>.section-head:first-of-type { margin-bottom:22px; }
.admin-main .page-title { font-size:clamp(30px,3vw,42px); }
.admin-main>.stats:first-of-type .stat { position:relative; overflow:hidden; }
.admin-main>.stats:first-of-type .stat:after { content:""; position:absolute; width:74px; height:74px; right:-28px; bottom:-30px; border-radius:50%; background:rgba(110,139,116,.10); }
.admin-main>.stats:first-of-type .stat:nth-child(2):after { background:rgba(201,111,74,.11); }
.admin-main>.stats:first-of-type .stat:nth-child(3):after { background:rgba(38,50,74,.08); }
.admin-main>.stats:first-of-type .stat:nth-child(4):after { background:rgba(217,199,163,.24); }
.table-wrap { max-width:100%; overflow:auto; border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:0 3px 12px rgba(24,32,51,.025); }
.data-table { width:100%; border-collapse:separate; border-spacing:0; font-size:12px; }
.data-table th,.data-table td { padding:12px 13px; border-bottom:1px solid #EEEAE3; text-align:left; vertical-align:middle; white-space:nowrap; }
.data-table th { position:sticky; top:0; z-index:2; background:#FAF9F6; color:#6A7180; font-size:9px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.data-table tr:last-child td { border-bottom:0; }
.data-table tr:hover td { background:#FCFBF8; }
.status { padding:5px 8px; display:inline-flex; align-items:center; border-radius:999px; background:#EEF0F4; color:#555E6D; font-size:10px; font-weight:850; text-transform:capitalize; }
.status-published,.status-active,.status-approved,.status-confirmed,.status-paid { background:#E3F1E7; color:#24583D; }
.status-submitted,.status-pending,.status-reserved,.status-requested { background:#FFF0CD; color:#75560C; }
.status-rejected,.status-suspended,.status-failed,.status-cancelled { background:#F8DDDD; color:#842C2C; }

/* ---------- Responsive ---------- */
@media (max-width:1120px) {
  .desktop-nav { gap:2px; }
  .desktop-nav a { padding-inline:10px; }
  .header-search span:last-child { display:none; }
  .cards { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .quick-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .filter-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media (max-width:900px) {
  :root { --header-h:68px; --admin-top:62px; }
  .site-header-inner { width:calc(100% - 28px); gap:12px; }
  .desktop-nav,.desktop-auth,.header-search { display:none; }
  .mobile-menu-btn { display:grid; }
  .mobile-menu[hidden] { display:none !important; }
  .mobile-menu { position:absolute; left:12px; right:12px; top:calc(var(--header-h) - 2px); padding:10px; border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:var(--shadow); display:grid; gap:4px; }
  .mobile-menu a { padding:12px 13px; border-radius:11px; color:#4F586A; font-size:14px; font-weight:760; }
  .mobile-menu a:hover { background:#F6F3ED; }
  .mobile-menu .mobile-join { background:var(--ink); color:#fff; }
  .hero { grid-template-columns:1fr; min-height:auto; gap:24px; padding:32px 0; }
  .hero h1 { font-size:clamp(48px,8vw,68px); }
  .hero-art { min-height:320px; }
  .cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .split { grid-template-columns:1fr; }
  .stats { grid-template-columns:repeat(2,minmax(0,1fr)); }

  .admin-topbar-inner { padding:0 14px; }
  .admin-menu-btn { display:grid; place-items:center; }
  .admin-view-app { display:none; }
  .admin-layout { grid-template-columns:1fr; }
  .admin-nav { position:fixed; z-index:90; left:0; top:var(--admin-top); bottom:0; width:min(84vw,290px); height:auto; transform:translateX(-102%); transition:transform .2s ease; box-shadow:20px 0 50px rgba(0,0,0,.20); }
  .admin-nav.open { transform:translateX(0); }
  .admin-main { padding:24px 16px 60px; }
}

@media (max-width:700px) {
  body { padding-bottom:76px; }
  .container,.narrow { width:calc(100% - 24px); padding-top:16px; padding-bottom:28px; }
  .brand-word { font-size:14px; }
  .brand-mark { width:35px; height:35px; border-radius:12px; }
  .site-header-inner { width:calc(100% - 24px); }
  .icon-link,.avatar-link,.mobile-menu-btn { width:38px; height:38px; border-radius:12px; }
  .hero { padding:22px 0 12px; }
  .hero h1 { font-size:clamp(43px,13vw,58px); }
  .hero p { font-size:16px; line-height:1.55; }
  .hero-actions .btn { flex:1 1 150px; }
  .hero-art { min-height:270px; border-radius:26px; padding:17px; }
  .hero-art:before { width:180px; height:180px; right:30px; top:30px; box-shadow:0 0 0 26px rgba(255,255,255,.15),0 0 0 52px rgba(255,255,255,.10); }
  .hero-art:after { width:70px; height:70px; right:85px; top:85px; }
  .hero-card { padding:17px; border-radius:19px; }
  .quick-grid { display:flex; overflow-x:auto; gap:10px; margin-right:-12px; padding-bottom:4px; scroll-snap-type:x proximity; }
  .quick { min-width:104px; min-height:101px; scroll-snap-align:start; }
  .cards { display:flex; overflow-x:auto; gap:12px; margin-right:-12px; padding-bottom:5px; scroll-snap-type:x proximity; }
  .card { min-width:78vw; max-width:330px; scroll-snap-align:start; }
  .card-media { height:174px; }
  .section { margin:24px 0; }
  .section-head { align-items:flex-start; }
  .section-head h2,.page-title { font-size:28px; }
  .filter-grid { grid-template-columns:1fr 1fr; }
  .filter-grid .search-long { grid-column:1/-1; }
  .form-grid,.two-col,.three-col { grid-template-columns:1fr; }
  .form-grid .wide { grid-column:auto; }
  .profile-cover { height:160px; }
  .profile-main { padding:0 16px 18px; gap:11px; }
  .profile-avatar { width:84px; height:84px; margin-top:-40px; border-radius:24px; }
  .profile-info { padding-top:12px; }
  .profile-info h1 { font-size:24px; }
  .subnav { top:var(--header-h); padding:8px 12px; }
  .site-footer { display:none; }
  .bottom-nav { position:fixed; z-index:70; left:0; right:0; bottom:0; min-height:70px; padding:6px 6px max(7px,env(safe-area-inset-bottom)); border-top:1px solid #E2DED6; background:rgba(255,255,255,.97); backdrop-filter:blur(17px); display:grid; grid-template-columns:repeat(5,1fr); align-items:end; }
  .bottom-nav a { min-width:0; display:flex; flex-direction:column; align-items:center; gap:3px; color:#858A94; font-size:9px; font-weight:780; }
  .bottom-nav a>span { font-size:20px; line-height:1; }
  .bottom-nav a.active { color:var(--ink); }
  .bottom-nav .practice-fab>span { width:46px; height:46px; margin-top:-23px; border:4px solid #fff; border-radius:17px; background:var(--ink); color:#fff; display:grid; place-items:center; box-shadow:0 8px 24px rgba(38,50,74,.22); }
  .auth-shell { padding:16px 12px; }
  .auth-card { padding:22px 18px; border-radius:22px; }
  .auth-card h1 { font-size:30px; }
  .list-row { grid-template-columns:46px minmax(0,1fr); }
  .list-row>.list-action,.list-row>span:last-child { grid-column:2; justify-self:start; }
  .admin-main>.stats { gap:9px; }
  .admin-main .stat { min-height:103px; padding:15px; }
  .admin-main .stat strong { font-size:25px; }
  .admin-main .section-head { flex-direction:column; align-items:stretch; }
  .table-wrap { border-radius:14px; }
}

@media (max-width:440px) {
  .filter-grid { grid-template-columns:1fr; }
  .filter-grid .search-long { grid-column:auto; }
  .stats { gap:8px; }
  .stat { padding:14px; }
  .hero h1 { font-size:43px; }
  .search-shell input { font-size:16px; }
  .admin-brand small { display:none; }
}

@media (prefers-reduced-motion:reduce) {
  *,*:before,*:after { scroll-behavior:auto !important; animation:none !important; transition:none !important; }
}