﻿/* Console home (Studio) — real frosted liquid glass on cards only.
   Page background stays flat; material itself must be translucent enough
   that the grouped grey shows through (HIG --glass-fill ~78% reads solid). */

.console-page{
  max-width:1180px;margin:0 auto;padding-bottom:48px;
  padding-top:2px;
}
.console-page .dash-stats-wrap{margin-bottom:16px}
.console-page .dash-stats{
  grid-template-columns:repeat(auto-fit,minmax(108px,1fr));
  gap:10px;margin-bottom:0;
}
@media (min-width:1100px){
  .console-page .dash-stats{grid-template-columns:repeat(5,minmax(0,1fr))}
}

/* Beat opaque --card / .dash-stat rules; keep .liquid-glass noise + rim */
#view-app .console-page .dash-stat.liquid-glass,
#view-app .console-page .console-panel.liquid-glass,
#view-app .console-page .console-notes.liquid-glass,
#view-app .console-page .dash-checklist-card.liquid-glass{
  background:var(--studio-glass) !important;
  -webkit-backdrop-filter:var(--studio-glass-blur) !important;
  backdrop-filter:var(--studio-glass-blur) !important;
  border:1px solid var(--studio-glass-border) !important;
  box-shadow:var(--studio-glass-shadow) !important;
  overflow:hidden !important;
  isolation:auto;
  -webkit-transform:none !important;
  transform:none !important;
}
/* Uptime chart must not clip axes / scrubber */
#view-app .console-page .console-panel.console-insight--uptime.liquid-glass{
  overflow:visible !important;
}
#view-app .console-page .dash-stat.liquid-glass:hover,
#view-app .console-page .console-panel.liquid-glass:hover{
  background:var(--studio-glass-hover) !important;
  box-shadow:var(--studio-glass-shadow-hover) !important;
}
#view-app .console-page .dash-stat.liquid-glass::before,
#view-app .console-page .console-panel.liquid-glass::before,
#view-app .console-page .console-notes.liquid-glass::before,
#view-app .console-page .dash-checklist-card.liquid-glass::before{
  opacity:.07;
}
#view-app .console-page .dash-stat.liquid-glass > *,
#view-app .console-page .console-panel.liquid-glass > *,
#view-app .console-page .console-notes.liquid-glass > *,
#view-app .console-page .dash-checklist-card.liquid-glass > *{
  position:relative;z-index:1;
}

.console-page .dash-stat{
  position:relative;
  min-height:0;padding:14px 14px 12px;border-radius:18px;
  animation:none;
}
.console-page .dash-stat:hover{transform:none}
.console-page .dash-stat-n{font-size:22px;font-weight:560;margin-top:8px;letter-spacing:-.04em}
.console-page .dash-stat-d{display:none}
.console-page .dash-stat-ico{
  width:26px;height:26px;border-radius:8px;
  background:rgba(255,255,255,.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
  border:1px solid rgba(255,255,255,.55);
}
.console-page .dash-stat-ico svg.lucide{width:13px;height:13px}
.console-page .dash-stats-bar{margin-bottom:8px;min-height:28px}
.console-page .dash-stats-bar-label{opacity:.7}

.console-top{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-bottom:20px;padding:4px 0 8px;
}
.console-top-left{display:flex;align-items:center;gap:12px;min-width:0;flex-wrap:wrap}
.console-top-mark{
  width:auto;height:auto;border-radius:0;overflow:visible;flex:0 0 auto;
  border:none;background:transparent;
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:none;filter:none;
}
.console-top-mark svg{
  width:26px;height:26px;display:block;
  stroke:var(--color-tint);color:var(--color-tint);stroke-width:1.75;
}
.console-top-mark img{display:none}
.console-eyebrow{
  margin:0 0 2px;font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--color-tint);
}
.console-top h1{
  margin:0;font-size:clamp(1.25rem,2.2vw,1.55rem);font-weight:600;letter-spacing:-.04em;
  color:var(--ink);line-height:1.15;
}

.console-mid{
  display:grid;grid-template-columns:minmax(0,1.7fr) minmax(240px,.85fr);
  gap:14px;margin-bottom:14px;align-items:stretch;
}
.console-panel{
  border-radius:22px;
  display:flex;flex-direction:column;min-height:0;
  transition:border-color .2s ease, box-shadow .22s ease, background .2s ease;
}
.console-panel-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px 10px;
}
.console-panel-title{display:flex;align-items:center;gap:8px;color:var(--subtle)}
.console-panel-title svg.lucide{width:15px;height:15px}
.console-panel-head h2{
  margin:0;font-size:13.5px;font-weight:500;letter-spacing:-.01em;color:var(--ink);
}
.console-filters{display:flex;align-items:center;gap:4px}
.console-filter{
  appearance:none;border:1px solid transparent;background:transparent;
  color:var(--subtle);font:inherit;font-size:12px;font-weight:500;
  padding:5px 10px;border-radius:999px;cursor:pointer;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;gap:0;
  min-width:30px;min-height:28px;
  transition:
    background .22s ease,
    color .22s ease,
    border-color .22s ease,
    gap .3s cubic-bezier(.22,.7,.2,1),
    padding .3s cubic-bezier(.22,.7,.2,1);
}
.console-filter svg.lucide{width:14px;height:14px;flex:0 0 auto}
.console-filter-txt{
  display:inline-block;
  max-width:0;
  margin:0;
  opacity:0;
  overflow:hidden;
  white-space:nowrap;
  transform:translateX(-6px);
  transition:
    max-width .32s cubic-bezier(.22,.7,.2,1),
    opacity .22s ease,
    transform .3s cubic-bezier(.22,.7,.2,1);
}
.console-filter-txt.is-static,
.console-filter.on .console-filter-txt{
  max-width:5rem;
  opacity:1;
  transform:none;
}
.console-filter--ico{padding:5px 8px}
.console-filter--ico.on{gap:6px;padding-left:9px;padding-right:11px}
.console-filter:hover{color:var(--ink);background:color-mix(in srgb,var(--card) 45%,transparent)}
.console-filter.on{
  color:var(--ink);
  background:color-mix(in srgb,var(--card) 55%,transparent);
  border-color:color-mix(in srgb,var(--line-soft) 85%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.console-filter:focus-visible{outline:2px solid var(--brand);outline-offset:1px}

.console-panel--recent{min-height:320px}
.console-recent-list{
  flex:1;display:flex;flex-direction:column;padding:4px 8px 12px;gap:2px;min-height:220px;
}
.console-recent-row{
  display:flex;align-items:center;gap:12px;width:100%;padding:11px 10px;border:0;
  border-radius:12px;background:transparent;cursor:pointer;text-align:left;font:inherit;color:inherit;
}
.console-recent-row:hover{background:color-mix(in srgb,var(--card) 50%,transparent)}
.console-recent-row:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.console-recent-ico{
  width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--card) 55%,transparent);
  border:1px solid color-mix(in srgb,var(--line-soft) 80%,transparent);
  color:var(--ink);flex:0 0 auto;
}
.console-recent-ico.is-act{color:var(--brand)}
.console-recent-ico svg.lucide{width:15px;height:15px}
.console-recent-meta{flex:1;min-width:0}
.console-recent-meta strong{
  display:block;font-size:13.5px;font-weight:500;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.console-recent-when{
  font-size:12px;color:var(--subtle);white-space:nowrap;flex:0 0 auto;
}
.console-avatar{
  width:26px;height:26px;border-radius:50%;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:600;color:#fff;
  background:var(--color-tint, var(--brand));
  box-shadow:0 0 0 2px color-mix(in srgb,var(--card) 70%,transparent);
  overflow:hidden;
  position:relative;
}
.console-avatar img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;border-radius:inherit;display:block;
}
.console-avatar.sm{width:22px;height:22px;font-size:10px}
.console-avatar.avatar{margin:0}

.console-empty-state{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:36px 20px;gap:6px;color:var(--subtle);
}
.console-empty-state p{margin:0;font-size:13.5px;font-weight:450;color:var(--muted)}
.console-empty-state em{font-style:normal;font-size:12.5px;opacity:.85}
.console-empty-state.sm{min-height:160px;padding:28px 16px}
.console-empty-orb{
  width:44px;height:44px;border-radius:14px;margin-bottom:10px;
  background:color-mix(in srgb,var(--color-tint) 14%,transparent);
  box-shadow:none;
  border:1px solid color-mix(in srgb,var(--color-tint) 18%,transparent);
}
#view-app .console-page .console-panel--aura.liquid-glass{
  background:
    radial-gradient(ellipse 90% 70% at 50% 38%, color-mix(in srgb, var(--color-tint) 12%, transparent), transparent 62%),
    var(--studio-glass) !important;
}

.console-panel--aura{
  position:relative;min-height:320px;
}
#view-app .console-page .console-aura--live.liquid-glass{
  background:
    radial-gradient(ellipse 90% 70% at 50% 38%, rgba(52,199,89,.2), transparent 60%),
    var(--studio-glass) !important;
}
#view-app .console-page .console-aura--staged.liquid-glass{
  background:
    radial-gradient(ellipse 90% 70% at 50% 38%, rgba(255,159,10,.18), transparent 60%),
    var(--studio-glass) !important;
}
.console-aura-stage{
  flex:1;position:relative;display:flex;align-items:center;justify-content:center;
  min-height:190px;
}
.console-aura-glow{
  position:absolute;width:160px;height:160px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.2), transparent 68%);
  filter:blur(8px);opacity:.9;pointer-events:none;
}
.console-aura-rings{
  position:relative;width:108px;height:108px;
}
.console-aura-rings i{
  position:absolute;inset:0;border-radius:50%;
  border:1.5px solid color-mix(in srgb, var(--ink) 18%, transparent);
  opacity:.55;
}
.console-aura-rings i:nth-child(1){transform:rotate(-18deg) scale(1);opacity:.35}
.console-aura-rings i:nth-child(2){transform:rotate(12deg) scale(.78);opacity:.5}
.console-aura-rings i:nth-child(3){
  transform:rotate(-8deg) scale(.52);opacity:.7;
  border-color:color-mix(in srgb,var(--bd-brand-2,#355cff) 55%,transparent);
  background:color-mix(in srgb,var(--bd-brand-1,#5b8cff) 8%,transparent);
}
.console-aura-glyph{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--bd-brand-2,#355cff);opacity:.9;pointer-events:none;
}
.console-aura-glyph svg.lucide{width:28px;height:28px;stroke-width:1.5}
.console-aura-foot{
  padding:0 16px 16px;display:flex;flex-direction:column;gap:10px;align-items:center;
}
.console-status-pill{
  appearance:none;border:1px solid var(--glass-border, var(--line-soft));
  background:color-mix(in srgb,var(--card) 62%,transparent);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  color:var(--ink);font:inherit;font-size:12.5px;font-weight:500;
  display:inline-flex;align-items:center;gap:8px;padding:7px 12px 7px 7px;
  border-radius:999px;cursor:pointer;max-width:100%;
  box-shadow:0 8px 24px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.4);
}
.console-status-pill span:last-child{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px;
}
.console-status-pill:hover{border-color:color-mix(in srgb,var(--brand) 35%,var(--line-soft))}
.console-aura-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}

.console-insights{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:18px;
}
.console-insight{min-height:280px;padding-bottom:14px}
.console-insight--uptime{
  overflow:visible !important;
  min-height:300px;
}
#view-app .console-page .console-insight--uptime.liquid-glass{
  overflow:visible !important;
}
.console-comp-table{
  width:calc(100% - 32px);margin:0 16px 8px;border-collapse:collapse;font-size:12.5px;
}
.console-comp-table th{
  text-align:left;font-size:10.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  color:var(--subtle);padding:6px 0;border-bottom:1px solid color-mix(in srgb,var(--line-soft) 80%,transparent);
}
.console-comp-table td{padding:10px 0;border-bottom:1px solid color-mix(in srgb,var(--line-soft) 80%,transparent);color:var(--ink);transition:color .15s}
.console-comp-table tr:last-child td{border-bottom:none}
.console-comp-table td:last-child{text-align:right;font-weight:500;font-variant-numeric:tabular-nums}
.console-comp-row{cursor:pointer;transition:background .15s}
.console-comp-row td:first-child{border-radius:8px 0 0 8px}
.console-comp-row td:last-child{border-radius:0 8px 8px 0}
.console-comp-row:hover td,
.console-comp-row.is-hot td{
  background:color-mix(in srgb,var(--card) 45%,transparent);
}
.console-comp-row:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.console-swatch{
  display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:middle;
  box-shadow:0 0 0 2px color-mix(in srgb,currentColor 12%,transparent);
}
.console-swatch.pages{background:#ff9f0a;color:#ff9f0a}
.console-swatch.sections{background:#5b8cff;color:#5b8cff}
.console-swatch.revs{background:#34c759;color:#34c759}

.console-gauge{
  --g1:33;--g2:66;
  position:relative;width:min(200px,78%);aspect-ratio:2 / 1;margin:10px auto 4px;
}
.console-gauge-visual{
  position:absolute;inset:0;border-radius:999px 999px 0 0;overflow:hidden;
  /* Stops are mapped onto the visible semicircle (0–50%). Never let a
     segment run past 50% or it wraps the full circle and leaves a false
     second swatch at the left tip (looked like “another blue”). */
  background:conic-gradient(
    from 270deg,
    #ff9f0a 0 calc(var(--g1) * 1%),
    #5b8cff calc(var(--g1) * 1%) min(calc(var(--g2) * 1%), 50%),
    #34c759 min(calc(var(--g2) * 1%), 50%) 50%,
    transparent 50% 100%
  );
  -webkit-mask-image:radial-gradient(farthest-side at bottom, transparent calc(100% - 20px), #000 calc(100% - 19px));
  mask-image:radial-gradient(farthest-side at bottom, transparent calc(100% - 20px), #000 calc(100% - 19px));
  transition:filter .18s ease, opacity .18s ease;
}
.console-insight--comp[data-hot="pages"] .console-gauge-visual{
  background:conic-gradient(from 270deg,#ff9f0a 0 calc(var(--g1) * 1%), rgba(91,140,255,.18) calc(var(--g1) * 1%) min(calc(var(--g2) * 1%), 50%), rgba(52,199,89,.18) min(calc(var(--g2) * 1%), 50%) 50%, transparent 50% 100%);
}
.console-insight--comp[data-hot="sections"] .console-gauge-visual{
  background:conic-gradient(from 270deg,rgba(255,159,10,.18) 0 calc(var(--g1) * 1%), #5b8cff calc(var(--g1) * 1%) min(calc(var(--g2) * 1%), 50%), rgba(52,199,89,.18) min(calc(var(--g2) * 1%), 50%) 50%, transparent 50% 100%);
}
.console-insight--comp[data-hot="revs"] .console-gauge-visual{
  background:conic-gradient(from 270deg,rgba(255,159,10,.18) 0 calc(var(--g1) * 1%), rgba(91,140,255,.18) calc(var(--g1) * 1%) min(calc(var(--g2) * 1%), 50%), #34c759 min(calc(var(--g2) * 1%), 50%) 50%, transparent 50% 100%);
}
.console-gauge-zones{
  position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr 1fr;z-index:2;
}
.console-gauge-zone{
  appearance:none;border:0;background:transparent;cursor:pointer;padding:0;
}
.console-gauge-zone:focus-visible{outline:2px solid var(--brand);outline-offset:-2px;border-radius:8px}

.console-uptime{
  flex:1;display:flex;flex-direction:column;padding:4px 16px 0;gap:14px;min-height:0;
}
.console-uptime-hero{display:flex;flex-direction:column;gap:4px}
.console-uptime-pct{
  appearance:none;border:0;background:transparent;cursor:pointer;text-align:left;padding:0;
  font-size:clamp(2rem,4vw,2.45rem);font-weight:560;letter-spacing:-.045em;line-height:1;
  color:var(--ink);font-variant-numeric:tabular-nums;font-family:inherit;
}
.console-uptime-pct span{font-size:.48em;font-weight:500;margin-left:.08em;opacity:.72}
.console-uptime-pct.good{color:var(--good)}
.console-uptime-pct.warn{color:var(--warn)}
.console-uptime-pct.bad{color:var(--bad)}
.console-uptime-sub{margin:0;font-size:12.5px;color:var(--subtle);line-height:1.4}
.console-uptime-chip{
  font-style:normal;font-size:11px;font-weight:500;padding:4px 9px;border-radius:999px;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.28);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  color:var(--muted);
}
.console-uptime-chip.good{
  color:var(--good);
  border-color:color-mix(in srgb,var(--good) 28%,transparent);
  background:color-mix(in srgb,var(--good) 12%,rgba(255,255,255,.2));
}
.console-uptime-chip.warn{
  color:var(--warn);
  border-color:color-mix(in srgb,var(--warn) 28%,transparent);
  background:color-mix(in srgb,var(--warn) 12%,rgba(255,255,255,.2));
}
.console-uptime-chip.bad{
  color:var(--bad);
  border-color:color-mix(in srgb,var(--bad) 28%,transparent);
  background:color-mix(in srgb,var(--bad) 12%,rgba(255,255,255,.2));
}
.console-uptime-bars{
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;
  padding:4px 0 2px;align-items:end;
}
.console-uptime-day{
  display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;
}
.console-uptime-day i{
  display:block;width:100%;max-width:18px;height:36px;border-radius:999px;
  background:rgba(0,0,0,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45);
}
.console-uptime-day.is-up i{
  background:linear-gradient(180deg, color-mix(in srgb,var(--good) 82%,#fff), var(--good));
  box-shadow:0 4px 12px color-mix(in srgb,var(--good) 28%,transparent);
}
.console-uptime-day span{
  font-size:10px;color:var(--subtle);letter-spacing:.02em;
}

/* Site uptime chart — same liquid glass card as siblings, light chart chrome */
.console-uptime-chart{
  position:relative;flex:1;padding:4px 10px 16px;min-height:210px;
  display:flex;flex-direction:column;
  overflow:visible;
}
.console-uptime-chart svg{
  width:100%;height:100%;min-height:190px;display:block;
  overflow:visible;
}
.console-uptime-chart--lg{
  min-height:340px;padding:8px 8px 18px;
}
.console-uptime-chart--lg svg{min-height:310px}
.console-panel-head .console-chart-expand{
  appearance:none;margin-left:auto;cursor:pointer;
  width:32px;height:32px;min-height:32px;padding:0;
  border-radius:10px;
  color:var(--color-label-secondary);
  background:color-mix(in srgb,var(--color-label-primary) 5%,transparent);
  border:1px solid color-mix(in srgb,var(--color-label-primary) 8%,transparent);
  box-shadow:none;opacity:1;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.console-panel-head .console-chart-expand:hover{
  color:var(--color-tint);
  background:color-mix(in srgb,var(--color-tint) 8%,transparent);
  border-color:color-mix(in srgb,var(--color-tint) 18%,transparent);
}
.console-panel-head .console-chart-expand:active{transform:scale(.96)}
.console-panel-head .console-chart-expand svg.lucide{width:15px;height:15px;display:block}
.modal.wide.console-chart-modal{
  max-width:min(860px,calc(100vw - 32px));
  padding:22px 22px 18px;
  overflow:visible;
}
.console-chart-modal-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  margin-bottom:12px;
}
.console-chart-modal-head h2{margin:0;font-size:1.25rem;letter-spacing:-.03em}
.console-chart-modal-head .sub{margin:4px 0 0;font-size:13px;color:var(--subtle)}
.console-chart-modal-foot{margin-top:10px}
.console-chart-modal-foot .c-sub{margin:0;font-size:12.5px;line-height:1.45}
.modal.console-chart-modal .console-tip{position:fixed}
.console-up-grid{
  stroke:color-mix(in srgb,var(--ink) 12%,transparent);stroke-width:1;stroke-dasharray:3 5;vector-effect:non-scaling-stroke;
}
.console-up-ylab,.console-up-xlab{
  fill:var(--subtle);font-size:10px;font-family:inherit;
}
.console-up-line{
  stroke:var(--good);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
}
.console-up-dot{
  fill:var(--good);stroke:rgba(255,255,255,.9);stroke-width:1.5;
  transition:r .15s ease,stroke-width .15s ease;
}
.console-up-dot.is-hot{
  r:5.5;stroke:#fff;stroke-width:2;
  filter:drop-shadow(0 0 6px color-mix(in srgb,var(--good) 45%,transparent));
}
.console-up-guide{
  stroke:color-mix(in srgb,var(--color-tint) 55%,transparent);stroke-width:1;
  stroke-dasharray:none;pointer-events:none;vector-effect:non-scaling-stroke;
  opacity:.85;
}
.console-up-guide[hidden]{display:none}
.console-up-scrub{
  fill:var(--good);stroke:#fff;stroke-width:2.5;
  filter:drop-shadow(0 2px 6px color-mix(in srgb,var(--good) 35%,transparent));
  pointer-events:none;
}
.console-up-scrub[hidden]{display:none}
.console-up-hits{
  position:absolute;inset:4px 10px 16px;pointer-events:none;
  display:block;
}
.console-uptime-chart--lg .console-up-hits{inset:8px 8px 18px}
.console-uptime-chart.is-scrubbing,
.console-uptime-chart.is-scrubbing .console-up-hit{
  cursor:default;
}
.console-up-hit{
  position:absolute;top:0;bottom:0;height:auto;width:14.28%;margin:0;
  border:0;border-radius:0;background:transparent;cursor:default;
  pointer-events:auto;padding:0;
}
.console-up-hit::after{
  content:"";position:absolute;left:50%;top:8%;bottom:18%;width:1px;
  transform:translateX(-50%);opacity:0;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--color-tint) 35%,transparent) 20%,color-mix(in srgb,var(--color-tint) 35%,transparent) 80%,transparent);
  transition:opacity .15s ease;
}
.console-up-hit:hover::after,
.console-up-hit.is-hot::after{opacity:1}
.console-up-hit:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}

.console-gauge-zone{cursor:default}
.console-insight--comp{cursor:default}
.console-comp-row{cursor:default}

.console-tip{
  position:fixed;z-index:1200;pointer-events:none;
  min-width:108px;max-width:200px;padding:8px 11px;border-radius:10px;
  background:color-mix(in srgb,var(--color-bg-elevated) 92%,transparent);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  color:var(--ink);
  box-shadow:
    0 0 0 0.5px color-mix(in srgb,var(--color-label-primary) 12%,transparent),
    0 8px 24px color-mix(in srgb,var(--color-label-primary) 10%,transparent);
  font-size:12px;line-height:1.35;letter-spacing:-.01em;
  border:none;
  transform:translate3d(0,0,0);
  transition:opacity .12s ease;
}
.console-tip strong{display:block;font-size:12px;font-weight:600;margin-bottom:2px;letter-spacing:-.015em}
.console-tip span{display:block;opacity:.62;font-size:11.5px;font-weight:450}
html[data-theme="dark"] .console-tip,
html[data-hig-theme*="dark"] .console-tip{
  background:color-mix(in srgb,var(--color-bg-elevated) 88%,transparent);
  color:var(--ink);
  box-shadow:
    0 0 0 0.5px rgba(255,255,255,.12),
    0 10px 28px rgba(0,0,0,.45);
}

.console-health-score{
  appearance:none;border:0;background:transparent;cursor:pointer;
  font-size:20px;font-weight:560;letter-spacing:-.03em;color:var(--ink);
  padding:2px 6px;border-radius:8px;transition:background .15s;
}
.console-health-score:hover{background:color-mix(in srgb,var(--card) 45%,transparent)}
.console-health-score.good{color:var(--good)}
.console-health-score.warn{color:var(--warn)}
.console-health-score.bad{color:var(--bad)}
.console-spark{
  position:relative;padding:4px 12px 0;flex:1;display:flex;flex-direction:column;min-height:150px;
}
.console-spark svg{width:100%;height:118px;display:block}
.console-spark-hits{position:absolute;left:12px;right:12px;top:4px;height:118px;pointer-events:none}
.console-spark-hit{
  position:absolute;width:18px;height:18px;margin:-9px 0 0 -9px;
  border-radius:50%;border:2px solid var(--card);background:var(--good);
  box-shadow:0 0 0 0 rgba(52,199,89,0);cursor:pointer;pointer-events:auto;
  opacity:.0;transform:scale(.6);transition:opacity .15s,transform .15s,box-shadow .15s;
}
.console-spark:hover .console-spark-hit,
.console-spark-hit.is-hot,
.console-spark-hit:focus-visible{
  opacity:1;transform:scale(1);
}
.console-spark-hit.is-hot,
.console-spark-hit:hover{
  box-shadow:0 0 0 6px rgba(52,199,89,.18);
}
.console-spark-axis{
  display:flex;justify-content:space-between;padding:6px 2px 0;
  font-size:10.5px;color:var(--subtle);
}
.console-inline-link{
  appearance:none;border:0;background:transparent;color:var(--brand);
  font:inherit;font-size:12px;font-weight:500;cursor:pointer;
  text-align:left;padding:8px 16px 0;margin-top:auto;
}
.console-inline-link:hover{opacity:.75}

.console-health-cta{
  appearance:none;display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:calc(100% - 24px);margin:10px 12px 2px;padding:10px 12px;
  border:1px solid color-mix(in srgb,var(--line-soft) 85%,transparent);border-radius:14px;
  background:color-mix(in srgb,var(--card) 48%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  color:var(--ink);font:inherit;cursor:pointer;text-align:left;
  transition:border-color .15s,background .15s,transform .15s,box-shadow .15s;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
}
.console-health-cta:hover{
  border-color:color-mix(in srgb,var(--brand) 30%,var(--line-soft));
  background:color-mix(in srgb,var(--brand) 7%,var(--card));
  transform:translateY(-1px);
}
.console-health-cta:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.console-health-counts{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.console-health-counts em{
  font-style:normal;font-size:11.5px;font-weight:500;padding:4px 8px;border-radius:999px;
  background:color-mix(in srgb,var(--card) 60%,transparent);color:var(--subtle);
  border:1px solid color-mix(in srgb,var(--line-soft) 80%,transparent);
}
.console-health-counts em.crit{
  color:var(--bad);background:rgba(255,59,48,.08);border-color:rgba(255,59,48,.22);
}
.console-health-counts em.warn{
  color:var(--warn);background:rgba(255,159,10,.1);border-color:rgba(255,159,10,.25);
}
.console-health-go{
  display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;
  font-size:12.5px;font-weight:500;color:var(--brand);white-space:nowrap;
}
.console-health-go svg.lucide{width:14px;height:14px}

.console-lower{
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:14px;
}
.console-lower .card{margin-top:0}
.console-page .console-notes,.console-page .dash-checklist-card{
  position:relative;
  border-radius:22px;
}

@media (max-width:980px){
  .console-mid,.console-insights,.console-lower{grid-template-columns:1fr}
  .console-panel--recent,.console-panel--aura{min-height:0}
  .console-aura-stage{min-height:160px}
}
@media (max-width:640px){
  .console-page .dash-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .console-recent-when{display:none}
}

@keyframes console-fade-up{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}
.console-page > .reveal{
  animation:console-fade-up .55s cubic-bezier(.22,1,.36,1) both;
}
.console-page > .console-mid{animation-delay:.05s}
.console-page > .console-insights{animation-delay:.1s}
.console-page > .console-lower{animation-delay:.14s}

/* Profile sits in normal sidebar flow (scroll with the page; no sticky pin) */
#view-app .side .side-nav{
  flex:0 0 auto;min-height:0;overflow:visible;
}
#view-app .side .side-user-wrap{
  position:relative;bottom:auto;z-index:auto;margin-top:auto;flex-shrink:0;
  background:transparent;
  border-top:1px solid var(--color-separator, var(--line-soft));
  padding:8px 0 0;box-shadow:none;
}

/* =====================================================================
   Console polish pass — typography + controls (must win cascade)
===================================================================== */
#view-app .console-page{
  font-family:var(--font-ui),-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;
  color:#1d1d1f;
  -webkit-font-smoothing:antialiased;
}
#view-app .console-page h1,
#view-app .console-page h2,
#view-app .console-page .dash-stat-n,
#view-app .console-page .console-top h1{
  color:#1d1d1f !important;
  font-weight:600 !important;
  letter-spacing:-.03em;
}
#view-app .console-page .console-eyebrow,
#view-app .console-page .dash-stats-bar-label,
#view-app .console-page .dash-stat-lbl,
#view-app .console-page .console-panel-head h2,
#view-app .console-page .console-recent-when,
#view-app .console-page .c-sub,
#view-app .console-page .ph-sub{
  color:rgba(60,60,67,.56) !important;
  font-weight:500 !important;
}
#view-app .console-page .console-eyebrow{
  font-size:11px !important;
  letter-spacing:.08em !important;
  text-transform:uppercase;
}
#view-app .console-page .dash-stats-bar-label{
  font-size:11px !important;
  letter-spacing:.08em !important;
}

/* Logo — Lucide mark only (no tint plate / glow) */
#view-app .console-page .console-top-mark{
  width:auto;height:auto;border-radius:0;
  background:transparent !important;
  background-image:none !important;
  border:none !important;
  box-shadow:none !important;
  filter:none !important;
  display:inline-flex;align-items:center;justify-content:center;
  overflow:visible;
}
#view-app .console-page .console-top-mark svg{
  width:26px;height:26px;display:block;
  stroke:var(--color-tint);color:var(--color-tint);stroke-width:1.75;
}
#view-app .console-page .console-top-mark img{display:none !important}
#view-app .console-page .console-top-mark::before,
#view-app .console-page .console-top-mark::after{display:none !important}

/* Status pill */
#view-app .console-page .dash-status-pill{
  background:rgba(120,120,128,.12) !important;
  color:rgba(60,60,67,.72) !important;
  border:none !important;
  box-shadow:none !important;
  font-size:11px !important;
  font-weight:600 !important;
  letter-spacing:.04em !important;
  text-transform:uppercase;
  padding:5px 10px !important;
}

/* Customize stats — soft secondary control */
#view-app .console-page .dash-customize-btn{
  appearance:none;
  border:none !important;
  background:rgba(120,120,128,.12) !important;
  color:#1d1d1f !important;
  font-size:13px !important;
  font-weight:500 !important;
  padding:7px 14px !important;
  border-radius:980px !important;
  box-shadow:none !important;
  gap:7px;
}
#view-app .console-page .dash-customize-btn svg.lucide{
  color:#1d1d1f !important;opacity:.55;
}
#view-app .console-page .dash-customize-btn:hover{
  background:rgba(120,120,128,.18) !important;
  color:#1d1d1f !important;
}
#view-app .console-page .dash-customize-btn.is-active{
  background:rgba(53,92,255,.12) !important;
  color:#355cff !important;
}
#view-app .console-page .dash-customize-btn.is-active svg.lucide{color:#355cff !important;opacity:1}

/* Aura primary actions */
#view-app .console-page .console-aura-actions{
  gap:10px;width:100%;justify-content:center;
}
#view-app .console-page .console-aura-actions .btn{
  min-height:36px !important;
  padding:0 18px !important;
  border-radius:980px !important;
  font-size:14px !important;
  font-weight:600 !important;
  letter-spacing:-.01em;
  box-shadow:none !important;
}
#view-app .console-page .console-aura-actions .btn-brand{
  background:#355cff !important;
  color:#fff !important;
  border:none !important;
}
#view-app .console-page .console-aura-actions .btn-brand:hover{
  background:#4a6fff !important;
}
#view-app .console-page .console-aura-actions .btn-ghost,
#view-app .console-page .console-aura-actions .btn[disabled],
#view-app .console-page .console-aura-actions .btn:disabled{
  background:rgba(120,120,128,.12) !important;
  color:rgba(60,60,67,.45) !important;
  border:none !important;
  opacity:1 !important;
}
#view-app .console-page .console-aura-actions .btn-ghost:not([disabled]):hover{
  background:rgba(120,120,128,.18) !important;
  color:#1d1d1f !important;
}

/* Filter chips */
#view-app .console-page .console-filter{
  border:none !important;
  background:transparent !important;
  color:rgba(60,60,67,.56) !important;
  border-radius:980px !important;
  font-weight:500 !important;
}
#view-app .console-page .console-filter.on{
  background:rgba(120,120,128,.14) !important;
  color:#1d1d1f !important;
  border:none !important;
  box-shadow:none !important;
}

/* Uptime empty copy + chart floor */
#view-app .console-page .console-uptime-empty{
  margin:0 16px 14px;
  font-size:12.5px;
  line-height:1.45;
  color:rgba(60,60,67,.56);
}
#view-app .console-page .console-uptime-chart{
  min-height:220px !important;
}
#view-app .console-page .console-uptime-chart svg{
  min-height:200px !important;
  overflow:visible !important;
}
#view-app .console-page .console-insight--uptime{
  min-height:320px !important;
}

/* =====================================================================
   Apple aesthetic — Console home
===================================================================== */
#view-app .console-page{
  max-width:1080px;
  padding-bottom:64px;
}
#view-app .console-page .console-top{
  margin-bottom:28px;
  padding:8px 0 4px;
  gap:14px;
}
#view-app .console-page .console-top h1{
  font-size:clamp(1.7rem,3.2vw,2.1rem) !important;
  font-weight:700 !important;
  letter-spacing:-.03em !important;
  line-height:1.08 !important;
}
#view-app .console-page .console-eyebrow{
  font-size:11px !important;
  letter-spacing:.08em !important;
  font-weight:600 !important;
  color:rgba(60,60,67,.45) !important;
  text-transform:uppercase;
}
#view-app .console-page .console-top-mark svg{
  width:28px;height:28px;
  stroke-width:1.6;
}
#view-app .console-page .dash-status-pill{
  padding:5px 11px !important;
  font-size:11px !important;
  background:rgba(120,120,128,.12) !important;
}
#view-app .console-page .dash-stats-bar{
  margin-bottom:12px;
}
#view-app .console-page .dash-stats-bar-label{
  font-size:11px !important;
  letter-spacing:.06em !important;
  color:rgba(60,60,67,.45) !important;
  text-transform:uppercase;
  font-weight:600 !important;
}
/* Card material comes from studio-apple.css tokens — do not hardcode opaque whites here */
#view-app .console-page .dash-stat{
  padding:16px 16px 14px;
  border-radius:18px;
}
#view-app .console-page .dash-stat-n{
  font-size:26px !important;
  font-weight:650 !important;
  letter-spacing:-.035em !important;
  margin-top:10px;
}
#view-app .console-page .dash-stat-lbl{
  font-size:12px !important;
  font-weight:500 !important;
  letter-spacing:-.01em;
}
#view-app .console-page .dash-stat-ico{
  width:28px;height:28px;border-radius:8px;
  background:rgba(120,120,128,.1) !important;
  border:none !important;
  box-shadow:none !important;
}
#view-app .console-page .console-mid,
#view-app .console-page .console-insights,
#view-app .console-page .console-lower{
  gap:16px;
  margin-bottom:16px;
}
#view-app .console-page .console-panel-head h2{
  font-size:15px !important;
  font-weight:600 !important;
  letter-spacing:-.02em !important;
  color:#1d1d1f !important;
}
#view-app .console-page .console-recent-item,
#view-app .console-page .console-act-row{
  border-radius:10px;
  transition:background .15s ease;
}
#view-app .console-page .console-recent-item:hover,
#view-app .console-page .console-act-row:hover{
  background:rgba(120,120,128,.08);
}
#view-app .console-page .c-sub{
  font-size:13px !important;
  line-height:1.45;
  color:rgba(60,60,67,.55) !important;
}
html[data-theme="dark"] #view-app .console-page .console-top h1,
html[data-hig-theme*="dark"] #view-app .console-page .console-top h1,
html[data-theme="dark"] #view-app .console-page .console-panel-head h2,
html[data-hig-theme*="dark"] #view-app .console-page .console-panel-head h2{
  color:#f5f5f7 !important;
}
/* =====================================================================
   Console hub — quick actions, next steps, domain
===================================================================== */
#view-app .console-page .console-top{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
}
#view-app .console-page .console-top-actions{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-left:auto;
}
#view-app .console-page .console-quick{
  display:flex;flex-wrap:wrap;gap:8px;
  margin:0 0 18px;
}
#view-app .console-page .console-quick-btn{
  appearance:none;border:none;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;
  min-height:36px;padding:0 14px;border-radius:980px;
  font:inherit;font-size:13px;font-weight:550;letter-spacing:-.015em;
  color:var(--color-label-primary,#1d1d1f);
  background:rgba(255,255,255,.72);
  border:1px solid rgba(0,0,0,.05);
  box-shadow:0 1px 2px rgba(0,0,0,.03);
  transition:background .15s ease,transform .12s ease;
}
#view-app .console-page .console-quick-btn svg.lucide{
  width:15px;height:15px;color:var(--color-tint,#355cff);stroke-width:1.85;
}
#view-app .console-page .console-quick-btn:hover{
  background:#fff;
}
#view-app .console-page .console-quick-btn:active{transform:scale(.97)}
#view-app .console-page .console-quick-btn:disabled{
  opacity:.38;cursor:not-allowed;transform:none;
}
#view-app .console-page .console-next{
  padding:16px 18px 14px;margin-bottom:16px;border-radius:18px;
}
#view-app .console-page .console-next-progress{
  font-size:12px;font-weight:600;color:var(--color-label-secondary,rgba(60,60,67,.55));
}
#view-app .console-page .console-next-track{
  height:4px;border-radius:999px;background:rgba(120,120,128,.14);
  margin:10px 0 12px;overflow:hidden;
}
#view-app .console-page .console-next-track i{
  display:block;height:100%;border-radius:inherit;
  background:var(--color-tint,#355cff);
}
#view-app .console-page .console-next-list{
  list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;
}
#view-app .console-page .console-next-item{
  display:flex;align-items:center;gap:10px;
  min-height:40px;padding:4px 6px;border-radius:10px;
}
#view-app .console-page .console-next-item.is-next{
  background:color-mix(in srgb,var(--color-tint,#355cff) 8%,transparent);
}
#view-app .console-page .console-next-item.is-done .console-next-label{
  color:var(--color-label-tertiary,rgba(60,60,67,.4));
  text-decoration:line-through;
}
#view-app .console-page .console-next-check{
  width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;
  color:var(--color-label-tertiary);
}
#view-app .console-page .console-next-item.is-done .console-next-check{
  color:var(--color-success,#34c759);
}
#view-app .console-page .console-next-label{
  flex:1;font-size:14px;font-weight:500;letter-spacing:-.015em;
}
#view-app .console-page .console-next-dismiss{
  appearance:none;border:none;background:transparent;cursor:pointer;
  margin-top:8px;padding:6px 4px;
  font:inherit;font-size:12.5px;font-weight:550;
  color:var(--color-label-secondary);
}
#view-app .console-page .console-domain{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;margin-bottom:16px;border-radius:16px;
}
#view-app .console-page .console-domain-ico{
  width:36px;height:36px;border-radius:10px;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(120,120,128,.1);color:var(--color-tint,#355cff);
}
#view-app .console-page .console-domain-meta{
  flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;
}
#view-app .console-page .console-domain-meta strong{
  font-size:14.5px;font-weight:600;letter-spacing:-.02em;
}
#view-app .console-page .console-domain-meta span{
  font-size:12.5px;color:var(--color-label-secondary,rgba(60,60,67,.55));
}
@media (max-width:720px){
  #view-app .console-page .console-top{flex-direction:column;align-items:stretch}
  #view-app .console-page .console-top-actions{margin-left:0}
}
/* Publish addresses + health findings peek */
#view-app .console-page .console-publish{
  display:flex;flex-direction:column;gap:2px;
  padding:6px;margin-bottom:16px;border-radius:16px;
}
#view-app .console-page .console-publish-row{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;border-radius:12px;
}
#view-app .console-page .console-publish-row:hover{
  background:rgba(120,120,128,.08);
}
#view-app .console-page .console-publish-ico{
  width:34px;height:34px;border-radius:10px;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(120,120,128,.1);
  color:var(--color-tint,#355cff);
}
#view-app .console-page .console-publish-ico.is-live{color:var(--color-success,#34c759)}
#view-app .console-page .console-publish-meta{
  flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;
}
#view-app .console-page .console-publish-meta em{
  font-style:normal;font-size:11px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;
  color:var(--color-label-tertiary,rgba(60,60,67,.45));
}
#view-app .console-page .console-publish-meta strong{
  font-size:13.5px;font-weight:560;letter-spacing:-.015em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#view-app .console-page .console-publish-acts{flex:0 0 auto}
#view-app .console-page .console-health-findings{
  list-style:none;margin:0 0 10px;padding:0;
  display:flex;flex-direction:column;gap:4px;
}
#view-app .console-page .console-health-findings li{
  display:flex;align-items:flex-start;gap:8px;
  padding:8px 10px;border-radius:10px;
  background:rgba(120,120,128,.06);
  font-size:12.5px;line-height:1.35;
}
#view-app .console-page .console-health-findings li.is-crit{color:#d70015}
#view-app .console-page .console-health-findings li.is-warn{color:#c77800}
#view-app .console-page .console-health-findings li em{
  font-style:normal;color:var(--color-label-primary,#1d1d1f);
}
#view-app .console-page .console-health-findings li.is-more em{
  color:var(--color-label-secondary);
}
#view-app .console-page .console-rev-list{
  list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;
}
#view-app .console-page .console-rev-list li{
  display:flex;flex-direction:column;gap:2px;
  padding:10px 4px;border-bottom:.5px solid var(--color-separator,rgba(60,60,67,.1));
}
#view-app .console-page .console-rev-list li:last-child{border-bottom:none}
#view-app .console-page .console-rev-list strong{
  font-size:13px;font-weight:600;letter-spacing:-.015em;
}
#view-app .console-page .console-rev-list span{
  font-size:12px;color:var(--color-label-secondary,rgba(60,60,67,.55));
}
/* Quiet Console chrome — no button soup */
#view-app .console-page .console-top{
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  margin-bottom:18px;padding:8px 0 4px;
}
#view-app .console-page .console-top-link{
  appearance:none;border:none;background:transparent;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 2px;margin:0 0 4px;
  font:inherit;font-size:14px;font-weight:560;letter-spacing:-.015em;
  color:var(--color-tint,#355cff);
}
#view-app .console-page .console-top-link:hover{opacity:.8}
#view-app .console-page .console-top-link svg.lucide{width:14px;height:14px}
#view-app .console-page .console-next-line{
  display:flex;align-items:center;gap:10px;
  margin:0 0 18px;padding:0;
  font-size:13.5px;color:var(--color-label-secondary,rgba(60,60,67,.55));
}
#view-app .console-page .console-next-line > span{
  font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--color-label-tertiary,rgba(60,60,67,.4));
}
#view-app .console-page .console-next-line button{
  appearance:none;border:none;background:transparent;cursor:pointer;
  font:inherit;font-size:13.5px;font-weight:560;letter-spacing:-.015em;
  color:var(--color-tint,#355cff);padding:0;
}
#view-app .console-page .console-next-line button:hover{text-decoration:underline}
#view-app .console-page .console-aura-addrs{
  display:flex;flex-direction:column;gap:4px;
  width:100%;margin:4px 0 8px;
}
#view-app .console-page .console-addr{
  appearance:none;border:none;cursor:pointer;text-align:left;
  display:flex;flex-direction:column;gap:1px;
  padding:8px 10px;border-radius:10px;
  background:rgba(255,255,255,.28);
  color:inherit;font:inherit;
  transition:background .15s ease;
}
#view-app .console-page .console-addr:hover:not(:disabled){
  background:rgba(255,255,255,.45);
}
#view-app .console-page .console-addr:disabled{
  opacity:.45;cursor:default;
}
#view-app .console-page .console-addr em{
  font-style:normal;font-size:10px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--color-label-tertiary,rgba(60,60,67,.45));
}
#view-app .console-page .console-addr strong{
  font-size:12.5px;font-weight:550;letter-spacing:-.015em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#view-app .console-page .console-aura-actions .btn{
  min-width:0;flex:1;
}
#view-app .console-page .console-panel-title svg{display:none}
/* Hide leftover clutter styles if present */
#view-app .console-page .console-quick,
#view-app .console-page .console-domain,
#view-app .console-page .console-publish,
#view-app .console-page .console-next:not(.console-next-line),
#view-app .console-page .console-health-findings,
#view-app .console-page .console-insight--revs{display:none !important}