:root {
  --cream: #fff7fb;
  --cream-2: #ffeef6;
  --surface: #ffffff;
  --border: #ffd9ea;
  --ink: #5b4a63;
  --ink-soft: #9a8aa6;
  --sakura: #ff9ec4;
  --sakura-deep: #f06a9e;
  --lavender: #9d86e0;
  --lavender-deep: #7c63cf;
  --mint: #7fd8c4;
  --star: #ffd86b;
  --danger: #ff7a93;
  --radius: 20px;
  --radius-sm: 12px;
  --shadow: 0 4px 18px rgba(255, 140, 190, .14);
  --shadow-lg: 0 10px 34px rgba(160, 110, 200, .18);
}

* { box-sizing: border-box; }

html { overflow-x: auto; }
body {
  margin: 0;
  max-width: 100vw;
  overflow-x: auto;
  font-family: "Gowun Dodum", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  color: var(--ink);
  line-height: 1.7;
  background:
    radial-gradient(1100px 420px at 80% -120px, #ffe6f2 0%, rgba(255,230,242,0) 70%),
    radial-gradient(900px 380px at 0% 0%, #efe7ff 0%, rgba(239,231,255,0) 70%),
    var(--cream);
}

@media (min-width: 761px) {
  body { background-attachment: fixed; }
}

h1, h2, .logo, .btn, .page-title, .hero-title, .stat-num {
  font-family: "Jua", "Gowun Dodum", sans-serif;
  font-weight: 400;
  letter-spacing: .2px;
}

a { color: var(--lavender-deep); text-decoration: none; }
a:hover { color: var(--sakura-deep); }

.wrap { max-width: 1040px; margin: 0 auto; padding: 0 16px; }

.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  background: rgba(255, 251, 253, .82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 2px solid var(--border);
}
/* position:fixed 는 문서 흐름에서 빠지므로, 헤더가 본문 맨 위 내용을 가리지 않도록
   body 상단에 헤더 높이만큼 여백을 줌(헤더는 최소 66px, 좁은 화면에서 2줄이 되면 더 커짐) */
body { padding-top: 66px; }
@media (max-width: 720px) { body { padding-top: 96px; } }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 66px; flex-wrap: nowrap; }
.header-left { display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; min-width: 0; }
.logo {
  display: flex; align-items: center; gap: 7px;
  font-size: 19px; color: var(--sakura-deep);
  white-space: nowrap; flex-shrink: 0;
}
.logo:hover { color: var(--sakura-deep); }
.logo img { width: 32px; height: 32px; filter: drop-shadow(0 2px 4px rgba(255,140,190,.35)); }
.board-nav { display: flex; gap: 8px; flex: 1; flex-wrap: nowrap; min-width: 0; }
.board-nav a {
  color: var(--ink); font-size: 14px; padding: 6px 13px;
  border-radius: 999px; transition: background .15s, color .15s;
}
.board-nav a:hover { background: var(--cream-2); color: var(--sakura-deep); }
.user-nav { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 7px; font-size: 14px; }
.user-nav .hello { color: var(--ink-soft); }
.user-nav > a:not(.btn-mini) { color: var(--ink); }

.nav-icon, .nav-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; font-size: 16px; line-height: 1;
  border-radius: 9px; text-decoration: none; cursor: pointer; box-sizing: border-box;
}
.nav-icon-btn { border: none; background: transparent; color: inherit; font-family: inherit; }

/* Windows 강제 색상(고대비) 모드에서 브라우저가 링크/버튼을 시스템 파란색 박스로
   덮어써서 아이콘·배지가 뭉개져 보이는 문제 방지 — 이 작은 UI 요소들은 원래 디자인
   (아이콘·이모지·배지 색)이 이미 접근성 대비를 고려해 만들어져 있으므로 유지시킴 */
.nav-icon, .nav-icon-btn, .point-badge, .msg-nav-badge, .level-badge,
.hello, .theme-toggle, .chat-dock-title, .chat-dock-toggle,
.user-nav > a, .user-nav > button {
  forced-color-adjust: none;
}
.nav-icon:hover, .nav-icon-btn:hover { background: var(--cream-2); }
.theme-toggle { border: none; background: transparent; font-size: 15px; }
.theme-toggle.theme-toggle-end { margin-left: 6px; }
.theme-toggle .theme-ico { display: none; }
.theme-toggle .theme-ico-moon { display: inline; }
html[data-theme="dark"] .theme-toggle .theme-ico-moon { display: none; }
html[data-theme="dark"] .theme-toggle .theme-ico-sun { display: inline; }
.checkin-done-i { background: #eafaf5; border: 1.5px solid #bfeee2; cursor: default; }
.checkin-btn-i { background: linear-gradient(135deg, var(--mint), #5fc7af); border: none; }
.checkin-btn-i:hover { background: #4cb89e; }

main.wrap { padding-top: 26px; padding-bottom: 70px; }
.page-title { font-size: 27px; margin: 0 0 4px; color: var(--ink); }
.muted { color: var(--ink-soft); font-size: 14px; }
.flash {
  background: linear-gradient(120deg, #fff0f7, #f1ecff);
  border: 2px dashed var(--sakura); color: var(--sakura-deep);
  padding: 11px 16px; border-radius: var(--radius-sm); margin-bottom: 20px; font-size: 14px;
}
.error { color: var(--danger); font-size: 14px; margin: 4px 0; }

.auth-errors { border: 2px dashed var(--danger); background: #fff4f7; color: var(--danger);
  border-radius: 14px; padding: 11px 15px; margin: 2px 0 14px; font-size: 14px; line-height: 1.55; }
.auth-errors p { margin: 2px 0; display: flex; align-items: flex-start; gap: 6px; font-weight: 700; }
.auth-errors p::before { content: "⚠"; flex: 0 0 auto; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; line-height: 1.35;
  cursor: pointer; border: none;
  background: linear-gradient(135deg, var(--sakura), var(--sakura-deep));
  color: #fff; padding: 11px 24px; border-radius: 999px;
  font-size: 16px; box-shadow: 0 4px 12px rgba(240,106,158,.34);
  transition: transform .12s, box-shadow .12s;
}
.btn:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 7px 18px rgba(240,106,158,.42); }

/* Summernote(글쓰기 에디터) 이미지 삽입 모달의 "Insert Image" 버튼 등은 부트스트랩 클래스
   (.btn.btn-primary)에 의존하는데, 이 사이트는 부트스트랩을 안 써서 배경/글자색이
   전혀 지정되지 않아 버튼이 빈 테두리만 있는 상태로 보이던 문제 수정 */
.note-modal .btn,
.note-modal button[class*="btn"],
.note-modal .modal-footer button,
.note-btn-primary,
.note-image-btn {
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; border: none;
  background: linear-gradient(135deg, var(--sakura), var(--sakura-deep)) !important;
  color: #fff !important; padding: 9px 20px; border-radius: 999px;
  font-size: 14px; font-weight: 700; font-family: inherit;
  box-shadow: 0 4px 12px rgba(240,106,158,.34);
}
.note-modal .btn:hover,
.note-modal button[class*="btn"]:hover,
.note-modal .modal-footer button:hover,
.note-btn-primary:hover,
.note-image-btn:hover { color: #fff !important; opacity: .92; }
.note-modal .btn-secondary,
.note-modal .close { background: var(--cream-2) !important; color: var(--ink) !important; box-shadow: none; }
.btn:active { transform: translateY(0); }
.btn-mini {
  display: inline-flex; align-items: center; justify-content: center; line-height: 1.35;
  cursor: pointer; border: 2px solid var(--border); font-family: inherit;
  background: var(--surface); color: var(--lavender-deep);
  padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 700;
  transition: background .15s, border-color .15s;
}
.btn-mini:hover { background: var(--cream-2); border-color: var(--sakura); color: var(--sakura-deep); }
.btn-mini.danger, .btn.danger {
  background: #fff0f3; color: var(--danger); border-color: #ffd2dc;
  box-shadow: none;
}
.btn-mini.danger:hover { background: #ffe2e8; }
.link-danger { background: none; border: none; color: var(--danger); cursor: pointer; font-size: 12px; padding: 0; }
.inline { display: inline; }

.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #fff0f7 0%, #f3ecff 60%, #eafaf5 100%);
  border: 2px solid var(--border); border-radius: 28px;
  padding: 26px 30px; margin-bottom: 28px;
  display: flex; align-items: center; gap: 26px;
  box-shadow: var(--shadow-lg);
}
.hero-mascot { width: 148px; flex-shrink: 0; filter: drop-shadow(0 8px 14px rgba(200,120,180,.28)); animation: bob 4s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.hero-text { flex: 1; min-width: 0; }
.hero-bubble {
  position: relative; display: inline-block;
  background: #fff; border: 2px solid var(--border); border-radius: 18px;
  padding: 9px 16px; font-size: 15px; color: var(--ink); margin-bottom: 12px;
  box-shadow: var(--shadow);
}
.hero-bubble::after {
  content: ""; position: absolute; left: -10px; top: 18px;
  border: 8px solid transparent; border-right-color: #fff;
  filter: drop-shadow(-2px 0 0 var(--border));
}
.hero-title { font-size: 30px; line-height: 1.25; margin: 4px 0 6px; color: var(--sakura-deep); }
.hero-sub { color: var(--ink-soft); font-size: 15px; margin: 0 0 16px; }
.hero-cta { display: flex; gap: 10px; flex-wrap: wrap; }

.petal {
  position: absolute; top: -24px; width: 14px; height: 14px;
  background: var(--sakura); border-radius: 100% 0 100% 0;
  opacity: .65; pointer-events: none;
  animation: fall linear infinite;
}
@keyframes fall {
  0%   { transform: translateY(-30px) rotate(0deg); opacity: 0; }
  10%  { opacity: .7; }
  100% { transform: translateY(260px) rotate(420deg); opacity: 0; }
}
.petal:nth-child(1){ left:10%; animation-duration:7s;  animation-delay:0s;   background:var(--sakura); }
.petal:nth-child(2){ left:30%; animation-duration:9s;  animation-delay:1.5s; background:#ffc1da; }
.petal:nth-child(3){ left:52%; animation-duration:6s;  animation-delay:.8s;  background:var(--sakura); }
.petal:nth-child(4){ left:70%; animation-duration:8s;  animation-delay:2.2s; background:#ffd1e6; }
.petal:nth-child(5){ left:88%; animation-duration:7.5s;animation-delay:.4s;  background:var(--sakura); }

.board-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 20px; }
.board-card {
  position: relative; background: var(--surface); border: 2px solid var(--border);
  border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow);
  display: flex; flex-direction: column;
  transition: transform .15s, box-shadow .15s;
}
.board-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.board-card::before {
  content: "🌸"; position: absolute; top: -12px; right: 16px; font-size: 22px;
  filter: drop-shadow(0 2px 3px rgba(255,140,190,.3));
}
.board-card-head h2 { margin: 0 0 2px; font-size: 19px; color: var(--lavender-deep); }
.recent-list { list-style: none; padding: 0; margin: 14px 0; flex: 1; }
.recent-list li { padding: 6px 0; border-bottom: 1px dashed var(--border); font-size: 14px; }
.recent-list li:last-child { border-bottom: none; }
.recent-list .meta { display: block; color: var(--ink-soft); font-size: 12px; }
.board-more { font-size: 13px; align-self: flex-end; font-weight: 700; }

.board-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 12px; }
.search-bar { display: flex; gap: 8px; margin-bottom: 16px; }
.search-bar input { flex: 1; padding: 9px 16px; border: 2px solid var(--border); border-radius: 999px; font-family: inherit; }
.search-bar input:focus { outline: none; border-color: var(--sakura); }

.post-table {
  width: 100%; border-collapse: collapse; background: var(--surface);
  border: 2px solid var(--border); border-radius: var(--radius); overflow: hidden; font-size: 14px;
  box-shadow: var(--shadow);
}
.post-table th, .post-table td { padding: 12px 14px; border-bottom: 1px solid var(--border); text-align: left; }
.post-table thead th { background: linear-gradient(120deg,#fff0f7,#f3ecff); font-size: 13px; color: var(--lavender-deep); }
.post-table tbody tr:last-child td { border-bottom: none; }
.post-table tbody tr:hover { background: var(--cream-2); }
.col-no { width: 66px; color: var(--ink-soft); text-align: center; }
.col-author { width: 138px; white-space: nowrap; }
.col-date { width: 90px; color: var(--ink-soft); }
.col-views { width: 60px; text-align: center; color: var(--ink-soft); }
.col-no, .col-views { text-align: center; }
.col-title a { color: var(--ink); }
.col-title a:hover { color: var(--sakura-deep); }
.cmt-badge { color: var(--sakura-deep); font-size: 12px; font-weight: 700; }
.empty { text-align: center; color: var(--ink-soft); padding: 44px 0; }

.pagination { display: flex; gap: 7px; justify-content: center; margin-top: 24px; }
.pagination a, .pagination span {
  padding: 7px 13px; border-radius: 999px; font-size: 14px;
  border: 2px solid var(--border); background: var(--surface);
}
.pagination .current { background: var(--sakura); color: #fff; border-color: var(--sakura); }
.pagination a:hover { background: var(--cream-2); color: var(--sakura-deep); }

.post-view { background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); }
.post-breadcrumb { font-size: 13px; margin-bottom: 6px; font-weight: 700; }
.post-title { font-size: 25px; margin: 0 0 10px; color: var(--ink); }
.post-meta { display: flex; gap: 14px; color: var(--ink-soft); font-size: 13px; padding-bottom: 16px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.post-body { padding: 24px 0; min-height: 120px; word-break: break-word; font-size: 15px; }
.post-actions { display: flex; gap: 8px; align-items: center; padding-top: 16px; border-top: 1px solid var(--border); }

.comments { margin-top: 28px; }
.comments h2 { font-size: 19px; color: var(--lavender-deep); }
.comment-list { list-style: none; padding: 0; margin: 0 0 18px; }
.comment { background: var(--surface); border: 2px solid var(--border); border-radius: 16px; padding: 13px 18px; margin-bottom: 11px; }
.comment-head { display: flex; gap: 10px; align-items: baseline; }
.comment-head strong { color: var(--lavender-deep); }
.comment-head .meta { color: var(--ink-soft); font-size: 12px; }
.comment-body { margin-top: 4px; word-break: break-word; }
.comment-form textarea, .write-box textarea, .write-box input, .write-box select {
  width: 100%; padding: 12px 14px; border: 2px solid var(--border); border-radius: 14px;
  font-family: inherit; font-size: 14px; resize: vertical; background: var(--surface);
}
.comment-form textarea:focus, .write-box textarea:focus, .write-box input:focus { outline: none; border-color: var(--sakura); }
.comment-form { display: flex; flex-direction: column; gap: 8px; }
.comment-form button { align-self: flex-end; }
.comment-form-actions { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 10px; }
.comment-form-actions button { align-self: auto; flex-shrink: 0; }
.comment-secret-toggle { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-soft); cursor: pointer; user-select: none; white-space: nowrap; }
.comment-secret-toggle input { cursor: pointer; margin: 0; flex-shrink: 0; }
.comment-locked { color: var(--ink-soft); font-style: italic; background: #faf5f5; border: 1px dashed var(--border); border-radius: 8px; padding: 10px 12px; margin-top: 4px; }

.locked-box {
  max-width: 420px; margin: 30px auto 0; padding: 26px 24px 22px;
  border: 2px dotted #e29ec0; border-radius: 18px; background: #fff7fb;
  text-align: center; color: #7a3a5b;
}
.locked-icon { font-size: 32px; line-height: 1; margin-bottom: 8px; }
.locked-title { font-size: 16px; font-weight: bold; margin: 0 0 4px; }
.locked-desc { margin: 0; color: #9a6781; }

.auth-box {
  max-width: 400px; margin: 34px auto; background: var(--surface);
  border: 2px solid var(--border); border-radius: 24px; padding: 30px; box-shadow: var(--shadow-lg);
  position: relative;
}
.auth-box::before {
  content: "🌸"; position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
  font-size: 30px;
}
.auth-box h1 { margin: 4px 0 16px; font-size: 24px; text-align: center; color: var(--sakura-deep); }
.write-box { background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); }
.write-box h1 { margin-top: 0; color: var(--sakura-deep); }
label { display: block; font-size: 14px; font-weight: 700; margin-bottom: 15px; }
label input, label select {
  display: block; width: 100%; margin-top: 6px; padding: 10px 14px;
  border: 2px solid var(--border); border-radius: 12px; font-size: 14px; font-family: inherit; font-weight: 400;
}
label input:focus, label select:focus { outline: none; border-color: var(--sakura); }
.auth-box .btn { width: 100%; margin-top: 6px; }
.auth-alt { text-align: center; font-size: 14px; margin-top: 16px; color: var(--ink-soft); }
.auth-tabs { display: flex; gap: 8px; margin: 0 0 18px; }
.auth-tabs .auth-tab {
  flex: 1; text-align: center; padding: 10px 8px; border: 2px solid var(--border);
  border-radius: 12px; font-size: 14px; font-weight: 700; color: var(--ink-soft);
  background: var(--cream-2); text-decoration: none;
}
.auth-tabs .auth-tab:hover { border-color: var(--sakura); color: var(--sakura-deep); }
.auth-tabs .auth-tab.active { background: var(--sakura); border-color: var(--sakura); color: #fff; }
.form-buttons { display: flex; gap: 10px; align-items: center; }

.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 20px 0 30px; }
.stat-card { background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius); padding: 20px; text-align: center; box-shadow: var(--shadow); }
.stat-num { display: block; font-size: 32px; color: var(--sakura-deep); }
.stat-card span:last-child { font-size: 13px; color: var(--ink-soft); }
.admin-section { margin-bottom: 34px; }
.admin-section h2 { font-size: 20px; color: var(--lavender-deep); }
.actions-cell { white-space: nowrap; }
.actions-cell form { margin-right: 4px; }
.badge-ban { background: #fff0f3; color: var(--danger); padding: 2px 10px; border-radius: 999px; font-size: 12px; }

.site-footer { border-top: 2px solid var(--border); background: rgba(255,251,253,.7); padding: 24px 0; text-align: center; color: var(--ink-soft); font-size: 13px; }

#toast-area {
  position: fixed; right: 18px; bottom: 18px; z-index: 1000;
  display: flex; flex-direction: column; gap: 10px;
  max-width: 320px; width: calc(100% - 36px); pointer-events: none;
}
.toast {
  pointer-events: auto; display: flex; align-items: flex-start; gap: 11px;
  background: var(--surface); border: 2px solid var(--border);
  border-radius: 18px; padding: 13px 14px;
  box-shadow: var(--shadow-lg); cursor: pointer;
  opacity: 0; transform: translateY(14px) scale(.97);
  transition: opacity .3s ease, transform .3s ease;
}
.toast.toast-in  { opacity: 1; transform: translateY(0) scale(1); }
.toast.toast-out { opacity: 0; transform: translateY(14px) scale(.97); }
.toast-post    { border-color: var(--sakura); }
.toast-comment { border-color: var(--mint); }
.toast-message { border-color: var(--sakura-deep); }
.toast-icon { font-size: 20px; line-height: 1.3; flex-shrink: 0; }
.toast-body { flex: 1; min-width: 0; }
.toast-title { font-family: "Jua", sans-serif; font-size: 14px; color: var(--sakura-deep); }
.toast-comment .toast-title { color: #2f9b86; }
.toast-message .toast-title { color: var(--sakura-deep); }
.toast-desc { font-size: 13px; color: var(--ink); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toast-close { background: none; border: none; color: var(--ink-soft); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; flex-shrink: 0; }
.toast-close:hover { color: var(--ink); }

@media (max-width: 700px) {
  .hero { flex-direction: column; text-align: center; padding: 24px 20px; }
  .hero-mascot { width: 120px; }
  .hero-bubble::after { display: none; }
  .hero-cta { justify-content: center; }
}
@media (max-width: 640px) {
  .col-author, .col-views { display: none; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .header-inner { height: auto; padding: 10px 0; }
  #toast-area { right: 10px; bottom: 10px; }
}

@media (max-width: 720px) {
  .header-inner { height: auto; padding: 12px 0; justify-content: center; flex-wrap: wrap; row-gap: 12px; column-gap: 16px; }
  .header-left { width: 100%; justify-content: center; flex-wrap: wrap; }
  .board-nav { flex: 0 1 auto; flex-wrap: wrap; justify-content: center; }
  .user-nav { margin-left: 0; justify-content: center; }
}
@media (max-width: 480px) {
  /* 아주 좁은 화면에서는 우측 하단 버튼을 조금 더 안쪽으로 */
  .chat-dock.collapsed { right: 14px; bottom: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .petal { display: none; }
  .hero-mascot { animation: none; }
  .toast { transition: opacity .2s; }
}

.point-badge {
  display: inline-flex; align-items: center; gap: 2px;
  background: linear-gradient(120deg,#fff0f7,#ffe6f2);
  border: 1.5px solid var(--border); color: var(--sakura-deep);
  padding: 3px 9px; border-radius: 999px; font-size: 13px; font-weight: 700;
}
.checkin-btn { background: linear-gradient(135deg, var(--mint), #5fc7af); color: #fff; border: none; padding: 5px 11px; gap: 3px; line-height: 1; }
.checkin-btn:hover { background: #4cb89e; color: #fff; }
.checkin-done {
  display: inline-flex; align-items: center; justify-content: center; gap: 3px;
  background: #eafaf5; color: #2f9b86;
  border: 1.5px solid #bfeee2; padding: 5px 11px; border-radius: 999px;
  font-size: 13px; font-weight: 700; line-height: 1; white-space: nowrap;
}
.rank-table .col-no { font-size: 16px; }
.rank-table .col-points { width: 110px; text-align: right; font-weight: 700; color: var(--sakura-deep); }
.rank-me { background: #fff0f7 !important; }
.rank-tag {
  display: inline-block; background: var(--sakura); color: #fff;
  font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; margin-left: 6px;
}

.post-body { line-height: 1.8; }
.post-body p { margin: 0 0 12px; }
.post-body img { max-width: 100%; height: auto; border-radius: 10px; }
.post-body ul, .post-body ol { padding-left: 26px; margin: 0 0 12px; }
.post-body li { margin: 3px 0; }
.post-body a { color: var(--lavender-deep); text-decoration: underline; }
.post-body a:hover { color: var(--sakura-deep); }
.post-body blockquote {
  margin: 12px 0; padding: 8px 16px; color: var(--ink-soft);
  border-left: 4px solid var(--sakura); background: #fff5fa; border-radius: 0 10px 10px 0;
}
.post-body pre, .post-body code {
  background: #f5f0fb; border-radius: 8px; font-family: ui-monospace, Menlo, Consolas, monospace;
}
.post-body pre { padding: 12px 14px; overflow-x: auto; }
.post-body code { padding: 1px 5px; font-size: .92em; }
.post-body h1, .post-body h2, .post-body h3, .post-body h4 { color: var(--ink); margin: 16px 0 8px; }
.post-body table { border-collapse: collapse; margin: 12px 0; }
.post-body td, .post-body th { border: 1px solid var(--border); padding: 6px 10px; }

.write-box .note-editor.note-frame { border: 2px solid var(--border); border-radius: 14px; overflow: hidden; }
.write-box .note-toolbar { background: linear-gradient(120deg,#fff0f7,#f3ecff); border-bottom: 1px solid var(--border); }
.write-box .note-editable { font-family: inherit; font-weight: 400; line-height: 1.8; }
.write-box .note-editable b, .write-box .note-editable strong { font-weight: 700; }
.write-box .note-editable::-webkit-scrollbar { width: 8px; }

.board-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.board-card-admin {
  display: flex; align-items: flex-end; gap: 8px;
  background: var(--surface); border: 2px solid var(--border);
  border-radius: 14px; padding: 12px;
}
.board-fields { display: flex; align-items: flex-end; gap: 10px; flex: 1; flex-wrap: wrap; }
.bf { display: flex; flex-direction: column; gap: 3px; }
.bf label { font-size: 11px; font-weight: 700; color: var(--ink-soft); }
.bf input {
  padding: 7px 10px; border: 2px solid var(--border); border-radius: 10px;
  font-family: inherit; font-size: 13px; min-width: 0; background: #fff;
}
.bf input:focus { outline: none; border-color: var(--sakura); }
.bf-order input { width: 56px; }
.bf-pp input, .bf-cp input { width: 56px; }
.bf-slug input  { width: 120px; }
.bf-name input  { width: 130px; }
.bf-desc { flex: 1; }
.bf-desc input  { width: 100%; }
.bf-link input  { width: 200px; }
.bf-count { align-items: center; }
.bf-count span { font-size: 14px; font-weight: 700; color: var(--ink); padding: 7px 0; }
.board-del { display: flex; align-items: flex-end; }
.sub-h { font-size: 15px; color: var(--ink-soft); margin: 18px 0 8px; }
.board-add { border-style: dashed; }

.points-form { display: flex; gap: 22px; align-items: flex-end; flex-wrap: wrap; }
.points-form label { font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 6px; margin: 0; }
.points-form input {
  width: 96px; padding: 8px 12px; border: 2px solid var(--border); border-radius: 10px;
  font-family: inherit; font-weight: 400; margin-right: 2px;
}
.points-form input:focus { outline: none; border-color: var(--sakura); }

@media (max-width: 720px) {
  .board-card-admin { flex-direction: column; align-items: stretch; }
  .bf-slug input, .bf-name input { width: 100%; }
  .bf-link input { width: 100%; }
  .board-del { justify-content: flex-end; }
}

.bf-wc { align-items: center; }
.bf-wc input { width: auto; transform: scale(1.3); margin-top: 4px; }
.wc-banner {
  background: linear-gradient(120deg,#fff0f7,#eafaf5);
  border: 2px dashed var(--mint); color: var(--ink);
  padding: 12px 16px; border-radius: 14px; margin-bottom: 16px; font-size: 14px; line-height: 1.7;
}

.wc-play {
  background: linear-gradient(120deg,#fff0f7,#eafaf5);
  border: 2px solid var(--border); border-radius: 18px;
  padding: 16px 18px; margin-bottom: 18px; box-shadow: var(--shadow);
}
.wc-play-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.wc-badge {
  background: linear-gradient(135deg, var(--mint), #5fc7af); color: #fff;
  font-family: "Jua", sans-serif; font-size: 14px; padding: 4px 14px; border-radius: 999px;
}
.wc-info { font-size: 15px; color: var(--ink); }
.wc-need { color: var(--sakura-deep); }
.wc-form { display: flex; gap: 8px; align-items: center; }
.wc-input {
  flex: 1; padding: 9px 16px; border: 2px solid var(--border); border-radius: 999px;
  font-family: inherit; font-size: 15px;
}
.wc-input:focus { outline: none; border-color: var(--sakura); }
.wc-form .btn { padding: 9px 22px; font-size: 15px; white-space: nowrap; }
@media (max-width: 640px) { .wc-form { flex-direction: column; align-items: stretch; } }

.board-nav.oneline {
  flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: var(--sakura) transparent;
}
.board-nav.oneline a { flex: 0 0 auto; white-space: nowrap; }
.board-nav.oneline::-webkit-scrollbar { height: 6px; }
.board-nav.oneline::-webkit-scrollbar-thumb { background: var(--sakura); border-radius: 999px; }

.nav-dd { position: relative; flex: 0 0 auto; margin-right: auto; }
.nav-dd > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 16px; border-radius: 999px; font-size: 15px; color: var(--ink);
  background: var(--cream-2); border: 2px solid var(--border); user-select: none; white-space: nowrap;
}
.nav-dd > summary::-webkit-details-marker { display: none; }
.nav-dd[open] > summary { background: #fff; border-color: var(--sakura); color: var(--sakura-deep); }
.nav-dd-caret { font-size: 12px; transition: transform .15s; }
.nav-dd[open] .nav-dd-caret { transform: rotate(180deg); }
.nav-dd-menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 50;
  background: var(--surface, #fff); border: 2px solid var(--border); border-radius: 16px;
  box-shadow: var(--shadow); padding: 8px; min-width: 180px;
  display: flex; flex-direction: column; gap: 2px;
}
.nav-dd-menu a { padding: 9px 14px; border-radius: 10px; color: var(--ink); font-size: 15px; }
.nav-dd-menu a:hover { background: var(--cream-2); color: var(--sakura-deep); }

.points-form select {
  padding: 8px 12px; border: 2px solid var(--border); border-radius: 10px;
  font-family: inherit; font-size: 14px; font-weight: 400; background: #fff;
}
.points-form select:focus { outline: none; border-color: var(--sakura); }

.col-title .wc-word { color: var(--ink); font-weight: 500; }

.nav-dd-group {
  font-family: "Jua", sans-serif; font-size: 12px; color: var(--lavender-deep);
  padding: 8px 12px 3px; margin-top: 4px; border-top: 1px solid var(--border);
}
.nav-dd-menu > .nav-dd-group:first-child { border-top: none; margin-top: 0; }
.bf-group input { width: 90px; }

.bf select {
  padding: 7px 10px; border: 2px solid var(--border); border-radius: 9px;
  font-family: inherit; font-size: 13px; background: #fff;
}
.bf select:focus { outline: none; border-color: var(--sakura); }
.bf-group select { width: 110px; }

.menu-bar { display: flex; flex-wrap: nowrap; align-items: center; gap: 2px 4px; flex: 0 1 auto; min-width: 0; }
.menu-link { padding: 6px 10px; border-radius: 999px; color: var(--ink); font-size: 14px; white-space: nowrap; }
.menu-link:hover { background: var(--cream-2); color: var(--sakura-deep); }

.menu-bar .chat-link { background: linear-gradient(135deg, #ffd9ec, #e7dcff); color: var(--sakura-deep); font-weight: 700; }
.menu-bar .chat-link:hover { background: linear-gradient(135deg, #ffc7e2, #daccff); color: var(--sakura-deep); }

.menu-group { position: relative; outline: none; }
.menu-group-btn {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer; user-select: none;
  padding: 6px 10px; border-radius: 999px; color: var(--ink); font-size: 14px; white-space: nowrap;
}
.menu-group:hover .menu-group-btn,
.menu-group:focus-within .menu-group-btn { background: var(--cream-2); color: var(--sakura-deep); }
.menu-group .caret { font-size: 11px; transition: transform .15s; }
.menu-group:hover .caret, .menu-group:focus-within .caret { transform: rotate(180deg); }

.menu-group-pop {
  position: absolute; top: 100%; left: 0; margin-top: 6px; z-index: 60;
  display: none; flex-direction: column; gap: 2px;
  background: #fff; border: 2px solid var(--border); border-radius: 16px;
  box-shadow: var(--shadow); padding: 8px; min-width: 160px;
  max-height: min(70vh, 460px); overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--sakura) transparent;
}
.menu-group-pop::-webkit-scrollbar { width: 8px; }
.menu-group-pop::-webkit-scrollbar-track { background: transparent; margin: 6px 0; }
.menu-group-pop::-webkit-scrollbar-thumb {
  background: var(--sakura); border-radius: 8px;
  border: 2px solid #fff; background-clip: padding-box;
}
.menu-group-pop::-webkit-scrollbar-thumb:hover { background: var(--sakura-deep); }
.menu-group:hover .menu-group-pop,
.menu-group:focus-within .menu-group-pop { display: flex; }

.menu-group::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 10px; display: none; }
.menu-group:hover::after { display: block; }
.menu-group-pop a { padding: 9px 14px; border-radius: 10px; color: var(--ink); font-size: 15px; white-space: nowrap; flex-shrink: 0; }
.menu-group-pop a:hover { background: var(--cream-2); color: var(--sakura-deep); }

.group-card { background: #fff; border: 2px solid var(--border); border-radius: 16px; padding: 12px 14px; margin-bottom: 10px; }
.group-card-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.group-assign { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); }
.ga-label { font-size: 12px; font-weight: 700; color: var(--ink-soft); margin-bottom: 6px; }
.ga-boards { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 8px; }
.ga-item { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 400; cursor: pointer; white-space: nowrap; }
.ga-item input { transform: scale(1.15); }

.group-add-btn { margin-top: 12px; }

.del-tag { color: #c2410c; background: #fff1e6; border: 1px solid #ffd9b8; padding: 1px 8px; border-radius: 999px; font-size: 12px; }
.del-notice-box { text-align: center; padding: 40px 0; }
.del-notice { font-size: 17px; color: var(--ink-soft); margin-bottom: 16px; }
.center { text-align: center; }
.deleted-comment { color: var(--ink-soft); font-style: italic; background: #faf7ff; }

.badge-sub { color: #6d28d9; background: #f1ecff; border: 1px solid #d9ccfb; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.badge-admin { color: #b3245f; background: #ffe3ee; border: 1px solid #ffc2d8; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; }

.level-badge {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 4px 9px; border-radius: 999px; text-decoration: none;
  background: linear-gradient(135deg, #fff0f7, #f1ecff);
  border: 1.5px solid var(--border);
}
.level-badge:hover { border-color: var(--sakura-deep); }
.lv-num { font-weight: 700; color: var(--sakura-deep); font-size: 13px; white-space: nowrap; }
.lv-bar { width: 46px; height: 7px; border-radius: 999px; background: #ece6f5; overflow: hidden; }
.lv-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--sakura), var(--lavender-deep)); transition: width .4s ease; }
@media (max-width: 640px) { .lv-bar { width: 42px; } }

.levelup-banner {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 16px; padding: 14px 18px; border-radius: 16px;
  background: linear-gradient(120deg, #fff4d6, #ffe1ef, #e7dcff);
  border: 2px solid #ffd36e; box-shadow: var(--shadow);
  animation: lu-pop .5s cubic-bezier(.2,.9,.3,1.3);
}
.levelup-banner.hide { animation: lu-out .6s forwards; }
.lu-emoji { font-size: 26px; }
.lu-text { font-size: 16px; color: var(--ink); }
.lu-text strong { color: var(--sakura-deep); }
.lu-close { margin-left: auto; background: none; border: none; font-size: 22px; line-height: 1; color: var(--ink-soft); cursor: pointer; }
@keyframes lu-pop { 0% { transform: scale(.92) translateY(-8px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes lu-out { to { opacity: 0; transform: translateY(-8px); } }

.captcha-row { display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin: 4px 0 8px; }
.captcha-img { width: 100%; height: auto; display: block; border: 1.5px solid var(--border); border-radius: 10px; background: #fff; }
.captcha-refresh { align-self: flex-end; }
.captcha-q { display: block; width: 100%; box-sizing: border-box; text-align: center; font-weight: 700; font-size: 20px; letter-spacing: 1px; background: #fff7fb; border: 1.5px solid var(--border); border-radius: 10px; padding: 12px 14px; margin: 4px 0 8px; color: var(--ink); }

.wc-defense-form { display: block; }
.wc-toggle { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; margin-bottom: 10px; }
.wc-list-label { display: block; font-weight: 700; color: var(--ink-soft); font-size: 13px; }
.wc-list { width: 100%; margin-top: 6px; margin-bottom: 10px; border: 1.5px solid var(--border); border-radius: 12px; padding: 10px 12px; font-size: 16px; letter-spacing: 2px; resize: vertical; }

.wc-wait { margin: 0; padding: 12px 14px; border-radius: 12px; background: #fff7fb; border: 1.5px dashed var(--border); color: var(--ink-soft); font-size: 15px; }

.wc-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); }
.wc-chain-label { font-size: 12px; font-weight: 700; color: var(--ink-soft); margin-right: 4px; }
.wc-chip { display: inline-block; padding: 4px 11px; border-radius: 999px; background: #fff; border: 1.5px solid var(--border); color: var(--ink); font-size: 14px; font-weight: 500; }

.wc-del { display: inline; margin-left: 6px; }
.wc-del-btn { background: none; border: none; color: var(--ink-soft); cursor: pointer; font-size: 12px; padding: 0 2px; line-height: 1; }
.wc-del-btn:hover { color: var(--danger); }

.deduct-toggle { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; }

.admin-section {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 18px;
  padding: 22px 24px;
  margin-bottom: 20px;
  box-shadow: 0 6px 20px rgba(190,150,200,.10);
}
.admin-section > h2 {
  font-size: 19px; color: var(--lavender-deep);
  margin: 0 0 14px; padding-bottom: 12px;
  border-bottom: 1.5px solid var(--border);
}
.admin-section > p.muted { margin: -4px 0 16px; }
.sub-h {
  font-size: 14px; color: var(--lavender-deep); font-weight: 700;
  margin: 24px 0 10px; padding-top: 18px; border-top: 1px dashed var(--border);
}

.stat-grid { margin: 18px 0 24px; }
.stat-card { border-width: 1.5px; padding: 18px; }
.stat-num { font-size: 30px; }

.board-list { gap: 8px; margin-bottom: 14px; }
.board-card-admin {
  background: #faf8ff; border: 1.5px solid var(--border);
  border-radius: 12px; padding: 12px 14px; gap: 10px 12px; align-items: flex-end;
}
.board-fields { gap: 10px 12px; }
.bf label { letter-spacing: .2px; margin-bottom: 1px; }
.bf input, .bf select { height: 38px; box-sizing: border-box; }
.board-card-admin .btn-mini,
.board-card-admin .btn,
.board-del .btn-mini { height: 38px; display: inline-flex; align-items: center; justify-content: center; }
.bf-count { align-self: flex-end; }
.bf-count span { height: 38px; display: inline-flex; align-items: center; padding: 0; }
.board-add { border-style: dashed; background: #fffafd; }

.group-card { background: #faf8ff; border-width: 1.5px; padding: 14px 16px; }
.group-card-top { gap: 10px 12px; align-items: flex-end; }

.points-form { gap: 12px; align-items: center; }
.points-form label {
  background: #faf8ff; border: 1.5px solid var(--border); border-radius: 12px;
  padding: 9px 14px; gap: 9px; font-size: 13.5px;
}
.points-form input { width: 84px; margin: 0; height: 38px; box-sizing: border-box; }
.points-form select { margin: 0; height: 38px; box-sizing: border-box; }
.points-form .btn { height: 40px; display: inline-flex; align-items: center; }

.deduct-toggle, .wc-toggle {
  background: transparent; border: none; padding: 0;
  width: 100%; font-size: 14px;
}

.wc-list { max-width: 520px; }
.wc-list-label { margin-bottom: 2px; }

.post-table td.actions-cell { text-align: right; white-space: nowrap; }
.post-table .actions-cell form { display: inline-flex; vertical-align: middle; margin: 0 0 0 4px; }
.post-table thead th { font-weight: 700; }

@media (max-width: 720px) {
  .admin-section { padding: 16px; }
  .points-form { gap: 8px; }
}

.notice-tag { display: inline-block; white-space: nowrap; background: var(--sakura-deep); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; vertical-align: middle; line-height: 1.6; }
.col-no .notice-tag { font-size: 10.5px; padding: 2px 7px; }
.post-title .notice-tag { font-size: 14px; margin-right: 6px; vertical-align: 3px; }
.notice-row { background: #fff7fb; }
.notice-row td { font-weight: 500; }
.notice-check {
  display: flex; align-items: center; gap: 9px;
  font-weight: 700; color: var(--lavender-deep);
  margin: -4px 0 16px; padding: 11px 14px;
  background: #fff7fb; border: 1.5px dashed var(--sakura); border-radius: 12px;
}
.notice-check input[type="checkbox"] {
  display: inline-block; width: auto; min-width: 0; margin: 0; padding: 0;
  flex: none; transform: scale(1.25); accent-color: var(--sakura-deep);
}

.poll-builder { margin: 18px 0 16px; }
.poll-builder #poll-fields { margin-top: 10px; padding: 14px 16px; background: var(--cream); border: 1.5px solid var(--border); border-radius: 12px; }
.poll-opt-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.poll-opt-row input { flex: 1; }
.poll-opt-del {
  flex: none; width: 30px; height: 30px; border-radius: 8px; border: 1.5px solid var(--border);
  background: #fff; color: var(--ink-soft); cursor: pointer; font-size: 14px; line-height: 1;
}
.poll-opt-del:hover { border-color: var(--danger); color: var(--danger); }
#poll-opt-add { margin-top: 2px; }

.post-poll {
  margin: 18px 0; padding: 16px 18px; background: var(--cream); border: 1.5px solid var(--border);
  border-radius: 14px;
}
.post-poll-q { font-weight: 700; color: var(--ink); margin: 0 0 12px; font-size: 15.5px; }
.post-poll-q::before { content: "📊 "; }
.post-poll-opt {
  position: relative; display: block; width: 100%; text-align: left;
  padding: 10px 14px; margin-bottom: 8px; border: 1.5px solid var(--border); border-radius: 10px;
  background: #fff; cursor: pointer; overflow: hidden; font: inherit; color: var(--ink);
}
.post-poll-opt:hover { border-color: var(--sakura); }
.post-poll-opt:disabled { cursor: default; }
.post-poll-opt-bar {
  position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, var(--sakura), var(--lavender));
  opacity: .22; width: 0%; transition: width .4s ease; z-index: 0;
}
.post-poll-opt.mine .post-poll-opt-bar { opacity: .38; }
.post-poll-opt-row { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.post-poll-opt-label { font-weight: 600; }
.post-poll-opt.mine .post-poll-opt-label::before { content: "✓ "; color: var(--sakura-deep); }
.post-poll-opt-pct { font-size: 13px; color: var(--ink-soft); white-space: nowrap; }
.post-poll-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font-size: 12.5px; color: var(--ink-soft); }
.post-poll-hint { font-size: 12.5px; color: var(--ink-soft); }

.actions-cell .cell-self { display: inline-flex; align-items: center; width: auto; }

.member-table th:last-child { text-align: center; }
.member-table td.actions-cell { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; }
.member-table .actions-cell form { display: inline-flex; margin: 0; }
.member-table .actions-cell .cell-self { color: #b08; }

.popular-section { margin: 8px 0 30px; }
.popular-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 18px; }
.pop-item {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1.5px solid var(--border); border-radius: 14px;
  padding: 12px 16px; box-shadow: var(--shadow);
}
.pop-rank {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px; color: #fff; background: var(--lavender-deep);
}
.pop-rank-1 { background: linear-gradient(135deg,#ffb13d,#ff8e3c); }
.pop-rank-2 { background: linear-gradient(135deg,#b9c2d6,#94a0bd); }
.pop-rank-3 { background: linear-gradient(135deg,#e0a276,#c9824f); }
.pop-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.pop-title {
  font-weight: 700; color: var(--ink); text-decoration: none; font-size: 15px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pop-title:hover { color: var(--sakura-deep); }
.pop-title-row { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.pop-title-row .pop-title { flex: 0 1 auto; min-width: 0; }
.pop-title-row .cmt-badge { flex: 0 0 auto; }
.pop-meta { font-size: 12.5px; color: var(--ink-soft); }
@media (max-width: 640px) { .popular-list { grid-template-columns: 1fr; } }

.lv-chip { display: inline-block; font-size: 11px; font-weight: 800; color: #fff; background: var(--lavender-deep); border-radius: 7px; padding: 1px 6px; margin-right: 5px; vertical-align: middle; line-height: 1.7; white-space: nowrap; }
.role-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700; line-height: 1.5; padding: 1px 8px; margin-left: 4px; border-radius: 999px; vertical-align: middle; white-space: nowrap; }
.role-admin { background: linear-gradient(135deg, #fff1cf, #ffd9ea); color: #b35309; border: 1px solid #ffce86; }
.role-subadmin { background: linear-gradient(135deg, #eae6ff, #def6ef); color: #6442c7; border: 1px solid #cdbcf2; }
.nick-link { color: inherit; text-decoration: none; cursor: pointer; }
.nick-link:hover { color: var(--sakura-deep); text-decoration: underline; }
.role-icon { margin-right: 3px; font-size: 14px; vertical-align: middle; }
.lv-chip.lv-t1 { background: #b7a9e8; }
.lv-chip.lv-t2 { background: #7fb8e6; }
.lv-chip.lv-t3 { background: #6fd0b4; }
.lv-chip.lv-t4 { background: #f0a868; }
.lv-chip.lv-t5 { background: linear-gradient(135deg,#ff9ec4,#ff8e3c); }

.msg-nav { position: relative; }
.msg-nav-badge {
  position: absolute; top: -4px; right: -4px;
  display: inline-block; min-width: 15px; height: 15px; padding: 0 3px;
  background: var(--danger); color: #fff; font-size: 10px; font-weight: 800;
  border-radius: 999px; text-align: center; line-height: 15px;
}
.msg-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.msg-tabs { display: flex; gap: 8px; margin: 14px 0 16px; border-bottom: 2px solid var(--border); }
.msg-tab {
  padding: 9px 16px; text-decoration: none; font-weight: 700; color: var(--ink-soft);
  border: 2px solid transparent; border-bottom: none; border-radius: 12px 12px 0 0; margin-bottom: -2px;
}
.msg-tab.active { color: var(--sakura-deep); background: var(--surface); border-color: var(--border); border-bottom: 2px solid var(--surface); }
.msg-badge { display: inline-block; min-width: 18px; padding: 0 5px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 800; border-radius: 999px; }
.msg-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.msg-empty { padding: 30px; text-align: center; }
.msg-row {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1.5px solid var(--border); border-radius: 14px;
  padding: 4px 10px 4px 4px; box-shadow: var(--shadow);
}
.msg-row.msg-unread { border-color: var(--sakura); background: #fff7fb; }
.msg-link-row { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; text-decoration: none; color: var(--ink); padding: 9px 8px; }
.msg-who { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.msg-new { display: inline-block; background: var(--danger); color: #fff; font-size: 10px; font-weight: 800; border-radius: 6px; padding: 1px 5px; }
.msg-snippet { grid-column: 1 / 2; grid-row: 2; color: var(--ink-soft); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-time { grid-column: 2; grid-row: 1 / 3; color: var(--ink-soft); font-size: 12px; white-space: nowrap; }
.msg-del-form { flex: none; }
.msg-del { background: none; border: none; color: var(--ink-soft); cursor: pointer; font-size: 14px; padding: 6px 8px; }
.msg-del:hover { color: var(--danger); }

.msg-view-meta { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; background: #faf8ff; border: 1.5px solid var(--border); border-radius: 12px; margin-bottom: 14px; font-size: 14px; }
.msg-view-time { font-size: 12.5px; }
.msg-view-body { line-height: 1.85; font-size: 15px; padding: 6px 2px 14px; min-height: 80px; white-space: pre-wrap; word-break: break-word; }
.msg-send-link { font-size: 12px; color: var(--lavender-deep); text-decoration: none; font-weight: 700; }
.msg-send-link:hover { color: var(--sakura-deep); }

.comment-body img { max-width: 100%; height: auto; border-radius: 10px; margin: 6px 0; display: block; }
.comment-body p { margin: 4px 0; }
.comment-form .note-editor.note-frame { border: 2px solid var(--border); border-radius: 12px; overflow: hidden; }
.comment-form .note-toolbar { background: linear-gradient(120deg,#fff0f7,#f3ecff); border-bottom: 1px solid var(--border); }
.comment-form .note-editable { font-family: inherit; font-weight: 400; line-height: 1.7; min-height: 90px; }
.comment-form .note-editable b, .comment-form .note-editable strong { font-weight: 700; }

.jq-toast-wrap { z-index: 2000; width: 400px !important; max-width: 92vw !important; }
.jq-toast-wrap.jq-toast-bottom-right, .jq-toast-wrap.bottom-right { right: 24px !important; bottom: 24px !important; }
.jq-toast-single {
  border-radius: 18px !important;
  font-family: inherit !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  padding: 20px 22px !important;
  box-shadow: 0 14px 34px rgba(160,120,170,.34) !important;
  border: 2px solid rgba(255,255,255,.7) !important;
}
.jq-toast-single h2 { font-family: inherit !important; font-weight: 800 !important; font-size: 18px !important; margin-bottom: 7px !important; }
.jq-toast-single a { font-weight: 700; font-size: 16px; }
.jq-toast-single .close-jq-toast-single { font-size: 22px !important; top: 12px !important; right: 14px !important; }
.jq-icon-info, .jq-icon-success, .jq-icon-warning, .jq-icon-error { background-image: none !important; padding-left: 22px !important; }

.post-cat {
  display: inline-block; font-size: 12px; font-weight: 700; color: var(--sakura-deep);
  background: #ffe7f2; border: 1px solid #ffd0e6; border-radius: 8px; padding: 1px 8px; margin-right: 6px;
  vertical-align: middle;
}
.post-cat.post-cat-all { color: var(--ink-soft); background: var(--cream-2); border-color: var(--border); }
.post-title .post-cat { font-size: 15px; padding: 2px 10px; }

.postcat-card { display: block; }
.postcat-head { font-size: 15px; margin-bottom: 8px; }
.postcat-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; min-height: 22px; }
.postcat-chip {
  display: inline-flex; align-items: center; gap: 4px; background: #fff0f7; border: 1.5px solid #ffd0e6;
  color: var(--sakura-deep); font-weight: 700; font-size: 13px; border-radius: 999px; padding: 3px 6px 3px 12px;
}
.postcat-x { background: none; border: none; color: var(--ink-soft); cursor: pointer; font-size: 13px; line-height: 1; padding: 2px 4px; }
.postcat-x:hover { color: var(--danger); }
.postcat-add { display: flex; gap: 8px; align-items: center; }
.postcat-add input[type=text] { flex: 1; min-width: 160px; }

.col-cat { width: 88px; text-align: center; white-space: nowrap; }
.col-cat .post-cat { margin-right: 0; }
@media (max-width: 560px) { .col-cat { display: none; } }

.dict-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.dict-actions .inline { margin: 0; }

.chat-win { position: fixed; z-index: 1200; width: 360px; height: 460px; min-width: 280px; min-height: 320px; max-width: calc(100vw - 20px); max-height: calc(100vh - 20px); resize: both; background: var(--surface); border: 2px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; overflow: hidden; }
.chat-win::after { content: ""; position: absolute; right: 4px; bottom: 4px; width: 11px; height: 11px; pointer-events: none; opacity: .45; background: linear-gradient(135deg, transparent 0 45%, var(--ink-soft) 45% 58%, transparent 58% 70%, var(--ink-soft) 70% 83%, transparent 83%); }
.chat-win[hidden] { display: none; }
.chat-win-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: linear-gradient(135deg, var(--sakura), var(--lavender)); color: #fff; cursor: move; user-select: none; touch-action: none; }
.chat-win-title { font-weight: 700; }
.chat-win-close { background: none; border: 0; color: #fff; font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px; }
.chat-win-body { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.chat-msgs { flex: 1; min-height: 0; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; background: var(--cream); }
.chat-msg { max-width: 86%; align-self: flex-start !important; }        
.chat-msg.mine { align-self: flex-end !important; }                      
.chat-meta { font-size: 12px; display: flex; align-items: center; gap: 5px; margin-bottom: 3px; justify-content: flex-start; }
.chat-msg.mine .chat-meta { justify-content: flex-end !important; }
.chat-nick { color: var(--ink); }
.chat-time { color: var(--ink-soft); font-weight: 400; }
.chat-body { display: inline-block; background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 7px 11px; line-height: 1.55; word-break: break-word; font-size: 13px; text-align: left; }
.chat-msg.mine .chat-body { background: var(--cream-2); margin-left: auto !important; margin-right: 0 !important; text-align: right !important; }
.chat-body img { max-width: 100%; border-radius: 8px; }
.chat-body p, .chat-body div, .chat-body ul, .chat-body ol { margin: 0; }
.chat-body p + p { margin-top: 4px; }
.chat-input { border-top: 1px solid var(--border); padding: 8px; background: #fff; }
.chat-input .note-editable { font-weight: 400 !important; }
.chat-input .note-editable b, .chat-input .note-editable strong { font-weight: 700 !important; }
.chat-input #chat-send { width: 100%; margin-top: 6px; }
.chat-login-note { padding: 18px; text-align: center; color: var(--ink-soft); }
.chat-guest-note { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; background: var(--cream); }
.chat-guest-lock { margin: 0; font-weight: 700; color: var(--sakura-deep); }
@media (max-width: 480px) { .chat-win { width: calc(100vw - 16px); height: 70vh; resize: none; } .chat-win::after { display: none; } }

.chat-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 1190;
  width: 56px; height: 56px; border-radius: 50%;
  border: 2px solid #fff; cursor: pointer;
  font-size: 26px; line-height: 1; color: #fff;
  background: linear-gradient(135deg, var(--sakura), var(--lavender));
  box-shadow: var(--shadow-lg);
  display: flex; align-items: center; justify-content: center;
  animation: chatFabBob 3.2s ease-in-out infinite;
  transition: transform .15s ease, box-shadow .15s ease;
}
.chat-fab:hover { transform: translateY(-3px) scale(1.06); animation-play-state: paused; }
.chat-fab:active { transform: scale(.95); }
@keyframes chatFabBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@media (prefers-reduced-motion: reduce) { .chat-fab { animation: none; } }
@media (max-width: 480px) { .chat-fab { right: 14px; bottom: 14px; width: 52px; height: 52px; font-size: 24px; } }

.lock-tag { font-size: 13px; color: var(--danger); }

.locked-banner { display: flex; align-items: center; gap: 8px; background: linear-gradient(135deg, #fff0f4, #fdeaf2); border: 1.5px solid var(--border); color: var(--danger); font-weight: 700; padding: 12px 16px; border-radius: var(--radius-sm); margin: 6px 0 16px; }

.bf-link input { min-width: 150px; }

#chat-open {
  border: none;
  color: #fff;
  font-weight: 800;
  background: linear-gradient(135deg, #b48cf2, #8a6ee0);
  box-shadow: 0 4px 14px rgba(138, 110, 224, 0.45);
  animation: chatGlow 2s ease-in-out infinite;
}
#chat-open:hover {
  color: #fff;
  border: none;
  background: linear-gradient(135deg, #a87ef0, #7a5cda);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(138, 110, 224, 0.6);
}
@keyframes chatGlow {
  0%, 100% { box-shadow: 0 4px 14px rgba(138, 110, 224, 0.45); }
  50%      { box-shadow: 0 4px 22px rgba(138, 110, 224, 0.75), 0 0 0 4px rgba(180, 140, 242, 0.2); }
}
@media (prefers-reduced-motion: reduce) {
  #chat-open { animation: none; }
}

.uedit-row { display: none; }
.uedit-row.open { display: table-row; }
.uedit-row > td { background: #fff7fb; }
.user-edit-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; padding: 8px 4px; }
.user-edit-form label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: #8a6f7d; }
.user-edit-form input { padding: 6px 9px; border: 1px solid var(--border); border-radius: 8px; font: inherit; }
.user-edit-form input[type="number"] { width: 120px; }

.perm-count { display: inline-block; margin-left: 4px; font-size: 11px; font-weight: 700; color: #6d28d9; background: #f6f1ff; border: 1px solid #e3d6fb; border-radius: 999px; padding: 0 7px; vertical-align: middle; }
.actions-cell .btn-mini.sp-btn { background: #f1ecff; border-color: #d9ccfb; color: #6d28d9; }
.uperm-row { display: none; }
.uperm-row.open { display: table-row; }
.uperm-row > td { background: #f7f3ff; }
.staff-perm-form { padding: 10px 4px 6px; }
.staff-perm-form .sp-title { font-size: 13px; font-weight: 700; color: #6d28d9; margin-bottom: 10px; }
.sp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px 14px; }
.sp-item { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-soft); background: #fff; border: 1px solid #e7defb; border-radius: 9px; padding: 8px 10px; cursor: pointer; transition: border-color .12s, background .12s; }
.sp-item:hover { border-color: #c9b6f6; background: #fbf9ff; }
.sp-item input { accent-color: #7c3aed; width: 15px; height: 15px; flex: none; }
.sp-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.sp-hint { font-size: 12px; }
@media (max-width: 640px) { .sp-grid { grid-template-columns: 1fr 1fr; } }

a.hello { text-decoration: none; cursor: pointer; transition: color .15s; }
a.hello:hover { color: #d6418a; }

.account-summary { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 6px 0 18px; }
.account-summary .acc-id, .account-summary .acc-pt { font-size: 14px; color: var(--ink-soft); }
.account-box .sub-h { margin: 22px 0 10px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 16px; }
.account-box .sub-h:first-of-type { border-top: none; padding-top: 0; }

.flash.flash-error {
  background: linear-gradient(120deg, #fff0f3, #ffeef0);
  border-color: var(--danger);
  color: var(--danger);
}
.flash.flash-error div { margin: 2px 0; }

.block-form { margin: 6px 0 14px; }
.block-form-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.block-form label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.block-form label.grow { flex: 1 1 220px; }
.block-form .block-days { width: 110px; }
.block-form input[type="text"], .block-form input[type="number"], .block-form select {
  padding: 8px 10px; border: 1.5px solid var(--border); border-radius: 10px; font-family: inherit; font-size: 14px;
}
.block-form > label { margin-top: 10px; }
.blk-kind { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.blk-kind.k-ip   { background: #e7f0ff; color: #3b6fd6; border: 1px solid #c8dbff; }
.blk-kind.k-user { background: #fdeaf4; color: #c64b94; border: 1px solid #f6cbe2; }
.blk-target { font-family: ui-monospace, Menlo, Consolas, monospace; word-break: break-all; }
.blk-perm { display: inline-block; background: #ffe2e8; color: #d6336c; border: 1.5px solid #ffc2d1; border-radius: 999px; padding: 2px 10px; font-weight: 800; font-size: 12px; }
.block-table th, .block-table td { vertical-align: middle; }

.post-nav { margin: 18px 0; border: 1.5px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--surface); }
.post-nav .pn-row { display: flex; align-items: center; gap: 14px; padding: 12px 16px; text-decoration: none; color: var(--ink); }
.post-nav .pn-row + .pn-row { border-top: 1px solid var(--border); }
.post-nav a.pn-row:hover { background: var(--cream); }
.post-nav .pn-dir { flex: 0 0 78px; font-weight: 800; font-size: 13px; color: var(--sakura-deep); white-space: nowrap; }
.post-nav .pn-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-nav .pn-empty { color: var(--ink-soft); cursor: default; }
.post-nav .pn-empty .pn-dir { color: var(--ink-soft); }

.msg-compose .msg-to-box {
  position: relative;
  background: linear-gradient(120deg, #fff0f7, #f1ecff);
  border: 2px dashed var(--sakura); border-radius: 16px;
  padding: 14px 18px; margin-bottom: 20px;
}
.msg-compose .msg-to-box::after {
  content: ""; position: absolute; left: 32px; bottom: -10px;
  width: 16px; height: 16px; background: #f4ecfa;
  border-right: 2px dashed var(--sakura); border-bottom: 2px dashed var(--sakura);
  transform: rotate(45deg); border-bottom-right-radius: 4px;
}
.msg-compose .msg-to-label {
  display: block; font-weight: 800; color: var(--sakura-deep);
  font-size: 14px; margin-bottom: 8px;
}
.msg-compose .msg-to-box input {
  width: 100%; box-sizing: border-box; padding: 10px 12px;
  border: 1.5px solid var(--border); border-radius: 10px;
  font-family: inherit; font-size: 15px; background: #fff;
}
.msg-compose .msg-to-box input:focus {
  outline: none; border-color: var(--sakura); box-shadow: 0 0 0 3px rgba(255,140,190,.18);
}

:root { --up: #f0506e; --down: #3f7fd0; }
.stock-wrap { max-width: 820px; margin: 0 auto; }
.stock-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.stk-home { color: inherit; text-decoration: none; }
.stk-home:hover { color: var(--sakura-deep); }
.stock-bal strong { color: var(--sakura-deep); }
.up { color: var(--up) !important; } .down { color: var(--down) !important; } .flat { color: var(--ink-soft) !important; }

.stock-index { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: linear-gradient(120deg, var(--cream-2), #f1ecff); border: 2px solid var(--border);
  border-radius: var(--radius); padding: 14px 18px; margin: 6px 0 16px; }
.si-left { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.si-label { font-weight: 700; color: var(--ink); font-size: 14px; }
.si-val { font-size: 26px; font-weight: 800; }
.si-pct { font-size: 14px; font-weight: 700; }
.spark { display: block; }

.stock-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.stk-tab { border: 2px solid var(--border); background: var(--cream-2); color: var(--ink-soft);
  border-radius: 12px; padding: 8px 16px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; text-decoration: none; }
.stk-tab:hover { border-color: var(--sakura); color: var(--sakura-deep); }
.stk-tab.active { background: var(--sakura); border-color: var(--sakura); color: #fff; }
.stk-tab.stk-admin { margin-left: auto; background: var(--lavender); border-color: var(--lavender); color: #fff; }

.stk-table-wrap { overflow-x: auto; }
.stk-table { width: 100%; }
.stk-table th, .stk-table td { vertical-align: middle; }
.stk-table .r { text-align: right; } .stk-table .c { text-align: center; }
.stk-table .small { font-size: 12px; color: var(--ink-soft); }
.stk-name { background: none; border: 0; padding: 0; font: inherit; text-align: left; cursor: pointer; color: var(--ink); }
.stk-name:hover strong { color: var(--sakura-deep); text-decoration: underline; }
.stk-code { display: block; font-size: 11px; color: var(--ink-soft); font-weight: 400; }
.price-cell { font-weight: 700; font-variant-numeric: tabular-nums; }
.pct-cell { font-weight: 700; font-size: 13px; white-space: nowrap; }
.spark-cell { width: 80px; }
.stk-table .btn-mini { padding: 4px 9px; }
.stk-empty { padding: 24px 8px; text-align: center; }
.stk-note { margin-top: 10px; }
.small { font-size: 12px; }

@keyframes tickup { 0% { background: rgba(240,80,110,.18); } 100% { background: transparent; } }
@keyframes tickdn { 0% { background: rgba(63,127,208,.18); } 100% { background: transparent; } }
.tick-up { animation: tickup .7s ease-out; }
.tick-down { animation: tickdn .7s ease-out; }

.stk-port-sum { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.stk-port-sum > div { flex: 1; min-width: 120px; background: var(--surface); border: 2px solid var(--border);
  border-radius: 14px; padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; }
.stk-port-sum .k { font-size: 12px; color: var(--ink-soft); }
.stk-port-sum .v { font-size: 17px; font-weight: 800; }

.stk-news { list-style: none; margin: 0; padding: 0; }
.stk-news li { display: flex; gap: 12px; padding: 10px 4px; border-bottom: 1px dashed var(--border); }
.stk-news li:last-child { border-bottom: 0; }
.stk-news-time { color: var(--ink-soft); font-size: 12px; flex: 0 0 84px; }
.stk-news-msg { font-size: 14px; }
.stk-news li.nk-up .stk-news-msg { color: var(--up); } .stk-news li.nk-down .stk-news-msg { color: var(--down); }
.stk-proc { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 8px; color: #fff !important; }
.stk-proc.buy { background: var(--up); } .stk-proc.sell { background: var(--down); }

.stk-section { background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius); padding: 18px; margin-bottom: 18px; box-shadow: var(--shadow); }
.stk-section h2 { margin: 0 0 12px; color: var(--sakura-deep); font-size: 18px; }
.stk-admin-form label { display: block; margin-bottom: 12px; }
.stk-admin-form .stk-check { font-weight: 700; }

.stk-modal { position: fixed; inset: 0; background: rgba(91,74,99,.45); display: flex; align-items: center; justify-content: center; z-index: 1300; padding: 16px; }
.stk-modal[hidden] { display: none; }
.stk-modal-box { position: relative; width: 100%; max-width: 360px; background: var(--surface);
  border: 2px solid var(--border); border-radius: 20px; padding: 24px; box-shadow: var(--shadow-lg); }
.stk-modal-box h3 { margin: 0 30px 6px 0; color: var(--sakura-deep); }
.stk-modal-x { position: absolute; top: 10px; right: 12px; border: 0; background: none; font-size: 22px; cursor: pointer; color: var(--ink-soft); }

.stk-m-price { color: var(--ink-soft); font-size: 14px; margin: 0 0 12px; }
.stk-m-info { color: var(--lavender-deep); font-size: 13px; font-weight: 700; margin: -6px 0 12px; }
.stk-m-info:empty { display: none; }
.stk-m-top { margin: 0 0 14px; padding: 10px 14px; border: 2px dashed var(--sakura); border-radius: 14px;
  background: linear-gradient(120deg, #fff0f7, #f1ecff); color: var(--sakura-deep); font-size: 13px; font-weight: 700; text-align: center; }
.stk-m-top[hidden] { display: none; }
.stk-m-est { background: var(--cream); border: 1.5px dashed var(--border); border-radius: 10px; padding: 8px 12px; margin: 4px 0 14px; }
.stk-m-est strong { color: var(--sakura-deep); }
.stk-m-actions { display: flex; gap: 8px; }
.stk-m-actions .btn { flex: 1; }
.btn-soft { background: var(--cream-2); color: var(--sakura-deep); border: 2px solid var(--border); }
.stk-m-msg { min-height: 18px; margin: 10px 0 0; font-size: 13px; font-weight: 700; }
.stk-m-msg.ok { color: var(--mint); } .stk-m-msg.err { color: var(--danger); }

.stk-detail-box { max-width: 420px; }
.stk-d-pricerow { display: flex; align-items: baseline; gap: 10px; margin: 2px 0 12px; }
.stk-d-price { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
.stk-d-pct { font-size: 14px; font-weight: 700; }
.stk-d-tabs { display: flex; gap: 6px; margin-bottom: 8px; }
.stk-d-tab { border: 1.5px solid var(--border); background: var(--cream-2); color: var(--ink-soft);
  border-radius: 9px; padding: 4px 12px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; }
.stk-d-tab.active { background: var(--sakura); border-color: var(--sakura); color: #fff; }
.stk-d-chart { background: var(--cream); border: 1.5px solid var(--border); border-radius: 12px; padding: 8px; }
.stk-d-chart .spark { width: 100%; height: 140px; }
.stk-d-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; margin: 14px 0; }
.dg-row { display: flex; justify-content: space-between; font-size: 13px; padding: 3px 0; border-bottom: 1px dotted var(--border); }
.dg-k { color: var(--ink-soft); } .dg-v { font-weight: 700; font-variant-numeric: tabular-nums; }
.stk-d-actions { display: flex; gap: 8px; }
.stk-d-actions .btn { flex: 1; }

@media (max-width: 560px) { .hide-sm { display: none; } .stk-d-grid { grid-template-columns: 1fr; } }

.cm-wrap { max-width: 920px; margin: 0 auto; }
.cm-topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cm-status { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: linear-gradient(120deg, var(--cream-2), #f1ecff); border: 2px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 16px; margin: 6px 0 14px; }
.cm-round { font-weight: 800; color: var(--sakura-deep); }
.cm-word { font-weight: 700; color: var(--ink); }
.cm-word.reveal { color: var(--sakura-deep); }
.cm-blank { display: inline-block; width: 16px; height: 3px; background: var(--ink-soft); margin: 0 2px; border-radius: 2px; vertical-align: middle; }
.cm-len { color: var(--ink-soft); font-weight: 400; font-size: 12px; }
.cm-timer { margin-left: auto; font-weight: 800; color: var(--lavender-deep); font-variant-numeric: tabular-nums; }

.cm-main { display: flex; gap: 16px; align-items: flex-start; }
.cm-left { flex: 1 1 600px; min-width: 0; }
.cm-right { flex: 0 0 260px; display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 760px) { .cm-main { flex-direction: column; } .cm-right { flex-basis: auto; width: 100%; } }

.cm-canvas-wrap { position: relative; }
#cm-canvas { width: 100%; aspect-ratio: 3 / 2; height: auto; background: #fff; border: 2px solid var(--border);
  border-radius: 14px; touch-action: none; cursor: crosshair; display: block; box-shadow: var(--shadow); }
.cm-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(255,247,251,.7); border-radius: 14px; font-weight: 800; color: var(--sakura-deep); font-size: 18px; pointer-events: none; }
.cm-overlay[hidden] { display: none; }

.cm-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px;
  background: var(--surface); border: 2px solid var(--border); border-radius: 14px; padding: 8px 12px; }
.cm-colors { display: flex; gap: 4px; }
.cm-sw { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--border); cursor: pointer; padding: 0; }
.cm-sw.on { box-shadow: 0 0 0 2px var(--sakura-deep); transform: scale(1.12); }
.cm-sizes { display: flex; gap: 4px; }
.cm-size { width: 28px; height: 28px; border: 1.5px solid var(--border); border-radius: 8px; background: var(--cream); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.cm-size span { background: var(--ink); border-radius: 50%; display: block; }
.cm-size.on { border-color: var(--sakura); background: var(--cream-2); }

.cm-players-box, .cm-chat-box { background: var(--surface); border: 2px solid var(--border); border-radius: 14px; padding: 12px; box-shadow: var(--shadow); }
.cm-players-box h3 { margin: 0 0 8px; font-size: 14px; color: var(--sakura-deep); }
.cm-players { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cm-players li { display: flex; align-items: center; gap: 6px; font-size: 13px; padding: 4px 8px; border-radius: 8px; background: var(--cream); }
.cm-players li.is-drawer { background: #fff0d6; }
.cm-players li.is-guessed { background: #e3f7ee; }
.cm-pn { flex: 1; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-ps { font-weight: 800; color: var(--sakura-deep); font-variant-numeric: tabular-nums; }

.cm-chat { height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 5px; padding: 4px; background: var(--cream); border-radius: 10px; }
.cm-msg { font-size: 13px; line-height: 1.35; word-break: break-word; }
.cm-msg.cm-system { color: var(--lavender-deep); font-weight: 700; font-size: 12px; }
.cm-msg.cm-correct { color: var(--mint); font-weight: 800; }
.cm-chat-input { display: flex; gap: 6px; margin-top: 8px; }
.cm-chat-input input { flex: 1; padding: 8px 12px; border: 2px solid var(--border); border-radius: 10px; font: inherit; }
.cm-chat-input input:focus { outline: none; border-color: var(--sakura); }
.cm-chat-input .btn { padding: 8px 14px; }

.cm-create { display: flex; gap: 8px; flex-wrap: wrap; }
.cm-create input { flex: 1; min-width: 180px; padding: 9px 13px; border: 2px solid var(--border); border-radius: 10px; font: inherit; }
.cm-create input:focus { outline: none; border-color: var(--sakura); }
.cm-roomlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cm-roomlist a { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 16px; border: 2px solid var(--border); border-radius: 12px; background: var(--cream); text-decoration: none; color: var(--ink); }
.cm-roomlist a:hover { border-color: var(--sakura); }
.cm-rl-name { font-weight: 700; }
.cm-rl-meta { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.cm-rl-state { font-size: 11px; font-weight: 800; padding: 2px 9px; border-radius: 8px; color: #fff; }
.cm-rl-state.cm-waiting { background: var(--ink-soft); } .cm-rl-state.cm-playing { background: var(--mint); }
.cm-rl-cnt { color: var(--ink-soft); }

.tm-wrap { max-width: 640px; margin: 0 auto; }
.tm-game {
  margin-top: 14px; padding: 28px 20px; text-align: center;
  background: var(--surface); border: 2px solid var(--border);
  border-radius: 18px; box-shadow: var(--shadow-lg);
}
.tm-target { font-size: 16px; color: var(--ink-soft); margin-bottom: 6px; }
.tm-target-val { font-weight: 700; color: var(--sakura-deep); font-size: 19px; }
.tm-display {
  font-family: "Jua", monospace; font-size: 64px; line-height: 1.1; color: var(--ink);
  letter-spacing: 1px; margin: 6px 0 18px; font-variant-numeric: tabular-nums;
}
.tm-buttons { display: flex; gap: 12px; justify-content: center; }
.tm-buttons .btn { min-width: 120px; font-size: 17px; padding: 12px 18px; }
.btn.danger { background: linear-gradient(135deg, #f0506e, #f06a9e); }
.btn.danger:disabled, .tm-buttons .btn:disabled { opacity: .45; cursor: default; }
.tm-result {
  margin-top: 18px; padding: 14px; border-radius: 12px;
  background: var(--cream); border: 1px solid var(--border);
}
.tm-r-line { color: var(--ink-soft); font-size: 14px; }
.tm-r-score { margin-top: 6px; font-size: 18px; font-weight: 700; }
.tm-pts { color: var(--sakura-deep); }
.tm-r-msg { margin-top: 4px; font-size: 13px; }
.tm-cap { margin-top: 12px; font-size: 13px; }

.rps-wrap { max-width: 560px; margin: 0 auto; }
.rps-game {
  margin-top: 14px; padding: 24px 20px; text-align: center;
  background: var(--surface); border: 2px solid var(--border);
  border-radius: 18px; box-shadow: var(--shadow-lg);
}
.rps-board { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 8px; }
.rps-side { flex: 1; }
.rps-label { font-size: 14px; color: var(--ink-soft); margin-bottom: 6px; }
.rps-hand {
  font-size: 64px; line-height: 1.2; height: 84px; display: flex;
  align-items: center; justify-content: center;
  background: var(--cream); border: 2px solid var(--border); border-radius: 14px;
}
.rps-hand.shake { animation: rpsShake .25s ease-in-out infinite; }
@keyframes rpsShake { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.rps-vs { font-family: "Jua", sans-serif; font-size: 20px; color: var(--sakura-deep); }
.rps-result {
  margin: 14px 0; padding: 12px; border-radius: 12px; font-weight: 700; font-size: 19px;
}
.rps-result.win  { background: #e7f9ef; color: #1c8a4e; border: 1px solid #b6e7cc; }
.rps-result.lose { background: #fde8ec; color: #c2334e; border: 1px solid #f4c2cd; }
.rps-result.tie  { background: var(--cream); color: var(--ink-soft); border: 1px solid var(--border); }
.rps-r-msg { font-weight: 400; font-size: 13px; margin-top: 4px; }
.rps-choices { display: flex; gap: 12px; justify-content: center; margin-top: 8px; }
.rps-btn {
  flex: 1; max-width: 130px; padding: 14px 8px; cursor: pointer;
  background: var(--surface); border: 2px solid var(--border); border-radius: 14px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font: inherit; font-weight: 700; color: var(--ink);
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.rps-btn:hover:not(:disabled) { transform: translateY(-3px); border-color: var(--sakura); box-shadow: var(--shadow-lg); }
.rps-btn:active:not(:disabled) { transform: scale(.96); }
.rps-btn:disabled { opacity: .5; cursor: default; }
.rps-emo { font-size: 34px; }
.rps-streak { margin-top: 12px; font-family: "Jua", sans-serif; font-size: 17px; color: #e0673a; }
.rps-cap { margin-top: 8px; font-size: 13px; }

.ms-wrap { max-width: 720px; margin: 0 auto; }
.ms-game {
  margin-top: 14px; padding: 18px; text-align: center;
  background: var(--surface); border: 2px solid var(--border);
  border-radius: 18px; box-shadow: var(--shadow-lg);
}
.ms-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.ms-diffs { display: flex; gap: 6px; }
.ms-diff { padding: 7px 12px; border: 2px solid var(--border); border-radius: 10px; background: var(--surface); cursor: pointer; font: inherit; font-weight: 700; color: var(--ink-soft); }
.ms-diff.on { border-color: var(--sakura); color: var(--sakura-deep); background: var(--cream); }
.ms-stat { display: flex; gap: 14px; font-family: "Jua", sans-serif; font-size: 16px; color: var(--ink); }
.ms-board-wrap { overflow-x: auto; }
.ms-board { display: grid; gap: 3px; justify-content: center; margin: 0 auto; touch-action: manipulation; }
.ms-cell {
  width: 30px; height: 30px; padding: 0; cursor: pointer;
  background: linear-gradient(135deg, #efe7ff, #ffe6f2);
  border: 1px solid var(--border); border-radius: 6px;
  font-family: "Jua", sans-serif; font-size: 15px; line-height: 1; color: var(--ink);
  display: flex; align-items: center; justify-content: center; user-select: none;
}
.ms-cell:hover:not(.open) { filter: brightness(1.04); }
.ms-cell.open { background: var(--cream); cursor: default; border-color: #eadff0; }
.ms-cell.flag { background: linear-gradient(135deg, #fff3d6, #ffe0ea); }
.ms-cell.mine { background: #fde8ec; }
.ms-cell.boom { background: #f0506e; }
.ms-n1 { color: #3f7fd0; } .ms-n2 { color: #1c8a4e; } .ms-n3 { color: #f0506e; }
.ms-n4 { color: #5b3fb0; } .ms-n5 { color: #a8431f; } .ms-n6 { color: #2aa3a3; }
.ms-n7 { color: #555; }    .ms-n8 { color: #999; }
.ms-result { margin-top: 14px; padding: 12px; border-radius: 12px; font-weight: 700; font-size: 18px; }
.ms-result.win  { background: #e7f9ef; color: #1c8a4e; border: 1px solid #b6e7cc; }
.ms-result.lose { background: #fde8ec; color: #c2334e; border: 1px solid #f4c2cd; }
.ms-pts { color: var(--sakura-deep); }
.ms-r-msg { font-weight: 400; font-size: 13px; margin-top: 4px; }
.ms-cap { margin-top: 8px; font-size: 13px; }
@media (max-width: 480px) { .ms-cell { width: 26px; height: 26px; font-size: 13px; } }

.stk-news-filter { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.nf-btn { padding: 5px 12px; border: 1.5px solid var(--border); border-radius: 999px; background: var(--surface); cursor: pointer; font: inherit; font-size: 13px; color: var(--ink-soft); }
.nf-btn.on { border-color: var(--sakura); color: var(--sakura-deep); background: var(--cream); font-weight: 700; }
.stk-news li { display: flex; align-items: center; gap: 10px; padding: 11px 6px 11px 8px; border-bottom: 1px dashed var(--border); border-left: 3px solid transparent; }
.stk-news li.nk-up   { border-left-color: var(--up); }
.stk-news li.nk-down { border-left-color: var(--down); }
.stk-news li.nk-info { border-left-color: var(--lavender); }
.stk-news-badge { flex: 0 0 auto; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; color: #fff; }
.nb-up { background: var(--up); } .nb-down { background: var(--down); } .nb-info { background: var(--lavender); }
.stk-news-msg { flex: 1 1 auto; font-size: 14px; color: var(--ink); }
.stk-news li.nk-up .stk-news-msg   { color: var(--up); }
.stk-news li.nk-down .stk-news-msg { color: var(--down); }
.stk-news-time { flex: 0 0 auto; color: var(--ink-soft); font-size: 12px; white-space: nowrap; }
.stk-news li[hidden] { display: none; }

.tm-notice {
  margin: 12px 0 0; padding: 12px 16px;
  border: 2px dashed var(--sakura); border-radius: 14px;
  background: var(--cream); color: var(--sakura-deep);
  font-weight: 700; text-align: center; line-height: 1.5;
}
.tm-notice[hidden] { display: none; }

.rr-wrap { max-width: 560px; margin: 0 auto; }
.rr-notice { margin: 12px 0 0; padding: 12px 16px; border: 2px dashed var(--sakura); border-radius: 14px; background: var(--cream); color: var(--sakura-deep); font-weight: 700; text-align: center; }
.rr-notice[hidden] { display: none; }
.rr-game { margin-top: 14px; padding: 24px 20px; text-align: center; background: var(--surface); border: 2px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-lg); }
.rr-cyl { display: flex; gap: 10px; justify-content: center; margin-bottom: 18px; }
.rr-cyl.shake { animation: rrShake .3s ease; }
@keyframes rrShake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.rr-ch {
  width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 20px; border: 2px solid var(--border); background: var(--cream); color: var(--sakura-deep);
}
.rr-ch.spent { background: #eee; color: #bbb; border-color: #ddd; }
.rr-ch.bullet { background: #f0506e; color: #fff; border-color: #c2334e; }
.rr-info { display: flex; gap: 12px; justify-content: center; margin-bottom: 16px; }
.rr-stat { flex: 1; max-width: 180px; padding: 10px; border-radius: 12px; background: var(--cream); border: 1px solid var(--border); }
.rr-stat span { display: block; font-size: 12px; color: var(--ink-soft); }
.rr-stat b { font-family: "Jua", sans-serif; font-size: 24px; color: var(--sakura-deep); }
.rr-controls { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.rr-controls .btn { min-width: 150px; }
.btn.danger { background: linear-gradient(135deg, #f0506e, #f06a9e); }
.rr-controls .btn:disabled { opacity: .45; cursor: default; }
.rr-result { margin-top: 16px; padding: 12px; border-radius: 12px; font-weight: 700; font-size: 18px; }
.rr-result.win  { background: #e7f9ef; color: #1c8a4e; border: 1px solid #b6e7cc; }
.rr-result.lose { background: #fde8ec; color: #c2334e; border: 1px solid #f4c2cd; }
.rr-pts { color: var(--sakura-deep); }
.rr-r-msg { font-weight: 400; font-size: 13px; margin-top: 4px; }
.rr-cap { margin-top: 10px; font-size: 13px; }

.lt-wrap { max-width: 680px; margin: 0 auto; }
.lt-round { font-size: 15px; color: var(--ink-soft); font-family: "Gowun Dodum", sans-serif; }
.lt-notice { margin: 12px 0 0; padding: 12px 16px; border: 2px dashed var(--sakura); border-radius: 14px; background: var(--cream); color: var(--sakura-deep); font-weight: 700; text-align: center; }
.lt-notice.ok { border-color: #1c8a4e; color: #1c8a4e; background: #e7f9ef; }
.lt-notice[hidden] { display: none; }
.lt-buy, .lt-mine, .lt-last { margin-top: 16px; padding: 18px; background: var(--surface); border: 2px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-lg); }
.lt-mine h2, .lt-last h2 { margin: 0 0 10px; font-size: 17px; color: var(--sakura-deep); }
.lt-draw-info { text-align: center; margin-bottom: 14px; }
.lt-draw-info b { font-family: "Jua", sans-serif; font-size: 22px; color: var(--sakura-deep); margin: 0 6px; }
.lt-grid { display: grid; grid-template-columns: repeat(9, 1fr); gap: 6px; }
.lt-num { aspect-ratio: 1/1; border: 1.5px solid var(--border); border-radius: 50%; background: var(--cream); cursor: pointer; font: inherit; font-weight: 700; color: var(--ink); font-size: 14px; }
.lt-num:hover { border-color: var(--sakura); }
.lt-num.on { background: linear-gradient(135deg, var(--sakura), var(--lavender)); color: #fff; border-color: var(--sakura); }
.lt-pickbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.lt-picked { font-weight: 700; color: var(--ink); margin-right: auto; }
.lt-bal { margin-top: 10px; font-size: 13px; }
.lt-balls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lt-ball { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: "Jua", sans-serif; font-size: 17px; color: #fff; background: linear-gradient(135deg, var(--sakura), var(--lavender)); }
.lt-ball.bonus { background: linear-gradient(135deg, #f0a24b, #f0c14b); }
.lt-plus { font-size: 18px; color: var(--ink-soft); }
.lt-ticket { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; padding: 8px 4px; border-bottom: 1px dashed var(--border); }
.lt-ball.sm { width: 30px; height: 30px; font-size: 14px; background: #e7e2ef; color: var(--ink); }
.lt-ball.sm.hit { background: linear-gradient(135deg, var(--sakura), var(--lavender)); color: #fff; }
.lt-ball.sm.bonus { background: linear-gradient(135deg, #f0a24b, #f0c14b); color: #fff; }
.lt-tier { margin-left: auto; font-weight: 700; font-size: 13px; padding: 3px 10px; border-radius: 999px; }
.lt-tier.t1, .lt-tier.t2, .lt-tier.t3 { background: #e7f9ef; color: #1c8a4e; }
.lt-tier.t4, .lt-tier.t5 { background: #fff3e0; color: #a8431f; }
.lt-tier.miss { background: #f0eef3; color: var(--ink-soft); }

.cm-chat-rich { display: block; }
.cm-chat-rich .note-editor.note-frame { margin-bottom: 8px; border-radius: 10px; }
.cm-chat-rich #cm-send { width: 100%; }
.cm-msg-body { display: inline; }
.cm-msg-body p { display: inline; margin: 0; }
.cm-msg-body img { max-width: 100%; max-height: 140px; border-radius: 6px; vertical-align: middle; }
.cm-msg .role-icon { font-size: 13px; }

.tet-wrap { max-width: 720px; margin: 0 auto; }
.tet-wrap .page-title { margin-bottom: 2px; }
.tet-intro { margin: 0 0 6px; }
.tet-notice { border: 2px dashed var(--sakura); color: var(--sakura-deep); padding: 9px 14px; border-radius: var(--radius-sm); margin-bottom: 10px; font-size: 14px; }
.tet-game {
  background: linear-gradient(160deg, var(--surface), var(--cream));
  border: 2px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px; margin-top: 10px;
}
.tet-stage { display: flex; gap: 18px; justify-content: center; align-items: flex-start; flex-wrap: wrap; }

.tet-board-box {
  background: var(--surface); border: 2px solid var(--border);
  border-radius: 18px; padding: 8px; box-shadow: var(--shadow);
  flex: 0 0 auto;
}
.tet-board {
  background: var(--cream); border-radius: 12px; touch-action: none;
  outline: none; display: block; margin: 0 auto;
}

.tet-side { display: flex; flex-direction: column; gap: 12px; width: 168px; flex: 0 0 auto; }
.tet-panels { display: flex; gap: 10px; }
.tet-panel { flex: 1; background: var(--surface); border: 2px solid var(--border); border-radius: 16px; padding: 8px 6px; text-align: center; box-shadow: var(--shadow); }
.tet-panel-label { display: block; font-family: "Jua", sans-serif; font-size: 12px; color: var(--lavender-deep); margin-bottom: 4px; }
.tet-mini { display: block; margin: 0 auto; }

.tet-stats { display: flex; flex-direction: column; gap: 7px; }
.tet-stat { display: flex; justify-content: space-between; align-items: baseline; background: var(--surface); border: 2px solid var(--border); border-radius: 12px; padding: 7px 13px; }
.tet-stat-k { font-size: 12px; color: var(--ink-soft); }
.tet-stat b { font-family: "Jua", sans-serif; font-size: 19px; color: var(--ink); }
.tet-stat.tet-reward { background: var(--cream-2); border-color: var(--sakura); }
.tet-stat.tet-reward b { color: var(--sakura-deep); }

.tet-toolbar { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.tet-toolbar .btn,
.tet-toolbar .btn-mini { width: 100%; }
.tet-toolbar .btn { padding: 11px 0; }
.tet-toolbar .btn-mini { padding: 9px 0; font-size: 14px; }

.tet-controls-help { font-size: 12px; line-height: 1.85; text-align: center; }
.tet-help-key {
  display: inline-block; background: var(--cream-2); border: 1px solid var(--border);
  border-radius: 7px; padding: 0 6px; font-size: 11px; color: var(--lavender-deep); font-weight: 700;
}
.tet-help-touch { display: none; margin-top: 4px; }

.tet-result { margin: 14px auto 0; max-width: 420px; text-align: center; background: var(--cream-2); border: 2px solid var(--sakura); border-radius: 16px; padding: 14px; box-shadow: var(--shadow); }
.tet-r-line { font-size: 15px; color: var(--ink); margin-bottom: 6px; }
.tet-r-score { font-family: "Jua", sans-serif; font-size: 19px; color: var(--ink); }
.tet-pts { color: var(--sakura-deep); }
.tet-r-msg { margin-top: 6px; font-size: 13px; }
.tet-cap { text-align: center; margin-top: 10px; margin-bottom: 0; }

@media (hover: none) and (pointer: coarse) {
  .tet-help-key { display: none; }
  .tet-controls-help br { display: none; }
  .tet-help-touch { display: block; }
}

@media (max-width: 560px) {
  .tet-game { padding: 12px; }
  .tet-stage { gap: 12px; }
  .tet-side { width: 100%; max-width: 320px; }
  .tet-intro { font-size: 13px; }
}

.rh-wrap { max-width: 600px; margin: 0 auto; }
.rh-wrap .page-title { margin-bottom: 2px; }
.rh-intro { margin: 0 0 4px; }
.rh-privnote { font-size: 12px; margin: 0 0 8px; }
.rh-notice { border: 2px dashed var(--sakura); color: var(--sakura-deep); padding: 9px 14px; border-radius: var(--radius-sm); margin-bottom: 10px; font-size: 14px; }
.rh-game {
  background: linear-gradient(160deg, var(--surface), var(--cream));
  border: 2px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px; margin-top: 10px;
}

.rh-drop {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  border: 2px dashed var(--sakura); border-radius: 18px;
  padding: 30px 18px; text-align: center; cursor: pointer;
  background: var(--surface); transition: background .15s, border-color .15s, transform .1s;
}
.rh-drop:hover, .rh-drop.over { background: var(--cream-2); border-color: var(--sakura-deep); transform: translateY(-1px); }
.rh-drop.busy { opacity: .55; pointer-events: none; }
.rh-drop-ico { font-size: 40px; }
.rh-drop-main { font-family: "Jua", sans-serif; font-size: 16px; color: var(--ink); }
.rh-drop-sub { font-size: 13px; }
.rh-analyzing { margin-top: 12px; text-align: center; }
.rh-bar { height: 12px; background: var(--cream-2); border: 2px solid var(--border); border-radius: 999px; overflow: hidden; }
.rh-bar-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--sakura), var(--lavender)); border-radius: 999px; transition: width .2s; }
.rh-analyzing-t { display: inline-block; margin-top: 6px; font-size: 13px; color: var(--ink-soft); font-family: "Jua", sans-serif; }

.rh-hud { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.rh-song { font-family: "Jua", sans-serif; font-size: 14px; color: var(--lavender-deep); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rh-hud-stats { display: flex; gap: 8px; flex: 0 0 auto; }
.rh-stat { background: var(--surface); border: 2px solid var(--border); border-radius: 12px; padding: 5px 12px; text-align: center; }
.rh-stat-k { display: block; font-size: 11px; color: var(--ink-soft); }
.rh-stat b { font-family: "Jua", sans-serif; font-size: 17px; color: var(--ink); }

.rh-stage { position: relative; width: -moz-fit-content; width: fit-content; max-width: 100%; margin: 0 auto; }
.rh-board {
  display: block; width: auto; max-width: 100%; height: auto;
  border: 2px solid var(--border); border-radius: 16px; outline: none;
  touch-action: manipulation; box-shadow: var(--shadow); background: var(--cream);
}
.rh-combo {
  position: absolute; top: 24%; left: 0; right: 0; text-align: center;
  pointer-events: none; color: var(--sakura-deep);
}
.rh-combo b { display: block; font-family: "Jua", sans-serif; font-size: 44px; line-height: 1; }
.rh-combo span { font-family: "Jua", sans-serif; font-size: 13px; letter-spacing: 2px; color: var(--lavender-deep); }
.rh-combo.pop { animation: rhpop .26s ease; }
@keyframes rhpop { 0% { transform: scale(1.35); } 60% { transform: scale(.95); } 100% { transform: scale(1); } }
.rh-judge { display: none; }

.rh-lanes-touch { position: absolute; left: 0; right: 0; bottom: 0; height: 40%; display: none; }
.rh-lane-k { position: absolute; top: 0; bottom: 0; width: 25%; border: none; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.rh-lane-k:active { background: rgba(157,134,224,.12); }
.rh-lane-k[data-lane="0"] { left: 0; }
.rh-lane-k[data-lane="1"] { left: 25%; }
.rh-lane-k[data-lane="2"] { left: 50%; }
.rh-lane-k[data-lane="3"] { left: 75%; }

.rh-toolbar { display: flex; gap: 10px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
.rh-help { font-size: 12px; line-height: 1.8; text-align: center; margin-top: 8px; }
.rh-help-key { display: inline-block; background: var(--cream-2); border: 1px solid var(--border); border-radius: 7px; padding: 0 7px; font-size: 11px; color: var(--lavender-deep); font-weight: 700; }
.rh-help-touch { display: none; }

.rh-result { margin: 14px auto 0; max-width: 420px; text-align: center; background: var(--cream-2); border: 2px solid var(--sakura); border-radius: 16px; padding: 16px; box-shadow: var(--shadow); }
.rh-r-grade { font-family: "Jua", sans-serif; font-size: 21px; color: var(--sakura-deep); margin-bottom: 8px; }
.rh-r-line { font-size: 14px; color: var(--ink); margin-bottom: 4px; }
.rh-r-line b { color: var(--lavender-deep); }
.rh-r-pts { font-family: "Jua", sans-serif; font-size: 20px; color: var(--sakura-deep); margin-top: 8px; }
.rh-r-msg { margin-top: 6px; font-size: 13px; }
.rh-cap { text-align: center; margin-top: 10px; margin-bottom: 0; }

@media (hover: none) and (pointer: coarse) {
  .rh-help-key { display: none; }
  .rh-help-touch { display: block; }
  .rh-lanes-touch { display: block; }
}
@media (max-width: 560px) {
  .rh-game { padding: 12px; }
  .rh-hud { flex-direction: column; align-items: stretch; gap: 8px; }
  .rh-song { text-align: center; }
  .rh-hud-stats { justify-content: center; }
}

.rh-options { display: flex; flex-wrap: wrap; gap: 14px 20px; justify-content: center; align-items: center;
  background: var(--surface); border: 2px solid var(--border); border-radius: 16px; padding: 12px 14px; margin-bottom: 12px; }
.rh-opt { display: flex; align-items: center; gap: 8px; }
.rh-opt-label { font-family: "Jua", sans-serif; font-size: 13px; color: var(--lavender-deep); }
.rh-seg { display: inline-flex; background: var(--cream-2); border: 2px solid var(--border); border-radius: 999px; padding: 3px; gap: 2px; }
.rh-seg button { font: inherit; font-size: 13px; font-weight: 700; color: var(--ink-soft);
  background: transparent; border: none; border-radius: 999px; padding: 5px 13px; cursor: pointer; transition: background .15s, color .15s; }
.rh-seg button:hover { color: var(--sakura-deep); }
.rh-seg button.on { background: linear-gradient(135deg, var(--sakura), var(--sakura-deep)); color: #fff; box-shadow: 0 2px 7px rgba(240,106,158,.34); }
@media (max-width: 560px) {
  .rh-options { gap: 10px 14px; padding: 10px; }
  .rh-opt { flex: 1 1 100%; justify-content: space-between; }
}

.ev-widget { margin: -8px 0 15px; }
.ev-widget .ev-send { width: 100%; }
.ev-send.ev-done { background: var(--cream-2); border-color: var(--mint); color: #3aa890; cursor: default; }
.ev-code-row { display: flex; gap: 8px; margin-top: 8px; align-items: stretch; }
.ev-code-row .ev-code {
  flex: 1; min-width: 0; padding: 10px 14px; border: 2px solid var(--border);
  border-radius: 12px; font-size: 16px; font-family: inherit; letter-spacing: 4px; text-align: center;
}
.ev-code-row .ev-code:focus { outline: none; border-color: var(--sakura); }
.ev-code-row .ev-check { flex: 0 0 auto; white-space: nowrap; }
.ev-status { font-size: 12px; margin: 6px 0 0; line-height: 1.5; min-height: 1em; }
.ev-status.ev-ok  { color: #3aa890; }
.ev-status.ev-err { color: var(--danger); }

.rh-h2 { font-size: 18px; color: var(--lavender-deep); margin: 18px 0 10px; }
.rh-room-create { background: linear-gradient(160deg, var(--surface), var(--cream)); border: 2px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; margin-top: 10px; }
.rh-create-grid { display: flex; flex-direction: column; gap: 12px; }
.rh-create-row { font-size: 14px; font-weight: 700; }
.rh-create-row input { display: block; width: 100%; margin-top: 6px; padding: 10px 14px; border: 2px solid var(--border); border-radius: 12px; font-family: inherit; font-size: 14px; }
.rh-create-opts { display: flex; gap: 12px; flex-wrap: wrap; }
.rh-create-opts label { font-size: 13px; font-weight: 700; margin: 0; }
.rh-create-opts select { display: block; margin-top: 4px; padding: 8px 12px; border: 2px solid var(--border); border-radius: 12px; font-family: inherit; background: var(--surface); }
.rh-create-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rh-create-foot .btn { margin-left: auto; }
.rh-create-foot .rh-bar { flex: 1; min-width: 120px; }
.rh-create-status { font-size: 13px; font-family: "Jua", sans-serif; color: var(--lavender-deep); }

.rh-roomlist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.rh-roomlist a { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--surface); border: 2px solid var(--border); border-radius: 14px; padding: 12px 16px; box-shadow: var(--shadow); color: var(--ink); }
.rh-roomlist a:hover { border-color: var(--sakura); }
.rh-rl-name { font-family: "Jua", sans-serif; font-size: 16px; }
.rh-rl-song { font-size: 12px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rh-rl-meta { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.rh-rl-state { font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 999px; }
.rh-rl-state.rh-waiting { background: var(--cream-2); color: var(--lavender-deep); }
.rh-rl-state.rh-countdown, .rh-rl-state.rh-playing { background: var(--sakura); color: #fff; }
.rh-rl-state.rh-ended { background: #f0eef5; color: var(--ink-soft); }
.rh-rl-cnt, .rh-rl-lanes { font-size: 13px; color: var(--ink-soft); }
.rh-refresh { font-weight: 700; margin-left: 6px; vertical-align: middle; }
.rh-privnote { font-size: 12px; margin: 10px 0 0; }

.rh-room-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rh-room-song { margin: 2px 0 8px; }
.rh-room-main { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; justify-content: center; }
.rh-room-stage { position: relative; }
.rh-room-side { flex: 1; min-width: 220px; max-width: 320px; display: flex; flex-direction: column; gap: 12px; }
.rh-scoreboard { background: var(--surface); border: 2px solid var(--border); border-radius: 16px; padding: 12px 14px; box-shadow: var(--shadow); }
.rh-sb-title { font-family: "Jua", sans-serif; font-size: 15px; color: var(--lavender-deep); margin: 0 0 8px; }
.rh-sb-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.rh-sb-item { display: flex; align-items: center; gap: 8px; background: var(--cream-2); border-radius: 10px; padding: 7px 10px; font-size: 13px; }
.rh-sb-item.rh-sb-me { background: #fff0f6; border: 1px solid var(--sakura); }
.rh-sb-rank { font-family: "Jua", sans-serif; color: var(--sakura-deep); width: 16px; text-align: center; }
.rh-sb-nick { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rh-sb-acc { font-family: "Jua", sans-serif; color: var(--sakura-deep); }
.rh-sb-combo { color: var(--ink-soft); font-size: 11px; }
.rh-sb-wait { font-size: 12px; }

.rh-vs { position: absolute; top: 8px; right: 8px; z-index: 4;
  display: flex; flex-direction: column; gap: 4px;
  background: rgba(255, 247, 251, .84); border: 1.5px solid var(--border);
  border-radius: 12px; padding: 7px 9px; box-shadow: var(--shadow);
  max-width: 172px; pointer-events: none; }
.rh-vs[hidden] { display: none; }
.rh-vs-h { font-family: "Jua", sans-serif; font-size: 11px; color: var(--lavender-deep); letter-spacing: 1px; margin-bottom: 1px; }
.rh-vs-row { display: flex; align-items: baseline; gap: 8px; font-size: 12px; white-space: nowrap; }
.rh-vs-nick { max-width: 62px; overflow: hidden; text-overflow: ellipsis; color: var(--ink); font-weight: 700; }
.rh-vs-combo { color: var(--ink-soft); font-size: 11px; }
.rh-vs-combo b { font-family: "Jua", sans-serif; color: var(--sakura-deep); font-size: 14px; }
.rh-vs-acc { margin-left: auto; font-family: "Jua", sans-serif; color: var(--lavender-deep); font-size: 12px; }
@media (max-width: 560px) {
  .rh-vs { top: 6px; right: 6px; max-width: 150px; padding: 6px 8px; }
  .rh-vs-nick { max-width: 52px; }
}
.rh-room-ctrls { text-align: center; }
.rh-room-ctrls .btn { width: 100%; }
.rh-room-state { margin: 8px 0 0; font-family: "Jua", sans-serif; }

.rh-countdown {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: "Jua", sans-serif; font-size: 96px; color: var(--sakura-deep);
  text-shadow: 0 4px 16px rgba(255,255,255,.8); pointer-events: none;
}
.rh-countdown[hidden] { display: none; }
@media (max-width: 640px) {
  .rh-room-main { flex-direction: column; align-items: center; }
  .rh-room-side { max-width: 360px; width: 100%; }
}
.rh-r-pts-i { color: var(--sakura-deep); font-family: "Jua", sans-serif; }
.rh-sb-list { max-height: 360px; overflow-y: auto; }
.rh-result { max-height: 62vh; overflow-y: auto; }

.mj-wrap { max-width: 880px; margin: 0 auto; }
.mj-intro { line-height: 1.65; }
.mj-intro b { color: var(--sakura-deep); }

.mj-game {
  margin-top: 16px; padding: 20px;
  background: var(--surface); border: 2px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
}

.mj-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }

.mj-diffs { display: inline-flex; gap: 4px; padding: 4px; background: var(--cream-2); border: 1px solid var(--border); border-radius: 999px; }
.mj-diff {
  border: none; background: transparent; color: var(--ink-soft);
  font-family: "Jua", sans-serif; font-size: 15px; padding: 7px 17px;
  border-radius: 999px; cursor: pointer; transition: color .15s, background .15s, box-shadow .15s;
}
.mj-diff:hover:not(.on) { color: var(--sakura-deep); }
.mj-diff.on {
  background: linear-gradient(135deg, var(--sakura), var(--sakura-deep)); color: #fff;
  box-shadow: 0 3px 10px rgba(240, 106, 158, .34);
}

.mj-stat { display: flex; gap: 8px; }
.mj-stat span {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: "Jua", sans-serif; font-size: 15px; color: var(--sakura-deep);
  background: var(--cream); border: 1px solid var(--border); border-radius: 999px; padding: 6px 14px;
}

.mj-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.btn-sec {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 18px; border-radius: 999px; border: 2px solid var(--border);
  background: var(--surface); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer;
  box-shadow: var(--shadow); transition: transform .12s, box-shadow .12s, background .15s, border-color .15s, color .15s;
}
.btn-sec:hover:not(:disabled) { background: var(--cream-2); border-color: var(--sakura); color: var(--sakura-deep); transform: translateY(-2px); }
.btn-sec:disabled { opacity: .5; cursor: default; box-shadow: none; }

.mj-shuffle { border-color: #e3d8fb; color: var(--lavender-deep); }
.mj-shuffle:hover:not(:disabled) { background: #f2ecff; border-color: var(--lavender); color: var(--lavender-deep); }

.mj-board-wrap {
  position: relative; overflow: hidden; padding: 16px; min-height: 120px;
  border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: radial-gradient(120% 100% at 50% 0%, #fff6fb 0%, var(--cream-2) 100%);
  box-shadow: inset 0 2px 12px rgba(240, 106, 158, .08);
}
.mj-board { position: relative; margin: 0 auto; }
.mj-loading { padding: 40px 12px; text-align: center; color: var(--ink-soft); font-family: "Jua", sans-serif; }

.mj-tile { transition: transform .12s ease, box-shadow .12s ease, opacity .25s ease; }
.mj-tile.shake { animation: mj-shake .32s; }
@keyframes mj-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.mj-result { margin-top: 16px; padding: 16px; border-radius: var(--radius-sm); font-family: "Jua", sans-serif; font-weight: 700; font-size: 18px; text-align: center; }
.mj-result.win  { background: linear-gradient(135deg, #e9fbf3, #d8f7ec); color: #1c8a6e; border: 1px solid #b6e7d6; }
.mj-result.lose { background: #fff0f3; color: var(--sakura-deep); border: 1px solid #ffd0db; }
.mj-cap { margin-top: 10px; font-size: 13px; text-align: center; }

.mj-deadlock {
  margin-top: 14px; padding: 13px 16px; border-radius: var(--radius-sm); text-align: center;
  font-weight: 700; font-size: 15px; line-height: 1.6;
  background: linear-gradient(135deg, #fff7e6, #fff0d6); color: #a9762a; border: 1px solid #ffe3ad;
}
.mj-deadlock b { color: var(--sakura-deep); }

@media (max-width: 560px) {
  .mj-game { padding: 16px; }
  .mj-toolbar { gap: 8px; }
  .mj-stat span { font-size: 14px; padding: 5px 11px; }
  .mj-diff { padding: 6px 13px; font-size: 14px; }
  .btn-sec { padding: 9px 14px; }
}

.td-wrap, .td-room { max-width: 1000px; margin: 0 auto; }
.td-h2 { font-family: "Jua", sans-serif; font-size: 19px; color: var(--ink); margin: 22px 0 12px; display: flex; align-items: center; gap: 10px; }
.td-notice { margin: 12px 0; padding: 12px 16px; border-radius: var(--radius-sm); background: var(--cream-2); border: 1px solid var(--border); color: var(--ink); font-weight: 700; text-align: center; }
.td-notice.bad { background: #fff0f3; color: var(--sakura-deep); border-color: #ffd0db; }

.td-create { margin-top: 14px; padding: 20px; background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.td-create-grid { display: flex; flex-direction: column; gap: 14px; }
.td-create-row { display: flex; flex-direction: column; gap: 6px; font-weight: 700; color: var(--ink); }
.td-create-row input, .td-create-row select, #tr-map {
  font: inherit; padding: 10px 13px; border-radius: var(--radius-sm); border: 2px solid var(--border);
  background: var(--cream); color: var(--ink);
}
.td-create-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

.td-roomlist { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.td-roomlist a {
  display: flex; flex-direction: column; gap: 6px; padding: 16px; text-decoration: none;
  background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow); transition: transform .12s, box-shadow .12s, border-color .12s;
}
.td-roomlist a:hover { transform: translateY(-2px); border-color: var(--sakura); box-shadow: var(--shadow-lg); }
.td-rl-name { font-family: "Jua", sans-serif; font-size: 17px; color: var(--ink); }
.td-rl-map { font-size: 13px; }
.td-rl-meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.td-rl-state { font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: var(--cream-2); color: var(--ink-soft); }
.td-rl-state.td-playing { background: #e9fbf3; color: #1c8a6e; }
.td-rl-state.td-waiting { background: #fff6e6; color: #a9762a; }
.td-rl-state.td-cleared { background: #eef0ff; color: var(--lavender-deep); }
.td-rl-cnt { font-size: 13px; color: var(--ink-soft); }

.td-room-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.td-room-title { font-size: 24px; margin: 0; }
.td-map-name { font-size: 14px; }

.td-hud { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.td-hud-item {
  display: inline-flex; align-items: center; gap: 5px; font-family: "Jua", sans-serif; font-size: 16px;
  padding: 7px 15px; border-radius: 999px; background: var(--cream); border: 1px solid var(--border); color: var(--ink);
}
.td-hud .td-gold b { color: #c79a2a; } .td-hud .td-lives b { color: var(--sakura-deep); } .td-hud .td-wave b { color: var(--lavender-deep); }
.td-status.on { background: #e9fbf3; color: #1c8a6e; border-color: #b6e7d6; }
.td-status.win { background: #e9fbf3; color: #1c8a6e; }
.td-status.lose { background: #fff0f3; color: var(--sakura-deep); }

.td-stage { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.td-canvas-wrap { position: relative; flex: 1 1 560px; min-width: 280px; }
#td-canvas {
  width: 100%; height: auto; display: block; border-radius: var(--radius-sm);
  border: 2px solid var(--border); box-shadow: var(--shadow-lg); background: var(--cream); cursor: crosshair;
}
.td-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center; border-radius: var(--radius-sm); pointer-events: none;
  background: rgba(255, 247, 251, .82); color: var(--ink); font-family: "Jua", sans-serif;
}
.td-overlay[hidden] { display: none; }
.td-ov-num { font-size: 72px; color: var(--sakura-deep); line-height: 1; }
.td-ov-title { font-size: 34px; }
.td-ov-sub { font-size: 16px; color: var(--ink-soft); }
.td-overlay.win .td-ov-title { color: #1c8a6e; }
.td-overlay.lose .td-ov-title { color: var(--sakura-deep); }
.td-overlay.win { background: rgba(230, 250, 242, .85); }
.td-overlay.lose { background: rgba(255, 240, 243, .85); }

.td-side { flex: 0 0 240px; display: flex; flex-direction: column; gap: 14px; }
.td-side-h { font-family: "Jua", sans-serif; font-size: 15px; color: var(--ink); margin: 0 0 8px; }
.td-palette, .td-players-box, .td-controls { background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius-sm); padding: 14px; box-shadow: var(--shadow); }
.td-tower-btn {
  width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; margin-bottom: 8px;
  padding: 9px 11px; border-radius: var(--radius-sm); border: 2px solid var(--border); background: var(--cream);
  cursor: pointer; font: inherit; transition: transform .1s, border-color .12s, box-shadow .12s, background .12s;
}
.td-tower-btn:hover:not(:disabled) { border-color: var(--sakura); transform: translateY(-1px); }
.td-tower-btn.on { border-color: var(--sakura-deep); background: var(--cream-2); box-shadow: 0 0 0 3px rgba(240, 106, 158, .25); }
.td-tower-btn:disabled { opacity: .5; cursor: default; }
.td-tb-icon { font-size: 22px; }
.td-tb-info { display: flex; flex-direction: column; }
.td-tb-name { font-weight: 800; color: var(--ink); }
.td-tb-cost { font-size: 12px; color: var(--ink-soft); }
.td-sell-btn { border-style: dashed; }
.td-hint { font-size: 12px; margin: 6px 0 0; line-height: 1.5; }

.td-players { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.td-player { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: var(--radius-sm); background: var(--cream); font-weight: 700; color: var(--ink); }
.td-player.me { background: var(--cream-2); border: 1px solid var(--border); }
.td-player-built { margin-left: auto; font-size: 12px; color: var(--ink-soft); font-weight: 700; }
.td-player-award { font-size: 12px; color: var(--sakura-deep); font-weight: 800; }

.td-controls { text-align: center; }
.td-start { width: 100%; }
.td-wait { margin: 8px 0 0; font-size: 13px; }

@media (max-width: 760px) {
  .td-side { flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; }
  .td-palette, .td-players-box, .td-controls { flex: 1 1 220px; }
}

.bb-wrap { max-width: 720px; margin: 0 auto; }
.bb-intro { line-height: 1.7; }
.bb-intro .bb-s { color: var(--sakura-deep); }
.bb-intro .bb-b { color: var(--lavender-deep); }

.bb-game { margin-top: 16px; padding: 20px; background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); }

.bb-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: space-between; margin-bottom: 16px; }
.bb-diffs { display: inline-flex; background: var(--cream); border: 2px solid var(--border); border-radius: 999px; padding: 4px; gap: 2px; }
.bb-diff { font: inherit; font-weight: 700; color: var(--ink-soft); padding: 7px 16px; border: none; background: transparent; border-radius: 999px; cursor: pointer; transition: background .12s, color .12s; }
.bb-diff.on { background: linear-gradient(135deg, var(--sakura), var(--sakura-deep)); color: #fff; box-shadow: var(--shadow); }
.bb-stat { display: flex; gap: 8px; }
.bb-stat span { font-family: "Jua", sans-serif; font-size: 14px; color: var(--ink); background: var(--cream); border: 1px solid var(--border); border-radius: 999px; padding: 6px 13px; }

.bb-board { background: linear-gradient(160deg, var(--cream) 0%, var(--cream-2) 100%); border: 2px solid var(--border); border-radius: var(--radius); padding: 18px; }
.bb-prompt { text-align: center; color: var(--ink-soft); font-family: "Jua", sans-serif; padding: 28px 10px; }

.bb-play { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.bb-slots { display: flex; gap: 10px; }
.bb-slot {
  width: 54px; height: 64px; display: flex; align-items: center; justify-content: center;
  font-family: "Jua", sans-serif; font-size: 34px; color: var(--ink);
  background: var(--surface); border: 2px dashed var(--border); border-radius: var(--radius-sm);
}
.bb-slot.filled { border-style: solid; border-color: var(--sakura); box-shadow: 0 0 0 3px rgba(255,158,196,.2); }

.bb-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; max-width: 280px; }
.bb-key {
  font-family: "Jua", sans-serif; font-size: 22px; color: var(--ink); padding: 14px 0;
  background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius-sm); cursor: pointer;
  transition: transform .06s, background .1s, border-color .1s; user-select: none; touch-action: manipulation;
}
.bb-key:hover:not(:disabled) { border-color: var(--sakura); }
.bb-key:active:not(:disabled) { transform: scale(.94); background: var(--cream-2); }
.bb-key:disabled { opacity: .35; cursor: default; }
.bb-key-back { color: var(--sakura-deep); }
.bb-key-ok { background: linear-gradient(135deg, var(--sakura), var(--sakura-deep)); color: #fff; border-color: transparent; }
.bb-key-ok:disabled { background: var(--cream); color: var(--ink-soft); }

.bb-history { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-direction: column; gap: 6px; }
.bb-hist-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.bb-hist-row.win { background: #eafaf3; border-color: #bce9d8; }
.bb-h-no { width: 22px; text-align: center; font-family: "Jua", sans-serif; color: var(--ink-soft); font-size: 13px; }
.bb-h-digits { display: flex; gap: 6px; }
.bb-h-digit { width: 30px; height: 34px; display: flex; align-items: center; justify-content: center; font-family: "Jua", sans-serif; font-size: 19px; color: var(--ink); background: var(--cream); border-radius: 8px; }
.bb-h-verdict { margin-left: auto; display: flex; gap: 5px; }
.bb-badge { font-family: "Jua", sans-serif; font-size: 13px; font-weight: 800; padding: 3px 10px; border-radius: 999px; }
.bb-strike { background: #ffe3ec; color: var(--sakura-deep); }
.bb-ball { background: #ece6ff; color: var(--lavender-deep); }
.bb-out { background: var(--cream-2); color: var(--ink-soft); }

.bb-result { margin-top: 16px; padding: 14px 16px; border-radius: var(--radius-sm); text-align: center; font-family: "Jua", sans-serif; font-size: 17px; }
.bb-result.win { background: #eafaf3; border: 2px solid #bce9d8; color: #1c8a6e; }
.bb-result.lose { background: #fff0f3; border: 2px solid #ffd0db; color: var(--sakura-deep); }
.bb-award { color: var(--sakura-deep); font-weight: 800; }
.bb-cap { margin: 14px 0 0; text-align: center; font-size: 13px; }

.qw-wrap, .qw-room { max-width: 1000px; margin: 0 auto; }
.qw-h2 { font-family: "Jua", sans-serif; font-size: 19px; color: var(--ink); margin: 22px 0 12px; display: flex; align-items: center; gap: 10px; }
.qw-notice { margin: 12px 0; padding: 12px 16px; border-radius: var(--radius-sm); background: var(--cream-2); border: 1px solid var(--border); color: var(--ink); font-weight: 700; text-align: center; }
.qw-notice.bad { background: #fff0f3; color: var(--sakura-deep); border-color: #ffd0db; }

.qw-create { margin-top: 14px; padding: 20px; background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.qw-create-grid { display: flex; flex-direction: column; gap: 14px; }
.qw-create-row { display: flex; flex-direction: column; gap: 6px; font-weight: 700; color: var(--ink); }
.qw-create-row input, .qw-create-row select {
  font: inherit; padding: 10px 13px; border-radius: var(--radius-sm); border: 2px solid var(--border);
  background: var(--cream); color: var(--ink);
}
.qw-create-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

.qw-roomlist { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.qw-roomlist a {
  display: flex; flex-direction: column; gap: 6px; padding: 16px; text-decoration: none;
  background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow); transition: transform .12s, box-shadow .12s, border-color .12s;
}
.qw-roomlist a:hover { transform: translateY(-2px); border-color: var(--sakura); box-shadow: var(--shadow-lg); }
.qw-rl-name { font-family: "Jua", sans-serif; font-size: 17px; color: var(--ink); }
.qw-rl-map { font-size: 13px; }
.qw-rl-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.qw-rl-state { font-size: 12px; font-weight: 800; padding: 2px 9px; border-radius: 999px; background: var(--cream-2); color: var(--ink-soft); }
.qw-rl-state.qw-waiting { background: #eef7ff; color: #5b86c7; }
.qw-rl-state.qw-countdown { background: #fff3e0; color: #d98a2b; }
.qw-rl-state.qw-racing { background: #eafaf3; color: #1c8a6e; }
.qw-rl-state.qw-finished { background: #f3eefc; color: var(--lavender-deep); }
.qw-rl-cnt { font-weight: 800; color: var(--sakura-deep); font-size: 13px; }
.qw-refresh { margin-left: auto; }

.qw-room-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; }
.qw-room-title { margin: 0; }
.qw-map-name { font-size: 14px; }

.qw-tracks { display: flex; flex-direction: column; gap: 12px; margin: 14px 0 18px; }
.qw-track { padding: 12px 14px; border-radius: var(--radius); border: 2px solid var(--border); background: var(--surface); box-shadow: var(--shadow); transition: border-color .15s, box-shadow .15s; }
.qw-track-host { border-color: #ffd0e2; background: linear-gradient(180deg, #fff6fb, var(--surface)); }
.qw-track-guest { border-color: #dcd3f6; background: linear-gradient(180deg, #f7f4ff, var(--surface)); }
.qw-track.me { box-shadow: 0 0 0 3px rgba(127,216,196,.35), var(--shadow); }
.qw-track.win { border-color: #bce9d8; }
.qw-track.lose, .qw-track.fallen { border-color: #ffc6d3; }
.qw-track-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.qw-track-name { font-family: "Jua", sans-serif; font-size: 17px; color: var(--ink); }
.qw-track-tag { font-size: 12px; font-weight: 800; padding: 2px 9px; border-radius: 999px; }
.qw-host-tag { background: #ffe1ee; color: var(--sakura-deep); }
.qw-guest-tag { background: #e7e0fb; color: var(--lavender-deep); }
.qw-track-stat { margin-left: auto; font-size: 13px; font-weight: 800; color: var(--ink-soft); }
.qw-track-stat.run { color: #1c8a6e; }
.qw-track-stat.win { color: #1c8a6e; }
.qw-track-stat.lose { color: var(--sakura-deep); }
.qw-track-stat.draw { color: var(--lavender-deep); }

.qw-rail { position: relative; height: 30px; border-radius: 999px; background: var(--cream-2); border: 1px solid var(--border); overflow: visible; }
.qw-rail-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; border-radius: 999px; background: linear-gradient(90deg, #ffd9ec, #ff9ec4); transition: width .22s linear; }
.qw-track-guest .qw-rail-fill { background: linear-gradient(90deg, #e0d6fb, #9d86e0); }
.qw-runner { position: absolute; top: 50%; left: 0%; transform: translate(-50%, -50%); font-size: 20px; transition: left .22s linear; z-index: 2; }
.qw-goal { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); font-size: 16px; opacity: .85; }
.qw-rail-dist { position: absolute; top: 50%; right: 30px; transform: translateY(-50%); font-size: 12px; font-weight: 800; color: var(--ink); z-index: 3; }

.qw-stage { display: grid; grid-template-columns: 1fr 250px; gap: 16px; align-items: start; }
.qw-canvas-wrap { position: relative; border-radius: var(--radius); overflow: hidden; border: 2px solid var(--border); box-shadow: var(--shadow-lg); background: #fff3f8; }
#qw-canvas { display: block; width: 100%; height: auto; }
.qw-overlay { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; flex-direction: column; gap: 6px; background: rgba(255,247,251,.82); text-align: center; }
.qw-overlay.show { display: flex; }
.qw-ov-num { font-family: "Jua", sans-serif; font-size: 72px; color: var(--sakura-deep); line-height: 1; text-shadow: 0 3px 0 rgba(255,158,196,.4); }
.qw-ov-title { font-family: "Jua", sans-serif; font-size: 32px; color: var(--ink); }
.qw-ov-sub { font-size: 15px; color: var(--ink-soft); font-weight: 700; }
.qw-overlay.win .qw-ov-title { color: #1c8a6e; }
.qw-overlay.lose .qw-ov-title { color: var(--sakura-deep); }
.qw-overlay.draw .qw-ov-title { color: var(--lavender-deep); }

.qw-controls { display: flex; flex-direction: column; gap: 14px; }
.qw-side-h { font-family: "Jua", sans-serif; font-size: 15px; color: var(--ink); margin: 0 0 8px; }
.qw-players-box, .qw-keys, .qw-startbox { padding: 14px; border-radius: var(--radius); border: 2px solid var(--border); background: var(--surface); box-shadow: var(--shadow); }
.qw-players { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.qw-player { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: var(--radius-sm); background: var(--cream-2); font-weight: 700; color: var(--ink); font-size: 14px; }
.qw-player.me { background: #e7f8f1; border: 1px solid #bce9d8; }
.qw-p-res { margin-left: auto; font-size: 12px; font-weight: 800; }
.qw-p-res.win { color: #1c8a6e; }
.qw-p-res.lose { color: var(--sakura-deep); }
.qw-p-res.draw { color: var(--lavender-deep); }
.qw-p-award { color: var(--sakura-deep); font-weight: 800; font-size: 12px; margin-left: 6px; }
.qw-start { width: 100%; }
.qw-wait { margin: 8px 0 0; text-align: center; font-size: 13px; }

.qw-keygrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.qw-key { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: var(--radius-sm); border: 2px solid var(--border); background: var(--cream); color: var(--ink); cursor: pointer; user-select: none; transition: transform .08s, background .08s, border-color .08s; }
.qw-key b { font-family: "Jua", sans-serif; font-size: 20px; color: var(--sakura-deep); }
.qw-key span { font-size: 11px; color: var(--ink-soft); }
.qw-key:hover { border-color: var(--sakura); }
.qw-key.on { background: var(--mint); border-color: var(--mint); transform: translateY(1px) scale(.97); }
.qw-key.on b { color: #1c6e58; }
.qw-hint { margin: 10px 0 0; font-size: 12px; }

@media (max-width: 820px) {
  .qw-stage { grid-template-columns: 1fr; }
  .qw-key { padding: 14px 6px; }
  .qw-key b { font-size: 24px; }
}

.dd-wrap, .dd-room { max-width: 1000px; margin: 0 auto; }
.dd-h2 { font-family: "Jua", sans-serif; font-size: 19px; color: var(--ink); margin: 22px 0 12px; display: flex; align-items: center; gap: 10px; }
.dd-notice { margin: 12px 0; padding: 12px 16px; border-radius: var(--radius-sm); background: var(--cream-2); border: 1px solid var(--border); color: var(--ink); font-weight: 700; text-align: center; }
.dd-notice.bad { background: #fff0f3; color: var(--sakura-deep); border-color: #ffd0db; }

.dd-create { margin-top: 14px; padding: 20px; background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.dd-create-grid { display: flex; flex-direction: column; gap: 14px; }
.dd-create-row { display: flex; flex-direction: column; gap: 6px; font-weight: 700; color: var(--ink); }
.dd-create-row input, .dd-create-row select {
  font: inherit; padding: 10px 13px; border-radius: var(--radius-sm); border: 2px solid var(--border);
  background: var(--cream); color: var(--ink);
}
.dd-create-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.dd-roomlist { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.dd-roomlist a { display: flex; flex-direction: column; gap: 8px; padding: 16px; text-decoration: none;
  background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow); transition: transform .12s, box-shadow .12s, border-color .12s; }
.dd-roomlist a:hover { transform: translateY(-2px); border-color: var(--sakura); box-shadow: var(--shadow-lg); }
.dd-rl-name { font-family: "Jua", sans-serif; font-size: 17px; color: var(--ink); }
.dd-rl-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dd-rl-state { font-size: 12px; font-weight: 800; padding: 2px 9px; border-radius: 999px; background: var(--cream-2); color: var(--ink-soft); }
.dd-rl-state.dd-waiting { background: #eef7ff; color: #5b86c7; }
.dd-rl-state.dd-countdown { background: #fff3e0; color: #d98a2b; }
.dd-rl-state.dd-playing { background: #eafaf3; color: #1c8a6e; }
.dd-rl-state.dd-finished { background: #f3eefc; color: var(--lavender-deep); }
.dd-rl-cnt { font-weight: 800; color: var(--sakura-deep); font-size: 13px; }
.dd-refresh { margin-left: auto; }

.dd-room-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; }
.dd-room-title { margin: 0; }
.dd-seat-info { font-size: 14px; }

.dd-table-wrap { margin: 14px 0; }
.dd-table { position: relative; background: linear-gradient(160deg, #fef0f7, #f3eafc); border: 2px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 18px; display: flex; flex-direction: column; gap: 16px; min-height: 360px; }

.dd-opponents { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.dd-opp { background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius); padding: 12px; box-shadow: var(--shadow);
  transition: border-color .15s, box-shadow .15s, transform .15s; min-height: 120px; }
.dd-opp.turn { border-color: var(--lavender); box-shadow: 0 0 0 3px rgba(157,134,224,.28), var(--shadow); }
.dd-opp.target { border-color: var(--sakura-deep); box-shadow: 0 0 0 4px rgba(240,106,158,.35), var(--shadow-lg); transform: translateY(-3px); }
.dd-opp.thief { border-color: #f0506e; background: #fff0f3; }
.dd-opp.safe { border-color: #bce9d8; background: #f0fbf6; }
.dd-opp.empty { opacity: .55; border-style: dashed; }
.dd-opp-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 8px; }
.dd-opp-name { font-family: "Jua", sans-serif; font-size: 15px; color: var(--ink); }
.dd-opp-stat { font-size: 12px; font-weight: 800; color: var(--ink-soft); white-space: nowrap; }
.dd-opp-stat.good { color: #1c8a6e; }
.dd-opp-stat.bad { color: var(--sakura-deep); }
.dd-opp-stat.turn { color: var(--lavender-deep); }

.dd-pile { display: flex; align-items: center; min-height: 56px; padding-left: 4px; }
.dd-pile.pickable { flex-wrap: wrap; gap: 0; }
.dd-pile-cnt { font-size: 12px; font-weight: 800; color: var(--ink-soft); margin-top: 4px; }
.dd-pick-hint { font-size: 12px; font-weight: 800; color: var(--sakura-deep); margin-top: 6px; animation: ddpulse 1s infinite; }
@keyframes ddpulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } }
.dd-empty-hand { font-size: 12px; color: var(--ink-soft); }

.dd-card { width: 40px; height: 56px; border-radius: 7px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: "Jua", sans-serif; flex: 0 0 auto; box-shadow: 0 2px 5px rgba(120,80,110,.18); }
.dd-card.back { background: linear-gradient(135deg, #ffd9ec, #c9b6f0); border: 2px solid #fff; color: #fff; font-size: 18px; }
.dd-card.face { background: #fff; border: 2px solid var(--border); color: #3a3340; }
.dd-card.face.red { color: #e23b6d; }
.dd-card.face .dd-c-r { font-size: 16px; line-height: 1; }
.dd-card.face .dd-c-s { font-size: 16px; line-height: 1; }
.dd-card.face.joker { background: linear-gradient(135deg, #fff3bf, #ffd6e8); border-color: #f0a; color: #c2334e; }
.dd-card.face.joker .dd-c-r { font-size: 20px; }
.dd-card.face.joker .dd-c-joker { font-size: 10px; font-weight: 800; }
.dd-card.pick { cursor: pointer; transition: transform .1s, box-shadow .1s; }
.dd-pile.pickable .dd-card.pick:hover { transform: translateY(-8px); box-shadow: 0 8px 16px rgba(240,106,158,.4); z-index: 5; }
.dd-card.pick.disabled { pointer-events: none; opacity: .6; }

.dd-center { position: relative; display: flex; align-items: center; justify-content: center; min-height: 60px; }
.dd-turn-banner { font-family: "Jua", sans-serif; font-size: 16px; color: var(--ink); background: var(--surface);
  border: 2px solid var(--border); border-radius: 999px; padding: 8px 18px; box-shadow: var(--shadow); text-align: center; }
.dd-turn-banner.you { background: #fdeef5; border-color: var(--sakura-deep); color: var(--sakura-deep); animation: ddpulse 1.2s infinite; }
.dd-overlay { position: absolute; inset: -18px; display: none; align-items: center; justify-content: center; flex-direction: column; gap: 8px;
  background: rgba(255,247,251,.9); border-radius: var(--radius); text-align: center; z-index: 10; }
.dd-overlay.show { display: flex; }
.dd-ov-num { font-family: "Jua", sans-serif; font-size: 72px; color: var(--sakura-deep); line-height: 1; text-shadow: 0 3px 0 rgba(255,158,196,.4); }
.dd-ov-title { font-family: "Jua", sans-serif; font-size: 30px; color: var(--ink); }
.dd-ov-sub { font-size: 15px; color: var(--ink-soft); font-weight: 700; }
.dd-overlay.win .dd-ov-title { color: #1c8a6e; }
.dd-overlay.lose .dd-ov-title { color: var(--sakura-deep); }

.dd-me { background: var(--surface); border: 2px solid var(--lavender); border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow); }
.dd-me-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.dd-me-name { font-family: "Jua", sans-serif; font-size: 17px; color: var(--ink); }
.dd-me-badge { font-size: 13px; font-weight: 800; color: var(--lavender-deep); }
.dd-me-badge.good { color: #1c8a6e; }
.dd-me-badge.bad { color: var(--sakura-deep); }
.dd-hand { display: flex; flex-wrap: wrap; gap: 6px; min-height: 56px; align-items: center; }
.dd-hand .dd-card { width: 46px; height: 64px; }
.dd-hand .dd-card.face .dd-c-r { font-size: 18px; }
.dd-hand .dd-card.face .dd-c-s { font-size: 18px; }
.dd-hand-empty { font-family: "Jua", sans-serif; font-size: 18px; color: #1c8a6e; padding: 10px; }

.dd-controls { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 8px 0; text-align: center; }
.dd-start { min-width: 200px; }
.dd-wait { margin: 0; font-size: 14px; }
.dd-help { margin: 4px 0 0; font-size: 13px; max-width: 640px; }
.dd-log { list-style: none; margin: 12px auto 0; padding: 0; max-width: 560px; display: flex; flex-direction: column; gap: 5px; }
.dd-log-li { font-size: 13px; color: var(--ink-soft); background: var(--cream-2); border-radius: var(--radius-sm); padding: 6px 12px; }
.dd-log-li.pair { background: #eafaf3; color: #1c8a6e; }
.dd-log-pair { font-weight: 800; }
.dd-log-take { opacity: .8; }

@media (max-width: 640px) {
  .dd-opponents { grid-template-columns: repeat(2, 1fr); }
  .dd-card { width: 34px; height: 48px; }
  .dd-hand .dd-card { width: 40px; height: 56px; }
}

.dd-table { padding: 22px; gap: 18px;
  background: radial-gradient(130% 100% at 50% -10%, #fdeef7 0%, #f6ecfc 55%, #efe6fb 100%);
  border-color: #ffd9ea; }
.dd-opponents { gap: 14px; }

.dd-opp { min-height: 128px; display: flex; flex-direction: column; gap: 10px; padding: 14px 14px 12px; }
.dd-opp-head { align-items: center; gap: 10px; margin-bottom: 0; }
.dd-av { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 19px; background: var(--cream-2); border: 2px solid var(--border); box-shadow: var(--shadow); }
.dd-av.bot { background: #efe7fb; border-color: #ddd0f6; }
.dd-av.me { background: #e7f8f1; border-color: #bce9d8; }
.dd-av.empty { background: transparent; border-style: dashed; border-color: #eccbdf; }
.dd-opp-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.dd-opp-name { font-size: 15px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-opp-stat { margin-left: 0; font-size: 12px; }
.dd-opp.empty { opacity: 1; border-style: dashed; border-color: #f1d7e7; background: linear-gradient(180deg, #fffafd, #fdf4fb); }
.dd-opp.empty .dd-opp-name { color: var(--ink-soft); font-family: "Gowun Dodum", sans-serif; }

.dd-pile { min-height: 56px; align-items: center; }
.dd-card.ghost { background: repeating-linear-gradient(45deg, #fbeaf3, #fbeaf3 6px, #f6e0ee 6px, #f6e0ee 12px);
  border: 2px dashed #eccbe0; box-shadow: none; }
.dd-pile.ghosts { opacity: .85; }
.dd-empty-hand { font-size: 12px; color: #1c8a6e; font-weight: 700; }

.dd-center { min-height: 122px; }
.dd-overlay { gap: 8px; border-radius: var(--radius); }
.dd-overlay.show.wait { background: linear-gradient(180deg, rgba(255,250,253,.94), rgba(250,244,252,.94)); }
.dd-ov-tiny { font-size: 12px; color: var(--ink-soft); font-weight: 600; }
.dd-ov-actions { margin-top: 12px; }
.dd-ov-actions .btn { min-width: 180px; box-shadow: 0 6px 16px rgba(240,106,158,.38); }

.dd-hand-wait { display: inline-flex; align-items: center; }
.dd-hand-wait .dd-card.ghost { width: 42px; height: 58px; }
.dd-hand-wait-t { margin-left: 14px; color: var(--ink-soft); font-weight: 700; font-size: 14px; }

@media (max-width: 640px) {
  .dd-opp { min-height: 112px; }
  .dd-av { width: 32px; height: 32px; font-size: 16px; }
  .dd-ov-actions .btn { min-width: 150px; }
}

.dd-av { box-sizing: border-box; width: 38px; height: 38px; min-width: 38px; min-height: 38px;
  flex: 0 0 38px; align-self: center; aspect-ratio: 1 / 1; line-height: 1; padding: 0; overflow: hidden; }
.dd-av.empty { opacity: .5; }

.dd-table { gap: 22px; }
.dd-center { min-height: 72px; padding: 4px 0; }
.dd-overlay { inset: 0; }

.dd-overlay.show.wait, .dd-overlay.show.win, .dd-overlay.show.lose, .dd-overlay.show.draw {
  position: relative; inset: auto; background: transparent; padding: 8px 0; }
.dd-ov-panel { background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 18px 30px 20px; max-width: 380px;
  display: flex; flex-direction: column; align-items: center; gap: 6px; }
.dd-overlay.win .dd-ov-panel { border-color: #bce9d8; }
.dd-overlay.lose .dd-ov-panel { border-color: #ffc6d3; }
.dd-ov-panel .dd-ov-title { margin: 0; }
.dd-ov-panel .dd-ov-actions { margin-top: 14px; }

@media (max-width: 640px) {
  .dd-ov-panel { padding: 16px 18px; max-width: 92%; }
}

.stk-admin-stat { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; }
.stk-stat-pill {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--cream-2); border: 2px solid var(--border); border-radius: 999px;
  padding: 5px 12px; font-size: 13px; color: var(--ink);
}
.stk-stat-pill b { color: var(--sakura-deep); }
.stk-stat-pill.on  { background: #e9f9ee; border-color: #bfe9cc; }
.stk-stat-pill.off { background: #ffe9ee; border-color: #ffc9d4; }

.att-top { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.att-card {
  background: var(--surface); border: 2px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px;
}
.att-h { margin: 0 0 10px; font-size: 16px; color: var(--sakura-deep); }

.att-combo { text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: linear-gradient(160deg, #fff 0%, var(--cream-2) 100%); }
.att-flame { font-size: 42px; line-height: 1; }
.att-combo-num { font-family: 'Jua', sans-serif; font-size: 40px; color: var(--sakura-deep); line-height: 1; }
.att-combo-num span { font-size: 16px; color: var(--ink); margin-left: 4px; }
.att-combo-sub { color: var(--ink-soft); font-size: 14px; }
.att-combo-sub b { color: var(--lavender-deep); }
.att-done { margin-top: 6px; font-weight: 700; color: var(--mint); background: #e9f9f3; border: 2px solid #bfe9dd; border-radius: 999px; padding: 6px 16px; }
.att-warn { color: var(--danger); font-size: 13px; margin: 4px 0 0; }
.att-checkin-form { margin-top: 8px; }
.att-checkin-btn { font-size: 16px; padding: 11px 20px; }
.att-preview { margin-top: 8px; font-size: 13px; color: var(--ink-soft); }
.att-preview b { color: var(--sakura-deep); }

.att-bonus { width: 100%; border-collapse: collapse; font-size: 14px; }
.att-bonus th, .att-bonus td { padding: 7px 8px; text-align: center; border-bottom: 1px dashed var(--border); }
.att-bonus thead th { color: var(--ink-soft); font-size: 12px; border-bottom: 2px solid var(--border); }
.att-bonus td b { color: var(--sakura-deep); }
.att-row-now { background: var(--cream-2); }
.att-row-now td:first-child { border-radius: 8px 0 0 8px; font-weight: 700; color: var(--sakura-deep); }

.att-cal-card { margin-bottom: 14px; }
.att-cal-head { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 12px; }
.att-cal-title { font-family: 'Jua', sans-serif; font-size: 20px; color: var(--ink); }
.att-nav { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 2px solid var(--border); color: var(--sakura-deep); font-size: 20px; text-decoration: none; }
.att-nav:hover { background: var(--cream-2); border-color: var(--sakura); }
.att-nav-off { opacity: .3; cursor: default; }
.att-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.att-wd { text-align: center; font-size: 12px; color: var(--ink-soft); padding: 2px 0 4px; }
.att-wd.sun, .att-cell.sun .att-d { color: #ff7a93; }
.att-wd.sat, .att-cell.sat .att-d { color: #6a9be0; }
.att-cell { position: relative; min-width: 0; min-height: 0; overflow: hidden; aspect-ratio: 1 / 1; border: 2px solid var(--border); border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #fff; }
.att-cell.att-empty { border: none; background: transparent; }
.att-d { font-size: 13px; color: var(--ink); }
.att-mark { font-size: 16px; line-height: 1; height: 18px; }
.att-on { background: var(--cream-2); border-color: var(--sakura); }
.att-on .att-d { color: var(--sakura-deep); font-weight: 700; }
.att-today { border-color: var(--lavender); box-shadow: 0 0 0 2px rgba(157,134,224,.25); }
.att-future { opacity: .45; }
.att-legend { margin-top: 10px; text-align: center; }

.att-king-list { list-style: none; margin: 0; padding: 0; }
.att-king-list li { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px dashed var(--border); }
.att-king-list li:last-child { border-bottom: none; }
.att-king-rank { width: 26px; text-align: center; font-weight: 700; color: var(--ink-soft); }
.att-king-name { flex: 1; }
.att-king-days { color: var(--sakura-deep); font-weight: 700; }

@media (max-width: 560px) {
  .att-top { grid-template-columns: 1fr; }
  .att-grid { gap: 4px; }
  .att-cell { border-radius: 9px; }
  .att-mark { font-size: 14px; }
}

.chat-admin-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.chat-older-form { display: inline-flex; align-items: center; gap: 8px; }
.chat-older-label { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-size: 14px; }
.chat-older-label input { width: 72px; }

.auth-alert {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 2px dashed var(--danger); border-radius: 16px;
  background: #fff0f3; color: var(--danger);
  padding: 12px 16px; margin: 0 0 18px;
  font-size: 14px; font-weight: 700; text-align: center; line-height: 1.4;
}
.auth-alert::before { content: "⚠️"; font-size: 16px; }

.stk-news-pg { margin-top: 14px; }
.stk-news-pg:empty { display: none; margin: 0; }

.chat-fab { display: none !important; }
.chat-dock {
  position: fixed; top: 0; right: 0; bottom: 0; height: 100%;
  z-index: 2100; width: 32vw; max-width: 100vw;
  background: var(--surface);
  border-left: 2px solid var(--border);
  box-shadow: -8px 0 24px rgba(160, 120, 170, .22);
  display: flex; flex-direction: column; overflow: hidden;
}
.chat-dock-resize {
  position: absolute; left: 0; top: 0; bottom: 0; width: 9px; z-index: 2;
  cursor: ew-resize; touch-action: none;
  background: linear-gradient(90deg, var(--border), transparent);
}
.chat-dock-resize::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 4px; height: 46px; border-radius: 4px;
  background: var(--ink-soft); opacity: .45;
}
.chat-dock-head {
  flex: 0 0 auto; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 16px 8px 20px; color: #fff; user-select: none;
  background: linear-gradient(135deg, var(--sakura), var(--lavender));
}
.chat-dock-title { font-weight: 700; }
.chat-dock-toggle {
  background: none; border: 0; color: #fff;
  font-size: 18px; line-height: 1; cursor: pointer; padding: 0 6px;
}
.chat-dock .chat-win-body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding-left: 6px; }
.chat-dock.collapsed {
  top: auto; bottom: 24px; right: 24px; left: auto;
  height: auto !important; width: auto !important;
  border: 0; border-radius: 999px;
  box-shadow: 0 8px 24px rgba(160, 120, 170, .45), 0 0 0 rgba(240,106,158,.4);
  animation: chat-fab-pulse 2.6s ease-in-out infinite;
}
.chat-dock.collapsed:hover { animation-play-state: paused; box-shadow: 0 10px 28px rgba(160, 120, 170, .55); }
@keyframes chat-fab-pulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(160, 120, 170, .45), 0 0 0 0 rgba(240, 106, 158, .35); }
  50% { box-shadow: 0 8px 24px rgba(160, 120, 170, .45), 0 0 0 10px rgba(240, 106, 158, 0); }
}
.chat-dock.collapsed .chat-dock-head { padding: 16px; gap: 0; justify-content: center; border-radius: 999px; }
.chat-dock.collapsed .chat-dock-title-text { display: none; }
.chat-dock.collapsed .chat-dock-toggle { display: none; }
.chat-dock.collapsed .chat-dock-title { font-size: 22px; line-height: 1; }
.chat-dock.collapsed .chat-dock-toggle { font-size: 13px; padding: 0 2px; }
.chat-dock.collapsed .chat-dock-resize,
.chat-dock.collapsed .chat-win-body { display: none; }
body.chat-dock-resizing { cursor: ew-resize; user-select: none; }
body.chat-dock-resizing .note-editable { pointer-events: none; }
@media (max-width: 480px) { .chat-dock { width: 86vw; } }

.ap-pager { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin: 12px 0 2px; }
.ap-pg { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 8px; border: 1.5px solid var(--border); border-radius: 8px; color: var(--ink); text-decoration: none; font-size: 13px; background: #fff; }
.ap-pg:hover { border-color: var(--sakura); background: var(--cream-2); }
.ap-pg-cur { background: linear-gradient(135deg, var(--sakura), var(--lavender)); color: #fff; border-color: transparent; font-weight: 700; }
.ap-pg-off { opacity: .4; cursor: default; }
.ap-pg-dots { padding: 0 4px; color: var(--ink-soft); align-self: center; }

.file-pick-field { display: block; }
.file-pick { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.file-pick-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.file-pick-btn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--border); background: linear-gradient(135deg, #fff, var(--cream-2)); color: var(--sakura-deep); font-weight: 700; font-size: 14px; line-height: 1; transition: border-color .15s ease, transform .1s ease, box-shadow .15s ease; }
.file-pick-field:hover .file-pick-btn { border-color: var(--sakura); box-shadow: 0 2px 8px rgba(231, 150, 184, .25); }
.file-pick-field:active .file-pick-btn { transform: scale(.97); }
.file-pick-input:focus + .file-pick-btn { outline: 2px solid var(--lavender); outline-offset: 2px; }
.file-pick-name { color: var(--ink-soft); font-size: 13px; word-break: break-all; }

html[data-theme="dark"] {
  color-scheme: dark;
  --cream: #1a1520;
  --cream-2: #221a29;
  --surface: #2a2233;
  --border: #4a3a58;
  --ink: #f1e6f5;
  --ink-soft: #b6a5c4;
  --sakura: #ff9ec4;
  --sakura-deep: #ff86b5;
  --lavender: #b39cf0;
  --lavender-deep: #a58ae8;
  --mint: #7fe0cb;
  --star: #ffe08a;
  --danger: #ff8fa3;
  --shadow: 0 4px 18px rgba(0, 0, 0, .45);
  --shadow-lg: 0 10px 34px rgba(0, 0, 0, .55);
}
html[data-theme="dark"] body {
  background:
    radial-gradient(1100px 420px at 80% -120px, #2a1f30 0%, rgba(42,31,48,0) 70%),
    radial-gradient(900px 380px at 0% 0%, #1e2233 0%, rgba(30,34,51,0) 70%),
    var(--cream);
}
html[data-theme="dark"] .site-header { background: rgba(20, 16, 24, .82); }
html[data-theme="dark"] .site-footer { background: rgba(20, 16, 24, .7); }
html[data-theme="dark"] img:not([src*="mascot"]):not(.no-dim) { filter: brightness(.92); }

html[data-theme="dark"] .checkin-done-i { background: #144334 !important; }
html[data-theme="dark"] .auth-errors { background: #431421 !important; }
html[data-theme="dark"] .btn-mini.danger, html[data-theme="dark"] .btn.danger { background: #43141d !important; }
html[data-theme="dark"] .btn-mini.danger:hover { background: #43141e !important; }
html[data-theme="dark"] .hero-bubble { background: var(--surface) !important; }
html[data-theme="dark"] .locked-box { background: #43142b !important; color: #e2b6cd !important; }
html[data-theme="dark"] .badge-ban { background: #43141d !important; }
html[data-theme="dark"] .checkin-done { background: #144334 !important; color: #afe9de !important; }
html[data-theme="dark"] .rank-me { background: #43142a !important; }
html[data-theme="dark"] .post-body blockquote { background: #43142b !important; }
html[data-theme="dark"] .post-body pre, html[data-theme="dark"] .post-body code { background: #291443 !important; }
html[data-theme="dark"] .bf input { background: var(--surface) !important; }
html[data-theme="dark"] .nav-dd[open] > summary { background: var(--surface) !important; }
html[data-theme="dark"] .points-form select { background: var(--surface) !important; }
html[data-theme="dark"] .bf select { background: var(--surface) !important; }
html[data-theme="dark"] .menu-group-pop { background: var(--surface) !important; }
html[data-theme="dark"] .group-card { background: var(--surface) !important; }
html[data-theme="dark"] .del-tag { background: #432914 !important; color: #ecbfac !important; }
html[data-theme="dark"] .deleted-comment { background: #251443 !important; }
html[data-theme="dark"] .comment-locked { background: #2a1c22 !important; border-color: var(--border); }
html[data-theme="dark"] .badge-sub { background: #201443 !important; color: #c5acec !important; }
html[data-theme="dark"] .badge-admin { background: #431426 !important; color: #ecacc6 !important; }
html[data-theme="dark"] .lv-bar { background: #271640 !important; }
html[data-theme="dark"] .captcha-q { background: #43142b !important; }
html[data-theme="dark"] .wc-wait { background: #43142b !important; }
html[data-theme="dark"] .wc-chip { background: var(--surface) !important; }
html[data-theme="dark"] .board-card-admin { background: #211443 !important; }
html[data-theme="dark"] .board-add { background: #431430 !important; }
html[data-theme="dark"] .group-card { background: #211443 !important; }
html[data-theme="dark"] .points-form label { background: #211443 !important; }
html[data-theme="dark"] .notice-row { background: #43142b !important; }
html[data-theme="dark"] .notice-check { background: #43142b !important; }
html[data-theme="dark"] .poll-opt-del { background: var(--surface) !important; }
html[data-theme="dark"] .post-poll-opt { background: var(--surface) !important; }
html[data-theme="dark"] .msg-row.msg-unread { background: #43142b !important; }
html[data-theme="dark"] .msg-view-meta { background: #211443 !important; }
html[data-theme="dark"] .post-cat { background: #431429 !important; }
html[data-theme="dark"] .postcat-chip { background: #43142a !important; }
html[data-theme="dark"] .chat-body { background: var(--surface) !important; }
html[data-theme="dark"] .chat-input { background: var(--surface) !important; }
html[data-theme="dark"] .uedit-row > td { background: #43142b !important; }
html[data-theme="dark"] .perm-count { background: #251443 !important; color: #c5acec !important; }
html[data-theme="dark"] .actions-cell .btn-mini.sp-btn { background: #201443 !important; color: #c5acec !important; }
html[data-theme="dark"] .uperm-row > td { background: #231443 !important; }
html[data-theme="dark"] .sp-item { background: var(--surface) !important; }
html[data-theme="dark"] .sp-item:hover { background: #231443 !important; }
html[data-theme="dark"] .blk-kind.k-ip { background: #142543 !important; color: #acc1ec !important; }
html[data-theme="dark"] .blk-kind.k-user { background: #43142d !important; color: #e9afd1 !important; }
html[data-theme="dark"] .blk-perm { background: #43141e !important; color: #ecacc2 !important; }
html[data-theme="dark"] .msg-compose .msg-to-box::after { background: #2f1443 !important; }
html[data-theme="dark"] .msg-compose .msg-to-box input { background: var(--surface) !important; }
html[data-theme="dark"] .cm-players li.is-drawer { background: #433214 !important; }
html[data-theme="dark"] .cm-players li.is-guessed { background: #14432e !important; }
html[data-theme="dark"] .rps-result.win { background: #144329 !important; color: #acecc9 !important; }
html[data-theme="dark"] .rps-result.lose { background: #43141d !important; color: #ebadb8 !important; }
html[data-theme="dark"] .ms-cell.mine { background: #43141d !important; }
html[data-theme="dark"] .ms-result.win { background: #144329 !important; color: #acecc9 !important; }
html[data-theme="dark"] .ms-result.lose { background: #43141d !important; color: #ebadb8 !important; }
html[data-theme="dark"] .rr-ch.spent { background: var(--surface) !important; color: #d4c4c4 !important; }
html[data-theme="dark"] .rr-result.win { background: #144329 !important; color: #acecc9 !important; }
html[data-theme="dark"] .rr-result.lose { background: #43141d !important; color: #ebadb8 !important; }
html[data-theme="dark"] .lt-notice.ok { background: #144329 !important; color: #acecc9 !important; }
html[data-theme="dark"] .lt-ball.sm { background: #281c3b !important; }
html[data-theme="dark"] .lt-tier.t1, html[data-theme="dark"] .lt-tier.t2, html[data-theme="dark"] .lt-tier.t3 { background: #144329 !important; color: #acecc9 !important; }
html[data-theme="dark"] .lt-tier.t4, html[data-theme="dark"] .lt-tier.t5 { background: #433114 !important; color: #ecbdac !important; }
html[data-theme="dark"] .lt-tier.miss { background: #292037 !important; }
html[data-theme="dark"] .rh-rl-state.rh-ended { background: #251d3a !important; }
html[data-theme="dark"] .rh-sb-item.rh-sb-me { background: #431427 !important; }
html[data-theme="dark"] .mj-shuffle:hover:not(:disabled) { background: #231443 !important; }
html[data-theme="dark"] .mj-result.lose { background: #43141d !important; }
html[data-theme="dark"] .td-notice.bad { background: #43141d !important; }
html[data-theme="dark"] .td-rl-state.td-playing { background: #14432e !important; color: #acecdc !important; }
html[data-theme="dark"] .td-rl-state.td-waiting { background: #433214 !important; color: #ecd2ac !important; }
html[data-theme="dark"] .td-rl-state.td-cleared { background: #141943 !important; }
html[data-theme="dark"] .td-status.on { background: #14432e !important; color: #acecdc !important; }
html[data-theme="dark"] .td-status.win { background: #14432e !important; color: #acecdc !important; }
html[data-theme="dark"] .td-status.lose { background: #43141d !important; }
html[data-theme="dark"] .bb-hist-row.win { background: #14432e !important; }
html[data-theme="dark"] .bb-strike { background: #431423 !important; }
html[data-theme="dark"] .bb-ball { background: #1f1443 !important; }
html[data-theme="dark"] .bb-result.win { background: #14432e !important; color: #acecdc !important; }
html[data-theme="dark"] .bb-result.lose { background: #43141d !important; }
html[data-theme="dark"] .qw-notice.bad { background: #43141d !important; }
html[data-theme="dark"] .qw-rl-state.qw-waiting { background: #142d43 !important; color: #b0c6e8 !important; }
html[data-theme="dark"] .qw-rl-state.qw-countdown { background: #433114 !important; color: #eccfac !important; }
html[data-theme="dark"] .qw-rl-state.qw-racing { background: #14432e !important; color: #acecdc !important; }
html[data-theme="dark"] .qw-rl-state.qw-finished { background: #251443 !important; }
html[data-theme="dark"] .qw-host-tag { background: #431428 !important; }
html[data-theme="dark"] .qw-guest-tag { background: #201443 !important; }
html[data-theme="dark"] .qw-canvas-wrap { background: #431427 !important; }
html[data-theme="dark"] .qw-player.me { background: #144330 !important; }
html[data-theme="dark"] .dd-notice.bad { background: #43141d !important; }
html[data-theme="dark"] .dd-rl-state.dd-waiting { background: #142d43 !important; color: #b0c6e8 !important; }
html[data-theme="dark"] .dd-rl-state.dd-countdown { background: #433114 !important; color: #eccfac !important; }
html[data-theme="dark"] .dd-rl-state.dd-playing { background: #14432e !important; color: #acecdc !important; }
html[data-theme="dark"] .dd-rl-state.dd-finished { background: #251443 !important; }
html[data-theme="dark"] .dd-opp.thief { background: #43141d !important; }
html[data-theme="dark"] .dd-opp.safe { background: #14432d !important; }
html[data-theme="dark"] .dd-card.face { background: var(--surface) !important; color: #cdc0d8 !important; }
html[data-theme="dark"] .dd-turn-banner.you { background: #43142a !important; }
html[data-theme="dark"] .dd-log-li.pair { background: #14432e !important; color: #acecdc !important; }
html[data-theme="dark"] .dd-av.bot { background: #271443 !important; }
html[data-theme="dark"] .dd-av.me { background: #144330 !important; }
html[data-theme="dark"] .stk-stat-pill.on { background: #144322 !important; }
html[data-theme="dark"] .stk-stat-pill.off { background: #43141e !important; }
html[data-theme="dark"] .att-done { background: #144331 !important; }
html[data-theme="dark"] .att-cell { background: var(--surface) !important; }
html[data-theme="dark"] .auth-alert { background: #43141d !important; }
html[data-theme="dark"] .ap-pg { background: var(--surface) !important; }