/* Buddy Usage Center™ (/account/usage). Mobile first (360 → 412), tablet, then a two-column desktop dashboard.
   Tokens: /theme/theme.css. Minutes only, never money. Motion: transform/opacity + a one-time ring sweep; reduced motion → none. */
:root{--u-a:var(--mj-electric);--u-b:var(--mj-violet);--u-accent:var(--mj-gold)}
html[data-companion=buddy-x]{--u-accent:var(--mj-copper)}
body[data-tone=low]{--u-a:var(--mj-gold-hi);--u-b:var(--mj-gold)}
body[data-tone=limit]{--u-a:var(--mj-lav);--u-b:var(--mj-plum)}

.u-shell{max-width:560px}
.u-main{display:flex;flex-direction:column;gap:16px;animation:mjReveal .5s var(--ease) both}
.u-main[hidden]{display:none}

/* Hero */
.u-hero{display:flex;align-items:center;gap:14px;margin-top:8px}
.u-buddy{flex:none;width:76px;border-radius:50%;background:radial-gradient(closest-side,rgba(56,189,248,.3),rgba(139,92,246,.18) 70%,transparent);box-shadow:0 0 0 1px var(--mj-line),0 10px 30px rgba(3,5,24,.4)}
.u-hero h1{margin:4px 0 0;font:400 clamp(26px,3vw + 16px,40px)/1.1 var(--mj-display);text-align:left;letter-spacing:-.01em}
.u-hero .mj-eyebrow{font-size:11px;letter-spacing:.18em}
.u-sub{margin:4px 0 0;font-size:14px;color:var(--mj-dim)}

/* Friendly 50/80% banner: informative, never alarming */
.u-banner{display:grid;gap:2px;padding:14px 16px;border-radius:var(--r-md);border:1px solid var(--mj-line-hi);background:rgba(56,189,248,.08);font-size:14px;color:var(--mj-muted)}
.u-banner[hidden]{display:none}
.u-banner b{color:#fff;font-size:15px}
.u-banner.low{border-color:rgba(230,184,92,.55);background:rgba(230,184,92,.08)}
.u-limit[hidden]{display:none}
.u-limit .mj-limit{margin:0}

/* Cards */
.u-grid{display:grid;gap:16px}
.u-col{display:grid;gap:16px;align-content:start;min-width:0}
.u-card{position:relative;padding:20px;border-radius:var(--r-lg);border:1px solid var(--mj-line);background:linear-gradient(180deg,rgba(30,34,96,.74),rgba(14,18,58,.86));box-shadow:var(--sh-1);min-width:0}
.u-card[hidden]{display:none}
.u-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.u-card-head h2{margin:0;font:500 20px/1.2 var(--mj-display);color:#fff}
.u-card-head .mj-tag{white-space:nowrap}

/* Voice gauge: a ring of minutes LEFT */
.u-gauge{position:relative;width:min(244px,68vw);aspect-ratio:1;margin:4px auto 8px}
.u-ring{position:absolute;inset:0}
.u-ring svg{display:block;overflow:visible}
.u-ring-track{fill:none;stroke:rgba(126,140,255,.16);stroke-width:16}
.u-ring-arc{fill:none;stroke:url(#uGrad);stroke-width:16;stroke-linecap:round;transition:stroke-dashoffset 1.1s var(--ease);filter:drop-shadow(0 0 10px rgba(62,139,255,.35))}
.u-stop-a{stop-color:var(--u-a)}.u-stop-b{stop-color:var(--u-b)}
.u-ring-center{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;text-align:center}
.u-ring-center b{font:400 clamp(44px,8vw + 14px,60px)/1 var(--mj-display);color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.u-ring-center span{margin-top:6px;font:600 13px/1 var(--mj-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--mj-muted)}
.u-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:8px 0 0}
.u-stats div{display:grid;gap:2px;padding:10px 8px;border-radius:var(--r-sm);background:rgba(8,11,36,.45);border:1px solid rgba(126,140,255,.14);text-align:center;min-width:0}
.u-stats dt{font-size:11px;color:var(--mj-dim);line-height:1.25}
.u-stats dd{margin:0;font:600 16px/1.2 var(--mj-ui);color:#fff;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.u-cycle{margin-top:14px}
.u-cycle-row{display:flex;justify-content:space-between;font-size:13px;color:var(--mj-dim);margin-bottom:6px}
.u-bar{height:6px;border-radius:var(--r-pill);background:rgba(126,140,255,.16);overflow:hidden}
.u-bar span{display:block;height:100%;width:100%;transform-origin:left;transform:scaleX(var(--pct,0));background:linear-gradient(90deg,var(--mj-lav),var(--mj-violet));border-radius:inherit;transition:transform .9s var(--ease)}
.u-renew{display:flex;align-items:center;gap:8px;margin:12px 0 0;font-size:15px;color:#fff}
.u-renew-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--u-accent);box-shadow:0 0 10px var(--u-accent)}
.u-text-pill{display:inline-flex;align-items:center;gap:8px;margin-top:14px;min-height:40px;padding:0 14px;border-radius:var(--r-pill);border:1px solid rgba(74,222,128,.45);background:rgba(74,222,128,.08);color:#D9FBE6;font:600 13px/1.2 var(--mj-ui);text-decoration:none}
.u-text-pill:hover{border-color:var(--mj-ok)}
.u-pill-dot{width:7px;height:7px;border-radius:50%;background:var(--mj-ok);box-shadow:0 0 8px var(--mj-ok)}

/* Courtesy */
.u-courtesy{border-color:rgba(230,184,92,.35)}
.u-courtesy-body{display:grid;gap:10px}
.u-boost{display:grid;gap:10px;padding:14px;border-radius:var(--r-md);background:rgba(230,184,92,.08);border:1px solid rgba(230,184,92,.4)}
.u-boost-line{margin:0;color:#fff;font-weight:600}
.u-boost .mj-btn{justify-self:start}
.u-muted{margin:0;color:var(--mj-muted);font-size:15px}
.u-fine{margin:0;font-size:12.5px;line-height:1.5;color:var(--mj-dim)}
.u-fine.center{text-align:center;max-width:620px;margin:4px auto 0}
.u-fine a{color:var(--mj-lav)}
.u-inline-msg{margin:8px 0 0;font-size:14px;color:var(--mj-muted)}
.u-inline-msg[hidden]{display:none}
.u-inline-msg.err{color:var(--mj-err)}
.u-inline-msg.ok{color:#A7F3D0}

/* Family */
.u-pool{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 0 10px}
.u-pool div{padding:10px 12px;border-radius:var(--r-sm);background:rgba(8,11,36,.45);border:1px solid rgba(126,140,255,.14);min-width:0}
.u-pool dt{font-size:12px;color:var(--mj-dim)}
.u-pool dd{margin:2px 0 0;font:600 17px/1.2 var(--mj-ui);color:#fff;font-variant-numeric:tabular-nums}
.u-pool .u-unalloc{border-color:rgba(56,189,248,.45);background:rgba(56,189,248,.08)}
.u-pool .u-unalloc.over{border-color:rgba(252,165,165,.6);background:rgba(252,165,165,.08)}
.u-pool .u-unalloc.over dd{color:var(--mj-err)}
.u-members{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px}
.u-member{display:grid;gap:8px;padding:14px;border-radius:var(--r-md);border:1px solid rgba(126,140,255,.2);background:rgba(8,11,36,.4)}
.u-member.has-error{border-color:rgba(252,165,165,.55)}
.u-member-top{display:flex;align-items:center;gap:10px;min-width:0}
.u-avatar{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--mj-indigo),var(--mj-plum));border:1px solid var(--mj-line-hi);font:700 15px/1 var(--mj-ui);color:var(--mj-gold-hi)}
.u-who{display:grid;min-width:0;flex:1}
.u-who b{font-size:16px;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.u-band{font-size:12px;color:var(--mj-dim)}
.u-member-left{flex:none;font:600 14px/1 var(--mj-ui);color:var(--mj-muted);font-variant-numeric:tabular-nums}
.u-mbar{position:relative;height:8px;border-radius:var(--r-pill);background:rgba(126,140,255,.16);overflow:hidden}
.u-mbar-used{position:absolute;inset:0;transform-origin:left;transform:scaleX(var(--pct,0));background:linear-gradient(90deg,var(--mj-electric),var(--mj-violet));border-radius:inherit;transition:transform .5s var(--ease)}
.u-mbar-cap{position:absolute;top:0;bottom:0;left:calc(var(--pct,1) * 100% - 2px);width:2px;background:var(--u-accent);box-shadow:0 0 6px var(--u-accent)}
.u-mbar-cap[hidden]{display:none}
.u-mline{margin:0;font-size:13px;color:var(--mj-dim)}
.u-alloc{display:grid;gap:8px;padding-top:6px;border-top:1px solid rgba(126,140,255,.14)}
.u-alloc-label{font-size:13px;font-weight:600;color:var(--mj-muted)}
.u-stepper{display:flex;align-items:center;gap:8px}
.u-step{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--mj-line-hi);background:rgba(15,20,64,.7);color:#fff;font:600 22px/1 var(--mj-ui);cursor:pointer}
.u-step:hover:not([disabled]){border-color:var(--mj-lav)}
.u-step[disabled]{opacity:.4;cursor:not-allowed}
.u-num{width:96px;min-width:0;height:44px;padding:0 10px;border-radius:var(--r-sm);border:1px solid rgba(150,160,255,.38);background:rgba(7,10,34,.75);color:#fff;font:600 17px var(--mj-ui);text-align:center;font-variant-numeric:tabular-nums}
.u-num.sm{width:84px;height:40px;font-size:15px}
.u-num[aria-invalid=true]{border-color:var(--mj-err)}
.u-num[hidden],.u-unit[hidden]{display:none}
.u-unit{font-size:13px;color:var(--mj-dim)}
.u-stepper .u-unit{margin-right:auto}
.u-range{width:100%;height:28px;accent-color:var(--mj-violet);cursor:pointer}
.u-caprow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-height:44px}
.u-cap-label{font-size:14px;color:var(--mj-muted)}
.u-merr{margin:0;font-size:13px;color:var(--mj-err)}
.u-merr[hidden]{display:none}
.u-editbar{position:sticky;bottom:calc(8px + env(safe-area-inset-bottom));z-index:2;display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin-top:12px;padding:10px;border-radius:var(--r-md);border:1px solid var(--mj-line-hi);background:rgba(14,18,58,.94);backdrop-filter:blur(10px);box-shadow:var(--sh-2)}
.u-editbar .mj-btn{flex:1 1 auto}
.u-member-note{display:grid;gap:8px}
.u-member-note p{margin:0}

/* Switches (role="switch") */
.u-switch{position:relative;flex:none;width:52px;height:32px;padding:0;border-radius:var(--r-pill);border:1px solid var(--mj-line-hi);background:rgba(8,11,36,.7);cursor:pointer;transition:background var(--t-med),border-color var(--t-med)}
.u-switch.sm{width:46px;height:28px}
.u-knob{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#B9B4E6;box-shadow:0 2px 6px rgba(0,0,0,.35);transition:transform var(--t-med) var(--ease-spring),background var(--t-med)}
.u-switch.sm .u-knob{width:20px;height:20px}
.u-switch[aria-checked=true]{background:linear-gradient(180deg,var(--mj-violet),#6D28D9);border-color:transparent}
.u-switch[aria-checked=true] .u-knob{transform:translateX(20px);background:#fff}
.u-switch.sm[aria-checked=true] .u-knob{transform:translateX(18px)}
.u-switch[disabled]{opacity:.5;cursor:not-allowed}
.u-switch::before{content:"";position:absolute;inset:-7px -2px}/* 44px touch target */
.u-pref-list{list-style:none;margin:0;padding:0;display:grid}
.u-pref{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid rgba(126,140,255,.14)}
.u-pref:last-child{border-bottom:0}
.u-pref-text{display:grid;gap:2px;min-width:0}
.u-pref-text b{font-size:15px;color:#fff}
.u-pref-text span{font-size:13px;color:var(--mj-dim);line-height:1.4}
.u-prefs .u-fine{margin-top:10px}

/* Notices */
.u-notice-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.u-notice{display:flex;align-items:flex-start;gap:10px;padding:12px;border-radius:var(--r-sm);background:rgba(8,11,36,.4);border:1px solid rgba(126,140,255,.14)}
.u-notice.unread{border-color:rgba(196,181,253,.4);background:rgba(139,92,246,.1)}
.u-ndot{flex:none;width:8px;height:8px;margin-top:7px;border-radius:50%;background:rgba(126,140,255,.35)}
.u-notice.unread .u-ndot{background:var(--mj-lav);box-shadow:0 0 8px var(--mj-lav)}
.u-notice.k-courtesy.unread .u-ndot,.u-notice.k-renewed.unread .u-ndot{background:var(--mj-gold);box-shadow:0 0 8px var(--mj-gold)}
.u-nbody{flex:1;min-width:0}
.u-nbody p{margin:0;font-size:14px;color:#fff;line-height:1.45}
.u-nbody time{font-size:12px;color:var(--mj-dim)}
.u-link-btn{flex:none;min-height:44px;margin:-10px -6px -10px 0;padding:0 10px;border:0;border-radius:var(--r-pill);background:none;color:var(--mj-lav);font:600 13px var(--mj-ui);cursor:pointer}
.u-link-btn:hover{color:#fff;background:rgba(126,140,255,.12)}
.u-link-btn[hidden]{display:none}
.u-card-head .u-link-btn{margin:-8px -8px -8px 0}
.u-empty{padding:16px;border-radius:var(--r-sm);border:1px dashed var(--mj-line-hi);color:var(--mj-muted);font-size:14px;text-align:center}

/* Plan line */
.u-plan{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 12px;text-align:center;font-size:14px;color:var(--mj-muted)}
.u-plan p{margin:0}
.u-quiet-link{display:inline-flex;align-items:center;min-height:44px;color:var(--mj-lav);font-weight:600;text-underline-offset:3px}
.u-quiet-link[hidden]{display:none}

/* Loading / launch / offline */
.u-loading{display:grid;justify-items:center;gap:10px;padding-top:24px}
.u-loading[hidden]{display:none}
.u-skel-ring{width:220px;height:220px;border-radius:50%}
.u-loading .mj-skel-line{width:70%;height:16px}
.u-loading .mj-skel-line.w60{width:50%}
.u-skel-card{width:100%;height:160px;border-radius:var(--r-lg)}
.u-skel-card.short{height:96px}
.u-state{align-items:center}
.u-state-buddy{width:180px;margin-top:20px}
.u-offline-mark{width:96px;height:96px;margin-top:40px;border-radius:50%;border:2px dashed var(--mj-line-hi);background:radial-gradient(circle,rgba(139,92,246,.2),transparent 70%)}
.u-state .as-button{align-self:stretch}

/* Desktop / tablet */
@media (min-width:760px){
  .u-shell{max-width:720px}
  .u-buddy{width:96px}
  .u-pool{grid-template-columns:repeat(4,minmax(0,1fr))}
  .u-editbar .mj-btn{flex:none}
}
@media (min-width:1024px){
  .u-shell{max-width:1120px}
  .u-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:20px;align-items:start}
  .u-col{gap:20px}
  .u-card{padding:24px}
  .u-gauge{width:260px}
  .u-voice{position:sticky;top:20px}
}
@media (max-width:370px){
  .u-stats dd{font-size:14px}
  .u-num{width:80px}
  .u-card{padding:16px}
}
@media (prefers-reduced-motion:reduce){
  .u-main{animation:none}
  .u-ring-arc,.u-bar span,.u-mbar-used,.u-knob,.u-switch{transition:none}
}
.u-card-head .mj-tag[hidden]{display:none}
.u-buddy{border-radius:var(--r-md)}
.u-editbar .u-inline-msg{flex:1 1 100%;margin:0 0 2px;font-size:13.5px}