:root{
  --base-size:14px;

  --page:#edf2f8;
  --surface:#ffffff;
  --surface-2:#f6f9fd;
  --surface-3:#e9eff8;
  --text:#263247;
  --muted:#718097;

  --ink:#16335f;
  --blue:#345b99;
  --blue-2:#5f7fb4;
  --blue-3:#8da4c9;
  --deep:#1e355d;

  --cyan:#29b7cf;
  --orange:#d8892e;
  --green:#2fa36f;
  --pink:#c76684;

  --line:#cdd7e5;
  --line-strong:#9eb0ca;

  --shadow:0 16px 44px rgba(37,61,96,.14);
  --shadow-soft:0 6px 16px rgba(37,61,96,.08);

  --radius:14px;
  --radius-sm:8px;
}
html.dark{
  --page:#0d141d;
  --surface:#151e29;
  --surface-2:#1b2735;
  --surface-3:#223244;
  --text:#e7eef7;
  --muted:#9fafc2;

  --ink:#d8e5f6;
  --blue:#89ace5;
  --blue-2:#54729f;
  --blue-3:#6f89b2;
  --deep:#0b1118;

  --cyan:#45c9dd;
  --orange:#e2a04f;
  --green:#55bd8b;
  --pink:#db7a99;

  --line:#344354;
  --line-strong:#53677f;

  --shadow:0 18px 50px rgba(0,0,0,.35);
  --shadow-soft:0 7px 20px rgba(0,0,0,.22);
}

*{box-sizing:border-box}
html{font-size:var(--base-size);background:var(--page)}
body{
  margin:0;
  min-height:100vh;
  color:var(--text);
  font-family:Arial,Helvetica,sans-serif;
  line-height:1.4;
  background:
    linear-gradient(rgba(52,91,153,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(52,91,153,.035) 1px,transparent 1px),
    radial-gradient(circle at 20% 0%,rgba(95,127,180,.16),transparent 34%),
    var(--page);
  background-size:24px 24px,24px 24px,auto,auto;
}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
button,input,select{font:inherit}
.wrap{width:min(736px,calc(100% - 14px));margin:0 auto}

/* =========================
   HERO / BRAND
   ========================= */

.site-head{
  position:relative;
  padding:12px 0 0;
}
.site-head::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:92px;
  background:
    linear-gradient(135deg,#274a82 0%,#3d5f9d 48%,#5e7fb4 100%);
  border-bottom:1px solid rgba(255,255,255,.18);
  box-shadow:0 5px 20px rgba(35,61,99,.18);
}
html.dark .site-head::before{
  background:linear-gradient(135deg,#0b1118 0%,#1c2c42 48%,#304a6d 100%);
}

.head-card{
  position:relative;
  z-index:1;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.25);
  border-radius:14px 14px 0 0;
  background:
    linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.05)),
    rgba(33,61,101,.65);
  backdrop-filter:blur(10px);
  color:#fff;
  box-shadow:var(--shadow);
}
.head-card::after{
  content:"";
  position:absolute;
  width:160px;
  height:160px;
  border:28px solid rgba(255,255,255,.035);
  border-radius:50%;
  right:-55px;
  top:-70px;
  pointer-events:none;
}
.head-top{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:54px;
  padding:10px 12px 8px;
}
.brand-lockup{
  display:flex;
  align-items:center;
  gap:10px;
}
.brand-mark{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.38);
  border-radius:9px;
  background:rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15);
  font:700 18px/1 Arial,sans-serif;
  transform:rotate(-3deg);
}
.brand-text{min-width:0}
.brand{
  display:flex;
  align-items:baseline;
  gap:5px;
  font-size:21px;
  font-weight:700;
  letter-spacing:-.035em;
  line-height:1;
}
.brand .dot{color:#75d6e6}
.brand small{
  font-size:9px;
  font-weight:400;
  letter-spacing:.08em;
  opacity:.75;
}
.tagline{
  margin-top:4px;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.12em;
  opacity:.72;
}

.controls{
  display:flex;
  align-items:center;
  gap:2px;
}

/* Keep the text-size controls close to the current yTube.SITE style:
   plain A characters, different physical sizes, minimal decoration. */
.size-control{
  position:relative;
  width:24px;
  height:24px;
  border:0;
  border-radius:0;
  background:transparent;
  color:#fff;
  cursor:pointer;
  padding:0;
  font-family:Arial,sans-serif;
  font-weight:400;
  line-height:24px;
  opacity:.82;
  transition:opacity .12s ease;
}
.size-control:hover{
  background:transparent;
  opacity:1;
}
.size-control.active{
  background:transparent;
  color:#fff;
  box-shadow:none;
  opacity:1;
}
.size-control.active::after{
  content:"";
  position:absolute;
  left:5px;
  right:5px;
  bottom:0;
  height:2px;
  background:#fff;
  border-radius:2px;
}
.size-control[data-size="13"]{font-size:10px}
.size-control[data-size="14"]{font-size:12px}
.size-control[data-size="16"]{font-size:14px}
.size-control[data-size="18"]{font-size:16px}

/* Moon/sun stays a small compact button, similar to the live site. */
.theme-control{
  width:23px;
  height:21px;
  margin-left:3px;
  border:1px solid rgba(255,255,255,.34);
  border-radius:3px;
  background-color:rgba(255,255,255,.10);
  background-position:center;
  background-repeat:no-repeat;
  color:#fff;
  cursor:pointer;
  padding:0;
  font:400 13px/19px Arial,sans-serif;
  transition:background-color .12s ease,border-color .12s ease;
}
.theme-control:hover{
  background-color:rgba(255,255,255,.18);
  border-color:rgba(255,255,255,.5);
}

.status-strip{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:6px 12px;
  border-top:1px solid rgba(255,255,255,.13);
  background:rgba(0,0,0,.08);
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.signal{
  display:flex;
  align-items:center;
  gap:6px;
  opacity:.9;
}
.signal-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#64e6a5;
  box-shadow:0 0 0 3px rgba(100,230,165,.12),0 0 10px rgba(100,230,165,.55);
  animation:pulse 2.2s ease-in-out infinite;
}
.status-right{opacity:.68}
@keyframes pulse{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(.75);opacity:.55}
}

/* =========================
   MAIN STACK
   ========================= */

.main{
  position:relative;
  z-index:2;
  background:var(--surface);
  border:1px solid var(--line);
  border-top:0;
  box-shadow:var(--shadow);
  border-radius:0 0 var(--radius) var(--radius);
  overflow:hidden;
}

/* search console */
.search-zone{
  position:relative;
  padding:13px;
  background:
    linear-gradient(180deg,var(--surface-2),var(--surface));
  border-bottom:1px solid var(--line);
}
.search-zone::before{
  content:"SEARCH CONSOLE";
  display:block;
  margin:0 0 7px 1px;
  color:var(--muted);
  font:700 9px/1 Arial,sans-serif;
  letter-spacing:.14em;
}
.search-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 132px auto;
  gap:7px;
}
input[type="search"],select{
  height:36px;
  min-width:0;
  border:1px solid var(--line-strong);
  border-radius:7px;
  background:var(--surface);
  color:var(--text);
  padding:0 9px;
  outline:0;
  box-shadow:inset 0 1px 2px rgba(33,54,84,.04);
}
input[type="search"]:focus,select:focus{
  border-color:var(--blue-2);
  box-shadow:0 0 0 3px rgba(95,127,180,.14);
}
.search-btn{
  height:36px;
  padding:0 14px;
  border:1px solid #294d82;
  border-radius:7px;
  background:
    linear-gradient(180deg,#4c70aa,#345b99);
  color:#fff;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 2px 5px rgba(52,91,153,.15);
}
.search-btn:hover{filter:brightness(1.04)}
.search-btn:active{transform:translateY(1px)}

/* feature rail */
.feature-rail{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  border-bottom:1px solid var(--line);
}
.trending{
  position:relative;
  padding:12px 13px 13px;
  min-width:0;
  background:
    linear-gradient(180deg,rgba(52,91,153,.015),transparent 55%),
    var(--surface);
}

.trending::after{
  content:"";
  position:absolute;
  left:13px;
  right:13px;
  bottom:0;
  height:1px;
  background:linear-gradient(90deg,var(--line),transparent 82%);
  opacity:.65;
}

.module-title{
  display:flex;
  align-items:center;
  gap:7px;
  margin-bottom:9px;
  color:var(--ink);
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.12em;
}

.module-title::before{
  content:"";
  width:18px;
  height:2px;
  background:var(--cyan);
  box-shadow:8px 0 0 var(--orange);
}

.trending .module-title::after{
  content:"live feed";
  margin-left:auto;
  padding:2px 5px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--surface-2);
  color:var(--muted);
  font-size:7px;
  font-weight:700;
  letter-spacing:.09em;
}

.trend-list{
  display:grid;
  gap:3px;
}

.trend-row{
  --trend-accent:var(--cyan);

  position:relative;
  display:grid;
  grid-template-columns:24px minmax(0,1fr);
  gap:8px;
  align-items:center;
  min-height:31px;
  padding:4px 6px 4px 4px;
  border:1px solid transparent;
  border-radius:7px;
  font-size:11px;
  line-height:1.28;
  transition:
    background .14s ease,
    border-color .14s ease,
    transform .14s ease;
}

.trend-row:nth-child(1){--trend-accent:#cb6273}
.trend-row:nth-child(2){--trend-accent:#4e7fc4}
.trend-row:nth-child(3){--trend-accent:#d26a55}
.trend-row:nth-child(4){--trend-accent:#3b9d72}
.trend-row:nth-child(5){--trend-accent:#d8892e}

.trend-row::before{
  content:"";
  position:absolute;
  left:0;
  top:7px;
  bottom:7px;
  width:2px;
  border-radius:2px;
  background:var(--trend-accent);
  opacity:.26;
  transform:scaleY(.72);
  transition:opacity .14s ease,transform .14s ease;
}

.trend-row:hover{
  transform:translateX(2px);
  border-color:color-mix(in srgb,var(--trend-accent) 22%,var(--line));
  background:
    linear-gradient(90deg,color-mix(in srgb,var(--trend-accent) 5%,transparent),transparent 74%),
    var(--surface-2);
}

.trend-row:hover::before{
  opacity:.9;
  transform:scaleY(1);
}

.trend-row > div{
  min-width:0;
}

.trend-row strong{
  color:var(--ink);
  font-size:10.5px;
  font-weight:700;
}

.trend-row a{
  text-decoration:none;
}

.trend-row a:first-of-type{
  color:var(--blue);
  font-weight:600;
}

.trend-row a:first-of-type:hover{
  text-decoration:underline;
}

.trend-row a:last-of-type{
  display:inline-flex;
  align-items:center;
  margin-left:2px;
  color:var(--muted);
  font-size:9px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.trend-row a:last-of-type::after{
  content:"→";
  margin-left:3px;
  color:var(--trend-accent);
  font-size:9px;
}

.badge{
  position:relative;
  width:21px;
  height:21px;
  display:grid;
  place-items:center;
  border-radius:6px;
  color:#fff;
  font-size:9px;
  font-weight:700;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    0 2px 5px color-mix(in srgb,var(--trend-accent) 20%,transparent);
}

.badge::after{
  content:"";
  position:absolute;
  inset:3px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:3px;
  pointer-events:none;
}

.badge-a{background:#cb6273}
.badge-m{background:#4e7fc4}
.badge-y{background:#d26a55}
.badge-w{background:#3b9d72}
.badge-r{background:#d8892e}

.meta{
  display:inline-flex;
  align-items:center;
  min-height:17px;
  margin:0 1px;
  padding:1px 5px;
  border:1px solid color-mix(in srgb,var(--trend-accent) 22%,var(--line));
  border-radius:999px;
  background:color-mix(in srgb,var(--trend-accent) 5%,var(--surface-2));
  color:color-mix(in srgb,var(--trend-accent) 78%,var(--text));
  font-size:8.5px;
  font-weight:700;
  white-space:nowrap;
}

html.dark .trend-row:hover{
  background:
    linear-gradient(90deg,color-mix(in srgb,var(--trend-accent) 8%,transparent),transparent 74%),
    var(--surface-2);
}

html.dark .meta{
  background:color-mix(in srgb,var(--trend-accent) 7%,var(--surface-2));
}

@media(max-width:640px){
  .trending{
    padding:11px 9px 12px;
  }

  .trending .module-title::after{
    display:none;
  }

  .trend-row{
    grid-template-columns:23px minmax(0,1fr);
    gap:7px;
    padding-right:4px;
    font-size:10.5px;
  }

  .trend-row a:last-of-type{
    font-size:8px;
  }

  .meta{
    font-size:8px;
    padding:1px 4px;
  }
}

.quick-panel{
  position:relative;
  overflow:visible;
  padding:12px 12px 16px;
  background:
    linear-gradient(145deg,rgba(52,91,153,.08),rgba(41,183,207,.055)),
    var(--surface-2);
  border-left:1px solid var(--line);
}
.quick-panel::after{
  content:"RANDOM";
  position:absolute;
  right:-11px;
  bottom:-4px;
  color:rgba(52,91,153,.028);
  font:bold 35px/1 Arial,sans-serif;
  letter-spacing:-.08em;
  transform:rotate(-90deg);
  transform-origin:center;
}
.pick-shell{
  position:relative;
  z-index:3;
  padding:16px 3px 5px 9px;
}

.pick-feature{
  position:relative;
  min-height:140px;
  margin-top:5px;
  padding:14px 12px 12px 92px;
  border:1px solid color-mix(in srgb,var(--line) 76%,var(--blue-3));
  border-radius:15px;
  background:
    radial-gradient(circle at 100% 0%,rgba(41,183,207,.085),transparent 38%),
    linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--surface-2) 84%,var(--surface)));
  box-shadow:
    0 20px 38px rgba(37,61,96,.15),
    0 4px 10px rgba(37,61,96,.07);
  isolation:isolate;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    opacity .14s ease;
}

.pick-feature::before{
  content:"";
  position:absolute;
  z-index:-2;
  left:24px;
  right:20px;
  bottom:-8px;
  height:20px;
  border-radius:50%;
  background:rgba(35,56,88,.14);
  filter:blur(10px);
  opacity:.72;
}

.pick-feature::after{
  content:"";
  position:absolute;
  z-index:0;
  left:92px;
  right:12px;
  top:0;
  height:2px;
  border-radius:2px;
  background:
    linear-gradient(90deg,var(--cyan),var(--blue-2) 42%,transparent 82%);
  opacity:.78;
}

.pick-feature:hover{
  transform:translateY(-3px);
  border-color:var(--blue-3);
  box-shadow:
    0 25px 46px rgba(37,61,96,.18),
    0 6px 12px rgba(37,61,96,.08);
}

.pick-feature.is-switching{
  opacity:.28;
  transform:translateY(4px) scale(.992);
}

.pick-poster{
  position:absolute;
  z-index:4;
  left:10px;
  top:-18px;
  overflow:hidden;
  width:75px;
  aspect-ratio:4/5;
  border:2px solid color-mix(in srgb,var(--surface) 88%,#fff);
  border-radius:11px;
  background:#20344f;
  box-shadow:
    0 18px 29px rgba(26,43,68,.25),
    0 4px 9px rgba(26,43,68,.13);
  transform:rotate(-2.6deg);
  transform-origin:center;
  isolation:isolate;
  transition:transform .18s ease,box-shadow .18s ease;
}

.pick-feature:hover .pick-poster{
  transform:translateY(-3px) rotate(-1.2deg);
  box-shadow:
    0 22px 34px rgba(26,43,68,.27),
    0 5px 11px rgba(26,43,68,.14);
}

.pick-poster::before{
  content:"";
  position:absolute;
  z-index:5;
  top:-15px;
  left:25px;
  width:27px;
  height:34px;
  background:rgba(239,226,190,.58);
  border:1px solid rgba(255,255,255,.34);
  box-shadow:0 2px 4px rgba(0,0,0,.05);
  transform:rotate(5deg);
  pointer-events:none;
}

.pick-poster svg{
  display:block;
  width:100%;
  height:100%;
}

.pick-poster::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:46%;
  z-index:2;
  background:linear-gradient(transparent,rgba(4,10,18,.81));
  pointer-events:none;
}

.pick-type{
  position:absolute;
  z-index:6;
  left:5px;
  bottom:5px;
  padding:2px 5px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:4px;
  background:rgba(10,18,30,.62);
  backdrop-filter:blur(5px);
  color:#fff;
  font:700 7px/1 Arial,sans-serif;
  letter-spacing:.13em;
}

.pick-copy{
  position:relative;
  z-index:2;
  min-width:0;
  display:flex;
  min-height:114px;
  flex-direction:column;
}

.pick-eyebrow{
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:4px;
  color:var(--muted);
  font-size:7px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.13em;
}

.pick-eyebrow::before{
  content:"";
  width:13px;
  height:1px;
  background:var(--cyan);
}

.pick-title{
  margin-bottom:4px;
  color:var(--ink);
  font-size:17px;
  font-weight:700;
  line-height:1.06;
  letter-spacing:-.03em;
}

.pick-meta{
  align-self:flex-start;
  margin-bottom:7px;
  color:var(--muted);
  font-size:8.5px;
  line-height:1.2;
}

.pick-meta::before{
  content:"• ";
  color:var(--orange);
}

.pick-desc{
  flex:1;
  max-width:200px;
  color:var(--muted);
  font-size:9px;
  line-height:1.42;
}

.pick-actions{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:9px;
}

.pick-open,
.pick-next{
  min-height:25px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:6px;
  font-size:8.5px;
  text-decoration:none!important;
}

.pick-open{
  padding:0 10px;
  border:1px solid #294d82;
  background:linear-gradient(180deg,#4c70aa,#345b99);
  color:#fff!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    0 2px 5px rgba(52,91,153,.12);
}

.pick-open:hover{
  filter:brightness(1.05);
}

.pick-next{
  padding:0;
  min-width:auto;
  min-height:auto;
  border:0;
  background:transparent;
  color:var(--blue);
  cursor:pointer;
  opacity:.8;
}

.pick-next:hover{
  background:transparent;
  opacity:1;
  text-decoration:underline;
}

.pick-next::before{
  content:"↻";
  margin-right:4px;
  color:var(--cyan);
  font-size:10px;
}

.pick-counter{
  position:absolute;
  right:0;
  top:0;
  color:var(--muted);
  font:7px/1 monospace;
  opacity:.55;
}

/* social / ad */
.utility-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:9px 12px;
  border-bottom:1px solid var(--line);
  background:var(--surface);
}
.shares{display:flex;gap:6px;flex-wrap:wrap}
.share{
  min-height:27px;
  display:inline-flex;
  align-items:center;
  padding:0 8px;
  border-radius:6px;
  color:#fff!important;
  font-size:11px;
  text-decoration:none!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.x{background:#111}
.fb{background:#2877e3}
.wa{background:#1ecf5c}
.share:hover{filter:brightness(.96)}

.utility-note{
  color:var(--muted);
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.ad-row{
  display:flex;
  align-items:center;
  gap:7px;
  padding:8px 12px;
  border-bottom:1px solid var(--line);
  background:
    repeating-linear-gradient(-45deg,transparent,transparent 6px,rgba(52,91,153,.025) 6px,rgba(52,91,153,.025) 12px),
    var(--surface-2);
  font-size:10.5px;
}
.ad-badge{
  padding:2px 5px;
  border:1px solid #189bb7;
  border-radius:4px;
  background:var(--cyan);
  color:#fff;
  font-size:8px;
  font-weight:700;
  letter-spacing:.1em;
}

/* =========================
   CATEGORY MODULES — v9
   ========================= */

.categories{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  padding:9px;
  background:
    linear-gradient(180deg,var(--surface-2),var(--surface));
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

/* tiny framing marks make the whole area feel like one portal console */
.categories::before,
.categories::after{
  content:"";
  position:absolute;
  width:18px;
  height:18px;
  pointer-events:none;
  opacity:.55;
}
.categories::before{
  left:5px;
  top:5px;
  border-left:1px solid var(--blue-3);
  border-top:1px solid var(--blue-3);
}
.categories::after{
  right:5px;
  bottom:5px;
  border-right:1px solid var(--blue-3);
  border-bottom:1px solid var(--blue-3);
}

.category{
  --cat-accent:var(--cyan);
  --cat-tint:rgba(41,183,207,.055);

  position:relative;
  overflow:hidden;
  min-height:136px;
  padding:14px 14px 13px;
  border:1px solid var(--line);
  border-radius:11px;
  background:
    radial-gradient(circle at 100% 0%,var(--cat-tint),transparent 42%),
    linear-gradient(145deg,rgba(255,255,255,.018),transparent 58%),
    var(--surface);
  box-shadow:
    0 5px 13px rgba(37,61,96,.055),
    inset 0 1px 0 rgba(255,255,255,.16);
  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease;
  isolation:isolate;
}

.category:nth-child(2){
  --cat-accent:#7b91c2;
  --cat-tint:rgba(123,145,194,.065);
}

.category:nth-child(3){
  --cat-accent:var(--orange);
  --cat-tint:rgba(216,137,46,.06);
}

.category:nth-child(4){
  --cat-accent:var(--green);
  --cat-tint:rgba(47,163,111,.055);
}

/* soft oversized module number */
.category::before{
  content:attr(data-index);
  position:absolute;
  z-index:0;
  right:8px;
  top:5px;
  color:color-mix(in srgb,var(--cat-accent) 14%,transparent);
  font:bold 44px/1 Arial,sans-serif;
  letter-spacing:-.09em;
  pointer-events:none;
}

/* permanent faint rail, stronger on hover */
.category::after{
  content:"";
  position:absolute;
  z-index:1;
  left:0;
  top:13px;
  bottom:13px;
  width:3px;
  border-radius:0 2px 2px 0;
  background:linear-gradient(var(--cat-accent),color-mix(in srgb,var(--cat-accent) 28%,transparent));
  opacity:.28;
  transform:scaleY(.72);
  transform-origin:center;
  transition:opacity .18s ease,transform .18s ease;
}

.category:hover{
  z-index:3;
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--cat-accent) 44%,var(--line));
  background:
    radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--cat-accent) 10%,transparent),transparent 45%),
    linear-gradient(145deg,rgba(52,91,153,.035),transparent 62%),
    var(--surface);
  box-shadow:
    0 14px 28px rgba(37,61,96,.10),
    inset 0 1px 0 rgba(255,255,255,.18);
}

.category:hover::after{
  opacity:.9;
  transform:scaleY(1);
}

/* icon + copy become one clean upper row */
.category .icon{
  position:absolute;
  z-index:3;
  left:14px;
  top:14px;
  width:43px;
  height:43px;
  display:grid;
  place-items:center;
  border:1px solid color-mix(in srgb,var(--cat-accent) 30%,var(--line));
  border-radius:11px;
  background:
    linear-gradient(145deg,color-mix(in srgb,var(--cat-accent) 7%,var(--surface-2)),var(--surface));
  color:color-mix(in srgb,var(--cat-accent) 72%,var(--blue));
  box-shadow:
    0 6px 14px rgba(37,61,96,.075),
    inset 0 1px 0 rgba(255,255,255,.20);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}

.category:hover .icon{
  transform:translateY(-2px) rotate(-2deg) scale(1.025);
  border-color:color-mix(in srgb,var(--cat-accent) 55%,var(--line));
  box-shadow:
    0 9px 18px rgba(37,61,96,.11),
    inset 0 1px 0 rgba(255,255,255,.22);
}

.icon::before{
  content:"";
  position:absolute;
  inset:4px;
  border:1px solid color-mix(in srgb,var(--cat-accent) 12%,transparent);
  border-radius:7px;
  pointer-events:none;
}

.icon::after{
  content:"";
  position:absolute;
  width:7px;
  height:7px;
  right:-3px;
  top:-3px;
  border:2px solid var(--surface);
  border-radius:50%;
  background:var(--cat-accent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--cat-accent) 22%,transparent);
}

.icon svg{
  width:27px;
  height:27px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.55;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.cat-copy{
  position:relative;
  z-index:2;
  min-width:0;
  padding:0 34px 0 55px;
}

.cat-kicker{
  display:flex;
  align-items:center;
  gap:5px;
  min-height:12px;
  margin-bottom:4px;
  color:var(--muted);
  font-size:7px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.13em;
}

.cat-kicker::before{
  content:"";
  width:11px;
  height:2px;
  border-radius:2px;
  background:var(--cat-accent);
  opacity:.82;
}

.cat-title{
  margin-bottom:9px;
  font-size:17px;
  line-height:1.06;
  letter-spacing:-.025em;
}

.cat-title a{
  color:var(--ink);
  font-weight:700;
  text-decoration:none;
}

.cat-title a:hover{
  color:var(--blue);
  text-decoration:none;
}

/* sub-links become compact tags */
.cat-sub{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  max-width:100%;
  color:var(--muted);
  font-size:0;
  line-height:1.2;
}

.cat-sub a{
  display:inline-flex;
  align-items:center;
  min-height:20px;
  padding:2px 6px;
  border:1px solid var(--line);
  border-radius:999px;
  background:color-mix(in srgb,var(--surface-2) 78%,transparent);
  color:var(--muted);
  font-size:8.5px;
  text-decoration:none;
  transition:
    color .14s ease,
    border-color .14s ease,
    background .14s ease,
    transform .14s ease;
}

/* hide punctuation/text separators while keeping the anchors */
.cat-sub{
  color:transparent;
}

.cat-sub a:hover{
  transform:translateY(-1px);
  border-color:color-mix(in srgb,var(--cat-accent) 50%,var(--line));
  background:color-mix(in srgb,var(--cat-accent) 7%,var(--surface-2));
  color:var(--blue);
  text-decoration:none;
}

/* corner action */
.cat-go{
  position:absolute;
  z-index:4;
  right:10px;
  bottom:9px;
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--surface-2);
  color:transparent;
  font-size:0;
  box-shadow:0 3px 7px rgba(37,61,96,.055);
  opacity:.82;
  transition:
    transform .16s ease,
    border-color .16s ease,
    background .16s ease,
    opacity .16s ease;
}

.cat-go::after{
  content:"↗";
  color:var(--cat-accent);
  font:700 13px/1 Arial,sans-serif;
}

.category:hover .cat-go{
  opacity:1;
  transform:translate(1px,-1px);
  border-color:color-mix(in srgb,var(--cat-accent) 42%,var(--line));
  background:color-mix(in srgb,var(--cat-accent) 7%,var(--surface-2));
}

/* tiny bottom signature line gives each module a distinct finish */
.category .cat-copy::after{
  content:"";
  position:absolute;
  left:55px;
  right:0;
  bottom:-12px;
  height:1px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--cat-accent) 25%,transparent),transparent);
  opacity:.7;
}

html.dark .category{
  box-shadow:
    0 6px 16px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.025);
}

html.dark .category::before{
  color:color-mix(in srgb,var(--cat-accent) 8%,transparent);
}

html.dark .icon{
  background:
    linear-gradient(145deg,color-mix(in srgb,var(--cat-accent) 5%,var(--surface-2)),var(--surface));
}

html.dark .cat-sub a{
  background:color-mix(in srgb,var(--surface-2) 84%,transparent);
}

/* mobile turns the modules back into a clean one-column portal list */
@media(max-width:640px){
  .categories{
    grid-template-columns:1fr;
    gap:6px;
    padding:7px;
  }

  .category{
    min-height:116px;
    padding:12px 11px;
  }

  .category::before{
    right:7px;
    top:5px;
    font-size:36px;
  }

  .category::after{
    top:11px;
    bottom:11px;
  }

  .category .icon{
    left:11px;
    top:12px;
    width:40px;
    height:40px;
  }

  .icon svg{
    width:25px;
    height:25px;
  }

  .cat-copy{
    padding-left:50px;
    padding-right:30px;
  }

  .cat-title{
    margin-bottom:7px;
    font-size:16px;
  }

  .cat-sub{
    gap:3px;
  }

  .cat-sub a{
    min-height:19px;
    padding:2px 5px;
    font-size:8px;
  }

  .cat-go{
    right:8px;
    bottom:8px;
    width:24px;
    height:24px;
  }

  .category .cat-copy::after{
    left:50px;
  }
}

/* =========================
   LOWER AREA
   ========================= */

.lower{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:0;
  padding:0;
  background:var(--surface);
  border-top:1px solid var(--line);
}
.lower-main{
  padding:13px 14px 14px;
}
.lower-title{
  margin-bottom:6px;
  color:var(--ink);
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.11em;
}
.contact{
  color:var(--muted);
  font-size:11px;
  margin-bottom:8px;
}
.links{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  align-items:center;
  font-size:10px;
}
.links span{color:var(--line-strong)}

.portal-status{
  position:relative;
  overflow:hidden;
  padding:13px 14px;
  border-left:1px solid var(--line);
  background:
    linear-gradient(145deg,rgba(52,91,153,.055),rgba(41,183,207,.025)),
    var(--surface-2);
}
.portal-status::after{
  content:"Y";
  position:absolute;
  right:-5px;
  bottom:-25px;
  color:rgba(52,91,153,.055);
  font:bold 92px/1 Arial,sans-serif;
}
.status-line{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:7px;
  color:var(--muted);
  font-size:9px;
}
.status-line:last-child{margin-bottom:0}
.status-line b{
  color:var(--ink);
  font-weight:700;
}
.online{
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:var(--green);
}
.online::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 13%,transparent);
}
.bottom-tagline{
  margin-top:8px;
  color:var(--muted);
  font-size:8px;
  line-height:1.4;
  letter-spacing:.04em;
}


.visitors-pill{
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin-left:2px;
  padding:1px 6px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--surface-2);
  color:var(--green);
  font-size:9px;
  text-decoration:none!important;
}
.visitors-pill::before{
  content:"";
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--green) 16%,transparent);
}

/* =========================
   FOOTER
   ========================= */

.site-foot{
  position:relative;
  margin-top:8px;
  padding:14px 0 20px;
}

/* Full-screen strip behind the copyright card */
.site-foot::before{
  content:"";
  position:absolute;
  z-index:0;
  left:0;
  right:0;
  top:29px;
  height:34px;
  background:
    linear-gradient(
      90deg,
      #263f69 0%,
      #345b99 34%,
      #5479b1 68%,
      #6f89b9 100%
    );
  border-top:1px solid rgba(255,255,255,.14);
  border-bottom:1px solid rgba(31,55,91,.26);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 4px 12px rgba(37,61,96,.08);
}

html.dark .site-foot::before{
  background:
    linear-gradient(
      90deg,
      #101923 0%,
      #18283e 34%,
      #263d5b 68%,
      #304a6d 100%
    );
  border-top-color:rgba(255,255,255,.07);
  border-bottom-color:rgba(0,0,0,.28);
}

.footer-card{
  position:relative;
  z-index:1;
  overflow:hidden;
  min-height:65px;
  border:1px solid var(--line);
  border-radius:11px;
  background:
    radial-gradient(circle at 100% 0%,rgba(52,91,153,.06),transparent 34%),
    var(--surface);
  color:var(--text);
  box-shadow:
    0 10px 24px rgba(37,61,96,.12),
    0 2px 6px rgba(37,61,96,.06);
}

.footer-card::after{
  content:"Y";
  position:absolute;
  right:10px;
  top:3px;
  color:rgba(52,91,153,.05);
  font:bold 58px/1 Arial,sans-serif;
  transform:rotate(-6deg);
  pointer-events:none;
}

.footer-top{
  position:relative;
  z-index:1;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  min-height:64px;
  padding:10px 12px;
}

.footer-brand{
  display:flex;
  align-items:center;
  gap:8px;
}

.footer-mark{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:7px;
  background:
    linear-gradient(145deg,var(--surface-2),var(--surface));
  color:var(--blue);
  box-shadow:0 3px 8px rgba(37,61,96,.08);
  font:bold 13px/1 Arial,sans-serif;
  transform:rotate(-3deg);
}

.footer-wordmark{
  color:var(--ink);
  font-weight:700;
  letter-spacing:-.015em;
}

.footer-copy{
  margin-top:2px;
  color:var(--muted);
  font-size:8px;
  letter-spacing:.03em;
}

.footer-code{
  position:relative;
  z-index:1;
  color:var(--muted);
  font:8px/1.45 monospace;
  text-align:right;
}

html.dark .footer-card{
  background:
    radial-gradient(circle at 100% 0%,rgba(82,114,159,.10),transparent 34%),
    var(--surface);
}

html.dark .footer-mark{
  background:linear-gradient(145deg,var(--surface-2),var(--surface));
  border-color:var(--line);
  color:var(--blue);
}

/* =========================
   DARK DETAILS
   ========================= */

html.dark body{
  background:
    linear-gradient(rgba(120,146,195,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(120,146,195,.025) 1px,transparent 1px),
    radial-gradient(circle at 20% 0%,rgba(82,114,159,.15),transparent 34%),
    var(--page);
  background-size:24px 24px,24px 24px,auto,auto;
}
html.dark .controls button.active{color:#1d3558}
html.dark input[type="search"],
html.dark select{
  border-color:var(--line-strong);
}
html.dark .search-btn{
  background:linear-gradient(180deg,#36547a,#263a55);
  border-color:#526a8a;
}
html.dark .category::before{color:rgba(156,194,255,.045)}

/* =========================
   RESPONSIVE
   ========================= */

@media(max-width:640px){
  .wrap{width:calc(100% - 8px)}
  .site-head{padding-top:7px}
  .head-top{padding:8px}
  .brand-mark{display:none}
  .brand{font-size:18px}
  .tagline{display:none}
  .controls{gap:1px}
  .size-control{width:22px;height:24px;line-height:24px}
  .theme-control{width:22px;height:20px}
  .status-strip{padding:5px 8px}
  .status-right{display:none}

  .search-row{grid-template-columns:1fr}
  .search-btn{width:100%}

  .feature-rail{grid-template-columns:1fr}
  .quick-panel{border-left:0;border-top:1px solid var(--line)}
  .quick-panel{padding-bottom:15px}
  .pick-shell{padding:13px 2px 3px 8px}
  .pick-feature{
    min-height:120px;
    padding:11px 8px 10px 80px;
  }
  .pick-poster{
    left:8px;
    top:-13px;
    width:66px;
  }
  .pick-title{font-size:14px}
  .pick-desc{display:none}
  .pick-feature::after{left:80px}

  .utility-row{
    align-items:flex-start;
    flex-direction:column;
  }
  .utility-note{display:none}

  .categories{grid-template-columns:1fr}
  .category{min-height:auto}
  .category::before{font-size:34px}

  .lower{grid-template-columns:1fr}
  .portal-status{border-left:0;border-top:1px solid var(--line)}
  .footer-top{
    min-height:60px;
    align-items:center;
    flex-direction:row;
  }
  .footer-code{text-align:right}
  .site-foot::before{
    top:28px;
    height:32px;
  }
}

@media(max-width:390px){
  .pick-feature{
    padding-left:72px;
  }
  .pick-poster{
    width:58px;
  }
  .pick-feature::after{left:72px}
  .pick-meta{margin-bottom:4px}
  .pick-counter{display:none}
}

@media(prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
}


/* ==========================================================
   v11 — Material-inspired refinement layer
   Preserves Hyperportal structure/content, but unifies surfaces,
   elevation, spacing and interaction states.
   ========================================================== */

:root{
  --md-primary:#3f5f98;
  --md-on-primary:#ffffff;
  --md-primary-container:#dbe6ff;
  --md-on-primary-container:#17325f;

  --md-secondary:#5a6f91;
  --md-secondary-container:#dde6f6;
  --md-on-secondary-container:#233753;

  --md-tertiary:#497b7d;
  --md-tertiary-container:#cceced;

  --md-surface:#fbfcff;
  --md-surface-1:#f5f7fb;
  --md-surface-2:#eef2f8;
  --md-surface-3:#e7edf6;
  --md-on-surface:#283141;
  --md-on-surface-variant:#6f7a8c;
  --md-outline:#c5cfdd;
  --md-outline-variant:#dce3ed;

  --md-elev-1:0 1px 2px rgba(27,39,60,.08),0 1px 3px 1px rgba(27,39,60,.05);
  --md-elev-2:0 2px 6px rgba(27,39,60,.10),0 1px 3px rgba(27,39,60,.07);
  --md-elev-3:0 6px 16px rgba(27,39,60,.12),0 2px 5px rgba(27,39,60,.08);

  --md-r-sm:8px;
  --md-r-md:12px;
  --md-r-lg:16px;
  --md-r-xl:22px;
}

html.dark{
  --md-primary:#adc7ff;
  --md-on-primary:#17325f;
  --md-primary-container:#2d4770;
  --md-on-primary-container:#dce7ff;

  --md-secondary:#bdc8dc;
  --md-secondary-container:#35485f;
  --md-on-secondary-container:#dde7f8;

  --md-tertiary:#a9d0d2;
  --md-tertiary-container:#284d4f;

  --md-surface:#111821;
  --md-surface-1:#17202b;
  --md-surface-2:#1d2835;
  --md-surface-3:#253241;
  --md-on-surface:#e7edf6;
  --md-on-surface-variant:#aeb9c7;
  --md-outline:#566477;
  --md-outline-variant:#39485a;

  --md-elev-1:0 1px 2px rgba(0,0,0,.30),0 1px 3px rgba(0,0,0,.18);
  --md-elev-2:0 3px 8px rgba(0,0,0,.32),0 1px 3px rgba(0,0,0,.22);
  --md-elev-3:0 8px 22px rgba(0,0,0,.36),0 2px 7px rgba(0,0,0,.24);
}

/* ---------- page ---------- */

body{
  background:
    radial-gradient(circle at 18% -5%,color-mix(in srgb,var(--md-primary) 9%,transparent),transparent 32%),
    var(--md-surface-1);
  color:var(--md-on-surface);
}

a{
  color:var(--md-primary);
}

/* ---------- header / top app surface ---------- */

.site-head{
  padding-top:10px;
}

.site-head::before{
  height:88px;
  background:
    linear-gradient(135deg,
      color-mix(in srgb,var(--md-primary) 88%,#20365e),
      var(--md-primary) 54%,
      color-mix(in srgb,var(--md-primary) 78%,#8ba7d2)
    );
  box-shadow:none;
}

html.dark .site-head::before{
  background:
    linear-gradient(135deg,#152237,#233957 52%,#355274);
}

.head-card{
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--md-r-xl) var(--md-r-xl) 0 0;
  background:
    linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.045)),
    color-mix(in srgb,var(--md-primary) 74%,#243c66);
  box-shadow:var(--md-elev-3);
}

.brand-mark{
  border-radius:var(--md-r-md);
  background:rgba(255,255,255,.11);
  box-shadow:none;
  transform:none;
}

.controls{
  gap:3px;
}

.size-control{
  border-radius:999px;
  opacity:.82;
}

.size-control.active::after{
  left:4px;
  right:4px;
  bottom:1px;
  background:#fff;
}

.theme-control{
  width:27px;
  height:27px;
  margin-left:4px;
  border-radius:999px;
  border-color:rgba(255,255,255,.22);
  background-color:rgba(255,255,255,.10);
}

.theme-control:hover{
  background-color:rgba(255,255,255,.18);
}

.status-strip{
  padding:7px 12px;
  background:rgba(0,0,0,.075);
  border-top:1px solid rgba(255,255,255,.10);
}

/* ---------- main body ---------- */

.main{
  border-color:var(--md-outline-variant);
  border-radius:0 0 var(--md-r-xl) var(--md-r-xl);
  background:var(--md-surface);
  box-shadow:var(--md-elev-3);
}

/* ---------- search ---------- */

.search-zone{
  padding:14px;
  background:var(--md-surface-2);
  border-bottom:1px solid var(--md-outline-variant);
}

.search-zone::before{
  color:var(--md-on-surface-variant);
}

input[type="search"],
select{
  height:40px;
  border:1px solid var(--md-outline);
  border-radius:var(--md-r-md);
  background:var(--md-surface);
  color:var(--md-on-surface);
  box-shadow:none;
}

input[type="search"]:hover,
select:hover{
  border-color:color-mix(in srgb,var(--md-primary) 42%,var(--md-outline));
}

input[type="search"]:focus,
select:focus{
  border-color:var(--md-primary);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--md-primary) 13%,transparent);
}

.search-btn{
  height:40px;
  padding:0 15px;
  border:0;
  border-radius:999px;
  background:var(--md-primary);
  color:var(--md-on-primary);
  box-shadow:var(--md-elev-1);
  font-weight:600;
}

.search-btn:hover{
  filter:none;
  background:color-mix(in srgb,var(--md-primary) 92%,#000);
  box-shadow:var(--md-elev-2);
}

/* ---------- feature rail ---------- */

.feature-rail{
  border-bottom:1px solid var(--md-outline-variant);
  background:var(--md-surface);
}

.trending{
  padding:14px;
  background:var(--md-surface);
}

.trending::after{
  left:14px;
  right:14px;
  background:linear-gradient(90deg,var(--md-outline-variant),transparent 84%);
}

.module-title{
  color:var(--md-on-surface);
  font-size:10px;
  letter-spacing:.11em;
}

.module-title::before{
  height:3px;
  border-radius:999px;
  background:var(--md-primary);
  box-shadow:9px 0 0 var(--md-tertiary);
}

.trending .module-title::after{
  padding:3px 7px;
  border:0;
  border-radius:999px;
  background:var(--md-secondary-container);
  color:var(--md-on-secondary-container);
}

/* trending rows as tonal list tiles */
.trend-list{
  gap:5px;
}

.trend-row{
  min-height:36px;
  padding:5px 7px 5px 5px;
  border:1px solid transparent;
  border-radius:var(--md-r-md);
}

.trend-row::before{
  display:none;
}

.trend-row:hover{
  transform:none;
  border-color:var(--md-outline-variant);
  background:var(--md-surface-2);
}

.badge{
  width:24px;
  height:24px;
  border-radius:8px;
  box-shadow:none;
}

.badge::after{
  display:none;
}

.trend-row strong{
  color:var(--md-on-surface);
}

.meta{
  min-height:18px;
  padding:2px 6px;
  border:0;
  border-radius:999px;
  background:var(--md-secondary-container);
  color:var(--md-on-secondary-container);
  font-weight:600;
}

.trend-row a:last-of-type{
  color:var(--md-on-surface-variant);
}

/* ---------- random pick ---------- */

.quick-panel{
  padding:14px 14px 17px;
  border-left:1px solid var(--md-outline-variant);
  background:var(--md-surface-2);
}

.quick-panel::after{
  opacity:.018;
}

.pick-shell{
  padding:15px 3px 5px 10px;
}

.pick-feature{
  min-height:144px;
  padding:14px 12px 12px 94px;
  border:1px solid var(--md-outline-variant);
  border-radius:var(--md-r-lg);
  background:
    radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--md-primary) 7%,transparent),transparent 40%),
    var(--md-surface);
  box-shadow:var(--md-elev-2);
}

.pick-feature::before{
  background:rgba(27,39,60,.10);
  opacity:.58;
}

.pick-feature::after{
  left:94px;
  background:linear-gradient(90deg,var(--md-primary),var(--md-tertiary),transparent 84%);
}

.pick-feature:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--md-primary) 34%,var(--md-outline-variant));
  box-shadow:var(--md-elev-3);
}

.pick-poster{
  left:11px;
  width:76px;
  border:2px solid var(--md-surface);
  border-radius:var(--md-r-md);
  box-shadow:var(--md-elev-3);
}

.pick-poster::before{
  background:rgba(239,226,190,.46);
}

.pick-title{
  color:var(--md-on-surface);
}

.pick-meta{
  color:var(--md-on-surface-variant);
}

.pick-desc{
  color:var(--md-on-surface-variant);
}

.pick-open{
  min-height:28px;
  padding:0 11px;
  border:0;
  border-radius:999px;
  background:var(--md-primary);
  color:var(--md-on-primary)!important;
  box-shadow:var(--md-elev-1);
}

.pick-open:hover{
  filter:none;
  box-shadow:var(--md-elev-2);
}

.pick-next{
  color:var(--md-primary);
  font-weight:600;
}

/* ---------- share / utility ---------- */

.utility-row{
  padding:10px 13px;
  border-bottom:1px solid var(--md-outline-variant);
  background:var(--md-surface);
}

.share{
  min-height:30px;
  padding:0 10px;
  border-radius:999px;
  box-shadow:none;
}

.utility-note{
  color:var(--md-on-surface-variant);
}

/* ---------- ads ---------- */

.ad-row{
  padding:9px 13px;
  border-bottom:1px solid var(--md-outline-variant);
  background:var(--md-surface-2);
}

.ad-badge{
  border:0;
  border-radius:999px;
  background:var(--md-tertiary);
}

/* ---------- category console ---------- */

.categories{
  gap:10px;
  padding:11px;
  background:var(--md-surface-2);
  border-color:var(--md-outline-variant);
}

.categories::before,
.categories::after{
  display:none;
}

.category{
  min-height:140px;
  border:1px solid var(--md-outline-variant);
  border-radius:var(--md-r-lg);
  background:var(--md-surface);
  box-shadow:var(--md-elev-1);
}

.category::after{
  display:none;
}

.category:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--cat-accent) 32%,var(--md-outline-variant));
  background:
    radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--cat-accent) 7%,transparent),transparent 46%),
    var(--md-surface);
  box-shadow:var(--md-elev-2);
}

.category .icon{
  border:0;
  border-radius:var(--md-r-md);
  background:color-mix(in srgb,var(--cat-accent) 9%,var(--md-surface-2));
  color:color-mix(in srgb,var(--cat-accent) 76%,var(--md-primary));
  box-shadow:none;
}

.category .icon::before{
  display:none;
}

.icon::after{
  width:8px;
  height:8px;
  right:-2px;
  top:-2px;
  border:2px solid var(--md-surface);
  box-shadow:none;
}

.cat-kicker{
  color:var(--md-on-surface-variant);
}

.cat-title a{
  color:var(--md-on-surface);
}

.cat-title a:hover{
  color:var(--md-primary);
}

.cat-sub{
  gap:5px;
}

.cat-sub a{
  min-height:22px;
  padding:3px 7px;
  border:0;
  border-radius:999px;
  background:var(--md-surface-2);
  color:var(--md-on-surface-variant);
}

.cat-sub a:hover{
  transform:none;
  background:color-mix(in srgb,var(--cat-accent) 10%,var(--md-surface-2));
  color:var(--md-primary);
}

.cat-go{
  width:28px;
  height:28px;
  border:0;
  border-radius:999px;
  background:var(--md-surface-2);
  box-shadow:none;
}

.category:hover .cat-go{
  background:color-mix(in srgb,var(--cat-accent) 10%,var(--md-surface-2));
}

.category .cat-copy::after{
  display:none;
}

/* ---------- lower information ---------- */

.lower{
  border-top:1px solid var(--md-outline-variant);
  background:var(--md-surface);
}

.lower-main{
  padding:14px;
}

.lower-title{
  color:var(--md-on-surface);
}

.contact,
.bottom-tagline{
  color:var(--md-on-surface-variant);
}

.links{
  gap:7px;
}

.links span{
  color:var(--md-outline);
}

.portal-status{
  padding:14px;
  border-left:1px solid var(--md-outline-variant);
  background:var(--md-surface-2);
}

.status-line{
  color:var(--md-on-surface-variant);
}

.status-line b{
  color:var(--md-on-surface);
}

.visitors-pill{
  border:0;
  background:var(--md-secondary-container);
  color:var(--md-on-secondary-container);
}

/* ---------- footer / copyright ---------- */

.site-foot{
  padding-top:16px;
}

.site-foot::before{
  top:31px;
  height:36px;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb,var(--md-primary) 86%,#213761) 0%,
      var(--md-primary) 40%,
      color-mix(in srgb,var(--md-primary) 74%,#7797c8) 100%
    );
  border-top:0;
  border-bottom:0;
  box-shadow:none;
}

.footer-card{
  min-height:68px;
  border:1px solid var(--md-outline-variant);
  border-radius:var(--md-r-lg);
  background:var(--md-surface);
  box-shadow:var(--md-elev-2);
}

.footer-card::after{
  color:color-mix(in srgb,var(--md-primary) 6%,transparent);
}

.footer-top{
  min-height:66px;
  padding:11px 13px;
}

.footer-mark{
  width:30px;
  height:30px;
  border:0;
  border-radius:var(--md-r-md);
  background:var(--md-primary-container);
  color:var(--md-on-primary-container);
  box-shadow:none;
  transform:none;
}

.footer-wordmark{
  color:var(--md-on-surface);
}

.footer-copy,
.footer-code{
  color:var(--md-on-surface-variant);
}

/* ---------- global subtle state layer ---------- */

.category,
.pick-feature,
.trend-row,
.share,
.search-btn,
.pick-open,
.cat-sub a,
.cat-go,
.theme-control{
  -webkit-tap-highlight-color:transparent;
}

/* ---------- dark material surfaces ---------- */

html.dark body{
  background:
    radial-gradient(circle at 18% -5%,rgba(91,124,176,.11),transparent 32%),
    var(--md-surface-1);
}

html.dark .main,
html.dark .category,
html.dark .pick-feature,
html.dark .footer-card{
  background-color:var(--md-surface);
}

html.dark .search-zone,
html.dark .quick-panel,
html.dark .portal-status,
html.dark .ad-row,
html.dark .categories{
  background-color:var(--md-surface-2);
}

html.dark input[type="search"],
html.dark select{
  background:var(--md-surface);
  color:var(--md-on-surface);
  border-color:var(--md-outline);
}

/* ---------- responsive material adjustments ---------- */

@media(max-width:640px){
  .site-head{
    padding-top:6px;
  }

  .head-card{
    border-radius:14px 14px 0 0;
  }

  .main{
    border-radius:0 0 14px 14px;
  }

  .search-zone{
    padding:11px 9px;
  }

  input[type="search"],
  select,
  .search-btn{
    height:38px;
  }

  .trending{
    padding:11px 9px 12px;
  }

  .quick-panel{
    padding:12px 9px 15px;
  }

  .pick-feature{
    padding-left:81px;
    border-radius:14px;
  }

  .pick-feature::after{
    left:81px;
  }

  .pick-poster{
    left:8px;
    width:66px;
  }

  .categories{
    gap:7px;
    padding:8px;
  }

  .category{
    border-radius:14px;
  }

  .portal-status{
    border-left:0;
    border-top:1px solid var(--md-outline-variant);
  }

  .footer-card{
    border-radius:14px;
  }
}



/* ==========================================================
   v12 — Material polish pass
   More cohesive spacing, quieter elevation, stronger hierarchy.
   ========================================================== */

:root{
  --md-elev-1:0 1px 2px rgba(27,39,60,.07),0 1px 3px rgba(27,39,60,.04);
  --md-elev-2:0 3px 8px rgba(27,39,60,.09),0 1px 3px rgba(27,39,60,.05);
  --md-elev-3:0 8px 24px rgba(27,39,60,.12),0 2px 6px rgba(27,39,60,.06);

  --md-space-1:4px;
  --md-space-2:8px;
  --md-space-3:12px;
  --md-space-4:16px;
}

/* page breathing room */
.wrap{
  width:min(736px,calc(100% - 16px));
}

/* header becomes a little calmer and more app-bar-like */
.head-card{
  border-radius:18px 18px 0 0;
}

.head-top{
  min-height:58px;
  padding:11px 14px 9px;
}

.brand{
  font-size:20px;
}

.brand small{
  opacity:.72;
}

.tagline{
  margin-top:5px;
  opacity:.68;
}

.status-strip{
  padding:6px 14px;
  font-size:8px;
}

/* controls stay familiar but sit more naturally */
.size-control{
  width:23px;
  height:23px;
  line-height:23px;
}

.theme-control{
  width:28px;
  height:28px;
}

/* main surface */
.main{
  border-radius:0 0 18px 18px;
}

/* search: clearer container hierarchy */
.search-zone{
  padding:15px 14px 14px;
}

.search-zone::before{
  margin-bottom:8px;
  font-size:7.5px;
  letter-spacing:.16em;
}

.search-row{
  gap:8px;
}

input[type="search"],
select{
  height:42px;
  padding:0 11px;
  border-radius:12px;
  font-size:12px;
}

.search-btn{
  height:42px;
  padding:0 16px;
  font-size:11px;
  letter-spacing:.01em;
}

/* section titles become more consistent */
.module-title{
  min-height:20px;
  margin-bottom:10px;
  font-size:9px;
  letter-spacing:.13em;
}

.module-title::before{
  width:16px;
  height:3px;
}

/* trending: less busy, more list-tile */
.trending{
  padding:14px 14px 15px;
}

.trend-list{
  gap:4px;
}

.trend-row{
  min-height:38px;
  padding:6px 8px 6px 6px;
  border-radius:11px;
}

.trend-row:hover{
  background:
    linear-gradient(90deg,color-mix(in srgb,var(--trend-accent) 5%,transparent),transparent 62%),
    var(--md-surface-2);
}

.trend-row strong{
  font-size:10px;
}

.trend-row a:first-of-type{
  font-weight:600;
}

.meta{
  min-height:19px;
  padding:2px 7px;
  font-size:8px;
}

.trend-row a:last-of-type{
  opacity:.75;
}

.trend-row:hover a:last-of-type{
  opacity:1;
}

/* random pick: Material feature surface, poster still floats */
.quick-panel{
  padding:14px 14px 18px;
}

.pick-shell{
  padding:16px 3px 7px 11px;
}

.pick-feature{
  min-height:148px;
  padding:15px 13px 13px 96px;
  border-radius:17px;
  box-shadow:var(--md-elev-2);
}

.pick-feature::before{
  left:30px;
  right:24px;
  bottom:-7px;
  height:16px;
  opacity:.45;
}

.pick-feature::after{
  left:96px;
  right:16px;
  opacity:.58;
}

.pick-feature:hover{
  transform:translateY(-2px);
  box-shadow:var(--md-elev-3);
}

.pick-poster{
  left:12px;
  top:-17px;
  width:76px;
  border-radius:13px;
  transform:rotate(-1.7deg);
}

.pick-feature:hover .pick-poster{
  transform:translateY(-2px) rotate(-.8deg);
}

.pick-poster::before{
  opacity:.85;
}

.pick-copy{
  min-height:118px;
}

.pick-eyebrow{
  color:var(--md-on-surface-variant);
  font-size:6.8px;
}

.pick-title{
  font-size:17px;
  line-height:1.08;
}

.pick-meta{
  margin-bottom:8px;
}

.pick-desc{
  max-width:205px;
  font-size:8.8px;
  line-height:1.45;
}

.pick-actions{
  margin-top:9px;
}

.pick-open{
  min-height:30px;
  padding:0 13px;
  font-size:9px;
  font-weight:600;
}

.pick-next{
  min-height:30px;
  padding:0 8px;
  border-radius:999px;
  background:transparent;
  font-size:8.5px;
}

.pick-next:hover{
  background:color-mix(in srgb,var(--md-primary) 7%,transparent);
  text-decoration:none;
}

/* share chips feel like utility actions rather than old web buttons */
.utility-row{
  padding:11px 14px;
}

.share{
  min-height:31px;
  padding:0 11px;
  font-size:10px;
  font-weight:600;
}

.x{
  background:#17191d;
}

.fb{
  background:#2b67ba;
}

.wa{
  background:#239a62;
}

/* ad row becomes a subtle tonal strip */
.ad-row{
  padding:9px 14px;
  font-size:10px;
}

.ad-badge{
  padding:3px 6px;
  font-size:7px;
}

/* categories: more Material collection, less bespoke decoration */
.categories{
  gap:9px;
  padding:11px;
}

.category{
  min-height:142px;
  padding:14px;
  border-radius:16px;
  box-shadow:none;
}

.category:hover{
  transform:none;
  box-shadow:var(--md-elev-1);
}

.category::before{
  right:10px;
  top:8px;
  font-size:40px;
  opacity:.62;
}

.category .icon{
  left:14px;
  top:14px;
  width:42px;
  height:42px;
  border-radius:12px;
}

.icon::after{
  width:7px;
  height:7px;
}

.cat-copy{
  padding-left:54px;
  padding-right:34px;
}

.cat-kicker{
  margin-bottom:5px;
  font-size:6.8px;
}

.cat-title{
  margin-bottom:10px;
  font-size:16.5px;
}

.cat-sub{
  gap:5px;
}

.cat-sub a{
  min-height:23px;
  padding:3px 8px;
  font-size:8.2px;
}

.cat-go{
  right:10px;
  bottom:10px;
  width:29px;
  height:29px;
}

.cat-go::after{
  font-size:12px;
}

/* lower zone: fewer visual partitions */
.lower-main{
  padding:15px 14px;
}

.lower-title{
  margin-bottom:7px;
  font-size:9px;
}

.contact{
  line-height:1.5;
}

.portal-status{
  padding:15px 14px;
}

.status-line{
  margin-bottom:8px;
  font-size:8.5px;
}

.status-line:last-child{
  margin-bottom:0;
}

/* footer feels anchored to the page strip */
.site-foot{
  padding:17px 0 22px;
}

.site-foot::before{
  top:33px;
  height:38px;
}

.footer-card{
  min-height:70px;
  border-radius:16px;
  box-shadow:var(--md-elev-2);
}

.footer-top{
  min-height:68px;
  padding:12px 14px;
}

.footer-mark{
  width:31px;
  height:31px;
  border-radius:11px;
}

.footer-wordmark{
  font-size:11px;
}

.footer-copy{
  font-size:7.8px;
}

.footer-code{
  font-size:7.8px;
}

/* state layers instead of exaggerated movement */
.search-btn,
.pick-open,
.share,
.cat-go,
.cat-sub a,
.theme-control{
  transition:
    background-color .14s ease,
    box-shadow .14s ease,
    border-color .14s ease,
    opacity .14s ease,
    transform .10s ease;
}

.search-btn:active,
.pick-open:active,
.share:active{
  transform:scale(.985);
}

/* mobile polish */
@media(max-width:640px){
  .wrap{
    width:calc(100% - 8px);
  }

  .head-top{
    min-height:54px;
    padding:9px 9px 8px;
  }

  .search-zone{
    padding:11px 9px;
  }

  input[type="search"],
  select,
  .search-btn{
    height:39px;
  }

  .trending{
    padding:11px 9px 12px;
  }

  .trend-row{
    min-height:36px;
  }

  .quick-panel{
    padding:12px 9px 15px;
  }

  .pick-shell{
    padding:13px 2px 4px 8px;
  }

  .pick-feature{
    min-height:122px;
    padding:11px 8px 10px 80px;
    border-radius:14px;
  }

  .pick-feature::after{
    left:80px;
  }

  .pick-poster{
    left:8px;
    top:-13px;
    width:66px;
  }

  .categories{
    padding:8px;
    gap:7px;
  }

  .category{
    min-height:118px;
    padding:12px 11px;
    border-radius:14px;
  }

  .category .icon{
    left:11px;
    top:12px;
    width:40px;
    height:40px;
  }

  .cat-copy{
    padding-left:50px;
    padding-right:30px;
  }

  .portal-status{
    padding:12px 11px;
  }

  .footer-card{
    border-radius:14px;
  }
}



/* ==========================================================
   CONNECTED PAGES — locked to the v12 visual language
   ========================================================== */
.preview-page{display:none}
.preview-page.is-active{display:block}
.preview-page > .main{margin-top:0}

.subpage-main{
  overflow:hidden;
}

.subpage-hero{
  position:relative;
  padding:18px 16px 15px;
  border-bottom:1px solid var(--md-outline-variant);
  background:
    radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--md-primary) 9%,transparent),transparent 42%),
    var(--md-surface-2);
}
.subpage-kicker{
  display:flex;
  align-items:center;
  gap:7px;
  margin-bottom:5px;
  color:var(--md-on-surface-variant);
  font-size:7px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.subpage-kicker::before{
  content:"";
  width:16px;
  height:3px;
  border-radius:999px;
  background:var(--md-primary);
}
.subpage-title{
  margin:0;
  color:var(--md-on-surface);
  font-size:23px;
  line-height:1.05;
  letter-spacing:-.035em;
}
.subpage-intro{
  max-width:540px;
  margin-top:6px;
  color:var(--md-on-surface-variant);
  font-size:10px;
  line-height:1.5;
}

.portal-nav{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  padding:10px 14px;
  border-bottom:1px solid var(--md-outline-variant);
  background:var(--md-surface);
}
.portal-chip{
  display:inline-flex;
  align-items:center;
  min-height:27px;
  padding:0 9px;
  border:0;
  border-radius:999px;
  background:var(--md-surface-2);
  color:var(--md-on-surface-variant);
  font-size:8.5px;
  font-weight:600;
  text-decoration:none!important;
}
.portal-chip:hover,
.portal-chip.active{
  background:var(--md-primary-container);
  color:var(--md-on-primary-container);
}
.portal-chip.dot::before{
  content:"";
  width:6px;height:6px;
  margin-right:5px;
  border-radius:50%;
  background:var(--md-tertiary);
}

.sub-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  padding:12px;
  background:var(--md-surface-2);
}
.sub-card{
  position:relative;
  min-width:0;
  padding:13px;
  border:1px solid var(--md-outline-variant);
  border-radius:16px;
  background:var(--md-surface);
  box-shadow:var(--md-elev-1);
}
.sub-card.full{grid-column:1/-1}
.sub-card-title{
  display:flex;
  align-items:center;
  gap:7px;
  margin-bottom:8px;
  color:var(--md-on-surface);
  font-size:10px;
  font-weight:700;
  letter-spacing:.02em;
}
.sub-card-title::before{
  content:"";
  width:8px;height:8px;
  border-radius:3px;
  background:var(--md-primary);
}
.sub-card p{
  margin:0 0 7px;
  color:var(--md-on-surface-variant);
  font-size:9.5px;
  line-height:1.5;
}
.sub-card p:last-child{margin-bottom:0}

.filter-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 130px 130px;
  gap:7px;
  padding:12px;
  border-bottom:1px solid var(--md-outline-variant);
  background:var(--md-surface);
}
.filter-row.two{grid-template-columns:minmax(0,1fr) 160px}
.filter-row input,
.filter-row select{
  width:100%;
  height:39px;
}

.state-card{
  padding:20px 14px 22px;
  text-align:center;
  border-top:1px solid var(--md-outline-variant);
  background:var(--md-surface);
}
.state-icon{
  width:42px;height:42px;
  display:grid;
  place-items:center;
  margin:0 auto 8px;
  border-radius:14px;
  background:var(--md-primary-container);
  color:var(--md-on-primary-container);
  font-weight:700;
  font-size:17px;
}
.state-card h2{
  margin:0 0 5px;
  color:var(--md-on-surface);
  font-size:14px;
}
.state-card p{
  max-width:470px;
  margin:0 auto;
  color:var(--md-on-surface-variant);
  font-size:9.5px;
  line-height:1.5;
}

.tag-cloud{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
}
.tag-cloud a{
  min-height:24px;
  display:inline-flex;
  align-items:center;
  padding:0 8px;
  border-radius:999px;
  background:var(--md-surface-2);
  color:var(--md-on-surface-variant);
  font-size:8.5px;
  text-decoration:none!important;
}
.tag-cloud a:hover{
  background:var(--md-primary-container);
  color:var(--md-on-primary-container);
}

.service-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  padding:12px;
  background:var(--md-surface-2);
}
.service-card{
  min-height:76px;
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  gap:9px;
  align-items:center;
  padding:10px;
  border:1px solid var(--md-outline-variant);
  border-radius:15px;
  background:var(--md-surface);
  text-decoration:none!important;
}
.service-card:hover{
  border-color:color-mix(in srgb,var(--md-primary) 34%,var(--md-outline-variant));
  box-shadow:var(--md-elev-1);
}
.service-icon{
  width:38px;height:38px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:var(--md-secondary-container);
  color:var(--md-on-secondary-container);
  font-weight:700;
  font-size:13px;
}
.service-card strong{
  display:block;
  margin-bottom:3px;
  color:var(--md-on-surface);
  font-size:10px;
}
.service-card span{
  display:block;
  color:var(--md-on-surface-variant);
  font-size:8.5px;
  line-height:1.35;
}

.article-page{
  padding:14px;
  background:var(--md-surface-2);
}
.article-card{
  padding:16px;
  border:1px solid var(--md-outline-variant);
  border-radius:16px;
  background:var(--md-surface);
}
.article-card h2{
  margin:14px 0 6px;
  color:var(--md-on-surface);
  font-size:12px;
}
.article-card h2:first-child{margin-top:0}
.article-card p{
  margin:0 0 9px;
  color:var(--md-on-surface-variant);
  font-size:9.5px;
  line-height:1.58;
}
.article-card a{font-weight:600}

.form-grid{
  display:grid;
  gap:9px;
}
.form-grid label{
  display:grid;
  gap:4px;
  color:var(--md-on-surface-variant);
  font-size:8px;
  font-weight:700;
  letter-spacing:.04em;
}
.form-grid input,
.form-grid textarea,
.form-grid select{
  width:100%;
  box-sizing:border-box;
  border:1px solid var(--md-outline);
  border-radius:12px;
  background:var(--md-surface);
  color:var(--md-on-surface);
  padding:9px 10px;
}
.form-grid textarea{min-height:110px;resize:vertical}
.form-submit{
  justify-self:start;
  min-height:34px;
  padding:0 14px;
  border:0;
  border-radius:999px;
  background:var(--md-primary);
  color:var(--md-on-primary);
  font-weight:600;
}

.preview-toast{
  position:fixed;
  z-index:9999;
  left:50%;
  bottom:18px;
  transform:translate(-50%,10px);
  max-width:calc(100% - 24px);
  padding:8px 12px;
  border-radius:999px;
  background:#182231;
  color:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.24);
  font:10px/1.3 Arial,sans-serif;
  opacity:0;
  pointer-events:none;
  transition:.18s ease;
}
.preview-toast.show{opacity:1;transform:translate(-50%,0)}

@media(max-width:640px){
  .subpage-hero{padding:15px 11px 13px}
  .subpage-title{font-size:20px}
  .portal-nav{padding:8px 9px}
  .sub-grid,.service-grid{grid-template-columns:1fr;padding:8px;gap:7px}
  .sub-card.full{grid-column:auto}
  .filter-row,.filter-row.two{grid-template-columns:1fr;padding:9px}
  .article-page{padding:8px}
  .article-card{padding:13px}
}


.preview-data-note{
  display:flex;align-items:flex-start;gap:8px;margin:10px 12px 0;padding:8px 10px;
  border:1px solid var(--md-outline-variant);border-radius:12px;
  background:var(--md-primary-container);color:var(--md-on-primary-container);
  font-size:8.5px;line-height:1.4;
}
.preview-data-note::before{
  content:"i";flex:0 0 17px;width:17px;height:17px;display:grid;place-items:center;margin-top:1px;
  border-radius:50%;background:var(--md-on-primary-container);color:var(--md-primary-container);
  font:bold 10px/1 Georgia,serif;
}
.content-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:10px 12px 12px;
  background:var(--md-surface-2);
}
.content-grid.video-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.content-card{
  position:relative;min-width:0;overflow:hidden;border:1px solid var(--md-outline-variant);
  border-radius:14px;background:var(--md-surface);box-shadow:var(--md-elev-1);
  transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease;
}
.content-card:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--md-primary) 32%,var(--md-outline-variant));
  box-shadow:var(--md-elev-2);
}
.content-card a{color:inherit;text-decoration:none!important}
.poster{
  --a:#274a82;--b:#6687b6;--c:#d7b170;position:relative;aspect-ratio:3/4;overflow:hidden;
  background:
    radial-gradient(circle at 74% 24%,color-mix(in srgb,var(--c) 78%,white),transparent 0 14%,transparent 15%),
    linear-gradient(145deg,var(--a),var(--b) 56%,var(--c));
}
.poster::before{
  content:"";position:absolute;left:-15%;right:-8%;bottom:-4%;height:46%;
  background:color-mix(in srgb,var(--a) 76%,#111);
  clip-path:polygon(0 72%,18% 35%,31% 55%,48% 18%,63% 62%,78% 30%,100% 70%,100% 100%,0 100%);
  opacity:.88;
}
.poster::after{
  content:"";position:absolute;left:46%;bottom:7%;width:16%;height:48%;
  border-radius:50% 50% 12% 12%;background:color-mix(in srgb,var(--a) 88%,#0b1118);
  box-shadow:-13px 17px 0 -7px color-mix(in srgb,var(--c) 55%,transparent),
             13px 17px 0 -7px color-mix(in srgb,var(--c) 55%,transparent);
  transform:translateX(-50%);
}
.poster-label{
  position:absolute;z-index:3;left:6px;bottom:6px;padding:3px 5px;border-radius:5px;
  background:rgba(8,15,25,.64);color:#fff;font-size:6.5px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;backdrop-filter:blur(5px);
}
.card-body{padding:8px 8px 9px}
.card-kicker{margin-bottom:3px;color:var(--md-on-surface-variant);font-size:6.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.card-title{min-height:28px;color:var(--md-on-surface);font-size:10px;font-weight:700;line-height:1.25}
.card-meta{display:flex;flex-wrap:wrap;gap:3px;margin-top:6px}
.mini-chip{
  min-height:18px;display:inline-flex;align-items:center;padding:1px 5px;border-radius:999px;
  background:var(--md-surface-2);color:var(--md-on-surface-variant);font-size:6.8px;
}
.mini-chip.accent{background:var(--md-primary-container);color:var(--md-on-primary-container)}
.video-thumb{
  --a:#243d69;--b:#5c7fae;position:relative;aspect-ratio:16/9;overflow:hidden;
  background:
    radial-gradient(circle at 78% 28%,rgba(255,255,255,.17),transparent 0 18%,transparent 19%),
    linear-gradient(135deg,var(--a),var(--b));
}
.video-thumb::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 0 46%,rgba(255,255,255,.06) 46% 52%,transparent 52%),
             radial-gradient(circle at 25% 80%,rgba(255,255,255,.12),transparent 0 19%,transparent 20%);
}
.play-dot{
  position:absolute;z-index:2;left:50%;top:50%;width:34px;height:34px;display:grid;place-items:center;
  transform:translate(-50%,-50%);border-radius:50%;background:rgba(10,17,29,.62);color:#fff;
  box-shadow:0 5px 14px rgba(0,0,0,.20);
}
.play-dot::after{
  content:"";margin-left:2px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:8px solid currentColor;
}
.video-duration{position:absolute;right:5px;bottom:5px;padding:2px 4px;border-radius:4px;background:rgba(10,17,29,.74);color:#fff;font:7px/1.2 monospace}
.video-card{display:grid;grid-template-columns:152px minmax(0,1fr);min-height:88px}
.video-card .video-thumb{aspect-ratio:auto;min-height:88px}
.video-card .card-body{display:flex;flex-direction:column}
.video-card .card-title{min-height:auto;font-size:10.5px}
.video-card .card-meta{margin-top:auto}
.download-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:10px 12px 12px;background:var(--md-surface-2);
}
.download-card{overflow:hidden;border:1px solid var(--md-outline-variant);border-radius:14px;background:var(--md-surface)}
.wallpaper-thumb{
  --a:#476d8c;--b:#86a777;--c:#c8d6bf;position:relative;aspect-ratio:4/3;
  background:radial-gradient(circle at 72% 24%,var(--c),transparent 0 12%,transparent 13%),
             linear-gradient(150deg,var(--a),var(--b));
}
.wallpaper-thumb::before,.wallpaper-thumb::after{
  content:"";position:absolute;left:-5%;right:-5%;bottom:0;height:58%;
  background:color-mix(in srgb,var(--a) 62%,#21344b);
  clip-path:polygon(0 76%,20% 24%,34% 55%,51% 8%,70% 54%,83% 34%,100% 70%,100% 100%,0 100%);
}
.wallpaper-thumb::after{
  height:35%;opacity:.8;transform:translateY(12%);background:color-mix(in srgb,var(--b) 72%,#31563f);
}
.audio-thumb{
  position:relative;aspect-ratio:4/3;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--md-primary) 12%,transparent),transparent 0 34%,transparent 35%),var(--md-surface-2);
}
.wave{display:flex;align-items:center;gap:3px;height:44px}
.wave span{width:4px;border-radius:999px;background:var(--md-primary)}
.wave span:nth-child(1){height:14px}.wave span:nth-child(2){height:31px}.wave span:nth-child(3){height:43px}
.wave span:nth-child(4){height:23px}.wave span:nth-child(5){height:37px}.wave span:nth-child(6){height:17px}
.download-type{
  position:absolute;left:6px;top:6px;padding:3px 5px;border-radius:999px;background:rgba(10,17,29,.68);
  color:#fff;font-size:6.5px;font-weight:700;letter-spacing:.08em;
}
.section-bar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 12px 7px;background:var(--md-surface-2)
}
.section-bar strong{color:var(--md-on-surface);font-size:10px}
.section-bar span{color:var(--md-on-surface-variant);font-size:7.5px}
.page-controls{
  display:flex;justify-content:center;gap:4px;padding:4px 12px 13px;background:var(--md-surface-2)
}
.page-controls a{
  min-width:26px;height:26px;display:grid;place-items:center;border-radius:8px;background:var(--md-surface);
  color:var(--md-on-surface-variant);box-shadow:var(--md-elev-1);font-size:8px;text-decoration:none!important;
}
.page-controls a.current{background:var(--md-primary);color:var(--md-on-primary)}
@media(max-width:640px){
  .preview-data-note{margin:8px 8px 0}
  .content-grid{grid-template-columns:repeat(2,minmax(0,1fr));padding:8px;gap:7px}
  .content-grid.video-grid{grid-template-columns:1fr}
  .video-card{grid-template-columns:120px minmax(0,1fr)}
  .download-grid{grid-template-columns:repeat(2,minmax(0,1fr));padding:8px;gap:7px}
  .section-bar{padding:10px 8px 6px}
  .page-controls{padding:3px 8px 11px}
}

/* ==========================================================
   Index refinement — requested cleanup pass
   ========================================================== */

/* Top strip: one quiet statement only */
.status-strip{
  justify-content:flex-end;
}
.status-right{
  opacity:.76;
  letter-spacing:.10em;
}

/* Random Pick: more atmospheric and feature-like */
.quick-panel{
  background:
    radial-gradient(circle at 16% 25%,color-mix(in srgb,var(--md-primary) 10%,transparent),transparent 28%),
    radial-gradient(circle at 94% 82%,color-mix(in srgb,var(--md-tertiary) 10%,transparent),transparent 35%),
    var(--md-surface-2);
}
.quick-panel::after{
  content:"DISCOVER";
  right:-20px;
  bottom:16px;
  color:color-mix(in srgb,var(--md-primary) 5%,transparent);
  font-size:37px;
}
.quick-panel .module-title::after{
  content:"SURPRISE ME";
  margin-left:auto;
  padding:3px 7px;
  border-radius:999px;
  background:var(--md-primary-container);
  color:var(--md-on-primary-container);
  font-size:6.5px;
  font-weight:700;
  letter-spacing:.11em;
}
.pick-shell{
  padding:19px 4px 8px 12px;
}
.pick-shell::before{
  content:"";
  position:absolute;
  z-index:0;
  width:72px;
  height:72px;
  left:-2px;
  top:3px;
  border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--md-primary) 18%,transparent),transparent 68%);
  filter:blur(2px);
  pointer-events:none;
}
.pick-shell::after{
  content:"✦";
  position:absolute;
  z-index:5;
  left:74px;
  top:7px;
  color:var(--md-tertiary);
  font-size:9px;
  opacity:.72;
  transform:rotate(12deg);
  pointer-events:none;
}
.pick-feature{
  min-height:154px;
  padding:16px 14px 14px 104px;
  border-color:color-mix(in srgb,var(--md-primary) 20%,var(--md-outline-variant));
  border-radius:18px;
  background:
    radial-gradient(circle at 96% 12%,color-mix(in srgb,var(--md-tertiary) 12%,transparent),transparent 29%),
    radial-gradient(circle at 8% 100%,color-mix(in srgb,var(--md-primary) 8%,transparent),transparent 35%),
    var(--md-surface);
  box-shadow:
    0 10px 24px rgba(27,39,60,.11),
    0 2px 6px rgba(27,39,60,.06);
}
.pick-feature::after{
  left:104px;
  right:16px;
  height:3px;
  background:linear-gradient(90deg,var(--md-primary),var(--md-tertiary),transparent 86%);
  opacity:.68;
}
.pick-feature:hover{
  transform:translateY(-3px);
  box-shadow:
    0 17px 34px rgba(27,39,60,.14),
    0 3px 8px rgba(27,39,60,.07);
}
.pick-poster{
  left:10px;
  top:-22px;
  width:84px;
  border-radius:15px;
  transform:rotate(-2.2deg);
  box-shadow:
    0 20px 34px rgba(26,43,68,.24),
    0 5px 10px rgba(26,43,68,.11);
}
.pick-feature:hover .pick-poster{
  transform:translateY(-3px) rotate(-1deg) scale(1.01);
}
.pick-poster::before{
  width:29px;
  height:38px;
  left:28px;
  top:-17px;
  opacity:.72;
}
.pick-eyebrow{
  margin-bottom:5px;
  color:var(--md-primary);
}
.pick-title{
  font-size:18px;
  line-height:1.04;
}
.pick-meta{
  margin-bottom:8px;
  font-weight:600;
}
.pick-desc{
  max-width:215px;
  line-height:1.48;
}
.pick-actions{
  gap:7px;
  margin-top:10px;
}
.pick-open{
  min-height:31px;
  padding:0 14px;
  box-shadow:var(--md-elev-1);
}
.pick-open::after{
  content:"↗";
  margin-left:6px;
  font-size:10px;
}
.pick-next{
  min-height:31px;
  padding:0 10px;
  border:0;
  border-radius:999px;
  background:var(--md-surface-2);
}
.pick-next:hover{
  background:var(--md-secondary-container);
  color:var(--md-on-secondary-container);
}
.pick-counter{
  top:-1px;
  right:2px;
  padding:3px 6px;
  border-radius:999px;
  background:var(--md-surface-2);
  opacity:.8;
}

/* Sharing: tonal buttons with distinct icon bubbles */
.utility-row{
  padding:11px 14px;
}
.shares{
  gap:7px;
}
.share{
  min-height:32px;
  gap:6px;
  padding:0 10px 0 6px;
  border:1px solid var(--md-outline-variant);
  border-radius:999px;
  background:var(--md-surface)!important;
  color:var(--md-on-surface)!important;
  box-shadow:var(--md-elev-1);
  font-size:9px;
  font-weight:600;
}
.share::before{
  width:21px;
  height:21px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#fff;
  font:bold 10px/1 Arial,sans-serif;
}
.share.x::before{
  content:"X";
  background:#17191d;
}
.share.fb::before{
  content:"f";
  background:#2b67ba;
  font-size:12px;
}
.share.wa::before{
  content:"☎";
  background:#239a62;
  font-size:10px;
}
.share:hover{
  filter:none;
  transform:translateY(-1px);
  border-color:color-mix(in srgb,var(--md-primary) 24%,var(--md-outline-variant));
  box-shadow:var(--md-elev-2);
}
.utility-note{
  color:var(--md-on-surface-variant);
  letter-spacing:.10em;
}

/* Lower information: keep useful status, remove release/layout housekeeping */
.portal-status .status-line b{
  max-width:135px;
  text-align:right;
  line-height:1.25;
}
.portal-status .status-line:nth-child(2) b,
.portal-status .status-line:nth-child(4) b{
  color:var(--md-on-surface-variant);
  font-size:8.3px;
  font-weight:600;
}

/* Footer: copyright identity rather than another product label */
.footer-mark{
  background:var(--md-primary-container);
  color:var(--md-on-primary-container);
  font-size:14px;
}
.footer-wordmark{
  letter-spacing:.01em;
}
.footer-code{
  color:var(--md-on-surface-variant);
  letter-spacing:.08em;
}
.footer-card::after{
  content:"©";
  right:8px;
  top:-2px;
  font-size:62px;
  transform:rotate(-7deg);
}

/* Mobile */
@media(max-width:640px){
  .status-strip{
    justify-content:center;
  }
  .status-right{
    text-align:center;
  }
  .pick-shell{
    padding:15px 3px 5px 10px;
  }
  .pick-feature{
    min-height:128px;
    padding:12px 9px 11px 86px;
  }
  .pick-feature::after{
    left:86px;
  }
  .pick-poster{
    left:8px;
    top:-16px;
    width:70px;
  }
  .pick-title{
    font-size:15px;
  }
  .pick-desc{
    display:none;
  }
  .share{
    min-height:30px;
    padding-right:9px;
  }
  .utility-note{
    display:none;
  }
}

/* ==========================================================
   Index refinement v2
   ========================================================== */

/* Trending: denser and quicker to scan */
.trending{
  padding:11px 12px 12px;
}
.trending .module-title{
  min-height:18px;
  margin-bottom:7px;
}
.trend-list{
  gap:2px;
}
.trend-row{
  min-height:31px;
  padding:4px 6px 4px 5px;
  border-radius:9px;
}
.trend-row strong{
  font-size:9.6px;
}
.trend-row a:first-of-type{
  font-size:9.8px;
  line-height:1.2;
}
.trend-row a:last-of-type{
  font-size:7.5px;
}
.badge{
  width:21px;
  height:21px;
  border-radius:7px;
  font-size:8px;
}
.meta{
  min-height:17px;
  padding:1px 5px;
  font-size:7.6px;
}
.trending .module-title::after{
  padding:2px 6px;
  font-size:6.5px;
}

/* Random Pick: larger floating poster */
.pick-shell{
  padding:22px 4px 10px 14px;
}
.pick-feature{
  min-height:168px;
  padding:17px 14px 14px 116px;
}
.pick-feature::after{
  left:116px;
}
.pick-poster{
  left:10px;
  top:-27px;
  width:96px;
  border-radius:16px;
  transform:rotate(-2.4deg);
  box-shadow:
    0 24px 38px rgba(26,43,68,.26),
    0 6px 12px rgba(26,43,68,.12);
}
.pick-feature:hover .pick-poster{
  transform:translateY(-4px) rotate(-1deg) scale(1.015);
}
.pick-poster::before{
  width:31px;
  height:40px;
  left:33px;
}
.pick-copy{
  min-height:130px;
}
.pick-title{
  font-size:18.5px;
}
.pick-desc{
  max-width:220px;
}
.pick-counter{
  right:2px;
  top:-2px;
}

/* A subtle auto-shuffle cue */
.pick-counter::before{
  content:"AUTO · ";
  color:var(--md-tertiary);
  font-weight:700;
}

/* X / Twitter needs a touch more width */
.share.x{
  padding-right:12px;
}

/* Footer separator */
.footer-brand .footer-wordmark + *{
  color:var(--md-on-surface-variant);
}

@media(max-width:640px){
  .trending{
    padding:9px 8px 10px;
  }
  .trend-row{
    min-height:29px;
    padding:3px 5px 3px 4px;
  }
  .badge{
    width:20px;
    height:20px;
  }

  .pick-shell{
    padding:18px 3px 7px 10px;
  }
  .pick-feature{
    min-height:139px;
    padding:13px 9px 11px 94px;
  }
  .pick-feature::after{
    left:94px;
  }
  .pick-poster{
    left:7px;
    top:-20px;
    width:80px;
  }
  .pick-title{
    font-size:15.5px;
  }
}

/* ==========================================================
   Index refinement v3 — visual polish only
   ========================================================== */

/* 1) Brand mark: slightly more distinctive, still Material-clean */
.brand-mark{
  position:relative;
  overflow:hidden;
  width:34px;
  height:34px;
  border:1px solid rgba(255,255,255,.20);
  border-radius:12px;
  background:
    radial-gradient(circle at 28% 22%,rgba(255,255,255,.22),transparent 0 30%,transparent 31%),
    linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.06));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 5px 12px rgba(20,37,65,.15);
}
.brand-mark::before{
  content:"";
  position:absolute;
  width:18px;
  height:18px;
  right:-5px;
  bottom:-5px;
  border:4px solid rgba(255,255,255,.09);
  border-radius:50%;
}
.brand-mark::after{
  content:"";
  position:absolute;
  left:5px;
  right:5px;
  bottom:4px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,#fff,rgba(255,255,255,.20));
  opacity:.58;
}

/* 2) Section transitions: tiny tonal rails, not more cards */
.search-zone,
.feature-rail,
.utility-row,
.ad-row,
.categories,
.lower{
  position:relative;
}
.search-zone::after,
.feature-rail::after,
.utility-row::after,
.ad-row::after,
.categories::after,
.lower::after{
  content:"";
  position:absolute;
  z-index:4;
  left:14px;
  right:14px;
  bottom:-1px;
  height:1px;
  background:
    linear-gradient(
      90deg,
      transparent,
      color-mix(in srgb,var(--md-primary) 14%,var(--md-outline-variant)) 12%,
      var(--md-outline-variant) 50%,
      color-mix(in srgb,var(--md-tertiary) 14%,var(--md-outline-variant)) 88%,
      transparent
    );
  pointer-events:none;
}
.categories::after,
.lower::after{
  left:11px;
  right:11px;
}

/* 3) Ads: unmistakably sponsored, visually quieter than content */
.ad-row{
  gap:8px;
  min-height:34px;
  padding:8px 14px;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb,var(--md-secondary-container) 52%,var(--md-surface-2)),
      var(--md-surface-2) 46%,
      color-mix(in srgb,var(--md-tertiary-container) 28%,var(--md-surface-2))
    );
}
.ad-row::before{
  content:"";
  width:3px;
  align-self:stretch;
  min-height:18px;
  border-radius:999px;
  background:var(--md-secondary);
  opacity:.45;
}
.ad-badge{
  min-width:27px;
  min-height:18px;
  display:inline-grid;
  place-items:center;
  padding:0 6px;
  border:1px solid color-mix(in srgb,var(--md-secondary) 18%,transparent);
  border-radius:999px;
  background:var(--md-secondary-container);
  color:var(--md-on-secondary-container);
  font-size:6.5px;
  letter-spacing:.11em;
  box-shadow:none;
}
.ad-row a{
  color:var(--md-on-surface-variant);
  font-size:9px;
  font-weight:600;
  text-decoration:none;
}
.ad-row a::after{
  content:" ↗";
  color:var(--md-secondary);
  font-size:8px;
  opacity:.7;
}
.ad-row a:hover{
  color:var(--md-on-surface);
  text-decoration:none;
}

/* 4) Category icons: more character through geometry and accent layers */
.category .icon{
  overflow:visible;
  isolation:isolate;
}
.category .icon::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:5px;
  border-radius:9px;
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb,var(--cat-accent) 15%,transparent),
      transparent 70%
    );
  transform:rotate(-6deg);
  opacity:.9;
}
.category .icon::after{
  width:8px;
  height:8px;
  right:-2px;
  top:-2px;
  border:2px solid var(--md-surface);
  background:var(--cat-accent);
  box-shadow:
    0 0 0 2px color-mix(in srgb,var(--cat-accent) 12%,transparent);
}
.category:nth-child(1) .icon{
  border-radius:12px 12px 8px 12px;
}
.category:nth-child(2) .icon{
  border-radius:8px 12px 12px 12px;
}
.category:nth-child(3) .icon{
  border-radius:12px 8px 12px 12px;
}
.category:nth-child(4) .icon{
  border-radius:12px 12px 12px 8px;
}
.category:hover .icon{
  transform:translateY(-1px) rotate(-1deg);
}
.category:nth-child(2):hover .icon{transform:translateY(-1px) rotate(1deg)}
.category:nth-child(4):hover .icon{transform:translateY(-1px) rotate(.8deg)}

.category .cat-title{
  position:relative;
}
.category .cat-title::after{
  content:"";
  display:block;
  width:18px;
  height:2px;
  margin-top:6px;
  border-radius:999px;
  background:var(--cat-accent);
  opacity:.32;
  transition:width .16s ease,opacity .16s ease;
}
.category:hover .cat-title::after{
  width:34px;
  opacity:.70;
}

/* Preserve compact mobile rhythm */
@media(max-width:640px){
  .brand-mark{
    width:32px;
    height:32px;
  }
  .search-zone::after,
  .feature-rail::after,
  .utility-row::after,
  .ad-row::after,
  .categories::after,
  .lower::after{
    left:8px;
    right:8px;
  }
  .ad-row{
    padding:7px 9px;
  }
}

/* ==========================================================
   Index refinement v4 — unified Material polish
   ========================================================== */

/* ---------- global rhythm ---------- */
:root{
  --page-gap:10px;
}

body{
  letter-spacing:.002em;
}

.main{
  box-shadow:
    0 8px 22px rgba(27,39,60,.10),
    0 2px 6px rgba(27,39,60,.05);
}

html.dark .main{
  box-shadow:
    0 10px 26px rgba(0,0,0,.28),
    0 2px 7px rgba(0,0,0,.18);
}

/* ---------- header: calmer light + much more integrated dark ---------- */
.site-head::before{
  height:84px;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb,var(--md-primary) 84%,#233c68),
      color-mix(in srgb,var(--md-primary) 70%,#486fa8) 58%,
      color-mix(in srgb,var(--md-primary) 54%,#89a2c7)
    );
}

.head-card{
  border-color:rgba(255,255,255,.14);
  background:
    linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.035)),
    color-mix(in srgb,var(--md-primary) 72%,#29466f);
  box-shadow:
    0 8px 22px rgba(28,48,79,.16),
    0 2px 6px rgba(28,48,79,.08);
}

/* Dark header now uses the same surface family as the page */
html.dark .site-head::before{
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb,var(--md-surface-3) 88%,#1d3150),
      color-mix(in srgb,var(--md-surface-3) 78%,#284264) 58%,
      color-mix(in srgb,var(--md-primary-container) 36%,var(--md-surface-3))
    );
}

html.dark .head-card{
  border-color:color-mix(in srgb,var(--md-outline-variant) 68%,transparent);
  background:
    radial-gradient(circle at 14% 0%,rgba(173,199,255,.06),transparent 34%),
    linear-gradient(
      180deg,
      color-mix(in srgb,var(--md-surface-3) 94%,#263e5c),
      var(--md-surface-3)
    );
  box-shadow:
    0 8px 24px rgba(0,0,0,.24),
    0 2px 6px rgba(0,0,0,.15);
}

html.dark .head-card::after{
  opacity:.025;
}

html.dark .brand-mark{
  border-color:color-mix(in srgb,var(--md-outline) 48%,transparent);
  background:
    radial-gradient(circle at 28% 22%,rgba(255,255,255,.09),transparent 30%),
    linear-gradient(
      145deg,
      color-mix(in srgb,var(--md-primary-container) 44%,var(--md-surface-3)),
      color-mix(in srgb,var(--md-surface-2) 86%,#1a2a3e)
    );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 4px 10px rgba(0,0,0,.18);
}

html.dark .theme-control{
  border-color:color-mix(in srgb,var(--md-outline) 46%,transparent);
  background:color-mix(in srgb,var(--md-surface-2) 82%,transparent);
}

html.dark .theme-control:hover{
  background:color-mix(in srgb,var(--md-primary-container) 24%,var(--md-surface-2));
}

html.dark .status-strip{
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb,var(--md-surface-2) 82%,transparent),
      color-mix(in srgb,var(--md-primary-container) 10%,var(--md-surface-2))
    );
  border-top-color:color-mix(in srgb,var(--md-outline-variant) 50%,transparent);
}

.status-strip{
  min-height:27px;
}

/* ---------- search ---------- */
.search-zone{
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb,var(--md-surface-2) 94%,var(--md-primary-container)),
      var(--md-surface-2)
    );
}

.search-zone::before{
  color:color-mix(in srgb,var(--md-on-surface-variant) 92%,var(--md-primary));
}

.search-row{
  align-items:center;
}

input[type="search"],
select{
  border-color:color-mix(in srgb,var(--md-outline) 82%,var(--md-surface));
  transition:border-color .14s ease,box-shadow .14s ease,background-color .14s ease;
}

html.dark input[type="search"],
html.dark select{
  background:color-mix(in srgb,var(--md-surface) 92%,var(--md-surface-2));
}

/* ---------- trending ---------- */
.trending{
  background:
    linear-gradient(180deg,rgba(52,91,153,.018),transparent 46%),
    var(--md-surface);
}

.trend-row{
  transition:
    background .14s ease,
    border-color .14s ease,
    transform .12s ease;
}

.trend-row:hover{
  transform:translateX(1px);
}

html.dark .trend-row:hover{
  background:
    linear-gradient(90deg,color-mix(in srgb,var(--trend-accent) 7%,transparent),transparent 62%),
    color-mix(in srgb,var(--md-surface-2) 88%,var(--md-surface));
}

.meta{
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--md-outline-variant) 36%,transparent);
}

/* ---------- random pick ---------- */
.quick-panel{
  background:
    radial-gradient(circle at 15% 18%,color-mix(in srgb,var(--md-primary) 9%,transparent),transparent 31%),
    radial-gradient(circle at 97% 88%,color-mix(in srgb,var(--md-tertiary) 8%,transparent),transparent 33%),
    var(--md-surface-2);
}

html.dark .quick-panel{
  background:
    radial-gradient(circle at 15% 18%,rgba(173,199,255,.055),transparent 31%),
    radial-gradient(circle at 97% 88%,rgba(169,208,210,.045),transparent 34%),
    var(--md-surface-2);
}

.pick-feature{
  border-color:color-mix(in srgb,var(--md-primary) 18%,var(--md-outline-variant));
  box-shadow:
    0 10px 24px rgba(27,39,60,.10),
    0 2px 6px rgba(27,39,60,.05);
}

html.dark .pick-feature{
  background:
    radial-gradient(circle at 96% 12%,rgba(169,208,210,.055),transparent 29%),
    radial-gradient(circle at 8% 100%,rgba(173,199,255,.045),transparent 35%),
    color-mix(in srgb,var(--md-surface) 94%,var(--md-surface-2));
  box-shadow:
    0 12px 28px rgba(0,0,0,.24),
    0 2px 7px rgba(0,0,0,.16);
}

.pick-poster{
  border-color:color-mix(in srgb,var(--md-surface) 90%,#fff);
}

html.dark .pick-poster{
  border-color:color-mix(in srgb,var(--md-surface-2) 85%,var(--md-outline));
}

.pick-counter{
  border:1px solid color-mix(in srgb,var(--md-outline-variant) 55%,transparent);
}

.pick-next{
  border:1px solid color-mix(in srgb,var(--md-outline-variant) 70%,transparent);
}

/* ---------- sharing ---------- */
.share{
  box-shadow:
    0 1px 2px rgba(27,39,60,.06),
    0 1px 4px rgba(27,39,60,.04);
}

.share:hover{
  transform:translateY(-1px);
}

html.dark .share{
  background:color-mix(in srgb,var(--md-surface) 90%,var(--md-surface-2))!important;
  border-color:color-mix(in srgb,var(--md-outline-variant) 74%,transparent);
  box-shadow:
    0 2px 5px rgba(0,0,0,.18);
}

/* ---------- ads ---------- */
.ad-row{
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb,var(--md-secondary-container) 48%,var(--md-surface-2)),
      var(--md-surface-2) 48%,
      color-mix(in srgb,var(--md-tertiary-container) 23%,var(--md-surface-2))
    );
}

html.dark .ad-row{
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb,var(--md-secondary-container) 18%,var(--md-surface-2)),
      var(--md-surface-2) 48%,
      color-mix(in srgb,var(--md-tertiary-container) 14%,var(--md-surface-2))
    );
}

/* ---------- categories ---------- */
.categories{
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb,var(--md-surface-2) 96%,var(--md-primary-container)),
      var(--md-surface-2)
    );
}

.category{
  box-shadow:
    0 1px 2px rgba(27,39,60,.05),
    0 1px 4px rgba(27,39,60,.035);
}

.category:hover{
  box-shadow:
    0 6px 15px rgba(27,39,60,.08),
    0 2px 5px rgba(27,39,60,.04);
}

html.dark .category{
  background:
    radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--cat-accent) 4%,transparent),transparent 45%),
    color-mix(in srgb,var(--md-surface) 94%,var(--md-surface-2));
  border-color:color-mix(in srgb,var(--md-outline-variant) 82%,transparent);
  box-shadow:
    0 2px 6px rgba(0,0,0,.13);
}

html.dark .category:hover{
  border-color:color-mix(in srgb,var(--cat-accent) 24%,var(--md-outline-variant));
  box-shadow:
    0 7px 18px rgba(0,0,0,.19);
}

.category .icon{
  transition:
    transform .15s ease,
    background-color .15s ease,
    box-shadow .15s ease;
}

html.dark .category .icon{
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb,var(--cat-accent) 8%,var(--md-surface-2)),
      color-mix(in srgb,var(--md-surface-3) 78%,var(--md-surface))
    );
}

.cat-sub a{
  border:1px solid transparent;
}

.cat-sub a:hover{
  border-color:color-mix(in srgb,var(--cat-accent) 20%,transparent);
}

/* ---------- lower info ---------- */
.lower{
  background:var(--md-surface);
}

.lower-main,
.portal-status{
  min-height:138px;
}

.portal-status{
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb,var(--md-surface-2) 96%,var(--md-primary-container)),
      var(--md-surface-2)
    );
}

html.dark .portal-status{
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb,var(--md-surface-2) 93%,var(--md-primary-container)),
      var(--md-surface-2)
    );
}

.status-line{
  min-height:24px;
  border-bottom:1px solid color-mix(in srgb,var(--md-outline-variant) 54%,transparent);
}

.status-line:last-child{
  border-bottom:0;
}

.visitors-pill{
  min-width:24px;
  justify-content:center;
}

/* ---------- footer ---------- */
.site-foot::before{
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb,var(--md-primary) 82%,#233d69),
      var(--md-primary) 42%,
      color-mix(in srgb,var(--md-primary) 60%,#7898c7)
    );
  opacity:.96;
}

html.dark .site-foot::before{
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb,var(--md-surface-3) 82%,#233c59),
      color-mix(in srgb,var(--md-primary-container) 46%,var(--md-surface-3)) 48%,
      color-mix(in srgb,var(--md-surface-3) 78%,#365276)
    );
}

.footer-card{
  box-shadow:
    0 7px 20px rgba(27,39,60,.09),
    0 2px 5px rgba(27,39,60,.04);
}

html.dark .footer-card{
  background:
    radial-gradient(circle at 100% 0%,rgba(173,199,255,.035),transparent 34%),
    color-mix(in srgb,var(--md-surface) 96%,var(--md-surface-2));
  box-shadow:
    0 9px 24px rgba(0,0,0,.23),
    0 2px 6px rgba(0,0,0,.14);
}

/* ---------- separators ---------- */
.search-zone::after,
.feature-rail::after,
.utility-row::after,
.ad-row::after,
.categories::after,
.lower::after{
  opacity:.76;
}

html.dark .search-zone::after,
html.dark .feature-rail::after,
html.dark .utility-row::after,
html.dark .ad-row::after,
html.dark .categories::after,
html.dark .lower::after{
  opacity:.46;
}

/* ---------- micro typography ---------- */
.cat-kicker,
.pick-eyebrow,
.search-zone::before,
.module-title,
.footer-code,
.status-right{
  font-weight:700;
}

.cat-sub a,
.meta,
.pick-meta,
.status-line,
.footer-copy{
  letter-spacing:.005em;
}

/* ---------- interaction restraint ---------- */
.category,
.pick-feature,
.trend-row,
.share,
.search-btn,
.pick-open,
.pick-next{
  will-change:transform;
}

@media(prefers-reduced-motion:reduce){
  .category,
  .pick-feature,
  .trend-row,
  .share,
  .search-btn,
  .pick-open,
  .pick-next,
  .pick-poster{
    transition:none!important;
    transform:none!important;
  }
}

/* ---------- mobile cleanup ---------- */
@media(max-width:640px){
  .site-head::before{
    height:79px;
  }

  .head-card{
    border-radius:14px 14px 0 0;
  }

  .main{
    border-radius:0 0 14px 14px;
  }

  .feature-rail{
    background:var(--md-surface);
  }

  .lower-main,
  .portal-status{
    min-height:auto;
  }

  .status-line{
    min-height:22px;
  }

  .footer-card{
    border-radius:14px;
  }
}

/* ==========================================================
   Index refinement v5 — balanced light/dark + control clarity
   ========================================================== */

/* ---------- stronger shared control language ---------- */
.search-btn,
.pick-open,
.pick-next,
.share,
.cat-go,
.cat-sub a,
.visitors-pill,
.theme-control,
.size-control{
  outline:none;
}

.search-btn:focus-visible,
.pick-open:focus-visible,
.pick-next:focus-visible,
.share:focus-visible,
.cat-go:focus-visible,
.cat-sub a:focus-visible,
.visitors-pill:focus-visible,
.theme-control:focus-visible,
.size-control:focus-visible{
  box-shadow:
    0 0 0 2px var(--md-surface),
    0 0 0 4px color-mix(in srgb,var(--md-primary) 48%,transparent);
}

/* Primary actions: clearer edge and text contrast */
.search-btn,
.pick-open{
  border:1px solid color-mix(in srgb,var(--md-primary) 72%,#20365e);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb,var(--md-primary) 92%,#ffffff),
      var(--md-primary)
    );
  color:var(--md-on-primary)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 2px 5px rgba(27,39,60,.12);
}

.search-btn:hover,
.pick-open:hover{
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb,var(--md-primary) 96%,#ffffff),
      color-mix(in srgb,var(--md-primary) 92%,#1f3457)
    );
  border-color:color-mix(in srgb,var(--md-primary) 82%,#1b3155);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    0 4px 9px rgba(27,39,60,.16);
}

/* Secondary actions get a real outline instead of fading into surfaces */
.pick-next,
.cat-go,
.visitors-pill{
  border:1px solid color-mix(in srgb,var(--md-outline) 78%,var(--md-primary));
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb,var(--md-surface) 90%,var(--md-primary-container)),
      var(--md-surface-2)
    );
  color:var(--md-primary);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.38),
    0 1px 3px rgba(27,39,60,.06);
}

.pick-next:hover,
.cat-go:hover,
.visitors-pill:hover{
  border-color:color-mix(in srgb,var(--md-primary) 52%,var(--md-outline));
  background:var(--md-primary-container);
  color:var(--md-on-primary-container);
}

/* Category chips: slightly stronger boundaries */
.cat-sub a{
  border:1px solid color-mix(in srgb,var(--md-outline-variant) 88%,var(--md-outline));
  background:color-mix(in srgb,var(--md-surface-2) 92%,var(--md-surface));
  color:color-mix(in srgb,var(--md-on-surface-variant) 94%,var(--md-on-surface));
}

.cat-sub a:hover{
  border-color:color-mix(in srgb,var(--cat-accent) 36%,var(--md-outline));
  background:color-mix(in srgb,var(--cat-accent) 10%,var(--md-surface-2));
  color:var(--md-on-surface);
}

/* Share buttons: clearer chips in both themes */
.share{
  border:1px solid color-mix(in srgb,var(--md-outline) 82%,var(--md-surface));
  background:
    linear-gradient(
      180deg,
      var(--md-surface),
      color-mix(in srgb,var(--md-surface-2) 82%,var(--md-surface))
    )!important;
  color:var(--md-on-surface)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    0 2px 5px rgba(27,39,60,.08);
}

.share:hover{
  border-color:color-mix(in srgb,var(--md-primary) 34%,var(--md-outline));
  background:var(--md-primary-container)!important;
  color:var(--md-on-primary-container)!important;
}

/* Top controls: more visible without getting bulky */
.size-control{
  color:rgba(255,255,255,.88);
  text-shadow:0 1px 1px rgba(0,0,0,.10);
}

.size-control:hover{
  background:rgba(255,255,255,.11);
  color:#fff;
}

.size-control.active{
  color:#fff;
  background:rgba(255,255,255,.08);
}

.theme-control{
  border-color:rgba(255,255,255,.31);
  background:rgba(255,255,255,.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 2px 5px rgba(21,37,62,.10);
}

.theme-control:hover{
  border-color:rgba(255,255,255,.44);
  background:rgba(255,255,255,.20);
}

/* ---------- LIGHT THEME: same refinement level as dark ---------- */

html:not(.dark) body{
  background:
    radial-gradient(circle at 16% -4%,rgba(63,95,152,.075),transparent 31%),
    linear-gradient(180deg,#f4f7fb 0%,#f8fafe 48%,#f3f6fa 100%);
}

/* Header integrated with light Material surfaces instead of an isolated blue slab */
html:not(.dark) .site-head::before{
  background:
    linear-gradient(
      135deg,
      #385b92 0%,
      #5577aa 54%,
      #7895bf 100%
    );
}

html:not(.dark) .head-card{
  border-color:rgba(255,255,255,.20);
  background:
    radial-gradient(circle at 14% 0%,rgba(255,255,255,.10),transparent 34%),
    linear-gradient(
      180deg,
      rgba(255,255,255,.11),
      rgba(255,255,255,.035)
    ),
    #486b9f;
  box-shadow:
    0 8px 22px rgba(36,57,91,.14),
    0 2px 6px rgba(36,57,91,.07);
}

html:not(.dark) .status-strip{
  background:
    linear-gradient(
      90deg,
      rgba(34,57,91,.14),
      rgba(255,255,255,.035)
    );
  border-top-color:rgba(255,255,255,.14);
}

/* Main light surface hierarchy */
html:not(.dark) .main{
  background:#fbfcff;
  border-color:#d9e1eb;
}

html:not(.dark) .search-zone{
  background:
    linear-gradient(
      180deg,
      #eef3f9,
      #f3f6fa
    );
}

html:not(.dark) .feature-rail{
  background:#fbfcff;
}

html:not(.dark) .quick-panel{
  background:
    radial-gradient(circle at 16% 18%,rgba(63,95,152,.075),transparent 31%),
    radial-gradient(circle at 96% 88%,rgba(73,123,125,.055),transparent 33%),
    #eef3f8;
}

html:not(.dark) .pick-feature{
  background:
    radial-gradient(circle at 96% 12%,rgba(73,123,125,.055),transparent 29%),
    radial-gradient(circle at 8% 100%,rgba(63,95,152,.045),transparent 35%),
    #ffffff;
  border-color:#d5dfeb;
  box-shadow:
    0 10px 24px rgba(39,58,87,.09),
    0 2px 6px rgba(39,58,87,.045);
}

html:not(.dark) .trending{
  background:
    linear-gradient(180deg,rgba(63,95,152,.018),transparent 46%),
    #ffffff;
}

html:not(.dark) .trend-row:hover{
  background:
    linear-gradient(90deg,color-mix(in srgb,var(--trend-accent) 5%,transparent),transparent 62%),
    #f3f6fa;
}

/* Categories: slightly clearer card contrast in light mode */
html:not(.dark) .categories{
  background:
    linear-gradient(180deg,#edf2f8,#f1f5f9);
}

html:not(.dark) .category{
  background:
    radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--cat-accent) 4%,transparent),transparent 45%),
    #ffffff;
  border-color:#d8e0ea;
  box-shadow:
    0 2px 6px rgba(38,56,82,.055);
}

html:not(.dark) .category:hover{
  border-color:color-mix(in srgb,var(--cat-accent) 32%,#c9d4e0);
  box-shadow:
    0 8px 18px rgba(38,56,82,.09);
}

html:not(.dark) .category .icon{
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb,var(--cat-accent) 8%,#f2f5f9),
      #ffffff
    );
  box-shadow:
    0 3px 8px rgba(38,56,82,.055);
}

/* Lower panel and footer refined for light theme */
html:not(.dark) .portal-status{
  background:
    linear-gradient(
      180deg,
      #eef3f8,
      #f4f7fa
    );
}

html:not(.dark) .footer-card{
  background:
    radial-gradient(circle at 100% 0%,rgba(63,95,152,.045),transparent 34%),
    #ffffff;
  border-color:#d7e0ea;
  box-shadow:
    0 8px 20px rgba(38,56,82,.08),
    0 2px 5px rgba(38,56,82,.04);
}

html:not(.dark) .site-foot::before{
  background:
    linear-gradient(
      90deg,
      #3f6098 0%,
      #5779ab 47%,
      #7897c2 100%
    );
}

/* ---------- DARK THEME: increase control visibility ---------- */

html.dark .search-btn,
html.dark .pick-open{
  border-color:color-mix(in srgb,var(--md-primary) 58%,#dce7ff);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb,var(--md-primary) 86%,#d7e4ff),
      color-mix(in srgb,var(--md-primary) 92%,#294b77)
    );
  color:var(--md-on-primary)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.11),
    0 3px 8px rgba(0,0,0,.22);
}

html.dark .search-btn:hover,
html.dark .pick-open:hover{
  border-color:color-mix(in srgb,var(--md-primary) 76%,#eef3ff);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb,var(--md-primary) 92%,#f0f5ff),
      color-mix(in srgb,var(--md-primary) 84%,#355b8f)
    );
}

html.dark .pick-next,
html.dark .cat-go,
html.dark .visitors-pill{
  border-color:color-mix(in srgb,var(--md-outline) 86%,var(--md-primary));
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb,var(--md-surface-3) 88%,var(--md-primary-container)),
      var(--md-surface-2)
    );
  color:var(--md-primary);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 2px 5px rgba(0,0,0,.15);
}

html.dark .pick-next:hover,
html.dark .cat-go:hover,
html.dark .visitors-pill:hover{
  border-color:color-mix(in srgb,var(--md-primary) 58%,var(--md-outline));
  background:color-mix(in srgb,var(--md-primary-container) 64%,var(--md-surface-2));
  color:var(--md-on-primary-container);
}

html.dark .cat-sub a{
  border-color:color-mix(in srgb,var(--md-outline-variant) 92%,transparent);
  background:color-mix(in srgb,var(--md-surface-2) 88%,var(--md-surface-3));
  color:var(--md-on-surface-variant);
}

html.dark .cat-sub a:hover{
  border-color:color-mix(in srgb,var(--cat-accent) 42%,var(--md-outline));
  color:var(--md-on-surface);
}

html.dark .share{
  border-color:color-mix(in srgb,var(--md-outline) 78%,transparent);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb,var(--md-surface-2) 92%,var(--md-surface-3)),
      var(--md-surface)
    )!important;
  color:var(--md-on-surface)!important;
}

html.dark .share:hover{
  border-color:color-mix(in srgb,var(--md-primary) 52%,var(--md-outline));
  background:color-mix(in srgb,var(--md-primary-container) 56%,var(--md-surface-2))!important;
  color:var(--md-on-primary-container)!important;
}

html.dark .theme-control{
  border-color:color-mix(in srgb,var(--md-primary) 30%,var(--md-outline));
  background:color-mix(in srgb,var(--md-surface-2) 74%,var(--md-primary-container));
}

/* Improve contrast for tertiary micro-controls */
html.dark .meta{
  border:1px solid color-mix(in srgb,var(--md-outline-variant) 75%,transparent);
}

html:not(.dark) .meta{
  border:1px solid color-mix(in srgb,var(--md-outline-variant) 72%,var(--md-surface));
}

/* ---------- mobile ---------- */
@media(max-width:640px){
  .search-btn,
  .pick-open{
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.14),
      0 2px 5px rgba(27,39,60,.10);
  }

  .share{
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.18),
      0 1px 3px rgba(27,39,60,.06);
  }
}

/* ==========================================================
   Services page — icon enhancement
   ========================================================== */
.service-grid{
  gap:10px;
}
.service-card{
  position:relative;
  overflow:hidden;
  min-height:84px;
  grid-template-columns:48px minmax(0,1fr);
  gap:11px;
  padding:11px;
  border-radius:16px;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb,var(--md-surface) 94%,var(--md-surface-2)),
      var(--md-surface)
    );
  box-shadow:
    0 2px 5px rgba(27,39,60,.05),
    0 1px 3px rgba(27,39,60,.03);
}
.service-card::before{
  content:"";
  position:absolute;
  inset:auto -22px -22px auto;
  width:64px;
  height:64px;
  border-radius:50%;
  opacity:.10;
  background:var(--svc-accent, var(--md-primary));
  pointer-events:none;
}
.service-card:hover{
  transform:translateY(-1px);
}
.service-card:hover .service-icon{
  transform:translateY(-1px) scale(1.02);
}
.service-card:hover .service-spark{
  opacity:.88;
  transform:scale(1) rotate(8deg);
}
.service-icon{
  --svc-accent: var(--md-primary);
  position:relative;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border:1px solid color-mix(in srgb,var(--svc-accent) 28%,var(--md-outline-variant));
  border-radius:14px;
  background:
    radial-gradient(circle at 28% 22%,rgba(255,255,255,.40),transparent 0 28%,transparent 29%),
    linear-gradient(
      145deg,
      color-mix(in srgb,var(--svc-accent) 12%,var(--md-surface)),
      color-mix(in srgb,var(--md-surface) 92%,var(--svc-accent))
    );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    0 3px 8px rgba(27,39,60,.07);
  transition:transform .15s ease, box-shadow .15s ease;
}
.service-ring{
  position:absolute;
  inset:6px;
  border:1px solid color-mix(in srgb,var(--svc-accent) 18%,transparent);
  border-radius:11px;
  opacity:.75;
}
.service-glyph{
  position:relative;
  z-index:2;
  color:color-mix(in srgb,var(--svc-accent) 74%,#132034);
  font-size:15px;
  font-weight:800;
  line-height:1;
  letter-spacing:-.02em;
}
.service-spark{
  position:absolute;
  right:-3px;
  top:-3px;
  z-index:3;
  min-width:13px;
  height:13px;
  display:grid;
  place-items:center;
  padding:0 3px;
  border-radius:999px;
  background:var(--svc-accent);
  color:#fff;
  font-size:6px;
  box-shadow:0 2px 6px rgba(27,39,60,.14);
  opacity:.74;
  transform:scale(.92) rotate(-6deg);
  transition:opacity .15s ease, transform .15s ease;
}
.service-card strong{
  margin-bottom:4px;
  font-size:10.2px;
}
.service-card span{
  font-size:8.4px;
  line-height:1.38;
}

/* Per-service accents */
.service-icon.svc-backup{--svc-accent:#5b7db8}
.service-icon.svc-scores{--svc-accent:#4d9f72}
.service-icon.svc-weather{--svc-accent:#6a93c9}
.service-icon.svc-currency{--svc-accent:#8d75bf}
.service-icon.svc-bandwidth{--svc-accent:#4a9da0}
.service-icon.svc-wiki{--svc-accent:#7f8794}
.service-icon.svc-horo{--svc-accent:#b2789d}
.service-icon.svc-qr{--svc-accent:#5f7a9a}
.service-icon.svc-image{--svc-accent:#5f9b86}
.service-icon.svc-batch{--svc-accent:#8b85c1}
.service-icon.svc-pdf{--svc-accent:#c06d5d}
.service-icon.svc-calc{--svc-accent:#8b9b63}

html.dark .service-card{
  background:
    radial-gradient(circle at 100% 0%,rgba(173,199,255,.028),transparent 34%),
    color-mix(in srgb,var(--md-surface) 94%,var(--md-surface-2));
  border-color:color-mix(in srgb,var(--md-outline-variant) 82%,transparent);
  box-shadow:0 2px 6px rgba(0,0,0,.14);
}
html.dark .service-icon{
  background:
    radial-gradient(circle at 28% 22%,rgba(255,255,255,.08),transparent 0 28%,transparent 29%),
    linear-gradient(
      145deg,
      color-mix(in srgb,var(--svc-accent) 15%,var(--md-surface-2)),
      color-mix(in srgb,var(--md-surface-3) 84%,var(--md-surface))
    );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 3px 8px rgba(0,0,0,.18);
}
html.dark .service-glyph{
  color:color-mix(in srgb,var(--svc-accent) 62%,#d9e5fb);
}
html.dark .service-spark{
  box-shadow:0 2px 6px rgba(0,0,0,.24);
}

@media(max-width:640px){
  .service-grid{
    gap:8px;
  }
  .service-card{
    min-height:78px;
    grid-template-columns:44px minmax(0,1fr);
    gap:10px;
    padding:10px;
  }
  .service-icon{
    width:40px;
    height:40px;
    border-radius:13px;
  }
  .service-ring{
    inset:5px;
  }
  .service-glyph{
    font-size:14px;
  }
}

/* ==========================================================
   Restored site options/functions preview
   ========================================================== */

.feature-shelf{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  padding:9px 12px;
  border-bottom:1px solid var(--md-outline-variant);
  background:var(--md-surface-2);
}
.feature-box{
  min-width:0;
  padding:10px;
  border:1px solid var(--md-outline-variant);
  border-radius:14px;
  background:var(--md-surface);
  box-shadow:0 1px 3px rgba(27,39,60,.04);
}
.feature-box-title{
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:7px;
  color:var(--md-on-surface);
  font-size:8px;
  font-weight:800;
  letter-spacing:.10em;
  text-transform:uppercase;
}
.feature-box-title::before{
  content:"";
  width:11px;
  height:3px;
  border-radius:999px;
  background:var(--md-primary);
}
.feature-box p{
  margin:0 0 7px;
  color:var(--md-on-surface-variant);
  font-size:8.3px;
  line-height:1.4;
}

.control-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:6px;
}
.control-field{
  min-width:0;
  display:grid;
  gap:3px;
  color:var(--md-on-surface-variant);
  font-size:7.2px;
  font-weight:700;
  letter-spacing:.02em;
}
.control-field > span{
  padding-left:2px;
}
.control-field input,
.control-field select{
  width:100%;
  box-sizing:border-box;
  height:34px;
  min-width:0;
  padding:0 8px;
  border:1px solid var(--md-outline);
  border-radius:10px;
  background:var(--md-surface);
  color:var(--md-on-surface);
  font-size:8.5px;
}
.control-field input:focus,
.control-field select:focus{
  border-color:var(--md-primary);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--md-primary) 14%,transparent);
  outline:none;
}
.span-12{grid-column:span 12}
.span-8{grid-column:span 8}
.span-7{grid-column:span 7}
.span-6{grid-column:span 6}
.span-5{grid-column:span 5}
.span-4{grid-column:span 4}
.span-3{grid-column:span 3}
.span-2{grid-column:span 2}

.control-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:end;
  gap:5px;
}
.control-button{
  min-height:34px;
  padding:0 10px;
  border:1px solid color-mix(in srgb,var(--md-outline) 78%,var(--md-primary));
  border-radius:999px;
  background:var(--md-surface-2);
  color:var(--md-primary);
  font-size:8px;
  font-weight:700;
  cursor:pointer;
}
.control-button.primary{
  border-color:var(--md-primary);
  background:var(--md-primary);
  color:var(--md-on-primary);
}
.control-button:hover{
  background:var(--md-primary-container);
  color:var(--md-on-primary-container);
}
.control-button.primary:hover{
  filter:brightness(1.04);
  color:var(--md-on-primary);
}

.option-chips,
.function-chips{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
}
.option-chip,
.function-chip{
  display:inline-flex;
  align-items:center;
  min-height:23px;
  padding:2px 7px;
  border:1px solid var(--md-outline-variant);
  border-radius:999px;
  background:var(--md-surface-2);
  color:var(--md-on-surface-variant);
  font-size:7.6px;
  font-weight:600;
  text-decoration:none!important;
}
.option-chip:hover,
.function-chip:hover{
  border-color:color-mix(in srgb,var(--md-primary) 30%,var(--md-outline));
  background:var(--md-primary-container);
  color:var(--md-on-primary-container);
}
.option-chip.active{
  border-color:color-mix(in srgb,var(--md-primary) 38%,transparent);
  background:var(--md-primary-container);
  color:var(--md-on-primary-container);
}

.option-note{
  display:flex;
  align-items:center;
  gap:5px;
  margin-top:7px;
  color:var(--md-on-surface-variant);
  font-size:7.3px;
  line-height:1.4;
}
.option-note::before{
  content:"";
  width:6px;
  height:6px;
  flex:0 0 6px;
  border-radius:50%;
  background:var(--md-tertiary);
}

.filter-console{
  padding:10px 12px;
  border-bottom:1px solid var(--md-outline-variant);
  background:var(--md-surface);
}
.filter-console + .filter-console{
  border-top:0;
}
.filter-console-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:7px;
}
.filter-console-title strong{
  color:var(--md-on-surface);
  font-size:9px;
}
.filter-console-title span{
  color:var(--md-on-surface-variant);
  font-size:7px;
}

.library-strip{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:5px;
  padding:8px 12px;
  border-bottom:1px solid var(--md-outline-variant);
  background:color-mix(in srgb,var(--md-primary-container) 18%,var(--md-surface));
}
.library-strip strong{
  margin-right:3px;
  color:var(--md-on-surface);
  font-size:8px;
}
.library-strip .option-chip{
  background:var(--md-surface);
}

/* YouTube category matrix */
.category-matrix{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:4px;
}
.category-matrix .option-chip{
  justify-content:center;
  text-align:center;
  border-radius:9px;
}

/* Services filters and restored function chips */
.service-filter-console{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:7px;
  align-items:center;
  padding:10px 12px 7px;
  background:var(--md-surface);
}
.service-filter-console input{
  width:100%;
  height:36px;
  box-sizing:border-box;
  padding:0 10px;
  border:1px solid var(--md-outline);
  border-radius:11px;
  background:var(--md-surface);
  color:var(--md-on-surface);
}
.service-category-actions{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  padding:0 12px 10px;
  border-bottom:1px solid var(--md-outline-variant);
  background:var(--md-surface);
}
.service-filter-btn{
  min-height:26px;
  padding:0 8px;
  border:1px solid var(--md-outline-variant);
  border-radius:999px;
  background:var(--md-surface-2);
  color:var(--md-on-surface-variant);
  font-size:7.5px;
  font-weight:700;
  cursor:pointer;
}
.service-filter-btn[aria-pressed="true"]{
  border-color:color-mix(in srgb,var(--md-primary) 34%,transparent);
  background:var(--md-primary-container);
  color:var(--md-on-primary-container);
}
.service-filter-btn:hover{
  border-color:color-mix(in srgb,var(--md-primary) 34%,var(--md-outline));
}

.service-card{
  grid-template-columns:48px minmax(0,1fr) 27px;
}
.service-card-main{
  min-width:0;
}
.service-favourite-preview{
  align-self:start;
  width:27px;
  height:27px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid var(--md-outline-variant);
  border-radius:999px;
  background:var(--md-surface-2);
  color:var(--md-on-surface-variant);
  font-size:15px;
  line-height:1;
  cursor:pointer;
}
.service-favourite-preview:hover,
.service-favourite-preview[aria-pressed="true"]{
  border-color:#c69d49;
  background:#fff4d8;
  color:#8a641b;
}
html.dark .service-favourite-preview[aria-pressed="true"]{
  background:#4a3e26;
  color:#f0c86f;
}
.service-functions{
  grid-column:2 / -1;
  display:flex;
  flex-wrap:wrap;
  gap:3px;
  margin-top:-2px;
}
.service-functions .function-chip{
  min-height:19px;
  padding:1px 5px;
  font-size:6.6px;
  pointer-events:none;
}
.service-card.is-filtered-out{
  display:none;
}

/* fuller filter bars */
.full-filter-form{
  padding:10px 12px;
  border-bottom:1px solid var(--md-outline-variant);
  background:var(--md-surface);
}

/* Light/dark consistency */
html.dark .feature-box,
html.dark .filter-console,
html.dark .full-filter-form,
html.dark .service-filter-console,
html.dark .service-category-actions{
  background:color-mix(in srgb,var(--md-surface) 96%,var(--md-surface-2));
}
html.dark .control-field input,
html.dark .control-field select,
html.dark .service-filter-console input{
  background:var(--md-surface-2);
  border-color:var(--md-outline-variant);
  color:var(--md-on-surface);
}
html.dark .control-button{
  background:var(--md-surface-2);
  border-color:var(--md-outline);
  color:var(--md-primary);
}
html.dark .option-chip,
html.dark .function-chip,
html.dark .service-filter-btn{
  background:var(--md-surface-2);
  border-color:var(--md-outline-variant);
}
html.dark .library-strip{
  background:color-mix(in srgb,var(--md-primary-container) 12%,var(--md-surface));
}

/* Responsive */
@media(max-width:640px){
  .feature-shelf{
    grid-template-columns:1fr;
    gap:6px;
    padding:8px;
  }
  .full-filter-form,
  .filter-console{
    padding:8px;
  }
  .control-grid{
    grid-template-columns:repeat(6,minmax(0,1fr));
  }
  .span-12,.span-8,.span-7,.span-6{grid-column:span 6}
  .span-5,.span-4,.span-3{grid-column:span 3}
  .span-2{grid-column:span 2}
  .category-matrix{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .service-filter-console{
    grid-template-columns:1fr auto;
    padding:8px 8px 6px;
  }
  .service-category-actions{
    padding:0 8px 8px;
  }
  .service-card{
    grid-template-columns:44px minmax(0,1fr) 27px;
  }
  .library-strip{
    padding:7px 8px;
  }
}


/* ==========================================================
   COMPLETE SITE LAB
   ========================================================== */
html{--lab-scale:1}
body{margin:0}
.lab-shell{width:min(736px,calc(100% - 16px));margin:0 auto 12px}
.lab-nav{
  position:sticky;top:0;z-index:50;display:flex;gap:4px;overflow:auto;padding:8px;
  border:1px solid var(--md-outline-variant);border-top:0;border-radius:0 0 14px 14px;
  background:color-mix(in srgb,var(--md-surface) 92%,transparent);backdrop-filter:blur(12px);
  box-shadow:var(--md-elev-2)
}
.lab-nav button{
  flex:0 0 auto;min-height:30px;padding:0 10px;border:1px solid var(--md-outline-variant);
  border-radius:999px;background:var(--md-surface-2);color:var(--md-on-surface-variant);
  font:700 8px/1 Arial,sans-serif;cursor:pointer
}
.lab-nav button[aria-current="page"]{
  border-color:color-mix(in srgb,var(--md-primary) 35%,transparent);
  background:var(--md-primary-container);color:var(--md-on-primary-container)
}
.lab-page{display:none;margin-top:10px}
.lab-page.is-active{display:block}
.lab-page .main{margin-top:0}
.lab-page-head{
  padding:16px 14px 13px;border-bottom:1px solid var(--md-outline-variant);
  background:
    radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--md-primary) 7%,transparent),transparent 38%),
    var(--md-surface-2)
}
.lab-page-kicker{margin-bottom:4px;color:var(--md-on-surface-variant);font:800 7px/1.2 Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase}
.lab-page-title{margin:0;color:var(--md-on-surface);font-size:22px;line-height:1.05;letter-spacing:-.03em}
.lab-page-intro{max-width:600px;margin-top:6px;color:var(--md-on-surface-variant);font-size:9.5px;line-height:1.5}
.lab-section{padding:12px;border-bottom:1px solid var(--md-outline-variant);background:var(--md-surface)}
.lab-section.tonal{background:var(--md-surface-2)}
.lab-section:last-child{border-bottom:0}
.lab-section-title{
  display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px;
  color:var(--md-on-surface);font-size:10px;font-weight:800
}
.lab-section-title small{color:var(--md-on-surface-variant);font-size:7px;font-weight:600}
.lab-subtitle{margin:12px 0 7px;color:var(--md-on-surface);font-size:9px;font-weight:800}
.lab-tabs,.lab-chip-row,.lab-actions,.lab-inline,.lab-toolbar{
  display:flex;flex-wrap:wrap;align-items:center;gap:5px
}
.lab-tabs{padding:9px 12px;border-bottom:1px solid var(--md-outline-variant);background:var(--md-surface)}
.lab-tabs button,.lab-chip,.lab-actions button,.lab-inline button,.lab-toolbar button,.lab-button{
  min-height:28px;padding:0 9px;border:1px solid var(--md-outline-variant);border-radius:999px;
  background:var(--md-surface-2);color:var(--md-on-surface-variant);font:700 7.8px/1 Arial,sans-serif;cursor:pointer
}
.lab-tabs button.active,.lab-chip.active,.lab-actions button.primary,.lab-button.primary{
  border-color:var(--md-primary);background:var(--md-primary);color:var(--md-on-primary)
}
.lab-actions button:hover,.lab-inline button:hover,.lab-toolbar button:hover,.lab-button:hover,.lab-chip:hover{
  border-color:color-mix(in srgb,var(--md-primary) 35%,var(--md-outline));background:var(--md-primary-container);color:var(--md-on-primary-container)
}
.lab-form-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:7px}
.lab-field{display:grid;gap:3px;min-width:0;color:var(--md-on-surface-variant);font-size:7px;font-weight:700}
.lab-field input,.lab-field select,.lab-field textarea{
  width:100%;box-sizing:border-box;border:1px solid var(--md-outline);border-radius:10px;background:var(--md-surface);
  color:var(--md-on-surface);font-size:8.5px;padding:0 8px
}
.lab-field input,.lab-field select{height:34px}.lab-field textarea{min-height:80px;padding-top:8px}
.s12{grid-column:span 12}.s8{grid-column:span 8}.s7{grid-column:span 7}.s6{grid-column:span 6}.s5{grid-column:span 5}.s4{grid-column:span 4}.s3{grid-column:span 3}.s2{grid-column:span 2}
.lab-note{
  margin:8px 0;padding:7px 9px;border:1px solid var(--md-outline-variant);border-radius:10px;
  background:var(--md-primary-container);color:var(--md-on-primary-container);font-size:8px;line-height:1.4
}
.lab-note.neutral{background:var(--md-surface-2);color:var(--md-on-surface-variant)}
.lab-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.lab-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.lab-media-card,.lab-panel,.lab-video-row,.lab-tool-card,.lab-result-card{
  border:1px solid var(--md-outline-variant);border-radius:14px;background:var(--md-surface);box-shadow:var(--md-elev-1)
}
.lab-media-card{overflow:hidden}
.lab-poster{
  --p1:#283b56;--p2:#7387a6;--p3:#d1af77;position:relative;width:100%;aspect-ratio:3/4;display:block;border:0;cursor:pointer;
  background:radial-gradient(circle at 72% 24%,var(--p3),transparent 0 14%,transparent 15%),linear-gradient(145deg,var(--p1),var(--p2) 58%,var(--p3))
}
.lab-poster::before{
  content:"";position:absolute;left:-12%;right:-8%;bottom:-3%;height:47%;background:color-mix(in srgb,var(--p1) 78%,#111);
  clip-path:polygon(0 72%,18% 35%,32% 55%,49% 18%,64% 60%,80% 30%,100% 72%,100% 100%,0 100%)
}
.lab-poster::after{
  content:"";position:absolute;left:47%;bottom:7%;width:15%;height:48%;border-radius:50% 50% 12% 12%;
  background:color-mix(in srgb,var(--p1) 88%,#0c141f);transform:translateX(-50%)
}
.lab-poster-type{position:absolute;z-index:3;left:6px;bottom:6px;padding:3px 5px;border-radius:5px;background:rgba(8,15,25,.66);color:#fff;font-size:6px;font-weight:800;letter-spacing:.12em}
.lab-card-body{padding:8px}
.lab-card-kicker{margin-bottom:3px;color:var(--md-on-surface-variant);font-size:6.5px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.lab-title-button{display:block;width:100%;padding:0;border:0;background:none;color:var(--md-on-surface);text-align:left;font:800 10px/1.25 Arial,sans-serif;cursor:pointer}
.lab-chip-row span,.lab-meta-chip{
  min-height:18px;display:inline-flex;align-items:center;padding:1px 5px;border-radius:999px;background:var(--md-surface-2);color:var(--md-on-surface-variant);font-size:6.7px
}
.lab-card-actions{display:flex;gap:4px;margin-top:7px}.lab-card-actions button{flex:1;min-height:24px;border:1px solid var(--md-outline-variant);border-radius:8px;background:var(--md-surface-2);color:var(--md-primary);font-size:7px;font-weight:700;cursor:pointer}
.lab-video-row{display:grid;grid-template-columns:155px minmax(0,1fr);overflow:hidden}
.lab-video-thumb{
  --v1:#243d69;--v2:#6e7fa6;position:relative;min-height:100px;border:0;cursor:pointer;
  background:radial-gradient(circle at 78% 28%,rgba(255,255,255,.16),transparent 0 18%,transparent 19%),linear-gradient(135deg,var(--v1),var(--v2))
}
.lab-video-thumb::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 0 46%,rgba(255,255,255,.06) 46% 52%,transparent 52%)}
.lab-play{position:absolute;left:50%;top:50%;width:34px;height:34px;border-radius:50%;background:rgba(10,17,29,.62);transform:translate(-50%,-50%)}
.lab-play::after{content:"";position:absolute;left:14px;top:11px;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:9px solid #fff}
.lab-duration{position:absolute;right:5px;bottom:5px;padding:2px 4px;border-radius:4px;background:rgba(10,17,29,.72);color:#fff;font:7px/1 monospace}
.lab-video-copy{display:flex;flex-direction:column;padding:9px}
.lab-meta-line{margin-top:4px;color:var(--md-on-surface-variant);font-size:7.5px;line-height:1.35}
.lab-save-menu{margin-top:auto;color:var(--md-primary);font-size:7.5px}.lab-save-menu summary{cursor:pointer;font-weight:700}.lab-save-menu div{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}.lab-save-menu button{min-height:24px;border:1px solid var(--md-outline-variant);border-radius:999px;background:var(--md-surface-2);color:var(--md-on-surface-variant);font-size:7px;cursor:pointer}
.lab-detail{
  display:grid;grid-template-columns:170px minmax(0,1fr);gap:12px;padding:12px;border:1px solid var(--md-outline-variant);
  border-radius:16px;background:var(--md-surface);box-shadow:var(--md-elev-1)
}
.lab-detail-cover{width:100%;aspect-ratio:3/4;border-radius:13px;background:linear-gradient(145deg,#314b6c,#7388aa 58%,#d3b176);box-shadow:var(--md-elev-2)}
.lab-detail h2{margin:0 0 5px;color:var(--md-on-surface);font-size:17px}.lab-detail p{margin:0 0 7px;color:var(--md-on-surface-variant);font-size:8.7px;line-height:1.5}
.lab-info-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin:8px 0}
.lab-info-list div{padding:6px;border-radius:9px;background:var(--md-surface-2);font-size:7.5px;color:var(--md-on-surface-variant)}.lab-info-list b{color:var(--md-on-surface)}
.lab-player{
  position:relative;aspect-ratio:16/9;display:grid;place-items:center;overflow:hidden;border-radius:14px;
  background:radial-gradient(circle at 70% 25%,rgba(255,255,255,.11),transparent 0 18%,transparent 19%),linear-gradient(135deg,#1b293d,#47678f)
}
.lab-player .lab-play{width:52px;height:52px}.lab-player .lab-play::after{left:21px;top:17px;border-top-width:9px;border-bottom-width:9px;border-left-width:13px}
.lab-player-status{position:absolute;left:8px;right:8px;bottom:8px;padding:5px 7px;border-radius:8px;background:rgba(7,13,22,.64);color:#fff;font-size:7.5px}
.lab-progress{height:5px;border-radius:999px;background:var(--md-surface-3);overflow:hidden}.lab-progress>span{display:block;height:100%;width:36%;background:var(--md-primary)}
.lab-episode-list{display:grid;gap:5px}.lab-episode{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:7px;align-items:center;padding:7px;border:1px solid var(--md-outline-variant);border-radius:10px;background:var(--md-surface)}
.lab-episode-num{width:32px;height:32px;display:grid;place-items:center;border-radius:9px;background:var(--md-primary-container);color:var(--md-on-primary-container);font-weight:800;font-size:8px}
.lab-episode strong{display:block;color:var(--md-on-surface);font-size:8.5px}.lab-episode small{color:var(--md-on-surface-variant);font-size:7px}
.lab-episode button{min-height:26px;border:1px solid var(--md-outline-variant);border-radius:999px;background:var(--md-surface-2);color:var(--md-primary);font-size:7px;cursor:pointer}
.lab-download-row{display:grid;grid-template-columns:110px minmax(0,1fr);gap:10px;padding:10px;border:1px solid var(--md-outline-variant);border-radius:14px;background:var(--md-surface)}
.lab-wallpaper{
  position:relative;aspect-ratio:4/3;border-radius:11px;overflow:hidden;
  background:radial-gradient(circle at 72% 23%,#d6d8b7,transparent 0 12%,transparent 13%),linear-gradient(150deg,#526f89,#78926b)
}
.lab-wallpaper::before,.lab-crop-canvas::before{content:"";position:absolute;left:-5%;right:-5%;bottom:0;height:58%;background:#334f65;clip-path:polygon(0 76%,20% 24%,34% 55%,51% 8%,70% 54%,83% 34%,100% 70%,100% 100%,0 100%)}
.lab-download-copy h3{margin:0 0 4px;color:var(--md-on-surface);font-size:10.5px}.lab-download-copy p{margin:0 0 6px;color:var(--md-on-surface-variant);font-size:8px;line-height:1.45}
.lab-download-actions{display:flex;flex-wrap:wrap;gap:4px}.lab-download-actions button,.lab-download-actions a{min-height:25px;display:inline-flex;align-items:center;padding:0 7px;border:1px solid var(--md-outline-variant);border-radius:8px;background:var(--md-surface-2);color:var(--md-primary);font-size:7px;font-weight:700;text-decoration:none;cursor:pointer}
.lab-audio{width:100%}
.lab-tool-layout{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lab-tool-card{padding:10px}.lab-tool-card h3{margin:0 0 8px;color:var(--md-on-surface);font-size:10px}
.lab-tool-output{min-height:38px;margin-top:7px;padding:8px;border:1px dashed var(--md-outline);border-radius:10px;background:var(--md-surface-2);color:var(--md-on-surface-variant);font-size:8px;line-height:1.45}
.lab-crop-preview{display:grid;place-items:center;min-height:230px;padding:10px;border-radius:12px;background:var(--md-surface-2);overflow:hidden}
.lab-crop-canvas{position:relative;width:78%;aspect-ratio:16/10;border:2px solid var(--md-primary);border-radius:8px;overflow:hidden;background:radial-gradient(circle at 72% 23%,#d6d8b7,transparent 0 12%,transparent 13%),linear-gradient(150deg,#526f89,#78926b);transition:.2s ease;box-shadow:var(--md-elev-2)}
.lab-crop-canvas::after{content:"";position:absolute;inset:12%;border:1px dashed rgba(255,255,255,.75);box-shadow:0 0 0 999px rgba(0,0,0,.16)}
.lab-reader-toolbar{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;padding:8px;border:1px solid var(--md-outline-variant);border-radius:12px;background:var(--md-surface-2)}
.lab-reader-pages{display:grid;gap:8px;margin-top:9px}.lab-reader-page{position:relative;min-height:370px;display:grid;place-items:center;border:1px solid var(--md-outline-variant);border-radius:10px;background:linear-gradient(145deg,#e9edf4,#cdd6e4);overflow:hidden;color:#526071;font-size:30px;font-weight:800}
html.dark .lab-reader-page{background:linear-gradient(145deg,#23303f,#344356);color:#aeb9c7}
.lab-reader-pages.single .lab-reader-page{display:none}.lab-reader-pages.single .lab-reader-page.current{display:grid}
.lab-reader-pages.original .lab-reader-page{width:110%;max-width:none;margin-left:-5%}
.lab-service-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.lab-service-card{display:grid;grid-template-columns:42px minmax(0,1fr) 26px;gap:8px;align-items:center;padding:9px;border:1px solid var(--md-outline-variant);border-radius:14px;background:var(--md-surface);cursor:pointer}
.lab-service-card:hover{border-color:color-mix(in srgb,var(--md-primary) 34%,var(--md-outline));box-shadow:var(--md-elev-1)}
.lab-service-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:var(--md-secondary-container);color:var(--md-on-secondary-container);font-size:12px;font-weight:800}
.lab-service-card strong{display:block;color:var(--md-on-surface);font-size:9px}.lab-service-card small{color:var(--md-on-surface-variant);font-size:7px;line-height:1.3}
.lab-star{width:26px;height:26px;border:1px solid var(--md-outline-variant);border-radius:50%;background:var(--md-surface-2);color:var(--md-on-surface-variant);cursor:pointer}
.lab-service-workbench{margin-top:10px}.lab-tool-panel{display:none}.lab-tool-panel.active{display:block}
.lab-score{display:grid;grid-template-columns:50px minmax(0,1fr) auto;gap:8px;align-items:center;padding:7px;border-bottom:1px solid var(--md-outline-variant);font-size:8px}.lab-score:last-child{border-bottom:0}.lab-score b{color:var(--md-on-surface)}.lab-score span{color:var(--md-on-surface-variant)}
.lab-qr{width:160px;height:160px;display:grid;grid-template-columns:repeat(13,1fr);gap:1px;padding:9px;background:#fff;border-radius:8px;box-shadow:var(--md-elev-1)}.lab-qr i{background:#fff}.lab-qr i.on{background:#111}
.lab-state-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.lab-state{padding:9px;border:1px solid var(--md-outline-variant);border-radius:12px;background:var(--md-surface);font-size:7.5px;color:var(--md-on-surface-variant)}.lab-state b{display:block;margin-bottom:3px;color:var(--md-on-surface)}
.lab-toast{position:fixed;left:50%;bottom:16px;z-index:1000;max-width:calc(100% - 24px);padding:8px 12px;border-radius:999px;background:#182231;color:#fff;font:10px/1.3 Arial,sans-serif;box-shadow:0 8px 24px rgba(0,0,0,.24);opacity:0;pointer-events:none;transform:translate(-50%,10px);transition:.18s ease}.lab-toast.show{opacity:1;transform:translate(-50%,0)}
.lab-hidden{display:none!important}
[data-saved="true"]{background:var(--md-primary-container)!important;color:var(--md-on-primary-container)!important;border-color:color-mix(in srgb,var(--md-primary) 32%,transparent)!important}
html.dark .lab-media-card,html.dark .lab-panel,html.dark .lab-video-row,html.dark .lab-tool-card,html.dark .lab-result-card,html.dark .lab-download-row,html.dark .lab-service-card,html.dark .lab-detail{background:color-mix(in srgb,var(--md-surface) 94%,var(--md-surface-2))}
@media(max-width:640px){
  .lab-shell{width:calc(100% - 8px)}
  .lab-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lab-grid.two,.lab-tool-layout,.lab-service-grid{grid-template-columns:1fr}
  .lab-video-row{grid-template-columns:120px minmax(0,1fr)}
  .lab-detail{grid-template-columns:100px minmax(0,1fr);gap:9px}
  .lab-download-row{grid-template-columns:90px minmax(0,1fr)}
  .lab-form-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .s12,.s8,.s7,.s6{grid-column:span 6}.s5,.s4,.s3{grid-column:span 3}.s2{grid-column:span 2}
  .lab-state-grid{grid-template-columns:repeat(2,1fr)}
}


/* ==========================================================
   COMPLETE SITE LAB v2 — button alignment + top-nav polish
   ========================================================== */

/* ---------- universal lab control reset ---------- */
.lab-page button,
.lab-page input,
.lab-page select,
.lab-page textarea,
.lab-nav button{
  font-family:Arial,sans-serif;
  box-sizing:border-box;
}

.lab-page button:not(.lab-play):not(.lab-poster):not(.lab-video-thumb):not(.lab-star),
.lab-page .lab-button,
.lab-page .control-button,
.lab-page .option-chip,
.lab-page .function-chip,
.lab-page .service-filter-btn,
.lab-page .lab-download-actions a{
  min-height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:0 10px;
  border:1px solid color-mix(in srgb,var(--md-outline) 76%,var(--md-primary));
  border-radius:10px;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb,var(--md-surface) 94%,var(--md-primary-container)),
      var(--md-surface-2)
    );
  color:var(--md-primary);
  font-size:7.8px;
  font-weight:700;
  line-height:1;
  text-align:center;
  text-decoration:none!important;
  white-space:nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    0 1px 3px rgba(27,39,60,.05);
  cursor:pointer;
  transition:
    background-color .14s ease,
    border-color .14s ease,
    color .14s ease,
    box-shadow .14s ease,
    transform .10s ease;
  appearance:none;
  -webkit-appearance:none;
}

.lab-page button:not(.lab-play):not(.lab-poster):not(.lab-video-thumb):not(.lab-star):hover,
.lab-page .lab-button:hover,
.lab-page .control-button:hover,
.lab-page .option-chip:hover,
.lab-page .function-chip:hover,
.lab-page .service-filter-btn:hover,
.lab-page .lab-download-actions a:hover{
  border-color:color-mix(in srgb,var(--md-primary) 44%,var(--md-outline));
  background:var(--md-primary-container);
  color:var(--md-on-primary-container);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 3px 7px rgba(27,39,60,.08);
  transform:translateY(-1px);
}

.lab-page button:not(.lab-play):not(.lab-poster):not(.lab-video-thumb):not(.lab-star):active,
.lab-page .lab-button:active,
.lab-page .control-button:active{
  transform:translateY(0) scale(.985);
}

/* primary buttons */
.lab-page button.primary,
.lab-page .lab-button.primary,
.lab-page .control-button.primary,
.lab-page .lab-actions button.primary,
.lab-page .lab-download-actions .primary{
  border-color:color-mix(in srgb,var(--md-primary) 78%,#20365e);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb,var(--md-primary) 91%,#fff),
      var(--md-primary)
    );
  color:var(--md-on-primary)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 2px 5px rgba(27,39,60,.11);
}

.lab-page button.primary:hover,
.lab-page .lab-button.primary:hover,
.lab-page .control-button.primary:hover,
.lab-page .lab-actions button.primary:hover,
.lab-page .lab-download-actions .primary:hover{
  border-color:color-mix(in srgb,var(--md-primary) 86%,#1d3153);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb,var(--md-primary) 96%,#fff),
      color-mix(in srgb,var(--md-primary) 92%,#243f67)
    );
  color:var(--md-on-primary)!important;
}

/* saved/selected states */
.lab-page [data-saved="true"],
.lab-page .lab-chip.active,
.lab-page .lab-tabs button.active,
.lab-page .service-filter-btn[aria-pressed="true"]{
  border-color:color-mix(in srgb,var(--md-primary) 44%,transparent)!important;
  background:var(--md-primary-container)!important;
  color:var(--md-on-primary-container)!important;
  box-shadow:none!important;
}

/* ---------- inputs/selects aligned to buttons ---------- */
.lab-page input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
.lab-page select{
  min-height:34px;
  border:1px solid var(--md-outline);
  border-radius:10px;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb,var(--md-surface) 97%,var(--md-surface-2)),
      var(--md-surface)
    );
  color:var(--md-on-surface);
  padding:0 9px;
  font-size:8.5px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}

.lab-page input[type="file"]{
  min-height:34px;
  padding:5px 7px;
  border:1px solid var(--md-outline);
  border-radius:10px;
  background:var(--md-surface);
  color:var(--md-on-surface-variant);
  font-size:7.5px;
}

.lab-page input[type="file"]::file-selector-button{
  min-height:24px;
  margin-right:7px;
  padding:0 8px;
  border:1px solid var(--md-outline-variant);
  border-radius:8px;
  background:var(--md-surface-2);
  color:var(--md-primary);
  font-weight:700;
  cursor:pointer;
}

.lab-page textarea{
  border:1px solid var(--md-outline);
  border-radius:10px;
  background:var(--md-surface);
  color:var(--md-on-surface);
  padding:8px 9px;
  font-size:8.5px;
}

.lab-page input:focus,
.lab-page select:focus,
.lab-page textarea:focus{
  outline:none;
  border-color:var(--md-primary);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--md-primary) 15%,transparent);
}

/* ---------- action rows: true alignment ---------- */
.lab-actions,
.lab-inline,
.lab-toolbar,
.lab-card-actions,
.lab-download-actions,
.lab-reader-toolbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:5px;
}

.lab-actions > *,
.lab-inline > *,
.lab-toolbar > *,
.lab-card-actions > *,
.lab-download-actions > *,
.lab-reader-toolbar > *{
  margin:0;
}

.lab-actions button,
.lab-inline button,
.lab-toolbar button,
.lab-card-actions button,
.lab-download-actions button,
.lab-download-actions a,
.lab-reader-toolbar button{
  vertical-align:middle;
}

.lab-card-actions button{
  flex:1 1 auto;
  min-width:0;
  min-height:27px;
  border-radius:8px;
  padding:0 7px;
  font-size:7px;
}

.lab-save-menu div{
  align-items:center;
}

.lab-save-menu button{
  min-height:27px!important;
  border-radius:8px!important;
}

/* Episode buttons */
.lab-episode{
  min-height:48px;
}
.lab-episode button{
  min-width:74px;
  min-height:29px!important;
}

/* Download actions */
.lab-download-actions button,
.lab-download-actions a{
  min-height:29px!important;
  border-radius:9px!important;
  padding:0 9px!important;
}

/* Reader controls */
.lab-reader-toolbar{
  min-height:40px;
}
.lab-reader-toolbar button{
  min-height:29px!important;
}
.lab-reader-toolbar b{
  min-height:29px;
  display:inline-flex;
  align-items:center;
}

/* Small metadata chips remain chips, not buttons */
.lab-chip-row span,
.lab-meta-chip{
  min-height:20px;
  padding:2px 6px;
  border:1px solid color-mix(in srgb,var(--md-outline-variant) 72%,transparent);
}

/* ---------- service cards ---------- */
.lab-service-card{
  min-height:76px;
  grid-template-columns:42px minmax(0,1fr) 30px;
  gap:9px;
  padding:10px;
  transition:border-color .14s ease,box-shadow .14s ease,transform .12s ease;
}

.lab-service-card:hover{
  transform:translateY(-1px);
}

.lab-star{
  width:30px;
  height:30px;
  min-width:30px;
  padding:0;
  display:grid;
  place-items:center;
  border:1px solid color-mix(in srgb,var(--md-outline) 78%,var(--md-primary));
  border-radius:50%;
  background:var(--md-surface-2);
  color:var(--md-on-surface-variant);
  font-size:15px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
  cursor:pointer;
}
.lab-star:hover,
.lab-star[data-saved="true"]{
  border-color:#c69d49;
  background:#fff2cf;
  color:#8b6416;
}

/* ---------- TOP NAVIGATION ---------- */
.lab-shell{
  position:relative;
}

.lab-nav{
  position:sticky;
  top:6px;
  z-index:60;
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:5px;
  overflow:visible;
  margin:8px 0 10px;
  padding:6px;
  border:1px solid color-mix(in srgb,var(--md-outline-variant) 92%,var(--md-outline));
  border-radius:16px;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb,var(--md-surface) 94%,transparent),
      color-mix(in srgb,var(--md-surface-2) 91%,transparent)
    );
  backdrop-filter:blur(14px);
  box-shadow:
    0 7px 18px rgba(27,39,60,.09),
    0 2px 5px rgba(27,39,60,.04);
}

.lab-nav::before{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  top:-1px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,var(--md-primary),var(--md-tertiary),transparent);
  opacity:.34;
}

.lab-nav button{
  position:relative;
  min-width:0;
  min-height:42px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  padding:4px 5px;
  border:1px solid transparent;
  border-radius:11px;
  background:transparent;
  color:var(--md-on-surface-variant);
  box-shadow:none;
  font-size:7.4px;
  font-weight:700;
  cursor:pointer;
  transition:background .14s ease,border-color .14s ease,color .14s ease,transform .12s ease;
}

.lab-nav button:hover{
  border-color:color-mix(in srgb,var(--md-outline-variant) 84%,transparent);
  background:var(--md-surface);
  color:var(--md-on-surface);
  transform:translateY(-1px);
}

.lab-nav button[aria-current="page"]{
  border-color:color-mix(in srgb,var(--md-primary) 24%,transparent);
  background:var(--md-primary-container);
  color:var(--md-on-primary-container);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}

.lab-nav button[aria-current="page"]::after{
  content:"";
  position:absolute;
  left:25%;
  right:25%;
  bottom:3px;
  height:2px;
  border-radius:999px;
  background:var(--md-primary);
}

.lab-nav-icon{
  min-width:20px;
  height:20px;
  display:grid;
  place-items:center;
  border-radius:7px;
  background:color-mix(in srgb,var(--md-surface-2) 84%,var(--md-primary-container));
  color:var(--md-primary);
  font:800 10px/1 Arial,sans-serif;
}

.lab-nav button[aria-current="page"] .lab-nav-icon{
  background:var(--md-primary);
  color:var(--md-on-primary);
}

.lab-nav-label{
  display:block;
  overflow:hidden;
  width:100%;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* page tabs directly under page heading */
.lab-tabs{
  gap:5px;
  padding:8px 10px;
  align-items:center;
}

.lab-tabs button{
  min-height:29px!important;
  padding:0 9px!important;
  border-radius:9px!important;
}

/* ---------- dark-theme controls ---------- */
html.dark .lab-page button:not(.lab-play):not(.lab-poster):not(.lab-video-thumb):not(.lab-star),
html.dark .lab-page .lab-button,
html.dark .lab-page .control-button,
html.dark .lab-page .option-chip,
html.dark .lab-page .function-chip,
html.dark .lab-page .service-filter-btn,
html.dark .lab-page .lab-download-actions a{
  border-color:color-mix(in srgb,var(--md-outline) 80%,transparent);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb,var(--md-surface-3) 82%,var(--md-surface-2)),
      var(--md-surface-2)
    );
  color:var(--md-primary);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 2px 5px rgba(0,0,0,.13);
}

html.dark .lab-page button.primary,
html.dark .lab-page .lab-button.primary,
html.dark .lab-page .control-button.primary,
html.dark .lab-page .lab-actions button.primary{
  border-color:color-mix(in srgb,var(--md-primary) 64%,var(--md-outline));
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb,var(--md-primary) 86%,#d7e4ff),
      color-mix(in srgb,var(--md-primary) 92%,#294b77)
    );
  color:var(--md-on-primary)!important;
}

html.dark .lab-nav{
  border-color:color-mix(in srgb,var(--md-outline-variant) 80%,transparent);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb,var(--md-surface-2) 92%,transparent),
      color-mix(in srgb,var(--md-surface) 93%,transparent)
    );
  box-shadow:
    0 8px 22px rgba(0,0,0,.23),
    0 2px 6px rgba(0,0,0,.14);
}

html.dark .lab-nav button:hover{
  background:var(--md-surface-3);
  border-color:var(--md-outline-variant);
}

html.dark .lab-nav-icon{
  background:color-mix(in srgb,var(--md-surface-3) 88%,var(--md-primary-container));
  color:var(--md-primary);
}

/* ---------- mobile ---------- */
@media(max-width:640px){
  .lab-nav{
    top:4px;
    grid-template-columns:repeat(7,60px);
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scrollbar-width:none;
    padding:5px;
    border-radius:13px;
  }
  .lab-nav::-webkit-scrollbar{display:none}
  .lab-nav button{
    min-height:40px;
    padding:3px 4px;
    border-radius:10px;
  }
  .lab-nav-icon{
    width:19px;
    height:19px;
    min-width:19px;
    font-size:9px;
  }
  .lab-nav-label{
    font-size:6.8px;
  }

  .lab-actions,
  .lab-inline,
  .lab-toolbar,
  .lab-download-actions{
    align-items:stretch;
  }

  .lab-actions button,
  .lab-inline button,
  .lab-toolbar button,
  .lab-download-actions button,
  .lab-download-actions a{
    min-height:31px!important;
  }

  .lab-episode{
    grid-template-columns:34px minmax(0,1fr);
  }
  .lab-episode button{
    grid-column:1/-1;
    justify-self:stretch;
    width:100%;
  }
}

/* ==========================================================
   COMPLETE SITE LAB v3 — connected nav + flat controls
   ========================================================== */

/* ---------- navigation reconnects visually to the header ---------- */
.lab-shell{
  width:min(736px,calc(100% - 16px));
  margin:-1px auto 12px;
}

.lab-nav{
  position:sticky;
  top:0;
  z-index:60;
  display:flex;
  align-items:stretch;
  gap:0;
  overflow-x:auto;
  margin:0 0 10px;
  padding:0 8px 6px;
  border:1px solid color-mix(in srgb,var(--md-outline-variant) 88%,var(--md-outline));
  border-top:0;
  border-radius:0 0 14px 14px;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb,var(--md-surface-2) 96%,var(--md-primary-container)),
      var(--md-surface-2)
    );
  backdrop-filter:blur(12px);
  box-shadow:
    0 4px 10px rgba(27,39,60,.055);
  scrollbar-width:none;
}

.lab-nav::-webkit-scrollbar{display:none}

.lab-nav::before{
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  top:0;
  height:1px;
  background:color-mix(in srgb,var(--md-primary) 18%,var(--md-outline-variant));
  opacity:.8;
}

.lab-nav button{
  position:relative;
  flex:1 0 auto;
  min-width:78px;
  min-height:38px;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:6px 9px 5px;
  border:0;
  border-bottom:2px solid transparent;
  border-radius:0;
  background:transparent;
  color:var(--md-on-surface-variant);
  box-shadow:none;
  font-size:7.6px;
  font-weight:700;
  cursor:pointer;
  transition:
    background-color .12s ease,
    color .12s ease,
    border-color .12s ease;
}

.lab-nav button + button{
  border-left:1px solid color-mix(in srgb,var(--md-outline-variant) 54%,transparent);
}

.lab-nav button:hover{
  background:color-mix(in srgb,var(--md-primary-container) 28%,transparent);
  color:var(--md-on-surface);
  transform:none;
}

.lab-nav button[aria-current="page"]{
  border-color:var(--md-primary);
  background:color-mix(in srgb,var(--md-primary-container) 54%,var(--md-surface-2));
  color:var(--md-on-primary-container);
  box-shadow:none;
}

.lab-nav button[aria-current="page"]::after{
  display:none;
}

.lab-nav-icon{
  width:18px;
  height:18px;
  min-width:18px;
  display:grid;
  place-items:center;
  border-radius:5px;
  background:transparent;
  color:var(--md-primary);
  font:800 9px/1 Arial,sans-serif;
}

.lab-nav button[aria-current="page"] .lab-nav-icon{
  background:transparent;
  color:var(--md-primary);
}

.lab-nav-label{
  width:auto;
  overflow:visible;
  text-overflow:clip;
}

/* ---------- flat shared controls ---------- */
.lab-page button:not(.lab-play):not(.lab-poster):not(.lab-video-thumb):not(.lab-star),
.lab-page .lab-button,
.lab-page .control-button,
.lab-page .option-chip,
.lab-page .function-chip,
.lab-page .service-filter-btn,
.lab-page .lab-download-actions a{
  min-height:30px;
  padding:0 10px;
  border:1px solid color-mix(in srgb,var(--md-outline-variant) 94%,var(--md-outline));
  border-radius:9px;
  background:var(--md-surface-2);
  color:var(--md-primary);
  box-shadow:none;
  text-shadow:none;
  transform:none;
}

.lab-page button:not(.lab-play):not(.lab-poster):not(.lab-video-thumb):not(.lab-star):hover,
.lab-page .lab-button:hover,
.lab-page .control-button:hover,
.lab-page .option-chip:hover,
.lab-page .function-chip:hover,
.lab-page .service-filter-btn:hover,
.lab-page .lab-download-actions a:hover{
  border-color:color-mix(in srgb,var(--md-primary) 34%,var(--md-outline));
  background:color-mix(in srgb,var(--md-primary-container) 72%,var(--md-surface-2));
  color:var(--md-on-primary-container);
  box-shadow:none;
  transform:none;
}

.lab-page button:not(.lab-play):not(.lab-poster):not(.lab-video-thumb):not(.lab-star):active,
.lab-page .lab-button:active,
.lab-page .control-button:active{
  transform:none;
}

/* Primary is filled, but completely flat */
.lab-page button.primary,
.lab-page .lab-button.primary,
.lab-page .control-button.primary,
.lab-page .lab-actions button.primary,
.lab-page .lab-download-actions .primary{
  border-color:var(--md-primary);
  background:var(--md-primary);
  color:var(--md-on-primary)!important;
  box-shadow:none;
}

.lab-page button.primary:hover,
.lab-page .lab-button.primary:hover,
.lab-page .control-button.primary:hover,
.lab-page .lab-actions button.primary:hover,
.lab-page .lab-download-actions .primary:hover{
  border-color:color-mix(in srgb,var(--md-primary) 86%,#1c3153);
  background:color-mix(in srgb,var(--md-primary) 90%,#1f365d);
  color:var(--md-on-primary)!important;
}

/* Selected/saved controls stay tonal and flat */
.lab-page [data-saved="true"],
.lab-page .lab-chip.active,
.lab-page .lab-tabs button.active,
.lab-page .service-filter-btn[aria-pressed="true"]{
  border-color:color-mix(in srgb,var(--md-primary) 34%,var(--md-outline-variant))!important;
  background:var(--md-primary-container)!important;
  color:var(--md-on-primary-container)!important;
  box-shadow:none!important;
}

/* Tabs should look like a flat segmented navigation row */
.lab-tabs{
  gap:3px;
  padding:7px 10px;
  background:var(--md-surface);
}

.lab-tabs button{
  min-height:28px!important;
  padding:0 8px!important;
  border-radius:8px!important;
  background:transparent!important;
  border-color:transparent!important;
}

.lab-tabs button:hover{
  background:var(--md-surface-2)!important;
}

.lab-tabs button.active{
  border-color:color-mix(in srgb,var(--md-primary) 26%,var(--md-outline-variant))!important;
  background:var(--md-primary-container)!important;
}

/* Flat fields */
.lab-page input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
.lab-page select,
.lab-page textarea{
  background:var(--md-surface);
  box-shadow:none;
}

.lab-page input[type="file"]{
  box-shadow:none;
}

.lab-page input[type="file"]::file-selector-button{
  border:1px solid var(--md-outline-variant);
  background:var(--md-surface-2);
  box-shadow:none;
}

/* Flat stars/favourite circles */
.lab-star{
  background:var(--md-surface-2);
  box-shadow:none;
}

.lab-star:hover,
.lab-star[data-saved="true"]{
  border-color:#c69d49;
  background:#fff2cf;
  color:#8b6416;
}

/* Flatten secondary card-like control containers slightly */
.lab-save-menu button,
.lab-card-actions button,
.lab-episode button,
.lab-download-actions button,
.lab-download-actions a,
.lab-reader-toolbar button{
  box-shadow:none!important;
}

/* ---------- dark theme ---------- */
html.dark .lab-nav{
  border-color:color-mix(in srgb,var(--md-outline-variant) 76%,transparent);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb,var(--md-surface-2) 96%,var(--md-primary-container)),
      var(--md-surface-2)
    );
  box-shadow:0 4px 12px rgba(0,0,0,.15);
}

html.dark .lab-nav button + button{
  border-left-color:color-mix(in srgb,var(--md-outline-variant) 44%,transparent);
}

html.dark .lab-nav button:hover{
  background:color-mix(in srgb,var(--md-primary-container) 18%,var(--md-surface-2));
}

html.dark .lab-nav button[aria-current="page"]{
  background:color-mix(in srgb,var(--md-primary-container) 42%,var(--md-surface-2));
}

html.dark .lab-page button:not(.lab-play):not(.lab-poster):not(.lab-video-thumb):not(.lab-star),
html.dark .lab-page .lab-button,
html.dark .lab-page .control-button,
html.dark .lab-page .option-chip,
html.dark .lab-page .function-chip,
html.dark .lab-page .service-filter-btn,
html.dark .lab-page .lab-download-actions a{
  border-color:color-mix(in srgb,var(--md-outline-variant) 86%,transparent);
  background:var(--md-surface-2);
  color:var(--md-primary);
  box-shadow:none;
}

html.dark .lab-page button:not(.lab-play):not(.lab-poster):not(.lab-video-thumb):not(.lab-star):hover,
html.dark .lab-page .lab-button:hover,
html.dark .lab-page .control-button:hover,
html.dark .lab-page .option-chip:hover,
html.dark .lab-page .function-chip:hover,
html.dark .lab-page .service-filter-btn:hover,
html.dark .lab-page .lab-download-actions a:hover{
  border-color:color-mix(in srgb,var(--md-primary) 38%,var(--md-outline));
  background:color-mix(in srgb,var(--md-primary-container) 46%,var(--md-surface-2));
  color:var(--md-on-primary-container);
}

html.dark .lab-page button.primary,
html.dark .lab-page .lab-button.primary,
html.dark .lab-page .control-button.primary,
html.dark .lab-page .lab-actions button.primary{
  border-color:var(--md-primary);
  background:var(--md-primary);
  color:var(--md-on-primary)!important;
  box-shadow:none;
}

/* ---------- mobile ---------- */
@media(max-width:640px){
  .lab-shell{
    width:calc(100% - 8px);
  }

  .lab-nav{
    top:0;
    display:flex;
    overflow-x:auto;
    gap:0;
    padding:0 4px 5px;
    border-radius:0 0 12px 12px;
  }

  .lab-nav button{
    flex:0 0 72px;
    min-width:72px;
    min-height:38px;
    padding:5px 6px 4px;
    gap:4px;
  }

  .lab-nav-icon{
    width:17px;
    height:17px;
    min-width:17px;
  }

  .lab-nav-label{
    font-size:6.8px;
  }
}

/* ==========================================================
   COMPLETE SITE LAB v4 — contrast + active-nav cleanup
   ========================================================== */

/* ---------- improve flat-button text contrast ---------- */
.lab-page button:not(.lab-play):not(.lab-poster):not(.lab-video-thumb):not(.lab-star),
.lab-page .lab-button,
.lab-page .control-button,
.lab-page .option-chip,
.lab-page .function-chip,
.lab-page .service-filter-btn,
.lab-page .lab-download-actions a{
  color:color-mix(in srgb,var(--md-primary) 72%,var(--md-on-surface));
  font-weight:750;
}

.lab-page button:not(.lab-play):not(.lab-poster):not(.lab-video-thumb):not(.lab-star):hover,
.lab-page .lab-button:hover,
.lab-page .control-button:hover,
.lab-page .option-chip:hover,
.lab-page .function-chip:hover,
.lab-page .service-filter-btn:hover,
.lab-page .lab-download-actions a:hover{
  color:color-mix(in srgb,var(--md-on-primary-container) 88%,var(--md-on-surface));
}

/* secondary/saved states: keep readable even on tonal fills */
.lab-page [data-saved="true"],
.lab-page .lab-chip.active,
.lab-page .lab-tabs button.active,
.lab-page .service-filter-btn[aria-pressed="true"]{
  color:color-mix(in srgb,var(--md-on-primary-container) 94%,var(--md-on-surface))!important;
  font-weight:800;
}

/* primary buttons: stronger text color */
.lab-page button.primary,
.lab-page .lab-button.primary,
.lab-page .control-button.primary,
.lab-page .lab-actions button.primary,
.lab-page .lab-download-actions .primary{
  color:#fff!important;
  font-weight:800;
}

/* subtle darker label on light flat surfaces */
html:not(.dark) .lab-page button:not(.lab-play):not(.lab-poster):not(.lab-video-thumb):not(.lab-star),
html:not(.dark) .lab-page .lab-button,
html:not(.dark) .lab-page .control-button,
html:not(.dark) .lab-page .option-chip,
html:not(.dark) .lab-page .function-chip,
html:not(.dark) .lab-page .service-filter-btn,
html:not(.dark) .lab-page .lab-download-actions a{
  color:#2f4f82;
}

html:not(.dark) .lab-page button:not(.lab-play):not(.lab-poster):not(.lab-video-thumb):not(.lab-star):hover,
html:not(.dark) .lab-page .lab-button:hover,
html:not(.dark) .lab-page .control-button:hover,
html:not(.dark) .lab-page .option-chip:hover,
html:not(.dark) .lab-page .function-chip:hover,
html:not(.dark) .lab-page .service-filter-btn:hover,
html:not(.dark) .lab-page .lab-download-actions a:hover{
  color:#20375c;
}

/* dark theme: brighter flat-button labels */
html.dark .lab-page button:not(.lab-play):not(.lab-poster):not(.lab-video-thumb):not(.lab-star),
html.dark .lab-page .lab-button,
html.dark .lab-page .control-button,
html.dark .lab-page .option-chip,
html.dark .lab-page .function-chip,
html.dark .lab-page .service-filter-btn,
html.dark .lab-page .lab-download-actions a{
  color:#c8d8f3;
}

html.dark .lab-page button:not(.lab-play):not(.lab-poster):not(.lab-video-thumb):not(.lab-star):hover,
html.dark .lab-page .lab-button:hover,
html.dark .lab-page .control-button:hover,
html.dark .lab-page .option-chip:hover,
html.dark .lab-page .function-chip:hover,
html.dark .lab-page .service-filter-btn:hover,
html.dark .lab-page .lab-download-actions a:hover{
  color:#f0f5ff;
}

html.dark .lab-page [data-saved="true"],
html.dark .lab-page .lab-chip.active,
html.dark .lab-page .lab-tabs button.active,
html.dark .lab-page .service-filter-btn[aria-pressed="true"]{
  color:#edf4ff!important;
}

/* ---------- top nav: active indicator is bottom-line only ---------- */
.lab-nav button + button{
  border-left:0!important;
}

html.dark .lab-nav button + button{
  border-left:0!important;
}

.lab-nav button{
  border-left:0!important;
  border-right:0!important;
  border-top:0!important;
  border-bottom:2px solid transparent!important;
}

.lab-nav button:hover{
  border-bottom-color:color-mix(in srgb,var(--md-primary) 18%,transparent)!important;
}

.lab-nav button[aria-current="page"]{
  border-bottom-color:var(--md-primary)!important;
  background:color-mix(in srgb,var(--md-primary-container) 44%,var(--md-surface-2));
}

html.dark .lab-nav button[aria-current="page"]{
  border-bottom-color:var(--md-primary)!important;
}

/* Keep icon treatment clean and non-letter-like */
.lab-nav button[data-lab-page="anime"] .lab-nav-icon,
.lab-nav button[data-lab-page="manga"] .lab-nav-icon{
  font-size:10px;
  letter-spacing:0;
}

/* Small button groups: stop text from looking washed out */
.lab-card-actions button,
.lab-save-menu button,
.lab-episode button,
.lab-reader-toolbar button,
.lab-download-actions button,
.lab-download-actions a{
  color:color-mix(in srgb,var(--md-primary) 74%,var(--md-on-surface))!important;
}

html.dark .lab-card-actions button,
html.dark .lab-save-menu button,
html.dark .lab-episode button,
html.dark .lab-reader-toolbar button,
html.dark .lab-download-actions button,
html.dark .lab-download-actions a{
  color:#cddbf2!important;
}

/* ==========================================================
   Later requested fixes applied to the known-good v4 baseline.
   IMPORTANT: no header/footer styling is changed here.
   ========================================================== */

/* Hide top menu only while Home is active. */
body.lab-home .lab-nav{
  display:none!important;
}
body.lab-home .lab-shell{
  margin-top:-1px;
}
body.lab-home .lab-page[data-page="home"]{
  margin-top:0;
}

/* Homepage Find button — explicit high contrast. */
html:not(.dark) .search-btn{
  border:1px solid #355b91!important;
  background:#355b91!important;
  color:#ffffff!important;
  font-weight:800!important;
  opacity:1!important;
  box-shadow:none!important;
  filter:none!important;
  text-shadow:none!important;
}
html:not(.dark) .search-btn:hover{
  border-color:#294b7d!important;
  background:#294b7d!important;
  color:#ffffff!important;
  filter:none!important;
}

html.dark .search-btn{
  border:1px solid #b7ceff!important;
  background:#b7ceff!important;
  color:#142b50!important;
  font-weight:800!important;
  opacity:1!important;
  box-shadow:none!important;
  filter:none!important;
  text-shadow:none!important;
}
html.dark .search-btn:hover{
  border-color:#c9d9ff!important;
  background:#c9d9ff!important;
  color:#102543!important;
  filter:none!important;
}

/* Homepage secondary controls. */
.pick-next,
.share,
.cat-go,
.cat-sub a,
.visitors-pill{
  opacity:1!important;
  box-shadow:none!important;
}
html:not(.dark) .pick-next,
html:not(.dark) .share,
html:not(.dark) .cat-go,
html:not(.dark) .cat-sub a,
html:not(.dark) .visitors-pill{
  border-color:#8694a7!important;
  background:#f1f4f8!important;
  color:#263b57!important;
}
html:not(.dark) .pick-next:hover,
html:not(.dark) .share:hover,
html:not(.dark) .cat-go:hover,
html:not(.dark) .cat-sub a:hover,
html:not(.dark) .visitors-pill:hover{
  border-color:#55749e!important;
  background:#dce7f7!important;
  color:#1d365b!important;
}

html.dark .pick-next,
html.dark .share,
html.dark .cat-go,
html.dark .cat-sub a,
html.dark .visitors-pill{
  border-color:#566477!important;
  background:#1d2835!important;
  color:#e7edf6!important;
}
html.dark .pick-next:hover,
html.dark .share:hover,
html.dark .cat-go:hover,
html.dark .cat-sub a:hover,
html.dark .visitors-pill:hover{
  border-color:#7894bd!important;
  background:#2d4770!important;
  color:#f2f6ff!important;
}

/* Lab secondary controls across inner pages. */
html:not(.dark) .lab-page button:not(.lab-play):not(.lab-poster):not(.lab-video-thumb):not(.lab-star):not(.primary),
html:not(.dark) .lab-page .lab-button:not(.primary),
html:not(.dark) .lab-page .control-button:not(.primary),
html:not(.dark) .lab-page .option-chip,
html:not(.dark) .lab-page .function-chip,
html:not(.dark) .lab-page .service-filter-btn,
html:not(.dark) .lab-page .lab-download-actions a:not(.primary){
  color:#263b57!important;
  background:#f1f4f8!important;
  border-color:#8694a7!important;
}

html.dark .lab-page button:not(.lab-play):not(.lab-poster):not(.lab-video-thumb):not(.lab-star):not(.primary),
html.dark .lab-page .lab-button:not(.primary),
html.dark .lab-page .control-button:not(.primary),
html.dark .lab-page .option-chip,
html.dark .lab-page .function-chip,
html.dark .lab-page .service-filter-btn,
html.dark .lab-page .lab-download-actions a:not(.primary){
  color:#e7edf6!important;
  background:#1d2835!important;
  border-color:#566477!important;
}

html:not(.dark) .lab-page button:not(.lab-play):not(.lab-poster):not(.lab-video-thumb):not(.lab-star):not(.primary):hover,
html:not(.dark) .lab-page .lab-button:not(.primary):hover,
html:not(.dark) .lab-page .control-button:not(.primary):hover,
html:not(.dark) .lab-page .option-chip:hover,
html:not(.dark) .lab-page .function-chip:hover,
html:not(.dark) .lab-page .service-filter-btn:hover,
html:not(.dark) .lab-page .lab-download-actions a:not(.primary):hover{
  color:#1d365b!important;
  background:#dce7f7!important;
  border-color:#55749e!important;
}

html.dark .lab-page button:not(.lab-play):not(.lab-poster):not(.lab-video-thumb):not(.lab-star):not(.primary):hover,
html.dark .lab-page .lab-button:not(.primary):hover,
html.dark .lab-page .control-button:not(.primary):hover,
html.dark .lab-page .option-chip:hover,
html.dark .lab-page .function-chip:hover,
html.dark .lab-page .service-filter-btn:hover,
html.dark .lab-page .lab-download-actions a:not(.primary):hover{
  color:#f2f6ff!important;
  background:#2d4770!important;
  border-color:#7894bd!important;
}

/* Primary lab controls retain a clear flat fill. */
.lab-page button.primary,
.lab-page .lab-button.primary,
.lab-page .control-button.primary,
.lab-page .lab-actions button.primary,
.lab-page .lab-download-actions .primary{
  color:var(--md-on-primary)!important;
  background:var(--md-primary)!important;
  border-color:var(--md-primary)!important;
  box-shadow:none!important;
}

/* Anime / Services are visibly distinct. */
.lab-nav button[data-lab-page="anime"] .lab-nav-icon{
  font-size:11px;
}

/* ==========================================================
   V14 — HEADER ONLY transplanted from v9
   No footer/main/navigation selectors included.
   ========================================================== */
.site-head{position:relative;
  padding:12px 0 0;}.site-head::before{content:"";
  position:absolute;
  inset:0 0 auto;
  height:92px;
  background:
    linear-gradient(135deg,#274a82 0%,#3d5f9d 48%,#5e7fb4 100%);
  border-bottom:1px solid rgba(255,255,255,.18);
  box-shadow:0 5px 20px rgba(35,61,99,.18);}html.dark .site-head::before{background:linear-gradient(135deg,#0b1118 0%,#1c2c42 48%,#304a6d 100%);}.head-card{position:relative;
  z-index:1;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.25);
  border-radius:14px 14px 0 0;
  background:
    linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.05)),
    rgba(33,61,101,.65);
  backdrop-filter:blur(10px);
  color:#fff;
  box-shadow:var(--shadow);}.head-card::after{content:"";
  position:absolute;
  width:160px;
  height:160px;
  border:28px solid rgba(255,255,255,.035);
  border-radius:50%;
  right:-55px;
  top:-70px;
  pointer-events:none;}.head-top{position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:54px;
  padding:10px 12px 8px;}.brand-lockup{display:flex;
  align-items:center;
  gap:10px;}.brand-mark{width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.38);
  border-radius:9px;
  background:rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15);
  font:700 18px/1 Arial,sans-serif;
  transform:rotate(-3deg);}.brand-text{min-width:0}.brand{display:flex;
  align-items:baseline;
  gap:5px;
  font-size:21px;
  font-weight:700;
  letter-spacing:-.035em;
  line-height:1;}.brand .dot{color:#75d6e6}.brand small{font-size:9px;
  font-weight:400;
  letter-spacing:.08em;
  opacity:.75;}.tagline{margin-top:4px;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.12em;
  opacity:.72;}.controls{display:flex;
  align-items:center;
  gap:2px;}.size-control{position:relative;
  width:24px;
  height:24px;
  border:0;
  border-radius:0;
  background:transparent;
  color:#fff;
  cursor:pointer;
  padding:0;
  font-family:Arial,sans-serif;
  font-weight:400;
  line-height:24px;
  opacity:.82;
  transition:opacity .12s ease;}.size-control:hover{background:transparent;
  opacity:1;}.size-control.active{background:transparent;
  color:#fff;
  box-shadow:none;
  opacity:1;}.size-control.active::after{content:"";
  position:absolute;
  left:5px;
  right:5px;
  bottom:0;
  height:2px;
  background:#fff;
  border-radius:2px;}.size-control[data-size="13"]{font-size:10px}.size-control[data-size="14"]{font-size:12px}.size-control[data-size="16"]{font-size:14px}.size-control[data-size="18"]{font-size:16px}.theme-control{width:23px;
  height:21px;
  margin-left:3px;
  border:1px solid rgba(255,255,255,.34);
  border-radius:3px;
  background-color:rgba(255,255,255,.10);
  background-position:center;
  background-repeat:no-repeat;
  color:#fff;
  cursor:pointer;
  padding:0;
  font:400 13px/19px Arial,sans-serif;
  transition:background-color .12s ease,border-color .12s ease;}.theme-control:hover{background-color:rgba(255,255,255,.18);
  border-color:rgba(255,255,255,.5);}.status-strip{position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:6px 12px;
  border-top:1px solid rgba(255,255,255,.13);
  background:rgba(0,0,0,.08);
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.08em;}.status-right{opacity:.68}html.dark .controls button.active{color:#1d3558}@media (max-width:640px){.site-head{padding-top:7px}.head-top{padding:8px}.brand-mark{display:none}.brand{font-size:18px}.tagline{display:none}.controls{gap:1px}.size-control{width:22px;height:24px;line-height:24px}.theme-control{width:22px;height:20px}.status-strip{padding:5px 8px}.status-right{display:none}}.site-head{padding-top:10px;}.site-head::before{height:88px;
  background:
    linear-gradient(135deg,
      color-mix(in srgb,var(--md-primary) 88%,#20365e),
      var(--md-primary) 54%,
      color-mix(in srgb,var(--md-primary) 78%,#8ba7d2)
    );
  box-shadow:none;}html.dark .site-head::before{background:
    linear-gradient(135deg,#152237,#233957 52%,#355274);}.head-card{border:1px solid rgba(255,255,255,.16);
  border-radius:var(--md-r-xl) var(--md-r-xl) 0 0;
  background:
    linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.045)),
    color-mix(in srgb,var(--md-primary) 74%,#243c66);
  box-shadow:var(--md-elev-3);}.brand-mark{border-radius:var(--md-r-md);
  background:rgba(255,255,255,.11);
  box-shadow:none;
  transform:none;}.controls{gap:3px;}.size-control{border-radius:999px;
  opacity:.82;}.size-control.active::after{left:4px;
  right:4px;
  bottom:1px;
  background:#fff;}.theme-control{width:27px;
  height:27px;
  margin-left:4px;
  border-radius:999px;
  border-color:rgba(255,255,255,.22);
  background-color:rgba(255,255,255,.10);}.theme-control:hover{background-color:rgba(255,255,255,.18);}.status-strip{padding:7px 12px;
  background:rgba(0,0,0,.075);
  border-top:1px solid rgba(255,255,255,.10);}.theme-control{-webkit-tap-highlight-color:transparent;}@media (max-width:640px){.site-head{padding-top:6px;}.head-card{border-radius:14px 14px 0 0;}}.head-card{border-radius:18px 18px 0 0;}.head-top{min-height:58px;
  padding:11px 14px 9px;}.brand{font-size:20px;}.brand small{opacity:.72;}.tagline{margin-top:5px;
  opacity:.68;}.status-strip{padding:6px 14px;
  font-size:8px;}.size-control{width:23px;
  height:23px;
  line-height:23px;}.theme-control{width:28px;
  height:28px;}.theme-control{transition:
    background-color .14s ease,
    box-shadow .14s ease,
    border-color .14s ease,
    opacity .14s ease,
    transform .10s ease;}@media (max-width:640px){.head-top{min-height:54px;
    padding:9px 9px 8px;}}.status-strip{justify-content:flex-end;}.status-right{opacity:.76;
  letter-spacing:.10em;}@media (max-width:640px){.status-strip{justify-content:center;}.status-right{text-align:center;}}.brand-mark{position:relative;
  overflow:hidden;
  width:34px;
  height:34px;
  border:1px solid rgba(255,255,255,.20);
  border-radius:12px;
  background:
    radial-gradient(circle at 28% 22%,rgba(255,255,255,.22),transparent 0 30%,transparent 31%),
    linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.06));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 5px 12px rgba(20,37,65,.15);}.brand-mark::before{content:"";
  position:absolute;
  width:18px;
  height:18px;
  right:-5px;
  bottom:-5px;
  border:4px solid rgba(255,255,255,.09);
  border-radius:50%;}.brand-mark::after{content:"";
  position:absolute;
  left:5px;
  right:5px;
  bottom:4px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,#fff,rgba(255,255,255,.20));
  opacity:.58;}@media (max-width:640px){.brand-mark{width:32px;
    height:32px;}}.site-head::before{height:84px;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb,var(--md-primary) 84%,#233c68),
      color-mix(in srgb,var(--md-primary) 70%,#486fa8) 58%,
      color-mix(in srgb,var(--md-primary) 54%,#89a2c7)
    );}.head-card{border-color:rgba(255,255,255,.14);
  background:
    linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.035)),
    color-mix(in srgb,var(--md-primary) 72%,#29466f);
  box-shadow:
    0 8px 22px rgba(28,48,79,.16),
    0 2px 6px rgba(28,48,79,.08);}html.dark .site-head::before{background:
    linear-gradient(
      135deg,
      color-mix(in srgb,var(--md-surface-3) 88%,#1d3150),
      color-mix(in srgb,var(--md-surface-3) 78%,#284264) 58%,
      color-mix(in srgb,var(--md-primary-container) 36%,var(--md-surface-3))
    );}html.dark .head-card{border-color:color-mix(in srgb,var(--md-outline-variant) 68%,transparent);
  background:
    radial-gradient(circle at 14% 0%,rgba(173,199,255,.06),transparent 34%),
    linear-gradient(
      180deg,
      color-mix(in srgb,var(--md-surface-3) 94%,#263e5c),
      var(--md-surface-3)
    );
  box-shadow:
    0 8px 24px rgba(0,0,0,.24),
    0 2px 6px rgba(0,0,0,.15);}html.dark .head-card::after{opacity:.025;}html.dark .brand-mark{border-color:color-mix(in srgb,var(--md-outline) 48%,transparent);
  background:
    radial-gradient(circle at 28% 22%,rgba(255,255,255,.09),transparent 30%),
    linear-gradient(
      145deg,
      color-mix(in srgb,var(--md-primary-container) 44%,var(--md-surface-3)),
      color-mix(in srgb,var(--md-surface-2) 86%,#1a2a3e)
    );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 4px 10px rgba(0,0,0,.18);}html.dark .theme-control{border-color:color-mix(in srgb,var(--md-outline) 46%,transparent);
  background:color-mix(in srgb,var(--md-surface-2) 82%,transparent);}html.dark .theme-control:hover{background:color-mix(in srgb,var(--md-primary-container) 24%,var(--md-surface-2));}html.dark .status-strip{background:
    linear-gradient(
      90deg,
      color-mix(in srgb,var(--md-surface-2) 82%,transparent),
      color-mix(in srgb,var(--md-primary-container) 10%,var(--md-surface-2))
    );
  border-top-color:color-mix(in srgb,var(--md-outline-variant) 50%,transparent);}.status-strip{min-height:27px;}.status-right{font-weight:700;}@media (max-width:640px){.site-head::before{height:79px;}.head-card{border-radius:14px 14px 0 0;}}.theme-control, .size-control{outline:none;}.theme-control:focus-visible, .size-control:focus-visible{box-shadow:
    0 0 0 2px var(--md-surface),
    0 0 0 4px color-mix(in srgb,var(--md-primary) 48%,transparent);}.size-control{color:rgba(255,255,255,.88);
  text-shadow:0 1px 1px rgba(0,0,0,.10);}.size-control:hover{background:rgba(255,255,255,.11);
  color:#fff;}.size-control.active{color:#fff;
  background:rgba(255,255,255,.08);}.theme-control{border-color:rgba(255,255,255,.31);
  background:rgba(255,255,255,.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 2px 5px rgba(21,37,62,.10);}.theme-control:hover{border-color:rgba(255,255,255,.44);
  background:rgba(255,255,255,.20);}html:not(.dark) .site-head::before{background:
    linear-gradient(
      135deg,
      #385b92 0%,
      #5577aa 54%,
      #7895bf 100%
    );}html:not(.dark) .head-card{border-color:rgba(255,255,255,.20);
  background:
    radial-gradient(circle at 14% 0%,rgba(255,255,255,.10),transparent 34%),
    linear-gradient(
      180deg,
      rgba(255,255,255,.11),
      rgba(255,255,255,.035)
    ),
    #486b9f;
  box-shadow:
    0 8px 22px rgba(36,57,91,.14),
    0 2px 6px rgba(36,57,91,.07);}html:not(.dark) .status-strip{background:
    linear-gradient(
      90deg,
      rgba(34,57,91,.14),
      rgba(255,255,255,.035)
    );
  border-top-color:rgba(255,255,255,.14);}html.dark .theme-control{border-color:color-mix(in srgb,var(--md-primary) 30%,var(--md-outline));
  background:color-mix(in srgb,var(--md-surface-2) 74%,var(--md-primary-container));}.theme-control{color:#fff!important;
  opacity:1!important;}.size-control{color:rgba(255,255,255,.94)!important;
  opacity:1!important;}body.lab-home .site-head{padding-bottom:0;}body.lab-home .head-card{width:100%;
  max-width:736px;
  box-sizing:border-box;}body.lab-home .head-card{border-bottom-color:color-mix(in srgb,var(--md-outline-variant) 46%,rgba(255,255,255,.18));
  border-radius:14px 14px 0 0;
  box-shadow:
    0 5px 14px rgba(27,39,60,.08);}body.lab-home .status-strip{position:relative;
  min-height:28px;
  border-top:1px solid rgba(255,255,255,.11);
  border-bottom:0;
  background:
    linear-gradient(
      90deg,
      rgba(15,34,60,.16),
      rgba(255,255,255,.045) 48%,
      rgba(255,255,255,.08)
    );}body.lab-home .status-strip::after{content:"";
  position:absolute;
  z-index:5;
  left:12px;
  right:12px;
  bottom:-1px;
  height:2px;
  border-radius:999px;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.18) 15%,
      rgba(255,255,255,.30) 50%,
      rgba(255,255,255,.15) 85%,
      transparent
    );
  opacity:.72;}html.dark body.lab-home .head-card{border-bottom-color:color-mix(in srgb,var(--md-outline-variant) 52%,transparent);
  box-shadow:0 5px 15px rgba(0,0,0,.17);}html.dark body.lab-home .status-strip{background:
    linear-gradient(
      90deg,
      color-mix(in srgb,var(--md-surface-3) 84%,transparent),
      color-mix(in srgb,var(--md-primary-container) 12%,var(--md-surface-3)) 54%,
      var(--md-surface-3)
    );}html.dark body.lab-home .status-strip::after{background:
    linear-gradient(
      90deg,
      transparent,
      rgba(173,199,255,.10) 14%,
      rgba(173,199,255,.22) 50%,
      rgba(169,208,210,.10) 86%,
      transparent
    );}@media (max-width:640px){body.lab-home .head-card{border-radius:12px 12px 0 0;}}
/* ==========================================================
   v15 — exact v9 HEADER -> HOME connection
   Footer and inner-page navigation intentionally untouched.
   ========================================================== */

body.lab-home .site-head{
  padding-bottom:0;
}

body.lab-home .head-card,
body.lab-home .lab-page[data-page="home"] .main{
  width:100%;
  max-width:736px;
  box-sizing:border-box;
}

/* Header loses the detached-card feel and becomes the top of one shell. */
body.lab-home .head-card{
  border-bottom-color:color-mix(in srgb,var(--md-outline-variant) 46%,rgba(255,255,255,.18));
  border-radius:14px 14px 0 0;
  box-shadow:
    0 5px 14px rgba(27,39,60,.08);
}

/* Exact v9 status-strip handoff. */
body.lab-home .status-strip{
  position:relative;
  min-height:28px;
  border-top:1px solid rgba(255,255,255,.11);
  border-bottom:0;
  background:
    linear-gradient(
      90deg,
      rgba(15,34,60,.16),
      rgba(255,255,255,.045) 48%,
      rgba(255,255,255,.08)
    );
}

body.lab-home .status-strip::after{
  content:"";
  position:absolute;
  z-index:5;
  left:12px;
  right:12px;
  bottom:-1px;
  height:2px;
  border-radius:999px;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.18) 15%,
      rgba(255,255,255,.30) 50%,
      rgba(255,255,255,.15) 85%,
      transparent
    );
  opacity:.72;
}

/* Exact v9 shell join. */
body.lab-home .lab-shell{
  width:min(736px,calc(100% - 16px));
  margin:-1px auto 0;
}

body.lab-home .lab-page[data-page="home"]{
  margin:0;
}

body.lab-home .lab-page[data-page="home"] .main{
  border-top:0;
  border-radius:0;
  box-shadow:
    0 8px 18px rgba(27,39,60,.07);
}

/* Exact v9 tonal continuation into Search. */
body.lab-home .search-zone{
  position:relative;
  padding-top:14px;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb,var(--md-primary-container) 16%,var(--md-surface-2)),
      var(--md-surface-2) 70%,
      var(--md-surface)
    );
}

body.lab-home .search-zone::after{
  opacity:.46;
}

body.lab-home .search-zone::before{
  color:color-mix(in srgb,var(--md-primary) 72%,var(--md-on-surface-variant));
}

/* Exact dark-theme v9 connection. */
html.dark body.lab-home .head-card{
  border-bottom-color:color-mix(in srgb,var(--md-outline-variant) 52%,transparent);
  box-shadow:
    0 5px 15px rgba(0,0,0,.17);
}

html.dark body.lab-home .status-strip{
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb,var(--md-surface-3) 84%,transparent),
      color-mix(in srgb,var(--md-primary-container) 12%,var(--md-surface-3)) 54%,
      var(--md-surface-3)
    );
}

html.dark body.lab-home .status-strip::after{
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(173,199,255,.10) 14%,
      rgba(173,199,255,.22) 50%,
      rgba(169,208,210,.10) 86%,
      transparent
    );
}

html.dark body.lab-home .search-zone{
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb,var(--md-primary-container) 13%,var(--md-surface-2)),
      var(--md-surface-2) 72%,
      var(--md-surface)
    );
}

/* Exact v9 mobile geometry for the header join only. */
@media(max-width:640px){
  body.lab-home .lab-shell{
    width:calc(100% - 8px);
  }

  body.lab-home .head-card{
    border-radius:12px 12px 0 0;
  }
}

/* ==========================================================
   v16 — SHARE AREA refinement
   Flat segmented toolbar, no pill buttons.
   ========================================================== */

.utility-row{
  padding:10px 12px!important;
  gap:10px!important;
  align-items:center!important;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb,var(--md-surface-2) 94%,var(--md-surface)),
      var(--md-surface-2)
    )!important;
}

.shares{
  display:inline-flex!important;
  align-items:stretch!important;
  gap:0!important;
  padding:0!important;
  border:1px solid var(--md-outline)!important;
  border-radius:7px!important;
  overflow:hidden!important;
  background:var(--md-surface)!important;
}

.share{
  min-height:31px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  padding:0 10px!important;
  margin:0!important;
  border:0!important;
  border-right:1px solid var(--md-outline-variant)!important;
  border-radius:0!important;
  background:transparent!important;
  color:var(--md-on-surface)!important;
  box-shadow:none!important;
  font-size:8px!important;
  font-weight:700!important;
  line-height:1!important;
}

.share:last-child{
  border-right:0!important;
}

.share::before{
  width:18px!important;
  height:18px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:4px!important;
  color:#fff!important;
  font:bold 9px/1 Arial,sans-serif!important;
  box-shadow:none!important;
}

.share.x::before{
  content:"X"!important;
  background:#15181d!important;
}

.share.fb::before{
  content:"f"!important;
  background:#2c64ae!important;
  font-size:11px!important;
}

.share.wa::before{
  content:"☎"!important;
  background:#23885c!important;
  font-size:9px!important;
}

.share:hover{
  border-color:transparent!important;
  background:var(--md-primary-container)!important;
  color:var(--md-on-primary-container)!important;
  transform:none!important;
  box-shadow:none!important;
  filter:none!important;
}

.share:focus-visible{
  position:relative;
  z-index:2;
  outline:2px solid var(--md-primary)!important;
  outline-offset:-2px!important;
  box-shadow:none!important;
}

.utility-note{
  margin-left:auto!important;
  color:var(--md-on-surface-variant)!important;
  font-size:7px!important;
  font-weight:700!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
}

/* Light theme: crisp utility-strip contrast */
html:not(.dark) .shares{
  border-color:#8d99a9!important;
  background:#f8fafc!important;
}

html:not(.dark) .share{
  color:#24374f!important;
  border-right-color:#d3dae3!important;
}

html:not(.dark) .share:hover{
  background:#dce7f7!important;
  color:#1d365b!important;
}

/* Dark theme: visible without looking glossy */
html.dark .shares{
  border-color:#566477!important;
  background:#1a2430!important;
}

html.dark .share{
  color:#e7edf6!important;
  border-right-color:#3e4b5d!important;
}

html.dark .share:hover{
  background:#2d4770!important;
  color:#f2f6ff!important;
}

/* Slightly more editorial label before the group */
.shares::before{
  content:"SHARE";
  display:flex;
  align-items:center;
  padding:0 8px;
  border-right:1px solid var(--md-outline-variant);
  background:var(--md-surface-2);
  color:var(--md-on-surface-variant);
  font-size:6.5px;
  font-weight:800;
  letter-spacing:.12em;
}

html.dark .shares::before{
  border-right-color:#3e4b5d;
  background:#202c39;
  color:#aebbd0;
}

@media(max-width:640px){
  .utility-row{
    padding:8px!important;
  }

  .shares{
    width:100%!important;
  }

  .shares::before{
    padding:0 6px;
  }

  .share{
    flex:1 1 auto!important;
    min-width:0!important;
    padding:0 6px!important;
    font-size:7.2px!important;
  }

  .share::before{
    width:17px!important;
    height:17px!important;
  }
}

/* ==========================================================
   v17 — SHARE AREA refinement 2
   flatter / cleaner / more portal-like
   ========================================================== */

.utility-row{
  padding:9px 12px!important;
  gap:9px!important;
  align-items:center!important;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb,var(--md-surface-2) 96%,var(--md-surface)),
      var(--md-surface-2)
    )!important;
}

.shares{
  display:inline-grid!important;
  grid-template-columns:auto repeat(3,minmax(0,1fr))!important;
  align-items:stretch!important;
  gap:0!important;
  min-width:330px!important;
  padding:0!important;
  overflow:hidden!important;
  border:1px solid var(--md-outline)!important;
  border-radius:5px!important;
  background:var(--md-surface)!important;
}

/* Small flat utility label */
.shares::before{
  content:"SHARE"!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:48px!important;
  padding:0 7px!important;
  border-right:1px solid var(--md-outline-variant)!important;
  background:var(--md-surface-2)!important;
  color:var(--md-on-surface-variant)!important;
  font-size:6.3px!important;
  font-weight:800!important;
  letter-spacing:.13em!important;
}

/* Social items: flat cells, no pill/icon-bubble treatment */
.share{
  position:relative!important;
  min-height:32px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:6px!important;
  padding:0 9px!important;
  margin:0!important;
  border:0!important;
  border-right:1px solid var(--md-outline-variant)!important;
  border-radius:0!important;
  background:transparent!important;
  color:var(--md-on-surface)!important;
  box-shadow:none!important;
  font-size:7.8px!important;
  font-weight:700!important;
  line-height:1!important;
  overflow:hidden!important;
}

.share:last-child{
  border-right:0!important;
}

/* Replace filled icon squares with simple glyphs */
.share::before{
  width:15px!important;
  height:15px!important;
  display:grid!important;
  place-items:center!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:var(--md-on-surface-variant)!important;
  font:bold 9px/1 Arial,sans-serif!important;
}

.share.x::before{
  content:"X"!important;
  color:#1d2229!important;
}

.share.fb::before{
  content:"f"!important;
  color:#2d63a8!important;
  font-size:11px!important;
}

.share.wa::before{
  content:"●"!important;
  color:#2c8b62!important;
  font-size:8px!important;
}

/* Brand accent is a tiny bottom rail, not a colored button */
.share::after{
  content:""!important;
  position:absolute!important;
  left:8px!important;
  right:8px!important;
  bottom:0!important;
  height:2px!important;
  transform:scaleX(.42)!important;
  transform-origin:left center!important;
  opacity:.5!important;
  transition:transform .14s ease,opacity .14s ease!important;
}

.share.x::after{background:#1d2229!important}
.share.fb::after{background:#2d63a8!important}
.share.wa::after{background:#2c8b62!important}

.share:hover{
  background:color-mix(in srgb,var(--md-primary-container) 45%,var(--md-surface))!important;
  color:var(--md-on-primary-container)!important;
  transform:none!important;
  box-shadow:none!important;
}

.share:hover::after{
  transform:scaleX(1)!important;
  opacity:.9!important;
}

.share:focus-visible{
  outline:2px solid var(--md-primary)!important;
  outline-offset:-2px!important;
}

/* Keep the right-side utility note quieter */
.utility-note{
  margin-left:auto!important;
  color:var(--md-on-surface-variant)!important;
  font-size:6.8px!important;
  font-weight:700!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
}

/* Light theme */
html:not(.dark) .shares{
  border-color:#8b98aa!important;
  background:#fbfcfe!important;
}

html:not(.dark) .shares::before{
  border-right-color:#d3dae3!important;
  background:#eef2f6!important;
  color:#5f6d7f!important;
}

html:not(.dark) .share{
  border-right-color:#d7dde6!important;
  color:#26384f!important;
}

html:not(.dark) .share:hover{
  background:#e6edf7!important;
  color:#1d365b!important;
}

/* Dark theme */
html.dark .shares{
  border-color:#536174!important;
  background:#1a2430!important;
}

html.dark .shares::before{
  border-right-color:#3e4b5d!important;
  background:#202b38!important;
  color:#aeb9c8!important;
}

html.dark .share{
  border-right-color:#3e4b5d!important;
  color:#e4ebf4!important;
}

html.dark .share::before{
  color:#b9c5d6!important;
}

html.dark .share.x::before{color:#eef2f7!important}
html.dark .share.fb::before{color:#8db2ea!important}
html.dark .share.wa::before{color:#74c79e!important}

html.dark .share.x::after{background:#dce4ef!important}
html.dark .share.fb::after{background:#729bd6!important}
html.dark .share.wa::after{background:#67bc91!important}

html.dark .share:hover{
  background:#26384f!important;
  color:#f3f6fb!important;
}

/* Mobile: full-width, evenly distributed */
@media(max-width:640px){
  .utility-row{
    padding:8px!important;
  }

  .shares{
    width:100%!important;
    min-width:0!important;
    grid-template-columns:44px repeat(3,1fr)!important;
  }

  .shares::before{
    min-width:0!important;
    padding:0 4px!important;
    font-size:5.9px!important;
  }

  .share{
    min-width:0!important;
    padding:0 6px!important;
    justify-content:center!important;
    gap:4px!important;
    font-size:7px!important;
  }

  .share::after{
    left:6px!important;
    right:6px!important;
  }
}

/* ==========================================================
   v18 — SHARE AREA cleanup
   Remove SHARE label + outer border.
   ========================================================== */

.shares{
  display:inline-flex!important;
  align-items:stretch!important;
  min-width:0!important;
  width:auto!important;
  padding:0!important;
  gap:0!important;
  overflow:visible!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
}

/* Remove the SHARE label cell completely */
.shares::before{
  content:none!important;
  display:none!important;
}

/* Keep only quiet separators between networks */
.share{
  min-height:31px!important;
  padding:0 10px!important;
  border:0!important;
  border-right:1px solid var(--md-outline-variant)!important;
  background:transparent!important;
}

.share:first-child{
  padding-left:2px!important;
}

.share:last-child{
  border-right:0!important;
  padding-right:2px!important;
}

/* No black/dark frame in either theme */
html:not(.dark) .shares,
html.dark .shares{
  border:0!important;
  background:transparent!important;
}

/* Keep separators light and unobtrusive */
html:not(.dark) .share{
  border-right-color:#d7dde6!important;
}

html.dark .share{
  border-right-color:#3e4b5d!important;
}

/* Hover stays local to each item, not a boxed toolbar */
.share:hover{
  background:color-mix(in srgb,var(--md-primary-container) 40%,transparent)!important;
}

/* Mobile still distributes the three share actions evenly */
@media(max-width:640px){
  .shares{
    width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(3,1fr)!important;
  }

  .share{
    justify-content:center!important;
    padding:0 6px!important;
  }

  .share:first-child{
    padding-left:6px!important;
  }

  .share:last-child{
    padding-right:6px!important;
  }
}

/* ==========================================================
   v19 — Trending category labels
   Original-style colored initial + remaining word.
   ========================================================== */

.trend-row{
  grid-template-columns:minmax(0,1fr)!important;
  gap:0!important;
  padding-left:7px!important;
}

.trend-row > div{
  min-width:0;
}

.trend-type-label{
  display:inline!important;
  margin-right:3px!important;
  color:var(--md-on-surface)!important;
  font-size:9.6px!important;
  font-weight:800!important;
  letter-spacing:0!important;
}

.trend-type-initial{
  display:inline!important;
  font-weight:900!important;
}

.trend-type-rest{
  display:inline!important;
  color:var(--md-on-surface)!important;
}

/* Preserve the original category accent palette */
.trend-a .trend-type-initial{color:#cb6273!important}
.trend-m .trend-type-initial{color:#4e7fc4!important}
.trend-y .trend-type-initial{color:#d26a55!important}
.trend-w .trend-type-initial{color:#3b9d72!important}
.trend-r .trend-type-initial{color:#d8892e!important}

/* Slightly brighter accents in dark mode */
html.dark .trend-a .trend-type-initial{color:#e78796!important}
html.dark .trend-m .trend-type-initial{color:#7fa6df!important}
html.dark .trend-y .trend-type-initial{color:#e58b79!important}
html.dark .trend-w .trend-type-initial{color:#6fc39a!important}
html.dark .trend-r .trend-type-initial{color:#e8a95f!important}

@media(max-width:640px){
  .trend-row{
    padding-left:6px!important;
  }

  .trend-type-label{
    font-size:9.2px!important;
  }
}

/* ==========================================================
   v20 — Trending labels: slightly more distinct
   ========================================================== */

.trend-type-label{
  position:relative!important;
  display:inline-block!important;
  min-width:58px!important;
  margin-right:5px!important;
  padding-bottom:2px!important;
  vertical-align:baseline!important;
  font-size:9.7px!important;
  font-weight:800!important;
  line-height:1!important;
}

/* First letter gets more presence without turning into a badge */
.trend-type-initial{
  position:relative!important;
  top:.15px!important;
  margin-right:.5px!important;
  font-size:11.2px!important;
  font-weight:900!important;
  letter-spacing:-.03em!important;
}

/* Remainder stays neutral but slightly stronger */
.trend-type-rest{
  color:color-mix(in srgb,var(--md-on-surface) 92%,var(--md-on-surface-variant))!important;
  font-weight:800!important;
}

/* Thin category signature below each word */
.trend-type-label::after{
  content:""!important;
  position:absolute!important;
  left:0!important;
  bottom:0!important;
  width:22px!important;
  height:1.5px!important;
  border-radius:999px!important;
  opacity:.72!important;
}

/* Stronger category palette */
.trend-a .trend-type-initial{color:#c84d66!important}
.trend-m .trend-type-initial{color:#3f73bc!important}
.trend-y .trend-type-initial{color:#cf5a43!important}
.trend-w .trend-type-initial{color:#2f9167!important}
.trend-r .trend-type-initial{color:#d17a17!important}

.trend-a::after{background:#c84d66!important}
.trend-m::after{background:#3f73bc!important}
.trend-y::after{background:#cf5a43!important}
.trend-w::after{background:#2f9167!important}
.trend-r::after{background:#d17a17!important}

/* Slightly different underline lengths create visual identity */
.trend-a::after{width:20px!important}
.trend-m::after{width:25px!important}
.trend-y::after{width:28px!important}
.trend-w::after{width:24px!important}
.trend-r::after{width:22px!important}

/* Dark theme: brighten both initials and signature lines */
html.dark .trend-a .trend-type-initial{color:#f08a9a!important}
html.dark .trend-m .trend-type-initial{color:#8eb5ef!important}
html.dark .trend-y .trend-type-initial{color:#ee927f!important}
html.dark .trend-w .trend-type-initial{color:#78cfa8!important}
html.dark .trend-r .trend-type-initial{color:#efb365!important}

html.dark .trend-a::after{background:#f08a9a!important}
html.dark .trend-m::after{background:#8eb5ef!important}
html.dark .trend-y::after{background:#ee927f!important}
html.dark .trend-w::after{background:#78cfa8!important}
html.dark .trend-r::after{background:#efb365!important}

/* Keep rows compact and aligned */
.trend-row > div{
  display:flex!important;
  align-items:baseline!important;
  min-width:0!important;
}

.trend-row a:first-of-type{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}

@media(max-width:640px){
  .trend-type-label{
    min-width:55px!important;
    margin-right:4px!important;
    font-size:9.3px!important;
  }

  .trend-type-initial{
    font-size:10.7px!important;
  }
}

/* ==========================================================
   v21 — Category sublinks refinement
   Flat text links, no rounded chip borders.
   ========================================================== */

.cat-sub{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  gap:0!important;
  margin-top:7px!important;
}

.cat-sub a{
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  min-height:23px!important;
  padding:2px 7px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:var(--md-on-surface-variant)!important;
  font-size:7.6px!important;
  font-weight:700!important;
  line-height:1!important;
  text-decoration:none!important;
  box-shadow:none!important;
}

/* simple separators between subcategories */
.cat-sub a + a::before{
  content:"";
  position:absolute;
  left:0;
  top:6px;
  bottom:6px;
  width:1px;
  background:var(--md-outline-variant);
  opacity:.85;
}

/* tiny accent rail, only on interaction */
.cat-sub a::after{
  content:"";
  position:absolute;
  left:7px;
  right:7px;
  bottom:1px;
  height:1.5px;
  border-radius:999px;
  background:var(--cat-accent);
  transform:scaleX(0);
  transform-origin:left center;
  opacity:.78;
  transition:transform .14s ease, opacity .14s ease;
}

.cat-sub a:hover{
  border:0!important;
  background:transparent!important;
  color:var(--md-on-surface)!important;
}

.cat-sub a:hover::after{
  transform:scaleX(1);
  opacity:1;
}

.cat-sub a:focus-visible{
  outline:1px solid color-mix(in srgb,var(--cat-accent) 55%,var(--md-outline));
  outline-offset:-1px;
  background:color-mix(in srgb,var(--cat-accent) 7%,transparent)!important;
}

/* Dark mode remains flat, just brighter text/separators */
html.dark .cat-sub a{
  border:0!important;
  background:transparent!important;
  color:var(--md-on-surface-variant)!important;
}

html.dark .cat-sub a + a::before{
  background:color-mix(in srgb,var(--md-outline-variant) 78%,transparent);
}

html.dark .cat-sub a:hover{
  background:transparent!important;
  color:var(--md-on-surface)!important;
}

/* Mobile: slightly tighter */
@media(max-width:640px){
  .cat-sub{
    margin-top:6px!important;
  }

  .cat-sub a{
    min-height:22px!important;
    padding:2px 6px!important;
    font-size:7.3px!important;
  }

  .cat-sub a::after{
    left:6px;
    right:6px;
  }
}

/* ==========================================================
   v22 — Trending initial block connected to underline
   ========================================================== */

.trend-type-label{
  position:relative!important;
  display:inline-flex!important;
  align-items:flex-end!important;
  min-width:58px!important;
  margin-right:5px!important;
  padding-bottom:3px!important;
  line-height:1!important;
}

/* Colored first letter becomes a compact flat block */
.trend-type-initial{
  position:relative!important;
  z-index:2!important;
  top:0!important;
  min-width:15px!important;
  height:17px!important;
  display:inline-grid!important;
  place-items:center!important;
  margin-right:2px!important;
  padding:0 2px!important;
  border-radius:4px 4px 1px 1px!important;
  color:#fff!important;
  font-size:10.6px!important;
  font-weight:900!important;
  line-height:1!important;
  letter-spacing:-.03em!important;
  box-shadow:none!important;
}

/* Neutral remainder remains unchanged in spirit */
.trend-type-rest{
  position:relative!important;
  bottom:1px!important;
  display:inline!important;
  color:color-mix(in srgb,var(--md-on-surface) 92%,var(--md-on-surface-variant))!important;
  font-size:9.7px!important;
  font-weight:800!important;
}

/* The line begins directly under the letter block and continues outward */
.trend-type-label::after{
  content:""!important;
  position:absolute!important;
  z-index:1!important;
  left:0!important;
  bottom:0!important;
  height:2px!important;
  border-radius:0 999px 999px 0!important;
  opacity:.88!important;
}

/* Category colors: letter block and underline are one accent */
.trend-a .trend-type-initial,
.trend-a::after{background:#c84d66!important}

.trend-m .trend-type-initial,
.trend-m::after{background:#3f73bc!important}

.trend-y .trend-type-initial,
.trend-y::after{background:#cf5a43!important}

.trend-w .trend-type-initial,
.trend-w::after{background:#2f9167!important}

.trend-r .trend-type-initial,
.trend-r::after{background:#d17a17!important}

/* Slightly tailored line lengths */
.trend-a::after{width:23px!important}
.trend-m::after{width:28px!important}
.trend-y::after{width:31px!important}
.trend-w::after{width:27px!important}
.trend-r::after{width:25px!important}

/* Dark theme uses brighter tonal accents, same connected geometry */
html.dark .trend-a .trend-type-initial,
html.dark .trend-a::after{background:#e98597!important}

html.dark .trend-m .trend-type-initial,
html.dark .trend-m::after{background:#7fa8e5!important}

html.dark .trend-y .trend-type-initial,
html.dark .trend-y::after{background:#e88a77!important}

html.dark .trend-w .trend-type-initial,
html.dark .trend-w::after{background:#6dc59d!important}

html.dark .trend-r .trend-type-initial,
html.dark .trend-r::after{background:#e6a957!important}

/* Dark-mode initial text remains readable */
html.dark .trend-type-initial{
  color:#17212d!important;
}

/* Keep rows compact */
@media(max-width:640px){
  .trend-type-label{
    min-width:55px!important;
    padding-bottom:3px!important;
  }

  .trend-type-initial{
    min-width:14px!important;
    height:16px!important;
    font-size:10px!important;
  }

  .trend-type-rest{
    font-size:9.3px!important;
  }
}

/* ==========================================================
   v23 — Trending initials: make letters clearly visible
   ========================================================== */

.trend-type-initial{
  color:#ffffff!important;
  font-size:10.8px!important;
  font-weight:900!important;
  text-shadow:
    0 1px 1px rgba(0,0,0,.22)!important;
  line-height:1!important;
}

/* Keep white initials in dark mode too */
html.dark .trend-type-initial{
  color:#ffffff!important;
  text-shadow:
    0 1px 1px rgba(0,0,0,.30)!important;
}

/* Slightly deepen the lightest accents so white remains readable */
.trend-w .trend-type-initial,
.trend-w::after{
  background:#277d59!important;
}

.trend-r .trend-type-initial,
.trend-r::after{
  background:#b9660f!important;
}

html.dark .trend-w .trend-type-initial,
html.dark .trend-w::after{
  background:#479b78!important;
}

html.dark .trend-r .trend-type-initial,
html.dark .trend-r::after{
  background:#c9842e!important;
}

/* ==========================================================
   v24 — Trending initials: unmistakably legible
   ========================================================== */

.trend-type-initial{
  min-width:18px!important;
  width:18px!important;
  height:18px!important;
  padding:0!important;
  margin-right:3px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:4px 4px 1px 1px!important;

  color:#ffffff!important;
  -webkit-text-fill-color:#ffffff!important;
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:11.5px!important;
  font-weight:900!important;
  line-height:18px!important;
  letter-spacing:0!important;

  text-shadow:
    -1px 0 rgba(0,0,0,.28),
     1px 0 rgba(0,0,0,.28),
     0 -1px rgba(0,0,0,.28),
     0 1px rgba(0,0,0,.28)!important;

  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.12)!important;
  opacity:1!important;
}

/* Deeper, more saturated blocks for maximum letter contrast */
.trend-a .trend-type-initial,
.trend-a::after{
  background:#b63850!important;
}

.trend-m .trend-type-initial,
.trend-m::after{
  background:#315fa5!important;
}

.trend-y .trend-type-initial,
.trend-y::after{
  background:#b94734!important;
}

.trend-w .trend-type-initial,
.trend-w::after{
  background:#24714f!important;
}

.trend-r .trend-type-initial,
.trend-r::after{
  background:#a95b0c!important;
}

/* Same high-contrast treatment in dark mode */
html.dark .trend-type-initial{
  color:#ffffff!important;
  -webkit-text-fill-color:#ffffff!important;
  text-shadow:
    -1px 0 rgba(0,0,0,.40),
     1px 0 rgba(0,0,0,.40),
     0 -1px rgba(0,0,0,.40),
     0 1px rgba(0,0,0,.40)!important;
}

html.dark .trend-a .trend-type-initial,
html.dark .trend-a::after{
  background:#c94d67!important;
}

html.dark .trend-m .trend-type-initial,
html.dark .trend-m::after{
  background:#4676bc!important;
}

html.dark .trend-y .trend-type-initial,
html.dark .trend-y::after{
  background:#c95c49!important;
}

html.dark .trend-w .trend-type-initial,
html.dark .trend-w::after{
  background:#338563!important;
}

html.dark .trend-r .trend-type-initial,
html.dark .trend-r::after{
  background:#bd721f!important;
}

/* Give the remainder a tiny bit more breathing room */
.trend-type-rest{
  margin-left:0!important;
  bottom:1px!important;
}

/* Keep underline visually attached to the block */
.trend-type-label::after{
  left:0!important;
  bottom:0!important;
  height:2px!important;
}

/* Mobile remains readable */
@media(max-width:640px){
  .trend-type-initial{
    min-width:17px!important;
    width:17px!important;
    height:17px!important;
    font-size:11px!important;
    line-height:17px!important;
  }
}


/* ==========================================================
   v25 — cohesion, accessibility and responsive polish
   Keeps the compact yTube.SITE / WAP geometry while making the
   design feel more intentional, tactile and complete.
   ========================================================== */

:root{
  --v25-focus:color-mix(in srgb,var(--md-primary) 58%,transparent);
  --v25-hairline:color-mix(in srgb,var(--md-outline-variant) 86%,transparent);
  scroll-padding-top:58px;
}

html.dark{
  --v25-focus:color-mix(in srgb,var(--md-primary) 68%,transparent);
  --v25-hairline:color-mix(in srgb,var(--md-outline-variant) 72%,transparent);
}

body{
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

::selection{
  background:var(--md-primary-container);
  color:var(--md-on-primary-container);
}

.skip-link{
  position:fixed;
  z-index:2000;
  left:10px;
  top:8px;
  padding:7px 10px;
  border:1px solid var(--md-primary);
  border-radius:8px;
  background:var(--md-surface);
  color:var(--md-on-surface);
  font-size:9px;
  font-weight:800;
  box-shadow:var(--md-elev-2);
  transform:translateY(-150%);
  transition:transform .14s ease;
}
.skip-link:focus{transform:translateY(0)}

/* Header: preserve the v9/v14 identity, improve finish only. */
.site-head{isolation:isolate}
.head-card{
  border-bottom-color:rgba(255,255,255,.11);
  box-shadow:0 8px 22px rgba(28,48,78,.13);
}
html.dark .head-card{box-shadow:0 10px 26px rgba(0,0,0,.28)}

.brand-mark{
  transition:background-color .14s ease,border-color .14s ease,transform .14s ease;
}
.brand-lockup:hover .brand-mark{transform:translateY(-1px)}

.controls button:focus-visible,
.theme-control:focus-visible,
.size-control:focus-visible{
  outline:2px solid rgba(255,255,255,.94)!important;
  outline-offset:2px!important;
  box-shadow:none!important;
}

.status-strip{
  min-height:26px;
  justify-content:flex-end;
}
.status-right{
  display:inline-flex;
  align-items:center;
  gap:6px;
  opacity:.76;
}
.status-right::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:#73e0a7;
  box-shadow:0 0 0 3px rgba(115,224,167,.10);
}

/* Home search: compact console on desktop, efficient two-row control on phones. */
.search-zone{
  isolation:isolate;
}
.search-zone::after{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  bottom:-1px;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--v25-hairline) 12% 88%,transparent);
  pointer-events:none;
}
.search-row{align-items:stretch}
.search-row input[type="search"],
.search-row select{
  transition:border-color .14s ease,background-color .14s ease,box-shadow .14s ease;
}
.search-row input[type="search"]:hover,
.search-row select:hover{
  border-color:color-mix(in srgb,var(--md-primary) 28%,var(--md-outline));
}
.search-row input[type="search"]:focus,
.search-row select:focus{
  border-color:var(--md-primary)!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--md-primary) 14%,transparent)!important;
}
.search-btn{
  min-width:68px;
  letter-spacing:.01em;
}
.search-btn::after{
  content:"→";
  margin-left:6px;
  font-size:10px;
  line-height:1;
  opacity:.9;
}

/* Feature rail: slightly stronger hierarchy without widening the site. */
.feature-rail{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}
.trending,.quick-panel{min-width:0;max-width:100%}
.trending .module-title,
.quick-panel .module-title{margin-bottom:8px}

.trend-row{
  min-height:33px;
  border-radius:8px;
}
.trend-row > div{gap:1px}
.trend-row a:first-of-type{font-weight:700!important}
.trend-row .meta{flex:0 0 auto}

@media(hover:hover){
  .trend-row:hover{transform:translateX(1px)}
}

/* Random pick: calmer floating-card treatment and clearer action row. */
.pick-shell{padding-bottom:8px}
.pick-feature{
  width:100%;
  min-width:0;
  max-width:100%;
  border-color:color-mix(in srgb,var(--md-outline-variant) 88%,var(--md-primary));
  box-shadow:0 12px 28px rgba(35,55,86,.11),0 2px 7px rgba(35,55,86,.05);
}
html.dark .pick-feature{box-shadow:0 14px 30px rgba(0,0,0,.24),0 2px 7px rgba(0,0,0,.14)}
.pick-copy{min-width:0;max-width:100%}
.pick-title,
.pick-meta,
.pick-desc{
  max-width:100%!important;
  overflow-wrap:anywhere;
}
.pick-actions{
  margin-top:auto!important;
  padding-top:9px;
  border-top:1px solid color-mix(in srgb,var(--md-outline-variant) 72%,transparent);
  flex-wrap:wrap;
}
.pick-counter::before{content:""!important}
.pick-counter{letter-spacing:.04em}

/* Share bar: one quiet utility strip, not a competing module. */
.utility-row{
  background:color-mix(in srgb,var(--md-surface) 92%,var(--md-surface-2));
}
.shares{align-items:center}
.share{
  min-height:30px;
  border-radius:7px!important;
  font-weight:800;
}
.utility-note{
  font-size:7px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

/* Category cards: stronger grouping and larger click target, still flat/compact. */
.category{
  cursor:pointer;
  border-color:color-mix(in srgb,var(--md-outline-variant) 92%,var(--cat-accent));
  transition:border-color .14s ease,background-color .14s ease,box-shadow .14s ease;
}
.category:hover{
  border-color:color-mix(in srgb,var(--cat-accent) 42%,var(--md-outline));
  background:color-mix(in srgb,var(--cat-accent) 3%,var(--md-surface));
  box-shadow:var(--md-elev-1);
}
.category:focus-visible{
  outline:2px solid color-mix(in srgb,var(--cat-accent) 62%,var(--md-primary));
  outline-offset:-2px;
}
.cat-title a{text-underline-offset:3px}
.cat-go{pointer-events:none}

/* Inner pages: improve scanability while keeping dense information surfaces. */
.lab-page-head{
  padding:17px 14px 14px;
}
.lab-page-title{font-size:23px}
.lab-page-intro{font-size:9.8px}
.lab-section{padding:13px}
.lab-section-title{
  min-height:20px;
  margin-bottom:10px;
  padding-bottom:6px;
  border-bottom:1px solid color-mix(in srgb,var(--md-outline-variant) 68%,transparent);
}
.lab-section-title small{letter-spacing:.03em}

.lab-nav{
  top:max(0px,env(safe-area-inset-top));
  padding-bottom:5px;
  box-shadow:0 5px 12px rgba(27,39,60,.06);
}
html.dark .lab-nav{box-shadow:0 7px 16px rgba(0,0,0,.19)}
.lab-nav button{
  min-height:40px;
  outline:none;
}
.lab-nav button:focus-visible{
  background:color-mix(in srgb,var(--md-primary-container) 58%,var(--md-surface-2));
  box-shadow:inset 0 0 0 2px var(--v25-focus)!important;
}
.lab-nav button[aria-current="page"]{
  font-weight:850;
}
.lab-nav button[aria-current="page"] .lab-nav-icon{
  transform:translateY(-1px);
}

.lab-media-card,
.lab-panel,
.lab-video-row,
.lab-tool-card,
.lab-result-card,
.lab-download-row,
.lab-service-card,
.lab-detail{
  transition:border-color .14s ease,background-color .14s ease,box-shadow .14s ease;
}
@media(hover:hover){
  .lab-media-card:hover,
  .lab-video-row:hover,
  .lab-tool-card:hover,
  .lab-result-card:hover,
  .lab-download-row:hover,
  .lab-service-card:hover{
    border-color:color-mix(in srgb,var(--md-primary) 24%,var(--md-outline-variant));
  }
}

.lab-page button:focus-visible,
.lab-page .lab-button:focus-visible,
.lab-page .control-button:focus-visible,
.lab-page .option-chip:focus-visible,
.lab-page .function-chip:focus-visible,
.lab-page .service-filter-btn:focus-visible,
.lab-page .lab-download-actions a:focus-visible,
.lab-title-button:focus-visible,
.lab-poster:focus-visible,
.lab-video-thumb:focus-visible,
.lab-star:focus-visible{
  outline:2px solid var(--md-primary)!important;
  outline-offset:2px!important;
  box-shadow:none!important;
}

/* More useful phone layout: query full-width, scope + action side-by-side. */
@media(max-width:640px){
  :root{scroll-padding-top:52px}

  .status-strip{display:none!important}

  .search-row{
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:6px!important;
  }
  .search-row input[type="search"]{
    grid-column:1/-1;
  }
  .search-row select{
    grid-column:1;
    width:100%;
  }
  .search-row .search-btn{
    grid-column:2;
    width:auto!important;
    min-width:82px;
    padding-inline:13px;
  }

  .feature-rail{grid-template-columns:1fr}
  .trend-row > div{gap:0}
  .quick-panel{padding-top:11px}
  .pick-actions{padding-top:7px}

  .utility-row{gap:7px}
  .shares{
    width:100%;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:4px;
  }
  .share{
    justify-content:center;
    min-width:0;
    padding-inline:6px!important;
    white-space:nowrap;
  }

  .category{cursor:pointer}
  .lab-page-head{padding:15px 11px 13px}
  .lab-page-title{font-size:20px}
  .lab-page-intro{font-size:9.2px}
  .lab-section{padding:11px}
  .lab-section-title{align-items:flex-start}

  .lab-nav{
    padding-left:4px;
    padding-right:4px;
  }
  .lab-nav button{
    min-width:72px;
    min-height:39px;
    padding-inline:7px;
  }
}

@media(max-width:390px){
  .head-top{gap:6px}
  .brand{font-size:17px}
  .controls{gap:0}
  .size-control{width:20px!important}

  .search-row{
    grid-template-columns:minmax(0,1fr) 74px!important;
  }
  .search-row .search-btn{
    min-width:74px;
    padding-inline:9px;
  }
  .search-btn::after{margin-left:4px}

  .share{font-size:7.5px!important}
  .lab-nav button{min-width:66px}
}

@media(hover:none){
  .brand-lockup:hover .brand-mark,
  .trend-row:hover,
  .pick-feature:hover,
  .pick-feature:hover .pick-poster,
  .category:hover{
    transform:none!important;
  }
}

@media(prefers-contrast:more){
  .main,.head-card,.footer-card,.lab-nav,
  .category,.pick-feature,.lab-media-card,.lab-panel,.lab-video-row,.lab-tool-card,.lab-result-card{
    border-color:var(--md-outline)!important;
  }
  .meta,.lab-meta-chip,.lab-chip-row span{border-color:var(--md-outline)!important}
}



/* ==========================================================
   v26 — final visual-system refinement preview
   Same compact yTube.SITE geometry, cleaner hierarchy,
   unified controls, editorial feature card and calmer surfaces.
   ========================================================== */

:root{
  --v26-font:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --v26-display:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --v26-radius:15px;
  --v26-radius-sm:9px;
  --v26-shadow:0 10px 30px rgba(35,55,86,.095),0 2px 7px rgba(35,55,86,.045);
  --v26-shadow-hover:0 14px 34px rgba(35,55,86,.12),0 3px 8px rgba(35,55,86,.055);
  --v26-rule:color-mix(in srgb,var(--md-outline-variant) 74%,transparent);
  --v26-soft-primary:color-mix(in srgb,var(--md-primary) 7%,var(--md-surface));
}

html.dark{
  --v26-shadow:0 12px 32px rgba(0,0,0,.25),0 2px 8px rgba(0,0,0,.13);
  --v26-shadow-hover:0 16px 38px rgba(0,0,0,.31),0 3px 9px rgba(0,0,0,.15);
  --v26-rule:color-mix(in srgb,var(--md-outline-variant) 62%,transparent);
  --v26-soft-primary:color-mix(in srgb,var(--md-primary) 5%,var(--md-surface));
}

body{
  font-family:var(--v26-font)!important;
  letter-spacing:-.002em;
  background:
    radial-gradient(circle at 18% -7%,color-mix(in srgb,var(--md-primary) 8%,transparent),transparent 31%),
    linear-gradient(180deg,color-mix(in srgb,var(--md-surface-1) 64%,transparent),transparent 220px),
    var(--md-surface-1)!important;
}

/* --- header / identity ------------------------------------------------ */
.site-head{padding-top:10px}
.site-head::before{
  height:88px;
  background:
    radial-gradient(circle at 78% -40%,rgba(255,255,255,.17),transparent 42%),
    linear-gradient(135deg,#294c83 0%,#3b5d98 55%,#617fb0 100%);
  box-shadow:0 6px 22px rgba(35,61,99,.14);
}
html.dark .site-head::before{
  background:
    radial-gradient(circle at 78% -40%,rgba(173,199,255,.11),transparent 42%),
    linear-gradient(135deg,#0b1119 0%,#1b2b41 56%,#30496c 100%);
}
.head-card{
  border-radius:16px 16px 0 0!important;
  border-color:rgba(255,255,255,.22)!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.045)),
    rgba(34,61,100,.68)!important;
  box-shadow:0 12px 34px rgba(28,48,78,.15)!important;
}
.head-top{min-height:58px;padding:10px 13px 9px}
.brand-lockup{gap:9px}
.brand-mark{
  width:35px;height:35px;border-radius:11px;
  transform:none!important;
  background:rgba(255,255,255,.115)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 4px 10px rgba(20,40,69,.12)!important;
}
.brand{font-family:var(--v26-display);font-size:20px;font-weight:760;letter-spacing:-.045em}
.brand small{letter-spacing:.09em;opacity:.7}
.tagline{font-size:8px;letter-spacing:.15em;opacity:.66}
.controls{gap:1px}
.size-control{opacity:.74}
.size-control:hover,.size-control.active{opacity:1}
.size-control.active::after{height:2px;left:6px;right:6px;background:#8ee5f0}
.theme-control{
  width:25px;height:23px;margin-left:5px;border-radius:7px;
  background-color:rgba(255,255,255,.085);
}
.status-strip{
  min-height:25px;padding:5px 12px;
  background:rgba(0,0,0,.075)!important;
  border-top-color:rgba(255,255,255,.10)!important;
}
.status-right{font-size:7px;letter-spacing:.13em;opacity:.64}
.status-right::before{width:5px;height:5px;box-shadow:0 0 0 3px rgba(115,224,167,.08)}

/* --- nav -------------------------------------------------------------- */
.lab-nav{
  top:0;
  gap:2px;
  padding:6px 7px;
  border-left:1px solid var(--md-outline-variant);
  border-right:1px solid var(--md-outline-variant);
  background:color-mix(in srgb,var(--md-surface) 92%,var(--md-surface-2));
  box-shadow:0 6px 16px rgba(27,39,60,.055)!important;
  backdrop-filter:blur(12px);
}
.lab-nav button{
  min-height:40px;
  border-radius:10px;
  font-family:var(--v26-font);
  color:var(--md-on-surface-variant);
  transition:background-color .14s ease,color .14s ease,box-shadow .14s ease,transform .12s ease;
}
.lab-nav button:hover{background:color-mix(in srgb,var(--md-primary) 6%,transparent);color:var(--md-on-surface)}
.lab-nav button[aria-current="page"]{
  color:var(--md-on-primary-container);
  background:color-mix(in srgb,var(--md-primary-container) 78%,var(--md-surface));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--md-primary) 12%,transparent);
}
.lab-nav-icon{font-size:12px}
.lab-nav-label{font-size:8px;font-weight:760;letter-spacing:.025em}

/* --- primary shell ---------------------------------------------------- */
.main{
  border-color:var(--md-outline-variant)!important;
  border-radius:0 0 17px 17px!important;
  box-shadow:var(--v26-shadow)!important;
  background:var(--md-surface)!important;
}

/* --- unified search console ------------------------------------------ */
.search-zone{
  padding:12px 13px 13px;
  background:linear-gradient(180deg,var(--md-surface-2),color-mix(in srgb,var(--md-surface) 94%,var(--md-surface-2)))!important;
}
.search-zone::before{
  margin:0 0 8px 2px;
  color:var(--md-on-surface-variant)!important;
  font-size:7px!important;
  letter-spacing:.17em!important;
}
.search-zone::after{display:none}
.search-row{
  grid-template-columns:minmax(0,1fr) 128px auto;
  gap:4px!important;
  padding:4px;
  border:1px solid var(--md-outline-variant);
  border-radius:12px;
  background:var(--md-surface);
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 44%,transparent),0 1px 2px rgba(30,47,73,.035);
}
.search-row input[type="search"],
.search-row select{
  height:38px!important;
  border:0!important;
  border-radius:8px!important;
  background:transparent!important;
  box-shadow:none!important;
  color:var(--md-on-surface)!important;
}
.search-row input[type="search"]{padding-left:11px;font-weight:560;letter-spacing:-.01em}
.search-row input[type="search"]::placeholder{color:var(--md-on-surface-variant);opacity:.72}
.search-row select{
  padding-inline:9px;
  background:var(--md-surface-2)!important;
  color:var(--md-on-surface-variant)!important;
  font-size:9px;
  font-weight:680;
}
.search-row input[type="search"]:focus,
.search-row select:focus{
  box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--md-primary) 44%,transparent)!important;
}
.search-btn{
  min-width:72px;height:38px!important;
  border:0!important;
  border-radius:9px!important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--md-primary) 91%,#fff),var(--md-primary))!important;
  box-shadow:0 3px 8px color-mix(in srgb,var(--md-primary) 20%,transparent)!important;
  font-size:9px;font-weight:800;
}
.search-btn::after{font-size:11px;margin-left:7px}

/* --- feature rail ----------------------------------------------------- */
.feature-rail{
  grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr)!important;
  background:var(--md-surface);
}
.trending{padding:13px 13px 14px!important}
.quick-panel{
  padding:13px 13px 16px!important;
  background:
    radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--md-primary) 7%,transparent),transparent 45%),
    var(--md-surface-2)!important;
}
.module-title{
  margin-bottom:9px!important;
  color:var(--md-on-surface)!important;
  font-size:8px!important;
  font-weight:820!important;
  letter-spacing:.15em!important;
}
.module-title::before{width:15px!important;background:var(--md-primary)!important;box-shadow:7px 0 0 var(--md-tertiary)!important}
.trending .module-title::after{
  border-color:var(--md-outline-variant)!important;
  background:var(--md-surface-2)!important;
  font-size:6px!important;
  color:var(--md-on-surface-variant)!important;
}
.trend-list{gap:3px!important}
.trend-row{
  min-height:34px!important;
  padding:5px 7px 5px 5px!important;
  border-radius:9px!important;
  border:1px solid transparent;
}
.trend-row:nth-child(-n+3){
  background:linear-gradient(90deg,color-mix(in srgb,var(--trend-accent) 3.8%,transparent),transparent 76%);
}
.trend-row:hover{
  transform:none!important;
  border-color:color-mix(in srgb,var(--trend-accent) 19%,var(--md-outline-variant))!important;
  background:color-mix(in srgb,var(--trend-accent) 4.5%,var(--md-surface-2))!important;
}
.trend-type-initial{
  border-radius:5px!important;
  font-weight:850!important;
}
.trend-row a:first-of-type{font-size:9.7px!important;line-height:1.25!important}
.meta{
  min-height:16px!important;
  border-radius:6px!important;
  background:transparent!important;
  border-color:color-mix(in srgb,var(--trend-accent) 18%,var(--md-outline-variant))!important;
  font-size:7px!important;
}

/* --- Random Pick: editorial feature card ----------------------------- */
.pick-shell{padding:20px 3px 8px 10px!important}
.pick-feature{
  min-height:164px!important;
  padding:16px 13px 13px 108px!important;
  border-radius:17px!important;
  border-color:color-mix(in srgb,var(--md-primary) 15%,var(--md-outline-variant))!important;
  background:
    radial-gradient(circle at 108% -15%,color-mix(in srgb,var(--md-tertiary) 12%,transparent),transparent 40%),
    radial-gradient(circle at -10% 115%,color-mix(in srgb,var(--md-primary) 8%,transparent),transparent 43%),
    var(--md-surface)!important;
  box-shadow:var(--v26-shadow)!important;
}
.pick-feature::before{opacity:.38!important;bottom:-6px!important;filter:blur(12px)!important}
.pick-feature::after{
  left:108px!important;
  right:13px!important;
  height:2px!important;
  background:linear-gradient(90deg,var(--md-primary),var(--md-tertiary) 44%,transparent 86%)!important;
  opacity:.72!important;
}
.pick-feature:hover{transform:none!important;box-shadow:var(--v26-shadow-hover)!important}
.pick-poster{
  left:9px!important;top:-21px!important;width:88px!important;
  border-radius:15px!important;
  transform:rotate(-1.6deg)!important;
  box-shadow:0 20px 32px rgba(27,43,67,.22),0 4px 10px rgba(27,43,67,.11)!important;
}
.pick-feature:hover .pick-poster{transform:translateY(-2px) rotate(-.8deg)!important}
.pick-poster::before{opacity:.72}
.pick-copy{min-height:132px!important}
.pick-eyebrow{font-size:6.5px!important;letter-spacing:.16em!important}
.pick-title{
  margin-bottom:5px!important;
  font-family:var(--v26-display);
  font-size:18px!important;
  font-weight:800!important;
  letter-spacing:-.035em!important;
  line-height:1.08!important;
}
.pick-meta{font-size:7.8px!important;margin-bottom:6px!important}
.pick-desc{font-size:8.2px!important;line-height:1.45!important;color:var(--md-on-surface-variant)!important}
.pick-actions{
  gap:8px!important;
  padding-top:9px!important;
  border-top-color:var(--v26-rule)!important;
}
.pick-open{
  min-height:27px!important;padding:0 11px!important;
  border:0!important;border-radius:8px!important;
  background:var(--md-primary)!important;color:var(--md-on-primary)!important;
  font-size:8px!important;font-weight:800!important;
}
.pick-next{font-size:8px!important;font-weight:760!important;color:var(--md-primary)!important}
.pick-counter{
  margin-left:auto;
  position:static!important;
  align-self:center;
  font-size:6.5px!important;
  color:var(--md-on-surface-variant)!important;
  opacity:.7!important;
}

/* --- utility / ads ---------------------------------------------------- */
.utility-row{
  padding:8px 12px!important;
  background:color-mix(in srgb,var(--md-surface) 96%,var(--md-surface-2))!important;
}
.share{
  min-height:29px!important;
  padding-inline:9px!important;
  border-radius:8px!important;
  box-shadow:none!important;
  font-size:8px!important;
}
.utility-note{opacity:.7}
.ad-row{
  min-height:35px;
  background:var(--md-surface-2)!important;
  border-color:var(--md-outline-variant)!important;
}
.ad-badge{border-radius:5px!important;letter-spacing:.1em}
.ad-row a{font-size:8px!important;color:var(--md-on-surface-variant)!important}

/* --- categories ------------------------------------------------------- */
.categories{
  gap:9px!important;
  padding:11px!important;
  background:color-mix(in srgb,var(--md-surface-2) 72%,var(--md-surface))!important;
}
.categories::before,.categories::after{opacity:.28!important}
.category{
  min-height:142px!important;
  padding:14px!important;
  border-radius:15px!important;
  background:
    radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--cat-accent) 7%,transparent),transparent 44%),
    var(--md-surface)!important;
  box-shadow:0 1px 2px rgba(27,39,60,.035)!important;
}
.category::before{
  right:10px!important;top:8px!important;
  font-family:var(--v26-display)!important;
  font-size:38px!important;
  color:color-mix(in srgb,var(--cat-accent) 10%,transparent)!important;
}
.category::after{
  top:15px!important;bottom:15px!important;width:3px!important;
  opacity:.62!important;transform:none!important;
}
.category:hover{
  transform:none!important;
  background:
    radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--cat-accent) 10%,transparent),transparent 46%),
    color-mix(in srgb,var(--cat-accent) 2.5%,var(--md-surface))!important;
  border-color:color-mix(in srgb,var(--cat-accent) 31%,var(--md-outline-variant))!important;
  box-shadow:0 7px 18px rgba(30,47,73,.07)!important;
}
.category .icon{
  width:43px!important;height:43px!important;
  border-radius:13px!important;
  border-color:color-mix(in srgb,var(--cat-accent) 23%,var(--md-outline-variant))!important;
  background:color-mix(in srgb,var(--cat-accent) 7%,var(--md-surface-2))!important;
  box-shadow:none!important;
}
.category:hover .icon{transform:none!important;box-shadow:none!important}
.icon::before{display:none!important}
.icon::after{width:6px!important;height:6px!important;right:-2px!important;top:-2px!important}
.cat-copy{padding-left:55px!important;padding-right:31px!important}
.cat-kicker{
  margin-bottom:4px!important;
  color:color-mix(in srgb,var(--cat-accent) 72%,var(--md-on-surface-variant))!important;
  font-size:6px!important;letter-spacing:.15em!important;font-weight:850!important;
}
.cat-title{
  margin-bottom:9px!important;
  font-family:var(--v26-display);
  font-size:16px!important;font-weight:800!important;letter-spacing:-.025em!important;
}
.cat-sub{font-size:8px!important;line-height:1.45!important;color:var(--md-on-surface-variant)!important}
.cat-sub a{
  min-height:22px!important;padding:2px 6px!important;
  border-radius:6px!important;
  background:transparent!important;
  border-color:color-mix(in srgb,var(--cat-accent) 15%,var(--md-outline-variant))!important;
}
.cat-go{
  right:11px!important;bottom:11px!important;
  width:27px!important;height:27px!important;
  border-radius:8px!important;
  background:color-mix(in srgb,var(--cat-accent) 10%,var(--md-surface-2))!important;
  color:color-mix(in srgb,var(--cat-accent) 80%,var(--md-on-surface))!important;
}

/* --- lower + footer --------------------------------------------------- */
.lower{background:var(--md-surface)!important}
.lower-main,.portal-status{padding:14px!important}
.lower-title{font-size:8px!important;letter-spacing:.12em!important}
.contact{color:var(--md-on-surface-variant)!important;font-size:8.5px!important}
.links a{font-size:8px!important}
.status-line{font-size:7.7px!important;color:var(--md-on-surface-variant)!important}
.footer-card{
  border-radius:16px!important;
  border-color:var(--md-outline-variant)!important;
  background:var(--md-surface)!important;
  box-shadow:var(--v26-shadow)!important;
}
.footer-mark{border-radius:10px!important}
.footer-wordmark{font-family:var(--v26-display);font-weight:800!important}

/* --- connected pages ------------------------------------------------- */
.lab-page-head{
  padding:18px 15px 15px!important;
  background:
    radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--md-primary) 6%,transparent),transparent 38%),
    var(--md-surface)!important;
}
.lab-page-title{
  font-family:var(--v26-display)!important;
  font-size:22px!important;
  font-weight:820!important;
  letter-spacing:-.035em!important;
}
.lab-page-intro{max-width:62ch;color:var(--md-on-surface-variant)!important;line-height:1.5!important}
.lab-section{padding:13px!important}
.lab-section-title{
  min-height:22px!important;
  margin-bottom:11px!important;
  padding-bottom:7px!important;
  border-bottom-color:var(--v26-rule)!important;
  font-family:var(--v26-display)!important;
  font-weight:790!important;
  letter-spacing:-.012em!important;
}
.lab-media-card,
.lab-panel,
.lab-video-row,
.lab-tool-card,
.lab-result-card,
.lab-download-row,
.lab-service-card,
.lab-detail{
  border-color:var(--md-outline-variant)!important;
  border-radius:12px!important;
  box-shadow:none!important;
}
@media(hover:hover){
  .lab-media-card:hover,
  .lab-video-row:hover,
  .lab-tool-card:hover,
  .lab-result-card:hover,
  .lab-download-row:hover,
  .lab-service-card:hover{
    background-color:color-mix(in srgb,var(--md-primary) 2%,var(--md-surface))!important;
    border-color:color-mix(in srgb,var(--md-primary) 20%,var(--md-outline-variant))!important;
  }
}
.lab-button,.control-button{
  border-radius:8px!important;
  font-family:var(--v26-font)!important;
  font-weight:720!important;
}
.option-chip,.function-chip,.lab-meta-chip,.service-filter-btn{border-radius:7px!important}

/* --- dark mode is designed, not just inverted ------------------------ */
html.dark .main,
html.dark .footer-card,
html.dark .pick-feature,
html.dark .category,
html.dark .lab-page-head{
  background-color:var(--md-surface)!important;
}
html.dark .search-row{
  background:color-mix(in srgb,var(--md-surface) 94%,#000)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
}
html.dark .search-row select{background:var(--md-surface-2)!important}
html.dark .category:hover{box-shadow:0 8px 20px rgba(0,0,0,.16)!important}
html.dark .pick-poster{box-shadow:0 20px 32px rgba(0,0,0,.32),0 4px 10px rgba(0,0,0,.18)!important}
html.dark .lab-nav{background:color-mix(in srgb,var(--md-surface) 91%,#000)!important}

/* --- mobile ----------------------------------------------------------- */
@media(max-width:640px){
  .wrap{width:calc(100% - 8px)!important}
  .site-head{padding-top:6px}
  .site-head::before{height:76px}
  .head-card{border-radius:14px 14px 0 0!important}
  .head-top{min-height:52px;padding:8px 9px}
  .brand{font-size:17px}
  .brand small{font-size:7px}
  .status-strip{display:none!important}

  .lab-nav{
    padding:5px 4px;
    gap:1px;
    border-radius:0;
  }
  .lab-nav button{min-width:68px;min-height:38px;padding-inline:6px;border-radius:8px}
  .lab-nav-label{font-size:7px}

  .main{border-radius:0 0 14px 14px!important}
  .search-zone{padding:10px 8px 11px!important}
  .search-zone::before{margin-bottom:7px}
  .search-row{
    grid-template-columns:minmax(0,1fr) 78px!important;
    gap:4px!important;
    padding:4px!important;
    border-radius:11px!important;
  }
  .search-row input[type="search"]{grid-column:1/-1!important;height:37px!important}
  .search-row select{grid-column:1!important;width:100%!important;height:36px!important}
  .search-row .search-btn{grid-column:2!important;width:auto!important;min-width:78px!important;height:36px!important;padding-inline:8px!important}

  .feature-rail{grid-template-columns:1fr!important}
  .trending{padding:11px 9px 12px!important}
  .quick-panel{padding:11px 9px 14px!important}
  .trend-row{min-height:32px!important;padding:4px 5px!important}
  .trend-row:nth-child(-n+3){background:transparent}

  .pick-shell{padding:17px 3px 7px 9px!important}
  .pick-feature{
    min-height:138px!important;
    padding:13px 9px 11px 91px!important;
    border-radius:14px!important;
  }
  .pick-feature::after{left:91px!important;right:9px!important}
  .pick-poster{left:7px!important;top:-17px!important;width:77px!important;border-radius:13px!important}
  .pick-copy{min-height:111px!important}
  .pick-title{font-size:15.5px!important}
  .pick-desc{display:none!important}
  .pick-actions{padding-top:7px!important}

  .utility-row{padding:7px 8px!important}
  .shares{gap:4px!important}
  .share{min-height:30px!important;font-size:7px!important}

  .categories{grid-template-columns:1fr!important;padding:8px!important;gap:7px!important}
  .category{min-height:118px!important;padding:12px 11px!important;border-radius:13px!important}
  .category .icon{left:11px!important;top:12px!important;width:40px!important;height:40px!important;border-radius:11px!important}
  .cat-copy{padding-left:50px!important;padding-right:28px!important}
  .cat-title{font-size:14.5px!important;margin-bottom:7px!important}
  .cat-sub{font-size:7.7px!important}
  .cat-go{right:9px!important;bottom:9px!important;width:26px!important;height:26px!important}

  .lab-page-head{padding:15px 11px 13px!important}
  .lab-page-title{font-size:19px!important}
  .lab-page-intro{font-size:8.8px!important}
  .lab-section{padding:10px!important}
}

@media(max-width:390px){
  .brand{font-size:16.5px}
  .theme-control{margin-left:2px}
  .search-btn::after{display:none}
  .search-row{grid-template-columns:minmax(0,1fr) 66px!important}
  .search-row .search-btn{min-width:66px!important}
  .pick-feature{padding-left:84px!important}
  .pick-feature::after{left:84px!important}
  .pick-poster{width:70px!important}
  .pick-title{font-size:14.5px!important}
  .lab-nav button{min-width:63px!important}
}

@media(prefers-reduced-motion:reduce){
  .brand-mark,.lab-nav button,.trend-row,.pick-feature,.pick-poster,.category{transition:none!important}
}


/* ==========================================================
   v26.1 — interaction + subcategory refinement
   No hover fill on Trending/Share; cleaner subcategory rows.
   ========================================================== */

/* Trending: keep the surface still; use accent/text feedback only. */
.trend-row:hover,
html.dark .trend-row:hover,
html:not(.dark) .trend-row:hover{
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
  transform:none!important;
}
.trend-row:hover::before{
  opacity:.9!important;
  transform:scaleY(1)!important;
}
.trend-row:hover a:first-of-type{
  color:color-mix(in srgb,var(--trend-accent) 76%,var(--md-on-surface))!important;
  text-decoration:underline!important;
  text-decoration-thickness:1px!important;
  text-underline-offset:2px!important;
}
.trend-row:hover a:last-of-type{
  color:color-mix(in srgb,var(--trend-accent) 74%,var(--md-on-surface-variant))!important;
}

/* Share: no hover background. A thin bottom accent is enough feedback. */
.share:hover,
html.dark .share:hover,
html:not(.dark) .share:hover{
  background:transparent!important;
  color:var(--md-primary)!important;
  border-color:var(--md-outline-variant)!important;
  box-shadow:inset 0 -2px 0 color-mix(in srgb,var(--md-primary) 72%,transparent)!important;
  filter:none!important;
  transform:none!important;
}
.share:hover::before{
  opacity:.88!important;
}

/* Subcategories: links are the separators — no commas, dots or filler copy. */
.cat-sub{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  gap:5px!important;
  line-height:1.25!important;
}
.cat-sub a{
  margin:0!important;
  white-space:nowrap!important;
}

@media(max-width:640px){
  .cat-sub{gap:4px!important;}
}


/* ==========================================================
   v26.2 — structural polish
   Preserve the v26 look; improve scan rhythm and utility states.
   ========================================================== */

/* Trending: same visual identity, clearer 3-part structure. */
.trend-row > .trend-line{
  display:grid!important;
  grid-template-columns:58px minmax(0,1fr) auto!important;
  align-items:center!important;
  column-gap:5px!important;
  width:100%!important;
}
.trend-line .trend-type-label{
  min-width:0!important;
  margin-right:0!important;
  align-self:center!important;
}
.trend-title{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.trend-tail{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:5px!important;
  min-width:0!important;
  white-space:nowrap!important;
}
.trend-more{
  margin-left:0!important;
  padding-left:5px!important;
  border-left:1px solid color-mix(in srgb,var(--trend-accent) 18%,var(--md-outline-variant))!important;
}
.trend-more::after{margin-left:3px!important}
.trend-row:hover .trend-title{
  color:color-mix(in srgb,var(--trend-accent) 76%,var(--md-on-surface))!important;
  text-decoration:underline!important;
  text-decoration-thickness:1px!important;
  text-underline-offset:2px!important;
}

/* Share: retain only the small brand underline. Never paint the cell. */
.share,
.share:hover,
.share:focus-visible,
.share:active,
html:not(.dark) .share:hover,
html.dark .share:hover{
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  filter:none!important;
}
.share:hover{color:inherit!important}
.share:hover::after,
.share:focus-visible::after{
  transform:scaleX(1)!important;
  opacity:.95!important;
}
.share:focus-visible{
  outline:1px solid color-mix(in srgb,var(--md-primary) 56%,transparent)!important;
  outline-offset:-1px!important;
}

/* Category copy gets one descriptive sentence; corner arrow owns "more". */
.category{min-height:151px!important}
.cat-copy{padding-bottom:20px!important}
.cat-sub{margin-bottom:7px!important}
.cat-blurb{
  max-width:28ch;
  color:var(--md-on-surface-variant);
  font-size:7.3px;
  font-weight:560;
  line-height:1.38;
  letter-spacing:.005em;
  opacity:.82;
}
.cat-go{
  text-decoration:none!important;
  font-size:0!important;
  color:transparent!important;
  cursor:pointer!important;
}
.cat-go::after{
  content:"↗"!important;
  color:color-mix(in srgb,var(--cat-accent) 82%,var(--md-on-surface))!important;
  font:800 12px/1 Arial,sans-serif!important;
}
.cat-go:hover,
.cat-go:focus-visible{
  text-decoration:none!important;
  border-color:color-mix(in srgb,var(--cat-accent) 42%,var(--md-outline-variant))!important;
  background:color-mix(in srgb,var(--cat-accent) 9%,var(--md-surface-2))!important;
}
.cat-go:focus-visible{
  outline:2px solid color-mix(in srgb,var(--cat-accent) 46%,transparent)!important;
  outline-offset:2px!important;
}

/* Portal status becomes a compact four-signal board. */
.portal-status{
  position:relative!important;
  background:
    radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--md-primary) 6%,transparent),transparent 46%),
    var(--md-surface-2)!important;
}
.portal-status::before{
  content:"";
  position:absolute;
  left:0;
  top:14px;
  bottom:14px;
  width:2px;
  border-radius:99px;
  background:linear-gradient(var(--md-primary),var(--md-tertiary));
  opacity:.65;
}
.portal-status .status-line{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:10px!important;
  min-height:25px!important;
  margin:0!important;
  padding:3px 0!important;
  border-bottom:1px solid color-mix(in srgb,var(--md-outline-variant) 68%,transparent)!important;
}
.portal-status .status-line:last-child{border-bottom:0!important}
.portal-status .status-head{
  min-height:29px!important;
  margin-bottom:2px!important;
}
.portal-status .status-head > b{
  color:var(--md-on-surface)!important;
  font-family:var(--v26-display)!important;
  font-size:8.2px!important;
  font-weight:800!important;
  letter-spacing:.025em!important;
}
.portal-status .status-line > span:first-child{
  color:var(--md-on-surface-variant)!important;
  font-size:7.4px!important;
}
.status-value{
  position:relative;
  padding-left:10px;
  color:var(--md-on-surface)!important;
  font-size:7.2px!important;
  font-weight:760!important;
  letter-spacing:.025em!important;
}
.status-value::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:5px;
  height:5px;
  border-radius:50%;
  transform:translateY(-50%);
  background:var(--md-primary);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--md-primary) 10%,transparent);
}
.status-ready::before{background:var(--md-tertiary)}
.portal-status .online{
  padding:2px 6px!important;
  border:1px solid color-mix(in srgb,#42a777 24%,var(--md-outline-variant))!important;
  border-radius:999px!important;
  background:color-mix(in srgb,#42a777 7%,transparent)!important;
  color:color-mix(in srgb,#2f8d63 84%,var(--md-on-surface))!important;
  font-size:6.6px!important;
  font-weight:800!important;
  letter-spacing:.06em!important;
  text-transform:uppercase!important;
}
.portal-status .visitors-pill{
  min-width:24px!important;
  min-height:20px!important;
  display:inline-grid!important;
  place-items:center!important;
  padding:0 6px!important;
  border-radius:7px!important;
  font-size:7.2px!important;
  font-weight:800!important;
}

@media(max-width:640px){
  .trend-row > .trend-line{
    grid-template-columns:55px minmax(0,1fr)!important;
    row-gap:3px!important;
  }
  .trend-tail{
    grid-column:2!important;
    justify-content:flex-start!important;
  }
  .trend-more{font-size:7px!important}
  .category{min-height:126px!important}
  .cat-copy{padding-bottom:17px!important}
  .cat-blurb{font-size:7px!important;max-width:31ch}
  .portal-status::before{top:12px;bottom:12px}
}


/* ==========================================================
   v26.3 — alignment + quieter share + classic portal status
   ========================================================== */

/* Trending: keep every colon on the same vertical edge so the
   title link always begins at the same measured distance. */
.trend-row > .trend-line{
  grid-template-columns:60px minmax(0,1fr) auto!important;
  column-gap:7px!important;
}
.trend-type-label{
  width:100%!important;
  display:inline-flex!important;
  justify-content:flex-end!important;
  align-items:baseline!important;
  justify-self:end!important;
  text-align:right!important;
  white-space:nowrap!important;
}

/* Share: visually disappear into the utility row until the tiny
   brand rail responds. No resting fill and no hover/focus fill. */
.utility-row{
  background:var(--md-surface)!important;
}
.shares,
html:not(.dark) .shares,
html.dark .shares{
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
}
.share,
.share:hover,
.share:focus,
.share:focus-visible,
.share:active,
html:not(.dark) .share,
html:not(.dark) .share:hover,
html.dark .share,
html.dark .share:hover{
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  filter:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.share{
  color:color-mix(in srgb,var(--md-on-surface) 78%,var(--md-on-surface-variant))!important;
  border-right-color:color-mix(in srgb,var(--md-outline-variant) 58%,transparent)!important;
}
.share::after{
  opacity:.12!important;
  transform:scaleX(.30)!important;
}
.share:hover::after,
.share:focus-visible::after{
  opacity:.82!important;
  transform:scaleX(1)!important;
}
.share:hover{
  color:var(--md-on-surface)!important;
}
.share::before{
  opacity:.72!important;
}
.share:hover::before{
  opacity:.94!important;
}

/* Portal status: return to the earlier quiet portal-panel language,
   retaining the newer, more useful signals. */
.portal-status{
  position:relative!important;
  overflow:hidden!important;
  min-height:138px!important;
  padding:15px 14px!important;
  border-left:1px solid var(--md-outline-variant)!important;
  background:
    linear-gradient(145deg,
      color-mix(in srgb,var(--md-primary) 5%,transparent),
      color-mix(in srgb,var(--md-tertiary) 2.5%,transparent)),
    var(--md-surface-2)!important;
}
html.dark .portal-status{
  background:
    linear-gradient(145deg,
      color-mix(in srgb,var(--md-primary) 5%,transparent),
      color-mix(in srgb,var(--md-tertiary) 2.5%,transparent)),
    var(--md-surface-2)!important;
}
.portal-status::before{
  content:none!important;
  display:none!important;
}
.portal-status::after{
  content:"Y"!important;
  position:absolute!important;
  right:-5px!important;
  bottom:-25px!important;
  top:auto!important;
  left:auto!important;
  width:auto!important;
  height:auto!important;
  border-radius:0!important;
  background:none!important;
  color:color-mix(in srgb,var(--md-primary) 7%,transparent)!important;
  font:800 92px/1 Arial,sans-serif!important;
  opacity:1!important;
  pointer-events:none!important;
}
.portal-status .status-line,
.portal-status .status-head{
  position:relative!important;
  z-index:1!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  min-height:0!important;
  margin:0 0 8px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:var(--md-on-surface-variant)!important;
  font-size:8px!important;
  line-height:1.35!important;
}
.portal-status .status-line:last-child{
  margin-bottom:0!important;
}
.portal-status .status-head{
  margin-bottom:9px!important;
}
.portal-status .status-head > b,
.portal-status .status-line > span:first-child{
  color:var(--md-on-surface-variant)!important;
  font-family:inherit!important;
  font-size:8px!important;
  font-weight:650!important;
  letter-spacing:0!important;
}
.status-value{
  position:static!important;
  padding:0!important;
  color:var(--md-on-surface)!important;
  font-size:8px!important;
  font-weight:760!important;
  letter-spacing:.01em!important;
}
.status-value::before{
  content:none!important;
  display:none!important;
}
.portal-status .online{
  display:inline-flex!important;
  align-items:center!important;
  gap:5px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:var(--green)!important;
  font-size:7.5px!important;
  font-weight:760!important;
  letter-spacing:.04em!important;
  text-transform:uppercase!important;
}
.portal-status .online::before{
  content:""!important;
  display:block!important;
  width:6px!important;
  height:6px!important;
  border-radius:50%!important;
  background:var(--green)!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 13%,transparent)!important;
}
.portal-status .visitors-pill{
  min-width:0!important;
  min-height:0!important;
  display:inline!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:var(--md-primary)!important;
  font-size:8px!important;
  font-weight:800!important;
  text-decoration:none!important;
}
.portal-status .visitors-pill:hover{
  text-decoration:underline!important;
  text-underline-offset:2px!important;
}

@media(max-width:640px){
  .trend-row > .trend-line{
    grid-template-columns:57px minmax(0,1fr)!important;
    column-gap:6px!important;
  }
  .portal-status{
    min-height:auto!important;
    border-left:0!important;
    border-top:1px solid var(--md-outline-variant)!important;
    padding:13px 11px!important;
  }
}


/* ==========================================================
   v26.4 — trend label repair + flat sharing + classic status
   ========================================================== */

/* Keep section titles in the case authored in the HTML. */
.module-title,
.lower-title{
  text-transform:none!important;
  letter-spacing:.035em!important;
}

/* Trending labels are whole words again. The fixed label column keeps
   every colon aligned without splitting or stylising individual letters. */
.trend-row > .trend-line{
  grid-template-columns:60px minmax(0,1fr) auto!important;
  column-gap:7px!important;
}
.trend-type-label{
  position:static!important;
  width:100%!important;
  min-width:0!important;
  display:block!important;
  justify-self:end!important;
  margin:0!important;
  padding:0!important;
  color:var(--md-on-surface-variant)!important;
  font-family:var(--v26-font)!important;
  font-size:8.4px!important;
  font-weight:720!important;
  line-height:1.2!important;
  letter-spacing:0!important;
  text-align:right!important;
  text-transform:none!important;
  white-space:nowrap!important;
}
.trend-type-label::after{
  content:none!important;
  display:none!important;
}
.trend-a{color:#a33f53!important}
.trend-m{color:#3f68a4!important}
.trend-y{color:#ae503f!important}
.trend-w{color:#347b5d!important}
.trend-r{color:#a96622!important}
html.dark .trend-a{color:#de8191!important}
html.dark .trend-m{color:#86a8db!important}
html.dark .trend-y{color:#dd8b79!important}
html.dark .trend-w{color:#74bc99!important}
html.dark .trend-r{color:#dca35f!important}
.trend-title{
  text-transform:none!important;
}

/* Share remains almost invisible at rest. Remove the separators between
   networks entirely; the small bottom brand rail is the only hover cue. */
.share,
html:not(.dark) .share,
html.dark .share{
  border-right:0!important;
  box-shadow:none!important;
}
.share + .share{
  border-left:0!important;
}

/* Restore the earlier portal-status presentation from v26.1 while keeping
   the newer Updates / Fallbacks information. */
.portal-status{
  position:relative!important;
  overflow:hidden!important;
  min-height:138px!important;
  padding:14px!important;
  border-left:1px solid var(--md-outline-variant)!important;
  background:
    linear-gradient(180deg,
      color-mix(in srgb,var(--md-surface-2) 96%,var(--md-primary-container)),
      var(--md-surface-2))!important;
}
html:not(.dark) .portal-status{
  background:linear-gradient(180deg,#eef3f8,#f4f7fa)!important;
}
html.dark .portal-status{
  background:
    linear-gradient(180deg,
      color-mix(in srgb,var(--md-surface-2) 93%,var(--md-primary-container)),
      var(--md-surface-2))!important;
}
.portal-status::before{
  content:none!important;
  display:none!important;
}
.portal-status::after{
  content:"Y"!important;
  position:absolute!important;
  right:-5px!important;
  bottom:-25px!important;
  top:auto!important;
  left:auto!important;
  width:auto!important;
  height:auto!important;
  border-radius:0!important;
  background:none!important;
  color:color-mix(in srgb,var(--md-primary) 7%,transparent)!important;
  font:bold 92px/1 Arial,sans-serif!important;
  opacity:1!important;
  pointer-events:none!important;
}
.portal-status .status-line,
.portal-status .status-head{
  position:relative!important;
  z-index:1!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  min-height:24px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-bottom:1px solid color-mix(in srgb,var(--md-outline-variant) 54%,transparent)!important;
  background:transparent!important;
  color:var(--md-on-surface-variant)!important;
  font-family:var(--v26-font)!important;
  font-size:7.7px!important;
  line-height:1.3!important;
}
.portal-status .status-line:last-child{
  border-bottom:0!important;
}
.portal-status .status-head{
  margin-bottom:0!important;
}
.portal-status .status-head > b,
.portal-status .status-line > span:first-child{
  color:var(--md-on-surface-variant)!important;
  font-family:inherit!important;
  font-size:inherit!important;
  font-weight:650!important;
  letter-spacing:0!important;
  text-transform:none!important;
}
.status-value{
  position:static!important;
  padding:0!important;
  color:var(--md-on-surface)!important;
  font-size:7.7px!important;
  font-weight:700!important;
  letter-spacing:0!important;
  text-transform:none!important;
}
.status-value::before{
  content:none!important;
  display:none!important;
}
.portal-status .online{
  display:inline-flex!important;
  align-items:center!important;
  gap:5px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:var(--green)!important;
  font-size:7.7px!important;
  font-weight:700!important;
  letter-spacing:0!important;
  text-transform:none!important;
}
.portal-status .online::before{
  content:""!important;
  display:block!important;
  width:6px!important;
  height:6px!important;
  border-radius:50%!important;
  background:var(--green)!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 13%,transparent)!important;
}
.portal-status .visitors-pill{
  min-width:24px!important;
  min-height:20px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin:0!important;
  padding:1px 6px!important;
  border:1px solid #8694a7!important;
  border-radius:999px!important;
  background:#f1f4f8!important;
  box-shadow:none!important;
  color:#263b57!important;
  font-size:7.7px!important;
  font-weight:700!important;
  text-decoration:none!important;
}
.portal-status .visitors-pill:hover{
  border-color:#55749e!important;
  background:#dce7f7!important;
  color:#1d365b!important;
  text-decoration:none!important;
}
html.dark .portal-status .visitors-pill{
  border-color:#566477!important;
  background:#1d2835!important;
  color:#e7edf6!important;
}
html.dark .portal-status .visitors-pill:hover{
  border-color:#7894bd!important;
  background:#2d4770!important;
  color:#f2f6ff!important;
}

@media(max-width:640px){
  .trend-row > .trend-line{
    grid-template-columns:57px minmax(0,1fr)!important;
    column-gap:6px!important;
  }
  .portal-status{
    min-height:auto!important;
    border-left:0!important;
    border-top:1px solid var(--md-outline-variant)!important;
    padding:14px!important;
  }
}



/* ==========================================================
   v26.5 — refined first-letter labels, left aligned
   ========================================================== */

/* Keep category words left-aligned, but pin the colon to the same edge.
   This preserves the clean title start position from v26.4. */
.trend-row > .trend-line{
  grid-template-columns:62px minmax(0,1fr) auto!important;
  column-gap:7px!important;
}
.trend-type-label{
  position:relative!important;
  width:100%!important;
  display:block!important;
  justify-self:stretch!important;
  padding-right:9px!important;
  text-align:left!important;
  color:var(--md-on-surface-variant)!important;
  font-size:8.25px!important;
  font-weight:650!important;
  line-height:1.25!important;
  letter-spacing:.005em!important;
}
.trend-type-label::first-letter{
  color:var(--trend-accent)!important;
  font-size:1.18em!important;
  font-weight:900!important;
}
.trend-type-label::after{
  content:":"!important;
  display:block!important;
  position:absolute!important;
  right:0!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  color:color-mix(in srgb,var(--md-on-surface-variant) 76%,transparent)!important;
  font-weight:700!important;
}
.trend-a,.trend-m,.trend-y,.trend-w,.trend-r,
html.dark .trend-a,html.dark .trend-m,html.dark .trend-y,
html.dark .trend-w,html.dark .trend-r{
  color:var(--md-on-surface-variant)!important;
}

@media(max-width:640px){
  .trend-row > .trend-line{
    grid-template-columns:59px minmax(0,1fr) auto!important;
    column-gap:6px!important;
  }
  .trend-type-label{
    padding-right:8px!important;
    font-size:8px!important;
  }
}



/* ==========================================================
   v26.6 — natural label punctuation + aligned title column
   ========================================================== */

/* Keep the label cell fixed so every title begins on the same x-position,
   but let the colon sit naturally beside each word. This avoids the visual
   gap that made short labels look split while preserving the first-letter accent. */
.trend-row > .trend-line{
  grid-template-columns:62px minmax(0,1fr) auto!important;
  column-gap:7px!important;
}
.trend-type-label{
  position:static!important;
  width:auto!important;
  min-width:0!important;
  display:inline-block!important;
  justify-self:start!important;
  padding-right:0!important;
  text-align:left!important;
  white-space:nowrap!important;
}
.trend-type-label::after{
  content:":"!important;
  display:inline!important;
  position:static!important;
  margin-left:1px!important;
  transform:none!important;
  color:color-mix(in srgb,var(--md-on-surface-variant) 76%,transparent)!important;
  font-size:1em!important;
  font-weight:700!important;
}

@media(max-width:640px){
  .trend-row > .trend-line{
    grid-template-columns:59px minmax(0,1fr) auto!important;
    column-gap:6px!important;
  }
  .trend-type-label{
    padding-right:0!important;
  }
}



/* ==========================================================
   v26.7 — natural label flow + independent popular link
   ========================================================== */

/* The category, colon and title now flow naturally. The title is not pinned to
   a global column; it simply starts a consistent distance after its own colon. */
.trend-row > .trend-line{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  column-gap:10px!important;
  min-width:0!important;
}
.trend-update{
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  gap:0!important;
  white-space:nowrap!important;
}
.trend-type-label{
  position:static!important;
  width:auto!important;
  min-width:0!important;
  display:inline-block!important;
  flex:none!important;
  justify-self:auto!important;
  padding:0!important;
  text-align:left!important;
  white-space:nowrap!important;
  color:var(--md-on-surface-variant)!important;
  font-size:8.25px!important;
  font-weight:650!important;
  line-height:1.25!important;
  letter-spacing:.005em!important;
}
.trend-type-label::first-letter{
  color:var(--trend-accent)!important;
  font-size:1.18em!important;
  font-weight:900!important;
}
/* Remove every older pseudo-colon. The real colon is neutral. */
.trend-type-label::after{
  content:none!important;
  display:none!important;
}
.trend-colon{
  flex:none!important;
  margin-left:1px!important;
  color:var(--md-on-surface-variant)!important;
  font-size:8.25px!important;
  font-weight:650!important;
  line-height:1.25!important;
}
.trend-title{
  min-width:0!important;
  margin-left:6px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.trend-update > .meta{
  flex:none!important;
  margin-left:6px!important;
}
/* More is a separate navigation action, not part of the trending update. */
.trend-more{
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:3px!important;
  margin:0!important;
  padding:2px 0!important;
  flex:none!important;
  color:var(--md-on-surface-variant)!important;
  font-size:7.6px!important;
  font-weight:700!important;
  line-height:1.2!important;
  letter-spacing:.02em!important;
  text-transform:none!important;
  text-decoration:none!important;
  opacity:.78!important;
}
.trend-more::before{
  content:none!important;
  display:none!important;
}
.trend-more::after{
  content:"→"!important;
  margin-left:1px!important;
  color:var(--trend-accent)!important;
  font-size:8px!important;
}
.trend-more:hover,
.trend-more:focus-visible{
  color:var(--md-on-surface)!important;
  opacity:1!important;
  text-decoration:none!important;
}
.trend-tail{display:contents!important;}
.trend-a,.trend-m,.trend-y,.trend-w,.trend-r,
html.dark .trend-a,html.dark .trend-m,html.dark .trend-y,
html.dark .trend-w,html.dark .trend-r{
  color:var(--md-on-surface-variant)!important;
}

@media(max-width:640px){
  .trend-row > .trend-line{
    grid-template-columns:minmax(0,1fr) auto!important;
    column-gap:7px!important;
  }
  .trend-type-label,
  .trend-colon{
    font-size:8px!important;
  }
  .trend-title{
    margin-left:5px!important;
  }
  .trend-update > .meta{
    margin-left:5px!important;
  }
  .trend-more{
    font-size:7.2px!important;
  }
}



/* ==========================================================
   v26.8 — trend marker + independent link hover
   ========================================================== */

/* Keep the label natural. Only the first letter gets the accent marker. */
.trend-type-label{
  position:relative!important;
  display:inline-flex!important;
  align-items:baseline!important;
  overflow:visible!important;
}
.trend-type-label::first-letter{
  color:inherit!important;
  font-size:inherit!important;
  font-weight:inherit!important;
}
.trend-initial{
  position:relative!important;
  z-index:1!important;
  display:inline-grid!important;
  place-items:center!important;
  min-width:12px!important;
  height:14px!important;
  margin-right:1px!important;
  padding:0 2px!important;
  border-radius:4px!important;
  background:color-mix(in srgb,var(--trend-accent) 12%,var(--md-surface-2))!important;
  color:var(--trend-accent)!important;
  font-size:9.1px!important;
  font-weight:900!important;
  line-height:14px!important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--trend-accent) 16%,transparent)!important;
}
.trend-initial::after{
  content:""!important;
  position:absolute!important;
  left:2px!important;
  bottom:-3px!important;
  width:16px!important;
  height:1.5px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,var(--trend-accent),color-mix(in srgb,var(--trend-accent) 22%,transparent))!important;
  pointer-events:none!important;
}
.trend-rest{
  color:var(--md-on-surface-variant)!important;
}

/* A row itself no longer selects either action. Only the hovered/focused link reacts. */
.trend-row:hover .trend-title,
.trend-row:focus-within .trend-title{
  color:var(--blue)!important;
  text-decoration:none!important;
}
.trend-row:hover .trend-more,
.trend-row:focus-within .trend-more{
  color:var(--md-on-surface-variant)!important;
  opacity:.78!important;
  text-decoration:none!important;
}
.trend-title:hover,
.trend-title:focus-visible{
  color:color-mix(in srgb,var(--trend-accent) 76%,var(--md-on-surface))!important;
  text-decoration:underline!important;
  text-decoration-thickness:1px!important;
  text-underline-offset:2px!important;
}
.trend-more:hover,
.trend-more:focus-visible{
  color:color-mix(in srgb,var(--trend-accent) 78%,var(--md-on-surface))!important;
  opacity:1!important;
  text-decoration:underline!important;
  text-decoration-thickness:1px!important;
  text-underline-offset:2px!important;
}

/* Keep the divider, but separate it from More. No trailing arrow. */
.trend-more{
  margin-left:2px!important;
  padding-left:8px!important;
  border-left:1px solid color-mix(in srgb,var(--trend-accent) 18%,var(--md-outline-variant))!important;
}
.trend-more::after{
  content:none!important;
  display:none!important;
}

html.dark .trend-initial{
  background:color-mix(in srgb,var(--trend-accent) 13%,var(--md-surface-2))!important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--trend-accent) 20%,transparent)!important;
}

@media(max-width:640px){
  .trend-initial{
    min-width:11px!important;
    height:13px!important;
    font-size:8.6px!important;
    line-height:13px!important;
  }
  .trend-initial::after{
    width:14px!important;
    bottom:-2px!important;
  }
  .trend-more{
    padding-left:7px!important;
  }
}



/* ==========================================================
   v26.9 — isolate Trending actions + arrow ownership fix
   ========================================================== */

/* Older :first-of-type / :last-of-type rules can match BOTH links because
   the title and More live in different parent elements. Neutralize row hover
   and style only the link that is actually hovered/focused. */
.trend-row:hover a.trend-title,
.trend-row:focus-within a.trend-title{
  color:var(--blue)!important;
  text-decoration:none!important;
}
.trend-row:hover a.trend-more,
.trend-row:focus-within a.trend-more{
  color:var(--md-on-surface-variant)!important;
  opacity:.78!important;
  text-decoration:none!important;
}

.trend-row a.trend-title:hover,
.trend-row a.trend-title:focus-visible{
  color:color-mix(in srgb,var(--trend-accent) 76%,var(--md-on-surface))!important;
  text-decoration:underline!important;
  text-decoration-thickness:1px!important;
  text-underline-offset:2px!important;
}
.trend-row a.trend-more:hover,
.trend-row a.trend-more:focus-visible{
  color:color-mix(in srgb,var(--trend-accent) 78%,var(--md-on-surface))!important;
  opacity:1!important;
  text-decoration:underline!important;
  text-decoration-thickness:1px!important;
  text-underline-offset:2px!important;
}

/* The trending title never owns an arrow. */
.trend-row a.trend-title::after{
  content:none!important;
  display:none!important;
}

/* More owns the navigation arrow and keeps a little air after the divider. */
.trend-row a.trend-more{
  padding-left:10px!important;
}
.trend-row a.trend-more::after{
  content:"→"!important;
  display:inline-block!important;
  margin-left:4px!important;
  color:var(--trend-accent)!important;
  font-size:8px!important;
  line-height:1!important;
  text-decoration:none!important;
}

@media(max-width:640px){
  .trend-row a.trend-more{
    padding-left:9px!important;
  }
}


/* v26.10 — category icon refinement */
.category .icon{
  width:44px;
  height:44px;
  border-radius:13px;
  border-color:color-mix(in srgb,var(--cat-accent) 24%,var(--line));
  background:
    radial-gradient(circle at 28% 22%,color-mix(in srgb,#fff 42%,transparent),transparent 0 25%,transparent 26%),
    linear-gradient(145deg,color-mix(in srgb,var(--cat-accent) 10%,var(--surface-2)),var(--surface));
  color:color-mix(in srgb,var(--cat-accent) 78%,var(--ink));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    0 4px 10px rgba(37,61,96,.055);
}
.category .icon::before{
  inset:5px;
  border-radius:9px;
  border-color:color-mix(in srgb,var(--cat-accent) 10%,transparent);
}
.category .icon::after{
  width:6px;
  height:6px;
  right:-2px;
  top:-2px;
  border-width:2px;
  box-shadow:none;
}
.category .icon svg{
  width:27px;
  height:27px;
  stroke-width:1.5;
}
.category .icon svg rect,
.category .icon svg circle,
.category .icon svg path{
  vector-effect:non-scaling-stroke;
}
/* individual balance for the four symbols */
.category .icon-media svg{width:28px;height:28px}
.category .icon-video svg{width:27px;height:27px}
.category .icon-story svg{width:28px;height:28px}
.category .icon-services svg{width:27px;height:27px;stroke-width:1.45}

.category:hover .icon{
  transform:translateY(-1px);
  border-color:color-mix(in srgb,var(--cat-accent) 42%,var(--line));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    0 6px 13px rgba(37,61,96,.075);
}
html.dark .category .icon{
  background:
    radial-gradient(circle at 28% 22%,rgba(255,255,255,.055),transparent 0 25%,transparent 26%),
    linear-gradient(145deg,color-mix(in srgb,var(--cat-accent) 7%,var(--surface-2)),var(--surface));
  border-color:color-mix(in srgb,var(--cat-accent) 25%,var(--line));
}
@media(max-width:640px){
  .category .icon{width:41px;height:41px;border-radius:12px}
  .category .icon svg{width:25px;height:25px}
  .category .icon-media svg,
  .category .icon-story svg{width:26px;height:26px}
}


/* v26.11 — automatic Random Pick + fixed geometry */
.quick-panel{
  overflow:hidden;
}
.pick-shell{
  min-height:190px!important;
  height:190px!important;
  box-sizing:border-box!important;
}
.pick-feature{
  min-height:168px!important;
  height:168px!important;
  max-height:168px!important;
  overflow:visible!important;
}
.pick-poster{
  width:84px!important;
  height:105px!important;
  min-width:84px!important;
  min-height:105px!important;
  max-width:84px!important;
  max-height:105px!important;
  aspect-ratio:4/5!important;
}
.pick-poster svg,
.pick-poster img,
.pick-poster picture{
  width:100%!important;
  height:100%!important;
}
.pick-poster img{
  display:block!important;
  object-fit:cover!important;
}
.pick-copy{
  min-height:0!important;
  height:136px!important;
  max-height:136px!important;
  overflow:hidden!important;
}
.pick-title{
  display:-webkit-box!important;
  max-width:100%!important;
  min-height:38px!important;
  max-height:38px!important;
  margin:0 0 4px!important;
  overflow:hidden!important;
  color:var(--md-on-surface)!important;
  text-decoration:none!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
}
.pick-title:hover,
.pick-title:focus-visible{
  color:var(--md-primary)!important;
  text-decoration:underline!important;
  text-decoration-thickness:1px!important;
  text-underline-offset:3px!important;
}
.pick-meta{
  display:block!important;
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.pick-desc{
  display:-webkit-box!important;
  max-width:220px!important;
  min-height:40px!important;
  max-height:40px!important;
  overflow:hidden!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
}
.pick-actions-auto{
  position:absolute!important;
  right:0!important;
  bottom:0!important;
  display:block!important;
  width:auto!important;
  height:auto!important;
  margin:0!important;
}
.pick-counter{
  position:static!important;
  display:inline-flex!important;
  align-items:center!important;
}
.pick-counter::before{
  content:"AUTO · "!important;
  margin-right:2px!important;
  color:var(--md-tertiary)!important;
  font-weight:700!important;
}
/* Old action controls are intentionally absent in v26.11. */
.pick-open,
.pick-next{display:none!important;}

@media(max-width:640px){
  .pick-shell{
    min-height:158px!important;
    height:158px!important;
  }
  .pick-feature{
    min-height:139px!important;
    height:139px!important;
    max-height:139px!important;
    padding-left:94px!important;
  }
  .pick-feature::after{left:94px!important;}
  .pick-poster{
    width:80px!important;
    height:100px!important;
    min-width:80px!important;
    min-height:100px!important;
    max-width:80px!important;
    max-height:100px!important;
  }
  .pick-copy{
    height:116px!important;
    max-height:116px!important;
  }
  .pick-title{
    min-height:32px!important;
    max-height:32px!important;
    font-size:15.5px!important;
  }
  .pick-desc{
    display:-webkit-box!important;
    min-height:29px!important;
    max-height:29px!important;
    -webkit-line-clamp:2!important;
    font-size:8.5px!important;
  }
}

@media(max-width:390px){
  .pick-shell{
    min-height:150px!important;
    height:150px!important;
  }
  .pick-feature{
    min-height:132px!important;
    height:132px!important;
    max-height:132px!important;
    padding-left:84px!important;
  }
  .pick-feature::after{left:84px!important;}
  .pick-poster{
    width:70px!important;
    height:88px!important;
    min-width:70px!important;
    min-height:88px!important;
    max-width:70px!important;
    max-height:88px!important;
  }
  .pick-copy{
    height:109px!important;
    max-height:109px!important;
  }
}


/* ==========================================================
   v26.12 — Random Pick polish + tighter Trending rhythm
   ========================================================== */

/* Trending: keep the same content and typography, remove excess air. */
.trending{
  padding:12px 13px 13px!important;
}
.trending .module-title{
  margin-bottom:7px!important;
}
.trend-list{
  gap:1px!important;
}
.trend-row{
  min-height:30px!important;
  padding:3px 6px 3px 4px!important;
}
.trend-row::before{
  top:6px!important;
  bottom:6px!important;
}
.trend-row > .trend-line{
  min-height:23px!important;
}
.trend-update > .meta{
  min-height:15px!important;
  padding-top:0!important;
  padding-bottom:0!important;
}

/* Random Pick: same fixed geometry, richer editorial treatment. */
.quick-panel{
  background:
    radial-gradient(circle at 102% -8%,color-mix(in srgb,var(--md-tertiary) 10%,transparent),transparent 34%),
    radial-gradient(circle at -4% 108%,color-mix(in srgb,var(--md-primary) 6%,transparent),transparent 39%),
    var(--md-surface-2)!important;
}
.pick-feature{
  isolation:isolate!important;
  border-color:color-mix(in srgb,var(--md-primary) 20%,var(--md-outline-variant))!important;
  background:
    linear-gradient(126deg,color-mix(in srgb,#fff 22%,transparent),transparent 27%),
    radial-gradient(circle at 108% -18%,color-mix(in srgb,var(--md-tertiary) 14%,transparent),transparent 42%),
    radial-gradient(circle at -12% 116%,color-mix(in srgb,var(--md-primary) 9%,transparent),transparent 44%),
    color-mix(in srgb,var(--md-surface) 97%,var(--md-surface-2))!important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb,#fff 62%,transparent),
    var(--v26-shadow)!important;
}
.pick-feature:hover,
.pick-feature:focus-within{
  border-color:color-mix(in srgb,var(--md-primary) 29%,var(--md-outline-variant))!important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb,#fff 62%,transparent),
    var(--v26-shadow-hover)!important;
}
/* Shorter, more intentional accent rather than a full-width rule. */
.pick-feature::after{
  left:108px!important;
  right:auto!important;
  width:58px!important;
  height:2px!important;
  background:linear-gradient(90deg,var(--md-primary),var(--md-tertiary) 62%,transparent)!important;
  opacity:.9!important;
}
.pick-poster{
  border:2px solid color-mix(in srgb,var(--md-surface) 94%,#fff)!important;
  outline:1px solid color-mix(in srgb,var(--md-primary) 14%,transparent)!important;
  outline-offset:0!important;
  box-shadow:
    0 20px 34px rgba(27,43,67,.23),
    0 5px 11px rgba(27,43,67,.10),
    0 0 0 4px color-mix(in srgb,var(--md-primary) 3.5%,transparent)!important;
}
.pick-feature:hover .pick-poster,
.pick-feature:focus-within .pick-poster{
  transform:translateY(-2px) rotate(-.6deg)!important;
  box-shadow:
    0 23px 38px rgba(27,43,67,.25),
    0 6px 13px rgba(27,43,67,.11),
    0 0 0 4px color-mix(in srgb,var(--md-primary) 5.5%,transparent)!important;
}
.pick-poster::before{
  top:-10px!important;
  left:31px!important;
  width:23px!important;
  height:21px!important;
  border-radius:2px!important;
  background:color-mix(in srgb,#eadbae 68%,transparent)!important;
  border-color:rgba(255,255,255,.28)!important;
  opacity:.72!important;
}
.pick-type{
  left:6px!important;
  bottom:6px!important;
  padding:3px 6px!important;
  border-radius:999px!important;
  border-color:rgba(255,255,255,.22)!important;
  background:rgba(9,18,31,.68)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;
  letter-spacing:.12em!important;
}
.pick-eyebrow{
  margin-bottom:5px!important;
  color:color-mix(in srgb,var(--md-tertiary) 76%,var(--md-on-surface-variant))!important;
  font-weight:800!important;
}
.pick-eyebrow::before{
  width:16px!important;
  background:linear-gradient(90deg,var(--md-tertiary),color-mix(in srgb,var(--md-primary) 55%,var(--md-tertiary)))!important;
}
.pick-title{
  color:var(--md-on-surface)!important;
  text-decoration-thickness:1px!important;
}
.pick-meta{
  display:inline-flex!important;
  align-items:center!important;
  align-self:flex-start!important;
  max-width:100%!important;
  min-height:18px!important;
  margin:0 0 6px!important;
  padding:2px 7px!important;
  border:1px solid color-mix(in srgb,var(--md-primary) 12%,var(--md-outline-variant))!important;
  border-radius:999px!important;
  background:color-mix(in srgb,var(--md-primary) 4%,var(--md-surface-2))!important;
  color:var(--md-on-surface-variant)!important;
  line-height:1.1!important;
}
.pick-meta::before{
  margin-right:2px!important;
}
.pick-desc{
  color:color-mix(in srgb,var(--md-on-surface-variant) 94%,var(--md-on-surface))!important;
}
.pick-counter{
  min-height:18px!important;
  padding:2px 6px!important;
  border:1px solid color-mix(in srgb,var(--md-tertiary) 18%,var(--md-outline-variant))!important;
  border-radius:999px!important;
  background:color-mix(in srgb,var(--md-tertiary) 5%,var(--md-surface-2))!important;
  color:var(--md-on-surface-variant)!important;
  font-weight:750!important;
  letter-spacing:.035em!important;
  opacity:.9!important;
}
.pick-counter::before{
  color:var(--md-tertiary)!important;
  letter-spacing:.08em!important;
}

html.dark .pick-feature{
  background:
    linear-gradient(126deg,rgba(255,255,255,.018),transparent 27%),
    radial-gradient(circle at 108% -18%,color-mix(in srgb,var(--md-tertiary) 8%,transparent),transparent 42%),
    radial-gradient(circle at -12% 116%,color-mix(in srgb,var(--md-primary) 6%,transparent),transparent 44%),
    color-mix(in srgb,var(--md-surface) 97%,var(--md-surface-2))!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    var(--v26-shadow)!important;
}
html.dark .pick-feature:hover,
html.dark .pick-feature:focus-within{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    var(--v26-shadow-hover)!important;
}
html.dark .pick-poster{
  border-color:color-mix(in srgb,var(--md-surface-2) 88%,#fff)!important;
  outline-color:color-mix(in srgb,var(--md-primary) 17%,transparent)!important;
}
html.dark .pick-meta{
  background:color-mix(in srgb,var(--md-primary) 5%,var(--md-surface-2))!important;
}

@media(max-width:640px){
  .trending{
    padding:9px 8px 10px!important;
  }
  .trending .module-title{
    margin-bottom:6px!important;
  }
  .trend-list{
    gap:0!important;
  }
  .trend-row{
    min-height:29px!important;
    padding:3px 5px 3px 4px!important;
  }
  .trend-row > .trend-line{
    min-height:22px!important;
  }
  .pick-feature::after{
    left:94px!important;
    width:48px!important;
  }
  .pick-meta{
    min-height:17px!important;
    padding:2px 6px!important;
  }
  .pick-counter{
    min-height:17px!important;
    padding:2px 5px!important;
  }
}

@media(max-width:390px){
  .pick-feature::after{
    left:84px!important;
    width:43px!important;
  }
}


/* v26.13 — tighter feature rail + larger, calmer Random Pick */

/* Remove excess vertical air without making the Trending text smaller. */
.trending{
  padding:10px 12px 9px!important;
}
.trending .module-title{
  margin-bottom:5px!important;
}
.trend-list{
  gap:0!important;
}
.trend-row{
  min-height:27px!important;
  padding:2px 5px 2px 4px!important;
}
.trend-row::before{
  top:5px!important;
  bottom:5px!important;
}
.trend-row > .trend-line{
  min-height:21px!important;
}

/* Random Pick fills the available height with a larger poster instead of empty space. */
.quick-panel{
  padding:10px 12px 9px!important;
}
.quick-panel .module-title{
  margin-bottom:5px!important;
}
.pick-shell{
  min-height:154px!important;
  height:154px!important;
  padding:13px 2px 4px 11px!important;
}
.pick-feature{
  min-height:143px!important;
  height:143px!important;
  max-height:143px!important;
  padding:13px 11px 11px 118px!important;
}
.pick-feature::after{
  left:118px!important;
  width:54px!important;
}
.pick-poster{
  left:9px!important;
  top:-15px!important;
  width:98px!important;
  height:123px!important;
  min-width:98px!important;
  min-height:123px!important;
  max-width:98px!important;
  max-height:123px!important;
  border-radius:16px!important;
  transform:rotate(-1deg)!important;
}
.pick-feature:hover .pick-poster,
.pick-feature:focus-within .pick-poster{
  transform:translateY(-1px) rotate(-.45deg)!important;
}
.pick-poster::before{
  left:36px!important;
}
.pick-copy{
  height:118px!important;
  max-height:118px!important;
}
.pick-eyebrow{
  margin-bottom:3px!important;
}
.pick-title{
  min-height:35px!important;
  max-height:35px!important;
  margin-bottom:3px!important;
  font-size:17px!important;
}
.pick-meta{
  min-height:17px!important;
  margin-bottom:4px!important;
}
.pick-desc{
  min-height:31px!important;
  max-height:31px!important;
  line-height:1.35!important;
}
.pick-counter{
  min-height:17px!important;
}

@media(max-width:640px){
  .trending{
    padding:8px 8px 7px!important;
  }
  .trending .module-title{
    margin-bottom:4px!important;
  }
  .trend-row{
    min-height:27px!important;
    padding:2px 5px 2px 4px!important;
  }
  .trend-row > .trend-line{
    min-height:21px!important;
  }
  .quick-panel{
    padding:9px 9px 8px!important;
  }
  .pick-shell{
    min-height:145px!important;
    height:145px!important;
    padding:12px 2px 4px 9px!important;
  }
  .pick-feature{
    min-height:133px!important;
    height:133px!important;
    max-height:133px!important;
    padding:11px 8px 9px 103px!important;
  }
  .pick-feature::after{
    left:103px!important;
    width:45px!important;
  }
  .pick-poster{
    left:7px!important;
    top:-13px!important;
    width:86px!important;
    height:108px!important;
    min-width:86px!important;
    min-height:108px!important;
    max-width:86px!important;
    max-height:108px!important;
    border-radius:14px!important;
  }
  .pick-poster::before{
    left:31px!important;
  }
  .pick-copy{
    height:110px!important;
    max-height:110px!important;
  }
  .pick-title{
    min-height:31px!important;
    max-height:31px!important;
    font-size:15.5px!important;
  }
  .pick-desc{
    min-height:27px!important;
    max-height:27px!important;
  }
}

@media(max-width:390px){
  .pick-shell{
    min-height:137px!important;
    height:137px!important;
  }
  .pick-feature{
    min-height:126px!important;
    height:126px!important;
    max-height:126px!important;
    padding-left:92px!important;
  }
  .pick-feature::after{
    left:92px!important;
    width:40px!important;
  }
  .pick-poster{
    width:76px!important;
    height:95px!important;
    min-width:76px!important;
    min-height:95px!important;
    max-width:76px!important;
    max-height:95px!important;
  }
  .pick-copy{
    height:104px!important;
    max-height:104px!important;
  }
}


/* v26.14 — move AUTO state into the section header and give the feature card breathing room */
.quick-panel .module-title::after{
  content:none!important;
  display:none!important;
}
.random-title{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
}
.random-title > span:first-child{
  min-width:0;
}
.pick-auto{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  min-height:17px;
  padding:2px 6px;
  border:1px solid color-mix(in srgb,var(--md-primary) 18%,var(--md-outline-variant));
  border-radius:999px;
  background:color-mix(in srgb,var(--md-primary) 6%,var(--md-surface-2));
  color:var(--md-on-surface-variant);
  font:700 6.4px/1 Arial,sans-serif;
  letter-spacing:.10em;
  white-space:nowrap;
}
html.dark .pick-auto{
  background:color-mix(in srgb,var(--md-primary) 7%,var(--md-surface-2));
  border-color:color-mix(in srgb,var(--md-primary) 15%,var(--md-outline-variant));
}

/* The rotating card stays fixed, with a visible gap beneath it inside its panel. */
.quick-panel{
  padding-bottom:14px!important;
}
.pick-shell{
  height:157px!important;
  min-height:157px!important;
  padding:13px 2px 0 11px!important;
}
.pick-feature{
  margin-bottom:0!important;
}
.pick-actions-auto{display:none!important}

@media(max-width:640px){
  .quick-panel{padding-bottom:13px!important}
  .pick-shell{
    height:148px!important;
    min-height:148px!important;
    padding:12px 2px 0 9px!important;
  }
  .pick-auto{font-size:6.2px;padding-inline:5px}
}
@media(max-width:390px){
  .pick-shell{
    height:140px!important;
    min-height:140px!important;
  }
}


/* Homepage: make Copyright the physical continuation of the body. */
body.lab-home .lab-shell{
  margin-bottom:0!important;
}
body.lab-home .lab-page[data-page="home"] .main{
  border-radius:0!important;
  border-bottom-color:var(--md-outline-variant)!important;
}
body.lab-home .site-foot{
  margin-top:0!important;
  padding-top:0!important;
}
body.lab-home .site-foot::before{
  top:31px!important;
}
body.lab-home .footer-card{
  border-top:0!important;
  border-radius:0 0 17px 17px!important;
  box-shadow:var(--v26-shadow)!important;
}

/* Refined navigation hover: tonal, calm and closer to the selected state. */
.lab-nav button{
  position:relative;
  transition:background-color .16s ease,border-color .16s ease,color .16s ease!important;
}
@media(hover:hover){
  .lab-nav button:not([aria-current="page"]):hover{
    background:color-mix(in srgb,var(--md-primary-container) 26%,var(--md-surface-2))!important;
    border-color:color-mix(in srgb,var(--md-primary) 20%,var(--md-outline-variant))!important;
    color:var(--md-on-surface)!important;
    box-shadow:none!important;
    transform:none!important;
  }
  .lab-nav button:not([aria-current="page"]):hover .lab-nav-icon{
    color:var(--md-primary)!important;
    transform:none!important;
  }
}
.lab-nav button:focus-visible{
  outline:2px solid color-mix(in srgb,var(--md-primary) 58%,transparent)!important;
  outline-offset:-2px!important;
}
@media(max-width:640px){
  body.lab-home .footer-card{border-radius:0 0 14px 14px!important}
}


/* ==========================================================
   v4 shell correction — authoritative final overrides
   ========================================================== */

/* Six destination menu: compact rounded cells with a calm Material hover. */
.lab-nav{
  gap:3px!important;
  padding:5px 7px 6px!important;
}
.lab-nav button{
  flex:1 1 0!important;
  min-width:0!important;
  min-height:38px!important;
  margin:0!important;
  padding:5px 7px!important;
  border:1px solid transparent!important;
  border-radius:10px!important;
  background:transparent!important;
  color:var(--md-on-surface-variant)!important;
  box-shadow:none!important;
  transform:none!important;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease!important;
}
.lab-nav button + button{border-left:1px solid transparent!important}
.lab-nav button .lab-nav-icon{
  border-radius:6px!important;
  transition:background-color .15s ease,color .15s ease!important;
}
@media(hover:hover){
  .lab-nav button:not([aria-current="page"]):hover{
    background:color-mix(in srgb,var(--md-primary-container) 40%,var(--md-surface-2))!important;
    border-color:color-mix(in srgb,var(--md-primary) 20%,var(--md-outline-variant))!important;
    color:color-mix(in srgb,var(--md-primary) 55%,var(--md-on-surface))!important;
    box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 42%,transparent)!important;
  }
  .lab-nav button:not([aria-current="page"]):hover .lab-nav-icon{
    background:color-mix(in srgb,var(--md-primary-container) 66%,transparent)!important;
    color:var(--md-primary)!important;
  }
}
.lab-nav button[aria-current="page"]{
  background:var(--md-primary-container)!important;
  border-color:color-mix(in srgb,var(--md-primary) 30%,var(--md-outline-variant))!important;
  color:var(--md-on-primary-container)!important;
  box-shadow:inset 0 -2px 0 color-mix(in srgb,var(--md-primary) 62%,transparent)!important;
}
.lab-nav button[aria-current="page"] .lab-nav-icon{
  background:color-mix(in srgb,var(--md-primary) 10%,transparent)!important;
  color:var(--md-primary)!important;
}
.lab-nav button:focus-visible{
  outline:2px solid color-mix(in srgb,var(--md-primary) 55%,transparent)!important;
  outline-offset:1px!important;
}

/* Every hash-routed inner body is a complete rounded card at the top and bottom. */
.lab-page:not([data-page="home"]) .main{
  border:1px solid var(--md-outline-variant)!important;
  border-radius:17px!important;
  overflow:hidden!important;
  background:var(--md-surface)!important;
  box-shadow:var(--v26-shadow)!important;
}
.lab-page:not([data-page="home"]){margin-top:10px!important}

/* The decorative Y belongs to the left bottom panel, not Portal Status. */
.portal-status::after{content:none!important;display:none!important}
.lower-main{
  position:relative!important;
  overflow:hidden!important;
}
.lower-main::after{
  content:"Y";
  position:absolute;
  left:-7px;
  bottom:-28px;
  z-index:0;
  color:rgba(52,91,153,.055);
  font:bold 92px/1 Arial,sans-serif;
  pointer-events:none;
}
.lower-main > *{position:relative;z-index:1}
html.dark .lower-main::after{color:rgba(173,199,255,.045)}

@media(max-width:640px){
  .lab-nav{gap:2px!important;padding:4px 4px 5px!important;overflow-x:auto!important}
  .lab-nav button{flex:1 0 66px!important;min-width:66px!important;border-radius:9px!important}
  .lab-page:not([data-page="home"]) .main{border-radius:14px!important}
}