*, *::before, *::after{box-sizing:border-box}
html, body{height:100%;}
body{font-family:Arial,Helvetica,sans-serif;background:#f3f2f1;margin:0;color:#242424;min-height:100vh;overflow-x:hidden}
.app{width:min(1180px,100%);max-width:1180px;margin:24px auto;background:#fffaf2;border-radius:20px;padding:24px;box-shadow:0 22px 56px rgba(24,92,188,0.10)}
.landing-shell{overflow:visible;padding-left:28px}
.app.landing{position:relative;left:-28px;width:calc(100% + 28px);box-shadow:28px 24px 60px rgba(0,0,0,0.16);border-top-left-radius:0;border-bottom-left-radius:0}
/* Landing page */
.landing-shell{position:relative;overflow:visible;padding:32px 0 0}
.landing-shell{overflow:visible;padding-left:28px}
.app.landing{position:relative;left:-28px;width:calc(100% + 28px);box-shadow:28px 24px 60px rgba(0,0,0,0.16);border-top-left-radius:0;border-bottom-left-radius:0}
.page-wrap{max-width:1220px;margin:0 auto;padding:20px 18px 28px;background:#f5f5f6}
.guestbook-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;background:linear-gradient(135deg,#edf3ff 0%,#dfeaff 100%);border:1px solid rgba(72,112,177,0.12);border-radius:16px;box-shadow:0 8px 18px rgba(63,92,153,0.08);margin-bottom:18px}
.guestbook-brand-mark{width:30px;height:30px;background:linear-gradient(135deg,#2f80ed,#3a5bea);border-radius:8px;box-shadow:0 8px 14px rgba(59,92,195,0.18)}
.guestbook-brand-title{font-size:clamp(2rem,4vw,3rem);font-weight:900;color:#1e4f8f;letter-spacing:-0.06em;line-height:1.1;flex:1;text-align:right}
.guestbook-main{background:transparent}
.guestbook-modern{background:transparent;border:none;padding:0}
#entries{display:flex;flex-direction:column;gap:16px;margin-bottom:18px}
#entries .panel{background:linear-gradient(180deg,#ecf4ff 0%,#e4ecff 100%);border:1px solid rgba(87,120,196,0.16);border-radius:12px;padding:18px 18px 16px;box-shadow:0 6px 14px rgba(78,115,185,0.08)}
#entries .panel strong{font-size:1.08rem;color:#1b2d4e}
#entries .panel span{font-size:0.96rem;color:#52698d}
#entries .panel div:last-child{margin-top:8px;color:#1f2d45;font-size:1.05rem;line-height:1.5}
.guestbook-form{display:flex;flex-direction:column;gap:18px;padding-top:8px}
.guestbook-form-row{display:grid;grid-template-columns:110px minmax(0,1fr);align-items:center;gap:14px}
.guestbook-form-row label{font-size:1.1rem;font-weight:700;color:#1d2f4d}
.guestbook-form-row input{width:100%;padding:12px 14px;border:1px solid rgba(112,135,200,0.34);border-radius:10px;background:#ffffff;color:#1b2d4e;font-size:1rem;outline:none;box-shadow:inset 0 1px 2px rgba(20,39,72,0.02)}
.guestbook-form-row input:focus{border-color:#4d7cf8;box-shadow:0 0 0 3px rgba(77,124,248,0.12)}
.guestbook-form-actions{text-align:right;padding-top:4px}
.guestbook-button{border:none;background:linear-gradient(180deg,#6caef7 0%,#3d7ae6 100%);color:#ffffff;padding:14px 22px;border-radius:12px;font-size:1.1rem;font-weight:800;cursor:pointer;box-shadow:0 10px 18px rgba(76,120,222,0.22);transition:transform .15s ease, box-shadow .15s ease}
.guestbook-button:hover{transform:translateY(-1px);box-shadow:0 12px 22px rgba(76,120,222,0.28)}
.panel-note{padding:16px 12px;border-radius:12px;background:#edf4ff;border:1px dashed rgba(82,115,190,0.24);color:#4063a9;font-size:1rem}
@media (max-width: 720px){
.page-wrap{padding:14px 12px 24px}
.guestbook-header{padding:14px 16px}
.guestbook-brand-title{font-size:1.8rem;text-align:left}
.guestbook-form-row{grid-template-columns:1fr;gap:8px}
.guestbook-form-row label{font-size:1rem}
.guestbook-button{width:100%}
}
.landing-grid{display:grid;grid-template-columns:240px minmax(520px,1fr) 240px;gap:18px;margin-top:16px}
.panel{background:#fff8ea;border:1px solid rgba(209,139,43,0.14);border-radius:12px;padding:18px}
.panel-header{font-size:0.95rem;font-weight:700;margin-bottom:14px;color:#7a4912;border-bottom:1px solid rgba(209,139,43,0.2);padding-bottom:10px}
.chat-list{list-style:none;padding:0;margin:0;color:#3f2a1c;line-height:1.8}
.chat-list li{margin-bottom:8px}
.chat-list li span{margin-right:8px;color:#855f38}
.favorites li{font-weight:700}
.main-panel{display:flex;flex-direction:column;gap:18px}
.entry-section, .info-section, .media-card{background:#fffaf2;border:1px solid rgba(209,139,43,0.14);border-radius:14px;padding:18px}
.section-title{font-size:1.1rem;font-weight:700;color:#8b5210;margin-bottom:14px}
.entry-form{display:grid;gap:14px}
.form-row{display:grid;grid-template-columns:220px 1fr;align-items:center;gap:12px}
.form-row label{color:#4b3524;font-weight:700}
.form-row input, .form-row select{padding:10px 12px;border:1px solid #d7a04b;border-radius:10px;background:#fff6df;color:#4b3727}
.form-actions{text-align:right}
.button-enter{padding:10px 18px;border:none;border-radius:10px;background:linear-gradient(180deg,#f7c65b 0%,#eea83a 100%);color:#4b2f0d;font-weight:700;cursor:pointer;box-shadow:0 8px 16px rgba(238,168,58,0.25)}
.entry-links{margin-top:12px;color:#a85f10}
.entry-links a{color:#c97a16;text-decoration:none;font-weight:700}
.times-row{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.time-entry{flex:1;padding:18px 0;background:#fff3d9;border:1px solid #e0b25c;border-radius:10px;text-align:center;font-size:1.3rem;color:#6a4110}
.time-entry.active{background:#ffd98a;font-size:2rem;font-weight:700}
.time-note{margin-bottom:14px;color:#5c3d2a;font-size:0.95rem}
.time-note span{font-weight:700;color:#3f2a1c}
.media-card{text-align:center}
.keyboard-image{max-width:100%;border:1px solid #e0b25c;border-radius:10px}
.media-caption{margin-top:12px;color:#5c3d2a;font-size:0.95rem}
.panel-note{margin-top:14px;color:#5d4433;font-size:0.95rem;line-height:1.6}
@media (max-width:1040px){.landing-grid{grid-template-columns:1fr}.main-panel{order:2}.panel-left,.panel-right{order:1}}
@media (max-width:720px){.page-wrap{padding:12px}.form-row{grid-template-columns:1fr}.landing-topbar{flex-direction:column;align-items:flex-start;gap:8px}}.brand-description, .brand-detail, .info-detail, .info-meta, .chat-detail{font-size:0.93rem;color:#5b422f;margin-top:8px;line-height:1.6}
.brand-detail{font-weight:700;margin-top:10px;color:#4c2f1d}
.landing-nav{display:flex;flex-wrap:wrap;gap:10px}
.landing-nav a{color:#6a4310;text-decoration:none;font-size:0.95rem;padding:10px 14px;border-radius:12px;background:rgba(255,248,230,0.88);border:1px solid rgba(209,139,43,0.18);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.15)}
.landing-nav a:hover{background:#fff2cf}
.hero-copy{margin-top:18px;padding:24px;border-radius:22px;background:#fffaf2;border:1px solid rgba(209,139,43,0.14);box-shadow:0 10px 20px rgba(188,123,31,0.05)}
.hero-title{font-size:2rem;font-weight:700;color:#8b5210;line-height:1.2}
.hero-text{margin-top:12px;font-size:1rem;color:#4f3c31;line-height:1.8;max-width:700px}
.hero-buttons{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.button-secondary{display:inline-flex;align-items:center;justify-content:center;padding:14px 24px;border-radius:14px;background:linear-gradient(180deg,#ffd66d 0%,#f2a93a 100%);color:#4b2f0d;border:none;box-shadow:0 10px 20px rgba(238,168,58,0.18);font-weight:700;text-decoration:none}
.button-secondary:hover{background:linear-gradient(180deg,#ffe08a 0%,#efb24b 100%)}
.button-secondary.small{padding:10px 16px;font-size:0.85rem}
.hero-stats{display:grid;grid-template-columns:repeat(3,minmax(100px,1fr));gap:12px;margin-top:20px}
.hero-stat{padding:14px 16px;border-radius:16px;background:#fff1cc;border:1px solid rgba(209,139,43,0.16);text-align:center}
.hero-stat span{display:block;font-size:1.4rem;font-weight:700;color:#8b5210}
.hero-stat div{margin-top:6px;font-size:0.9rem;color:#6a4d33}
.info-meta{margin-top:12px;font-style:italic;color:#6b4d34}
.landing-grid{display:grid;grid-template-columns:240px minmax(520px, 1fr) 240px;gap:18px}
.panel, .side-panel{background:#fff1d1;border:1px solid rgba(209,139,43,0.12);border-radius:18px;padding:20px;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.45)}
.panel h2, .side-panel h2{margin:0 0 16px;font-size:1.05rem;color:#7b4a12;border-bottom:1px solid rgba(209,139,43,0.18);padding-bottom:10px;text-transform:uppercase;letter-spacing:0.08em}
.panel ol, .side-panel ol{padding-left:18px;margin:0;color:#4d3625;line-height:1.8}
.panel li, .side-panel li{margin-bottom:8px}
.main-card{background:#fffaf2;border:1px solid rgba(209,139,43,0.14);border-radius:22px;padding:24px;box-shadow:0 12px 24px rgba(188,123,31,0.05)}
.card-header{font-size:1.3rem;font-weight:700;color:#8b5210;margin-bottom:20px}
.login-grid{display:grid;grid-template-columns:120px minmax(220px,1fr);gap:14px;align-items:end}
.login-grid label{font-size:0.95rem;color:#4b351f;font-weight:700}
.login-grid input,
.login-grid select{width:100%;padding:12px 14px;border:1px solid rgba(209,139,43,0.26);border-radius:10px;background:#fff7e2;font-size:0.95rem}
.login-actions{grid-column:1 / -1;display:flex;justify-content:flex-end}
.button-large{display:inline-flex;align-items:center;justify-content:center;padding:14px 24px;border-radius:14px;background:linear-gradient(180deg,#ffd66d 0%,#f2a93a 100%);color:#4b2f0d;text-decoration:none;font-weight:700;box-shadow:0 12px 24px rgba(238,168,58,0.22)}
.login-note{margin-top:16px;color:#8d5d1b;font-size:0.95rem}
.info-card, .chart-card, .footer-card{background:#fffaf2;border:1px solid rgba(209,139,43,0.14);border-radius:22px;padding:24px}
.info-times{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.info-times span{font-size:1rem;color:#4f3d28}
.info-times .highlight{font-size:2rem;font-weight:700;color:#8b5210}
.info-card p{margin:0 0 12px 0;line-height:1.7;color:#5f4528}
.chart-placeholder{height:140px;border-radius:16px;background:linear-gradient(135deg, rgba(242,169,58,0.10), rgba(255,238,196,0.95));display:flex;align-items:center;justify-content:center;color:#8a5a19;font-size:0.95rem}
.chart-note{margin-top:14px;color:#8b5c23;font-size:0.92rem;text-align:center}
.footer-card{text-align:center}
.guestbook{font-size:1.2rem;font-weight:700;color:#a05f12;margin-top:12px}
.panel-footnote{margin-top:14px;color:#7d5c32;font-size:0.93rem;line-height:1.6}
/* Chat page */
.chat-app{--chat-bg:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);--header-bg:linear-gradient(180deg,#ffffff 0%,#f7f9fc 100%);--header-border:rgba(148,163,184,0.2);--header-text:#1f2937;--nav-bg:#f8fafc;--nav-border:#e2e8f0;--nav-color:#334155;--chat-panel-bg:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);--chat-panel-border:#e2e8f0;--bubble-bg:#ffffff;--bubble-border:#e2e8f0;--bubble-text:#1f2937;--bubble-self-bg:linear-gradient(135deg,#e0f2fe 0%,#dbeafe 100%);--bubble-self-border:#bfdbfe;--bubble-self-text:#1f2937;--sidebar-bg:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);--sidebar-border:#e2e8f0;--sidebar-text:#1f2937;--sidebar-muted:#475569;--theme-button-bg:#ffffff;--theme-button-border:#e2e8f0;width:100%;max-width:none;margin:0;min-height:100vh;background:var(--chat-bg);border:none;border-radius:0;box-shadow:none;padding:0;color:var(--bubble-text)}
.chat-app[data-theme="light"]{--chat-bg:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);--header-bg:linear-gradient(180deg,#ffffff 0%,#f7f9fc 100%);--header-border:rgba(148,163,184,0.2);--header-text:#1f2937;--nav-bg:#f8fafc;--nav-border:#e2e8f0;--nav-color:#334155;--chat-panel-bg:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);--chat-panel-border:#e2e8f0;--bubble-bg:#ffffff;--bubble-border:#e2e8f0;--bubble-text:#1f2937;--bubble-self-bg:linear-gradient(135deg,#e0f2fe 0%,#dbeafe 100%);--bubble-self-border:#bfdbfe;--bubble-self-text:#1f2937;--sidebar-bg:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);--sidebar-border:#e2e8f0;--sidebar-text:#1f2937;--sidebar-muted:#475569;--theme-button-bg:#ffffff;--theme-button-border:#e2e8f0}
.chat-app[data-theme="dark"], .chat-app[data-theme="blue"], .chat-app[data-theme="violet"], .chat-app[data-theme="green"], .chat-app[data-theme="rose"]{--chat-bg:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);--header-bg:linear-gradient(180deg,#ffffff 0%,#f7f9fc 100%);--header-border:rgba(148,163,184,0.2);--header-text:#1f2937;--nav-bg:#f8fafc;--nav-border:#e2e8f0;--nav-color:#334155;--chat-panel-bg:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);--chat-panel-border:#e2e8f0;--bubble-bg:#ffffff;--bubble-border:#e2e8f0;--bubble-text:#1f2937;--bubble-self-bg:linear-gradient(135deg,#e0f2fe 0%,#dbeafe 100%);--bubble-self-border:#bfdbfe;--bubble-self-text:#1f2937;--sidebar-bg:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);--sidebar-border:#e2e8f0;--sidebar-text:#1f2937;--sidebar-muted:#475569;--theme-button-bg:#ffffff;--theme-button-border:#e2e8f0}
.chat-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 20px;background:var(--header-bg);border-bottom:1px solid var(--header-border);box-shadow:0 12px 30px rgba(2,6,23,0.18);border-radius:0}
.topbar-left{display:flex;align-items:center;gap:12px;flex:1}
.logo-icon{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:12px;background:transparent;border:none;box-shadow:none}
.logo-gmail-mark,.brand-gmail-mark{display:block;width:100%;height:100%}
.logo-text{font-size:1.08rem;font-weight:800;letter-spacing:-0.03em;color:var(--header-text)}
.chat-loading-overlay{position:fixed;inset:0;background:rgba(2,6,23,0.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;z-index:2000;transition:opacity 0.28s ease, visibility 0.28s ease}
.chat-loading-overlay.hidden{opacity:0;visibility:hidden;pointer-events:none}
.chat-loading-card{display:flex;flex-direction:column;align-items:center;gap:16px;padding:28px 36px;border-radius:24px;background:rgba(15,23,42,0.92);border:1px solid rgba(96,165,250,0.15);box-shadow:0 30px 80px rgba(15,23,42,0.35)}
.chat-loading-logo{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;width:84px;height:84px;padding:10px;border-radius:18px;background:linear-gradient(135deg,#17243d,#111827);border:1px solid rgba(96,165,250,0.18)}
.chat-loading-square{display:block;border-radius:14px}
.square-a{background:linear-gradient(135deg,#60a5fa,#2563eb)}
.square-b{background:linear-gradient(135deg,#c084fc,#8b5cf6)}
.square-c{background:linear-gradient(135deg,#fbbf24,#f59e0b)}
.square-d{background:linear-gradient(135deg,#34d399,#10b981)}
.chat-loading-text{font-size:clamp(1.5rem,2.4vw,2.2rem);font-weight:900;letter-spacing:-0.04em;color:#eff6ff}
.quiz-timer{display:inline-flex;align-items:center;justify-content:center;min-width:72px;padding:8px 12px;border-radius:999px;background:rgba(96,165,250,0.15);color:#dbeafe;font-weight:900;border:1px solid rgba(96,165,250,0.3);margin-top:10px}
.chat-subtitle,.chat-detail{display:none}
.ban-overlay{position:fixed;inset:0;background:radial-gradient(circle at center,#5f0b0b 0%,#460606 30%,#2a0000 100%);display:flex;align-items:center;justify-content:center;z-index:2000;padding:24px}
.ban-card{width:min(760px,100%);background:linear-gradient(180deg,#fffaff 0%,#fdf5f5 100%);border:1px solid rgba(239,68,68,0.2);border-radius:22px;padding:28px 28px 22px;box-shadow:0 30px 80px rgba(120,0,0,0.45);text-align:center}
.ban-icons{display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:20px}
.ban-icon,.ban-lock{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:16px;background:linear-gradient(180deg,#ff4d4d 0%,#d91d1d 100%);color:#fff;font-size:2.1rem;box-shadow:0 0 18px rgba(239,68,68,0.5);font-weight:900}
.ban-lock{font-size:2.3rem}
.ban-card h1{margin:0 0 10px;font-size:clamp(2.4rem,4vw,4rem);line-height:1.02;color:#1f2937;font-weight:900;letter-spacing:-0.06em}
.ban-card h2{margin:0 0 12px;color:#6b1d1d;font-size:clamp(1.2rem,2vw,2rem);font-weight:800;letter-spacing:-0.03em}
.ban-warning{margin:0 0 22px;color:#5b2d2d;font-size:1.05rem;line-height:1.5}
.ban-info-box{background:linear-gradient(180deg,#fff5f5 0%,#fef1f1 100%);border:1px solid rgba(239,68,68,0.12);border-radius:16px;padding:18px 16px;margin-bottom:24px;text-align:left}
.ban-info-title{display:flex;align-items:center;gap:10px;margin-bottom:14px;font-size:1.1rem;font-weight:900;color:#7f1d1d}
.ban-info-title::before{content:'i';display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:#d91d1d;color:#fff;font-size:0.9rem;font-weight:900}
.ban-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px}
.ban-row{display:flex;justify-content:space-between;gap:16px;padding:10px 6px;border-bottom:1px solid rgba(239,68,68,0.08);font-size:0.98rem;color:#374151}
.ban-row:last-child{border-bottom:none}
.ban-label{font-weight:800;color:#7f1d1d}
.ban-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:12px}
.ban-btn{border:none;border-radius:12px;padding:12px 18px;font-size:0.98rem;font-weight:800;cursor:pointer;transition:transform 0.15s ease, box-shadow 0.15s ease}
.ban-btn:hover{transform:translateY(-1px)}
.ban-btn.primary{background:linear-gradient(180deg,#ef4444 0%,#dc2626 100%);color:#fff;box-shadow:0 12px 24px rgba(220,38,38,0.18)}
.ban-btn.secondary{background:#fef2f2;color:#991b1b;border:1px solid rgba(239,68,68,0.18)}
.ban-btn.tertiary{background:#fff;color:#7f1d1d;border:1px solid rgba(239,68,68,0.18)}
body.ban-screen-active{overflow:hidden}
.top-menu{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.top-menu a{color:var(--nav-color);background:var(--nav-bg);border:1px solid var(--nav-border);padding:8px 12px;border-radius:10px;text-decoration:none;font-size:0.77rem;font-weight:700;line-height:1;transition:all 0.18s ease}
.top-menu a:hover{background:rgba(96,165,250,0.12);border-color:rgba(96,165,250,0.32);color:var(--header-text);box-shadow:0 8px 18px rgba(15,23,42,0.12)}
.commands-toggle{color:#ffffff;background:linear-gradient(135deg,#3b82f6,#2563eb);border:none;border-radius:10px;padding:8px 12px;font-size:0.77rem;font-weight:800;cursor:pointer;box-shadow:0 8px 18px rgba(37,99,235,0.22)}
.commands-toggle:hover{filter:brightness(1.04)}
.chat-title{display:inline-flex;align-items:center;justify-content:center;padding:0;background:transparent;border:none;border-radius:0;font-size:1rem;font-weight:800;color:#1f2937;margin-left:8px;box-shadow:none}
.daily-question-banner{display:flex;align-items:center;justify-content:center;padding:10px 12px;border-radius:12px;background:#eaf5ff;border:1px solid rgba(148,163,184,0.25);box-shadow:0 8px 18px rgba(15,23,42,0.03);margin:14px 0 10px;min-height:58px}
.daily-question-text{font-size:clamp(0.96rem,1.05vw,1.28rem);font-weight:800;color:#0f172a;line-height:1.35;letter-spacing:-0.02em;text-align:center}
.chat-main-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start;padding:18px 18px 12px;max-width:1400px;margin:0 auto}
.chat-area{display:flex;flex-direction:column;gap:12px}
.messages{min-height:540px;padding:18px 16px;background:var(--chat-panel-bg);border:1px solid var(--chat-panel-border);border-radius:24px;overflow:auto;box-shadow:inset 0 1px 2px rgba(15,23,42,0.02), 0 16px 32px rgba(2,6,23,0.18)}
.msg{margin-bottom:12px;display:flex}
.msg.me{justify-content:flex-end}
.bubble{max-width:100%;background:var(--bubble-bg);border:1px solid var(--bubble-border);border-radius:18px;padding:10px 12px;box-shadow:0 6px 16px rgba(15,23,42,0.08);line-height:1.55;color:var(--bubble-text)}
.bubble.private{background:var(--bubble-bg);border-color:var(--bubble-border)}
.msg.me .bubble{background:var(--bubble-self-bg);border-color:var(--bubble-self-border);color:var(--bubble-self-text)}
.from{font-size:0.83rem;color:var(--sidebar-muted);margin-bottom:6px;font-weight:700}
.private-label{font-size:0.72rem;font-weight:700;color:var(--sidebar-muted);margin-bottom:6px}
.meta{margin-top:8px;font-size:0.74rem;color:var(--sidebar-muted);text-align:right}
.reaction-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.reaction-btn{border:1px solid var(--theme-button-border);background:var(--theme-button-bg);border-radius:999px;padding:2px 7px;font-size:0.8rem;cursor:pointer;color:var(--sidebar-text)}
.reaction-btn:hover{background:rgba(96,165,250,0.12)}
.reaction-btn.active{background:rgba(96,165,250,0.22);border-color:rgba(147,197,253,0.45);font-weight:700}
.bubble-actions{display:flex;justify-content:flex-end;margin-top:8px}
.report-btn{border:1px solid rgba(248,113,113,0.5);background:rgba(127,29,29,0.64);color:#fecaca;border-radius:999px;padding:4px 10px;font-size:0.72rem;font-weight:700;cursor:pointer;transition:all 0.15s ease}
.report-btn:hover{background:rgba(185,28,28,0.8);border-color:rgba(252,165,165,0.8);color:#fff1f2}
.report-btn:active{transform:translateY(1px)}
.system-msg{padding:9px 12px;margin-bottom:10px;border-radius:10px;background:rgba(191,219,254,0.5);border:1px solid rgba(96,165,250,0.28);color:#1f3b5a;font-weight:700;box-shadow:inset 0 1px 0 rgba(255,255,255,0.2)}
.chat-bottom-row{display:flex;flex-direction:column;gap:12px}
.emoji-line{display:flex;flex-wrap:wrap;gap:6px;padding:8px 10px;border-radius:12px;background:var(--theme-button-bg);border:1px solid var(--theme-button-border)}
.emoji-btn{border:none;background:var(--theme-button-bg);border:1px solid var(--theme-button-border);border-radius:8px;padding:4px 6px;font-size:1rem;cursor:pointer;color:var(--sidebar-text)}
.emoji-btn:hover{background:rgba(96,165,250,0.12)}
.message-input-row{display:grid;grid-template-columns:80px 1fr 92px;gap:8px;align-items:center}
.message-input-row label{font-size:0.82rem;color:var(--sidebar-muted);font-weight:700}
.message-input-row textarea{width:100%;border-radius:12px;padding:10px 12px;border:1px solid var(--theme-button-border);background:var(--theme-button-bg);resize:none;min-height:46px;box-shadow:inset 0 1px 2px rgba(2,6,23,0.08);font-size:0.95rem;color:var(--bubble-text)}
.message-input-row textarea::placeholder{color:var(--sidebar-muted)}
.message-input-row button{width:100%;min-width:82px;padding:10px 12px;border-radius:12px;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border:none;cursor:pointer;font-weight:800;box-shadow:0 8px 16px rgba(37,99,235,0.18);white-space:nowrap;display:flex;align-items:center;justify-content:center}
.sidebar-right{display:flex;flex-direction:column;gap:12px;padding-right:4px}
.sidebar-block{background:var(--sidebar-bg);border:1px solid var(--sidebar-border);border-radius:16px;padding:12px 14px;box-shadow:0 12px 24px rgba(2,6,23,0.12)}
.sidebar-block h2{margin:0 0 8px;font-size:0.75rem;color:var(--sidebar-muted);text-transform:uppercase;letter-spacing:0.08em;border-bottom:1px solid var(--sidebar-border);padding-bottom:6px}
.sidebar-block.compact{padding:10px 12px}
.commands-list{padding-left:16px;margin:0;color:var(--sidebar-text);line-height:1.5;font-size:0.82rem}
.commands-list li{margin-bottom:5px}
.commands-list strong{color:var(--sidebar-muted)}
.sidebar-right #users-list{padding:0;margin:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.sidebar-right #users-list li{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 0;color:var(--sidebar-text);font-size:0.78rem}
.sidebar-user{padding:8px 10px;border-radius:10px;background:var(--theme-button-bg);border:1px solid var(--theme-button-border);font-weight:700;color:var(--sidebar-text)}
.sidebar-note, .room-text, .room-note, .contact{margin-top:6px;color:var(--sidebar-muted);line-height:1.5;font-size:0.75rem}
.contact-link{color:var(--sidebar-muted);text-decoration:none;font-weight:700}
.contact-link:hover{text-decoration:underline}
.friend-envelope{border:1px solid var(--theme-button-border);background:var(--theme-button-bg);border-radius:8px;padding:1px 6px;font-size:0.72rem;cursor:pointer;color:var(--sidebar-text)}
.friend-envelope:hover{background:rgba(96,165,250,0.12)}
.friend-envelope.active{background:rgba(96,165,250,0.22);border-color:rgba(147,197,253,0.35)}
.room-create{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.room-create label{font-size:0.75rem;color:var(--sidebar-muted);font-weight:700}
.room-create input{width:100%;padding:8px 10px;border-radius:10px;border:1px solid var(--theme-button-border);background:var(--theme-button-bg);color:var(--sidebar-text);cursor:not-allowed}
.room-item{padding:8px 10px;border-radius:10px;background:var(--theme-button-bg);border:1px solid var(--theme-button-border);font-weight:700;color:var(--sidebar-text);cursor:pointer;position:relative;padding-right:32px;margin-bottom:6px;font-size:0.8rem}
.room-item.active{background:rgba(59,130,246,0.12);border-color:rgba(96,165,250,0.25)}
.room-delete{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:transparent;border:none;color:var(--sidebar-muted);font-weight:700;cursor:pointer;padding:3px 5px;border-radius:6px}
.room-delete:hover{background:rgba(148,163,184,0.08)}
.theme-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.theme-swatch{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 6px;border-radius:10px;border:1px solid var(--theme-button-border);background:var(--theme-button-bg);color:var(--sidebar-text);cursor:pointer;font-size:0.68rem;font-weight:700;transition:transform 0.15s ease, border-color 0.15s ease}
.theme-swatch:hover{transform:translateY(-1px)}
.theme-swatch.is-active{border-color:rgba(96,165,250,0.6);box-shadow:0 0 0 1px rgba(96,165,250,0.15)}
.theme-swatch-glow{display:block;width:100%;height:24px;border-radius:8px;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.4)}
.theme-dark{background:linear-gradient(180deg,#101a2e,#0b1220)}
.theme-light{background:linear-gradient(180deg,#ffffff,#edf3ff)}
.theme-blue{background:linear-gradient(180deg,#dfeeff,#a5c7ff)}
.theme-violet{background:linear-gradient(180deg,#2b1746,#7c3aed)}
.theme-green{background:linear-gradient(180deg,#d1fae5,#86efac)}
.theme-rose{background:linear-gradient(180deg,#fecdd3,#fb7185)}
.small-link{display:inline-block;margin-top:6px;color:#1d4ed8;background:#edf4ff;padding:7px 10px;border-radius:8px;text-decoration:none;font-weight:700;border:1px solid #dfe9ff;font-size:0.76rem}
.create-topic-btn{width:100%;margin-top:10px;padding:8px 10px;border-radius:10px;border:none;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;font-weight:800;cursor:pointer;box-shadow:0 8px 16px rgba(37,99,235,0.18)}
.create-topic-btn:hover{transform:translateY(-1px)}
.topic-label{display:block;margin-bottom:8px;font-weight:700;color:#374151;font-size:0.76rem}
.topic-input{width:100%;padding:8px 10px;border:1px solid #dfe3e8;border-radius:10px;background:#ffffff;color:#374151;margin-bottom:10px}
.topic-suggestions{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.topic-chip{border:1px solid #dfe9ff;background:#f5f9ff;color:#1d4ed8;border-radius:999px;padding:5px 8px;font-size:0.72rem;font-weight:700;cursor:pointer}
.topic-chip:hover{background:#eaf4ff}
.small-link{display:inline-block;margin-top:6px;color:#1d4ed8;background:#edf4ff;padding:7px 10px;border-radius:8px;text-decoration:none;font-weight:700;border:1px solid #dfe9ff;font-size:0.76rem}
.create-topic-btn{width:100%;margin-top:10px;padding:8px 10px;border-radius:10px;border:none;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;font-weight:800;cursor:pointer;box-shadow:0 8px 16px rgba(37,99,235,0.18)}
.create-topic-btn:hover{transform:translateY(-1px)}
.topic-label{display:block;margin-bottom:8px;font-weight:700;color:#374151;font-size:0.76rem}
.topic-input{width:100%;padding:8px 10px;border:1px solid #dfe3e8;border-radius:10px;background:#ffffff;color:#374151;margin-bottom:10px}
.topic-suggestions{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.topic-chip{border:1px solid #dfe9ff;background:#f5f9ff;color:#1d4ed8;border-radius:999px;padding:5px 8px;font-size:0.72rem;font-weight:700;cursor:pointer}
.topic-chip:hover{background:#eaf4ff}
.admin-portal{margin-top:8px;border:1px solid rgba(59,130,246,0.15);background:#eef6ff;border-radius:10px;padding:10px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.14)}
.admin-portal-header{display:flex;justify-content:space-between;align-items:center;gap:8px;padding-bottom:8px;border-bottom:1px solid rgba(59,130,246,0.14);font-weight:800;color:#1d4ed8}
.admin-portal-role{padding:3px 6px;border-radius:999px;background:#dbeafe;color:#1d4ed8;font-size:0.68rem}
.admin-portal-body{padding-top:8px}
.admin-portal-summary{margin-bottom:8px;color:#1f2937;font-size:0.78rem}
.admin-portal-list{display:flex;flex-direction:column;gap:6px}
.admin-portal-user{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 8px;border-radius:8px;background:#f8fbff;border:1px solid rgba(59,130,246,0.10)}
.admin-portal-user-name{font-weight:700;color:#0f172a;font-size:0.75rem}
.admin-tester-toggle{display:inline-flex;align-items:center;gap:6px;color:#1f2937;font-size:0.7rem;font-weight:700}
.admin-tester-toggle input{accent-color:#2563eb}
.admin-portal-actions{display:flex;gap:4px}
.admin-action-btn{padding:4px 6px;border-radius:6px;border:none;font-size:0.68rem;font-weight:700;cursor:pointer}
.admin-action-btn.kick{background:#d06146;color:#fff}
.admin-action-btn.ban{background:#4f46e5;color:#fff}
.admin-user-badge{padding:2px 6px;border-radius:999px;background:#e0f2fe;color:#0f172a;font-size:0.66rem;font-weight:700}
.quicklink-overlay{position:fixed;inset:0;background:rgba(15,23,42,0.34);display:flex;align-items:center;justify-content:center;z-index:600;padding:16px}
.quicklink-modal{position:relative;width:min(760px,100%);background:linear-gradient(180deg,#f5f5f6 0%,#f0f2f5 100%);border:1px solid rgba(148,163,184,0.25);border-radius:24px;overflow:hidden;box-shadow:0 28px 74px rgba(15,23,42,0.2)}
.quicklink-header{display:flex;align-items:center;justify-content:space-between;padding:24px 24px 18px;background:transparent;color:#1f2937}
.quicklink-title{font-size:clamp(2.2rem,3vw,3rem);font-weight:900;letter-spacing:-0.06em;color:#1f2937;line-height:1.1}
.quicklink-close{border:none;background:#ffffff;border-radius:50%;width:48px;height:48px;color:#1f2937;font-size:2.1rem;cursor:pointer;line-height:1;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 20px rgba(15,23,42,0.08)}
.quicklink-close:hover{background:#eef3ff}
.quicklink-compose{background:transparent;padding:0 0 24px}
.quicklink-backline{display:flex;align-items:center;gap:10px;padding:18px 24px 20px;border-top:1px solid rgba(148,163,184,0.28);border-bottom:1px solid rgba(148,163,184,0.28);font-size:1.3rem;font-weight:800;color:#1f2937;background:rgba(255,255,255,0.12)}
.quicklink-back-arrow{font-size:2rem;line-height:1;color:#4b5563}
.quicklink-label{display:block;padding:22px 24px 10px;font-size:1.1rem;font-weight:700;color:#374151}
.quicklink-input{display:block;width:calc(100% - 48px);margin:0 24px;padding:18px 16px;border:1px solid rgba(148,163,184,0.4);border-radius:14px;background:#ffffff;color:#1f2937;font-size:1.05rem;outline:none;box-shadow:inset 0 1px 2px rgba(15,23,42,0.03)}
.quicklink-input:focus{border-color:#4f6bed;box-shadow:0 0 0 3px rgba(79,107,237,0.15)}
.quicklink-continue{margin:20px 24px 0;padding:16px 20px;border:none;border-radius:12px;background:linear-gradient(180deg,#f5f7fb 0%,#eaf0ff 100%);color:#1f2937;font-size:1.08rem;font-weight:800;cursor:pointer;box-shadow:0 12px 22px rgba(79,107,237,0.15);border:1px solid rgba(79,107,237,0.18)}
.quicklink-continue:hover{filter:brightness(0.98)}
.profile-modal{position:fixed;inset:0;background:rgba(15,23,42,0.56);display:flex;align-items:center;justify-content:center;z-index:650;padding:20px}
.profile-panel{width:min(760px,100%);max-height:88vh;overflow:auto;background:#ffffff;border:1px solid rgba(148,163,184,0.35);border-radius:22px;box-shadow:0 30px 70px rgba(15,23,42,0.22)}
.profile-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px 20px 12px;border-bottom:1px solid #edf2f7;background:linear-gradient(180deg,#f9fbff 0%,#ffffff 100%)}
.profile-kicker{font-size:0.7rem;font-weight:800;letter-spacing:0.12em;text-transform:uppercase;color:#64748b}
.profile-header h2{margin:6px 0 0;font-size:1.3rem;color:#0f172a}
.profile-close{width:38px;height:38px;border:none;border-radius:10px;background:#f1f5f9;color:#334155;font-size:1.8rem;cursor:pointer;line-height:1}
.profile-close:hover{background:#e2e8f0}
.profile-body{display:grid;grid-template-columns:220px minmax(0,1fr);gap:20px;padding:20px}
.profile-avatar-box{display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px;border:1px solid #e5e7eb;border-radius:18px;background:#f8fafc}
.profile-avatar-preview{display:none;width:132px;height:132px;border-radius:22px;object-fit:cover;border:1px solid #dfe9ff;background:#e2e8f0}
.profile-avatar-empty{display:flex;align-items:center;justify-content:center;width:132px;height:132px;border-radius:22px;background:linear-gradient(135deg,#dbeafe 0%,#bfdbfe 100%);color:#1d4ed8;font-size:3rem;border:1px solid #bfdbfe}
.profile-upload{display:inline-flex;align-items:center;justify-content:center;width:100%;padding:10px 12px;border-radius:12px;background:#edf4ff;color:#1d4ed8;border:1px solid #dfe9ff;font-weight:800;font-size:0.85rem;cursor:pointer}
.profile-avatar-input{display:none}
.profile-fields{display:flex;flex-direction:column;gap:14px}
.profile-field{display:flex;flex-direction:column;gap:8px;color:#334155;font-size:0.8rem;font-weight:800}
.profile-field input,.profile-field textarea{width:100%;padding:10px 12px;border:1px solid #dfe3e8;border-radius:12px;background:#fff;color:#0f172a;font-size:0.92rem;resize:vertical}
.profile-field textarea{min-height:94px}
.profile-grid-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.profile-footer{display:flex;justify-content:flex-end;gap:10px;padding:0 20px 20px}
.profile-secondary,.profile-primary{padding:10px 16px;border:none;border-radius:12px;font-weight:800;cursor:pointer}
.profile-secondary{background:#f1f5f9;color:#334155}
.profile-primary{background:linear-gradient(135deg,#2563eb 0%,#1d4ed8 100%);color:#fff;box-shadow:0 12px 24px rgba(37,99,235,0.16)}
.game-block{display:flex;flex-direction:column;gap:8px}
.game-button{width:100%;padding:10px 12px;border:none;border-radius:12px;font-weight:800;cursor:pointer;box-shadow:0 10px 18px rgba(59,130,246,0.12)}
.quiz-game-button{background:linear-gradient(135deg,#93c5fd 0%,#3b82f6 100%);color:#eff6ff}
.dice-game-button{background:linear-gradient(135deg,#fcd34d 0%,#f59e0b 100%);color:#3a2203}
.word-game-button{background:linear-gradient(135deg,#c4b5fd 0%,#8b5cf6 100%);color:#f5f3ff}
.snake-game-button{width:100%;padding:10px 12px;border:none;border-radius:12px;background:linear-gradient(135deg,#34d399 0%,#10b981 100%);color:#052e16;font-weight:800;cursor:pointer;box-shadow:0 10px 18px rgba(16,185,129,0.18)}
.game-modal{position:fixed;inset:0;background:rgba(15,23,42,0.62);display:flex;align-items:center;justify-content:center;z-index:680;padding:20px}
.game-panel{position:relative;width:min(560px,100%);padding:18px;border-radius:22px;background:#ffffff;border:1px solid rgba(148,163,184,0.35);box-shadow:0 30px 70px rgba(15,23,42,0.22)}
.game-header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding-bottom:12px;border-bottom:1px solid #edf2f7}
.game-kicker{font-size:0.7rem;font-weight:800;letter-spacing:0.12em;text-transform:uppercase;color:#64748b}
.game-header h2{margin:6px 0 0;font-size:1.3rem;color:#0f172a}
.game-close{width:38px;height:38px;border:none;border-radius:10px;background:#f1f5f9;color:#334155;font-size:1.8rem;cursor:pointer;line-height:1}
.game-close:hover{background:#e2e8f0}
.game-body{padding-top:14px;display:flex;flex-direction:column;gap:14px}
.game-card{padding:16px;border-radius:16px;border:1px solid #e5e7eb;background:#f8fafc}
.game-card h3{margin:0 0 8px;font-size:1.05rem;color:#0f172a}
.game-card p{margin:0;color:#475569;line-height:1.6}
.game-lobby-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.game-player-pill{display:inline-flex;align-items:center;justify-content:center;padding:8px 12px;border-radius:999px;background:#eef6ff;border:1px solid #dbeafe;color:#1d4ed8;font-weight:700;font-size:0.8rem}
.game-join-btn,.game-action-btn,.game-secondary-btn{padding:10px 14px;border:none;border-radius:12px;font-weight:800;cursor:pointer}
.game-join-btn,.game-action-btn{background:linear-gradient(135deg,#3b82f6 0%,#2563eb 100%);color:#fff;box-shadow:0 10px 18px rgba(37,99,235,0.18)}
.game-secondary-btn{background:#e2e8f0;color:#1e293b}
.game-status{font-size:0.82rem;font-weight:700;color:#475569}
.game-text-input,.game-select{width:100%;padding:10px 12px;border:1px solid #dfe3e8;border-radius:12px;background:#fff;color:#0f172a}
.game-answer-row{display:flex;gap:8px;flex-wrap:wrap}
.game-answer-row input{flex:1 1 180px}
.game-result{padding:12px 14px;border-radius:12px;background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46;font-weight:700}
.game-result.fail{background:#fef2f2;border-color:#fecaca;color:#991b1b}
.game-dice-display{display:flex;align-items:center;justify-content:center;padding:18px 12px;border-radius:18px;background:linear-gradient(135deg,#fef3c7 0%,#fde68a 100%);border:1px solid #fcd34d;color:#713f12;font-size:clamp(3rem,10vw,4.5rem);font-weight:900;min-height:120px}
.game-lobby-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.game-question{font-size:1.1rem;font-weight:800;color:#111827}
.snake-game-modal{position:fixed;inset:0;background:rgba(15,23,42,0.62);display:flex;align-items:center;justify-content:center;z-index:680;padding:20px}
.snake-game-panel{position:relative;width:min(520px,100%);padding:18px;border-radius:22px;background:#ffffff;border:1px solid rgba(148,163,184,0.35);box-shadow:0 30px 70px rgba(15,23,42,0.22)}
.snake-game-header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding-bottom:10px;border-bottom:1px solid #edf2f7}
.snake-game-kicker{font-size:0.7rem;font-weight:800;letter-spacing:0.12em;text-transform:uppercase;color:#64748b}
.snake-game-header h2{margin:6px 0 0;font-size:1.3rem;color:#0f172a}
.snake-game-close{width:38px;height:38px;border:none;border-radius:10px;background:#f1f5f9;color:#334155;font-size:1.8rem;cursor:pointer;line-height:1}
.snake-game-close:hover{background:#e2e8f0}
.snake-game-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 4px 10px;color:#334155;font-size:0.82rem;font-weight:700}
.snake-game-board{position:relative;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:4px;width:100%;aspect-ratio:1 / 1;background:#f8fafc;border:1px solid #dfe7f1;border-radius:16px;padding:10px}
.snake-game-cell{width:100%;aspect-ratio:1 / 1;border-radius:8px;background:#edf2f7;border:1px solid rgba(148,163,184,0.12);position:relative;overflow:hidden}
.snake-game-cell.snake{background:linear-gradient(135deg,#34d399 0%,#10b981 100%);border-color:rgba(5,150,105,0.1)}
.snake-game-cell.snake-head{background:linear-gradient(135deg,#4ade80 0%,#16a34a 100%)}
.snake-game-cell.snake-head::before,
.snake-game-cell.snake-head::after{content:"";position:absolute;top:24%;width:20%;height:20%;background:#0f172a;border-radius:50%}
.snake-game-cell.snake-head::before{left:20%}
.snake-game-cell.snake-head::after{right:20%}
.snake-game-cell.snake-head.crashed::before,
.snake-game-cell.snake-head.crashed::after{top:14%;width:3px;height:72%;border-radius:999px;background:#0f172a}
.snake-game-cell.snake-head.crashed::before{left:50%;transform:translateX(-50%) rotate(45deg)}
.snake-game-cell.snake-head.crashed::after{right:50%;transform:translateX(50%) rotate(-45deg)}
.snake-game-cell.apple{background:linear-gradient(135deg,#fca5a5 0%,#ef4444 100%);border-color:rgba(239,68,68,0.15)}
.snake-game-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(15,23,42,0.72);border-radius:22px}
.snake-game-over-card{display:flex;flex-direction:column;align-items:center;gap:18px;padding:28px 22px;background:rgba(255,255,255,0.96);border:1px solid rgba(148,163,184,0.28);border-radius:18px;box-shadow:0 20px 40px rgba(15,23,42,0.18)}
.snake-game-over-title{font-size:clamp(1.8rem,4vw,2.5rem);font-weight:900;color:#0f172a;letter-spacing:-0.04em}
.snake-game-over-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.snake-game-btn{padding:10px 18px;border:none;border-radius:12px;font-weight:800;cursor:pointer}
.snake-game-btn.primary{background:linear-gradient(135deg,#10b981 0%,#059669 100%);color:#ecfdf5}
.snake-game-btn.secondary{background:#e2e8f0;color:#1e293b}
.private-thread-header{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#f8fafc;border:1px solid #e4e7eb;border-radius:12px;margin-bottom:10px}
.private-thread-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#5b5fc7,#3b82f6);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800}
.private-thread-meta{display:flex;flex-direction:column;line-height:1.2}
.private-thread-name{font-weight:800;color:#1f2937}
.private-thread-sub{font-size:0.72rem;color:#64748b}
@media (max-width:1040px){.landing-grid,.chat-main-layout{grid-template-columns:1fr}}
@media (max-width:720px){.app{padding:16px}.top-menu{justify-content:center}.message-input-row{grid-template-columns:1fr}.brand-title{font-size:2.4rem}.chat-header{padding:16px}.messages{min-height:320px}.chat-app{width:calc(100% - 20px)}}
/* Help overlay */
.help-overlay{position:fixed;inset:0;background:rgba(15,23,42,0.52);z-index:9999;display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;padding:24px 12px}
.help-modal{background:#f3f6fb;border:1px solid rgba(148,163,184,0.35);border-radius:18px;padding:0;max-width:720px;width:100%;position:relative;box-shadow:0 22px 60px rgba(15,23,42,0.18);font-size:0.94rem;color:#1f2937;overflow:hidden}
.help-header-bar{background:linear-gradient(135deg,#dfeaf8 0%,#edf4ff 100%);color:#1f2937;font-weight:800;font-size:1rem;padding:14px 18px;border-bottom:1px solid rgba(148,163,184,0.28);display:flex;align-items:center;justify-content:space-between;gap:10px}
.help-icon-btn{background:#ffffff;border:1px solid rgba(96,165,250,0.28);color:#1d4ed8;padding:8px 12px;border-radius:999px;font-size:0.82rem;font-weight:700;cursor:pointer;box-shadow:0 4px 12px rgba(59,130,246,0.08)}
.help-icon-btn:hover{background:#f5f9ff}
.help-intro{margin:16px 18px 12px;color:#334155;line-height:1.7;font-size:0.98rem}
.help-intro strong{color:#0f172a}
.help-suggestions{margin:0 18px 14px;padding:12px 14px;border:1px solid rgba(96,165,250,0.2);background:#f8fbff;border-radius:12px}
.help-suggestions-title{font-weight:800;color:#1d4ed8;margin-bottom:8px}
.feedback-type-row{display:flex;flex-wrap:wrap;gap:12px;margin:8px 0 10px}
.feedback-option{display:inline-flex;align-items:center;gap:8px;color:#334155;font-size:0.9rem;font-weight:700}
.feedback-option input{accent-color:#2563eb}
.help-suggestions-list{margin:0;padding-left:18px;color:#475569;line-height:1.7}
.help-suggestions-label{display:block;margin-top:10px;font-weight:700;color:#334155}
.help-suggestions-input{width:100%;margin-top:8px;padding:10px 12px;border:1px solid rgba(148,163,184,0.3);border-radius:10px;background:#fff;resize:vertical;color:#0f172a}
.help-suggestions-submit{margin-top:10px;padding:9px 12px;border:none;border-radius:10px;background:linear-gradient(135deg,#2563eb 0%,#1d4ed8 100%);color:#fff;font-weight:800;cursor:pointer;box-shadow:0 10px 18px rgba(37,99,235,0.18)}
.help-suggestions-submit:hover{filter:brightness(1.03)}
.help-section-title{font-size:1.02rem;font-weight:800;color:#0f172a;margin:16px 18px 8px;border-bottom:1px solid rgba(148,163,184,0.2);padding-bottom:7px}
.help-cmd-name{font-weight:800;color:#0f172a;margin:10px 18px 0;font-size:0.96rem}
.help-table{width:calc(100% - 36px);margin:8px 18px 0;border-collapse:separate;border-spacing:0;border:1px solid rgba(148,163,184,0.2);border-radius:12px;overflow:hidden;background:#fff}
.help-table tr{border-bottom:1px solid rgba(148,163,184,0.15)}
.help-table tr:last-child{border-bottom:none}
.help-label{background:#edf4ff;color:#1d4ed8;font-weight:800;padding:10px 12px;width:86px;vertical-align:top;white-space:nowrap}
.help-table td:last-child{background:#fff;padding:10px 12px;line-height:1.6;color:#334155}
.help-close{position:absolute;top:10px;right:12px;background:rgba(15,23,42,0.06);border:none;border-radius:8px;width:32px;height:32px;font-size:1.35rem;cursor:pointer;color:#334155;line-height:1;z-index:1}
.help-close:hover{background:rgba(15,23,42,0.1)}
.news-history-backdrop{position:fixed;inset:0;background:rgba(30,20,10,0.45);opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:1090}
.news-history-panel{position:fixed;top:0;right:0;height:100vh;width:min(420px,92vw);background:#fffaf0;border-left:1px solid rgba(209,139,43,0.25);box-shadow:-16px 0 36px rgba(0,0,0,0.18);padding:18px 16px 20px;transform:translateX(105%);transition:transform .22s ease;z-index:1100;display:flex;flex-direction:column;gap:12px}
.news-history-panel.open{transform:translateX(0)}
.news-history-backdrop.open{opacity:1;pointer-events:auto}
.news-history-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:10px;border-bottom:1px solid rgba(209,139,43,0.18)}
.news-history-head h3{margin:0;font-size:1.05rem;color:#7f4c12}
.news-history-head button{border:none;background:#f2a93a;color:#4b2f0d;border-radius:10px;width:34px;height:34px;font-size:1rem;font-weight:700;cursor:pointer}
.news-history-list{margin:0;padding:0 0 0 18px;color:#4d3725;line-height:1.65;display:flex;flex-direction:column;gap:10px}
.news-history-list strong{color:#7b4a12}
.countdown-active{overflow:hidden}
.countdown-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(15,23,42,0.7);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:1200;opacity:0;pointer-events:none;transition:opacity 0.2s ease}
.countdown-overlay.visible{opacity:1;pointer-events:auto}
.countdown-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:30px 42px 26px;border-radius:28px;background:linear-gradient(180deg, rgba(255,255,255,0.96), rgba(243,247,255,0.94));border:1px solid rgba(148,163,184,0.22);box-shadow:0 28px 80px rgba(15,23,42,0.32);min-width:min(92vw,560px);text-align:center;overflow:hidden}
.countdown-card::before{content:"";position:absolute;inset:0 auto auto 0;width:100%;height:5px;background:linear-gradient(90deg,#6ea8fe,#4f6bed,#7c3aed)}
.countdown-label{position:relative;z-index:1;font-size:clamp(0.82rem,1.4vw,1.1rem);letter-spacing:0.14em;text-transform:uppercase;color:#4b5ea7;font-weight:800}
.countdown-value{position:relative;z-index:1;min-width:220px;font-size:clamp(5.5rem,18vw,12rem);line-height:0.9;font-weight:900;color:#0f172a;letter-spacing:-0.07em;text-shadow:0 10px 24px rgba(79,107,237,0.12);animation:countdownPulse 1s ease-in-out infinite alternate}
@keyframes countdownPulse{0%{transform:scale(0.98);opacity:0.96}100%{transform:scale(1);opacity:1}}
.chat-app.messenger-mode .chat-subtitle,
.chat-app.messenger-mode .chat-detail,
.chat-app.messenger-mode .sidebar-right,
.chat-app.messenger-mode .emoji-line{display:none}
.chat-app.messenger-mode .chat-main-layout{grid-template-columns:1fr;max-width:860px;margin:0 auto}
.chat-app.messenger-mode .messages{min-height:62vh;border-radius:20px;background:linear-gradient(180deg,#0f172a 0%,#111827 100%);border-color:rgba(148,163,184,0.18)}
.chat-app.messenger-mode .bubble{max-width:78%;border-radius:18px}
.chat-app.messenger-mode .msg.me .bubble{background:linear-gradient(135deg,#1d4ed8 0%,#2563eb 100%);border-color:rgba(147,197,253,0.4)}
.chat-app.messenger-mode .message-input-row{grid-template-columns:1fr 132px 132px}
.chat-app.messenger-mode .message-input-row label{display:none}
@media (max-width:1040px){.landing-grid,.chat-main-layout{grid-template-columns:1fr}}
@media (max-width:720px){.app{padding:16px}.top-menu{justify-content:center}.message-input-row{grid-template-columns:1fr}.brand-title{font-size:2.4rem}.chat-header{padding:16px}.messages{min-height:320px}}
.landing-page-body{background:radial-gradient(circle at top,#fdfbf6 0%,#eef4ff 35%,#e9f0f9 100%);min-height:100vh;padding:24px;color:#0f172a}
.landing-shell-new{max-width:1180px;margin:0 auto;display:flex;flex-direction:column;gap:22px}
.site-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;border-radius:18px;background:rgba(255,255,255,0.72);backdrop-filter:blur(10px);border:1px solid rgba(148,163,184,0.18);box-shadow:0 12px 24px rgba(15,23,42,0.04)}
.brand-lockup{display:flex;align-items:center;gap:12px}
.brand-mark{width:42px;height:42px;border-radius:12px;background:transparent;display:flex;align-items:center;justify-content:center;border:none;box-shadow:none}
.brand-gmail-mark{display:block;width:100%;height:100%}
.brand-copy strong{display:block;font-size:1.08rem;line-height:1.2;letter-spacing:-0.03em;color:#0f172a}
.brand-lockup strong{display:block;font-size:1rem;letter-spacing:-0.02em}
.brand-lockup span{display:block;font-size:0.72rem;color:#64748b}
.top-nav{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.top-nav a{color:#334155;text-decoration:none;font-weight:700;opacity:0.9}
.mini-btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:12px;background:#0f172a;color:#fff;text-decoration:none;font-weight:700}
.cookie-banner{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);width:min(920px,calc(100% - 24px));background:rgba(255,250,239,0.98);border:1px solid rgba(124,73,16,0.2);border-radius:18px;box-shadow:0 20px 50px rgba(80,50,20,0.18);z-index:1000;padding:16px 18px}
.cookie-content{display:flex;align-items:center;justify-content:space-between;gap:18px}
.cookie-copy{flex:1}
.cookie-copy h3{margin:0 0 8px;font-size:1.05rem;color:#6f3d0d}
.cookie-copy p{margin:0;line-height:1.6;color:#5e3f22;font-size:0.96rem}
.cookie-actions{display:flex;gap:10px;flex-shrink:0}
.cookie-btn{min-width:170px;padding:12px 16px;border:none;border-radius:12px;font-weight:800;cursor:pointer;transition:transform 0.15s ease, filter 0.15s ease}
.cookie-btn:hover{transform:translateY(-1px);filter:brightness(0.98)}
.cookie-btn.accept{background:linear-gradient(180deg,#ffb84d 0%,#ed8c22 100%);color:#311d0a}
.cookie-btn.decline{background:#f0f3f7;color:#303942;border:1px solid rgba(0,0,0,0.08)}
.promo-banner{padding:14px 18px;border-radius:18px;background:linear-gradient(90deg,#fff5e0 0%,#ffe4b7 100%);border:1px solid rgba(212,145,65,0.2);color:#6f3d0d;font-weight:800;text-align:center;box-shadow:0 8px 22px rgba(156,117,60,0.08)}
.promo-banner a, .chat-ad-strip a{color:#0d5bd7;text-decoration:underline;font-weight:800}
.hero-card{display:grid;grid-template-columns:1.25fr 0.75fr;gap:24px;align-items:stretch;background:linear-gradient(180deg,#ffffff 0%,#f9fafb 100%);border:1px solid rgba(148,163,184,0.25);border-radius:28px;padding:28px;box-shadow:0 22px 50px rgba(15,23,42,0.06)}
.chat-ad-strip{display:none;margin-top:10px;padding:10px 14px;border-radius:12px;background:#fff0bf;border:1px solid rgba(209,139,43,0.18);color:#6b3d08;font-weight:700;text-align:center}
.hero-copy{display:flex;flex-direction:column;justify-content:center}
.eyebrow{display:inline-block;margin:0 0 12px;font-size:0.82rem;font-weight:800;letter-spacing:0.16em;text-transform:uppercase;color:#f27a1a}
.hero-badges{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.hero-badges span{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:#eef4ff;border:1px solid rgba(96,165,250,0.25);color:#2459be;font-weight:700;font-size:0.8rem}
.hero-copy h1{margin:0 0 12px;font-size:clamp(2.1rem,3.1vw,3.3rem);line-height:1.08;color:#0f172a;letter-spacing:-0.04em}
.hero-text{margin:0 0 20px;font-size:1.06rem;line-height:1.8;color:#475569;max-width:680px}
.hero-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:20px;max-width:420px}
.stat-box{padding:12px 14px;border:1px solid rgba(148,163,184,0.22);border-radius:16px;background:linear-gradient(180deg,#f8fbff 0%,#eef4ff 100%);display:flex;flex-direction:column;gap:4px}
.stat-box strong{font-size:1.1rem;color:#1d4ed8}
.stat-box span{font-size:0.72rem;color:#475569;text-transform:uppercase;letter-spacing:0.08em}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.ghost-link{display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;border-radius:12px;background:linear-gradient(135deg,#ffb74d 0%,#f59d2a 100%);color:#2a1607;text-decoration:none;font-weight:800;box-shadow:0 12px 24px rgba(245,157,42,0.22)}
.ghost-link.secondary{background:#edf2f8;color:#334155;border:1px solid rgba(148,163,184,0.2);box-shadow:none}
.youtube-follow-link{display:inline-flex;align-items:center;justify-content:center;margin-top:18px;padding:14px 20px;border-radius:14px;background:linear-gradient(180deg,#ff584d 0%,#e52e2e 100%);color:#fff6f5;text-decoration:none;font-weight:900;letter-spacing:0.08em;text-transform:uppercase;box-shadow:0 0 0 1px rgba(255,255,255,0.2),0 0 18px rgba(239,68,68,0.55),0 12px 28px rgba(220,38,38,0.22);transition:transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;max-width:fit-content}
.youtube-follow-link:hover{transform:translateY(-1px);filter:brightness(1.04);box-shadow:0 0 0 1px rgba(255,255,255,0.22),0 0 24px rgba(239,68,68,0.75),0 14px 32px rgba(220,38,38,0.28)}
.youtube-follow-link:focus-visible{outline:3px solid rgba(239,68,68,0.42);outline-offset:3px}
.entry-card{background:linear-gradient(180deg,#f9fafb 0%,#eef4ff 100%);border:1px solid rgba(148,163,184,0.22);border-radius:22px;padding:22px;display:flex;flex-direction:column;gap:12px;box-shadow:0 12px 30px rgba(15,23,42,0.05)}
.entry-card h2{margin:0;font-size:1.3rem;color:#0f172a}
.entry-card label{font-size:0.95rem;font-weight:700;color:#334155}
.entry-card input{padding:12px 14px;border-radius:12px;border:1px solid rgba(148,163,184,0.35);background:#fff;color:#0f172a}
.entry-card button{padding:12px 16px;border:none;border-radius:12px;background:linear-gradient(135deg,#1d4ed8 0%,#2563eb 100%);color:#fff;font-weight:800;cursor:pointer;box-shadow:0 12px 22px rgba(37,99,235,0.18)}
.entry-note{margin:0;color:#475569;font-size:0.92rem;line-height:1.5}
.registration-card{margin-top:22px;background:linear-gradient(180deg,#fffefc 0%,#f4f7ff 100%);border:1px solid rgba(99,102,241,0.12);border-radius:22px;padding:22px 20px;box-shadow:0 14px 28px rgba(82,88,112,0.05)}
.registration-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:18px}
.registration-header h2{margin:0;font-size:clamp(1.7rem,3vw,2.4rem);line-height:1.1;color:#111827;letter-spacing:-0.04em}
.eyebrow-tight{margin:0 0 8px;font-size:0.76rem;font-weight:800;letter-spacing:0.14em;text-transform:uppercase;color:#b4171d}
.registration-badge{display:inline-flex;align-items:center;padding:7px 12px;border-radius:999px;background:#ffe4e6;color:#991b1b;font-size:0.74rem;font-weight:800;border:1px solid rgba(185,28,28,0.12)}
.registration-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;align-items:center}
.registration-copy{padding:18px;border:1px solid rgba(99,102,241,0.08);border-radius:18px;background:rgba(255,255,255,0.65)}
.registration-copy p{margin:0 0 12px;color:#374151;line-height:1.7}
.registration-copy ul{margin:0;padding-left:20px;color:#374151;line-height:1.9}
.register-form{display:flex;flex-direction:column;gap:10px;padding:18px;border:1px solid rgba(99,102,241,0.08);border-radius:18px;background:rgba(255,255,255,0.8)}
.register-form label{font-size:0.8rem;color:#475569;text-transform:uppercase;letter-spacing:0.08em;font-weight:800}
.register-form input{width:100%;padding:12px 14px;border:1px solid rgba(184,196,212,0.8);border-radius:12px;background:#fff;color:#111827;font-size:1rem;outline:none}
.register-form input:focus{border-color:#4f46e5;box-shadow:0 0 0 3px rgba(79,70,229,0.12)}
.register-form button{margin-top:8px;padding:14px 18px;border:none;border-radius:12px;background:linear-gradient(135deg,#ef4444 0%,#b4171d 100%);color:#fff;font-size:1rem;font-weight:800;cursor:pointer;box-shadow:0 16px 28px rgba(180,23,29,0.22)}
.leaderboard-card{background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);border:1px solid rgba(148,163,184,0.25);border-radius:20px;padding:20px;box-shadow:0 18px 42px rgba(15,23,42,0.05)}
.leaderboard-header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.leaderboard-header h2{margin:0;font-size:1.2rem;color:#0f172a}
.leaderboard-header span{font-size:0.82rem;font-weight:700;color:#475569}
.leaderboard-table-wrap{overflow:hidden;border:1px solid rgba(148,163,184,0.22);border-radius:14px;background:#fff}
.leaderboard-table{width:100%;border-collapse:collapse}
.leaderboard-table th, .leaderboard-table td{padding:12px 14px;text-align:left;border-bottom:1px solid rgba(148,163,184,0.15)}
.leaderboard-table th{background:#eff6ff;color:#1e3a8a;font-size:0.8rem;text-transform:uppercase;letter-spacing:0.08em}
.leaderboard-table td{color:#1f2937;font-weight:700}
.leaderboard-table tbody tr:last-child td{border-bottom:none}
.leaderboard-rank{display:inline-block;min-width:24px;color:#f59e0b;font-weight:800}
.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.feature-card{background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);border:1px solid rgba(148,163,184,0.22);border-radius:18px;padding:20px;box-shadow:0 14px 26px rgba(15,23,42,0.04);transition:transform 0.18s ease, box-shadow 0.18s ease}
.feature-card:hover{transform:translateY(-2px);box-shadow:0 18px 30px rgba(15,23,42,0.08)}
.feature-card h3{margin:0 0 8px;color:#0f172a}
.feature-card p{margin:0;line-height:1.7;color:#475569}
.feature-card .feature-tag{display:inline-block;margin-bottom:10px;padding:5px 8px;border-radius:999px;background:#eff6ff;color:#1d4ed8;font-weight:800;font-size:0.7rem;letter-spacing:0.08em;text-transform:uppercase}
.admin-portal{margin-top:12px;border:1px solid rgba(209,139,43,0.18);background:rgba(255,249,236,0.96);border-radius:18px;padding:12px 14px;box-shadow:0 10px 32px rgba(120,72,7,0.08)}
.admin-portal-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid rgba(209,139,43,0.18);font-weight:800;color:#6a3f0d}
.admin-portal-role{padding:5px 9px;border-radius:999px;background:#f0dca1;color:#6a3f0d;font-size:0.74rem;letter-spacing:0.05em;text-transform:uppercase}
.admin-portal-body{padding-top:10px}
.admin-portal-summary{margin-bottom:10px;color:#5d402a;font-size:0.94rem}
.admin-portal-list{display:flex;flex-direction:column;gap:8px}
.admin-portal-user{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:12px;background:#fff8ea;border:1px solid rgba(209,139,43,0.18);color:#4c3524}
.admin-portal-user-name{font-weight:700}
.admin-portal-actions{display:flex;gap:6px;flex-wrap:wrap}
.admin-action-btn{padding:6px 10px;border:none;border-radius:10px;font-weight:700;cursor:pointer}
.admin-action-btn.kick{background:#d95a3d;color:#fff}
.admin-action-btn.ban{background:#8d5c25;color:#fff}
.admin-action-btn:disabled{opacity:0.5;cursor:not-allowed}
.admin-user-badge{padding:3px 7px;border-radius:999px;background:#ffe7b8;color:#7b4510;font-weight:700;font-size:0.75rem}
@media (max-width:860px){.hero-card{grid-template-columns:1fr}.feature-grid{grid-template-columns:1fr}.registration-grid{grid-template-columns:1fr}.registration-header{flex-direction:column}.cookie-content{flex-direction:column;align-items:flex-start}.cookie-actions{width:100%}.cookie-btn{flex:1;min-width:0}}
.moderation-btn,.moderation-bell,.moderation-bell-inline{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:10px;padding:8px 12px;font-size:0.77rem;font-weight:800;cursor:pointer;transition:transform .15s ease, box-shadow .15s ease}
.moderation-btn{background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:#fff;box-shadow:0 10px 18px rgba(37,99,235,0.18)}
.moderation-bell{background:linear-gradient(135deg,#f8fafc,#e2e8f0);border:1px solid rgba(148,163,184,0.3);color:#1e293b;position:relative}
.moderation-bell-inline{background:#edf4ff;color:#1d4ed8;border:1px solid rgba(96,165,250,0.2)}
.moderation-btn:hover,.moderation-bell:hover,.moderation-bell-inline:hover{transform:translateY(-1px)}
.moderation-badge{display:none;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#ef4444;color:#fff;font-size:0.65rem;font-weight:800;line-height:1;position:absolute;top:-6px;right:-6px;border:2px solid #fff}
.moderation-center-modal,.appeal-modal,.moderation-action-modal{position:fixed;inset:0;background:rgba(15,23,42,0.62);display:flex;align-items:center;justify-content:center;z-index:1400;padding:20px}
.moderation-center-panel,.appeal-panel,.moderation-action-panel{width:min(980px,100%);max-height:88vh;overflow:auto;background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);border:1px solid rgba(148,163,184,0.3);border-radius:22px;box-shadow:0 32px 80px rgba(15,23,42,0.24)}
.moderation-action-panel{width:min(760px,100%)}
.moderation-center-header,.appeal-header,.moderation-action-header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:18px 20px 12px;border-bottom:1px solid rgba(148,163,184,0.18)}
.moderation-kicker{font-size:0.7rem;font-weight:900;letter-spacing:0.14em;text-transform:uppercase;color:#64748b}
.moderation-center-header h2,.appeal-header h3,.moderation-action-header h3{margin:8px 0 0;font-size:1.7rem;color:#0f172a;letter-spacing:-0.04em}
.moderation-close{width:38px;height:38px;border:none;border-radius:10px;background:#f1f5f9;color:#334155;font-size:1.8rem;cursor:pointer}
.moderation-close:hover{background:#e2e8f0}
.moderation-center-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 20px 0}
.moderation-pill{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;background:#dbeafe;color:#1d4ed8;font-size:0.74rem;font-weight:800}
.moderation-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:18px 20px 0}
.metric-card{padding:14px;border-radius:14px;background:linear-gradient(180deg,#f8fbff 0%,#eff6ff 100%);border:1px solid rgba(96,165,250,0.16);display:flex;flex-direction:column;gap:8px}
.metric-card span{font-size:0.72rem;text-transform:uppercase;letter-spacing:0.12em;color:#64748b;font-weight:800}
.metric-card strong{font-size:1.8rem;color:#0f172a;letter-spacing:-0.04em}
.moderation-tabs{display:flex;flex-wrap:wrap;gap:8px;padding:18px 20px 0}
.moderation-tab{padding:9px 12px;border-radius:10px;border:1px solid rgba(148,163,184,0.18);background:#f8fafc;color:#334155;font-weight:800;cursor:pointer}
.moderation-tab.active{background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:#fff;border-color:transparent}
.moderation-content{padding:18px 20px 20px;display:flex;flex-direction:column;gap:12px}
.moderation-item{padding:14px;border:1px solid rgba(148,163,184,0.16);border-radius:12px;background:#fff;box-shadow:0 6px 18px rgba(15,23,42,0.04)}
.moderation-item-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
.moderation-item-head strong{color:#0f172a;font-size:1rem}
.moderation-item-head span,.moderation-item-row span{font-size:0.72rem;text-transform:uppercase;letter-spacing:0.08em;color:#64748b;font-weight:800}
.moderation-item-row{display:flex;justify-content:space-between;gap:10px;padding:4px 0;color:#334155;font-size:0.82rem}
.moderation-item-row strong{color:#0f172a;text-align:right;max-width:60%}
.moderation-actions-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.moderation-action{padding:8px 10px;border:none;border-radius:10px;font-weight:800;cursor:pointer}
.moderation-action.approve{background:linear-gradient(135deg,#10b981,#059669);color:#ecfdf5}
.moderation-action.reject{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff}
.moderation-action.request{background:linear-gradient(135deg,#dbeafe,#bfdbfe);color:#1d4ed8}
.moderation-user-controls{display:flex;flex-direction:column;gap:10px}
.moderation-user-search{width:100%;padding:12px 14px;border:1px solid rgba(148,163,184,0.3);border-radius:12px;background:#f8fafc;color:#0f172a;font-size:0.95rem}
.moderation-user-history{margin:10px 0 0;padding-left:18px;color:#475569;line-height:1.6;font-size:0.8rem}
.moderation-empty{padding:14px;border-radius:12px;background:#f8fafc;border:1px solid rgba(148,163,184,0.14);color:#334155}
.moderation-overview-box{padding:14px;border-radius:12px;background:linear-gradient(180deg,#f8fbff 0%,#eef6ff 100%);border:1px solid rgba(96,165,250,0.14)}
.moderation-overview-box h3{margin:0 0 12px;font-size:1.1rem;color:#0f172a}
.moderation-overview-box p{margin:0 0 8px;color:#475569}
.moderation-action-form{padding:20px}
.moderation-choice{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid rgba(148,163,184,0.22);border-radius:12px;background:#f8fafc;color:#0f172a;font-weight:700;margin-bottom:12px}
.moderation-choice input{accent-color:#2563eb}
.moderation-action-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.moderation-action-grid label{display:flex;flex-direction:column;gap:8px;color:#475569;font-size:0.74rem;font-weight:800;letter-spacing:0.08em;text-transform:uppercase}
.moderation-action-grid input,.moderation-action-grid textarea{width:100%;padding:10px 12px;border:1px solid rgba(148,163,184,0.28);border-radius:10px;background:#fff;color:#0f172a}
.moderation-action-note-field{grid-column:1 / -1}
.moderation-confirmation-actions{display:flex;justify-content:flex-end;gap:10px;padding:0 20px 20px}
.moderation-cancel-btn,.moderation-confirm-btn{padding:11px 16px;border:none;border-radius:12px;font-weight:800;cursor:pointer}
.moderation-cancel-btn{background:#e2e8f0;color:#0f172a}
.moderation-confirm-btn{background:linear-gradient(135deg,#2563eb 0%,#1d4ed8 100%);color:#fff;box-shadow:0 12px 22px rgba(37,99,235,0.18)}
.appeal-form{display:flex;flex-direction:column;gap:10px;padding:20px}
.appeal-form label{font-size:0.8rem;font-weight:800;letter-spacing:0.08em;text-transform:uppercase;color:#475569}
.appeal-form input,.appeal-form textarea{width:100%;padding:12px 14px;border:1px solid rgba(148,163,184,0.3);border-radius:12px;background:#fff;color:#0f172a;resize:vertical}
.appeal-form textarea{min-height:140px}
.appeal-actions{display:flex;justify-content:flex-end;margin-top:8px}
.appeal-submit{padding:12px 16px;border:none;border-radius:12px;background:linear-gradient(135deg,#2563eb 0%,#1d4ed8 100%);color:#fff;font-weight:800;cursor:pointer;box-shadow:0 12px 22px rgba(37,99,235,0.18)}
.ban-btn.appeal{background:linear-gradient(180deg,#2563eb 0%,#1d4ed8 100%);color:#fff;box-shadow:0 12px 24px rgba(37,99,235,0.18)}
.ban-overlay.test-mode{background:radial-gradient(circle at center,#0f172a 0%,#100d2f 40%,#070b16 100%)}
.ban-overlay.test-mode .ban-card{border-color:rgba(96,165,250,0.45);box-shadow:0 30px 80px rgba(59,130,246,0.26)}
.ban-overlay.test-mode .ban-icon,.ban-overlay.test-mode .ban-lock{background:linear-gradient(180deg,#60a5fa 0%,#2563eb 100%);box-shadow:0 0 20px rgba(96,165,250,0.45)}
.ban-overlay.test-mode .ban-info-box{background:linear-gradient(180deg,#eef6ff 0%,#e0f2fe 100%);border-color:rgba(96,165,250,0.18)}
.ban-overlay.test-mode .ban-label,.ban-overlay.test-mode .ban-info-title{color:#1d4ed8}
.ban-overlay.test-mode .ban-btn.primary{background:linear-gradient(180deg,#60a5fa 0%,#2563eb 100%)}
@media (max-width:720px){.moderation-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.moderation-center-meta{flex-direction:column;align-items:flex-start}.moderation-item-row{flex-direction:column}.moderation-item-row strong{max-width:100%;text-align:left}.moderation-action-grid{grid-template-columns:1fr}.moderation-confirmation-actions{flex-direction:column-reverse}.moderation-confirmation-actions button{width:100%}}