:root {
  --xp-blue: #245edb;
  --xp-blue-dark: #123f9f;
  --panel: #ece9d8;
  --text: #1c1c1c;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  color: var(--text);
  font: 13px Tahoma, Verdana, Arial, sans-serif;
  background: #2d8bda url("/static/wallpapers/xp-bliss.jpg") center center / cover fixed no-repeat;
}
a { color: inherit; }
button, input, textarea, select { font: inherit; }

.desktop { min-height: 100vh; padding: 22px 22px 58px 112px; }
.desktop-icons { position: fixed; left: 16px; top: 18px; display: grid; gap: 16px; width: 78px; }
.desktop-icon { color: #fff; text-align: center; text-decoration: none; text-shadow: 1px 1px 2px #00346c; display: grid; gap: 5px; justify-items: center; }
.icon { width: 38px; height: 32px; border: 1px solid rgba(0,0,0,.35); box-shadow: inset 1px 1px rgba(255,255,255,.7), 1px 2px 3px rgba(0,0,0,.3); }
.folder { background: linear-gradient(#ffe78c 0 28%, #f0b51c 29%); border-radius: 3px; }
.doc { background: linear-gradient(#fff, #b9d9ff); border-radius: 2px; }
.search-icon { background: linear-gradient(135deg, #fff 0 55%, #4d8fff 56%); border-radius: 8px; }

.window { max-width: 1180px; min-height: 720px; margin: 0 auto; background: var(--panel); border: 1px solid #0846b8; border-radius: 8px 8px 3px 3px; box-shadow: 0 16px 45px rgba(0,0,0,.38); overflow: hidden; }
.titlebar { height: 34px; padding: 5px 6px 5px 9px; color: #fff; background: linear-gradient(#4c8dff, var(--xp-blue) 48%, var(--xp-blue-dark)); display: flex; align-items: center; justify-content: space-between; font-weight: 700; }
.title-left { display: flex; align-items: center; gap: 8px; }
.app-icon { width: 18px; height: 18px; border-radius: 3px; background: linear-gradient(90deg, #e74937 0 50%, #2f86f6 51%); box-shadow: inset 1px 1px rgba(255,255,255,.8); }
.window-actions { display: flex; gap: 3px; }
.window-actions span { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid rgba(0,0,0,.35); border-radius: 3px; background: linear-gradient(#80a9ff, #1a55cd); }
.window-actions span:last-child { background: linear-gradient(#f5a07a, #c43c1d); }

.menu { min-height: 28px; padding: 4px 8px; background: #f3f1e7; border-bottom: 1px solid #b8b3a3; display: flex; gap: 4px; }
.menu a { padding: 4px 10px; text-decoration: none; border: 1px solid transparent; }
.menu a:hover { border-color: #7f9db9; background: #fff; }
.userbar, .toolbar { padding: 8px; border-bottom: 1px solid #c6c0ad; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.userbar { background: linear-gradient(#fff, #ebe6d4); }
.content-area {
  padding-top: 10px;
}
.content-area > .notice:first-child,
.content-area > .layout:first-child,
.content-area > .single-column:first-child,
.content-area > .wide-form:first-child,
.content-area > .auth-wrap:first-child {
  margin-top: 0;
}
.user-status { min-width: 150px; display: flex; align-items: center; gap: 7px; font-weight: 700; }
.status-light { width: 10px; height: 10px; border-radius: 50%; background: #3ed34e; box-shadow: 0 0 0 1px #1d7f29, 0 0 7px #3ed34e; }
.coin-pill { padding: 2px 7px; border: 1px solid #a47b00; background: #fff3b0; font-weight: 700; }
.verify-pill { padding: 2px 7px; color: #fff; border: 1px solid #1d6691; background: #229ed9; text-decoration: none; font-weight: 700; }
.telegram-bot-box {
  margin: 10px;
  padding: 10px;
  border: 1px solid #7f9db9;
  background: #e7f0ff;
}
.telegram-bot-box.warning {
  border-color: #b38919;
  background: #fff8d7;
  color: #5c4300;
}

.xp-button { min-height: 25px; padding: 4px 12px; color: #111; border: 1px solid #777; background: linear-gradient(#fff, #ddd8c4); box-shadow: inset 1px 1px #fff; text-decoration: none; display: inline-block; }
.xp-button.primary { border-color: #2d5aa7; background: linear-gradient(#fff, #bfd7ff); }
.search { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.search input { width: 220px; height: 24px; border: 1px solid #7f9db9; padding: 2px 6px; background: #fff; }
.search.wide { margin-left: 0; flex: 1; }
.search.wide input { flex: 1; width: auto; }

.notice { margin: 10px; padding: 10px; border: 1px solid #a8a38f; background: #fff8d7; display: flex; gap: 10px; align-items: center; }
.flashes { margin: 10px; display: grid; gap: 6px; }
.flash { padding: 8px 10px; border: 1px solid #a8a38f; background: #fff8d7; }
.flash.error { background: #ffe0dc; }
.flash.ok { background: #e3ffdc; }

.layout { padding: 0 10px 14px; display: grid; grid-template-columns: 270px minmax(0,1fr); gap: 10px; }
.single-column, .auth-wrap { padding: 0 10px 14px; display: grid; gap: 10px; }
.auth-wrap { place-items: start center; }
.panel { border: 1px solid #8d8877; background: #fff; box-shadow: inset 1px 1px #fff; }
.panel-title { padding: 7px 9px; color: #fff; font-weight: 700; background: linear-gradient(90deg, #1e54b8, #6aa2ff); }
.panel-title.small { margin-top: 10px; }
.category { min-height: 66px; padding: 9px; border-top: 1px solid #d6d0bd; background: #f7f4e7; display: grid; grid-template-columns: 28px minmax(0,1fr) auto; gap: 8px; align-items: center; text-decoration: none; }
.category:hover { background: #dce9ff; }
.cat-icon { width: 24px; height: 24px; display: grid; place-items: center; color: #fff; background: linear-gradient(#6aa2ff, #1e54b8); border: 1px solid #2d5aa7; }
.category small { display: block; margin-top: 3px; color: #5b5b5b; }
.category em { min-width: 28px; padding: 2px 5px; text-align: center; font-style: normal; border: 1px solid #a8a38f; background: #fff; }
.stat-row { padding: 9px 10px; border-top: 1px solid #d6d0bd; display: flex; justify-content: space-between; }
.members { list-style: none; margin: 0; padding: 8px 10px 10px; display: grid; gap: 8px; }
.members li { display: flex; align-items: center; gap: 8px; }
.members small { margin-left: auto; color: #666; }
.avatar { width: 18px; height: 18px; border-radius: 3px; border: 1px solid rgba(0,0,0,.35); background: #4d8fff center / cover no-repeat; flex: 0 0 auto; box-shadow: inset 1px 1px rgba(255,255,255,.35); }
.avatar.large { width: 44px; height: 44px; }
.avatar.huge { width: 64px; height: 64px; }
.avatar-frame {
  display: inline-grid;
  place-items: center;
  padding: 3px;
  border-radius: 7px;
  vertical-align: middle;
}
.avatar-frame-neon {
  background: linear-gradient(135deg, #21d8ff, #245edb, #ff3ee8);
  box-shadow: 0 0 12px rgba(33,216,255,.72);
}
.avatar-frame-gold {
  background: linear-gradient(135deg, #fff7b8, #d39c18, #8a5a00);
  box-shadow: 0 0 10px rgba(211,156,24,.65);
}
.avatar-frame-fire {
  background: conic-gradient(#fff3a0, #ff8a00, #d71919, #5e0505, #fff3a0);
  box-shadow: 0 0 12px rgba(255,80,0,.82);
  animation: frameFire 2s linear infinite;
}
.avatar-frame .avatar {
  display: block;
}
.avatar-settings-preview { margin: 10px; padding: 8px; border: 1px solid #b8b3a3; background: #f7f4e7; display: flex; align-items: center; gap: 10px; }
.inline-check { margin: 0 !important; display: flex; align-items: center; gap: 6px; }
.inline-check input { width: auto; margin: 0; }
.workspace { min-width: 0; display: grid; gap: 10px; }
.toolbar { background: #f3f1e7; border: 1px solid #c6c0ad; }
.toolbar-spacer { flex: 1; }
.mini-status { color: #666; }
.forum-table { overflow: hidden; }
.table-head, .topic-row { display: grid; grid-template-columns: minmax(260px,1fr) 130px 72px 150px; align-items: center; }
.table-head { padding: 6px 8px; color: #fff; font-weight: 700; background: linear-gradient(90deg, #1e54b8, #6aa2ff); }
.topic-row { min-height: 58px; padding: 7px 8px; border-top: 1px solid #d8d2bf; background: #fbfbfb; text-decoration: none; }
.topic-row:nth-child(odd) { background: #f2f6ff; }
.topic-row:hover { background: #cfe1ff; }
.topic-row.pinned { background: #fff7d6; }
.topic-row small { display: block; margin-top: 3px; color: #555; }
.empty { padding: 16px; color: #666; }

.thread-view { background: #f7f4e7; }
.thread-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; background: linear-gradient(90deg, #1e54b8, #6aa2ff); }
.thread-head .panel-title { background: transparent; }
.thread-score { padding: 0 9px 7px; color: #eaf2ff; font-weight: 700; }
.thread-head form { margin: 8px; display: flex; align-items: center; }
.upvote-button { min-height: 36px; padding: 6px 12px; color: #fff; font-weight: 700; border: 1px solid #7a0f0f; background: linear-gradient(#ff6d5b, #c72d1b); box-shadow: inset 1px 1px rgba(255,255,255,.55); }
.upvote-button.active, .upvote-button:disabled { opacity: .75; background: linear-gradient(#8ac27a, #3a8f38); border-color: #22671f; }
.post { display: grid; grid-template-columns: 150px minmax(0,1fr); border-top: 1px solid #d6d0bd; }
.post.post-night .post-body, .bubble.post-night, .preview-post.post-night { background: #1f2430; color: #ecf2ff; border-color: #52627e; }
.post.post-gold .post-body, .bubble.post-gold, .preview-post.post-gold { background: linear-gradient(#fff5c5, #f0cf69); color: #382900; border-color: #b38919; }
.post.post-matrix .post-body, .bubble.post-matrix, .preview-post.post-matrix { background: #071b0c; color: #7dff8b; border-color: #1c8d34; text-shadow: 0 0 5px rgba(125,255,139,.45); }
.post-author { padding: 12px; background: #ebe6d4; border-right: 1px solid #d6d0bd; display: grid; align-content: start; justify-items: center; gap: 5px; text-align: center; }
.post-author small, .post-meta { color: #666; }
.post-body { padding: 12px; background: #fff; }
.rich-text { min-height: 58px; margin: 8px 0; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.rich-text .quote { margin: 8px 0; padding: 8px 10px; border-left: 4px solid #6aa2ff; background: rgba(220,233,255,.85); white-space: pre-wrap; }
.rich-text .code-block { margin: 8px 0; padding: 8px 10px; border: 1px solid #a8a38f; background: #f3f1e7; font-family: "Courier New", monospace; white-space: pre-wrap; overflow: auto; }
.reply-reference { display: block; margin: 0 0 8px; padding: 7px 9px; color: inherit; text-decoration: none; border: 1px solid #b8b3a3; background: rgba(255,248,215,.9); }
.reply-reference span { display: block; margin-top: 3px; color: #555; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reply-action { margin-top: 8px; padding: 3px 8px; border: 1px solid #7f9db9; background: linear-gradient(#fff, #dce9ff); }
.reply-target { margin: 10px; padding: 7px 9px; border: 1px solid #7f9db9; background: #dce9ff; display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.reply-target[hidden] { display: none !important; }
.attachments { margin-top: 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.attachments a { min-height: 86px; border: 1px solid #a8a38f; background: #f3f1e7; display: grid; place-items: center; overflow: hidden; }
.attachments img { width: 100%; height: 100%; max-height: 220px; object-fit: cover; display: block; }
.reply-box { display: grid; gap: 8px; padding-bottom: 10px; }
.reply-box textarea, .xp-form textarea, .xp-form input, .xp-form select { width: calc(100% - 20px); margin: 0 10px; border: 1px solid #7f9db9; background: #fff; padding: 6px; }
.reply-box p, .reply-box div, .xp-form div, .xp-form label, .hint { margin: 10px; }
.editor-toolbar { margin: 0 10px; padding: 6px; border: 1px solid #b8b3a3; background: #f3f1e7; display: flex; gap: 5px; flex-wrap: wrap; }
.editor-toolbar .format-button { min-width: 28px; min-height: 24px; padding: 2px 7px; border: 1px solid #777; background: linear-gradient(#fff, #ddd8c4); box-shadow: inset 1px 1px #fff; }
.xp-form { width: 100%; max-width: 680px; display: grid; gap: 8px; padding-bottom: 10px; }
.auth-card { max-width: 430px; }
.hint { color: #666; line-height: 1.4; }
.crumbs { padding: 8px 10px; border: 1px solid #c6c0ad; background: #f3f1e7; }
.profile-main { padding: 14px; display: flex; gap: 14px; align-items: center; }
.profile.profile-glow { box-shadow: 0 0 18px rgba(77,143,255,.65), inset 1px 1px #fff; }
.profile.profile-gold { border-color: #b38919; box-shadow: 0 0 0 2px #f0cf69, 0 0 18px rgba(214,165,31,.55); }
.profile-main h1 { margin: 0 0 5px; font-size: 22px; }
.profile-main p { margin: 3px 0; color: #555; }
.profile-title-badge,
.mini-title {
  display: inline-block;
  margin: 2px 0 4px;
  padding: 3px 8px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid #1c58bd;
  border-radius: 3px;
  background: linear-gradient(#6aa2ff, #1c58bd);
  box-shadow: inset 1px 1px rgba(255,255,255,.5);
}
.mini-title {
  margin: 0;
  font-size: 11px;
}
.profile-stamp {
  display: inline-block;
  margin: 2px 0 5px;
  padding: 4px 10px;
  color: #b91818;
  font-weight: 900;
  letter-spacing: .08em;
  border: 2px solid currentColor;
  border-radius: 5px;
  transform: rotate(-4deg);
  background: rgba(255,255,255,.52);
  text-transform: uppercase;
}
.badge { display: inline-block; padding: 2px 7px; border: 1px solid #a47b00; background: linear-gradient(#fff7c4, #e4bc34); font-size: 12px; vertical-align: middle; }
.badge-preview { min-width: 54px; padding: 6px 12px; text-align: center; font-weight: 700; box-shadow: inset 1px 1px rgba(255,255,255,.65), 0 2px 6px rgba(0,0,0,.18); }
.badge-13 { color: #fff; border-color: #7a0f0f; background: linear-gradient(#ff5f4f, #9d1515); text-shadow: 1px 1px #4a0707; }
.badge-vip { color: #3b2800; border-color: #b38919; background: linear-gradient(#fff2a8, #d6a51f); }
.badge-технарь { color: #fff; border-color: #205f9e; background: linear-gradient(#5aa4ff, #1e54b8); }
.badge-old-school { color: #fff; border-color: #555; background: linear-gradient(#888, #333); }
.badge-легенда { color: #fff; border-color: #7a0f0f; background: linear-gradient(135deg, #ff3548, #5e0a7a); }
.badge-ночной { color: #c7e7ff; border-color: #182f6d; background: linear-gradient(#1e2748, #071126); }
.badge-основатель { color: #1d1300; border-color: #b38919; background: linear-gradient(135deg, #fff7c4, #f0cf69 45%, #c78b12); }
.owned { margin-top: 10px; }
.owned-grid, .shop-grid { display: grid; gap: 10px; padding: 10px; }
.owned-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.owned-item { padding: 8px; border: 1px solid #b8b3a3; background: #fff8d7; }
.shop-section { overflow: hidden; }
.shop-section + .shop-section { margin-top: 10px; }
.shop-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); padding: 10px; }
.shop-card { padding-bottom: 10px; }
.shop-card p { min-height: 54px; margin: 10px; line-height: 1.45; }
.shop-preview { min-height: 82px; margin: 10px; padding: 10px; border: 1px solid #d8d2bf; background: #f7f4e7; display: grid; place-items: center; }
.preview-post { width: 100%; padding: 10px; border: 1px solid #a8a38f; display: grid; gap: 5px; }
.preview-profile { width: 100%; padding: 10px; border: 1px solid #a8a38f; background: #fff; display: flex; align-items: center; justify-content: center; gap: 8px; }
.preview-profile.profile-glow { box-shadow: 0 0 18px rgba(77,143,255,.75), inset 1px 1px #fff; border-color: #4d8fff; }
.preview-profile.profile-gold { border-color: #b38919; box-shadow: 0 0 0 2px #f0cf69, 0 0 18px rgba(214,165,31,.7); background: #fff8d7; }
.shop-card form, .shop-card > button { margin: 0 10px; }
.shop-meta { margin: 10px; display: flex; justify-content: space-between; align-items: center; }
.admin-grid { padding: 0 10px 14px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 420px); gap: 10px; }
.messages-grid { padding: 0 10px 14px; display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 10px; }
.messenger { margin: 0 10px 14px; min-height: 560px; display: grid; grid-template-columns: 320px minmax(0, 1fr); overflow: hidden; }
.dialogs { border-right: 1px solid #8d8877; background: #f7f4e7; min-width: 0; }
.dialog-search { padding: 8px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; border-bottom: 1px solid #d8d2bf; }
.dialog-search input, .chat-empty input { border: 1px solid #7f9db9; padding: 5px; min-width: 0; }
.dialog-list { display: grid; }
.dialog-item { min-height: 68px; padding: 9px; border-bottom: 1px solid #d8d2bf; color: inherit; text-decoration: none; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.dialog-item:hover, .dialog-item.active { background: #dce9ff; }
.dialog-text { min-width: 0; display: grid; gap: 3px; }
.dialog-text small { color: #555; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dialog-meta { display: grid; justify-items: end; gap: 5px; color: #666; }
.dialog-meta b { min-width: 20px; height: 20px; padding: 2px 6px; color: #fff; text-align: center; border-radius: 10px; background: #1e54b8; }
.chat { min-width: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: #ece9d8; }
.chat-head { min-height: 58px; padding: 9px 10px; border-bottom: 1px solid #b8b3a3; background: linear-gradient(#fff, #ebe6d4); display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.chat-head small { display: block; margin-top: 2px; color: #666; }
.chat-body { padding: 14px; overflow: auto; display: flex; flex-direction: column; gap: 9px; background: linear-gradient(#f9f8ef, #e7e1cc); }
.bubble { max-width: min(620px, 82%); padding: 8px 10px 6px; border: 1px solid #a8a38f; box-shadow: inset 1px 1px #fff; }
.bubble.incoming { align-self: flex-start; background: #fff; }
.bubble.outgoing { align-self: flex-end; background: #dce9ff; border-color: #7f9db9; }
.bubble.incoming.post-night, .bubble.outgoing.post-night { background: #1f2430; color: #ecf2ff; border-color: #52627e; box-shadow: inset 1px 1px rgba(255,255,255,.12), 0 0 12px rgba(31,36,48,.28); }
.bubble.incoming.post-gold, .bubble.outgoing.post-gold { background: linear-gradient(#fff5c5, #f0cf69); color: #382900; border-color: #b38919; box-shadow: inset 1px 1px rgba(255,255,255,.65), 0 0 12px rgba(240,207,105,.45); }
.bubble.incoming.post-matrix, .bubble.outgoing.post-matrix { background: #071b0c; color: #7dff8b; border-color: #1c8d34; text-shadow: 0 0 5px rgba(125,255,139,.45); box-shadow: inset 1px 1px rgba(125,255,139,.12), 0 0 12px rgba(28,141,52,.35); }
.bubble.post-night footer, .bubble.post-night .msg-status,
.bubble.post-matrix footer, .bubble.post-matrix .msg-status { color: currentColor; opacity: .78; }
.bubble.post-gold footer, .bubble.post-gold .msg-status { color: #5c4300; }
.bubble p { margin: 0 0 6px; line-height: 1.45; white-space: pre-wrap; }
.bubble footer { display: flex; justify-content: flex-end; gap: 8px; color: #666; font-size: 11px; }
.msg-status.read { color: #1f7a2b; }
.msg-status.delivered { color: #4b679a; }
.chat-compose { padding: 10px; border-top: 1px solid #b8b3a3; background: #f3f1e7; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.chat-compose textarea { width: 100%; border: 1px solid #7f9db9; padding: 7px; resize: vertical; }
.compose-main { min-width: 0; display: grid; gap: 6px; }
.chat-empty { place-self: center; width: min(420px, 90%); display: grid; gap: 10px; text-align: center; }
.chat-empty form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
.admin-list { display: grid; }
.admin-row { min-height: 54px; padding: 8px; border-top: 1px solid #d8d2bf; display: grid; grid-template-columns: minmax(0, 1fr) 150px 90px auto; gap: 8px; align-items: center; }
.admin-row small { display: block; margin-top: 3px; color: #666; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-row input, .admin-row select { width: 100%; border: 1px solid #7f9db9; padding: 4px; }
.danger-row { min-height: 42px; background: #fff1ef; }
.compact-form { border-top: 1px solid #d8d2bf; max-width: none; }
.danger, .danger-link { color: #8e170b; }
.danger-link { border: 0; background: transparent; text-decoration: underline; padding: 3px; }
.message-list { display: grid; }
.message-card { padding: 10px; border-top: 1px solid #d8d2bf; background: #fff; display: grid; gap: 7px; }
.message-card.unread { background: #e7f0ff; }
.message-card div { display: flex; justify-content: space-between; gap: 8px; }
.message-card small { color: #666; }
.message-card p { margin: 0; line-height: 1.45; white-space: pre-wrap; }
.qip-smile { max-width: 42px; max-height: 42px; vertical-align: middle; image-rendering: auto; }
.smiles-picker { margin: 0 10px; position: relative; display: inline-block; }
.chat-compose .smiles-picker { margin: 0; }
.smiles-popover { position: absolute; left: 0; bottom: calc(100% + 5px); z-index: 10; width: min(360px, calc(100vw - 30px)); max-height: 210px; overflow: auto; padding: 7px; border: 1px solid #8d8877; background: #ece9d8; box-shadow: 2px 3px 12px rgba(0,0,0,.28); display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); gap: 4px; }
.smiles-popover[hidden] { display: none !important; }
.reply-box .smiles-popover, .xp-form .smiles-popover { bottom: auto; top: calc(100% + 5px); }
.smile-button { width: 34px; height: 34px; padding: 2px; border: 1px solid #b8b3a3; background: #fff; display: grid; place-items: center; }
.smile-button:hover { background: #dce9ff; border-color: #7f9db9; }
.smile-button img { max-width: 28px; max-height: 28px; }
.smiles-note { grid-column: 1 / -1; color: #666; padding: 4px; }

.window { border-color: #0b4cc1; background: #e9e4cf; }
.titlebar { height: 38px; padding: 6px 8px 6px 11px; }
.title-left span:last-child { letter-spacing: 0; }
.menu { min-height: 34px; padding: 5px 8px; gap: 6px; align-items: center; flex-wrap: wrap; background: linear-gradient(#fffef8, #e8e2cd); }
.menu a { min-height: 24px; padding: 5px 9px; border-color: transparent; border-radius: 3px; display: inline-flex; align-items: center; gap: 5px; }
.menu a:hover { border-color: #7f9db9; background: linear-gradient(#fff, #dce9ff); }
.menu a b { min-width: 18px; height: 18px; padding: 1px 5px; color: #fff; font-size: 11px; text-align: center; border-radius: 9px; background: #c72d1b; }
.userbar { min-height: 48px; padding: 9px 10px; gap: 10px; background: linear-gradient(#fff, #f2eddb); }
.user-status { min-width: 0; padding: 4px 8px; border: 1px solid #c6c0ad; background: #fff; }
.coin-pill { border-radius: 2px; box-shadow: inset 1px 1px rgba(255,255,255,.75); }
.xp-button, .editor-toolbar .format-button, .reply-action { border-radius: 3px; transition: background .12s ease, border-color .12s ease; }
.xp-button:hover, .editor-toolbar .format-button:hover, .reply-action:hover { border-color: #2d5aa7; background: linear-gradient(#fff, #dce9ff); }
.xp-button.primary { font-weight: 700; background: linear-gradient(#fff, #c7dcff); }
.notice { margin: 12px 12px 10px; padding: 12px; border-color: #b7a45e; background: linear-gradient(#fff9d9, #f1df91); box-shadow: inset 1px 1px rgba(255,255,255,.8); }
.hero-notice { min-height: 62px; justify-content: space-between; align-items: center; }
.hero-notice div { display: grid; gap: 4px; }
.hero-notice strong { font-size: 18px; }
.hero-notice span { color: #5a4c16; }
.layout { padding: 0 12px 16px; grid-template-columns: 286px minmax(0,1fr); gap: 12px; }
.single-column, .auth-wrap { padding: 0 12px 16px; }
.panel { border-color: #9b9584; box-shadow: inset 1px 1px #fff, 0 1px 2px rgba(0,0,0,.08); }
.panel-title { min-height: 32px; padding: 8px 10px; background: linear-gradient(#3f83ea, #1c58bd 52%, #16469a); }
.category { min-height: 70px; padding: 10px; background: linear-gradient(#fff, #f3f0e1); grid-template-columns: 32px minmax(0,1fr) auto; }
.category:hover { background: linear-gradient(#f8fbff, #dce9ff); }
.cat-icon { width: 28px; height: 28px; border-radius: 4px; font-weight: 700; }
.category strong, .topic-main b { font-size: 14px; }
.category em, .topic-count { min-width: 32px; padding: 4px 7px; border-radius: 2px; font-weight: 700; background: #fff; }
.members li { min-height: 26px; padding: 2px 0; }
.toolbar { min-height: 42px; border-color: #c6c0ad; background: linear-gradient(#fff, #f0ead7); }
.section-toolbar strong { margin-right: auto; font-size: 15px; }
.forum-table { background: #fff; }
.table-head, .topic-row { grid-template-columns: minmax(280px,1fr) 150px 82px 170px; gap: 8px; }
.table-head { min-height: 34px; padding: 8px 10px; background: linear-gradient(#4d8fff, #1e54b8); }
.topic-row { min-height: 66px; padding: 9px 10px; background: #fff; }
.topic-row:nth-child(odd) { background: #f7faff; }
.topic-row:hover { background: #dce9ff; }
.topic-row small { line-height: 1.35; }
.topic-chip { display: inline-block; max-width: 100%; padding: 3px 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 1px solid #b8b3a3; background: #f7f4e7; font-style: normal; }
.thread-view { background: #f2eedf; }
.thread-head { background: linear-gradient(#3f83ea, #1c58bd 52%, #16469a); }
.thread-head .panel-title { min-height: 0; padding-bottom: 4px; font-size: 15px; }
.upvote-button { border-radius: 4px; }
.post { grid-template-columns: 168px minmax(0,1fr); background: #fff; }
.post-author { background: linear-gradient(#f4f0df, #e5deca); }
.post-body { padding: 14px; }
.rich-text { font-size: 14px; }
.reply-box, .xp-form { background: #fff; }
.reply-box textarea, .xp-form textarea, .xp-form input, .xp-form select, .dialog-search input, .chat-compose textarea, .chat-empty input { border-color: #7f9db9; border-radius: 2px; box-shadow: inset 1px 1px 2px rgba(0,0,0,.08); }
.editor-toolbar { border-radius: 2px; }
.shop-section { background: #f7f4e7; }
.shop-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.shop-card { background: #fff; transition: transform .12s ease, box-shadow .12s ease; }
.shop-card:hover { transform: translateY(-1px); box-shadow: inset 1px 1px #fff, 0 3px 9px rgba(0,0,0,.14); }
.shop-preview { min-height: 104px; background: linear-gradient(#fff, #f3f0e1); }
.messenger { border-color: #8d8877; box-shadow: inset 1px 1px #fff, 0 1px 2px rgba(0,0,0,.1); }
.dialog-item { min-height: 72px; background: #fff; }
.dialog-item:hover, .dialog-item.active { background: linear-gradient(#f8fbff, #dce9ff); }
.chat-head { min-height: 64px; }
.chat-body { background: linear-gradient(#fbfaf2, #e9e2ce); }
.bubble { border-radius: 5px; }
.avatar { border-radius: 4px; }
.avatar.large, .avatar.huge { border-radius: 5px; }

.taskbar { position: fixed; left: 0; right: 0; bottom: 0; height: 40px; padding: 4px 8px; background: linear-gradient(#3c86f6, #1255d8 48%, #0b3eaa); display: flex; align-items: center; gap: 8px; z-index: 5; }
.start-button { height: 31px; padding: 7px 18px 0 12px; color: #fff; font-weight: 700; border: 1px solid #216b24; border-radius: 16px 8px 8px 16px; background: linear-gradient(#69d05c, #27872d); box-shadow: inset 1px 1px rgba(255,255,255,.6); display: flex; gap: 7px; text-decoration: none; }
.start-dot { width: 13px; height: 13px; border-radius: 3px; background: linear-gradient(135deg, #ff4a36 0 50%, #ffcf37 51%); }
.task { height: 30px; min-width: 170px; padding: 7px 12px; color: #fff; border: 1px solid rgba(0,0,0,.3); background: linear-gradient(#5a9cff, #1f61d7); text-decoration: none; }
.tray { margin-left: auto; height: 30px; min-width: 74px; padding: 7px 10px; color: #fff; text-align: right; border-left: 1px solid rgba(255,255,255,.45); background: rgba(0,40,120,.18); }

@media (max-width: 920px) {
  .desktop { padding: 12px 10px 58px; }
  .desktop-icons { display: none; }
  .layout { grid-template-columns: 1fr; }
  .table-head { display: none; }
  .topic-row { grid-template-columns: 1fr; gap: 4px; }
  .post { grid-template-columns: 1fr; }
  .thread-head { grid-template-columns: 1fr; }
  .thread-head form { margin-top: 0; }
  .post-author { border-right: 0; border-bottom: 1px solid #d6d0bd; }
  .admin-grid { grid-template-columns: 1fr; }
  .messages-grid { grid-template-columns: 1fr; }
  .messenger { grid-template-columns: 1fr; }
  .dialogs { border-right: 0; border-bottom: 1px solid #8d8877; }
  .chat { min-height: 520px; }
  .bubble { max-width: 94%; }
  .chat-compose { grid-template-columns: 1fr; }
  .admin-row { grid-template-columns: 1fr; }
  .search { margin-left: 0; width: 100%; }
  .search input { flex: 1; width: auto; }
}

/* 2026 XP refresh */
body {
  background:
    radial-gradient(ellipse at 18% 16%, rgba(255,255,255,.92) 0 8%, transparent 22%),
    radial-gradient(ellipse at 62% 18%, rgba(255,255,255,.72) 0 7%, transparent 20%),
    linear-gradient(#5fb7ff 0 43%, #7fd1ff 44% 52%, #72bd36 53% 62%, #2f8f28 63% 100%);
  background-attachment: fixed;
}
body::before {
  content: "";
  position: fixed;
  inset: auto 0 40px 0;
  height: 42vh;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 18% 100%, #2f8e24 0 34%, transparent 35%),
    radial-gradient(ellipse at 62% 105%, #61b732 0 48%, transparent 49%),
    linear-gradient(8deg, #2f8f28 0 46%, transparent 47%);
  opacity: .92;
}
.desktop, .taskbar, .window { position: relative; }
.window { max-width: 1240px; }
.menu .search { display: none; }

.username-wrap { position: relative; display: inline-flex; align-items: center; gap: 5px; vertical-align: middle; font-weight: 700; }
.username-text { position: relative; z-index: 1; }
.nick-glow .username-text { text-shadow: 0 0 6px currentColor, 0 0 14px rgba(77,143,255,.8); }
.nick-rainbow .username-text {
  color: transparent !important;
  background: linear-gradient(90deg, #ff3b3b, #ffd93b, #44d14f, #45a3ff, #b85cff, #ff3b3b);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: nickRainbow 2.4s linear infinite;
}
.nick-type .username-text { display: inline-block; overflow: hidden; white-space: nowrap; border-right: 2px solid currentColor; animation: nickType 2.8s steps(14) infinite; }
.nick-sparks::before, .nick-sparks::after { content: "✦"; position: absolute; color: #ffe066; font-size: 10px; animation: nickSpark 1.6s ease-in-out infinite; }
.nick-sparks::before { left: -10px; top: -8px; }
.nick-sparks::after { right: -10px; bottom: -8px; animation-delay: .6s; }
.nick-glitch .username-text { animation: nickGlitch .9s steps(2) infinite; text-shadow: 1px 0 #ff304f, -1px 0 #2ee8ff; }
.nick-fire .username-text {
  color: transparent !important;
  background: linear-gradient(180deg, #fff3a0, #ff8a00 45%, #d71919 78%, #4c0505);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 6px rgba(255,80,0,.85));
  animation: nickFlame 1.3s ease-in-out infinite;
}
.nick-ice .username-text {
  color: transparent !important;
  background: linear-gradient(90deg, #eaffff, #6ed6ff, #ffffff, #2c7dff);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 0 0 7px rgba(140,220,255,.8);
  animation: nickIce 2.5s linear infinite;
}
.nick-terminal .username-text {
  color: #70ff7f !important;
  font-family: "Courier New", monospace;
  text-shadow: 0 0 5px #33ff4f;
  animation: nickTerminal 1.4s steps(2) infinite;
}
.nick-orbit::before, .nick-orbit::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4da3ff;
  box-shadow: 0 0 8px #4da3ff;
  animation: nickOrbit 1.8s linear infinite;
}
.nick-orbit::after { animation-delay: -.9s; background: #ffd84d; box-shadow: 0 0 8px #ffd84d; }
.nick-shadow-pop .username-text {
  color: #fff !important;
  text-shadow: 1px 1px #1c58bd, 2px 2px #16469a, 3px 3px #0c2d70;
  animation: nickPop 1.6s ease-in-out infinite;
}
@keyframes nickRainbow { to { background-position: 220% 0; } }
@keyframes nickType { 0%, 12% { max-width: 0; } 45%, 75% { max-width: 180px; } 100% { max-width: 0; } }
@keyframes nickSpark { 0%,100% { opacity: .2; transform: scale(.7) rotate(0); } 50% { opacity: 1; transform: scale(1.35) rotate(25deg); } }
@keyframes nickGlitch { 0%,100% { transform: translate(0); } 35% { transform: translate(1px,-1px); } 65% { transform: translate(-1px,1px); } }
@keyframes nickFlame { 50% { filter: drop-shadow(0 0 11px rgba(255,60,0,1)); transform: translateY(-1px); } }
@keyframes nickIce { to { background-position: 220% 0; } }
@keyframes nickTerminal { 50% { opacity: .72; } }
@keyframes nickOrbit {
  0% { left: -8px; top: 50%; transform: translateY(-50%) scale(.8); }
  25% { left: 50%; top: -8px; transform: translateX(-50%) scale(1.15); }
  50% { left: calc(100% + 2px); top: 50%; transform: translateY(-50%) scale(.8); }
  75% { left: 50%; top: calc(100% + 2px); transform: translateX(-50%) scale(1.15); }
  100% { left: -8px; top: 50%; transform: translateY(-50%) scale(.8); }
}
@keyframes nickPop { 50% { transform: translateY(-1px) scale(1.04); } }

.badge-icon {
  width: 34px;
  height: 34px;
  display: inline-block;
  flex: 0 0 auto;
  vertical-align: middle;
  background: center / contain no-repeat url("/static/badges/13/frame-00.png");
  filter: drop-shadow(0 0 4px rgba(255,50,42,.72));
}
.badge-icon-13 {
  animation: badge13Frames 1s steps(1, end) infinite, badge13Float 2.1s ease-in-out infinite;
}
.badge-shop {
  width: 86px;
  height: 86px;
  filter: drop-shadow(0 0 8px rgba(255,50,42,.8));
}
@keyframes badge13Float {
  0%, 100% { transform: translateY(0) rotate(-2deg) scale(1); }
  50% { transform: translateY(-2px) rotate(2deg) scale(1.07); }
}
@keyframes badge13Frames {
  0% { background-image: url("/static/badges/13/frame-00.png"); }
  10% { background-image: url("/static/badges/13/frame-01.png"); }
  20% { background-image: url("/static/badges/13/frame-02.png"); }
  30% { background-image: url("/static/badges/13/frame-03.png"); }
  40% { background-image: url("/static/badges/13/frame-04.png"); }
  50% { background-image: url("/static/badges/13/frame-05.png"); }
  60% { background-image: url("/static/badges/13/frame-06.png"); }
  70% { background-image: url("/static/badges/13/frame-07.png"); }
  80% { background-image: url("/static/badges/13/frame-08.png"); }
  90%, 100% { background-image: url("/static/badges/13/frame-09.png"); }
}

.tg-badge {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  vertical-align: middle;
  overflow: hidden;
  border-radius: 8px;
  filter: drop-shadow(0 0 4px rgba(77,143,255,.38));
}

.tg-badge video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

.tg-badge-shop {
  width: 82px;
  height: 82px;
  border-radius: 18px;
  filter: drop-shadow(0 0 9px rgba(77,143,255,.48));
}

.post.post-night .post-body, .bubble.post-night, .preview-post.post-night {
  background: radial-gradient(circle at 18% 20%, rgba(112,146,255,.35), transparent 18%), #171c2a;
  background-size: 180px 120px;
  color: #ecf2ff;
  animation: bgDrift 8s linear infinite;
}
.post.post-gold .post-body, .bubble.post-gold, .preview-post.post-gold {
  background: linear-gradient(110deg, #fff1a9 0 30%, #fffbe0 43%, #f0cf69 57%, #ffe8a3 100%);
  background-size: 240% 100%;
  animation: shimmer 3.4s ease-in-out infinite;
}
.post.post-matrix .post-body, .bubble.post-matrix, .preview-post.post-matrix {
  background:
    repeating-linear-gradient(90deg, rgba(125,255,139,.08) 0 1px, transparent 1px 15px),
    #06170a;
  animation: matrixMove 3s linear infinite;
}
.post.post-frost .post-body, .bubble.post-frost, .preview-post.post-frost {
  background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(184,224,255,.78)), radial-gradient(circle at 20% 20%, #fff, transparent 28%);
  color: #17324a;
  border-color: #78aee2;
  box-shadow: inset 1px 1px rgba(255,255,255,.8), 0 0 14px rgba(120,174,226,.35);
}
.post.post-neon-grid .post-body, .bubble.post-neon-grid, .preview-post.post-neon-grid {
  color: #dff7ff;
  border-color: #2bdcff;
  background:
    linear-gradient(rgba(43,220,255,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,43,224,.14) 1px, transparent 1px),
    #08122a;
  background-size: 22px 22px;
  box-shadow: inset 0 0 18px rgba(43,220,255,.2), 0 0 12px rgba(43,220,255,.25);
  animation: neonGrid 2.8s linear infinite;
}
.post.post-ubuntu .post-body, .bubble.post-ubuntu, .preview-post.post-ubuntu {
  color: #f2e9ff;
  border-color: #3b1839;
  background:
    linear-gradient(#3b1839 0 26px, transparent 26px),
    radial-gradient(circle at 20% 0, rgba(255,116,0,.18), transparent 35%),
    #2c001e;
  box-shadow: inset 0 26px #3b1839, inset 0 27px rgba(255,255,255,.12);
  font-family: "Courier New", monospace;
}
.post.post-heart .post-body, .bubble.post-heart, .preview-post.post-heart {
  color: #4d1230;
  border-color: #d75b95;
  background:
    radial-gradient(circle at 18% 22%, rgba(255,93,157,.45), transparent 14%),
    radial-gradient(circle at 78% 30%, rgba(255,190,214,.72), transparent 18%),
    linear-gradient(135deg, #ffe8f3, #ffc2df);
  animation: heartPulse 2.1s ease-in-out infinite;
}
.post.post-diamond .post-body, .bubble.post-diamond, .preview-post.post-diamond {
  color: #15324a;
  border-color: #80c8ff;
  background:
    linear-gradient(135deg, rgba(255,255,255,.78) 0 18%, transparent 18% 32%, rgba(135,217,255,.42) 32% 48%, transparent 48%),
    linear-gradient(45deg, #eaffff, #a7ddff, #ffffff);
  background-size: 180px 180px, 100% 100%;
  box-shadow: inset 1px 1px rgba(255,255,255,.9), 0 0 14px rgba(128,200,255,.42);
  animation: diamondShift 4.5s linear infinite;
}
.post.post-comic .post-body, .bubble.post-comic, .preview-post.post-comic {
  color: #241400;
  border-color: #111;
  background:
    radial-gradient(#f04444 1px, transparent 1px),
    linear-gradient(135deg, #fff36b, #ffb347);
  background-size: 9px 9px, 100% 100%;
  box-shadow: 3px 3px 0 #111;
}
@keyframes bgDrift { to { background-position: 180px 120px; } }
@keyframes shimmer { 0%,100% { background-position: 0 0; } 50% { background-position: 100% 0; } }
@keyframes matrixMove { to { background-position: 120px 0; } }
@keyframes neonGrid { to { background-position: 22px 22px, 22px 22px, 0 0; } }
@keyframes heartPulse { 50% { filter: saturate(1.25); } }
@keyframes diamondShift { to { background-position: 180px 180px, 0 0; } }

.profile.profile-glow, .preview-profile.profile-glow { animation: profileGlow 2.6s ease-in-out infinite; }
.profile.profile-gold, .preview-profile.profile-gold { position: relative; overflow: hidden; animation: shimmer 4s ease-in-out infinite; }
.profile.profile-scan, .preview-profile.profile-scan {
  background: repeating-linear-gradient(0deg, #fff 0 6px, #eef6ff 7px 8px);
  box-shadow: 0 0 18px rgba(41,117,255,.42);
}
.profile.profile-bliss, .preview-profile.profile-bliss {
  background: linear-gradient(#dff3ff 0 48%, #8bd15b 49%, #3e9c33);
  border-color: #3d8f39;
}
.profile.profile-ubuntu, .preview-profile.profile-ubuntu {
  color: #f2e9ff;
  border-color: #3b1839;
  background: linear-gradient(#4a154b 0 28px, #2c001e 28px);
  box-shadow: inset 0 28px rgba(255,255,255,.08), 0 0 16px rgba(119,41,83,.45);
  font-family: "Courier New", monospace;
}
.profile.profile-hologram, .preview-profile.profile-hologram {
  color: #06314c;
  border-color: #39c6ff;
  background:
    linear-gradient(rgba(57,198,255,.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(57,198,255,.18) 1px, transparent 1px),
    rgba(220,248,255,.86);
  background-size: 18px 18px;
  box-shadow: 0 0 22px rgba(57,198,255,.62);
  animation: hologramMove 3.2s linear infinite;
}
.profile.profile-neon-card, .preview-profile.profile-neon-card {
  color: #f4fbff;
  border-color: #ff3ee8;
  background: #101632;
  box-shadow: 0 0 0 2px #21d8ff, 0 0 18px #ff3ee8, inset 0 0 18px rgba(33,216,255,.18);
}
.profile.profile-terminal, .preview-profile.profile-terminal {
  color: #7dff8b;
  border-color: #1c8d34;
  background: repeating-linear-gradient(0deg, rgba(125,255,139,.08) 0 2px, transparent 2px 5px), #06170a;
  text-shadow: 0 0 5px rgba(125,255,139,.55);
  font-family: "Courier New", monospace;
}
.profile.profile-sticker, .preview-profile.profile-sticker {
  color: #101010;
  border: 3px solid #111;
  background: radial-gradient(#3b83ff 1px, transparent 1px), #fff36b;
  background-size: 11px 11px;
  box-shadow: 5px 5px 0 #111;
  transform: rotate(-.6deg);
}
@keyframes profileGlow { 0%,100% { box-shadow: 0 0 12px rgba(77,143,255,.45), inset 1px 1px #fff; } 50% { box-shadow: 0 0 28px rgba(77,143,255,.9), inset 1px 1px #fff; } }
@keyframes hologramMove { to { background-position: 18px 18px; } }
@keyframes frameFire { to { filter: hue-rotate(25deg); } }

.wide-form { padding: 0 12px 16px; }
.composer-form, .settings-form { max-width: none; }
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 12px; padding: 10px; }
.form-main, .form-side, .social-editor, .poll-editor { display: grid; gap: 9px; align-content: start; }
.form-main textarea { min-height: 300px; }
.form-side { padding: 10px; border: 1px solid #c6c0ad; background: #f7f4e7; }
.inline-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.compose-tools { margin: 0 10px 10px; display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.compose-tools.vertical { margin: 0; display: grid; grid-template-columns: repeat(3, auto) 1fr; }
.icon-tool, .icon-upload { width: 32px; height: 28px; padding: 4px; border: 1px solid #777; border-radius: 3px; background: linear-gradient(#fff, #ddd8c4); display: inline-grid; place-items: center; cursor: pointer; box-shadow: inset 1px 1px #fff; }
.icon-upload input { display: none; }
.settings-preview { padding: 12px; border: 1px solid #b8b3a3; background: #fff; display: grid; gap: 6px; justify-items: start; }

.attachments { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
.attachment-image { min-height: 94px; padding: 0; border: 1px solid #a8a38f; background: #f3f1e7; display: grid; place-items: center; overflow: hidden; cursor: zoom-in; }
.attachment-image img { width: 100%; height: 100%; max-height: 220px; object-fit: cover; display: block; }
.image-modal { position: fixed; inset: 0; z-index: 50; padding: 42px; background: rgba(0,0,0,.72); display: grid; place-items: center; }
.image-modal[hidden] { display: none !important; }
.image-modal img { max-width: min(960px, 92vw); max-height: 86vh; border: 3px solid #fff; box-shadow: 0 12px 36px rgba(0,0,0,.7); background: #fff; }
.image-modal-close { position: fixed; top: 18px; right: 24px; width: 34px; height: 34px; color: #fff; font-size: 24px; border: 1px solid rgba(255,255,255,.5); background: #c43c1d; }
.xp-audio { grid-column: 1 / -1; padding: 8px; border: 1px solid #7f9db9; background: linear-gradient(#eef6ff, #cfe1ff); display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px; align-items: center; }
.audio-icon { width: 30px; height: 30px; display: grid; place-items: center; color: #fff; border: 1px solid #1e54b8; background: linear-gradient(#4d8fff, #1e54b8); }
.xp-audio audio { width: 100%; height: 30px; }

.poll-box { margin: 10px 0; padding: 10px; border: 1px solid #8d8877; background: #fff8d7; display: grid; gap: 8px; }
.poll-option { position: relative; min-height: 28px; padding: 6px 8px; border: 1px solid #d8d2bf; background: #fff; overflow: hidden; display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; }
.poll-option i { position: absolute; inset: 0 auto 0 0; background: rgba(106,162,255,.28); z-index: 0; }
.poll-option > *:not(i) { position: relative; z-index: 1; }

.social-links { margin-top: 8px; display: flex; gap: 7px; flex-wrap: wrap; }
.social { min-width: 34px; min-height: 28px; padding: 6px 8px; color: #fff; text-decoration: none; text-align: center; border: 1px solid rgba(0,0,0,.35); border-radius: 4px; font-weight: 700; }
.social.tg { background: #229ed9; }
.social.dc { background: #5865f2; }
.social.yt { background: #e62117; }
.social.link { background: #555; }

.admin-dashboard { padding: 0 12px 16px; display: grid; gap: 12px; }
.admin-stats, .admin-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.admin-stats span, .admin-tabs a { padding: 8px 10px; border: 1px solid #8d8877; background: linear-gradient(#fff, #f0ead7); text-decoration: none; }
.admin-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .75fr); gap: 12px; }
.admin-row.slim { grid-template-columns: minmax(0,1fr) auto auto; }
.user-admin-row { grid-template-columns: minmax(0, 1fr) 170px 100px auto; }
.shop-admin-grid { padding: 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }

.tray-notify { position: relative; width: 30px; height: 30px; display: grid; place-items: center; color: #fff; text-decoration: none; border-left: 1px solid rgba(255,255,255,.35); background: rgba(0,40,120,.18); }
.tray-notify.active { animation: trayPulse 1.2s ease-in-out infinite; }
.tray-notify b { position: absolute; right: 0; top: 0; min-width: 16px; height: 16px; padding: 1px 4px; border-radius: 8px; background: #c72d1b; font-size: 10px; text-align: center; }
.start-button { border-radius: 18px 9px 9px 18px; font-size: 15px; font-style: italic; }
.start-logo { width: 18px; height: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; transform: skew(-8deg); }
.start-logo i:nth-child(1) { background: #f44336; }
.start-logo i:nth-child(2) { background: #43a047; }
.start-logo i:nth-child(3) { background: #1e88e5; }
.start-logo i:nth-child(4) { background: #fdd835; }
@keyframes trayPulse { 50% { background: rgba(255,255,255,.25); } }

@media (max-width: 920px) {
  .form-grid, .admin-columns { grid-template-columns: 1fr; }
  .compose-tools.vertical { grid-template-columns: repeat(3, auto); }
  .inline-fields { grid-template-columns: 1fr; }
}

/* New topic composer polish */
.composer-form { overflow: visible; }
.new-topic-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 12px;
  padding: 12px;
  align-items: stretch;
}
.composer-form .form-main,
.new-topic-side {
  min-width: 0;
  display: grid;
  gap: 10px;
  align-content: start;
}
.composer-form .field,
.new-topic-side .field {
  margin: 0;
  display: grid;
  gap: 5px;
  font-weight: 700;
}
.composer-form .field input,
.composer-form .field textarea,
.new-topic-side .field select,
.poll-editor input {
  width: 100%;
  margin: 0;
}
.composer-form .editor-field textarea {
  min-height: 360px;
  resize: vertical;
  line-height: 1.45;
}
.composer-form .editor-toolbar {
  margin: 0;
}
.new-topic-side {
  padding: 10px;
  border: 1px solid #b8b3a3;
  background: linear-gradient(#fffef8, #f0ead7);
}
.poll-editor {
  margin: 0;
  padding: 10px;
  border: 1px solid #c6c0ad;
  background: #fff;
}
.poll-editor strong {
  margin-bottom: 2px;
}
.composer-dock {
  margin: 0 12px 12px;
  padding: 8px;
  border: 1px solid #8d8877;
  background: linear-gradient(#f8f6eb, #ded7c0);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}
.composer-dock .compose-tools {
  margin: 0;
}
.publish-button {
  min-width: 132px;
  text-align: center;
}
.selected-files {
  min-height: 32px;
  padding: 5px 7px;
  border: 1px solid #b8b3a3;
  background: #fff;
  color: #666;
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  overflow: hidden;
}
.reply-box .selected-files,
.chat-compose .selected-files {
  margin: 0 10px 10px;
}
.chat-compose .selected-files {
  margin: 0;
}
.selected-files.has-files {
  color: #1c1c1c;
  background: #f4fbef;
  border-color: #7eb96a;
}
.selected-files span {
  max-width: 240px;
  padding: 3px 7px;
  border: 1px solid #c6c0ad;
  background: linear-gradient(#fff, #f0ead7);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.selected-files span b {
  font-weight: 700;
}
.selected-files span small {
  color: #666;
}
.file-picker {
  position: relative;
}
.file-picker:focus-within {
  outline: 2px solid #6aa2ff;
  outline-offset: 1px;
}

@media (max-width: 920px) {
  .new-topic-grid,
  .composer-dock {
    grid-template-columns: 1fr;
  }
  .composer-form .editor-field textarea {
    min-height: 260px;
  }
  .publish-button {
    width: 100%;
  }
}

/* Composer fixes */
.taskbar {
  position: fixed !important;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
}
.desktop, .window {
  position: relative;
}
.window {
  overflow: visible;
}
.editor-shell {
  position: relative;
  display: block;
  margin: 0;
}
.editor-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px;
  gap: 8px;
  align-items: stretch;
}
.editor-row.compact-row {
  margin: 0 10px;
}
.editor-shell textarea {
  padding-right: 116px !important;
}
.editor-shell.compact {
  margin: 0;
}
.editor-shell.compact textarea {
  width: 100%;
  margin: 0;
}
.field-tools {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  gap: 5px;
  z-index: 3;
  align-items: center;
}
.field-tools .smiles-picker,
.field-tools .icon-upload {
  margin: 0;
}
.field-tools .icon-tool,
.field-tools .icon-upload {
  width: 31px;
  height: 27px;
  background: linear-gradient(#fff, #e7e1cc);
}
.composer-dock {
  grid-template-columns: minmax(0, 1fr) auto;
}
.send-side-button {
  min-height: 42px;
  align-self: stretch;
  display: grid;
  place-items: center;
  text-align: center;
}
.selected-files[hidden] {
  display: none !important;
}
.selected-files .remove-file {
  width: 20px;
  height: 20px;
  padding: 0;
  color: #fff;
  border: 1px solid #8e170b;
  border-radius: 2px;
  background: #c43c1d;
  cursor: pointer;
}
.selected-files span {
  padding-right: 4px;
}
.smiles-popover {
  position: fixed;
  left: 12px;
  top: 80px;
  bottom: auto;
  z-index: 200;
  width: min(420px, calc(100vw - 24px));
  max-height: min(330px, calc(100vh - 110px));
}
.reply-box .smiles-popover,
.xp-form .smiles-popover,
.chat-compose .smiles-popover {
  position: fixed;
  top: 80px;
  bottom: auto;
}

@media (max-width: 920px) {
  .editor-shell textarea {
    padding-right: 104px !important;
  }
  .composer-dock {
    grid-template-columns: 1fr;
  }
  .editor-row {
    grid-template-columns: 1fr;
  }
}

.latest-news-box {
  margin-bottom: 12px;
}

.latest-news-list {
  display: grid;
  gap: 7px;
}

.latest-news-list a {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  color: #10286c;
  text-decoration: none;
  border: 1px solid #91a7d7;
  background: linear-gradient(90deg, #f7fbff, #eaf2ff);
}

.latest-news-list a:hover {
  border-color: #2f68c8;
  background: #fff;
}

.news-compose {
  margin-bottom: 12px;
}

.news-grid {
  display: grid;
  gap: 10px;
}

.news-card {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
}

.news-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
}

.news-title {
  color: #0d2c83;
  font-size: 17px;
  line-height: 1.25;
  font-weight: 700;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.news-title:hover {
  text-decoration: underline;
}

.news-card-head time,
.news-author {
  color: #4d5f88;
  font-size: 12px;
}

.news-card-head time {
  white-space: nowrap;
}

.news-author {
  display: flex;
  align-items: center;
  gap: 7px;
}

.news-preview {
  max-height: 140px;
  overflow: hidden;
}

.news-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
  color: #31456f;
  font-size: 12px;
}

.news-detail .post:first-of-type {
  margin-top: 8px;
}

.news-admin-row {
  grid-template-columns: minmax(0, 1fr) auto auto auto;
}

/* News and composer alignment */
.forum-table {
  margin-top: 0;
}

.latest-news-box {
  align-self: start;
}

.latest-news-list {
  align-content: start;
}

.latest-news-list a {
  min-height: 0;
  padding: 7px 9px;
}

.latest-news-list a b,
.latest-news-list a small {
  line-height: 1.25;
}

.wide-form .xp-form,
.flat-composer {
  max-width: none;
}

.composer-form .form-main,
.flat-composer .form-main {
  margin: 0;
}

.composer-form .form-main > .field,
.flat-composer .form-main > .field {
  margin: 0;
}

.composer-form .field input,
.flat-composer .field input {
  width: 100%;
  margin: 0;
}

.composer-form .editor-row,
.flat-composer .editor-row {
  margin: 0;
}

.composer-form .editor-shell textarea,
.flat-composer .editor-shell textarea {
  width: 100%;
  margin: 0;
}

.composer-form .editor-toolbar,
.flat-composer .editor-toolbar {
  margin: 0;
}

.composer-form .selected-files,
.flat-composer .selected-files {
  margin: 0;
}

.flat-composer {
  padding: 0 12px 12px;
}

.flat-composer .panel-title {
  margin: 0 -12px 12px;
}

.flat-composer .editor-shell textarea {
  min-height: 190px;
}

.news-toolbar {
  justify-content: space-between;
}

.news-content {
  min-width: 0;
  padding: 10px 11px;
  display: grid;
  gap: 7px;
  align-content: start;
}

.news-media {
  position: relative;
  min-height: 132px;
  height: 100%;
  display: grid;
  place-items: center;
  color: #fff;
  text-decoration: none;
  border-right: 1px solid #b9c8e8;
  background: linear-gradient(#dce9ff, #9bbdf4);
  overflow: hidden;
}

.news-media img {
  width: 100%;
  height: 100%;
  min-height: 132px;
  object-fit: cover;
  display: block;
}

.news-media > span {
  position: absolute;
  right: 7px;
  bottom: 7px;
  min-width: 28px;
  padding: 3px 7px;
  text-align: center;
  color: #fff;
  border: 1px solid rgba(0,0,0,.45);
  background: rgba(0,0,0,.62);
}

.news-media.placeholder span {
  position: static;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 26px;
  font-weight: 700;
  border: 1px solid #7a0f0f;
  background: linear-gradient(#ff5f4f, #9d1515);
  text-shadow: 1px 1px #4a0707;
}

.news-card .rich-text {
  min-height: 0;
  margin: 2px 0;
  line-height: 1.4;
}

.news-preview {
  max-height: 76px;
}

.news-attachments {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  margin-top: 2px;
}

.news-attachments .attachment-image {
  max-height: 170px;
}

@media (max-width: 760px) {
  .news-card {
    grid-template-columns: 1fr;
  }
  .news-media {
    height: 180px;
    border-right: 0;
    border-bottom: 1px solid #b9c8e8;
  }
  .news-card-head {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .news-card-head time {
    white-space: normal;
  }
}

.field-tools {
  min-height: 27px;
}

/* Profile settings */
.settings-page .settings-form {
  max-width: none;
  padding-bottom: 0;
}

.settings-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);
  gap: 12px;
  padding: 12px;
  align-items: start;
}

.settings-card,
.settings-actions {
  margin: 0 !important;
  border: 1px solid #b8b3a3;
  background: linear-gradient(#fffef8, #f3f1e7);
  box-shadow: inset 1px 1px #fff;
}

.settings-card {
  padding: 10px;
  display: grid;
  gap: 10px;
}

.settings-identity {
  grid-row: span 2;
}

.settings-card-title {
  margin: -10px -10px 0 !important;
  padding: 7px 9px;
  color: #fff;
  font-weight: 700;
  background: linear-gradient(#3f83ea, #1c58bd 52%, #16469a);
}

.settings-profile-row {
  margin: 0 !important;
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #c6c0ad;
  background: #fff;
}

.settings-preview-name {
  margin: 0 !important;
  display: grid;
  gap: 4px;
}

.settings-preview-name small {
  color: #666;
}

.settings-field {
  margin: 0 !important;
  display: grid;
  gap: 5px;
  font-weight: 700;
}

.settings-field input,
.settings-field textarea,
.settings-field select {
  width: 100% !important;
  margin: 0 !important;
}

.settings-field textarea {
  min-height: 76px;
  max-height: 120px;
  resize: vertical;
  line-height: 1.4;
}

.settings-two {
  margin: 0 !important;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.settings-field.color-field {
  grid-template-columns: minmax(0, 1fr) 46px;
  align-items: center;
}

.settings-field.color-field input {
  width: 42px !important;
  height: 30px;
  padding: 2px;
}

.settings-remove-avatar {
  justify-content: flex-start;
  padding: 8px;
  border: 1px solid #d0b56a;
  background: #fff8d7;
}

.social-input-grid {
  margin: 0 !important;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.social-url-field {
  grid-column: 1 / -1;
}

.settings-actions {
  padding: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

@media (max-width: 920px) {
  .settings-layout,
  .settings-two,
  .social-input-grid {
    grid-template-columns: 1fr;
  }
  .settings-identity {
    grid-row: auto;
  }
  .settings-actions {
    justify-content: stretch;
  }
  .settings-actions .xp-button {
    flex: 1;
    text-align: center;
  }
}