/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; cursor: none !important; }

/* ===== DEFAULT (ТЁМНАЯ) ТЕМА ===== */
:root {
  --bg:       #100c04;
  --panel:    #0d0900;
  --win:      #0f0b03;
  --border:   #3a2800;
  --borderg:  #6a4400;
  --text:     #c8a060;
  --textd:    #5a3e18;
  --accent:   #ff6600;
  --accent2:  #ffaa00;
  --adminc:   #cc1100;
  --resonc:   #00aa44;
  --cursec:   #aa0066;
  --link:     #ff8844;
  --linkv:    #aa5522;
  --titlebar: linear-gradient(180deg,#5a1a00,#2a0800);
  --sel-bg:   #3a0000;
  --sel-fg:   #ff4400;
  --spark:    #ff6600;
  --btn:      #1e1400;
  --btnhi:    #2e1e00;
  --input:    #080500;
  --tab-bg:   #080500;
}

/* ===== ТЕМА: ОЗАРЕНИЕ (Стерильная больничная белизна) ===== */
body.theme-light {
  --bg:       #eef2f5;
  --panel:    #f8fbfd;
  --win:      #ffffff;
  --border:   #c0c8d0;
  --borderg:  #9faab5;
  --text:     #0f1419;
  --textd:    #5c6a79;
  --accent:   #0055cc;
  --accent2:  #0044aa;
  --adminc:   #cc0000;
  --resonc:   #008833;
  --cursec:   #990044;
  --link:     #0055cc;
  --linkv:    #003399;
  --titlebar: linear-gradient(180deg,#ffffff,#e8eef3);
  --sel-bg:   #b3d4ff;
  --sel-fg:   #002266;
  --spark:    #0055cc;
  --btn:      #ffffff;
  --btnhi:    #eef2f5;
  --input:    #ffffff;
  --tab-bg:   #e8eef3;
}

/* ===== ТЕМА: ТЕХНОКРАТИЯ (Windows XP) ===== */
body.theme-xp {
  --bg:       #0058b8;
  --panel:    #ece9d8;
  --win:      #ffffff;
  --border:   #0055ea;
  --borderg:  #003fba;
  --text:     #000000;
  --textd:    #333333;
  --accent:   #cc3300;
  --accent2:  #0055cc;
  --adminc:   #cc0000;
  --resonc:   #007700;
  --cursec:   #880000;
  --link:     #0000ee;
  --linkv:    #551a8b;
  --titlebar: linear-gradient(180deg,#0a6edd,#003fba);
  --sel-bg:   #0058e6;
  --sel-fg:   #ffffff;
  --spark:    #ff6600;
  --btn:      #ece9d8;
  --btnhi:    #f5f4ea;
  --input:    #ffffff;
  --tab-bg:   #d4d0c8;
}

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: Tahoma, 'MS Sans Serif', sans-serif;
  font-size: 11px;
  -webkit-font-smoothing: none;
  font-smooth: never;
  min-height: 100vh;
  overflow-x: hidden;
  padding-bottom: 32px;
}

::selection { background: var(--sel-bg); color: var(--sel-fg); text-shadow: 0 0 4px var(--sel-fg); }
a { color: var(--link); } a:visited { color: var(--linkv); }

/* SCANLINES */
body::after {
  content:''; position:fixed; inset:0;
  background: repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.09) 2px,rgba(0,0,0,0.09) 4px);
  pointer-events:none; z-index:9990;
}
body.theme-light::after, body.theme-xp::after {
  background: repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.03) 2px,rgba(0,0,0,0.03) 4px);
}

/* ===== CURSOR ===== */
#cur-layer { position:fixed; inset:0; pointer-events:none; z-index:99999; }
.spark {
  position:absolute; width:3px; height:3px; border-radius:50%;
  background:var(--spark); box-shadow:0 0 5px var(--spark);
  transform:translate(-50%,-50%); pointer-events:none;
  transition: background .1s, box-shadow .1s;
}
.spark-main {
  position:absolute; width:5px; height:5px; border-radius:50%;
  background:var(--spark); box-shadow:0 0 8px var(--spark), 0 0 16px rgba(255,102,0,.4);
  transform:translate(-50%,-50%); pointer-events:none;
  animation: sparkCore .25s infinite alternate;
}
body.theme-light .spark-main { box-shadow:0 0 8px var(--spark), 0 0 16px rgba(0,85,204,.4); }
@keyframes sparkCore { from{transform:translate(-50%,-50%) scale(1)} to{transform:translate(-50%,-50%) scale(1.5)} }

/* ===== WINDOWS ===== */
.win {
  border: 1px solid var(--border);
  box-shadow: inset 1px 1px 0 rgba(255,200,100,.04), inset -1px -1px 0 rgba(0,0,0,.5),
              0 0 18px rgba(255,100,0,.08), 0 4px 20px rgba(0,0,0,.7);
  background: var(--win);
}
body.theme-light .win, body.theme-xp .win {
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.6), inset -1px -1px 0 rgba(0,0,0,.15),
              1px 1px 4px rgba(0,0,0,.15);
}
.win-title {
  background: var(--titlebar); padding:3px 6px;
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--border); user-select:none;
}
.win-title-txt { color:#ffcc88; font-weight:bold; font-size:11px; text-shadow:1px 1px 0 #000, 0 0 8px rgba(255,150,0,.4); }
body.theme-light .win-title-txt { color:#002255; text-shadow:1px 1px 0 rgba(255,255,255,.8); }
body.theme-xp .win-title-txt { color:#ffffff; text-shadow:1px 1px 0 #000a; }

.wbtns { display:flex; gap:2px; align-items:center; }
.wbtn {
  width:15px; height:13px; border:1px solid #000; font-size:8px;
  background:var(--btn); color:var(--textd); display:flex; align-items:center; justify-content:center;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.06); line-height:1; font-family:Tahoma;
}
body.theme-light .wbtn, body.theme-xp .wbtn { border-color:#888; box-shadow:inset 1px 1px 0 #fff; }
.wbtn:hover { background:var(--btnhi); color:var(--text); }
.wbtn.x:hover { background:#440000; color:#ff4444; }

/* ===== BUTTONS ===== */
.btn {
  background:var(--btn); border:1px solid var(--border); color:var(--textd);
  font-size:10px; font-family:Tahoma; padding:3px 10px;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.04), inset -1px -1px 0 rgba(0,0,0,.3);
  transition:all .1s; white-space:nowrap; line-height:1.4;
}
body.theme-light .btn, body.theme-xp .btn { box-shadow:inset 1px 1px 0 #fff, inset -1px -1px 0 rgba(0,0,0,.1); }
.btn:hover { background:var(--btnhi); color:var(--text); border-color:var(--borderg); }
.btn:active { box-shadow:inset -1px -1px 0 rgba(255,255,255,.04), inset 1px 1px 0 rgba(0,0,0,.3); transform:translate(1px,1px); }
.btn.primary { background:#2a1400; border-color:#6a3000; color:var(--accent); font-weight:bold; }
.btn.primary:hover { background:#3a1a00; border-color:var(--accent); }
body.theme-light .btn.primary, body.theme-xp .btn.primary {
  background:var(--accent); border-color:var(--borderg); color:#fff;
}
body.theme-light .btn.primary:hover, body.theme-xp .btn.primary:hover { filter:brightness(1.1); color:#fff; }
.btn.sm { padding:1px 6px; font-size:9px; }
.btn.danger { color:#cc4444; border-color:#440000; }
.btn.danger:hover { background:#200000; border-color:#880000; color:#ff4444; }
body.theme-light .btn.danger, body.theme-xp .btn.danger { color:var(--adminc); border-color:var(--adminc); }
body.theme-light .btn.danger:hover, body.theme-xp .btn.danger:hover { background:#ffeebb; color:#dd0000; }

/* ===== INPUTS ===== */
input, textarea, select {
  background:var(--input); border:1px solid var(--border); color:var(--text);
  font-family:Tahoma; font-size:11px; padding:4px 6px;
  box-shadow:inset 1px 1px 0 rgba(0,0,0,.4); outline:none;
  -webkit-font-smoothing:none; font-smooth:never; width:100%;
}
body.theme-light input, body.theme-light textarea, body.theme-light select,
body.theme-xp input, body.theme-xp textarea, body.theme-xp select {
  box-shadow:inset 1px 1px 2px rgba(0,0,0,.1);
}
input:focus, textarea:focus, select:focus {
  border-color:var(--borderg); box-shadow:inset 1px 1px 0 rgba(0,0,0,.4), 0 0 6px rgba(255,100,0,.15);
}
body.theme-light input:focus, body.theme-light textarea:focus, body.theme-light select:focus,
body.theme-xp input:focus, body.theme-xp textarea:focus, body.theme-xp select:focus {
  box-shadow:inset 1px 1px 2px rgba(0,0,0,.15), 0 0 4px rgba(0,100,200,.2);
}
textarea { resize:vertical; min-height:70px; }
select option { background:var(--win); color:var(--text); }
.field { margin-bottom:8px; }
.field label { display:block; color:var(--textd); font-size:10px; margin-bottom:3px; letter-spacing:1px; }

/* ===== LAYOUT ===== */
#app { display:none; }
#auth-screen { display:flex; align-items:center; justify-content:center; min-height:100vh; }
.page { display:none; max-width:1200px; margin:0 auto; padding:8px; }
.page.active { display:block; }
.layout2 { display:grid; grid-template-columns:1fr 196px; gap:8px; }
@media(max-width:640px){ .layout2 { grid-template-columns:1fr; } }

/* ===== HEADER ===== */
#site-header {
  text-align:center; padding:12px; position:relative; overflow:hidden;
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,#050200,#100800);
}
body.theme-light #site-header { background:linear-gradient(180deg,#ffffff,#eef2f5); border-bottom:1px solid var(--border); }
body.theme-xp #site-header { background:linear-gradient(180deg,#0a6edd,#0050cc); }
#site-header::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 100% at 50% 50%, rgba(255,100,0,.05), transparent);
  pointer-events:none;
}
.site-name {
  font-size:24px; font-weight:bold; color:var(--accent); letter-spacing:10px;
  text-shadow:0 0 12px var(--accent), 0 0 30px rgba(255,100,0,.3), 2px 2px 0 #000;
  animation: namePulse 4s ease-in-out infinite;
}
@keyframes namePulse {
  0%,100%{ text-shadow:0 0 12px var(--accent),0 0 30px rgba(255,100,0,.3),2px 2px 0 #000; }
  50%{ text-shadow:0 0 20px var(--accent),0 0 50px rgba(255,100,0,.5),2px 2px 0 #000; }
}
body.theme-light .site-name {
  color: #0044aa; text-shadow:0 0 12px rgba(0,85,204,.4), 1px 1px 0 rgba(255,255,255,.8);
  animation: none;
}
body.theme-xp .site-name {
  color:#fff; text-shadow:0 0 12px rgba(255,255,255,.6),2px 2px 0 rgba(0,0,0,.4);
  animation: none;
}
.prophecy-bar { font-size:10px; color:var(--textd); font-style:italic; margin-top:4px; letter-spacing:1px; }
body.theme-xp .prophecy-bar { color:rgba(255,255,255,.7); }

/* ===== NAV ===== */
#nav {
  display:flex; gap:2px; padding:4px 8px; background:var(--panel);
  border-bottom:1px solid var(--border); flex-wrap:wrap;
}
.nav-tab {
  padding:3px 12px; border:1px solid var(--border); border-bottom:none;
  background:var(--tab-bg); color:var(--textd); font-size:11px; font-family:Tahoma;
  transition:all .1s; margin-bottom:-1px;
}
.nav-tab:hover { background:var(--btnhi); color:var(--text); }
.nav-tab.active { background:var(--win); color:var(--accent); border-color:var(--borderg); font-weight:bold; }
body.theme-light .nav-tab.active, body.theme-xp .nav-tab.active { border-color:var(--accent); }
.nav-right { margin-left:auto; display:flex; align-items:center; gap:6px; font-size:10px; color:var(--textd); }
.online-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--resonc); box-shadow:0 0 4px var(--resonc); animation:blink 2s infinite; }
@keyframes blink { 0%,100%{opacity:1}50%{opacity:.3} }

/* ===== AUTH ===== */
#auth-box { width:300px; padding:0; }
.auth-tabs { display:flex; }
.auth-tab { flex:1; padding:5px; background:var(--tab-bg); border:1px solid var(--border); color:var(--textd); font-family:Tahoma; font-size:11px; text-align:center; }
.auth-tab.active { background:var(--win); color:var(--accent); border-color:var(--borderg); font-weight:bold; border-bottom:1px solid var(--win); }
.auth-body { padding:12px; border:1px solid var(--border); border-top:none; background:var(--win); }
.auth-title { text-align:center; color:var(--accent); font-size:14px; letter-spacing:4px; margin-bottom:12px; font-weight:bold; }
.auth-err { color:#cc4444; font-size:10px; margin-top:6px; display:none; }

/* ===== POSTS ===== */
.post {
  border-bottom:1px solid var(--border); padding:8px;
  transition:background .15s; position:relative;
}
.post:hover { background:rgba(255,100,0,.02); }
body.theme-light .post:hover { background:rgba(0,85,204,.03); }
body.theme-xp .post:hover { background:rgba(0,80,200,.03); }
.post.admin { border-left:3px solid var(--adminc); background:rgba(139,0,0,.05); animation:adminGlow 4s ease-in-out infinite; }
@keyframes adminGlow { 0%,100%{box-shadow:inset 0 0 16px rgba(139,0,0,.08)} 50%{box-shadow:inset 0 0 30px rgba(139,0,0,.15)} }
.post.pinned { background:rgba(255,100,0,.04); border-top:1px solid #3a1a00; }
body.theme-light .post.pinned { background:rgba(0,85,204,.04); border-top:1px solid #c0c8d0; }

.post-hdr { display:flex; align-items:flex-start; gap:8px; margin-bottom:6px; }
.avatar {
  width:32px; height:32px; border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:15px; background:#060300; flex-shrink:0; position:relative; overflow:hidden;
}
body.theme-light .avatar, body.theme-xp .avatar { background:var(--panel); }
.karma-ring { position:absolute; inset:0; border:2px solid transparent; }
.karma-ring.g0 { border-color:var(--textd); }
.karma-ring.g1 { border-color:#aaa; box-shadow:0 0 3px #aaa; }
.karma-ring.g2 { border-color:#ffd700; box-shadow:0 0 5px #ffd700; }
.karma-ring.g3 { border-color:var(--accent); box-shadow:0 0 8px var(--accent), 0 0 16px rgba(255,100,0,.3); }
.karma-ring.bad { border-color:#4a0066; animation:badKarma 2s infinite; }
@keyframes badKarma { 0%,100%{border-color:#4a0066}50%{border-color:#9900cc} }

.post-meta { flex:1; min-width:0; }
.post-author { font-weight:bold; color:var(--accent2); font-size:11px; }
.post-author:hover { text-decoration:underline; }
.post-author.admin-name { color:var(--adminc); text-shadow:0 0 6px var(--adminc); }
body.theme-light .post-author.admin-name { text-shadow: none; }
.post-time { color:var(--textd); font-size:9px; }
.post-tag { font-size:8px; padding:1px 4px; background:#1a0800; border:1px solid #3a1500; color:#884400; margin-left:4px; }
.post-tag.admin { background:#1a0000; border-color:#440000; color:#aa2200; }
body.theme-light .post-tag { background:#f0f0f0; border-color:#ccc; color:#555; }
body.theme-light .post-tag.admin { background:#ffdddd; border-color:#cc0000; color:#cc0000; }

.post-body { line-height:1.65; color:var(--text); font-size:11px; margin-bottom:6px; word-break:break-word; }
.post-forum-ref { font-size:9px; color:var(--textd); margin-bottom:4px; }
.post-forum-ref a { color:#664400; }
body.theme-light .post-forum-ref a { color:var(--accent); }

.post-actions { display:flex; gap:4px; align-items:center; flex-wrap:wrap; }
.act { background:transparent; border:1px solid var(--border); color:var(--textd); font-size:9px; font-family:Tahoma; padding:2px 6px; transition:all .1s; white-space:nowrap; }
.act:hover { background:var(--btnhi); color:var(--text); border-color:var(--borderg); }
.act.liked    { color:var(--resonc); border-color:#003322; background:rgba(0,170,68,.06); }
.act.disliked { color:var(--cursec); border-color:#330022; background:rgba(170,0,102,.06); }
.act.mentald  { color:#9966ff;       border-color:#220044; background:rgba(153,102,255,.06); }
.act.reported { color:var(--adminc); border-color:#440000; }
body.theme-light .act.liked { border-color:var(--resonc); background:rgba(0,136,51,.1); }
body.theme-light .act.disliked { border-color:var(--cursec); background:rgba(153,0,68,.1); }

/* ===== LEVEL BADGES ===== */
.level-badge {
  display:inline-block; font-size:8px; padding:0 4px; margin-left:4px;
  background:#1a1200; border:1px solid #3a2800; color:#886600;
  letter-spacing:0.5px; vertical-align:middle;
}
body.theme-light .level-badge { background:#e8eef3; border-color:#c0c8d0; color:#0055cc; }
body.theme-xp .level-badge { background:#e8e0c8; border-color:#888; color:#333; }
.level-badge-lg {
  display:inline-block; font-size:10px; padding:2px 8px; margin-top:3px;
  background:#1a1200; border:1px solid #3a2800; color:#aa8800; letter-spacing:1px;
}
body.theme-light .level-badge-lg { background:#e8eef3; border-color:#c0c8d0; color:#0055cc; }
body.theme-xp .level-badge-lg { background:#e8e0c8; border-color:#888; color:#333; }

/* ===== COMMENTS ===== */
.comments-section { border-top:1px dashed var(--border); padding:6px 8px; display:none; }
.comments-section.open { display:block; }
.comment { padding:5px 0; border-bottom:1px solid #1a0e00; display:flex; gap:6px; }
body.theme-light .comment, body.theme-xp .comment { border-bottom:1px solid var(--border); }
.comment:last-child { border-bottom:none; }
.comment-avatar { width:22px; height:22px; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:11px; background:#060300; flex-shrink:0; }
body.theme-light .comment-avatar, body.theme-xp .comment-avatar { background:var(--panel); }
.comment-meta { color:var(--textd); font-size:9px; margin-bottom:2px; }
.comment-author { color:#a07030; font-weight:bold; }
body.theme-light .comment-author { color:var(--accent2); }
.comment-author:hover { text-decoration:underline; }
.comment-body { color:var(--text); font-size:10px; line-height:1.5; }
.comment-form { display:flex; gap:4px; margin-top:6px; }
.comment-form input { font-size:10px; padding:3px 5px; }
.cmt-actions { display:flex; gap:3px; margin-top:4px; flex-wrap:wrap; }

/* ===== SYMBOL PICKER (NEW) ===== */
.symbol-picker {
  display:flex; flex-wrap:wrap; gap:3px;
  padding:6px 8px; background:var(--panel);
  border:1px solid var(--border); border-top:none;
  margin-top:0;
}
.sym-btn {
  width:26px; height:26px; display:flex; align-items:center; justify-content:center;
  font-size:14px; border:1px solid var(--border); background:var(--win);
  transition:all .1s; flex-shrink:0; color:var(--text);
}
.sym-btn:hover {
  border-color:var(--accent); background:var(--btnhi);
  transform:scale(1.25); z-index:1; position:relative;
}

/* ===== USER PROFILE CARD (MY PAGE & MODAL) ===== */
.user-card {
  display:flex; gap:12px; align-items:flex-start;
  padding:10px; background:rgba(255,100,0,.03); border:1px solid var(--border);
  margin-bottom:6px;
}
body.theme-light .user-card { background:rgba(0,85,204,.03); }
body.theme-xp .user-card { background:rgba(0,80,200,.04); }
.user-card-info { flex:1; min-width:0; }
.user-card-name { font-size:15px; font-weight:bold; color:var(--accent2); margin-bottom:3px; }
.user-card-status { font-style:italic; color:var(--textd); font-size:10px; margin-top:5px; line-height:1.4; }

/* ===== SPOILER ===== */
.spoiler {
  display:inline-block; background:#000; color:transparent; border-radius:1px;
  padding:0 4px; min-width:30px; text-align:center; position:relative;
  animation:spoilPulse 2s infinite; transition:all .3s;
}
@keyframes spoilPulse { 0%,100%{box-shadow:0 0 4px rgba(60,0,90,.8)}50%{box-shadow:0 0 10px rgba(100,0,140,.8)} }
.spoiler::after { content:'▓▓▓▓'; color:#1a001a; position:absolute; left:50%; transform:translateX(-50%); }
.spoiler.open { background:#1e0a30; color:#dd88ff; animation:none; box-shadow:0 0 5px rgba(180,100,255,.2); }
.spoiler.open::after { content:none; }
body.theme-light .spoiler { background:#ccc; }
body.theme-light .spoiler::after { color:#888; }
body.theme-light .spoiler.open { background:#e8f0ff; color:#0055cc; box-shadow:none; }

/* ===== SIDEBAR ===== */
.sb-section { padding:6px; border-bottom:1px solid var(--border); }
.sb-title { color:var(--accent); font-weight:bold; font-size:9px; letter-spacing:2px; margin-bottom:5px; }
.sb-row { display:flex; justify-content:space-between; padding:2px 0; border-bottom:1px dashed #150e00; font-size:10px; color:var(--textd); }
body.theme-light .sb-row, body.theme-xp .sb-row { border-bottom:1px dashed var(--border); }
.sb-row a { color:#664400; text-decoration:none; font-size:10px; }
body.theme-light .sb-row a, body.theme-xp .sb-row a { color:var(--link); }
.sb-row a:hover { text-decoration:underline; color:var(--link); }

/* ===== FORUMS ===== */
.forum-card {
  border:1px solid var(--border); padding:8px; margin-bottom:6px;
  background:var(--win); transition:border-color .15s, box-shadow .15s;
}
.forum-card:hover { border-color:var(--borderg); box-shadow:0 0 10px rgba(255,100,0,.08); }
body.theme-light .forum-card:hover { box-shadow:0 0 10px rgba(0,85,204,.1); }
.forum-name { font-weight:bold; color:var(--accent2); font-size:12px; margin-bottom:3px; }
.forum-desc { color:var(--textd); font-size:10px; margin-bottom:5px; line-height:1.5; }
.forum-meta { font-size:9px; color:var(--textd); display:flex; gap:8px; flex-wrap:wrap; }

/* ===== PROFILE SETTINGS ===== */
.profile-section { margin-bottom:12px; }
.profile-section-title { color:var(--accent); font-size:10px; letter-spacing:2px; font-weight:bold; margin-bottom:8px; border-bottom:1px solid var(--border); padding-bottom:4px; }
.color-picker { display:flex; gap:6px; flex-wrap:wrap; margin-top:4px; }
.color-opt {
  width:28px; height:28px; border:2px solid var(--border); position:relative;
  display:flex; align-items:center; justify-content:center; font-size:10px; color:transparent;
  transition:all .15s;
}
.color-opt:hover { border-color:var(--textd); }
.color-opt.selected { border-color:#fff; box-shadow:0 0 8px currentColor; color:var(--textd); }
body.theme-light .color-opt.selected { border-color:#000; }
.color-opt.selected::after { content:'✓'; position:absolute; font-size:10px; color:#fff; text-shadow:0 0 4px #000; }
.avatar-opts { display:flex; gap:6px; flex-wrap:wrap; margin-top:4px; }
.avatar-opt {
  width:36px; height:36px; border:2px solid var(--border); background:#060300;
  display:flex; align-items:center; justify-content:center; font-size:18px; transition:all .15s;
}
body.theme-light .avatar-opt, body.theme-xp .avatar-opt { background:var(--input); }
.avatar-opt:hover { border-color:var(--textd); }
.avatar-opt.selected { border-color:var(--accent); box-shadow:0 0 8px rgba(255,100,0,.3); }

/* ===== CHAT ===== */
.chat-list { border-right:1px solid var(--border); }
.chat-item { padding:6px 8px; border-bottom:1px solid var(--border); display:flex; gap:6px; transition:background .1s; }
.chat-item:hover { background:rgba(255,100,0,.03); }
body.theme-light .chat-item:hover { background:rgba(0,85,204,.05); }
.chat-item.active { background:rgba(255,100,0,.05); border-left:2px solid var(--accent); }
body.theme-light .chat-item.active { background:rgba(0,85,204,.08); }
.chat-name { font-weight:bold; color:var(--accent2); font-size:11px; }
.chat-preview { color:var(--textd); font-size:9px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.chat-layout { display:grid; grid-template-columns:180px 1fr; }
@media(max-width:500px){ .chat-layout { grid-template-columns:1fr; } }
.messages-area { padding:8px; height:350px; overflow-y:auto; display:flex; flex-direction:column; gap:4px; overflow-x:hidden; }
.msg { max-width:80%; padding:5px 8px; border:1px solid var(--border); font-size:10px; line-height:1.5; word-break:break-word; white-space:pre-wrap; }
.msg.mine { align-self:flex-end; background:#150a00; border-color:#3a1800; color:var(--text); }
.msg.theirs { align-self:flex-start; background:#0a0700; color:var(--textd); }
body.theme-light .msg.mine, body.theme-xp .msg.mine { background:var(--btnhi); border-color:var(--borderg); color:var(--text); }
body.theme-light .msg.theirs, body.theme-xp .msg.theirs { background:var(--panel); border-color:var(--border); color:var(--textd); }
.msg-author { font-size:8px; color:var(--textd); margin-bottom:2px; }
.msg-input-row { display:flex; gap:4px; padding:6px 8px; border-top:1px solid var(--border); }

/* ===== COMPOSE POST & SEARCH ===== */
.compose-panel { padding:8px; border-top:1px solid var(--border); }
.compose-label { color:var(--textd); font-size:9px; letter-spacing:2px; margin-bottom:5px; }
.search-row { display:flex; gap:6px; padding:8px; border-bottom:1px solid var(--border); }

/* ===== STATUSBAR & TASKBAR ===== */
.statusbar { background:var(--panel); border-top:1px solid var(--border); padding:2px 8px; font-size:9px; color:var(--textd); display:flex; gap:8px; }
#taskbar {
  position:fixed; bottom:0; left:0; right:0; height:27px;
  background:linear-gradient(180deg,#1a0800,#080400);
  border-top:1px solid var(--border); display:flex; align-items:center;
  padding:0 4px; gap:4px; z-index:9000; box-shadow:0 -2px 10px rgba(0,0,0,.6);
}
body.theme-light #taskbar { background:linear-gradient(180deg,#ffffff,#e8eef3); box-shadow:0 -2px 10px rgba(0,0,0,.1); }
body.theme-xp #taskbar { background:linear-gradient(180deg,#245edb,#0f3eba); }
.tb-clock { margin-left:auto; font-size:10px; color:var(--text); border-left:1px solid var(--border); padding:0 8px; }
body.theme-xp .tb-clock { color:#fff; }
.tb-start {
  background:linear-gradient(180deg,#5a1a00,#2a0800); border:1px solid var(--borderg);
  color:#ffaa44; font-size:10px; font-weight:bold; font-family:Tahoma; padding:2px 10px; height:20px;
  box-shadow:inset 1px 1px 0 rgba(255,200,100,.1), 0 0 5px rgba(255,100,0,.15);
  letter-spacing:1px;
}
.tb-start:hover { background:linear-gradient(180deg,#7a2a00,#3a1000); }
body.theme-light .tb-start { background:linear-gradient(180deg,#0055cc,#0044aa); color:#fff; border-color:#003399; }
body.theme-light .tb-start:hover { background:linear-gradient(180deg,#0066ff,#0055cc); }
body.theme-xp .tb-start { background:linear-gradient(180deg,#3e9b3e,#2e7a2e); color:#fff; border-color:#fff; border-radius:0 8px 8px 0; }

/* ===== TOAST & MODALS ===== */
#toast {
  position:fixed; bottom:35px; right:10px; background:#0f0a00; border:1px solid var(--borderg);
  color:var(--text); padding:7px 12px; font-size:10px; max-width:240px; z-index:9500;
  box-shadow:0 0 12px rgba(255,100,0,.15); opacity:0; transform:translateX(10px);
  transition:all .25s; pointer-events:none; line-height:1.5;
}
body.theme-light #toast, body.theme-xp #toast { background:var(--win); color:var(--text); box-shadow:0 0 12px rgba(0,0,0,.2); }
#toast.show { opacity:1; transform:translateX(0); }
.modal-bg {
  position:fixed; inset:0; background:rgba(0,0,0,.8); z-index:9800;
  display:none; align-items:center; justify-content:center;
}
body.theme-light .modal-bg, body.theme-xp .modal-bg { background:rgba(255,255,255,.6); backdrop-filter:blur(2px); }
.modal-bg.open { display:flex; }
.modal { width:340px; }

/* ===== UTILS ===== */
#veil { position:fixed; inset:0; background:rgba(0,0,0,0); pointer-events:none; z-index:9100; transition:background 4s ease; }
::-webkit-scrollbar { width:9px; background:#060300; }
body.theme-light ::-webkit-scrollbar, body.theme-xp ::-webkit-scrollbar { background:var(--panel); }
::-webkit-scrollbar-thumb { background:#2a1800; border:1px solid #000; }
body.theme-light ::-webkit-scrollbar-thumb, body.theme-xp ::-webkit-scrollbar-thumb { background:#aeb6bf; border-color:var(--border); }
::-webkit-scrollbar-thumb:hover { background:#3a2200; }
body.theme-light ::-webkit-scrollbar-thumb:hover { background:#8a96a0; }
.empty-state { padding:20px; text-align:center; color:var(--textd); font-style:italic; font-size:11px; }
.badge { font-size:8px; padding:1px 4px; background:#1a0000; border:1px solid #440000; color:#cc4444; margin-left:4px; }




/* ===== АУРА АДМИНИСТРАТОРА ===== */
.post.admin-aura {
  border-left: 3px solid var(--aura);
  background: rgba(0,0,0,0.3);
  animation: auraPulse 4s ease-in-out infinite;
}
@keyframes auraPulse {
  0%, 100% { box-shadow: inset 0 0 10px var(--aura), 0 0 5px rgba(0,0,0,0.5); }
  50% { box-shadow: inset 0 0 35px var(--aura), 0 0 15px var(--aura); }
}
body.theme-light .post.admin-aura { background: rgba(255,255,255,0.7); }

/* ===== ЭКСТРАНЕТ (Dev Tool) ===== */
.post.extranet-post {
  border: 1px solid #00ffff;
  border-left: 4px solid #ff00ff;
  background: repeating-linear-gradient(45deg, rgba(20,0,40,0.6), rgba(20,0,40,0.6) 10px, rgba(30,0,50,0.6) 10px, rgba(30,0,50,0.6) 20px);
  animation: extranetGlitch 3s infinite alternate;
}
@keyframes extranetGlitch {
  0% { box-shadow: 0 0 5px #ff00ff, inset 0 0 10px #00ffff; }
  100% { box-shadow: 0 0 25px #ff00ff, inset 0 0 30px #00ffff; }
}
.extranet-tag {
  background: #110022 !important;
  color: #00ffff !important;
  border-color: #ff00ff !important;
  text-shadow: 0 0 6px #00ffff;
  letter-spacing: 2px;
  animation: glitchText 1s infinite;
}
@keyframes glitchText {
  0%, 100% { opacity: 1; transform: skew(0deg); }
  50% { opacity: 0.8; transform: skew(-5deg); }
}

/* ===== ПРИКРЕПЛЕННЫЕ ФОТО ===== */
.post-image-wrap { margin-top: 8px; margin-bottom: 4px; }
.post-attached-img {
  max-width: 100%;
  max-height: 400px;
  border: 1px solid var(--borderg);
  border-radius: 2px;
  cursor: crosshair !important;
  transition: filter 0.2s, border-color 0.2s;
}
.post-attached-img:hover {
  filter: brightness(1.2);
  border-color: var(--accent);
  box-shadow: 0 0 10px rgba(255,100,0,0.2);
}

/* ===== ТЕМА: ДРУИДСКАЯ РОЩА ===== */
body.theme-druid {
  --bg:       #030a03;
  --panel:    #040c04;
  --win:      #050f05;
  --border:   #1a3a1a;
  --borderg:  #2a5a2a;
  --text:     #80be80;
  --textd:    #2a5a2a;
  --accent:   #44cc44;
  --accent2:  #88ee88;
  --adminc:   #cc8800;
  --resonc:   #00cc88;
  --cursec:   #884400;
  --link:     #55dd55;
  --linkv:    #337733;
  --titlebar: linear-gradient(180deg,#0d2a0d,#050f05);
  --sel-bg:   #0a2a0a;
  --sel-fg:   #44dd44;
  --spark:    #44cc44;
  --btn:      #080f08;
  --btnhi:    #0f1f0f;
  --input:    #030a03;
  --tab-bg:   #030a03;
}
body.theme-druid #site-header { background:linear-gradient(180deg,#020802,#050f05); }
body.theme-druid #site-header::before { background:radial-gradient(ellipse 60% 100% at 50% 50%,rgba(68,204,68,.06),transparent); }
body.theme-druid .site-name { color:var(--accent); text-shadow:0 0 12px var(--accent),0 0 30px rgba(68,204,68,.3),2px 2px 0 #000; }
body.theme-druid .win { box-shadow:inset 1px 1px 0 rgba(100,255,100,.04),0 0 18px rgba(50,150,50,.08),0 4px 20px rgba(0,0,0,.7); }
body.theme-druid .win-title-txt { color:#aaffaa; text-shadow:1px 1px 0 #000,0 0 8px rgba(50,200,50,.4); }
body.theme-druid #taskbar { background:linear-gradient(180deg,#050f05,#030a03); }
body.theme-druid .tb-start { background:linear-gradient(180deg,#1a4a1a,#0a2a0a); border-color:#2a5a2a; color:#88ee88; }
body.theme-druid .btn.primary { background:#0a2a0a; border-color:#2a5a2a; }
body.theme-druid .btn.primary:hover { background:#0f3a0f; border-color:var(--accent); }

/* ===== ТЕМА: БИОЛЮМИНЕСЦЕНЦИЯ ===== */
body.theme-bio {
  --bg:       #000408;
  --panel:    #00050c;
  --win:      #00060e;
  --border:   #002244;
  --borderg:  #003a6a;
  --text:     #55bbff;
  --textd:    #003a6a;
  --accent:   #0099ff;
  --accent2:  #44ddff;
  --adminc:   #ff4400;
  --resonc:   #00ffcc;
  --cursec:   #ff0055;
  --link:     #44aaff;
  --linkv:    #2277cc;
  --titlebar: linear-gradient(180deg,#001030,#000610);
  --sel-bg:   #001a44;
  --sel-fg:   #44ddff;
  --spark:    #0099ff;
  --btn:      #000a1e;
  --btnhi:    #001028;
  --input:    #000408;
  --tab-bg:   #000408;
}
body.theme-bio #site-header { background:linear-gradient(180deg,#000208,#00060e); }
body.theme-bio #site-header::before { background:radial-gradient(ellipse 60% 100% at 50% 50%,rgba(0,150,255,.06),transparent); }
body.theme-bio .site-name { color:var(--accent2); text-shadow:0 0 12px var(--accent),0 0 30px rgba(0,150,255,.4),2px 2px 0 #000; }
body.theme-bio .win { box-shadow:inset 1px 1px 0 rgba(0,150,255,.04),0 0 18px rgba(0,100,200,.1),0 4px 20px rgba(0,0,0,.8); }
body.theme-bio .win-title-txt { color:#88ddff; text-shadow:1px 1px 0 #000,0 0 8px rgba(0,150,255,.5); }
body.theme-bio .post:hover { background:rgba(0,150,255,.03); }
body.theme-bio #taskbar { background:linear-gradient(180deg,#001020,#000408); }
body.theme-bio .tb-start { background:linear-gradient(180deg,#001a44,#000a2a); border-color:#003a6a; color:#44ddff; }
body.theme-bio .btn.primary { background:#001028; border-color:#003a6a; }
body.theme-bio .btn.primary:hover { background:#001a3a; border-color:var(--accent); }

/* ===== ТЕМА: СВЕТЛЯЧКОВАЯ ДОЛИНА ===== */
body.theme-firefly {
  --bg:       #020300;
  --panel:    #030400;
  --win:      #050600;
  --border:   #1c1c00;
  --borderg:  #2e2e00;
  --text:     #bcc855;
  --textd:    #3a4210;
  --accent:   #aacc00;
  --accent2:  #ccee44;
  --adminc:   #ff8800;
  --resonc:   #88cc00;
  --cursec:   #886600;
  --link:     #aadd00;
  --linkv:    #667700;
  --titlebar: linear-gradient(180deg,#1a2000,#080a00);
  --sel-bg:   #1c1c00;
  --sel-fg:   #ccee44;
  --spark:    #aacc00;
  --btn:      #0c0e00;
  --btnhi:    #181a00;
  --input:    #020300;
  --tab-bg:   #020300;
}
body.theme-firefly #site-header { background:linear-gradient(180deg,#020300,#050600); }
body.theme-firefly #site-header::before { background:radial-gradient(ellipse 60% 100% at 50% 50%,rgba(170,200,0,.06),transparent); }
body.theme-firefly .site-name { color:var(--accent2); text-shadow:0 0 12px var(--accent),0 0 30px rgba(170,200,0,.3),2px 2px 0 #000; animation:fireflySiteName 3s ease-in-out infinite; }
@keyframes fireflySiteName { 0%,100%{text-shadow:0 0 12px #aacc00,0 0 30px rgba(170,200,0,.3),2px 2px 0 #000} 50%{text-shadow:0 0 20px #ccee44,0 0 50px rgba(200,220,0,.5),2px 2px 0 #000} }
body.theme-firefly .win { box-shadow:inset 1px 1px 0 rgba(200,220,0,.04),0 0 18px rgba(150,180,0,.07),0 4px 20px rgba(0,0,0,.7); }
body.theme-firefly .win-title-txt { color:#ddee88; text-shadow:1px 1px 0 #000,0 0 8px rgba(180,200,0,.4); }
body.theme-firefly #taskbar { background:linear-gradient(180deg,#0c0e00,#020300); }
body.theme-firefly .tb-start { background:linear-gradient(180deg,#2a2a00,#141400); border-color:#2e2e00; color:#ccee44; }
body.theme-firefly .btn.primary { background:#181a00; border-color:#2e2e00; }
body.theme-firefly .btn.primary:hover { background:#222500; border-color:var(--accent); }

/* ===== ТЕМА: БАГРОВЫЙ НОКТЮРН ===== */
body.theme-nocturne {
  --bg:       #080003;
  --panel:    #0c0004;
  --win:      #0e0005;
  --border:   #2a0008;
  --borderg:  #4a0010;
  --text:     #c87070;
  --textd:    #4a0010;
  --accent:   #cc1122;
  --accent2:  #ff4455;
  --adminc:   #ff6600;
  --resonc:   #cc2233;
  --cursec:   #661100;
  --link:     #dd3344;
  --linkv:    #881122;
  --titlebar: linear-gradient(180deg,#1a0008,#080003);
  --sel-bg:   #2a0008;
  --sel-fg:   #ff4455;
  --spark:    #cc1122;
  --btn:      #0e0005;
  --btnhi:    #1a0008;
  --input:    #080003;
  --tab-bg:   #080003;
}
body.theme-nocturne #site-header { background:linear-gradient(180deg,#0a0005,#0e0005); }
body.theme-nocturne #site-header::before { background:radial-gradient(ellipse 60% 100% at 50% 50%,rgba(180,0,30,.06),transparent); }
body.theme-nocturne .site-name { color:var(--accent2); text-shadow:0 0 12px var(--accent),0 0 30px rgba(180,0,30,.4),2px 2px 0 #000; }
body.theme-nocturne .win { box-shadow:inset 1px 1px 0 rgba(180,0,30,.04),0 0 18px rgba(120,0,20,.1),0 4px 20px rgba(0,0,0,.85); }
body.theme-nocturne .win-title-txt { color:#ee8888; text-shadow:1px 1px 0 #000,0 0 8px rgba(180,0,30,.5); }
body.theme-nocturne .post:hover { background:rgba(180,0,30,.03); }
body.theme-nocturne #taskbar { background:linear-gradient(180deg,#0e0005,#080003); }
body.theme-nocturne .tb-start { background:linear-gradient(180deg,#2a0008,#140004); border-color:#4a0010; color:#ff4455; }
body.theme-nocturne .btn.primary { background:#1a0008; border-color:#4a0010; }
body.theme-nocturne .btn.primary:hover { background:#220008; border-color:var(--accent); }

/* ===== ТЕМА: РЕЗОНАНС ===== */
body.theme-resonance {
  --bg:       #050008;
  --panel:    #07000c;
  --win:      #09000e;
  --border:   #1a0040;
  --borderg:  #2a0060;
  --text:     #b080e0;
  --textd:    #2a0060;
  --accent:   #9933ff;
  --accent2:  #cc88ff;
  --adminc:   #ffcc00;
  --resonc:   #aa44ff;
  --cursec:   #ff2266;
  --link:     #bb55ff;
  --linkv:    #772299;
  --titlebar: linear-gradient(180deg,#1a0040,#05000a);
  --sel-bg:   #1a0040;
  --sel-fg:   #cc88ff;
  --spark:    #9933ff;
  --btn:      #0c0012;
  --btnhi:    #160020;
  --input:    #050008;
  --tab-bg:   #050008;
}
body.theme-resonance #site-header { background:linear-gradient(180deg,#07000c,#09000e); }
body.theme-resonance #site-header::before { background:radial-gradient(ellipse 60% 100% at 50% 50%,rgba(150,50,255,.07),transparent); }
body.theme-resonance .site-name { color:var(--accent2); text-shadow:0 0 12px var(--accent),0 0 30px rgba(150,50,255,.4),2px 2px 0 #000; animation:resonancePulse 4s ease-in-out infinite; }
@keyframes resonancePulse { 0%,100%{text-shadow:0 0 12px #9933ff,0 0 30px rgba(150,50,255,.4),2px 2px 0 #000} 50%{text-shadow:0 0 20px #cc88ff,0 0 60px rgba(180,100,255,.6),0 0 90px rgba(255,200,50,.2),2px 2px 0 #000} }
body.theme-resonance .win { box-shadow:inset 1px 1px 0 rgba(150,50,255,.05),0 0 20px rgba(100,0,200,.1),0 4px 20px rgba(0,0,0,.85); }
body.theme-resonance .win-title-txt { color:#cc99ff; text-shadow:1px 1px 0 #000,0 0 8px rgba(150,50,255,.5); }
body.theme-resonance .post:hover { background:rgba(150,50,255,.03); }
body.theme-resonance #taskbar { background:linear-gradient(180deg,#09000e,#050008); }
body.theme-resonance .tb-start { background:linear-gradient(180deg,#1a0040,#0c0020); border-color:#2a0060; color:#cc88ff; }
body.theme-resonance .btn.primary { background:#160020; border-color:#2a0060; }
body.theme-resonance .btn.primary:hover { background:#1e0030; border-color:var(--accent); }

/* ===== ТЕМА: ТЕРМИНАЛ '08 ===== */
body.theme-terminal {
  --bg:       #000000;
  --panel:    #020202;
  --win:      #030303;
  --border:   #1a1a00;
  --borderg:  #2a2a00;
  --text:     #cc9900;
  --textd:    #665500;
  --accent:   #ffaa00;
  --accent2:  #ffcc44;
  --adminc:   #ff4400;
  --resonc:   #aacc00;
  --cursec:   #cc4400;
  --link:     #ffbb22;
  --linkv:    #997700;
  --titlebar: linear-gradient(180deg,#111100,#030300);
  --sel-bg:   #221a00;
  --sel-fg:   #ffcc44;
  --spark:    #ffaa00;
  --btn:      #0a0900;
  --btnhi:    #161400;
  --input:    #000000;
  --tab-bg:   #000000;
}
body.theme-terminal #site-header { background:#000000; border-bottom:1px solid #333300; }
body.theme-terminal #site-header::before { display:none; }
body.theme-terminal .site-name { color:var(--accent); text-shadow:0 0 6px var(--accent); font-family:monospace; letter-spacing:3px; }
body.theme-terminal .win { box-shadow:none; border:1px solid #333300; }
body.theme-terminal .win-title-txt { color:#ffcc44; text-shadow:none; font-family:monospace; }
body.theme-terminal .post:hover { background:rgba(255,170,0,.04); }
body.theme-terminal #taskbar { background:#000000; border-top:1px solid #333300; }
body.theme-terminal .tb-start { background:#111100; border-color:#333300; color:#ffaa00; font-family:monospace; }
body.theme-terminal .btn.primary { background:#161400; border-color:#333300; font-family:monospace; }
body.theme-terminal .btn.primary:hover { background:#221a00; border-color:var(--accent); }
body.theme-terminal * { font-family: 'Courier New', Courier, monospace !important; }

/* ===== ТАРО — РАСКЛАДЫ ===== */

/* ПОДКОВА: ∩-образная форма — карты идут по дуге */
/*
  [1]  .  [7]
  [2]  .  [6]
  [3] [4] [5]
*/
.tarot-horseshoe {
  display: grid !important;
  grid-template-columns: repeat(3, 98px);
  grid-template-rows: repeat(3, auto);
  gap: 10px;
  width: fit-content;
  margin: 0 auto;
}
.tarot-horseshoe .tarot-card-wrap:nth-child(1) { grid-area:1/1; } /* Прошлое      ↖ */
.tarot-horseshoe .tarot-card-wrap:nth-child(2) { grid-area:2/1; } /* Настоящее    ← */
.tarot-horseshoe .tarot-card-wrap:nth-child(3) { grid-area:3/1; } /* Скрытые силы ↙ */
.tarot-horseshoe .tarot-card-wrap:nth-child(4) { grid-area:3/2; } /* Препятствие  ↓ */
.tarot-horseshoe .tarot-card-wrap:nth-child(5) { grid-area:3/3; } /* Окружение    ↘ */
.tarot-horseshoe .tarot-card-wrap:nth-child(6) { grid-area:2/3; } /* Что делать   → */
.tarot-horseshoe .tarot-card-wrap:nth-child(7) { grid-area:1/3; } /* Итог         ↗ */

/* КЕЛЬТСКИЙ КРЕСТ
  Колонки: [лево] [центр] [право] [gap] [штаб]
  Ряды:    [корона/итог] [прош/ситуация/буд/надежды] [пересеч/окружение] [основа/позиция]

       col1      col2     col3     .    col5
  r1:           [Корона]                [Итог]
  r2: [Прошлое][Ситуация][Будущее]     [Надежды]
  r3:           [Пересеч]              [Окружение]
  r4:           [Основа]               [Позиция]
*/
.tarot-cross {
  display: grid !important;
  grid-template-columns: 98px 148px 98px 24px 98px;
  grid-template-rows: repeat(4, auto);
  gap: 10px;
  width: fit-content;
  align-items: start;
  margin: 0 auto;
}
/* Центральная колонка — justify-self:center выравнивает 98px-карты по середине 148px-ячейки */
.tarot-cross .tarot-card-wrap:nth-child(1)  { grid-area:2/2; justify-self:center; }
/* align-self:end — боковая карта прижата к нижней, минимизируя зазор */
.tarot-cross .tarot-card-wrap:nth-child(2)  { grid-area:3/2; align-self:end; }
.tarot-cross .tarot-card-wrap:nth-child(3)  { grid-area:4/2; justify-self:center; }
.tarot-cross .tarot-card-wrap:nth-child(4)  { grid-area:2/1; }
.tarot-cross .tarot-card-wrap:nth-child(5)  { grid-area:1/2; justify-self:center; }
.tarot-cross .tarot-card-wrap:nth-child(6)  { grid-area:2/3; }
.tarot-cross .tarot-card-wrap:nth-child(7)  { grid-area:4/5; }
.tarot-cross .tarot-card-wrap:nth-child(8)  { grid-area:3/5; }
.tarot-cross .tarot-card-wrap:nth-child(9)  { grid-area:2/5; }
.tarot-cross .tarot-card-wrap:nth-child(10) { grid-area:1/5; }

/* Карта Пересечения — полный размер, лежит на боку */
.tarot-cross .tarot-card-wrap:nth-child(2) {
  width: 148px;
  height: 130px;   /* 90px карта + ~35px под лейбл */
  position: relative;
  overflow: visible;
}
/* top: -35px — карта чуть выше, центр визуально на 35px */
.tarot-cross .tarot-card-wrap:nth-child(2) .tarot-card {
  position: absolute;
  left: 29px;
  top: -35px;
  transform: rotate(90deg);
}
.tarot-cross .tarot-card-wrap:nth-child(2) .tarot-card.flipped {
  position: absolute;
  left: 29px;
  top: -35px;
  transform: rotate(90deg) rotateY(180deg);
}
.tarot-cross .tarot-card-wrap:nth-child(2) .tarot-card.reversed .tarot-front { transform: rotateY(180deg) rotate(180deg); }
/* Лейбл прибит к низу wrap'а — всегда под картой */
.tarot-cross .tarot-card-wrap:nth-child(2) .tarot-position-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
}

/* ===== ЧАТ — ВКЛАДКИ ===== */
.chat-tab-btn { font-size:9px !important; padding:2px 8px !important; }
.chat-tab-btn.active { background:var(--accent) !important; color:#000 !important; border-color:var(--accent) !important; }
#group-chat-window { flex:1; display:flex; flex-direction:column; min-width:0; overflow:hidden; }

/* ===== САМОЦВЕТЫ (DICE) ===== */
.dice-section { margin-top:16px; }
.dice-types { display:flex; gap:5px; flex-wrap:wrap; margin:8px 0; }
.die-btn {
  width:38px; height:38px; border:2px solid var(--border);
  background:var(--btn); color:var(--textd); font-size:10px; font-weight:bold;
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  transition:all .15s; position:relative;
}
.die-btn:hover { border-color:var(--borderg); color:var(--text); background:var(--btnhi); }
.die-btn.active { border-color:var(--accent); color:var(--accent); box-shadow:0 0 8px var(--accent)44; }
.die-btn .die-shape { font-size:18px; line-height:1; }
.die-btn .die-label { font-size:8px; margin-top:1px; }
.dice-table {
  min-height:120px; background:var(--panel); border:1px solid var(--border);
  padding:10px; display:flex; flex-wrap:wrap; gap:8px; align-items:flex-end;
  margin-top:8px; position:relative; overflow:hidden;
}
.dice-table-empty { color:var(--textd); font-size:10px; font-style:italic; }
.die-result {
  width:44px; height:44px; border:2px solid var(--borderg);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:var(--win); position:relative; flex-shrink:0;
  animation:dieRoll .5s ease-out both;
}
@keyframes dieRoll {
  0%   { transform:translateY(-60px) rotate(180deg); opacity:0; }
  70%  { transform:translateY(4px) rotate(-10deg); opacity:1; }
  100% { transform:translateY(0) rotate(0deg); opacity:1; }
}
.die-result-num { font-size:16px; font-weight:bold; color:var(--accent2); line-height:1; }
.die-result-type { font-size:8px; color:var(--textd); }
.die-result.max { border-color:var(--accent); box-shadow:0 0 8px var(--accent); }
.die-result.min { border-color:#440000; }
.dice-sum { margin-top:8px; font-size:11px; color:var(--accent2); font-weight:bold; }

/* ===== МИНИ-ИГРЫ: МЕНЮ ===== */
.mg-card {
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  border:1px solid var(--border); background:var(--win);
  cursor:pointer; transition:all .15s;
}
.mg-card:hover { border-color:var(--borderg); background:var(--btnhi); }
.mg-card-icon { font-size:22px; flex-shrink:0; }
.mg-card-info { flex:1; }
.mg-card-name { font-weight:bold; color:var(--accent2); font-size:11px; margin-bottom:2px; }
.mg-card-desc { color:var(--textd); font-size:9px; }
.mg-card-arr { color:var(--borderg); font-size:12px; flex-shrink:0; }
.mg-card:hover .mg-card-arr { color:var(--accent); }

/* ===== КОСТИ СУДЬБЫ ===== */
.bones-output {
  padding:10px; border:1px solid var(--border); background:var(--panel);
  min-height:60px; font-size:10px; line-height:1.6;
}
.bones-block { }
.bones-label { font-size:8px; color:var(--textd); letter-spacing:2px; margin-bottom:2px; }
.bones-name { font-weight:bold; color:var(--accent2); font-size:12px; margin-bottom:4px; }
.bones-desc { color:var(--text); font-size:10px; line-height:1.6; }

/* ===== СФЕРА СУДЬБЫ ===== */
.sphere-orb {
  width:140px; height:140px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #2a1a3a, #080010);
  border:2px solid var(--border);
  box-shadow:0 0 20px rgba(150,0,255,.15), inset 0 0 20px rgba(0,0,0,.6);
  display:flex; align-items:center; justify-content:center;
  transition:box-shadow .5s;
}
body.theme-light .sphere-orb, body.theme-xp .sphere-orb {
  background:radial-gradient(circle at 35% 35%, #e8eef8, #c0cce0);
  box-shadow:0 0 20px rgba(0,80,200,.12), inset 0 0 20px rgba(255,255,255,.4);
}
.sphere-inner {
  font-size:13px; font-weight:bold; text-align:center;
  color:var(--textd); padding:10px; line-height:1.4;
  transition:color .4s, text-shadow .4s;
  max-width:110px;
}
.sphere-rolling { animation:sphereSpin .9s ease-in-out; }
@keyframes sphereSpin {
  0%   { transform:scale(1); }
  30%  { transform:scale(0.92); }
  60%  { transform:scale(1.05); }
  100% { transform:scale(1); }
}
.sphere-answer {
  font-size:11px; text-align:center; min-height:20px;
  transition:opacity .4s; letter-spacing:1px;
}

/* ===== @УПОМИНАНИЯ ===== */
.mention { color:var(--accent2); font-weight:bold; cursor:pointer; }
.mention:hover { text-decoration:underline; }
.mention-dropdown {
  position:absolute; background:var(--win); border:1px solid var(--borderg);
  z-index:200; display:none; max-height:140px; overflow-y:auto;
  box-shadow:0 4px 12px rgba(0,0,0,.5);
}
.mention-item {
  padding:4px 8px; font-size:10px; color:var(--text); cursor:pointer;
  display:flex; align-items:center; gap:6px;
}
.mention-item:hover { background:var(--btnhi); color:var(--accent); }

/* ===== ПОИСК ПОСТОВ ===== */
.search-feed-row { display:flex; gap:6px; padding:6px 8px; border-bottom:1px solid var(--border); }

/* ===== ЛИДЕРБОРД ===== */
.lb-row { display:flex; align-items:center; gap:6px; padding:3px 0; border-bottom:1px dashed var(--border); font-size:10px; }
.lb-rank { color:var(--textd); font-size:9px; width:14px; text-align:right; flex-shrink:0; }
.lb-name { flex:1; color:var(--accent2); cursor:pointer; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.lb-name:hover { text-decoration:underline; }
.lb-karma { color:var(--accent); font-weight:bold; font-size:10px; }
.lb-row:nth-child(1) .lb-rank { color:#ffd700; }
.lb-row:nth-child(2) .lb-rank { color:#c0c0c0; }
.lb-row:nth-child(3) .lb-rank { color:#cd7f32; }

/* ===== ТАРО ===== */
.tarot-spread { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:12px; }
.tarot-card-wrap { perspective:600px; width:90px; cursor:pointer; }
.tarot-card {
  width:90px; height:140px; position:relative;
  transform-style:preserve-3d; transition:transform .7s ease;
  border-radius:3px;
}
.tarot-card.flipped { transform:rotateY(180deg); }
.tarot-card.reversed .tarot-front { transform:rotateY(180deg) rotate(180deg); }
.tarot-front, .tarot-back {
  position:absolute; width:100%; height:100%;
  backface-visibility:hidden; border-radius:3px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  border:1px solid var(--borderg); padding:6px;
}
.tarot-back {
  background:repeating-linear-gradient(45deg,#0a0015,#0a0015 4px,#100025 4px,#100025 8px);
  border-color:#4a0088;
}
.tarot-back-sym { font-size:28px; color:#4a0088; text-shadow:0 0 8px #9900cc; }
.tarot-front { transform:rotateY(180deg); flex-direction:column; justify-content:space-between; text-align:center; }
.tarot-card.reversed .tarot-front { transform:rotateY(180deg) rotate(180deg); }
.tarot-front-num { font-size:8px; color:rgba(255,255,255,0.5); letter-spacing:1px; }
.tarot-front-sym { font-size:24px; line-height:1; margin:4px 0; color:#fff; }
.tarot-front-name { font-size:9px; font-weight:bold; color:#e8ccff; line-height:1.2; }
.tarot-front-suit { font-size:7px; color:rgba(255,255,255,0.45); margin-top:2px; }
.tarot-desc {
  margin-top:12px; padding:10px; border:1px solid var(--border);
  background:var(--panel); font-size:10px; line-height:1.7; min-height:60px;
  animation:fadeIn .4s ease;
}
.tarot-desc-rev { color:var(--cursec); font-style:italic; }
.tarot-mode-btns { display:flex; gap:6px; margin-bottom:10px; flex-wrap:wrap; }

/* ===== РУНЫ ===== */
.rune-spread { display:flex; gap:12px; justify-content:center; margin-top:12px; flex-wrap:wrap; }
.rune-wrap { display:flex; flex-direction:column; align-items:center; gap:6px; }
.rune-tile {
  width:70px; height:90px; border:1px solid var(--borderg);
  background:var(--panel); display:flex; align-items:center; justify-content:center;
  font-size:32px; position:relative; transition:all .3s;
}
.rune-tile.face-down { background:#0a0015; border-color:#330044; font-size:20px; color:#220033; }
.rune-tile.revealed { animation:runeReveal .5s ease both; }
.rune-tile.rune-reversed { transform:rotate(180deg); }
@keyframes runeReveal {
  0% { opacity:0; transform:scale(0.6) rotate(-20deg); }
  60% { transform:scale(1.1) rotate(5deg); }
  100% { opacity:1; transform:scale(1) rotate(0deg); }
}
.rune-tile.rune-reversed.revealed { animation:runeRevealRev .5s ease both; }
@keyframes runeRevealRev {
  0% { opacity:0; transform:scale(0.6) rotate(160deg); }
  100% { opacity:1; transform:scale(1) rotate(180deg); }
}
.rune-name { font-size:9px; color:var(--accent2); font-weight:bold; letter-spacing:1px; text-align:center; }
.rune-pos  { font-size:8px; color:var(--textd); text-align:center; }
.rune-meanings { margin-top:12px; display:flex; flex-direction:column; gap:8px; }
.rune-meaning-block { padding:8px; border:1px solid var(--border); background:var(--panel); font-size:10px; line-height:1.6; }
.rune-meaning-title { font-weight:bold; color:var(--accent2); font-size:9px; letter-spacing:1px; margin-bottom:4px; }
.rune-meaning-rev { color:var(--cursec); font-style:italic; }

/* ===== ДЕРЕВО ЖИЗНИ (Tree of Life) =====
  Сефирот — 3 колонки × 7 рядов:
       [1 Кетер]
  [3 Бина] [2 Хокма]
  [5 Гебура][4 Хесед]
       [6 Тиферет]
  [8 Ход]  [7 Нецах]
       [9 Йесод]
       [10 Малкут]
*/
.tarot-tree {
  display: grid !important;
  grid-template-columns: 98px 98px 98px;
  grid-template-rows: repeat(7, auto);
  gap: 10px;
  width: fit-content;
  margin: 0 auto;
}
.tarot-tree .tarot-card-wrap:nth-child(1)  { grid-area:1/2; justify-self:center; } /* Кетер    — верх центр */
.tarot-tree .tarot-card-wrap:nth-child(2)  { grid-area:2/3; }                      /* Хокма    — правый верх */
.tarot-tree .tarot-card-wrap:nth-child(3)  { grid-area:2/1; }                      /* Бина     — левый верх */
.tarot-tree .tarot-card-wrap:nth-child(4)  { grid-area:3/3; }                      /* Хесед    — правый */
.tarot-tree .tarot-card-wrap:nth-child(5)  { grid-area:3/1; }                      /* Гебура   — левый */
.tarot-tree .tarot-card-wrap:nth-child(6)  { grid-area:4/2; justify-self:center; } /* Тиферет  — центр */
.tarot-tree .tarot-card-wrap:nth-child(7)  { grid-area:5/3; }                      /* Нецах    — правый низ */
.tarot-tree .tarot-card-wrap:nth-child(8)  { grid-area:5/1; }                      /* Ход      — левый низ */
.tarot-tree .tarot-card-wrap:nth-child(9)  { grid-area:6/2; justify-self:center; } /* Йесод    — центр низ */
.tarot-tree .tarot-card-wrap:nth-child(10) { grid-area:7/2; justify-self:center; } /* Малкут   — самый низ */

/* ===== РАСКЛАД ЗВЕЗДА (9 карт, 3×3) =====
  [5] [1] [6]
  [3] [S] [4]
  [7] [2] [8]
  S=индекс 0 (Сигнификатор), 1-8 вокруг
*/
.tarot-star {
  display: grid !important;
  grid-template-columns: repeat(3, 98px);
  grid-template-rows: repeat(3, auto);
  gap: 10px;
  width: fit-content;
  margin: 0 auto;
}
.tarot-star .tarot-card-wrap:nth-child(1) { grid-area:2/2; } /* S — центр */
.tarot-star .tarot-card-wrap:nth-child(2) { grid-area:1/2; } /* 1 — верх */
.tarot-star .tarot-card-wrap:nth-child(3) { grid-area:3/2; } /* 2 — низ */
.tarot-star .tarot-card-wrap:nth-child(4) { grid-area:2/1; } /* 3 — лево */
.tarot-star .tarot-card-wrap:nth-child(5) { grid-area:2/3; } /* 4 — право */
.tarot-star .tarot-card-wrap:nth-child(6) { grid-area:1/1; } /* 5 — верх-лево */
.tarot-star .tarot-card-wrap:nth-child(7) { grid-area:1/3; } /* 6 — верх-право */
.tarot-star .tarot-card-wrap:nth-child(8) { grid-area:3/1; } /* 7 — низ-лево */
.tarot-star .tarot-card-wrap:nth-child(9) { grid-area:3/3; } /* 8 — низ-право */

/* ===== РАСКЛАД КРЕСТ (КАРТОМАНТИЯ, 5 карт) =====
     [2]
  [3][1][4]
     [5]
*/
.play-cross {
  display: grid !important;
  grid-template-columns: repeat(3, 98px);
  grid-template-rows: repeat(3, auto);
  gap: 10px;
  width: fit-content;
  margin: 0 auto;
}
.play-cross .tarot-card-wrap:nth-child(1) { grid-area:2/2; } /* Ты — центр */
.play-cross .tarot-card-wrap:nth-child(2) { grid-area:1/2; } /* Вызов — верх */
.play-cross .tarot-card-wrap:nth-child(3) { grid-area:2/1; } /* Прошлое — лево */
.play-cross .tarot-card-wrap:nth-child(4) { grid-area:2/3; } /* Будущее — право */
.play-cross .tarot-card-wrap:nth-child(5) { grid-area:3/2; } /* Итог — низ */

/* ===== ЛЕНОРМАН ===== */
/* Малое таблó: 3×3 */
.len-square {
  display: grid !important;
  grid-template-columns: repeat(3, 98px);
  gap: 10px;
  width: fit-content;
  margin: 0 auto;
}
/* Большое таблó: 9×4, мелкие карты */
.len-tableau {
  display: grid !important;
  grid-template-columns: repeat(9, 50px);
  gap: 4px;
  width: fit-content;
  margin: 0 auto;
}
.len-small      { width:50px !important; }
.len-small-card { width:50px !important; height:72px !important; }
.len-small-card .tarot-back-sym { font-size:10px !important; }

/* ===== ПОДПИСИ ПОЗИЦИЙ ТАРО ===== */
.tarot-position-label {
  font-size: 11px;
  font-weight: bold;
  color: var(--accent2);
  text-align: center;
  margin-top: 5px;
  letter-spacing: 1px;
  text-shadow: 0 0 6px var(--accent);
  white-space: nowrap;
}

/* ===== FONT SCALE (+2px глобально) ===== */
body                          { font-size: 13px; }
input, textarea, select       { font-size: 13px !important; }
.post-body                    { font-size: 13px !important; }
.comment-body                 { font-size: 12px !important; }
.msg                          { font-size: 13px !important; }
.msg-author                   { font-size: 11px !important; }
.forum-desc                   { font-size: 12px !important; }
.forum-meta                   { font-size: 11px !important; }
.win-title-txt                { font-size: 13px !important; }
.nav-tab                      { font-size: 13px !important; }
.chat-name                    { font-size: 12px !important; }
.chat-preview                 { font-size: 11px !important; }
.sb-title                     { font-size: 11px !important; }
.sb-row                       { font-size: 12px !important; }
.user-card-name               { font-size: 14px !important; }
.level-badge-lg               { font-size: 12px !important; }
.user-card-status             { font-size: 12px !important; }
.post-author                  { font-size: 13px !important; }
.post-time                    { font-size: 11px !important; }
.profile-section-title        { font-size: 11px !important; }
.comment-author               { font-size: 12px !important; }
.comment-meta                 { font-size: 10px !important; }
.act                          { font-size: 11px !important; }
.btn                          { font-size: 12px !important; }
.field label                  { font-size: 11px !important; }
.mg-card-name                 { font-size: 13px !important; }
.mg-card-desc                 { font-size: 11px !important; }
.tarot-front-name             { font-size: 10px !important; }
.rune-meaning-block           { font-size: 12px !important; }
.rune-meaning-title           { font-size: 11px !important; }
.tarot-desc                   { font-size: 12px !important; }
.bones-desc                   { font-size: 12px !important; }
.bones-name                   { font-size: 13px !important; }

/* ================================================================
   МОБИЛЬНАЯ АДАПТАЦИЯ (≤ 600px)
   Доступная ширина контента: ~318px (360px экран - padding/border)
   ================================================================ */
@media (max-width: 600px) {

  /* --- Страница: меньше отступы --- */
  .page { padding: 4px !important; }

  /* --- Навигация --- */
  #nav { padding: 3px 4px; gap: 2px; }
  .nav-tab { padding: 3px 7px !important; font-size: 10px !important; }
  .nav-right { font-size: 9px; gap: 4px; }

  /* --- Карты таро: 90×140 → 60×95 --- */
  .tarot-card-wrap { width: 60px !important; perspective: 400px; }
  .tarot-card      { width: 60px !important; height: 95px !important; }
  .tarot-back-sym  { font-size: 18px !important; }
  .tarot-front-sym { font-size: 16px !important; }
  .tarot-front-num { font-size: 7px !important; }
  .tarot-front-name{ font-size: 7px !important; }
  .tarot-front-suit{ font-size: 6px !important; }
  .tarot-position-label { font-size: 8px !important; white-space: normal !important; line-height: 1.2; }

  /* --- Три карты / одна / пять простых --- */
  .tarot-spread { gap: 6px !important; }

  /* --- Подкова (3 кол) --- */
  .tarot-horseshoe { grid-template-columns: repeat(3, 60px) !important; gap: 6px !important; }

  /* --- Звезда (3×3) --- */
  .tarot-star { grid-template-columns: repeat(3, 60px) !important; gap: 6px !important; }

  /* --- Дерево жизни (3 кол) --- */
  .tarot-tree { grid-template-columns: repeat(3, 60px) !important; gap: 6px !important; }

  /* --- Крест картомантии (3×3) --- */
  .play-cross { grid-template-columns: repeat(3, 60px) !important; gap: 6px !important; }

  /* --- Кельтский крест: пересчитываем под 60px карты ---
       60 + 95 + 60 + 8 + 60 = 283px + 4×6gap = 307px — влезает!
       Повёрнутая карта (60×95): кажется шириной 95px — в колонку 95px */
  .tarot-cross {
    grid-template-columns: 60px 95px 60px 8px 60px !important;
    gap: 6px !important;
  }
  .tarot-cross .tarot-card-wrap:nth-child(2) {
    width: 95px !important;
    height: 87px !important;
  }
  .tarot-cross .tarot-card-wrap:nth-child(2) .tarot-card {
    left: 18px !important;
    top: -23px !important;
  }
  .tarot-cross .tarot-card-wrap:nth-child(2) .tarot-card.flipped {
    left: 18px !important;
    top: -23px !important;
  }

  /* --- Ленорман: малое 3×3 --- */
  .len-square { grid-template-columns: repeat(3, 60px) !important; gap: 6px !important; }

  /* --- Ленорман: большое таблó 9×4 — скролл по горизонтали ---
       34px карты: 9×34 + 8×3gap = 306+24 = 330px — скролл всё равно нужен */
  .len-tableau {
    grid-template-columns: repeat(9, 34px) !important;
    gap: 3px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .len-small      { width: 34px !important; }
  .len-small-card { width: 34px !important; height: 50px !important; }
  .len-small-card .tarot-front-sym { font-size: 10px !important; }
  .len-small-card .tarot-front-name{ font-size: 5px !important; }
  .len-small-card .tarot-back-sym  { font-size: 8px !important; }

  /* --- Руны --- */
  .rune-tile { width: 55px !important; height: 75px !important; font-size: 26px !important; }
  .rune-tile.face-down { font-size: 16px !important; }
  .rune-spread { gap: 8px !important; }

  /* --- Контейнер мини-игры --- */
  #minigames-content { padding: 8px !important; }

  /* --- Карточки меню игр --- */
  .mg-card { padding: 8px 10px !important; }
  .mg-card-icon { font-size: 18px !important; }

  /* --- Таблица натальной карты --- */
  #natal-chart-area table { font-size: 10px !important; }

  /* --- Общий контент win --- */
  .win-title { padding: 3px 6px !important; }
}