.card{display:flex;gap:22px;align-items:center;padding:20px 22px;background:var(--surface);border:1px dashed var(--line);border-radius:6px;box-shadow:var(--shadow);margin-bottom:22px}
.card.col{border-style:solid;display:block;margin-bottom:0}
.card h2{margin:0 0 10px;font-size:.78rem;letter-spacing:1px;text-transform:uppercase;color:var(--mute);display:flex;align-items:center;gap:8px}
.thumb{width:206px;height:116px;flex:none;background:var(--soft);overflow:hidden;display:grid;place-items:center;color:var(--mute);border-radius:2px}
.thumb img{width:100%;height:100%;object-fit:cover}
.info{flex:1;min-width:0}.info h3{margin:0 0 4px;font-size:1.6rem;font-weight:700;color:var(--head);overflow-wrap:anywhere}
.by{font-size:1.02rem;color:var(--head);font-weight:700}.by u{text-decoration:none;border-bottom:1px dotted var(--mute)}
.meta{margin-top:4px;font-size:.85rem;color:var(--mute);font-variant-numeric:tabular-nums;display:flex;flex-wrap:wrap;gap:4px 10px}
.meta strong{font-weight:500;color:var(--text)}.meta a{color:var(--accent);font-weight:600;text-decoration:none}.meta a:hover{text-decoration:underline}
.acts{display:flex;gap:4px;align-self:flex-start}
.acts button{width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--mute);cursor:pointer}
.acts button:hover{color:var(--head)}.acts .del{color:var(--danger)}
.empty{padding:36px 18px;text-align:center;color:var(--mute)}
.rules{list-style:none;margin:0;padding:0;font-size:.9rem;color:var(--mute)}
.rules li{display:flex;gap:10px;padding:7px 0}
#admin form{display:grid;gap:8px}#admin label{font-size:.78rem;font-weight:700;color:var(--mute)}
.row2{display:flex;gap:8px}.row2 .btn{flex:1}
#msg{color:var(--danger);font-size:.82rem;margin-top:8px}#msg:empty{display:none}
.admin-note{font-size:.75rem;color:var(--mute);margin:10px 0 0}
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--head);color:var(--bg);padding:9px 16px;border-radius:999px;font-size:.82rem;opacity:0;pointer-events:none;transition:opacity .2s}.toast.show{opacity:1}
@media(max-width:560px){.card{flex-wrap:wrap}.thumb{width:100%;height:auto;aspect-ratio:16/9}}
.rules li>span:first-child{width:1.4em;flex:none}

.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.tab{border:1px solid var(--line);background:var(--surface);color:var(--mute);border-radius:999px;padding:8px 14px;font:inherit;font-weight:600;font-size:.85rem;cursor:pointer;white-space:nowrap}
.tab:hover{color:var(--head)}
.tab[aria-selected=true]{background:var(--btn);color:var(--btn-text);border-color:var(--btn)}
.tab i{font-style:normal;margin-left:8px;background:rgba(127,127,127,.22);border-radius:999px;padding:1px 7px;font-size:.72rem}

.upcoming{max-width:1100px;margin:0 auto 22px;padding:0 20px}.upcoming[hidden]{display:none}
.up-head{display:flex;align-items:center;gap:10px;font-size:.78rem;letter-spacing:1px;text-transform:uppercase;color:var(--mute);margin-bottom:10px;font-weight:700}
.live-dot{width:8px;height:8px;border-radius:50%;background:#2ecc71;animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(46,204,113,.6)}70%{box-shadow:0 0 0 8px rgba(46,204,113,0)}100%{box-shadow:0 0 0 0 rgba(46,204,113,0)}}
.up-list{display:flex;gap:12px;overflow-x:auto;padding-bottom:4px}
.up-card{flex:none;min-width:210px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.up-card b{display:block;color:var(--head)}.up-card .up-cat{font-size:.78rem;color:var(--mute)}
.up-card .up-time{display:block;font-variant-numeric:tabular-nums;font-size:1.1rem;color:var(--head);margin-top:6px;font-weight:700}
.badge{display:inline-block;background:var(--soft);color:var(--head);border-radius:999px;padding:3px 10px;font-size:.72rem;font-weight:700}
.vbadge{background:#d9f5e5;color:#17653a;border-radius:999px;padding:2px 9px;font-size:.72rem;font-weight:700}
.btn.red{background:var(--danger);color:#fff}.btn.sm{padding:9px 16px;font-size:.82rem}
.ava{width:56px;height:56px;border-radius:50%;object-fit:cover;background:var(--soft);flex:none;display:block}

/* 7 Frame original standard */

.standard-7-frame {
  position: relative;
  font-weight: 700 !important;
}

.tab.standard-7-frame:not([aria-selected="true"]),
.pillbtn.standard-7-frame:not([aria-checked="true"]) {
  background: color-mix(in srgb, var(--surface) 88%, var(--head));
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  color: var(--head);
}

.tab.standard-7-frame::before,
.pillbtn.standard-7-frame::before {
  content: "◆";
  display: inline-block;
  margin-right: 6px;
  font-size: .48em;
  vertical-align: middle;
  color: var(--accent);
}

.tab.standard-7-frame[aria-selected="true"]::before,
.pillbtn.standard-7-frame[aria-checked="true"]::before {
  color: currentColor;
}

.seg button.standard-7-frame {
  font-weight: 700;
}

.seg button.standard-7-frame::after {
  content: "◆";
  position: absolute;
  top: 5px;
  right: 7px;
  font-size: 5px;
  line-height: 1;
  color: var(--accent);
}

.seg button.standard-7-frame[aria-checked="true"]::after {
  color: currentColor;
}

/* The 7 Frame category is the site's original standard. */
.tab.standard-7-frame,
.pillbtn.standard-7-frame,
.seg button.standard-7-frame {
  font-weight: 700;
}

.tab.standard-7-frame::before,
.pillbtn.standard-7-frame::before,
.seg button.standard-7-frame::before {
  content: "◆";
  display: inline-block;
  margin-right: 5px;
  font-size: .48em;
  vertical-align: middle;
  color: var(--accent);
}

.tab.standard-7-frame:not([aria-selected="true"]),
.pillbtn.standard-7-frame:not([aria-checked="true"]) {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
  background: color-mix(in srgb, var(--surface) 92%, var(--accent));
  color: var(--head);
}


/* 7 Frame original standard: simple verification mark only */
.tab.standard-7-frame,
.pillbtn.standard-7-frame,
.seg button.standard-7-frame {
  font-weight: inherit;
  background: inherit;
  border-color: inherit;
  color: inherit;
}

.tab.standard-7-frame::before,
.pillbtn.standard-7-frame::before,
.seg button.standard-7-frame::before {
  content: "✓";
  display: inline-block;
  margin-right: 5px;
  font-size: .8em;
  font-weight: 700;
  vertical-align: 0.05em;
  color: inherit;
}



/* 7 Frame: original standard marker */
.tab.standard-7-frame:not([aria-selected="true"]),.pillbtn.standard-7-frame:not([aria-checked="true"]),.seg button.standard-7-frame:not([aria-checked="true"]){background:var(--surface)!important;border-color:var(--line)!important;color:var(--mute)!important;font-weight:600!important;box-shadow:none!important;filter:none!important}.tab.standard-7-frame:not([aria-selected="true"])::before,.pillbtn.standard-7-frame:not([aria-checked="true"])::before,.seg button.standard-7-frame:not([aria-checked="true"])::before{content:"✓";display:inline-block;margin-right:5px;color:currentColor;opacity:.42;font-size:.72em;font-weight:700;line-height:1;vertical-align:.08em}


/* Original 7 Frame standard */
.tab.standard-7-frame:not([aria-selected="true"]),
.pillbtn.standard-7-frame:not([aria-checked="true"]),
.seg button.standard-7-frame:not([aria-checked="true"]) {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  color: var(--mute) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  filter: none !important;
}

.tab.standard-7-frame:not([aria-selected="true"])::before,
.pillbtn.standard-7-frame:not([aria-checked="true"])::before,
.seg button.standard-7-frame:not([aria-checked="true"])::before {
  content: "✓";
  display: inline-block;
  margin-right: 5px;
  color: currentColor;
  opacity: .42;
  font-size: .72em;
  font-weight: 700;
  line-height: 1;
  vertical-align: .08em;
}




/* Updates page: override the global two-column main layout */
main.updates-page {
  display: block;
  width: min(900px, calc(100% - 40px));
  max-width: 900px;
  margin: 0 auto;
  padding: 72px 0 100px;
  position: static;
}

main.updates-page .updates-header,
main.updates-page .updates-list {
  position: static;
  transform: none;
}

@media (max-width: 700px) {
  main.updates-page {
    width: min(100% - 32px, 900px);
    padding: 52px 0 72px;
  }
}