/* Saved and News pages. They also load bento.css (riveted tiles) and fx.css (cut-corner buttons, labels). */
.page { padding-block: 34px 10px; }
.page .sec-label { margin-top: 0; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 28px; margin-bottom: 24px; }
.page-head > div:first-child { min-width: 0; max-width: 660px; }
.page-title { margin: 12px 0 10px; font: 700 clamp(38px, 6vw, 72px)/.92 var(--head); text-transform: uppercase; text-wrap: balance; }
.page-title em { font-style: normal; color: var(--accent); }
.page-sub { margin: 0; color: var(--muted); max-width: 58ch; }
.page-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.page .tile { padding: 20px; }
.t-head select { margin-left: auto; min-height: 34px; padding: 4px 8px; background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; font: 500 12px var(--mono); }
.t-head .t-more + select, .t-head select + .t-more { margin-left: 8px; }

/* ---------- Saved ---------- */
.sv-next { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 28px; align-items: center; padding: 22px 24px; border: 1px solid rgba(var(--heat), .6);
  border-radius: 14px; background: linear-gradient(120deg, rgba(var(--heat), .22), rgba(31, 31, 31, .92) 55%); }
:root[data-theme='light'] .sv-next { background: linear-gradient(120deg, rgba(var(--heat), .16), var(--panel) 55%); }
.sv-next .eyebrow { margin-bottom: 6px; }
.sv-next h2 { margin: 0 0 6px; font: 700 clamp(24px, 3.4vw, 38px)/1 var(--head); text-transform: uppercase; }
.sv-next .big { font: 700 clamp(40px, 6vw, 68px)/1 var(--head); color: var(--soon); font-variant-numeric: tabular-nums; text-align: right; }
.sv-next .big small { display: block; font: 500 11px var(--mono); letter-spacing: .14em; color: var(--muted); text-transform: uppercase; }
.sv-next .acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.sv-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 16px; }
.sv-side { display: grid; gap: 16px; min-width: 0; }
.sv-list .card { margin-bottom: 8px; }
.wk-mini { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.wk-mini li { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 10px; align-items: start; padding: 6px 0; border-bottom: 1px solid var(--line); }
.wk-mini li:last-child { border-bottom: 0; }
.wk-mini .d { font: 600 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.wk-mini .d.today { color: var(--accent); }
.wk-mini .chips2 { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.wk-mini .none { color: var(--muted); font-size: 13px; padding-top: 2px; }
.add-search { width: 100%; min-height: 40px; padding: 8px 12px; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; margin-bottom: 10px; }
.add-list { list-style: none; margin: 0; padding: 0; }
.add-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); }
.add-list li:last-child { border-bottom: 0; }
.add-list .c-name { font-size: 14px; }
.add-list .sub { font-size: 12px; color: var(--muted); }
.danger-btn { border: 1px solid var(--line); background: none; color: var(--muted); border-radius: 8px; padding: 4px 10px; font: 500 12px var(--mono); }
.danger-btn:hover, .danger-btn.armed { border-color: #e5484d; color: #e5484d; }

/* ---------- News ---------- */
.fchips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.fchip { border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 7px 14px; font: 600 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.fchip:hover { color: var(--text); border-color: var(--muted); }
.fchip[aria-pressed='true'] { background: var(--accent); border-color: var(--accent); color: #fff; }
.news-feature { position: relative; display: flex; align-items: flex-end; min-height: 340px; padding: 28px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px;
  background: #121010 center / cover no-repeat; cursor: pointer; }
.news-feature::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14, 12, 12, .94), rgba(14, 12, 12, .55) 60%, rgba(14, 12, 12, .2)); }
.news-feature > div { position: relative; max-width: 620px; color: #ece7e1; }
.news-feature h2 { margin: 8px 0 10px; font: 700 clamp(28px, 4.4vw, 52px)/.95 var(--head); text-transform: uppercase; text-wrap: balance; }
.news-feature p { margin: 0 0 16px; color: #c9c1b8; }
.news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.news-card { cursor: pointer; gap: 8px; }
.news-card:hover { border-color: rgba(var(--heat), .6); }
.news-card .top { display: flex; align-items: center; gap: 10px; }
.news-card .top img { width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .5)); }
.news-card h3 { margin: 4px 0 0; font: 700 22px/1.05 var(--head); text-transform: uppercase; text-wrap: balance; }
.news-card p { margin: 0; color: var(--muted); font-size: 14px; }
.news-card .read { margin-top: auto; padding-top: 8px; font: 600 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font: 500 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.cat { padding: 2px 8px; border-radius: 4px; background: rgba(var(--heat), .18); color: var(--accent); font-weight: 700; }
.article p { margin: 0 0 12px; line-height: 1.6; }
.article .meta { margin-bottom: 14px; }
.article .acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

@media (max-width: 900px) {
  .sv-grid { grid-template-columns: 1fr; }
  .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .sv-next { grid-template-columns: 1fr; }
  .sv-next .big { text-align: left; }
  .news-grid { grid-template-columns: 1fr; }
  .news-feature { min-height: 280px; padding: 20px; }
}

/* ---------- Servers page ---------- */
.srv-controls { display: grid; gap: 10px; margin-bottom: 8px; }
.srv-selects { display: flex; flex-wrap: wrap; gap: 8px; }
.srv-selects select { min-height: 38px; padding: 6px 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; }
.srv-toggles { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-height: 36px; }
.srv-list { display: grid; gap: 8px; }
.srv-row { display: grid; grid-template-columns: minmax(0, 2.4fr) repeat(3, minmax(0, .8fr)) minmax(0, 1.2fr) auto; gap: 14px; align-items: center;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); cursor: pointer; }
.srv-row:hover { border-color: var(--muted); }
.srv-main { min-width: 0; }
.srv-main .c-badges { margin: 4px 0 0; }
.srv-cell { font-size: 14px; min-width: 0; font-variant-numeric: tabular-nums; }
.srv-cell small { display: block; font: 500 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.srv-cell .soon { color: var(--soon); font-weight: 600; }
.srv-cell .muted, .muted { color: var(--muted); }
@media (max-width: 900px) {
  .srv-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto; }
  .srv-main { grid-column: 1 / -1; }
  .srv-sched { display: none; }
}