/* Mein CHECKSUM24 + misc pages */

.ac-head { padding: 36px 0 24px; }
.ac-layout { display: grid; grid-template-columns: 266px minmax(0, 1fr); gap: 32px; align-items: start; }
.ac-nav { display: flex; flex-direction: column; padding: 8px 0; position: sticky; top: 16px; }
.ac-nav a, .ac-logout { display: flex; align-items: center; gap: 12px; padding: 11px 16px; color: var(--text); font-size: 15px; border: 0; background: none; text-align: left; }
.ac-nav a:hover, .ac-logout:hover { background: #f5f7fb; text-decoration: none; }
.ac-nav a.active { color: var(--action); font-weight: 600; background: #f2f6fc; }
.ac-logout { border-top: 1px solid #eee; margin-top: 6px; color: var(--muted); }
.ac-h2 { font-size: 21px; font-weight: 600; margin: 28px 0 12px; }
.ac-main > .ac-h2:first-child { margin-top: 0; }
.ac-h3 { font-size: 17px; font-weight: 600; margin: 18px 0 8px; }
.ac-count { font-weight: 400; font-size: 16px; }
.ac-small { font-size: 13px; }
.ac-gap { margin-top: 16px; }
.ac-gap-s { margin-top: 8px; }
.ac-pad { padding: 20px 24px; }
.ac-main .label { display: block; font-size: 14px; color: var(--muted); margin-bottom: 6px; }

.ac-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ac-tile { display: flex; flex-direction: column; gap: 4px; padding: 18px; color: var(--text); text-decoration: none !important; }
.ac-tile:hover { border-color: var(--action); }
.ac-tile .icon { color: var(--blue); margin-bottom: 6px; }
.ac-tile b { font-size: 28px; font-weight: 600; line-height: 1.1; }
.ac-tile span { font-size: 14px; color: var(--muted); }
.ac-tile.warn .icon { color: var(--red); }

.ac-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 36px 24px; }
.ac-empty .icon { color: #9aa8c4; }
.ac-empty .btn { margin-top: 8px; font-size: 16px; }

.ac-orders { display: flex; flex-direction: column; gap: 14px; }
.ac-order { padding: 16px 20px; }
.ac-order-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.ac-algo { font-size: 19px; font-weight: 800; font-style: italic; color: var(--blue); margin-right: 4px; }
.ac-order .pill { height: 24px; font-size: 13px; }
.ac-file { display: flex; align-items: center; gap: 6px; margin: 8px 0; font-size: 15px; word-break: break-all; }
.ac-order-actions { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-top: 10px; }
.ac-order-actions .btn { font-size: 14px; }
.ac-pts { margin-left: auto; }

.ac-salty { padding: 20px 24px; }
.ac-salty-top { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; }
.ac-salty h2 { font-size: 24px; font-weight: 600; margin-bottom: 8px; }
.ac-gold { color: var(--gold); }
.ac-level { margin-top: 18px; }
.ac-level-row { display: flex; justify-content: space-between; font-size: 15px; margin-bottom: 8px; }
.ac-progress { height: 10px; border-radius: 5px; background: #eee6d4; overflow: hidden; }
.ac-progress span { display: block; height: 100%; background: var(--gold); border-radius: 5px; }
.ac-level .muted { margin-top: 6px; }
.ac-ladder { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.ac-ladder li { border: 1px solid var(--border); border-radius: 8px; padding: 14px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.ac-ladder li.done { border-color: #d9c9a2; background: #fbf8f1; }
.ac-ladder li.cur { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); background: #fbf8f1; }
.ac-grain { position: relative; width: 28px; height: 28px; color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; margin-bottom: 6px; z-index: 0; }
.ac-grain::before { content: ""; position: absolute; inset: 3px; border-radius: 5px; background: var(--blue); transform: rotate(45deg); z-index: -1; }
.ac-ladder li.done .ac-grain::before, .ac-ladder li.cur .ac-grain::before { background: var(--gold); }
.ac-perk { margin-top: 6px; }
.ac-earn th { width: 70%; font-weight: 400; }

.ac-switch-hero { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 20px 24px; background: #f2f6fc; border-color: #d4def0; }
.ac-switch-hero h2 { font-size: 21px; font-weight: 600; margin-bottom: 6px; }
.ac-switch { padding: 8px 24px 24px; margin-top: 16px; }
.ac-switch-list { display: flex; flex-direction: column; gap: 8px; }
.ac-switch-opt { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; cursor: pointer; font-size: 15px; word-break: break-all; }
.ac-switch-opt:has(input:checked) { border-color: var(--action); box-shadow: 0 0 0 1px var(--action); }
.ac-switch-opt .check { padding: 0; }
.ac-switch .dropzone { display: flex; flex-direction: column; align-items: center; gap: 6px; }

.ac-vouchers { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.ac-voucher { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; border-style: dashed; border-width: 1.5px; font-size: 14px; }
.ac-code { font-weight: 700; font-size: 16px; color: var(--blue); }
.ac-val { font-weight: 600; color: var(--green); }
.ac-used { padding-left: 18px; }

.ac-memo { display: grid; gap: 10px; }
.ac-memo-item { display: flex; align-items: center; gap: 14px; padding: 12px 16px; }
.ac-memo-item .link-btn { margin-left: auto; }
.co-grid .wide { grid-column: span 2; }
.ac-danger h3 { margin-top: 0; }
.ac-danger .btn { margin-top: 10px; border-color: var(--red); color: var(--red); }

@media (max-width: 1000px) {
  .ac-tiles { grid-template-columns: repeat(2, 1fr); }
  .ac-ladder { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .ac-head { padding: 22px 0 16px; }
  .ac-layout { grid-template-columns: 1fr; gap: 16px; }
  .ac-nav { flex-direction: row; overflow-x: auto; scrollbar-width: none; padding: 0; border: 0; gap: 8px; position: static; }
  .ac-nav::-webkit-scrollbar { display: none; }
  .ac-nav a, .ac-logout { flex: none; border: 1px solid var(--border); border-radius: 20px; padding: 7px 14px; margin: 0; font-size: 14px; }
  .ac-nav a.active { border-color: var(--action); background: var(--pill-blue); }
  .ac-nav .icon { width: 16px; height: 16px; }
  .ac-salty-top, .ac-switch-hero { flex-direction: column; }
  .ac-switch { padding: 4px 16px 18px; }
  .ac-pts { margin-left: 0; width: 100%; }
  .co-grid .wide { grid-column: auto; }
}

/* ---------- misc pages ---------- */
.ms-wrap { padding: 36px 0 0; max-width: 860px; }
.ms-wrap h1 { margin-bottom: 18px; }
.ms-wrap h2 { font-size: 20px; font-weight: 600; margin: 26px 0 8px; }
.ms-wrap p, .ms-wrap li { font-size: 16px; line-height: 1.55; }
.ms-wrap p + p { margin-top: 10px; }
.ms-list { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.ms-item { display: flex; gap: 14px; padding: 16px 18px; align-items: flex-start; }
.ms-item .icon { color: var(--blue); flex: none; margin-top: 2px; }
.ms-item.unread { background: #f2f6fd; border-color: #c9d8f0; }
.ms-item.unread h3::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--action); margin-right: 8px; vertical-align: 2px; }
.ms-item h3 { font-size: 16px; font-weight: 600; }
.ms-item time { font-size: 13px; color: var(--muted); }
.ms-table { width: 100%; border-collapse: collapse; font-size: 15px; margin-top: 8px; }
.ms-table th, .ms-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #eee; vertical-align: top; }
.ms-404 { text-align: center; padding: 60px 0 20px; }
.ms-404 .big { font-size: 64px; font-weight: 800; font-style: italic; color: var(--blue); }

.chat { display: flex; flex-direction: column; height: min(640px, calc(100vh - 260px)); min-height: 420px; padding: 0; overflow: hidden; }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid #eee; }
.chat-head .icon { color: var(--blue); }
.chat-head small { display: block; color: var(--muted); font-size: 13px; }
.chat-log { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 10px; background: #f7f8fa; }
.chat-msg { max-width: 78%; padding: 10px 14px; border-radius: 16px; font-size: 15px; line-height: 1.45; }
.chat-msg.bot { background: #fff; border: 1px solid #e6e6e6; border-bottom-left-radius: 4px; align-self: flex-start; }
.chat-msg.me { background: var(--action); color: #fff; border-bottom-right-radius: 4px; align-self: flex-end; }
.chat-msg.me a { color: #fff; text-decoration: underline; }
.chat-sugg { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 18px 0; }
.chat-sugg button { border: 1px solid var(--action); color: var(--action); background: #fff; border-radius: 16px; height: 30px; padding: 0 12px; font-size: 14px; }
.chat-form { display: flex; gap: 10px; padding: 12px 18px 16px; }
.chat-form .input { height: 44px; border-radius: 22px; }
.chat-form .btn { height: 44px; width: 44px; padding: 0; }
@media (max-width: 767px) {
  .ms-wrap { padding-top: 22px; }
  .chat-msg { max-width: 90%; }
  .chat-sugg { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .chat-sugg button { flex: none; }
  .chat { height: calc(100vh - 220px); }
}

/* spot illustrations (js/art/spots.js) */
.spot { display: block; flex: none; }
.ac-empty .spot { margin-bottom: 4px; }
.ac-switch-hero { align-items: center; }
.ac-switch-text { flex: 1; min-width: 0; }
.chat-head .hashi { flex: none; }
@media (max-width: 767px) { .ac-switch-hero { align-items: flex-start; } }