/* ==========================================================================
   Bugzilla Work — UX layer
   Loaded after app.css. Same components, same markup; better hierarchy, rhythm,
   navigation and touch ergonomics. Dark and light.
   ========================================================================== */
:root{
  --r-sm:10px; --r-md:14px; --r-lg:20px;
  --gap:20px;
  --side:268px;
  --ring:0 0 0 3px rgba(107,78,230,.28);
  --lift:0 14px 34px -18px rgba(0,0,0,.55);
}
:root[data-theme="light"]{ --lift:0 14px 30px -18px rgba(70,50,20,.35); --ring:0 0 0 3px rgba(107,78,230,.22); }
html{scroll-behavior:smooth}
body{font-feature-settings:"cv11","ss01";letter-spacing:-.003em}
.stat-v,.tbl td.r,.tbl th.r,.rev-grid b,.flow-t b,.flow-big,.ep-big,.pkg-price,.ps-amt,.mt-v,.ht-nums b,.cap-num,.miles-nums b{font-variant-numeric:tabular-nums lining-nums}

/* ------------------------------------------------------------------ shell */
.side{width:var(--side);padding-bottom:4px}
.main{margin-left:var(--side)}
.side-head{padding:22px 20px 14px}
.side-tag{letter-spacing:.18em;font-size:9.5px;padding:4px 9px}
.menu{padding:4px 12px 14px}
.menu a{height:40px;padding:0 10px;gap:11px;border-radius:12px;font-size:13.5px;position:relative;margin-bottom:2px}
.menu a .ic{width:30px;height:30px;padding:6px;border-radius:9px;background:rgba(var(--tint),.045);transition:background .15s,color .15s,transform .15s}
.menu a:hover .ic{background:rgba(var(--tint),.09);transform:scale(1.04)}
.menu a.on{color:var(--text);font-weight:600}
.menu a.on .ic{background:var(--grad);color:#fff;box-shadow:0 8px 18px -8px rgba(107,78,230,.9)}
.menu a.on::before{content:"";position:absolute;left:-12px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--orange)}
.menu-sep{display:flex;align-items:center;gap:10px;padding:18px 10px 8px;font-size:10px;letter-spacing:.2em;color:var(--dim)}
.menu-sep::after{content:"";flex:1;height:1px;background:var(--line)}
.menu .count{height:20px;min-width:20px;font-size:10.5px}
.side-foot{padding:12px;margin:0 12px 12px;border:1px solid var(--line);border-radius:16px;background:rgba(var(--tint),.035)}
.side-foot .me{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.side-foot .me b{display:block;font-size:13px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-foot .me small{color:var(--muted)}

.top{height:68px;padding:0 32px;gap:16px}
.gsearch{max-width:560px}
.top .gsearch input{height:44px;border-radius:14px;padding-right:76px;transition:border-color .2s,box-shadow .2s,background .2s}
.top .gsearch input:focus{box-shadow:var(--ring)}
.kbd-hint{position:absolute;right:10px;top:50%;transform:translateY(-50%);font:600 10.5px 'Inter',sans-serif;color:var(--muted);border:1px solid var(--line-2);border-radius:7px;padding:3px 7px;background:rgba(var(--tint),.05);cursor:pointer}
.top-r{gap:10px}
.ib{width:40px;height:40px;border-radius:12px;display:inline-grid;place-items:center;transition:background .15s,transform .15s}
.ib:hover{background:rgba(var(--tint),.08)}
.content{padding:30px 32px 80px;max-width:1560px}

/* quick create */
.qc{position:relative}
.qc > summary{list-style:none;cursor:pointer;gap:6px}
.qc > summary::-webkit-details-marker{display:none}
.qc > summary .ic:last-child{width:14px;height:14px;opacity:.8;transition:transform .2s}
.qc[open] > summary .ic:last-child{transform:rotate(180deg)}
.qc-menu{position:absolute;right:0;top:calc(100% + 10px);width:290px;padding:8px;border-radius:18px;z-index:60;background:var(--panel);border:1px solid var(--line-2);box-shadow:0 24px 60px -16px rgba(0,0,0,.7);animation:uxPop .16s var(--ease)}
.qc-menu a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px}
.qc-menu a:hover{background:var(--orange-soft)}
.qc-menu .ic{width:34px;height:34px;padding:8px;border-radius:10px;background:var(--orange-soft);color:var(--orange)}
.qc-menu b{display:block;font-size:13.5px}
.qc-menu small{color:var(--muted)}
@keyframes uxPop{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}

/* page head */
.page-head{margin-bottom:26px;align-items:flex-end}
.page-eyebrow{display:block;font:600 11px 'Inter',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--orange);margin-bottom:8px}
.page-head h1{font-size:clamp(26px,2.8vw,36px);letter-spacing:-.025em}
.page-head .sub{margin-top:8px;font-size:14px}
.page-actions{display:flex;gap:10px;flex-wrap:wrap}

/* ------------------------------------------------------------------ cards */
.card{border-radius:var(--r-lg);padding:24px;margin-bottom:var(--gap)}
.card:not(.flush) > .card-h:first-child{padding-bottom:16px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.card.flush{padding:0}
.card.flush > .card-h{padding:20px 24px 14px;margin:0}
.card-h h2{font-size:18px;letter-spacing:-.01em}
.card-h .link,.card-h > a.link{font-size:13px;padding:6px 10px;border-radius:9px}
.card-h .link:hover{background:var(--orange-soft)}
.card-t,.card .card-t{font:600 16px 'Outfit',sans-serif;margin-bottom:6px}
a.card,.pcard,.lib-card,.stat{transition:transform .2s var(--ease),border-color .2s,box-shadow .2s}
a.card:hover,.pcard:hover,.lib-card:hover,a.stat:hover{transform:translateY(-3px);box-shadow:var(--lift)}

.stats{gap:16px;margin-bottom:var(--gap)}
.stat{border-radius:var(--r-md);padding:18px 20px}
.stat-l{font-size:10.5px;letter-spacing:.16em;font-weight:600}
.stat-v{font-size:clamp(24px,2.3vw,32px);margin-top:8px;letter-spacing:-.02em}
.stat-s{font-size:12.5px;margin-top:4px}
.stat::before{width:3px}
.grid-2{gap:var(--gap)}
.grid-2 > .card:last-child,.grid-2 > div > .card:last-child{margin-bottom:0}

/* ------------------------------------------------------------------ tables */
.tbl th{font-size:10.5px;letter-spacing:.16em;padding:14px 16px;position:sticky;top:0;z-index:2}
.tbl td{padding:15px 16px;font-size:13.5px}
.tbl tbody tr{transition:background .12s}
.tbl tbody tr[data-href]{cursor:pointer}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl td .strong,.tbl td a.strong{font-weight:600}
.card.flush > .tbl:last-child,.card.flush > .tbl-wrap{border-radius:0 0 var(--r-lg) var(--r-lg)}

/* ------------------------------------------------------------------ forms & buttons */
.field label,label.lbl{font-size:12.5px;font-weight:600;color:var(--muted);letter-spacing:.01em;margin-bottom:7px;display:block}
.field input,.field select,.field textarea,.form input[type=text],.form input[type=number],.form input[type=email],.form input[type=tel],.form input[type=date],.form input[type=url],.form input[type=password],.form select,.form textarea{
  min-height:44px;border-radius:12px;padding:10px 14px;font-size:14px;transition:border-color .15s,box-shadow .15s,background .15s}
.field textarea,.form textarea{padding:12px 14px}
.field input:focus,.field select:focus,.field textarea:focus,.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--orange);box-shadow:var(--ring)}
.field .hint,small.hint{margin-top:6px;display:block;color:var(--dim)}
.fgrid{gap:18px 20px}
.form-foot{margin-top:24px;padding-top:18px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.btn{height:42px;border-radius:12px;padding:0 18px;font-weight:600}
.btn-sm{height:34px;padding:0 13px;border-radius:10px;font-size:12.5px}
.btn:active{transform:scale(.98)}
.btn-ghost{border-color:transparent;background:transparent}
.btn-ghost:hover{background:rgba(var(--tint),.07)}
.btn-primary{box-shadow:0 12px 26px -14px rgba(107,78,230,.95)}
.pill{height:24px;padding:0 10px;font-weight:600;letter-spacing:.005em}
.progress{height:9px}
.flash{border-radius:14px;padding:13px 16px;font-weight:500}
.alert-strip{border-radius:14px}
.empty{padding:48px 20px}
.empty-ic{width:60px;height:60px;border-radius:18px;display:grid;place-items:center;margin:0 auto 14px;background:var(--orange-soft);color:var(--orange)}
.empty-ic .ic{width:26px;height:26px}
.empty h3{font:600 18px 'Outfit',sans-serif}

/* ------------------------------------------------------------------ page entrance */
@media (prefers-reduced-motion:no-preference){
  .content > .page-head,.content > .stats,.content > .card,.content > section,.content > .grid-2,.content > form,.content > div{animation:uxIn .42s var(--ease) both}
  .content > :nth-child(2){animation-delay:.04s}.content > :nth-child(3){animation-delay:.08s}.content > :nth-child(4){animation-delay:.12s}
  .content > :nth-child(5){animation-delay:.16s}.content > :nth-child(6){animation-delay:.2s}.content > :nth-child(n+7){animation-delay:.24s}
  @keyframes uxIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
}
*{scrollbar-width:thin;scrollbar-color:rgba(var(--tint),.2) transparent}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:rgba(var(--tint),.18);border-radius:10px;border:2px solid transparent;background-clip:padding-box}

/* ------------------------------------------------------------------ command palette */
.pal{position:fixed;inset:0;z-index:300;display:flex;justify-content:center;align-items:flex-start;padding-top:12vh;background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.pal[hidden]{display:none}
.pal-box{width:min(620px,94vw);border-radius:20px;background:var(--panel);border:1px solid var(--line-3);box-shadow:0 40px 100px -20px rgba(0,0,0,.8);overflow:hidden;animation:uxPop .16s var(--ease)}
.pal-in{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
.pal-in .ic{width:20px;height:20px;color:var(--muted)}
.pal-in input{flex:1;background:none;border:0;outline:none;font-size:16px;color:var(--text);min-width:0}
.pal kbd{font:600 10.5px 'Inter',sans-serif;color:var(--muted);border:1px solid var(--line-2);border-radius:6px;padding:2px 6px;background:rgba(var(--tint),.05)}
.pal-list{list-style:none;max-height:min(52vh,420px);overflow:auto;padding:8px}
.pal-list li{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;cursor:pointer}
.pal-list li.on{background:var(--orange-soft)}
.pal-list li b{font-weight:600;font-size:14px;flex:1}
.pal-list li small{color:var(--muted)}
.pal-k{font:600 10px 'Inter',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--orange);width:58px}
.pal-empty{color:var(--muted);cursor:default!important}
.pal-foot{display:flex;gap:16px;padding:10px 18px;border-top:1px solid var(--line);color:var(--dim);font-size:12px}
.pal-foot kbd{margin-right:4px}
body.pal-open{overflow:hidden}

/* ------------------------------------------------------------------ mobile tab bar */
.tabbar{display:none}
@media (max-width:1100px){
  :root{--side:260px}
  .content{padding:24px 22px 90px}
  .top{padding:0 20px}
}
@media (max-width:900px){
  .main{margin-left:0}
  .top{height:60px;padding:0 14px;gap:10px}
  .kbd-hint,.qc{display:none}
  .top .gsearch input{height:40px;padding-right:12px}
  .content{padding:18px 14px calc(96px + env(safe-area-inset-bottom))}
  .card{padding:18px;border-radius:18px}
  .card.flush > .card-h{padding:16px 18px 10px}
  .stats{gap:12px}
  .page-head{align-items:stretch;gap:14px;margin-bottom:20px}
  .page-actions{width:100%}
  .page-actions .btn{flex:1 1 auto}
  .form-foot{flex-direction:column-reverse}
  .form-foot .btn{width:100%}
  .tabbar{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:55;display:grid;grid-template-columns:repeat(5,1fr);gap:2px;padding:6px;border-radius:22px;
    background:var(--glass,rgba(20,20,20,.9));-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);border:1px solid var(--glass-line,rgba(255,255,255,.14));box-shadow:0 20px 50px -14px rgba(0,0,0,.7)}
  :root[data-theme="light"] .tabbar{background:rgba(255,255,255,.86)}
  .tabbar a,.tabbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:54px;border-radius:16px;color:var(--muted);font:600 10.5px 'Inter',sans-serif;position:relative}
  .tabbar .ic{width:22px;height:22px}
  .tabbar a.on{color:var(--text);background:var(--orange-soft)}
  .tabbar a.on .ic{color:var(--orange)}
  .tabbar a.on::after{content:"";position:absolute;top:5px;width:18px;height:3px;border-radius:3px;background:var(--orange)}
  .water{bottom:calc(92px + env(safe-area-inset-bottom))}
}
@media (min-width:901px){.tabbar{display:none!important}}
@media (max-width:560px){.stats.stats-4,.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.stat{padding:14px 15px}.stat-v{font-size:22px}}

/* ------------------------------------------------------------------ sign-in / bare pages */
body.bare .auth-box{border-radius:26px;padding:38px 34px;box-shadow:0 40px 100px -30px rgba(0,0,0,.8)}
body.bare .auth-box h1{font-size:28px;letter-spacing:-.02em}
body.bare .field input{min-height:48px}

/* ------------------------------------------------------------------ my day (daily push) */
.myday{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:20px;align-items:center;border-color:rgba(107,78,230,.4)!important;background:linear-gradient(135deg,rgba(107,78,230,.14),rgba(107,78,230,.03))!important}
@media (max-width:760px){.myday{grid-template-columns:1fr}}
.myday-done{border-color:rgba(95,211,154,.5)!important;background:linear-gradient(135deg,rgba(95,211,154,.18),rgba(95,211,154,.04))!important}
.myday-ok{border-color:rgba(124,180,255,.4)!important;background:linear-gradient(135deg,rgba(124,180,255,.14),rgba(124,180,255,.03))!important}
.md-main{display:flex;gap:16px;align-items:center;min-width:0}
.md-emoji{font-size:36px;line-height:1;flex:none;filter:drop-shadow(0 6px 10px rgba(0,0,0,.25));animation:mdBob 3s ease-in-out infinite}
@keyframes mdBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.md-text{flex:1;min-width:0}
.md-text > b{display:block;font:600 16px/1.35 'Outfit',sans-serif;margin-bottom:10px}
.md-bar{display:flex;align-items:center;gap:12px}
.md-bar .progress{height:12px;flex:1}
.md-bar > span{font-size:12.5px;color:var(--muted);white-space:nowrap}
.md-bar > span b{color:var(--text);font-size:14px}
.myday-done .progress i{background:linear-gradient(90deg,#3fbf80,#5fd39a)}
.md-rev{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.md-rev > div{padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:rgba(var(--tint),.04)}
.md-rev small{display:block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.md-rev b{font:700 21px 'Outfit',sans-serif}
.myday:not(:has(.md-rev)){grid-template-columns:1fr}

/* top-bar chip */
.day-chip{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px 0 12px;border-radius:99px;border:1px solid var(--line-2);background:rgba(var(--tint),.04);font-size:13px;position:relative;overflow:hidden;transition:transform .15s,border-color .15s}
.day-chip:hover{transform:translateY(-1px);border-color:var(--line-3)}
.day-chip b{font:700 13.5px 'Outfit',sans-serif;font-variant-numeric:tabular-nums}
.day-chip i{width:46px;height:6px;border-radius:6px;background:rgba(var(--tint),.12);overflow:hidden;display:block}
.day-chip u{display:block;height:100%;border-radius:6px;background:var(--grad);transition:width .6s var(--ease)}
.day-chip.day-done u{background:linear-gradient(90deg,#3fbf80,#5fd39a)}
.day-chip.day-done{border-color:rgba(95,211,154,.5)}
@media (max-width:900px){.day-chip{display:none}}

/* sale celebration */
.cel-canvas{position:fixed;inset:0;z-index:400;pointer-events:none}
.cel{position:fixed;left:50%;top:84px;transform:translateX(-50%);z-index:410;display:flex;align-items:center;gap:16px;padding:16px 22px 16px 18px;border-radius:22px;max-width:min(560px,92vw);
  background:var(--panel);border:2px solid var(--orange);box-shadow:0 30px 80px -20px rgba(0,0,0,.7),0 0 0 8px rgba(107,78,230,.16);animation:celIn .55s cubic-bezier(.2,1.4,.3,1) both;cursor:pointer}
.cel.hit{border-color:#5fd39a;box-shadow:0 30px 80px -20px rgba(0,0,0,.7),0 0 0 8px rgba(95,211,154,.2)}
.cel.out{animation:celOut .35s ease-in both}
.cel-e{font-size:42px;line-height:1;animation:celSpin 1.2s ease-out}
.cel b{display:block;font:700 18px 'Outfit',sans-serif}
.cel span{color:var(--muted);font-size:13.5px}
@keyframes celIn{from{opacity:0;transform:translate(-50%,-30px) scale(.8)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
@keyframes celOut{to{opacity:0;transform:translate(-50%,-20px) scale(.95)}}
@keyframes celSpin{0%{transform:scale(.3) rotate(-30deg)}60%{transform:scale(1.25) rotate(10deg)}100%{transform:scale(1) rotate(0)}}
@media (max-width:900px){.cel{top:70px}}