:root { color-scheme:var(--tg-color-scheme,dark); --bg:var(--tg-theme-bg-color,#0d1822); --panel:var(--tg-theme-secondary-bg-color,#162735); --panel-2:var(--tg-theme-section-bg-color,#203747); --text:var(--tg-theme-text-color,#f4f7fa); --muted:var(--tg-theme-hint-color,#91a6b8); --accent:var(--tg-theme-button-color,#45a9e6); --accent-text:var(--tg-theme-button-text-color,#fff); --line:var(--tg-theme-section-separator-color,#294252); --good:#42d39a; }
* { box-sizing:border-box; } html,body { min-height:var(--tg-viewport-stable-height,100dvh); } body { margin:0; background:var(--bg); color:var(--text); font:15px/1.45 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-tap-highlight-color:transparent; } button { min-height:44px; border:0; color:inherit; background:none; font:inherit; cursor:pointer; touch-action:manipulation; }
.view { width:100%; max-width:760px; min-height:var(--tg-viewport-stable-height,100dvh); margin:0 auto; padding:calc(14px + var(--tg-safe-area-inset-top,0px) + var(--tg-content-safe-area-inset-top,0px)) calc(16px + var(--tg-safe-area-inset-right,0px)) calc(82px + var(--tg-safe-area-inset-bottom,0px) + var(--tg-content-safe-area-inset-bottom,0px)) calc(16px + var(--tg-safe-area-inset-left,0px)); }
.app-header { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; margin-bottom:22px; }.app-header h1 { margin:3px 0 2px; font-size:27px; letter-spacing:-.02em; }.app-header p { color:var(--muted); margin:0; }.eyebrow,.welcome-label { color:var(--accent); font-size:11px; font-weight:800; letter-spacing:.1em; }.header-menu { color:var(--muted); font-size:20px; letter-spacing:2px; }
.welcome { display:flex; align-items:flex-end; justify-content:space-between; gap:15px; background:linear-gradient(135deg,#17364b,#1d2b3b); border:1px solid #2d5368; border-radius:16px; padding:19px; margin-bottom:12px; }.welcome h2 { max-width:240px; margin:6px 0; font-size:21px; line-height:1.15; }.welcome p { max-width:290px; color:#b7cbd7; margin:0; }.primary { background:var(--accent); color:var(--accent-text); font-weight:750; border-radius:10px; padding:10px 15px; white-space:nowrap; }.full-width { width:100%; margin-top:16px; }
.metric-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:12px 0 23px; }.metric { text-align:left; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px; }.metric span,.metric small { display:block; color:var(--muted); font-size:12px; }.metric strong { display:block; margin:2px 0; font-size:24px; }.section-heading { display:flex; justify-content:space-between; align-items:center; gap:10px; margin:22px 0 10px; }.section-heading h2 { margin:0; font-size:17px; }.text-action { color:var(--accent); font-size:13px; }
.card-list { display:grid; gap:8px; }.giveaway-card { display:flex; align-items:center; width:100%; gap:10px; padding:13px; text-align:left; background:var(--panel); border:1px solid var(--line); border-radius:12px; transition:border-color .18s,background .18s; }.giveaway-card:active,.giveaway-card:hover { background:var(--panel-2); border-color:var(--accent); }.card-main { flex:1; min-width:0; }.card-title,.card-subtitle,.card-meta { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.card-title { font-weight:700; }.card-subtitle { color:var(--muted); margin-top:2px; }.card-meta { display:flex; gap:9px; color:var(--muted); font-size:12px; margin-top:8px; }.card-prize { color:var(--good); font-weight:700; max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.chevron { color:var(--muted); font-size:25px; }.status { display:inline-flex; align-items:center; width:max-content; border-radius:999px; padding:3px 7px; font-size:11px; font-weight:750; }.status.live { color:var(--good); background:#163b36; }.status.ended { color:var(--muted); background:#29333b; }
.segmented { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; background:var(--panel); padding:4px; border-radius:10px; margin-bottom:14px; }.segmented button { min-height:36px; color:var(--muted); border-radius:7px; font-size:13px; }.segmented .selected { background:var(--panel-2); color:var(--text); font-weight:700; }.bottom-nav { position:fixed; z-index:3; left:0; right:0; bottom:0; display:flex; justify-content:center; gap:3px; padding:7px 12px calc(7px + var(--tg-safe-area-inset-bottom,0px)); background:color-mix(in srgb,var(--bg) 92%,transparent); border-top:1px solid var(--line); backdrop-filter:blur(14px); }.nav-item { flex:1; max-width:150px; min-height:50px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; color:var(--muted); font-size:11px; border-radius:9px; }.nav-item.active { color:var(--accent); background:var(--panel); }.nav-icon { font-size:20px; line-height:1; }
.empty,.notice { padding:17px; color:var(--muted); text-align:center; background:var(--panel); border:1px dashed var(--line); border-radius:12px; }.notice { text-align:left; margin-top:18px; }.notice strong { color:var(--text); }.notice p { margin:5px 0 0; }.admin-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; }.admin-action { display:flex; align-items:center; gap:10px; min-height:76px; padding:12px; text-align:left; background:var(--panel); border:1px solid var(--line); border-radius:12px; }.admin-action strong,.admin-action small,.chat-row strong,.chat-row small { display:block; }.admin-action small,.chat-row small { color:var(--muted); font-size:12px; margin-top:2px; }.action-icon { display:grid; place-items:center; width:34px; height:34px; border-radius:9px; color:var(--accent); background:#1f4357; font-size:18px; }
.detail-view { padding-top:calc(10px + var(--tg-safe-area-inset-top,0px)); }.back-link { color:var(--accent); padding:5px 0 16px; }.detail-hero { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:18px; }.detail-hero h1 { margin:12px 0 6px; font-size:25px; }.detail-hero p { color:var(--muted); }.detail-prize { color:var(--good); font-size:24px; font-weight:800; margin:20px 0 16px; }.entry-banner { display:flex; flex-direction:column; gap:2px; margin-top:10px; padding:13px; border-left:3px solid var(--good); background:#14372f; border-radius:8px; }.entry-banner span { color:#afd8ca; font-size:13px; }.chat-row { display:flex; align-items:center; gap:10px; padding:12px; background:var(--panel); border:1px solid var(--line); border-radius:11px; }.chat-avatar { display:grid; place-items:center; width:34px; height:34px; flex:none; border-radius:50%; color:var(--accent); background:#1e4054; font-weight:800; }.loading { min-height:70vh; display:grid; place-content:center; justify-items:center; color:var(--muted); gap:12px; }.spinner { width:22px; height:22px; border:3px solid var(--line); border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; }.error { margin:20px; padding:16px; color:#ffdce2; background:#482632; border:1px solid #9a4a5a; border-radius:12px; }.error p { margin-top:5px; }
@keyframes spin { to { transform:rotate(360deg); } } @media (max-width:390px) { .welcome { display:block; }.welcome .primary { margin-top:15px; }.metric-grid { gap:6px; }.metric { padding:10px; }.metric strong { font-size:21px; } } @media (prefers-reduced-motion:reduce) { * { animation-duration:.01ms !important; transition-duration:.01ms !important; } }
.manage-form { display:grid; gap:11px; margin-top:10px; }.manage-form label { display:grid; gap:5px; color:var(--muted); font-size:13px; }.manage-form input,.manage-form textarea { width:100%; border:1px solid var(--line); border-radius:9px; padding:10px; color:var(--text); background:var(--panel); font:inherit; }.manage-form input[type="checkbox"] { width:18px; height:18px; accent-color:var(--accent); }.toggle-grid { display:grid; gap:8px; }.toggle-grid label { display:flex; grid-template-columns:none; align-items:center; gap:8px; padding:8px 10px; background:var(--panel); border-radius:8px; }.save-status { min-height:20px; color:var(--good); font-size:13px; }
.menu-stack{display:grid;gap:9px}.menu-button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;padding:15px;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:12px}.menu-button:active{background:var(--panel-2)}.menu-button strong{font-size:16px}.menu-button small{color:var(--muted)}