:root { --bg:#050d12; --surface:#0b171d; --surface-2:#101f27; --line:rgba(255,255,255,.1); --text:#edf5f7; --muted:#96a9b2; --accent:#d2ff00; --danger:#ff7373; }
* { box-sizing:border-box; }
html { background:var(--bg); }
body { margin:0; color:var(--text); background:radial-gradient(circle at 85% -5%,rgba(210,255,0,.09),transparent 30%),var(--bg); font-family:Rubik,Arial,sans-serif; }
button,a { font:inherit; }
.app-page { width:min(760px,100%); min-height:100dvh; margin:auto; padding:18px 14px 118px; }
.page-head { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:22px; }
.page-brand { width:108px; height:auto; }
.page-kicker { margin:0 0 5px; color:var(--accent); font-size:11px; font-weight:900; letter-spacing:.12em; }
.page-title { margin:0; font-size:clamp(27px,8vw,38px); line-height:1.05; }
.page-intro { margin:8px 0 0; color:var(--muted); font-size:14px; line-height:1.5; }
.page-section { margin-top:18px; padding:16px; border:1px solid var(--line); border-radius:20px; background:linear-gradient(155deg,rgba(17,34,42,.95),rgba(7,19,25,.96)); box-shadow:0 12px 34px rgba(0,0,0,.18); }
.section-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:13px; }
.section-head h2 { margin:0; font-size:18px; }
.section-summary { margin:3px 0 0; color:var(--muted); font-size:12px; line-height:1.4; }
.primary-action,.secondary-action,.danger-action { min-height:44px; display:inline-flex; align-items:center; justify-content:center; padding:0 14px; border-radius:12px; text-decoration:none; font-size:12px; font-weight:900; cursor:pointer; touch-action:manipulation; }
.primary-action { border:1px solid var(--accent); color:#071018; background:var(--accent); }
.secondary-action { border:1px solid var(--line); color:var(--text); background:rgba(255,255,255,.045); }
.danger-action { border:1px solid rgba(255,115,115,.26); color:var(--danger); background:rgba(255,115,115,.07); }
.primary-action:disabled,.secondary-action:disabled,.danger-action:disabled { opacity:.48; cursor:not-allowed; }
.card-list { display:grid; gap:11px; }
.item-card { overflow:hidden; border:1px solid var(--line); border-radius:16px; background:rgba(3,12,17,.54); }
.item-body { min-width:0; padding:13px; }
.item-title-row { display:flex; flex-wrap:wrap; align-items:center; gap:7px; }
.item-title { min-width:0; overflow:hidden; margin:0; color:var(--text); font-size:14px; font-weight:900; text-overflow:ellipsis; white-space:nowrap; }
.item-meta { margin:7px 0 0; color:var(--muted); font-size:11px; line-height:1.45; }
.item-actions { display:flex; flex-wrap:wrap; gap:7px; margin-top:11px; }
.item-actions > * { flex:1 1 auto; }
.pill { padding:4px 8px; border:1px solid rgba(210,255,0,.22); border-radius:999px; color:var(--accent); background:rgba(210,255,0,.07); font-size:9px; font-weight:900; }
.pill.blue { border-color:rgba(72,179,255,.25); color:#7fcaff; background:rgba(72,179,255,.08); }
.media-card { display:block; }
.media-thumb { position:relative; width:100%; min-height:0; overflow:hidden; aspect-ratio:16/9; border-bottom:1px solid var(--line); background:#071116; }
.media-thumb img,.media-thumb video { width:100%; height:100%; display:block; object-fit:contain; background:#050d12; }
.media-placeholder { height:100%; display:grid; place-items:center; color:var(--accent); font-size:26px; }
.empty-state { padding:25px 12px; color:var(--muted); text-align:center; font-size:13px; line-height:1.55; }
.loading-skeleton { height:92px; border-radius:16px; background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.09),rgba(255,255,255,.04)); background-size:200% 100%; animation:shimmer 1.2s infinite; }
.page-status { min-height:20px; margin:10px 0 0; color:var(--muted); font-size:12px; }
.page-status.error { color:#ff9a9a; }
.segmented { display:grid; grid-template-columns:1fr 1fr; gap:5px; margin:14px 0; padding:4px; border:1px solid var(--line); border-radius:14px; background:rgba(0,0,0,.2); }
.segment { min-height:44px; border:0; border-radius:10px; color:var(--muted); background:transparent; font-weight:900; cursor:pointer; }
.segment[aria-selected="true"] { color:#071018; background:var(--accent); }
[hidden] { display:none !important; }
@keyframes shimmer { to { background-position:-200% 0; } }
@media (max-width:520px) { .page-section{padding:13px} .item-actions>*{min-width:calc(50% - 4px)} }
@media (prefers-reduced-motion:reduce) { .loading-skeleton{animation:none} }