:root{
  --teal:#0B5F6D; --teal-dark:#07343c; --teal-mid:#0e7485; --teal-soft:#e7f3f5;
  --ink:#152126; --muted:#5d6b70; --line:#e4ddd3; --sand:#f4efe6;
  --card:#fff; --danger:#b42318; --ok:#176f45; --warn:#b54708;
  --shadow:0 12px 36px rgba(21,33,38,.07);
  --side:260px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:"DM Sans",system-ui,sans-serif;color:var(--ink);background:var(--sand)}
.hidden{display:none!important}
.mobile-only{}
.desktop-only{display:none!important}

.boot{min-height:100vh;display:grid;place-content:center;justify-items:center;gap:12px;background:linear-gradient(160deg,#e7f3f5,#f6f1e8 55%,#efe6d6)}
.boot-logo,.auth-logo{height:72px;width:auto}
.boot p{color:var(--muted);margin:0}
.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:24px;background:
  radial-gradient(900px 420px at 50% -10%,rgba(11,95,109,.18),transparent 60%),
  linear-gradient(180deg,#eef6f7,#f6f1e8)}
.auth-card{width:min(420px,100%);background:#fff;border:1px solid var(--line);border-radius:22px;padding:28px 24px;box-shadow:var(--shadow)}
.auth-card h1{font-family:Fraunces,Georgia,serif;margin:8px 0 4px;font-size:1.55rem}
.lede{color:var(--muted);margin:0 0 18px;font-size:.92rem;line-height:1.45}
.hint{font-weight:400;color:var(--muted)}
label{display:block;font-size:.75rem;color:var(--muted);font-weight:650;margin:0 0 4px}
input,select,textarea{width:100%;padding:11px 12px;border-radius:11px;border:1px solid var(--line);font:inherit;background:#fff;margin:0 0 12px}
input:focus,select:focus,textarea:focus{outline:2px solid #b7d5da;border-color:var(--teal)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;background:var(--teal);color:#fff;border:0;border-radius:12px;padding:12px 16px;font:inherit;font-weight:600;cursor:pointer;margin:0 0 8px}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn.ghost{background:#fff;color:var(--teal);border:1px solid #bdd3d7}
.btn.secondary{background:var(--teal-soft);color:var(--teal-dark);border:0}
.btn.danger{background:var(--danger)}
.btn.small{width:auto;padding:8px 12px;font-size:.85rem;margin:0}
.btn.inline{width:auto;display:inline-flex}
.err{color:var(--danger);font-size:.88rem;min-height:1.2em}
.ok{color:var(--ok)}
.muted{color:var(--muted)}

.app{min-height:100vh}
.sidenav{display:none}
.app-main{min-height:100vh;padding-bottom:88px}
.topbar{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;background:var(--teal-dark);color:#eef7f8}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand img{height:34px;width:auto}
.brand strong{display:block;font-family:Fraunces,Georgia,serif;font-size:1rem}
.brand span{display:block;font-size:.75rem;opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:42vw}
.top-title h1{margin:0;font-family:Fraunces,Georgia,serif;font-size:1.25rem;font-weight:700}
.top-title p{margin:2px 0 0;font-size:.8rem;opacity:.7}
.top-actions{display:flex;gap:8px;align-items:center;flex-shrink:0}
.icon-btn{position:relative;border:0;background:rgba(255,255,255,.1);color:#fff;border-radius:12px;padding:9px 12px;cursor:pointer;font:inherit;font-size:.82rem;font-weight:600}
.icon-btn:hover{background:rgba(255,255,255,.18)}
.badge{position:absolute;top:-5px;right:-5px;background:#e11;color:#fff;border-radius:999px;font-size:.65rem;min-width:18px;height:18px;display:grid;place-items:center;padding:0 4px;font-weight:700}
.badge-inline{display:inline-grid;place-items:center;background:#e11;color:#fff;border-radius:999px;font-size:.65rem;min-width:18px;height:18px;padding:0 5px;margin-left:6px}

.content{padding:16px;max-width:1100px;margin:0 auto}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:repeat(5,1fr);gap:2px;padding:8px 6px calc(8px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);border-top:1px solid var(--line);backdrop-filter:blur(10px)}
.tabbar button{border:0;background:0;color:var(--muted);font:inherit;font-size:.68rem;font-weight:600;padding:8px 4px;border-radius:12px;cursor:pointer}
.tabbar button.on{color:var(--teal);background:var(--teal-soft)}

h2.page{font-family:Fraunces,Georgia,serif;margin:0 0 4px;font-size:1.55rem}
.sub{color:var(--muted);margin:0 0 16px;font-size:.9rem}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.metric{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;box-shadow:var(--shadow)}
.metric span{display:block;color:var(--muted);font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;font-weight:650}
.metric strong{font-family:Fraunces,Georgia,serif;font-size:1.35rem;display:block;margin-top:4px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px;margin-bottom:12px;box-shadow:var(--shadow)}
.panel h3{margin:0 0 10px;font-size:1rem;font-family:Fraunces,Georgia,serif}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.panel-head h3{margin:0}

/* Home layout */
.home-layout{display:grid;gap:16px}
.announce-row{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;margin-bottom:4px;scrollbar-width:thin}
.announce-chip{flex:0 0 min(260px,78vw);background:linear-gradient(135deg,var(--teal),var(--teal-dark));color:#fff;border-radius:18px;padding:14px 16px;min-height:86px}
.announce-chip .kicker{font-size:.65rem;letter-spacing:.12em;font-weight:700;opacity:.75;margin-bottom:6px}
.announce-chip strong{display:block;font-size:.95rem;line-height:1.3}

.ops-banner{display:flex;justify-content:space-between;align-items:center;gap:12px;background:#fff7ed;border:1px solid #f5d0a8;border-radius:16px;padding:14px 16px;margin-bottom:4px}
.ops-banner strong{font-family:Fraunces,Georgia,serif;display:block}
.ops-banner p{margin:2px 0 0;color:var(--muted);font-size:.85rem}

.feed-stack{display:flex;flex-direction:column;gap:14px}
.feed-card{background:var(--card);border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:var(--shadow)}
.feed-media{position:relative;background:linear-gradient(145deg,#d7e8eb,#c5d4c8);aspect-ratio:4/3;overflow:hidden}
.feed-media.live-ratio{aspect-ratio:16/9;background:linear-gradient(145deg,#1a2a2e,#0B5F6D)}
.feed-media img{width:100%;height:100%;object-fit:cover;display:block}
.feed-media .ph{position:absolute;inset:0;display:grid;place-items:center;color:rgba(255,255,255,.85);font-family:Fraunces,Georgia,serif;font-size:1.1rem;text-align:center;padding:20px}
.feed-body{padding:16px 18px 18px}
.feed-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;color:var(--muted);font-size:.78rem;margin-bottom:8px}
.feed-card h3{margin:0 0 8px;font-family:Fraunces,Georgia,serif;font-size:1.2rem;line-height:1.25}
.feed-text{white-space:pre-wrap;line-height:1.55;font-size:.95rem;color:#2a3539}
.feed-text.clamp{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.feed-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.linkish{background:0;border:0;color:var(--teal);font:inherit;font-weight:650;cursor:pointer;padding:0;margin-top:6px}

.chip{display:inline-flex;align-items:center;gap:6px;background:var(--teal-soft);color:var(--teal-dark);border-radius:999px;padding:4px 10px;font-size:.72rem;font-weight:700}
.chip.live{background:#fee2e2;color:#991b1b}
.chip.order{background:#fff7ed;color:#9a3412}
.chip.bv{background:#ecfdf3;color:#166534}
.chip.warn{background:#fef3c7;color:#92400e}

.side-rail{display:flex;flex-direction:column;gap:12px}
.notif-list{display:flex;flex-direction:column;gap:0;max-height:420px;overflow:auto}
.notif-item{padding:12px 0;border-bottom:1px solid var(--line);cursor:pointer}
.notif-item:last-child{border-bottom:0}
.notif-item.unread{background:linear-gradient(90deg,rgba(11,95,109,.06),transparent);margin:0 -8px;padding-left:8px;padding-right:8px;border-radius:10px}
.notif-item .meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:4px;font-size:.75rem;color:var(--muted)}
.notif-item strong{display:block;font-size:.9rem;margin-bottom:2px}
.notif-item .body{font-size:.85rem;color:#3a474c;line-height:1.4}

.product{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.product:last-child{border-bottom:0}
.product .info{flex:1;min-width:0}
.product strong{display:block}
.product .sku{color:var(--muted);font-size:.78rem}
.product .price{font-family:Fraunces,Georgia,serif;font-weight:700;color:var(--teal)}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.list-btn{display:block;width:100%;text-align:left;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px;margin:0 0 8px;cursor:pointer;font:inherit}
.list-btn:hover{border-color:#bdd3d7}
.list-btn strong{display:block;margin-bottom:2px}
.cart-bar{position:sticky;bottom:78px;z-index:15;display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--teal-dark);color:#fff;border-radius:16px;padding:12px 14px;margin-top:12px;box-shadow:var(--shadow)}
.video-wrap{background:#000;border-radius:16px;overflow:hidden;aspect-ratio:16/9;margin-bottom:12px}
.video-wrap video{width:100%;height:100%;display:block;object-fit:contain;background:#000}
.comments{max-height:220px;overflow:auto;font-size:.88rem;margin:8px 0}
.comments div{margin:6px 0}
.comments strong{color:var(--teal)}
.modal{position:fixed;inset:0;z-index:80;background:rgba(7,52,60,.45);display:grid;place-items:center;padding:16px}
.modal-card{width:min(640px,100%);max-height:92vh;overflow:auto;background:#fff;border-radius:18px;padding:20px;border:1px solid var(--line)}
.empty{text-align:center;padding:36px 16px;color:var(--muted)}
.empty strong{display:block;color:var(--ink);margin-bottom:4px;font-family:Fraunces,Georgia,serif;font-size:1.15rem}

.bv-hero{background:linear-gradient(135deg,#0B5F6D,#07343c);color:#fff;border-radius:20px;padding:20px;margin-bottom:14px;box-shadow:var(--shadow)}
.bv-hero h3{margin:0 0 6px;font-family:Fraunces,Georgia,serif;font-size:1.35rem}
.bv-hero p{margin:0 0 14px;opacity:.85;font-size:.9rem;line-height:1.45}
.bv-row{display:grid;grid-template-columns:1.2fr 1fr .7fr auto;gap:8px;align-items:end;margin-bottom:8px}
.bv-row label{margin:0}
.bv-row input{margin:0}
.order-row{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.order-row:last-child{border-bottom:0}
.order-row .left{min-width:0;flex:1}
.order-row strong{display:block}
.order-row .meta{font-size:.8rem;color:var(--muted);margin-top:2px}

@media(min-width:900px){
  .mobile-only{display:none!important}
  .desktop-only{display:block!important}
  .app{display:grid;grid-template-columns:var(--side) 1fr;min-height:100vh}
  .sidenav{
    display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
    background:linear-gradient(180deg,var(--teal-dark),#05252b);color:#e8f4f6;padding:20px 14px;
  }
  .side-brand{display:flex;gap:10px;align-items:center;padding:4px 8px 20px;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:14px}
  .side-brand img{height:36px}
  .side-brand strong{display:block;font-family:Fraunces,Georgia,serif}
  .side-brand span{display:block;font-size:.75rem;opacity:.65;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .side-tabs{display:flex;flex-direction:column;gap:4px;flex:1}
  .side-tabs button{
    display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:transparent;
    color:rgba(255,255,255,.72);font:inherit;font-weight:600;padding:12px 12px;border-radius:12px;cursor:pointer;
  }
  .side-tabs button .ico{width:1.2em;opacity:.8}
  .side-tabs button.on,.side-tabs button:hover{background:rgba(255,255,255,.1);color:#fff}
  .side-foot{border-top:1px solid rgba(255,255,255,.1);padding-top:12px;display:flex;flex-direction:column;gap:2px}
  .side-link{border:0;background:0;color:rgba(255,255,255,.7);text-align:left;padding:10px 12px;border-radius:10px;font:inherit;font-size:.88rem;cursor:pointer}
  .side-link:hover{background:rgba(255,255,255,.08);color:#fff}
  .side-link.danger{color:#fca5a5}
  .app-main{padding-bottom:0;min-width:0}
  .topbar{padding:16px 28px;background:rgba(244,239,230,.92);color:var(--ink);border-bottom:1px solid var(--line);backdrop-filter:blur(10px)}
  .top-title h1{color:var(--ink)}
  .top-title p{opacity:.65;color:var(--muted)}
  .icon-btn{background:#fff;color:var(--teal-dark);border:1px solid var(--line)}
  .icon-btn:hover{background:var(--teal-soft)}
  .content{padding:28px 32px 40px;max-width:1200px}
  .home-layout{grid-template-columns:minmax(0,1.55fr) minmax(280px,.75fr);align-items:start}
  .feed-media{aspect-ratio:16/10}
  .grid{grid-template-columns:repeat(4,1fr)}
  .bv-row{grid-template-columns:1.3fr 1fr .8fr auto}
  .cart-bar{bottom:16px}
  .modal-card{width:min(720px,100%)}
}

@media(max-width:899px){
  .bv-row{grid-template-columns:1fr 1fr; }
  .bv-row .pts{grid-column:1 / -1}
  .bv-row .rm{grid-column:1 / -1}
}