:root {
  --bg: #080a12;
  --bg-soft: #101426;
  --surface: rgba(20, 25, 43, 0.76);
  --surface-solid: #171d31;
  --surface-strong: #202947;
  --ink: #f4f7ff;
  --muted: #a5b0cf;
  --line: rgba(181, 199, 255, 0.14);
  --cyan: #4addff;
  --cyan-soft: rgba(74, 221, 255, 0.16);
  --violet: #a181ff;
  --violet-soft: rgba(161, 129, 255, 0.18);
  --green: #77e7b5;
  --amber: #ffcc73;
  --danger: #ff779a;
  --radius-xl: 30px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --safe-top: max(16px, env(safe-area-inset-top));
  --safe-bottom: max(18px, env(safe-area-inset-bottom));
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--bg);
}

* { box-sizing: border-box; }

html, body { min-height: 100%; margin: 0; }

body {
  min-width: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 14% -10%, rgba(61, 134, 255, 0.2), transparent 34rem),
    radial-gradient(circle at 100% 13%, rgba(149, 85, 255, 0.19), transparent 31rem),
    linear-gradient(145deg, #070911 0%, #0c1020 46%, #090b14 100%);
}

button, input, select, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.ambient { position: fixed; width: 26rem; height: 26rem; border-radius: 50%; filter: blur(65px); pointer-events: none; opacity: .24; z-index: -2; }
.ambient-a { background: #3fdcff; left: -15rem; top: 24%; animation: drift-a 13s ease-in-out infinite alternate; }
.ambient-b { background: #9c72ff; right: -14rem; top: 2%; animation: drift-b 17s ease-in-out infinite alternate; }
.noise { position: fixed; inset: 0; pointer-events: none; opacity: .10; z-index: -1; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); }

.app-shell { width: min(100%, 760px); min-height: 100dvh; margin: 0 auto; padding: var(--safe-top) 16px calc(90px + var(--safe-bottom)); }
.topbar { display: flex; justify-content: space-between; align-items: center; margin: 0 4px 22px; }
.brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
.brand-mark { position: relative; display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; color: #08101c; font-weight: 900; font-size: 18px; background: linear-gradient(145deg, #c6f8ff 0%, var(--cyan) 47%, #a6a6ff 100%); border-radius: 14px 14px 18px 14px; box-shadow: 0 0 0 1px rgba(255,255,255,.45) inset, 0 9px 24px rgba(74,221,255,.26); }
.brand-mark::after { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(7,17,31,.35); border-radius: 9px; }
.brand-name { margin: 0; letter-spacing: .055em; font-weight: 850; font-size: 15px; }
.brand-sub { margin: 3px 0 0; color: var(--muted); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.top-actions { display: flex; gap: 8px; }
.icon-button { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 14px; display: grid; place-items: center; color: var(--ink); background: rgba(255,255,255,.045); cursor: pointer; transition: transform .2s, background .2s, border-color .2s; }
.icon-button:active { transform: scale(.93); background: var(--cyan-soft); border-color: rgba(74,221,255,.45); }

.hero { position: relative; overflow: hidden; isolation: isolate; padding: 23px; border: 1px solid rgba(147, 183, 255, .24); border-radius: var(--radius-xl); background: linear-gradient(125deg, rgba(27, 37, 69, .94), rgba(15, 19, 37, .82) 57%, rgba(38, 23, 70, .83)); box-shadow: 0 25px 70px rgba(0, 0, 0, .25), 0 1px 0 rgba(255,255,255,.09) inset; }
.hero::before { content:""; position:absolute; width: 16rem; height:16rem; right:-5rem; top:-7rem; border-radius:50%; background: radial-gradient(circle, rgba(90,221,255,.32), rgba(90,221,255,0) 66%); z-index:-1; }
.hero::after { content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient(111deg, transparent 32%, rgba(255,255,255,.08), transparent 44%); transform: translateX(-120%); animation: sheen 8s 1.5s ease-in-out infinite; }
.eyebrow { display:inline-flex; align-items:center; gap:6px; padding:6px 9px; border:1px solid rgba(130,232,255,.24); border-radius:999px; color:#c3f7ff; background:rgba(61,210,255,.08); font-size:10px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.hero h1 { max-width: 82%; margin: 15px 0 8px; letter-spacing: -.045em; line-height: 1.01; font-size: clamp(30px, 8vw, 46px); }
.hero p { max-width: 82%; margin:0; color:#bdc8e6; line-height:1.48; font-size:14px; }
.hero-art { position:absolute; right: 19px; bottom: 15px; width: 81px; height: 94px; opacity:.9; }
.shield { position:absolute; inset:5px 10px 4px; clip-path: polygon(50% 0, 93% 18%, 82% 70%, 50% 100%, 18% 70%, 7% 18%); border-radius: 27px; background:linear-gradient(150deg,#d4fbff, #4bdfff 41%, #5a4df2); filter:drop-shadow(0 0 14px rgba(70,220,255,.72)); }
.shield::before { content:""; position:absolute; inset:3px; clip-path: inherit; background:linear-gradient(150deg,#162238,#09111d 76%); }
.shield::after { content:"L"; position:absolute; inset:0; display:grid; place-items:center; color:#c5fbff; font-size:34px; font-weight:900; font-style:italic; text-shadow:0 0 12px #42dcff; }

.grid { display:grid; gap:12px; margin-top:15px; }
.metrics { grid-template-columns: repeat(3, minmax(0,1fr)); }
.metric { min-width:0; padding:15px 13px; border:1px solid var(--line); border-radius:20px; background:linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.018)); box-shadow: 0 11px 30px rgba(0,0,0,.12); }
.metric-value { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin:0 0 4px; font-size:clamp(20px, 5vw, 29px); font-weight:850; letter-spacing:-.055em; }
.metric-label { margin:0; color:var(--muted); font-size:10px; line-height:1.25; }

.section { margin-top:28px; }
.section-title { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin:0 4px 12px; }
.section-title h2 { margin:0; font-size:17px; letter-spacing:-.025em; }
.section-title span { color:var(--muted); font-size:11px; text-align:right; }
.card { position:relative; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius-lg); background:linear-gradient(135deg, rgba(25,31,52,.82), rgba(13,17,30,.76)); box-shadow:0 12px 35px rgba(0,0,0,.12), 0 1px 0 rgba(255,255,255,.06) inset; }
.card-pad { padding:18px; }
.card::after { content:""; position:absolute; width:110px; height:110px; right:-57px; top:-62px; opacity:.26; border-radius:50%; background:var(--cyan); filter:blur(36px); pointer-events:none; }
.status-card { display:flex; align-items:center; gap:13px; }
.orb { display:grid; place-items:center; width:45px; height:45px; flex:0 0 45px; border-radius:16px; border:1px solid rgba(255,255,255,.14); background:linear-gradient(145deg, var(--cyan-soft), var(--violet-soft)); font-size:20px; box-shadow: 0 7px 16px rgba(0,0,0,.16); }
.status-copy { min-width:0; flex:1; }
.status-copy strong { display:block; font-size:14px; }
.status-copy span { display:block; overflow:hidden; margin-top:4px; color:var(--muted); text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.badge { display:inline-flex; align-items:center; justify-content:center; min-height:25px; padding:5px 9px; border-radius:999px; border:1px solid transparent; font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.badge-cyan { color:#b6f9ff; border-color:rgba(74,221,255,.3); background:rgba(74,221,255,.11); }
.badge-violet { color:#e1d8ff; border-color:rgba(161,129,255,.34); background:rgba(161,129,255,.13); }
.badge-green { color:#bff8d9; border-color:rgba(119,231,181,.32); background:rgba(119,231,181,.12); }
.badge-amber { color:#ffe0a4; border-color:rgba(255,204,115,.32); background:rgba(255,204,115,.12); }
.badge-muted { color:#bec7de; border-color:rgba(174,188,225,.16); background:rgba(174,188,225,.08); }

.action-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
.action { display:flex; min-height:102px; flex-direction:column; justify-content:space-between; padding:15px; color:var(--ink); border:1px solid var(--line); border-radius:20px; text-align:left; background:rgba(255,255,255,.035); cursor:pointer; transition:transform .22s ease, border-color .22s, background .22s; }
.action:hover { border-color:rgba(103,223,255,.38); background:rgba(93,186,255,.08); }
.action:active { transform:scale(.97); }
.action-icon { display:grid; place-items:center; width:34px; height:34px; border-radius:12px; background:linear-gradient(140deg, var(--cyan-soft), var(--violet-soft)); font-size:17px; }
.action strong { display:block; margin-top:14px; font-size:13px; }
.action small { display:block; margin-top:3px; color:var(--muted); font-size:10px; }

.panel { padding:18px; }
.panel-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); }
.panel-row:last-child { border-bottom:0; padding-bottom:0; }
.panel-row:first-child { padding-top:0; }
.row-main { min-width:0; }
.row-main strong { display:block; font-size:13px; }
.row-main span { display:block; margin-top:3px; color:var(--muted); font-size:11px; line-height:1.35; }
.chevron { color:var(--muted); font-size:18px; }

.page-heading { margin: 6px 4px 20px; }
.page-heading h1 { margin:0; font-size:30px; letter-spacing:-.055em; }
.page-heading p { margin:7px 0 0; color:var(--muted); font-size:13px; line-height:1.45; }
.stack { display:grid; gap:12px; }
.message { padding:15px 16px; }
.message-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:9px; }
.message-head strong { max-width:55%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.message-head time { color:var(--muted); font-size:10px; }
.message-body { margin:0; overflow-wrap:anywhere; color:#e9edfa; font-size:13px; line-height:1.48; white-space:pre-wrap; }
.message-meta { display:flex; flex-wrap:wrap; gap:6px; margin-top:11px; }
.version-chip { padding:4px 7px; color:var(--muted); border-radius:8px; background:rgba(255,255,255,.055); font-size:10px; }
.deleted-chip { color:#ffb6c7; background:rgba(255,91,130,.13); }

.plans { display:grid; gap:13px; }
.plan { padding:20px; }
.plan.premium { border-color:rgba(122,223,255,.42); background:linear-gradient(130deg, rgba(30,58,94,.83), rgba(41,25,73,.85)); }
.plan-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.plan h3 { margin:0; font-size:20px; letter-spacing:-.045em; }
.plan-price { margin:6px 0 0; color:#d4f9ff; font-size:13px; }
.plan ul { display:grid; gap:7px; padding:0; margin:18px 0; list-style:none; color:#d4dcef; font-size:12px; }
.plan li::before { content:"✦"; margin-right:8px; color:var(--cyan); }
.button { display:inline-flex; min-height:44px; align-items:center; justify-content:center; gap:8px; width:100%; padding:10px 14px; border:1px solid transparent; border-radius:14px; color:#07111e; font-weight:850; font-size:13px; background:linear-gradient(120deg, #a9f5ff, #4cdfff 53%, #b99fff); cursor:pointer; box-shadow:0 10px 22px rgba(55,208,255,.18); transition:transform .2s, filter .2s; }
.button:active { transform:scale(.98); filter:brightness(.92); }
.button-secondary { color:var(--ink); border-color:var(--line); background:rgba(255,255,255,.055); box-shadow:none; }
.button-danger { color:#ffdce6; border-color:rgba(255,119,154,.27); background:rgba(255,119,154,.12); box-shadow:none; }
.button-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.button-row .button { font-size:12px; }

.toggle { position:relative; flex:0 0 auto; width:48px; height:29px; padding:0; border:0; border-radius:999px; background:#3a4058; cursor:pointer; transition:background .22s; }
.toggle::after { content:""; position:absolute; width:23px; height:23px; top:3px; left:3px; border-radius:50%; background:#dfe7fb; box-shadow:0 2px 5px rgba(0,0,0,.26); transition:transform .22s, background .22s; }
.toggle.is-on { background:linear-gradient(100deg, #37cfe8, #8a73ff); }
.toggle.is-on::after { transform:translateX(19px); background:#fff; }
.toggle:disabled { opacity:.46; cursor:not-allowed; }

.support-form { display:grid; gap:12px; }
.field { width:100%; padding:13px 14px; color:var(--ink); border:1px solid var(--line); border-radius:14px; outline:0; background:rgba(7,10,19,.36); }
.field:focus { border-color:rgba(74,221,255,.55); box-shadow:0 0 0 3px rgba(74,221,255,.1); }
textarea.field { min-height:132px; resize:vertical; }
.helper { margin:0; color:var(--muted); font-size:11px; line-height:1.45; }
.donation { background:linear-gradient(130deg, rgba(57,37,100,.85), rgba(14,54,82,.82)); }
.donation-title { margin:0 0 8px; font-size:21px; letter-spacing:-.045em; }
.donation p { margin:0; color:#d6dcf0; font-size:12px; line-height:1.5; }
.donation-amounts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-top:16px; }
.amount { min-height:43px; color:var(--ink); border:1px solid rgba(179,221,255,.2); border-radius:13px; background:rgba(255,255,255,.07); cursor:pointer; font-weight:800; font-size:12px; }
.amount:active { background:rgba(74,221,255,.19); }
.link-button { width:100%; margin-top:10px; }
.empty { padding:25px 18px; text-align:center; }
.empty-icon { font-size:29px; }
.empty h3 { margin:9px 0 5px; font-size:16px; }
.empty p { max-width:300px; margin:0 auto; color:var(--muted); font-size:12px; line-height:1.45; }
.admin-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.admin-stat { padding:16px; }
.admin-stat strong { display:block; font-size:25px; letter-spacing:-.055em; }
.admin-stat span { display:block; margin-top:3px; color:var(--muted); font-size:10px; }

/* Owner-only iPhone Control Deck */
.dev-entry { color: var(--amber); border-color: rgba(255,204,115,.28); background: rgba(255,204,115,.08); }
.dev-lock { display:grid; gap:16px; min-height:390px; align-content:center; padding:28px; text-align:center; background:radial-gradient(circle at 50% 0, rgba(154,116,255,.24), transparent 48%), linear-gradient(145deg, rgba(27,35,60,.96), rgba(14,17,30,.94)); }
.dev-lock::before { content:""; position:absolute; inset:1px; pointer-events:none; border-radius:inherit; background:linear-gradient(115deg, transparent 15%, rgba(255,255,255,.08), transparent 36%); transform:translateX(-100%); animation:sweep-lock 5.8s ease-in-out infinite; }
.dev-lock-icon { display:grid; place-items:center; width:86px; height:86px; margin:0 auto; color:#07101a; border-radius:29px; background:linear-gradient(145deg,#f8e4a0,#5fe3ff 52%,#a27cff); box-shadow:0 0 0 1px rgba(255,255,255,.42) inset,0 22px 52px rgba(81,205,255,.24); font-size:35px; font-weight:900; animation:dev-float 3.8s ease-in-out infinite; }
.dev-lock .eyebrow { justify-self:center; }
.dev-lock h2 { margin:2px 0 0; font-size:25px; letter-spacing:-.045em; }
.dev-lock p { max-width:470px; margin:0 auto; color:var(--muted); font-size:13px; line-height:1.55; }
.dev-code-form { display:grid; gap:11px; max-width:330px; width:100%; margin:2px auto 0; }
.dev-code { height:58px; text-align:center; font-size:25px; font-weight:850; letter-spacing:.34em; padding-left:calc(14px + .34em); }
.dev-hero { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:20px; border-color:rgba(101,222,255,.26); background:radial-gradient(circle at 100% 0, rgba(68,221,255,.18), transparent 42%),linear-gradient(135deg,rgba(24,37,66,.9),rgba(18,18,36,.88)); }
.dev-hero h2 { margin:11px 0 4px; font-size:30px; letter-spacing:-.055em; }
.dev-hero p { margin:0; color:var(--muted); font-size:11px; }
.dev-metrics { margin-top:12px; }
.dev-search { position:sticky; top:8px; z-index:3; height:48px; margin-bottom:12px; background:rgba(13,17,30,.9); backdrop-filter:blur(16px); }
.dev-user-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
.dev-user-card { position:relative; display:grid; grid-template-columns:48px minmax(0,1fr); grid-template-rows:auto auto; gap:0 11px; min-height:116px; padding:14px; overflow:hidden; color:var(--ink); text-align:left; border:1px solid var(--line); border-radius:21px; background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018)); box-shadow:0 12px 28px rgba(0,0,0,.13); cursor:pointer; transition:transform .22s,border-color .22s,background .22s; }
.dev-user-card::after { content:""; position:absolute; width:80px; height:80px; right:-38px; top:-38px; border-radius:50%; background:var(--violet); opacity:.16; filter:blur(23px); }
.dev-user-card:active { transform:scale(.97); }
.dev-user-card.is-banned { border-color:rgba(255,119,154,.24); }
.dev-avatar { display:grid; place-items:center; width:48px; height:48px; grid-row:1; color:#07101b; border-radius:50%; background:linear-gradient(145deg,#c3f8ff,#59dfff 48%,#ad8cff); box-shadow:0 8px 20px rgba(68,214,255,.2); font-weight:900; }
.dev-avatar.large { width:66px; height:66px; flex:0 0 66px; border-radius:50%; font-size:21px; }
.dev-user-copy { min-width:0; align-self:center; }
.dev-user-copy strong,.dev-user-copy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dev-user-copy strong { font-size:12px; }
.dev-user-copy small { margin-top:4px; color:var(--muted); font-size:10px; }
.dev-user-card > .badge { position:absolute; top:9px; right:9px; z-index:1; transform:scale(.82); transform-origin:top right; }
.dev-user-foot { grid-column:1/-1; display:flex; justify-content:space-between; margin-top:13px; padding-top:10px; color:var(--muted); border-top:1px solid var(--line); font-size:9px; }
.dev-ticket-list { padding:5px 15px; }
.dev-ticket { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 0; border-bottom:1px solid var(--line); }
.dev-ticket:last-child { border-bottom:0; }
.dev-ticket strong,.dev-ticket small { display:block; }
.dev-ticket strong { font-size:12px; }
.dev-ticket small { margin-top:4px; color:var(--muted); font-size:10px; }
.mini-action { flex:0 0 auto; min-height:34px; padding:7px 10px; color:#c8faff; border:1px solid rgba(74,221,255,.25); border-radius:11px; background:rgba(74,221,255,.1); font-weight:750; font-size:10px; }
.dev-empty-line { color:var(--muted); font-size:12px; text-align:center; }
.dev-system-actions { display:grid; gap:9px; }
.dev-sheet-layer { position:fixed; z-index:50; inset:0; display:flex; align-items:flex-end; justify-content:center; padding:16px 10px max(10px,env(safe-area-inset-bottom)); background:rgba(3,5,11,.72); backdrop-filter:blur(12px); animation:veil-in .2s ease-out both; }
.dev-sheet { position:relative; width:min(100%,650px); max-height:88dvh; overflow:auto; padding:15px 18px 20px; border:1px solid rgba(190,211,255,.22); border-radius:30px; background:linear-gradient(155deg,#202740,#101522 68%); box-shadow:0 30px 90px rgba(0,0,0,.54),0 1px 0 rgba(255,255,255,.1) inset; animation:sheet-in .42s cubic-bezier(.2,.8,.2,1) both; }
.sheet-grabber { width:42px; height:4px; margin:0 auto 16px; border-radius:5px; background:rgba(220,230,255,.26); }
.sheet-close { position:absolute; top:13px; right:15px; width:34px; height:34px; color:var(--ink); border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.05); font-size:20px; }
.sheet-profile { display:flex; align-items:center; gap:14px; }
.sheet-profile h2 { margin:0; font-size:20px; letter-spacing:-.04em; }
.sheet-profile p { margin:5px 0 0; color:var(--muted); font-size:11px; }
.sheet-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:18px 0; }
.sheet-stats span { min-width:0; padding:12px 9px; border:1px solid var(--line); border-radius:15px; background:rgba(255,255,255,.035); }
.sheet-stats strong,.sheet-stats small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sheet-stats strong { font-size:13px; }
.sheet-stats small { margin-top:3px; color:var(--muted); font-size:8px; text-transform:uppercase; }
.sheet-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.sheet-actions .button { min-width:0; font-size:11px; }

.bottom-nav { position:fixed; z-index:10; left:50%; bottom:max(10px, env(safe-area-inset-bottom)); width:min(calc(100% - 22px), 720px); display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:2px; padding:6px; transform:translateX(-50%); border:1px solid rgba(190,209,255,.18); border-radius:22px; background:rgba(13,17,30,.82); box-shadow:0 18px 50px rgba(0,0,0,.38), 0 1px 0 rgba(255,255,255,.09) inset; backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
.bottom-nav.has-staff { grid-template-columns:repeat(6,minmax(0,1fr)); }
.nav-button { display:flex; min-height:53px; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:4px 2px; color:#9fa9c6; border:0; border-radius:16px; background:transparent; cursor:pointer; font-size:10px; transition:color .2s, background .2s, transform .2s; }
.nav-button span { font-size:17px; line-height:1; }
.nav-button.is-active { color:#effdff; background:linear-gradient(145deg, rgba(72,221,255,.22), rgba(139,113,255,.17)); box-shadow:0 1px 0 rgba(255,255,255,.12) inset; }
.nav-button:active { transform:scale(.94); }
.toast-stack { position:fixed; z-index:30; right:15px; left:15px; bottom:calc(87px + env(safe-area-inset-bottom)); display:grid; gap:8px; pointer-events:none; }
.toast { display:flex; align-items:center; gap:10px; max-width:460px; margin-left:auto; padding:12px 14px; color:#f5f8ff; border:1px solid rgba(190,213,255,.18); border-radius:15px; background:rgba(21,26,44,.94); box-shadow:0 16px 40px rgba(0,0,0,.3); animation:toast-in .3s ease-out both; font-size:12px; }
.toast.error { border-color:rgba(255,119,154,.3); }

@keyframes drift-a { to { transform:translate(70px, -35px) scale(1.13); } }
@keyframes drift-b { to { transform:translate(-70px, 55px) scale(.86); } }
@keyframes sheen { 0%, 46% { transform:translateX(-130%); } 66%, 100% { transform:translateX(135%); } }
@keyframes toast-in { from { opacity:0; transform:translateY(12px) scale(.97); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes sweep-lock { 0%,35% { transform:translateX(-115%); } 65%,100% { transform:translateX(115%); } }
@keyframes dev-float { 0%,100% { transform:translateY(0) rotate(-1deg); } 50% { transform:translateY(-8px) rotate(1deg); } }
@keyframes veil-in { from { opacity:0; } to { opacity:1; } }
@keyframes sheet-in { from { opacity:0; transform:translateY(55px) scale(.97); } to { opacity:1; transform:translateY(0) scale(1); } }

@media (max-width: 390px) {
  .app-shell { padding-right:12px; padding-left:12px; }
  .hero { padding:20px; }
  .hero h1, .hero p { max-width:78%; }
  .hero-art { right:8px; opacity:.7; transform:scale(.86); transform-origin:bottom right; }
  .metrics { gap:8px; }
  .metric { padding:13px 10px; border-radius:16px; }
  .metric-label { font-size:9px; }
  .bottom-nav { width:calc(100% - 16px); }
  .nav-button { font-size:9px; }
  .dev-user-grid { grid-template-columns:1fr; }
  .sheet-actions { grid-template-columns:1fr; }
}

@media (min-width: 620px) {
  .app-shell { padding-right:24px; padding-left:24px; }
  .action-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .bottom-nav { grid-template-columns:repeat(6,minmax(0,1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}