/* Design tokens */
:root {
 --bg:#101113; --surface:#191a1d; --surface-2:#202125; --border:#303034;
 --text:#eee9df; --muted:#a7a39a; --gold:#cbb183; --red:#913744;
 --success:#a8c7aa; --danger:#e6a0a7; --radius:16px;
 --safe-top:max(env(safe-area-inset-top,0px),var(--tg-safe-top,0px));
 --safe-bottom:max(env(safe-area-inset-bottom,0px),var(--tg-safe-bottom,0px));
 --safe-left:max(env(safe-area-inset-left,0px),var(--tg-safe-left,0px));
 --safe-right:max(env(safe-area-inset-right,0px),var(--tg-safe-right,0px));
 color-scheme:dark;
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { background:var(--bg); scroll-padding-bottom:110px; }
body { margin:0; color:var(--text); background:var(--bg); font:14px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; min-height:100vh; min-height:100dvh; }
button,input,select,textarea { font:inherit; }
button,a,input,textarea,select { touch-action:manipulation; }
button,a { -webkit-user-select:none; user-select:none; }
a { color:inherit; text-decoration:none; }
button { cursor:pointer; color:inherit; }
button:disabled { cursor:default; opacity:.5; }
button[aria-busy="true"] { opacity:.7; cursor:wait; }
button[aria-busy="true"]::after { content:""; width:13px; height:13px; flex:none; display:inline-block; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:spin .7s linear infinite; margin-left:8px; }
:focus-visible { outline:2px solid var(--gold); outline-offset:4px; }
[hidden] { display:none!important; }
img { display:block; max-width:100%; }
h1,h2,h3,p { margin:0; }
h1,h2,h3 { font-family:Georgia,"Times New Roman",serif; font-weight:400; line-height:1.18; }
h1 { font-size:34px; letter-spacing:-.7px; overflow-wrap:anywhere; }
h2 { font-size:23px; }
h3 { font-size:24px; }
p { overflow-wrap:anywhere; }
small { font-size:11px; }
strong { font-weight:600; }
#app { max-width:660px; margin:auto; padding:calc(20px + var(--safe-top)) calc(22px + var(--safe-right)) calc(116px + var(--safe-bottom)) calc(22px + var(--safe-left)); min-height:var(--app-height,100dvh); }
#view { outline:none; }
.app-header { display:flex; justify-content:space-between; align-items:center; gap:12px; padding-bottom:21px; border-bottom:1px solid var(--border); margin-bottom:29px; }
.brand { display:flex; align-items:center; gap:10px; min-width:0; }
.brand>span { font:17px Georgia,serif; letter-spacing:1.8px; white-space:nowrap; }
.brand i { color:var(--gold); font-size:14px; }
.brand small { display:block; font:8px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; letter-spacing:1.1px; color:var(--muted); margin-top:5px; }
.admin-link { display:flex; align-items:center; gap:5px; color:var(--gold); font-size:21px; padding:4px; min-height:44px; }
.admin-link span { font-size:10px; letter-spacing:.2px; }
.eyebrow { display:block; font-size:9px; font-weight:600; letter-spacing:2px; color:var(--gold); text-transform:uppercase; }
.muted,.caption { color:var(--muted); }
.caption { font-size:12px; margin:12px 0; }
.success { color:var(--success); }
.icon { width:20px; height:20px; flex:none; display:inline-block; vertical-align:middle; }
.icon.small { width:14px; height:14px; }
.page-heading { margin-bottom:25px; }
.page-heading h1 { margin:9px 0 10px; }
.page-heading p { max-width:42ch; font-size:13px; }
.back-link { display:inline-flex; align-items:center; gap:7px; color:var(--muted); font-size:12px; min-height:44px; margin:-14px 0 12px; }
.section-heading { margin:30px 0 14px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.section-heading h2 { font-size:23px; }
.section-heading>a { display:inline-flex; align-items:center; gap:6px; font-size:11px; color:var(--gold); min-height:40px; }
.section-heading>a .icon { width:14px; height:14px; }
.panel { border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); padding:20px; margin-bottom:14px; }
.button { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:49px; padding:13px 15px; border:1px solid transparent; border-radius:9px; font-size:13px; font-weight:600; transition:transform .15s,background .15s; text-align:center; }
.button:active:not(:disabled) { transform:scale(.985); }
.button.primary { color:#f8f0e6; background:var(--red); border-color:#b55c6840; }
.button.secondary { background:var(--surface-2); border-color:var(--border); }
.button.danger,.icon-button.danger { color:var(--danger); background:#49252b55; border-color:#694047; }
.button-row { display:flex; gap:10px; }
.text-button { display:inline-flex; align-items:center; justify-content:center; gap:7px; border:0; background:none; color:var(--gold); min-height:44px; font-size:12px; padding:6px; }
.icon-button { display:inline-grid; place-items:center; width:44px; height:44px; border:1px solid var(--border); border-radius:10px; background:var(--surface); flex:none; }
.badge { display:inline-flex; align-items:center; border:1px solid #8e77503f; color:var(--gold); border-radius:4px; padding:3px 7px; font-size:9px; white-space:nowrap; }
.badge.green { border-color:#648a6444; color:var(--success); }
.bottom-nav { position:fixed; z-index:10; bottom:0; left:50%; transform:translateX(-50%); width:min(100%,660px); display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); padding:9px max(9px,var(--safe-right)) calc(11px + var(--safe-bottom)) max(9px,var(--safe-left)); background:#151619f5; border-top:1px solid #3a3833; backdrop-filter:blur(14px); }
.bottom-nav a { display:flex; flex-direction:column; gap:5px; align-items:center; justify-content:center; min-height:49px; color:#92918d; font-size:9px; position:relative; }
.bottom-nav .icon { width:21px; height:21px; }
.bottom-nav a.active { color:var(--gold); }
.bottom-nav a.active::before { content:""; position:absolute; height:2px; width:18px; background:var(--gold); top:-9px; border-radius:2px; }
.keyboard-open .bottom-nav { display:none; }
.segmented { display:flex; background:#17181a; border:1px solid var(--border); border-radius:10px; padding:4px; gap:3px; margin-bottom:19px; }
.segmented>* { flex:1; min-width:0; min-height:42px; display:flex; align-items:center; justify-content:center; border:0; border-radius:7px; background:none; color:var(--muted); font-size:12px; padding:6px; }
.segmented .selected { background:#2a2926; color:var(--gold); box-shadow:0 2px 6px #0002; }
.empty-state { text-align:center; padding:27px 18px; background:#18191b; border:1px solid var(--border); border-radius:var(--radius); }
.empty-state h3 { margin:10px 0; font-size:23px; }
.empty-state p { color:var(--muted); font-size:13px; margin-bottom:12px; }
.empty-state .button { margin-top:16px; }
.empty-symbol { color:var(--gold); }
.quiet-empty { color:var(--muted); padding:20px; border:1px dashed #45423b; border-radius:12px; font-size:13px; }
.notice { display:flex; align-items:flex-start; gap:11px; color:var(--muted); font-size:12px; padding:15px; border:1px solid #423b30; background:#24211855; border-radius:10px; margin:17px 0; }
.notice .icon { color:var(--gold); }
input,textarea,select { width:100%; min-width:0; background:#121315; color:var(--text); border:1px solid #414044; border-radius:8px; padding:13px; font-size:16px; min-height:48px; }
textarea { resize:vertical; }
input::placeholder,textarea::placeholder { color:#87847e; font-size:13px; }
input:focus,textarea:focus,select:focus { outline:1px solid var(--gold); border-color:var(--gold); }
label { display:block; color:var(--muted); font-size:12px; }
.confirm-dialog { width:min(calc(100% - 32px),410px); max-height:calc(100dvh - 50px); overflow:auto; color:var(--text); background:#202124; border:1px solid #514939; border-radius:18px; padding:26px; box-shadow:0 30px 100px #0009; }
.confirm-dialog::backdrop { background:#050608c9; backdrop-filter:blur(4px); }
.confirm-dialog h2 { margin:10px 0; font-size:27px; }
.confirm-dialog p { color:var(--muted); font-size:13px; margin:15px 0 25px; }
#toast { position:fixed; z-index:30; bottom:calc(96px + var(--safe-bottom)); left:50%; transform:translate(-50%,12px); width:max-content; max-width:calc(100% - 36px); background:#e8e2d8; color:#24221f; padding:13px 18px; border-radius:10px; font-size:13px; box-shadow:0 10px 35px #0008; opacity:0; visibility:hidden; transition:opacity .2s,transform .2s; pointer-events:none; }
#toast.show { opacity:1; visibility:visible; transform:translate(-50%,0); }
#toast.error { background:#f0c9c9; }
.keyboard-open #toast { bottom:24px; }
.dev-indicator { margin:-16px 0 22px; font-size:10px; color:var(--gold); }
.skeleton { height:110px; border-radius:var(--radius); margin:16px 0; background:#242427; animation:pulse 1.3s ease-in-out infinite alternate; }
.hero-skeleton { height:330px; }
.auth-screen { text-align:center; padding:50px 15px; }
.auth-screen>img { margin:0 auto 28px; }
.auth-screen h1 { margin:16px 0; line-height:1.2; }
.auth-screen p { margin:20px 0 30px; color:var(--muted); }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes pulse { to { opacity:.45; } }
@keyframes breathe { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-5px); } }
@media(min-width:760px) {
 body { background:#0b0c0e; }
 #app { background:var(--bg); border-left:1px solid #242529; border-right:1px solid #242529; padding-left:32px; padding-right:32px; }
 #app.admin-layout { max-width:820px; }
 .app-header { margin-top:10px; }
}
@media(max-width:360px) {
 #app { padding-left:calc(16px + var(--safe-left)); padding-right:calc(16px + var(--safe-right)); }
 .brand { gap:6px; } .brand>img { width:28px; height:28px; }
 .brand>span { font-size:15px; letter-spacing:1px; } .brand small { font-size:7px; letter-spacing:.7px; }
 .admin-link span { font-size:9px; } .admin-link { gap:3px; font-size:18px; }
 .section-heading h2 { font-size:21px; } h1 { font-size:30px; }
 .bottom-nav a { font-size:8px; }
}
@media(prefers-reduced-motion:reduce) {
 *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}