:root {
  --bg: #080a0c;
  --surface: #111519;
  --surface-2: #191f24;
  --text: #f7f8f5;
  --muted: #9aa3a8;
  --line: rgba(255,255,255,.11);
  --accent: #ff5e3a;
  --accent-ink: #ffffff;
  --danger: #ff5a66;
  --nav-h: 66px;
  --top-safe: env(safe-area-inset-top, 0px);
  --bottom-safe: env(safe-area-inset-bottom, 0px);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--bg);
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; min-height: 100%; background: var(--bg); overflow-x: hidden; }
body { min-height: 100dvh; overscroll-behavior: none; -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
button, [role="button"] { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
.hidden { display: none !important; }
.boot { height: 100dvh; display: grid; place-items: center; }
.brand-mark { display: grid; place-items: center; width: 62px; aspect-ratio: 1; border-radius: 20px; background: var(--accent); color: var(--accent-ink); font: 900 34px/1 system-ui; box-shadow: 0 0 50px rgba(255,94,58,.2); animation: breathe 1.2s ease-in-out infinite alternate; }
@keyframes breathe { to { transform: scale(1.06); box-shadow: 0 0 72px rgba(255,94,58,.3); } }

.app-shell { min-height: 100dvh; padding-bottom: calc(var(--nav-h) + var(--bottom-safe)); background: var(--bg); }
.app-header { position: sticky; z-index: 20; top: 0; min-height: calc(58px + var(--top-safe)); padding: calc(12px + var(--top-safe)) 16px 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: rgba(8,10,12,.92); backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); }
.app-header h1 { margin: 0; font-size: 22px; letter-spacing: -.04em; }
.header-action, .icon-button { border: 0; background: transparent; padding: 10px; min-width: 44px; min-height: 44px; display: grid; place-items: center; border-radius: 14px; cursor: pointer; }
.header-action:active, .icon-button:active { background: rgba(255,255,255,.1); }
.brand-word { font-weight: 950; font-size: 20px; letter-spacing: .12em; }
.brand-word::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 5px; border-radius: 50%; background: var(--accent); vertical-align: 8px; }

.bottom-nav { position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; height: calc(var(--nav-h) + var(--bottom-safe)); padding: 5px 5px var(--bottom-safe); display: grid; grid-template-columns: repeat(5, 1fr); background: rgba(8,10,12,.96); backdrop-filter: blur(20px); border-top: 1px solid var(--line); }
.nav-item { border: 0; background: transparent; min-width: 0; min-height: 55px; padding: 5px 2px 3px; color: #8d969a; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 10px; font-weight: 700; cursor: pointer; }
.nav-item svg { width: 23px; height: 23px; stroke-width: 1.9; }
.nav-item.active { color: var(--accent); }
.nav-item.upload-nav svg { padding: 5px; width: 34px; height: 28px; border-radius: 10px; color: var(--accent-ink); background: var(--accent); stroke-width: 2.4; }

.feed-screen { position: fixed; inset: 0 0 calc(var(--nav-h) + var(--bottom-safe)); background: #000; }
.video-feed { width: 100%; height: 100%; overflow-y: auto; overflow-x: hidden; scroll-snap-type: y mandatory; overscroll-behavior-y: contain; scrollbar-width: none; }
.video-feed::-webkit-scrollbar { display: none; }
.video-item { position: relative; width: 100%; height: 100%; overflow: hidden; scroll-snap-align: start; scroll-snap-stop: always; background: #050607; }
.video-item video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #050607; }
.video-item::after { content: ""; pointer-events: none; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.26) 0, transparent 22%, transparent 54%, rgba(0,0,0,.78) 100%); }
.video-loading, .video-error { position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; text-align: center; color: #c9ceca; padding: 32px; }
.video-error { background: radial-gradient(circle, #20262a, #07090a); }
.spinner { width: 30px; height: 30px; border: 3px solid rgba(255,255,255,.2); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.feed-top { position: absolute; z-index: 10; top: 0; left: 0; right: 0; padding: calc(10px + var(--top-safe)) 12px 12px; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; pointer-events: none; }
.feed-top > * { pointer-events: auto; }
.feed-tabs { justify-self: center; display: flex; gap: 18px; align-items: center; }
.feed-tab { position: relative; border: 0; background: transparent; padding: 10px 0; color: rgba(255,255,255,.66); font-size: 15px; font-weight: 760; text-shadow: 0 1px 8px #000; }
.feed-tab.active { color: #fff; }
.feed-tab.active::after { content: ""; position: absolute; left: 20%; right: 20%; bottom: 3px; height: 3px; border-radius: 3px; background: var(--accent); }
.feed-top .icon-button { background: rgba(0,0,0,.28); backdrop-filter: blur(10px); }
.overlay { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; padding: 24px 74px 20px 16px; }
.creator-line { display: flex; align-items: center; gap: 9px; min-width: 0; }
.creator-link { border: 0; background: transparent; padding: 0; display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 800; cursor: pointer; }
.avatar { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: linear-gradient(135deg, #252c31, #101316); border: 1px solid rgba(255,255,255,.35); display: grid; place-items: center; font-weight: 900; color: var(--accent); overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.follow-button { min-height: 34px; border-radius: 10px; border: 1px solid var(--accent); padding: 6px 13px; background: var(--accent); color: var(--accent-ink); font-size: 12px; font-weight: 850; }
.follow-button.following { background: rgba(0,0,0,.24); color: white; border-color: rgba(255,255,255,.5); }
.caption { margin: 12px 0 7px; font-size: 15px; line-height: 1.35; text-shadow: 0 1px 8px #000; overflow-wrap: anywhere; }
.meta-line { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 12px; font-weight: 750; }
.category-link { border: 0; padding: 6px 9px; border-radius: 9px; color: white; background: rgba(255,255,255,.14); backdrop-filter: blur(8px); }
.stage-badge { color: var(--accent); font-size: 11px; letter-spacing: .08em; }
.action-rail { position: absolute; z-index: 5; right: 9px; bottom: 18px; width: 58px; display: flex; flex-direction: column; align-items: center; gap: 13px; }
.video-action { border: 0; background: transparent; padding: 2px; min-width: 50px; color: white; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10px; font-weight: 750; text-shadow: 0 1px 6px #000; }
.video-action .action-circle { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: rgba(13,15,16,.47); backdrop-filter: blur(11px); border: 1px solid rgba(255,255,255,.1); }
.video-action svg { width: 23px; height: 23px; }
.video-action.active .action-circle { background: var(--accent); color: var(--accent-ink); }
.mute-button { position: absolute; z-index: 6; right: 14px; top: calc(62px + var(--top-safe)); background: rgba(0,0,0,.35); backdrop-filter: blur(9px); }
.pause-glyph { pointer-events: none; position: absolute; z-index: 7; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(.8); width: 68px; height: 68px; border-radius: 50%; background: rgba(0,0,0,.45); display: grid; place-items: center; opacity: 0; transition: .18s ease; }
.video-item.paused .pause-glyph { opacity: 1; transform: translate(-50%,-50%) scale(1); }

.page { min-height: 100dvh; padding-bottom: calc(var(--nav-h) + var(--bottom-safe)); }
.page-content { width: min(760px, 100%); margin: 0 auto; padding: 16px; }
.section-title { margin: 8px 0 14px; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; }
.category-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.category-card { position: relative; min-height: 150px; overflow: hidden; border: 1px solid var(--line); border-radius: 22px; padding: 17px; background: linear-gradient(145deg, #171d20, #0d1012); text-align: left; cursor: pointer; }
.category-card::after { content: attr(data-emoji); position: absolute; right: -5px; bottom: -19px; font-size: 74px; opacity: .17; transform: rotate(-8deg); }
.category-name { display: block; font-weight: 850; font-size: 19px; }
.category-count { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; }
.category-detail { display: block; margin-top: 24px; color: #d9ded9; font-size: 11px; line-height: 1.55; }
.accent { color: var(--accent); }

.empty-state { min-height: 52vh; display: grid; place-items: center; padding: 34px; text-align: center; }
.empty-inner { max-width: 310px; }
.empty-symbol { width: 66px; height: 66px; margin: 0 auto 20px; display: grid; place-items: center; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); color: var(--accent); }
.empty-state h2 { margin: 0 0 9px; font-size: 21px; letter-spacing: -.03em; }
.empty-state p { margin: 0 0 22px; color: var(--muted); line-height: 1.45; }
.primary-button, .secondary-button, .danger-button { min-height: 48px; border-radius: 15px; border: 0; padding: 12px 18px; font-weight: 820; cursor: pointer; }
.primary-button { background: var(--accent); color: var(--accent-ink); }
.secondary-button { background: var(--surface-2); color: var(--text); border: 1px solid var(--line); }
.danger-button { background: rgba(255,90,102,.12); color: var(--danger); border: 1px solid rgba(255,90,102,.3); }
.primary-button:disabled, .secondary-button:disabled { opacity: .48; cursor: default; }
.full-button { width: 100%; }

.upload-wrap { max-width: 560px; margin: 0 auto; }
.upload-drop { position: relative; width: 100%; aspect-ratio: 9/12; max-height: 55dvh; display: grid; place-items: center; border-radius: 24px; border: 1px dashed rgba(255,94,58,.4); background: radial-gradient(circle at 50% 30%, #1d2524, #0e1113 72%); overflow: hidden; }
.upload-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.upload-drop video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.upload-prompt { text-align: center; color: var(--muted); }
.upload-prompt svg { width: 42px; height: 42px; color: var(--accent); }
.upload-prompt strong { display: block; color: white; margin-top: 10px; }
.upload-form { display: grid; gap: 14px; margin-top: 16px; }
.field { display: grid; gap: 7px; }
.field label { color: #cdd2cf; font-size: 13px; font-weight: 700; }
.input, .textarea, .select { width: 100%; border: 1px solid var(--line); background: var(--surface); color: white; border-radius: 14px; padding: 13px 14px; outline: none; }
.input:focus, .textarea:focus, .select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,94,58,.1); }
.textarea { min-height: 88px; resize: vertical; }
.upload-status { padding: 14px; border-radius: 14px; background: var(--surface); color: var(--muted); font-size: 13px; }
.progress { height: 6px; margin-top: 10px; border-radius: 9px; overflow: hidden; background: rgba(255,255,255,.09); }
.progress > span { display: block; width: 0; height: 100%; background: var(--accent); transition: width .2s; }
.progress.indeterminate > span { width: 34%; animation: upload-travel 1.15s ease-in-out infinite; }
@keyframes upload-travel { from { transform: translateX(-110%); } to { transform: translateX(310%); } }

.profile-head { padding: 22px 16px 18px; display: grid; grid-template-columns: 82px 1fr; gap: 17px; align-items: center; }
.profile-avatar { width: 82px; height: 82px; border-radius: 27px; font-size: 28px; }
.profile-name { margin: 0 0 5px; font-size: 23px; letter-spacing: -.035em; overflow-wrap: anywhere; }
.profile-bio { margin: 7px 0 0; color: #c0c6c3; font-size: 13px; line-height: 1.45; }
.badge-row { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 9px; }
.badge { border-radius: 8px; padding: 5px 8px; background: rgba(255,94,58,.1); color: var(--accent); border: 1px solid rgba(255,94,58,.2); font-size: 10px; font-weight: 850; letter-spacing: .05em; }
.profile-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid var(--line); }
.stat { padding: 14px 7px; text-align: center; }
.stat strong { display: block; font-size: 17px; }
.stat span { color: var(--muted); font-size: 10px; }
.profile-actions { display: flex; gap: 10px; padding: 14px 16px; }
.profile-actions > * { flex: 1; }
.scout-card { margin: 4px 16px 18px; border: 1px solid var(--line); border-radius: 20px; padding: 16px; background: linear-gradient(135deg, #171d1c, #101316); }
.scout-top { display: flex; align-items: center; justify-content: space-between; }
.scout-level { color: var(--accent); font-weight: 900; letter-spacing: .05em; }
.scout-grid { margin-top: 14px; display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.scout-grid div { padding: 10px 6px; border-radius: 12px; background: rgba(255,255,255,.04); text-align: center; }
.scout-grid strong { display: block; }
.scout-grid span { font-size: 9px; color: var(--muted); }
.profile-tabs { position: sticky; top: calc(58px + var(--top-safe)); z-index: 10; display: flex; background: rgba(8,10,12,.95); border-block: 1px solid var(--line); }
.profile-tab { flex: 1; border: 0; background: transparent; padding: 14px; color: var(--muted); font-weight: 760; }
.profile-tab.active { color: white; box-shadow: inset 0 -2px var(--accent); }
.video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.grid-video { position: relative; aspect-ratio: 9/14; border: 0; padding: 0; background: #131719; overflow: hidden; }
.grid-video video { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.grid-video span { position: absolute; left: 6px; bottom: 6px; font-size: 10px; font-weight: 800; text-shadow: 0 1px 4px #000; }

.rank-category { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 14px; scrollbar-width: none; }
.chip { flex: 0 0 auto; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); padding: 9px 13px; color: #c6ccca; font-size: 12px; font-weight: 760; }
.chip.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.rank-group { margin: 16px 0 28px; }
.rank-group h2 { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 10px; font-size: 15px; letter-spacing: .08em; }
.rank-group h2 span { color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: 0; }
.rank-row { width: 100%; border: 0; border-bottom: 1px solid var(--line); padding: 12px 4px; display: grid; grid-template-columns: 30px 42px 1fr auto; align-items: center; gap: 10px; background: transparent; text-align: left; }
.rank-number { font-weight: 900; color: var(--muted); }
.rank-row:first-of-type .rank-number { color: var(--accent); }
.rank-meta { color: var(--muted); font-size: 11px; text-align: right; }

.sheet-backdrop { position: fixed; z-index: 100; inset: 0; background: rgba(0,0,0,.58); backdrop-filter: blur(2px); display: flex; align-items: flex-end; animation: fade .18s; }
.sheet { width: 100%; max-height: min(82dvh, 720px); padding: 10px 16px calc(16px + var(--bottom-safe)); overflow: auto; border-radius: 26px 26px 0 0; background: #121619; border-top: 1px solid var(--line); animation: slide .24s ease-out; }
.sheet-handle { width: 42px; height: 5px; border-radius: 4px; background: #4a5256; margin: 0 auto 12px; }
.sheet-head { display: flex; justify-content: space-between; align-items: center; }
.sheet-head h2 { margin: 7px 0 14px; font-size: 18px; }
.comment-list { min-height: 160px; display: grid; gap: 14px; }
.comment { display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: start; }
.comment-body strong { font-size: 12px; }
.comment-body p { margin: 4px 0; color: #e5e8e5; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.comment-body time { color: var(--muted); font-size: 10px; }
.comment-form { position: sticky; bottom: 0; display: flex; gap: 8px; padding-top: 14px; background: #121619; }
.comment-form .input { flex: 1; }

.onboarding { position: fixed; z-index: 200; inset: 0; padding: calc(20px + var(--top-safe)) 20px calc(20px + var(--bottom-safe)); display: flex; flex-direction: column; background: radial-gradient(circle at 70% 10%, rgba(255,94,58,.11), transparent 35%), var(--bg); }
.onboard-skip { align-self: flex-end; border: 0; background: transparent; min-height: 44px; color: var(--muted); }
.onboard-body { flex: 1; width: min(500px, 100%); margin: 0 auto; display: flex; flex-direction: column; justify-content: center; }
.onboard-kicker { color: var(--accent); font-size: 12px; font-weight: 850; letter-spacing: .14em; }
.onboard-body h1 { margin: 10px 0; font-size: clamp(38px, 12vw, 62px); line-height: .98; letter-spacing: -.06em; }
.onboard-body p { color: var(--muted); font-size: 17px; }
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 22px 0; }
.choice { min-height: 58px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); padding: 12px; text-align: left; font-weight: 750; }
.choice.selected { border-color: var(--accent); background: rgba(255,94,58,.1); color: var(--accent); }
.onboard-actions { width: min(500px, 100%); margin: 0 auto; display: flex; gap: 10px; }
.onboard-actions > * { flex: 1; }

.search-box { position: relative; }
.search-box svg { position: absolute; top: 50%; left: 14px; transform: translateY(-50%); color: var(--muted); }
.search-box input { padding-left: 45px; }
.search-results { margin-top: 16px; }
.search-row { width: 100%; display: grid; grid-template-columns: 42px 1fr auto; gap: 10px; align-items: center; border: 0; border-bottom: 1px solid var(--line); padding: 12px 0; background: transparent; text-align: left; }
.search-row small { color: var(--muted); }
.settings-card { margin-bottom: 14px; padding: 18px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); }
.settings-card h2 { margin: 0 0 6px; font-size: 17px; }
.settings-card p { margin: 0 0 16px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.toast { position: fixed; z-index: 300; left: 50%; bottom: calc(var(--nav-h) + var(--bottom-safe) + 14px); transform: translate(-50%, 20px); max-width: calc(100% - 32px); padding: 11px 15px; border-radius: 13px; color: white; background: #242a2d; box-shadow: 0 12px 40px rgba(0,0,0,.42); font-size: 13px; font-weight: 700; opacity: 0; pointer-events: none; transition: .2s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.error { background: #552329; }
@keyframes fade { from { opacity: 0; } }
@keyframes slide { from { transform: translateY(40px); opacity: 0; } }

@media (min-width: 700px) {
  .feed-screen { left: 50%; width: min(520px, 100%); transform: translateX(-50%); box-shadow: 0 0 0 1px var(--line), 0 0 80px rgba(0,0,0,.6); }
  .bottom-nav { left: 50%; width: min(700px, 100%); transform: translateX(-50%); border-inline: 1px solid var(--line); }
  .category-list { grid-template-columns: repeat(3, 1fr); }
}

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

/* PASIKUT Admin Console */
.admin-circle { background: linear-gradient(135deg, rgba(255,94,58,.24), rgba(255,94,58,.08)); border: 1px solid rgba(255,94,58,.4); }
.admin-video-action { color: var(--accent); }
.admin-profile-strip { display:flex; gap:8px; padding:0 16px 14px; overflow-x:auto; }
.admin-entry-button { min-height:42px; border:1px solid rgba(255,94,58,.28); border-radius:13px; background:rgba(255,94,58,.09); color:var(--accent); padding:9px 13px; font-weight:850; white-space:nowrap; }
.admin-entry-button.danger-lite { border-color:rgba(255,90,102,.25); background:rgba(255,90,102,.08); color:#ff8a93; }
.admin-settings-card { border-color: rgba(255,94,58,.24); box-shadow: inset 0 0 0 1px rgba(255,94,58,.03); }
.admin-hero { display:flex; gap:14px; align-items:center; margin-bottom:18px; padding:16px; border:1px solid rgba(255,94,58,.22); border-radius:20px; background:linear-gradient(135deg,rgba(255,94,58,.11),rgba(255,255,255,.025)); }
.admin-hero > span { display:grid; place-items:center; width:48px; height:48px; border-radius:16px; background:rgba(255,94,58,.13); font-size:24px; }
.admin-hero strong { font-size:18px; }
.admin-hero p { margin:3px 0 0; color:var(--muted); font-size:12px; }
.admin-row { margin-bottom:10px; padding:14px; border:1px solid var(--line); border-radius:17px; background:var(--surface); }
.admin-row-main { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.admin-row-main div { display:grid; gap:2px; }
.admin-row-main span,.admin-row-main small { color:var(--muted); font-size:10px; }
.admin-row > p { margin:10px 0; color:#d6dbd8; font-size:13px; line-height:1.4; }
.admin-row-actions { display:flex; gap:8px; }
.admin-mini { min-height:38px; flex:1; border:1px solid rgba(255,94,58,.25); border-radius:11px; background:rgba(255,94,58,.08); color:var(--accent); font-weight:800; }
.admin-mini.secondary { border-color:var(--line); background:rgba(255,255,255,.04); color:#dfe4e1; }
.admin-sheet-summary { padding:13px; border-radius:15px; background:rgba(255,255,255,.035); border:1px solid var(--line); }
.admin-sheet-summary strong { display:block; color:var(--accent); font-size:16px; }
.admin-sheet-summary span { color:var(--muted); font-size:11px; }
.admin-sheet-summary p { margin:8px 0 0; color:#d9ddda; font-size:13px; line-height:1.45; }
.admin-state-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:12px 0; }
.admin-state-grid div { padding:12px 6px; border-radius:13px; background:rgba(255,255,255,.04); text-align:center; }
.admin-state-grid strong { display:block; color:var(--accent); font-size:16px; }
.admin-state-grid span { color:var(--muted); font-size:8px; font-weight:800; letter-spacing:.06em; }
.admin-note { color:var(--muted); font-size:11px; line-height:1.45; }
.admin-subtitle { margin:16px 0 8px; font-size:13px; letter-spacing:.08em; text-transform:uppercase; }
.admin-button-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.admin-touch { min-height:58px; border:1px solid rgba(255,94,58,.32); border-radius:15px; background:linear-gradient(180deg,rgba(255,94,58,.14),rgba(255,94,58,.06)); color:var(--accent); font-size:17px; font-weight:950; }
.admin-stack { display:grid; gap:9px; margin-top:14px; }

/* PASIKUT Account & Login */
.account-actions { display:grid; gap:9px; margin-top:12px; }
.google-button { min-height:48px; border:1px solid rgba(255,255,255,.16); border-radius:14px; background:#fff; color:#171717; font-weight:850; padding:0 15px; }
.google-g { display:inline-grid; place-items:center; width:24px; height:24px; margin-right:8px; border-radius:50%; font-weight:950; color:#4285f4; }
.ghost-button { min-height:44px; border:0; background:transparent; color:var(--muted); font-weight:750; }
.account-note { margin:11px 0 0; color:var(--muted); font-size:11px; line-height:1.5; }
.auth-divider { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:11px; margin:14px 0; }
.auth-divider::before,.auth-divider::after { content:""; height:1px; flex:1; background:var(--line); }
.auth-gate { min-height:100dvh; display:grid; place-items:center; padding:24px; background:radial-gradient(circle at 50% 10%,rgba(255,94,58,.12),transparent 38%),#080a09; }
.auth-card { width:min(430px,100%); padding:26px; border:1px solid var(--line); border-radius:24px; background:rgba(17,20,18,.94); box-shadow:0 24px 80px rgba(0,0,0,.35); }
.auth-card h1 { margin:10px 0 6px; font-size:28px; }
.auth-card > p { margin:0 0 18px; color:var(--muted); line-height:1.5; }
.auth-logo { color:var(--accent); font-weight:1000; letter-spacing:.18em; font-size:22px; }

/* PASIKUT identity — Porcelain / Ink / Signal Coral */
:root {
  --bg: #f6f2ec;
  --surface: #fffaf5;
  --surface-2: #e9e3db;
  --text: #182033;
  --muted: #6e7480;
  --line: rgba(27,34,48,.13);
  --accent: #ff5e3a;
  --accent-ink: #fffaf4;
  --danger: #c83f48;
  color: var(--text);
  background: var(--bg);
}
html, body { background: var(--bg); }
.brand-mark { background: var(--text); color: var(--bg); box-shadow: 0 0 0 7px rgba(255,94,58,.14); }
@keyframes breathe { to { transform: scale(1.045); box-shadow: 0 0 0 12px rgba(255,94,58,.08); } }
.app-shell { background: var(--bg); }
.app-header { background: rgba(243,239,232,.92); }
.bottom-nav { background: rgba(255,253,249,.96); }
.nav-item { color: #747985; }
.nav-item.active { color: var(--accent); }
.brand-word { letter-spacing: -.025em; font-weight: 900; }
.brand-word::after { width: 6px; height: 6px; margin-left: 6px; background: var(--accent); }
.page, .page-content { background: var(--bg); }
.primary-button { background: var(--text); color: #fffdf9; }
.secondary-button, .settings-card, .upload-status, .input, .textarea, .select, .chip { background: var(--surface); color: var(--text); }
.input, .textarea, .select { color: var(--text); }
.input:focus, .textarea:focus, .select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,94,58,.11); }
.field label, .profile-bio, .category-detail { color: #545a66; }
.upload-drop { border-color: rgba(255,94,58,.42); background: radial-gradient(circle at 50% 30%, #fffaf3, #ebe4db 72%); }
.upload-prompt strong { color: var(--text); }
.badge { background: rgba(255,94,58,.08); color: var(--accent); border-color: rgba(255,94,58,.2); }
.scout-card { background: linear-gradient(135deg, #fffdf9, #e9e3da); }
.profile-tabs { background: rgba(243,239,232,.95); }
.profile-tab.active { color: var(--text); }
.grid-video { background: #d8d3cc; }
.sheet { background: #fffdf9; }
.comment-form { background: #fffdf9; }
.comment-body p { color: var(--text); }
.onboarding { background: radial-gradient(circle at 70% 10%, rgba(255,94,58,.11), transparent 35%), var(--bg); }
.auth-gate { background: radial-gradient(circle at 50% 5%, rgba(255,94,58,.12), transparent 38%), var(--bg); }
.auth-card { background: var(--surface); color: var(--text); }
.admin-hero, .admin-settings-card { background: linear-gradient(135deg, #fff7ee, #f1dfd5); border-color: rgba(255,94,58,.2); }
/* Video itself stays cinema-black for proper media contrast. */
.feed-screen { background: #000; }

/* PASIKUT v2 — clean wordmark and icon treatment */
.brand-word { letter-spacing: .04em; font-weight: 900; font-size: 19px; }
.brand-word::after { display:none !important; }
.auth-logo { letter-spacing:.08em; font-weight:900; color:var(--text); }
.boot .brand-mark { width:76px; border-radius:24px; background:#182033; color:#f6f2ec; box-shadow:none; position:relative; font-size:0; }
.boot .brand-mark::before { content:"F"; font:900 38px/1 system-ui; }
.boot .brand-mark::after { content:""; position:absolute; width:26px; height:7px; border-radius:9px; background:#ff5e3a; left:37px; top:36px; }


/* PASIKUT v3 — Storm Blue / Sand / Signal Red. No white-screen, no black-green, no boxed letter logo. */
:root {
  --bg: #24345f;
  --surface: #2d416f;
  --surface-2: #35507f;
  --text: #f2e7d3;
  --muted: #bdc5d7;
  --line: rgba(242,231,211,.16);
  --accent: #ff765b;
  --accent-ink: #24345f;
  --danger: #ff8a8a;
  color: var(--text);
  background: var(--bg);
}
html, body { background: var(--bg) !important; color: var(--text); }
.boot { background: radial-gradient(circle at 50% 40%, #31497d 0%, #24345f 58%, #1d2a4d 100%); }
.boot-wordmark { position:relative; color:var(--text); font:900 clamp(34px,10vw,54px)/1 system-ui,-apple-system,sans-serif; letter-spacing:.055em; }
.boot-wordmark span { position:absolute; left:4%; right:4%; height:4px; border-radius:8px; bottom:-15px; background:var(--accent); transform:scaleX(.42); transform-origin:center; }
.brand-mark { display:none !important; }
.app-shell, .page, .page-content { background: var(--bg) !important; }
.app-header { background: rgba(36,52,95,.92) !important; border-bottom-color:var(--line); }
.bottom-nav { background: rgba(31,45,82,.97) !important; border-top-color:var(--line); }
.nav-item { color:#aeb8cf; }
.nav-item.active { color:var(--text); }
.nav-item.upload-nav svg { background:var(--accent); color:#fff5ee; box-shadow:0 6px 22px rgba(255,118,91,.26); }
.brand-word { color:var(--text); letter-spacing:.055em; font-size:19px; font-weight:900; }
.brand-word::after { display:none !important; }
.primary-button { background:var(--accent) !important; color:#fff7ef !important; box-shadow:0 8px 22px rgba(255,118,91,.2); }
.secondary-button,.settings-card,.upload-status,.input,.textarea,.select,.chip,.choice,.category-card,.scout-card,.admin-row { background:var(--surface) !important; color:var(--text) !important; }
.secondary-button { border-color:rgba(242,231,211,.18); }
.input,.textarea,.select { border-color:rgba(242,231,211,.18); }
.input:focus,.textarea:focus,.select:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(255,118,91,.14); }
.field label,.profile-bio,.category-detail { color:#d2d8e5 !important; }
.upload-drop { background:linear-gradient(155deg,#314a79,#25375f) !important; border-color:rgba(255,118,91,.42) !important; }
.upload-prompt strong { color:var(--text) !important; }
.badge { background:rgba(255,118,91,.12) !important; color:#ffad98 !important; border-color:rgba(255,118,91,.3) !important; }
.profile-tabs { background:rgba(36,52,95,.96) !important; }
.profile-tab.active { color:var(--text) !important; box-shadow:inset 0 -2px var(--accent); }
.grid-video { background:#1d2a4d !important; }
.sheet { background:#2a3d69 !important; }
.comment-form { background:#2a3d69 !important; }
.comment-body p { color:var(--text) !important; }
.onboarding { background:radial-gradient(circle at 72% 8%,rgba(255,118,91,.13),transparent 34%),linear-gradient(150deg,#2a3e6d,#24345f 62%,#1f2d52) !important; }
.auth-gate { background:radial-gradient(circle at 50% 8%,rgba(255,118,91,.14),transparent 36%),linear-gradient(150deg,#2d4475,#24345f 64%,#1f2d52) !important; }
.auth-card { background:rgba(45,65,111,.94) !important; color:var(--text) !important; border-color:var(--line); }
.auth-logo { color:var(--text) !important; letter-spacing:.055em; font-weight:900; }
.google-button { background:#f2e7d3 !important; color:#24345f !important; border:0; }
.admin-hero,.admin-settings-card { background:linear-gradient(135deg,rgba(255,118,91,.16),rgba(53,80,127,.72)) !important; border-color:rgba(255,118,91,.28) !important; }
.admin-entry-button,.admin-mini,.admin-touch { color:#ffb39f !important; border-color:rgba(255,118,91,.32) !important; background:rgba(255,118,91,.1) !important; }
.admin-circle { background:rgba(255,118,91,.15) !important; border-color:rgba(255,118,91,.38) !important; }
.toast { background:#182544 !important; color:var(--text); }
.toast.error { background:#6e3341 !important; }
.category-card { background:linear-gradient(145deg,#314b7c,#263963) !important; }
.empty-symbol { background:var(--surface) !important; }
/* Media stays near-black only inside actual video frames for correct contrast. */
.feed-screen,.video-item,.video-item video { background:#070b14 !important; }
.feed-top .icon-button,.video-action .action-circle,.mute-button { background:rgba(17,26,48,.5) !important; }
.follow-button { background:var(--accent) !important; border-color:var(--accent) !important; color:#fff7ef !important; }
.follow-button.following { background:rgba(36,52,95,.55) !important; border-color:rgba(242,231,211,.42) !important; color:var(--text) !important; }

/* PASIKUT v4 — Electric Blue / Black */
:root {
  --bg: #03060B;
  --surface: #08111F;
  --surface-2: #0D1A2E;
  --text: #F5F9FF;
  --muted: #8FA4C2;
  --line: rgba(77,163,255,.18);
  --accent: #1683FF;
  --accent-2: #4DA3FF;
  --accent-ink: #FFFFFF;
  --danger: #FF637A;
  color: var(--text);
  background: var(--bg);
}
html, body { background:var(--bg) !important; color:var(--text); }
.boot { background:radial-gradient(circle at 50% 38%,rgba(22,131,255,.24) 0%,#07101D 34%,#03060B 72%) !important; }
.boot-wordmark { color:var(--text) !important; text-shadow:0 0 34px rgba(22,131,255,.18); }
.boot-wordmark span { background:linear-gradient(90deg,var(--accent),var(--accent-2)) !important; box-shadow:0 0 18px rgba(22,131,255,.48); }
.app-shell,.page,.page-content { background:var(--bg) !important; }
.app-header { background:rgba(3,6,11,.90) !important; border-bottom-color:var(--line) !important; }
.bottom-nav { background:rgba(3,6,11,.96) !important; border-top-color:var(--line) !important; }
.nav-item { color:#7087A8 !important; }
.nav-item.active { color:var(--accent-2) !important; }
.nav-item.upload-nav svg { background:linear-gradient(145deg,var(--accent-2),var(--accent)) !important; color:white !important; box-shadow:0 7px 24px rgba(22,131,255,.34) !important; }
.brand-word,.auth-logo { color:var(--text) !important; }
.primary-button { background:linear-gradient(135deg,var(--accent-2),var(--accent)) !important; color:#fff !important; box-shadow:0 8px 24px rgba(22,131,255,.25) !important; }
.secondary-button,.settings-card,.upload-status,.input,.textarea,.select,.chip,.choice,.category-card,.scout-card,.admin-row { background:var(--surface) !important; color:var(--text) !important; border-color:var(--line) !important; }
.input,.textarea,.select { color:var(--text) !important; }
.input::placeholder,.textarea::placeholder { color:#617999 !important; }
.input:focus,.textarea:focus,.select:focus { border-color:var(--accent) !important; box-shadow:0 0 0 3px rgba(22,131,255,.16) !important; }
.field label,.profile-bio,.category-detail { color:#AFC0D8 !important; }
.upload-drop { background:radial-gradient(circle at 50% 28%,#102746 0%,#08111F 46%,#03060B 100%) !important; border-color:rgba(77,163,255,.46) !important; }
.badge { background:rgba(22,131,255,.13) !important; color:#74B7FF !important; border-color:rgba(77,163,255,.30) !important; }
.choice.selected { background:rgba(22,131,255,.14) !important; color:#75B8FF !important; border-color:var(--accent) !important; }
.profile-tabs { background:rgba(3,6,11,.96) !important; }
.profile-tab.active { color:var(--text) !important; box-shadow:inset 0 -2px var(--accent) !important; }
.grid-video { background:#050B14 !important; }
.sheet,.comment-form { background:#07101D !important; }
.sheet-handle { background:#294769 !important; }
.comment-body p { color:var(--text) !important; }
.onboarding { background:radial-gradient(circle at 75% 8%,rgba(22,131,255,.18),transparent 34%),linear-gradient(155deg,#07111F,#03060B 68%) !important; }
.auth-gate { background:radial-gradient(circle at 50% 9%,rgba(22,131,255,.20),transparent 35%),linear-gradient(155deg,#07111F,#03060B 70%) !important; }
.auth-card { background:rgba(8,17,31,.95) !important; color:var(--text) !important; border-color:var(--line) !important; box-shadow:0 28px 90px rgba(0,0,0,.54),0 0 0 1px rgba(22,131,255,.04) !important; }
.google-button { background:#0D1A2E !important; color:#F5F9FF !important; border:1px solid var(--line) !important; }
.admin-hero,.admin-settings-card { background:linear-gradient(135deg,rgba(22,131,255,.18),rgba(8,17,31,.95)) !important; border-color:rgba(77,163,255,.28) !important; }
.admin-entry-button,.admin-mini,.admin-touch { color:#78BAFF !important; border-color:rgba(77,163,255,.32) !important; background:rgba(22,131,255,.10) !important; }
.admin-circle,.admin-hero > span { background:rgba(22,131,255,.14) !important; border-color:rgba(77,163,255,.34) !important; }
.admin-row > p,.admin-mini.secondary,.admin-sheet-summary p { color:#C6D4E7 !important; }
.toast { background:#0A1930 !important; color:var(--text) !important; border:1px solid rgba(77,163,255,.18); }
.toast.error { background:#30101A !important; border-color:rgba(255,99,122,.24); }
.category-card { background:linear-gradient(145deg,#0C1D34,#06101E) !important; }
.empty-symbol { background:var(--surface) !important; color:var(--accent-2) !important; }
.feed-screen,.video-item,.video-item video { background:#010306 !important; }
.feed-top .icon-button,.video-action .action-circle,.mute-button { background:rgba(3,8,16,.58) !important; border-color:rgba(77,163,255,.12) !important; }
.feed-tab.active::after { background:var(--accent-2) !important; }
.follow-button { background:var(--accent) !important; border-color:var(--accent) !important; color:#fff !important; }
.follow-button.following { background:rgba(8,17,31,.60) !important; border-color:rgba(143,164,194,.45) !important; color:var(--text) !important; }
.stage-badge,.accent,.admin-video-action,.admin-sheet-summary strong,.admin-state-grid strong,.rank-row:first-of-type .rank-number { color:var(--accent-2) !important; }
.spinner { border-color:rgba(77,163,255,.17) !important; border-top-color:var(--accent-2) !important; }
.avatar { background:linear-gradient(135deg,#10233D,#050A12) !important; border-color:rgba(77,163,255,.32) !important; }


/* PASIKUT v2.2 — refined blue/black identity + CEO controls */
:root{
  --bg:#02050a !important;
  --surface:#070d16 !important;
  --surface-2:#0b1422 !important;
  --card:#08111d !important;
  --text:#f5f9ff !important;
  --muted:#8fa1b8 !important;
  --accent:#1683ff !important;
  --accent-2:#55b7ff !important;
  --line:rgba(98,176,255,.16) !important;
}
html,body,#app{background:#02050a !important;color:var(--text) !important}
.app-header,.bottom-nav,.sheet,.auth-card,.settings-card,.scout-card{
  background:rgba(5,11,19,.96) !important;
  border-color:rgba(83,164,255,.14) !important;
}
.brand-word,.auth-logo{
  color:#f5f9ff !important;
  font-weight:950 !important;
  letter-spacing:.045em !important;
  text-shadow:none !important;
}
.brand-p{
  color:#1683ff !important;
  font-weight:1000 !important;
  display:inline-block;
  margin-right:.015em;
}
.primary-button,.upload-nav{
  background:linear-gradient(135deg,#0d6fe8,#1683ff 55%,#49adff) !important;
  color:#fff !important;
  border-color:rgba(99,184,255,.28) !important;
  box-shadow:0 10px 28px rgba(22,131,255,.18) !important;
}
.secondary-button,.ghost-button,.input,.textarea,.select{
  background:#07101b !important;
  border-color:rgba(93,172,255,.15) !important;
  color:var(--text) !important;
}
.nav-item.active,.accent,.profile-tab.active{color:#3f9dff !important}
.badge.ceo-badge{
  color:#dff0ff !important;
  background:linear-gradient(135deg,rgba(15,112,232,.3),rgba(22,131,255,.12)) !important;
  border:1px solid rgba(86,177,255,.38) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
}
.badge.ceo-badge.pending{
  color:#9acbff !important;
  border-style:dashed !important;
  background:rgba(22,131,255,.08) !important;
}
.admin-profile-strip{padding-top:2px !important}
.admin-entry-button,.admin-mini,.admin-touch{
  color:#beddff !important;
  border:1px solid rgba(76,169,255,.32) !important;
  background:linear-gradient(180deg,rgba(22,131,255,.16),rgba(22,131,255,.08)) !important;
}
.admin-entry-button:first-child{box-shadow:0 8px 24px rgba(22,131,255,.12) !important}
.admin-hero,.admin-settings-card{
  background:
    radial-gradient(circle at 8% 0%,rgba(58,155,255,.16),transparent 42%),
    linear-gradient(135deg,#071321,#050b13) !important;
  border:1px solid rgba(77,169,255,.28) !important;
}
.admin-circle,.admin-hero>span{
  background:rgba(22,131,255,.14) !important;
  border:1px solid rgba(76,169,255,.28) !important;
}
.feed-top .icon-button,.video-action .action-circle,.mute-button{
  background:rgba(2,7,13,.68) !important;
  border-color:rgba(80,167,255,.13) !important;
}


/* PASIKUT v2.2 micro-polish */
.app-header{box-shadow:0 1px 0 rgba(66,157,255,.12),0 10px 30px rgba(0,0,0,.24) !important}
.primary-button:active,.admin-entry-button:active{transform:scale(.985)}
.brand-word::after{box-shadow:0 0 12px rgba(63,157,255,.55) !important}


/* PASIKUT v4 PWA / installed-app experience */
html { background:#02050a; }
body { overscroll-behavior-y:none; -webkit-tap-highlight-color:transparent; }
@media (display-mode: standalone) {
  body { user-select:none; -webkit-user-select:none; }
  input,textarea { user-select:text; -webkit-user-select:text; }
  .app-header { padding-top:max(env(safe-area-inset-top), 8px) !important; }
  .bottom-nav { padding-bottom:max(env(safe-area-inset-bottom), 10px) !important; }
}
.pwa-splash{
  position:fixed; inset:0; z-index:100000; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 38%,rgba(22,131,255,.24),#06101d 33%,#02050a 72%);
  opacity:1; visibility:visible; transition:opacity .36s ease,visibility .36s ease;
}
.pwa-splash.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.pwa-splash-icon{width:116px;height:116px;border-radius:30px;overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.52),0 0 56px rgba(22,131,255,.22)}
.pwa-splash-icon img{display:block;width:100%;height:100%}
.pwa-splash-name{margin-top:24px;font-size:28px;font-weight:950;letter-spacing:.16em;color:#f5f9ff}
.pwa-splash-tag{margin-top:8px;font-size:10px;font-weight:800;letter-spacing:.22em;color:#5ab5ff}
.pwa-install-nudge{
  position:fixed; z-index:98000; left:12px; right:12px; bottom:calc(84px + env(safe-area-inset-bottom));
  display:grid; grid-template-columns:48px 1fr auto 28px; gap:10px; align-items:center; padding:10px 10px 10px 11px;
  background:rgba(7,13,22,.96); border:1px solid rgba(83,164,255,.25); border-radius:18px;
  box-shadow:0 18px 52px rgba(0,0,0,.5),0 0 28px rgba(22,131,255,.08); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px)
}
.pwa-install-nudge[hidden]{display:none!important}
.pwa-install-nudge img{width:48px;height:48px;border-radius:13px}
.pwa-install-nudge div{min-width:0;display:flex;flex-direction:column;gap:3px}
.pwa-install-nudge strong{font-size:14px;color:#f5f9ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pwa-install-nudge span{font-size:11px;color:#8fa1b8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pwa-install-action{border:0;border-radius:12px;padding:10px 13px;background:linear-gradient(135deg,#0d6fe8,#1683ff 60%,#49adff);color:#fff;font-weight:900}
.pwa-install-close{border:0;background:transparent;color:#71859f;font-size:24px;line-height:1;padding:0}
.pwa-ios-sheet{position:fixed;inset:0;z-index:99000;background:rgba(0,0,0,.63);display:flex;align-items:flex-end;justify-content:center;padding:12px;padding-bottom:max(12px,env(safe-area-inset-bottom));backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.pwa-ios-sheet[hidden]{display:none!important}
.pwa-ios-card{width:min(100%,520px);background:#07101b;border:1px solid rgba(83,164,255,.22);border-radius:28px;padding:10px 20px 20px;box-shadow:0 28px 90px rgba(0,0,0,.62);color:#f5f9ff}
.pwa-ios-grabber{width:42px;height:5px;border-radius:999px;background:#2e425b;margin:2px auto 18px}
.pwa-ios-card>img{width:68px;height:68px;border-radius:18px;display:block;margin:0 auto 12px}
.pwa-ios-card h2{text-align:center;margin:0;font-size:23px}
.pwa-ios-card>p{text-align:center;color:#9db0c8;line-height:1.45;margin:8px auto 18px;max-width:330px;font-size:14px}
.pwa-ios-card ol{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:10px}
.pwa-ios-card li{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:center;padding:12px;background:#0a1524;border:1px solid rgba(83,164,255,.13);border-radius:15px;color:#dce9f7;font-size:14px}
.pwa-ios-card li>b{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:rgba(22,131,255,.14);color:#55b7ff}
.share-glyph{display:inline-grid;place-items:center;margin-left:4px;width:22px;height:22px;border:1px solid rgba(85,183,255,.4);border-radius:6px;color:#55b7ff;font-weight:900}
.install-settings-icon{width:54px;height:54px;border-radius:15px;float:right;margin-left:14px}
.install-settings-card p{max-width:430px}