:root {
  --bg: #08090d;
  --panel: rgba(21, 23, 31, .82);
  --panel-strong: #15171f;
  --line: rgba(255,255,255,.075);
  --text: #f7f8fb;
  --muted: #8f95a6;
  --accent: #d8ff44;
  --accent-soft: rgba(216,255,68,.12);
  --danger: #ff667d;
  --radius: 24px;
  --shadow: 0 22px 70px rgba(0,0,0,.36);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin:0; min-height:100%; background:var(--bg); color:var(--text); font-family:Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { overflow-x:hidden; }
button { font:inherit; color:inherit; }

.ambient { position:fixed; border-radius:50%; filter:blur(95px); opacity:.13; pointer-events:none; }
.ambient-a { width:320px; height:320px; background:#a8ff3e; top:-160px; right:-130px; }
.ambient-b { width:280px; height:280px; background:#6256ff; bottom:5vh; left:-180px; }

.app { position:relative; z-index:1; width:min(680px,100%); margin:0 auto; min-height:100vh; padding:calc(18px + env(safe-area-inset-top)) 16px calc(110px + env(safe-area-inset-bottom)); }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; }
.eyebrow { font-size:11px; letter-spacing:.19em; color:var(--accent); font-weight:800; }
h1 { font-size:30px; line-height:1.05; margin:5px 0 0; letter-spacing:-.04em; }
h2 { margin:0; letter-spacing:-.03em; }
.icon-btn { border:1px solid var(--line); background:rgba(255,255,255,.04); width:42px; height:42px; border-radius:50%; font-size:25px; cursor:pointer; }

.card { border:1px solid var(--line); background:linear-gradient(145deg,rgba(27,30,40,.92),rgba(17,19,26,.86)); border-radius:var(--radius); box-shadow:var(--shadow); backdrop-filter:blur(18px); }
.hero { padding:22px; overflow:hidden; position:relative; }
.hero:after { content:""; position:absolute; width:170px; height:170px; border-radius:50%; background:var(--accent); opacity:.055; right:-65px; top:-65px; }
.hero-line, .profile-title { display:flex; align-items:center; gap:14px; }
.avatar { width:52px; height:52px; border-radius:18px; display:grid; place-items:center; background:var(--accent); color:#0b0c0f; font-weight:900; font-size:21px; box-shadow:0 8px 35px rgba(216,255,68,.16); }
.avatar-large { width:64px; height:64px; border-radius:21px; font-size:26px; }
.hero-name { font-size:21px; font-weight:850; letter-spacing:-.03em; }
.role-badge { display:inline-flex; margin-top:6px; padding:5px 9px; border-radius:999px; background:var(--accent-soft); color:var(--accent); font-size:11px; font-weight:800; }
.hero-balance { margin-top:28px; display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
.label { color:var(--muted); font-size:12px; }
.balance { margin-top:3px; font-size:34px; font-weight:900; letter-spacing:-.05em; }
.balance small { font-size:15px; color:var(--accent); }
.mini-stat { display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.04); border:1px solid var(--line); padding:9px 11px; border-radius:16px; }
.mini-stat-icon { font-size:18px; }
.mini-stat-value { font-weight:850; }
.mini-stat-label { font-size:10px; color:var(--muted); }

.section-heading { display:flex; align-items:end; justify-content:space-between; margin:28px 3px 12px; }
.section-heading h2 { font-size:18px; }
.section-heading span { font-size:11px; color:var(--muted); }

.quick-grid, .metric-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.quick { text-align:left; border:1px solid var(--line); padding:17px; min-height:132px; cursor:pointer; }
.quick:active { transform:scale(.985); }
.quick-icon { font-size:25px; }
.quick-title { font-size:16px; font-weight:850; margin-top:22px; }
.quick-sub { color:var(--muted); font-size:11px; margin-top:4px; }

.profile-preview, .stats-card { padding:8px 16px; }
.row, .field { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:14px 2px; border-bottom:1px solid var(--line); }
.row:last-child, .field:last-child { border-bottom:0; }
.row span, .field span { color:var(--muted); font-size:12px; }
.row b, .field b { max-width:58%; text-align:right; font-size:13px; overflow-wrap:anywhere; }

.view { display:none; animation:fade .22s ease; }
.view.active { display:block; }
@keyframes fade { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:none; } }

.profile-card { padding:20px; }
.profile-title { padding-bottom:18px; border-bottom:1px solid var(--line); }
.profile-title h2 { font-size:22px; }
.profile-fields { margin-top:5px; }

.metric { padding:17px; min-height:105px; display:flex; flex-direction:column; justify-content:space-between; }
.metric span { color:var(--muted); font-size:12px; }
.metric b { font-size:23px; letter-spacing:-.04em; }
.stats-card { margin-top:10px; }

.farm-hero { padding:22px; display:flex; align-items:center; gap:15px; margin-bottom:10px; }
.farm-icon { font-size:40px; }
.farm-level { font-size:28px; font-weight:900; margin-top:2px; color:var(--accent); }

.stack { display:flex; flex-direction:column; gap:10px; }
.relation-card, .top-item { padding:16px; }
.relation-head, .top-item { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.relation-name { font-weight:850; font-size:16px; }
.relation-meta { font-size:11px; color:var(--muted); margin-top:4px; }
.hp-bar { height:7px; border-radius:99px; background:rgba(255,255,255,.06); overflow:hidden; margin-top:14px; }
.hp-bar > i { display:block; height:100%; border-radius:99px; background:var(--accent); }
.relation-stats { display:flex; gap:12px; margin-top:10px; color:var(--muted); font-size:11px; }

.top-head { padding:20px; display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.trophy { font-size:36px; }
.rank { width:36px; color:var(--accent); font-weight:900; font-size:16px; }
.top-user { flex:1; min-width:0; }
.top-user b { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.top-user small { color:var(--muted); }
.top-score { font-weight:900; }

.empty-card { padding:38px 24px; text-align:center; }
.state-icon { font-size:40px; margin-bottom:13px; }
.muted { color:var(--muted); font-size:13px; line-height:1.55; }
.center-state { min-height:55vh; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:28px; }
.loader { width:34px; height:34px; border-radius:50%; border:3px solid rgba(255,255,255,.09); border-top-color:var(--accent); animation:spin .8s linear infinite; margin-bottom:15px; }
@keyframes spin { to { transform:rotate(360deg); } }
.primary-btn { margin-top:15px; border:0; background:var(--accent); color:#0b0c0f; padding:12px 18px; border-radius:14px; font-weight:850; cursor:pointer; }

.bottom-nav { position:fixed; z-index:5; left:50%; transform:translateX(-50%); bottom:calc(12px + env(safe-area-inset-bottom)); width:min(648px,calc(100% - 24px)); padding:7px; display:grid; grid-template-columns:repeat(4,1fr); gap:4px; border-radius:23px; background:rgba(18,20,27,.93); border:1px solid var(--line); backdrop-filter:blur(22px); box-shadow:0 18px 70px rgba(0,0,0,.5); }
.nav-btn { border:0; background:transparent; border-radius:17px; padding:8px 3px 7px; color:var(--muted); cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:2px; }
.nav-btn span { font-size:18px; line-height:1; }
.nav-btn small { font-size:9px; font-weight:700; }
.nav-btn.active { color:#0b0c0f; background:var(--accent); }

.hidden { display:none !important; }

@media (min-width:560px) {
  .quick-grid { grid-template-columns:repeat(4,1fr); }
  .quick { min-height:145px; }
  .metric-grid { grid-template-columns:repeat(4,1fr); }
}



.action-card { width:100%; color:inherit; cursor:pointer; border:1px solid var(--line); }
.daily-card { margin-top:12px; padding:15px 17px; display:flex; align-items:center; gap:12px; text-align:left; }
.daily-card.claimed { opacity:.55; }
.daily-icon { font-size:27px; }
.daily-copy { flex:1; display:flex; flex-direction:column; gap:3px; }
.daily-copy b { font-size:14px; }
.daily-copy span { font-size:10px; color:var(--muted); }
.daily-value { color:var(--accent); font-size:13px; font-weight:900; }

.quick-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }

.grow { flex:1; min-width:0; }
.farm-timer { margin-top:4px; color:var(--muted); font-size:11px; }
.status-pill { padding:7px 10px; border-radius:999px; background:rgba(255,255,255,.06); color:var(--muted); font-size:10px; font-weight:850; white-space:nowrap; }
.status-pill.ready { background:var(--accent-soft); color:var(--accent); }

.farm-income { margin:10px 0; padding:17px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.farm-income > div { display:flex; flex-direction:column; gap:5px; }
.farm-income b { font-size:22px; }
.compact { margin:0; padding:11px 15px; }

.boost-card { margin-top:10px; padding:17px; }
.section-mini-title { font-size:11px; color:var(--muted); margin-bottom:11px; }
.chips { display:flex; flex-wrap:wrap; gap:7px; }
.chip { padding:7px 9px; border-radius:999px; background:rgba(255,255,255,.05); border:1px solid var(--line); font-size:10px; }
.chip.active { background:var(--accent-soft); color:var(--accent); }

.secondary-btn { border:1px solid var(--line); background:rgba(255,255,255,.055); color:var(--text); border-radius:16px; padding:14px 17px; font-weight:850; cursor:pointer; }
.wide { width:100%; margin-top:10px; }

.shop-balance { margin-bottom:10px; padding:16px 18px; display:flex; align-items:center; justify-content:space-between; }
.shop-balance span { color:var(--muted); font-size:12px; }
.shop-balance b { font-size:19px; color:var(--accent); }

.product-grid { display:grid; grid-template-columns:1fr; gap:10px; }
.product { padding:17px; }
.product-head { display:flex; gap:12px; align-items:flex-start; }
.product-icon { width:44px; height:44px; border-radius:15px; background:rgba(255,255,255,.055); display:grid; place-items:center; font-size:23px; }
.product-title { flex:1; min-width:0; }
.product-title b { display:block; font-size:15px; }
.product-title small { color:var(--muted); font-size:10px; }
.rarity { color:var(--accent); font-size:9px; font-weight:850; }
.product-effect { margin-top:13px; font-size:11px; line-height:1.5; color:#cdd1db; }
.product-desc { margin-top:5px; font-size:10px; line-height:1.45; color:var(--muted); }
.product-footer { margin-top:15px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.price { font-size:16px; font-weight:900; }
.owned { font-size:9px; color:var(--muted); }
.buy-btn, .use-btn { border:0; background:var(--accent); color:#0b0c0f; border-radius:12px; padding:10px 13px; font-size:11px; font-weight:900; cursor:pointer; }
.buy-btn:disabled, .use-btn:disabled { opacity:.4; cursor:default; }

.inventory-item { padding:17px; }
.inventory-top { display:flex; align-items:center; gap:12px; }
.inventory-icon { font-size:26px; }
.inventory-info { flex:1; min-width:0; }
.inventory-info b { display:block; font-size:14px; }
.inventory-info small { color:var(--muted); font-size:10px; }
.inventory-count { color:var(--accent); font-weight:900; }
.inventory-effect { color:#cdd1db; font-size:10px; line-height:1.5; margin:12px 0; }
.inventory-actions { display:flex; justify-content:flex-end; }

.history-item { padding:14px 16px; display:flex; align-items:center; gap:12px; }
.history-sign { width:42px; height:42px; border-radius:14px; display:grid; place-items:center; background:rgba(255,255,255,.05); font-weight:900; }
.history-sign.plus { color:var(--accent); }
.history-sign.minus { color:#ff788d; }
.history-main { flex:1; min-width:0; }
.history-main b { display:block; font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.history-main small { color:var(--muted); font-size:9px; }
.history-amount { font-size:13px; font-weight:900; }

.toast { position:fixed; z-index:20; left:50%; bottom:calc(95px + env(safe-area-inset-bottom)); transform:translate(-50%,15px); width:min(520px,calc(100% - 32px)); padding:13px 15px; border-radius:15px; background:#20232d; border:1px solid var(--line); box-shadow:0 20px 60px rgba(0,0,0,.5); opacity:0; pointer-events:none; transition:.2s; font-size:12px; text-align:center; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.toast.success { color:var(--accent); }
.toast.error { color:#ff8296; }

.busy { pointer-events:none !important; opacity:.55 !important; }

@media (min-width:560px) {
  .quick-grid { grid-template-columns:repeat(4,1fr); }
  .product-grid { grid-template-columns:repeat(2,1fr); }
}


/* ==================== V3 relationships ==================== */
.relation-card { padding:16px; }
.relation-card-button { width:100%; color:inherit; cursor:pointer; text-align:left; }
.relation-card-footer { margin-top:12px; display:flex; justify-content:space-between; gap:8px; color:var(--muted); font-size:10px; }
.ghost-back { border:0; background:transparent; color:var(--muted); font-weight:800; padding:4px 0 12px; cursor:pointer; }
.relation-detail-hero { padding:19px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.relation-detail-hero h2 { margin:3px 0 3px; }
.relation-level-orb { width:62px; height:62px; flex:0 0 62px; border-radius:21px; background:var(--accent-soft); border:1px solid rgba(190,255,79,.18); display:grid; place-content:center; text-align:center; }
.relation-level-orb b { color:var(--accent); font-size:22px; line-height:1; }
.relation-level-orb small { margin-top:4px; font-size:8px; color:var(--muted); }
.relation-progress-card { margin-top:10px; padding:17px; }
.progress-track { height:7px; border-radius:999px; margin-top:12px; background:rgba(255,255,255,.055); overflow:hidden; }
.progress-track i { display:block; height:100%; width:0; border-radius:999px; background:var(--accent); transition:width .25s ease; }
.cooldown-card { margin-top:10px; padding:17px; display:flex; align-items:center; justify-content:space-between; gap:14px; }
.cooldown-card > div:first-child { min-width:0; }
.cooldown-card b { display:block; margin-top:4px; font-size:17px; }
.cooldown-card small { color:var(--muted); font-size:9px; }
.skip-hint { flex:0 0 auto; color:#ffda79; font-size:10px; font-weight:850; }
.relation-action-card { padding:15px; }
.relation-action-top { display:flex; align-items:center; gap:11px; }
.relation-action-icon { width:40px; height:40px; border-radius:13px; background:rgba(255,255,255,.05); display:grid; place-items:center; font-size:20px; }
.relation-action-info { flex:1; min-width:0; }
.relation-action-info b { display:block; font-size:12px; }
.relation-action-info small { color:var(--muted); font-size:9px; }
.relation-action-values { margin-top:10px; display:flex; gap:6px; flex-wrap:wrap; }
.relation-action-values span { padding:5px 7px; border-radius:999px; background:rgba(255,255,255,.045); color:var(--muted); font-size:9px; }
.relation-action-footer { margin-top:12px; display:flex; justify-content:flex-end; }
.relation-action-btn { border:0; border-radius:11px; padding:9px 12px; font-size:10px; font-weight:900; cursor:pointer; background:var(--accent); color:#0b0c0f; }
.relation-action-btn.pay { background:#ffda79; }
.relation-action-btn.locked { background:rgba(255,255,255,.06); color:var(--muted); }
.relation-action-btn:disabled { opacity:.55; cursor:default; }
.relation-history-item { padding:12px 14px; display:flex; gap:10px; align-items:center; }
.relation-history-item .history-main b { white-space:normal; }

/* ==================== V3 admin ==================== */
.admin-head { padding:18px; display:flex; align-items:center; justify-content:space-between; }
.admin-head h2 { margin:4px 0 0; }
.admin-shield { font-size:30px; }
.admin-search-card,.admin-control { margin-top:10px; padding:16px; }
.search-row,.admin-control-row { display:flex; gap:8px; align-items:center; }
.search-row input,.admin-control-row input,.admin-control-row select {
  min-width:0; flex:1; border:1px solid var(--line); background:rgba(255,255,255,.045);
  color:var(--text); border-radius:12px; padding:11px 12px; outline:none; font:inherit; font-size:11px;
}
.admin-control-row select option { color:#111; }
.small-input { max-width:72px; }
.admin-user-row { width:100%; padding:14px 16px; color:inherit; text-align:left; cursor:pointer; }
.admin-user-line { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.admin-user-line b { font-size:12px; }
.admin-user-row small { color:var(--muted); font-size:9px; }
.admin-user-hero { padding:18px; display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.admin-user-hero h2 { margin:4px 0 8px; }
.admin-id { color:var(--muted); font-size:10px; }
.admin-danger { margin-top:10px; padding:16px; display:flex; align-items:center; justify-content:space-between; gap:14px; border-color:rgba(255,100,120,.18); }
.admin-danger > div { min-width:0; }
.admin-danger b { display:block; font-size:12px; }
.admin-danger small { display:block; margin-top:4px; color:var(--muted); font-size:9px; line-height:1.4; }
.danger-btn { border:1px solid rgba(255,100,120,.25); background:rgba(255,100,120,.08); color:#ff8296; border-radius:11px; padding:9px 11px; font-size:10px; font-weight:900; cursor:pointer; }
.admin-relation { padding:14px 16px; display:flex; align-items:center; gap:10px; }
.admin-relation .grow b { display:block; font-size:11px; }
.admin-relation .grow small { color:var(--muted); font-size:9px; }


/* ==================== V4 PASS / QUESTS ==================== */
.pass-home-card { width:100%; margin-top:12px; padding:16px 17px; color:inherit; text-align:left; }
.pass-home-top,.pass-home-bottom { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.pass-home-top b { display:block; margin-top:3px; font-size:15px; }
.pass-home-top > div:last-child { color:var(--accent); font-size:11px; font-weight:900; }
.pass-home-bottom { margin-top:9px; color:var(--muted); font-size:9px; }

.pass-hero { padding:19px; display:flex; justify-content:space-between; align-items:center; }
.pass-hero h2 { margin:4px 0; }
.pass-orb { width:58px; height:58px; border-radius:19px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); font-weight:950; border:1px solid rgba(190,255,79,.17); }
.pass-progress { margin:10px 2px 14px; }
.quest-tabs { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-bottom:10px; }
.quest-tab { border:1px solid var(--line); background:rgba(255,255,255,.04); color:var(--muted); border-radius:11px; padding:9px 4px; font-size:9px; font-weight:850; cursor:pointer; }
.quest-tab.active { background:var(--accent-soft); color:var(--accent); border-color:rgba(190,255,79,.14); }
.quest-panel { display:none; }
.quest-panel.active { display:block; }
.quest-card { padding:15px; }
.quest-top { display:flex; gap:11px; align-items:center; }
.quest-icon { width:40px; height:40px; border-radius:13px; background:rgba(255,255,255,.05); display:grid; place-items:center; font-size:20px; }
.quest-main { flex:1; min-width:0; }
.quest-main b { display:block; font-size:12px; }
.quest-main small { color:var(--muted); font-size:9px; line-height:1.4; }
.quest-progress-line { margin-top:11px; display:flex; align-items:center; gap:9px; }
.quest-progress-line .progress-track { flex:1; margin:0; }
.quest-progress-line small { width:58px; text-align:right; color:var(--muted); font-size:9px; }
.quest-reward { margin-top:11px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.quest-reward span { color:#ffda79; font-size:9px; font-weight:850; }
.claim-btn { border:0; background:var(--accent); color:#0b0c0f; border-radius:11px; padding:9px 11px; font-size:10px; font-weight:900; cursor:pointer; }
.claim-btn:disabled { background:rgba(255,255,255,.06); color:var(--muted); opacity:.75; }
.pass-level-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.pass-level-card { padding:14px; text-align:center; }
.pass-level-num { font-size:20px; font-weight:950; }
.pass-level-card small { display:block; margin:4px 0 10px; color:var(--muted); font-size:9px; }
.pass-level-card.locked { opacity:.5; }
.pass-level-card.claimed { border-color:rgba(190,255,79,.16); }

/* ==================== V4 PROFILE EDIT ==================== */
.profile-section-head { display:flex; align-items:center; justify-content:space-between; margin:18px 0 7px; }
.profile-section-head b { font-size:11px; }
.profile-section-head span { color:var(--muted); font-size:8px; }
.editable-profile .field { width:100%; border:0; color:inherit; background:transparent; cursor:pointer; text-align:left; }
.edit-field i { color:var(--accent); font-style:normal; margin-left:8px; font-size:13px; }
.modal { position:fixed; z-index:50; inset:0; display:flex; align-items:flex-end; }
.modal.hidden { display:none; }
.modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.65); backdrop-filter:blur(3px); }
.modal-sheet { position:relative; width:100%; max-width:640px; margin:0 auto; background:#11131a; border:1px solid var(--line); border-radius:24px 24px 0 0; padding:12px 18px calc(18px + env(safe-area-inset-bottom)); box-shadow:0 -30px 80px rgba(0,0,0,.45); }
.modal-handle { width:42px; height:4px; border-radius:999px; background:rgba(255,255,255,.15); margin:0 auto 15px; }
.modal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:15px; }
.modal-head h2 { margin:3px 0 0; font-size:18px; }
.edit-control { width:100%; border:1px solid var(--line); background:rgba(255,255,255,.05); color:var(--text); border-radius:14px; padding:13px 14px; outline:none; font:inherit; }
.edit-options { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.edit-option { border:1px solid var(--line); background:rgba(255,255,255,.04); color:var(--text); border-radius:13px; padding:13px; font-weight:850; cursor:pointer; }
.edit-option.active { color:var(--accent); background:var(--accent-soft); border-color:rgba(190,255,79,.16); }



/* ==================== V5 PERFORMANCE + MOTION ==================== */
:root {
  --motion-fast: 160ms;
  --motion-mid: 240ms;
  --motion-slow: 360ms;
  --motion-ease: cubic-bezier(.2,.72,.2,1);
  --motion-spring: cubic-bezier(.16,1,.3,1);
}

html {
  scroll-behavior: smooth;
  overscroll-behavior-y: none;
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeSpeed;
  touch-action: manipulation;
}

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

.card,
.quick,
.metric,
.product,
.inventory-item,
.quest-card,
.relation-card,
.admin-user-row {
  contain: layout paint style;
}

.view {
  contain: layout style;
  content-visibility: auto;
  contain-intrinsic-size: 700px;
}

.view.active {
  content-visibility: visible;
}

/* Only GPU-cheap properties are animated. */
.motion-view.active {
  animation-duration: var(--motion-mid);
  animation-timing-function: var(--motion-spring);
  animation-fill-mode: both;
}

.motion-home.active { animation-name: v5FadeLift; }
.motion-farm.active { animation-name: v5GrowIn; }
.motion-shop.active { animation-name: v5SlideLeft; }
.motion-inventory.active { animation-name: v5SlideRight; }
.motion-bag.active { animation-name: v5ScaleIn; }
.motion-history.active { animation-name: v5FadeLift; }
.motion-relations.active { animation-name: v5SlideLeft; }
.motion-top.active { animation-name: v5GrowIn; }
.motion-profile.active { animation-name: v5SlideRight; }
.motion-quests.active { animation-name: v5ScaleIn; }
.motion-admin.active { animation-name: v5FadeLift; }

@keyframes v5FadeLift {
  from { opacity: 0; transform: translate3d(0,10px,0); }
  to   { opacity: 1; transform: translate3d(0,0,0); }
}

@keyframes v5GrowIn {
  from { opacity: 0; transform: translate3d(0,8px,0) scale(.985); }
  to   { opacity: 1; transform: translate3d(0,0,0) scale(1); }
}

@keyframes v5SlideLeft {
  from { opacity: 0; transform: translate3d(14px,0,0); }
  to   { opacity: 1; transform: translate3d(0,0,0); }
}

@keyframes v5SlideRight {
  from { opacity: 0; transform: translate3d(-14px,0,0); }
  to   { opacity: 1; transform: translate3d(0,0,0); }
}

@keyframes v5ScaleIn {
  from { opacity: 0; transform: scale(.985); }
  to   { opacity: 1; transform: scale(1); }
}

.card {
  transition:
    transform var(--motion-fast) var(--motion-ease),
    opacity var(--motion-fast) var(--motion-ease),
    border-color var(--motion-fast) linear;
}

button.card:active,
.quick:active,
.action-card:active {
  transform: scale(.985);
}

.nav-btn {
  transition:
    transform var(--motion-fast) var(--motion-spring),
    opacity var(--motion-fast) linear;
}

.nav-btn:active {
  transform: scale(.9);
}

.nav-btn.active span {
  animation: v5NavPop 220ms var(--motion-spring);
}

@keyframes v5NavPop {
  0% { transform: scale(.78); }
  60% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* Stagger only a few visible cards, never huge lists. */
.view.active .quick:nth-child(1),
.view.active .metric:nth-child(1),
.view.active .quest-card:nth-child(1) { animation-delay: 0ms; }

.view.active .quick:nth-child(2),
.view.active .metric:nth-child(2),
.view.active .quest-card:nth-child(2) { animation-delay: 22ms; }

.view.active .quick:nth-child(3),
.view.active .metric:nth-child(3),
.view.active .quest-card:nth-child(3) { animation-delay: 44ms; }

.view.active .quick:nth-child(4),
.view.active .metric:nth-child(4),
.view.active .quest-card:nth-child(4) { animation-delay: 66ms; }

.view.active .quick,
.view.active .metric,
.view.active .quest-card {
  animation-name: v5ItemReveal;
  animation-duration: var(--motion-mid);
  animation-timing-function: var(--motion-spring);
  animation-fill-mode: both;
}

@keyframes v5ItemReveal {
  from { opacity:0; transform:translate3d(0,7px,0); }
  to   { opacity:1; transform:translate3d(0,0,0); }
}

.progress-track i,
.hp-bar i {
  transition: width 420ms var(--motion-spring);
}

.toast.show {
  animation: v5ToastIn 220ms var(--motion-spring);
}

@keyframes v5ToastIn {
  from { opacity:0; transform:translate(-50%,10px) scale(.97); }
  to   { opacity:1; transform:translate(-50%,0) scale(1); }
}

.modal-sheet {
  animation: v5SheetIn 260ms var(--motion-spring);
  transform: translateZ(0);
}

@keyframes v5SheetIn {
  from { transform:translate3d(0,22px,0); opacity:.2; }
  to { transform:translate3d(0,0,0); opacity:1; }
}

.page-transition {
  position: fixed;
  z-index: 9;
  left: 50%;
  bottom: calc(77px + env(safe-area-inset-bottom));
  width: 34px;
  height: 3px;
  border-radius: 999px;
  background: var(--accent);
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  opacity: 0;
  pointer-events: none;
}

.page-transition.run {
  animation: v5TransitionPulse 300ms var(--motion-ease);
}

@keyframes v5TransitionPulse {
  0% { opacity:0; transform:translateX(-50%) scaleX(0); }
  35% { opacity:.85; transform:translateX(-50%) scaleX(1); }
  100% { opacity:0; transform:translateX(-50%) scaleX(.2); }
}

.perf-badge {
  position: fixed;
  z-index: 25;
  top: calc(8px + env(safe-area-inset-top));
  right: 10px;
  padding: 4px 7px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 900;
  background: rgba(190,255,79,.1);
  color: var(--accent);
  border: 1px solid rgba(190,255,79,.14);
  pointer-events: none;
}

/* Low-end mode: remove costly visual effects while preserving layout. */
html.low-power {
  --motion-fast: 120ms;
  --motion-mid: 160ms;
  --motion-slow: 200ms;
}

html.low-power .ambient,
html.low-power .page-transition,
html.low-power .perf-badge {
  display: none !important;
}

html.low-power .modal-backdrop {
  backdrop-filter: none !important;
}

html.low-power .card,
html.low-power .bottom-nav,
html.low-power .modal-sheet,
html.low-power .toast {
  box-shadow: none !important;
}

html.low-power .motion-view.active,
html.low-power .view.active .quick,
html.low-power .view.active .metric,
html.low-power .view.active .quest-card {
  animation-duration: 130ms !important;
  animation-delay: 0ms !important;
}

html.low-power .progress-track i,
html.low-power .hp-bar i {
  transition-duration: 180ms;
}

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

/* Avoid rendering long off-screen list items until needed. */
.product,
.inventory-item,
.history-item,
.relation-action-card,
.relation-history-item,
.admin-user-row,
.admin-relation,
.pass-level-card {
  content-visibility: auto;
  contain-intrinsic-size: 90px;
}