:root{
  color-scheme:dark;
  --bg:#06101a;
  --bg2:#081725;
  --panel:#0b1a27;
  --panel2:#0f2232;
  --line:#1c3549;
  --line2:#274b66;
  --text:#edf6ff;
  --muted:#8ea7ba;
  --blue:#1788ff;
  --green:#19d86f;
  --cyan:#17c6e7;
  --purple:#9a55e8;
  --orange:#ff7a00;
  --gold:#ffb000;
  --danger:#ff767e;
  --radius:10px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:
  radial-gradient(circle at 22% -5%,rgba(33,95,145,.20),transparent 32%),
  linear-gradient(145deg,var(--bg2),var(--bg) 68%);
  color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif}
body{min-height:100vh}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;color:#cde4f7;overflow-wrap:anywhere}
.shell{width:min(1380px,calc(100% - 44px));margin:auto}
.site-header{height:66px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px;letter-spacing:.01em}
.brand-mark{width:29px;height:29px;border-radius:50%;border:3px solid #2f80ed;position:relative;flex:0 0 auto}
.brand-mark:after{content:"";position:absolute;inset:5px;border:2px solid #7fc0ff;border-radius:50%}
.header-right{display:flex;align-items:center;justify-content:flex-end;gap:14px;min-width:0}
.header-link{font-size:12px;color:#c8d7e5}
.header-link:hover,.header-link:focus-visible{color:#fff}
.page{padding:38px 0 44px}
.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:#76a9d1;margin-bottom:10px}
h1{font-size:clamp(30px,3.2vw,46px);line-height:1.04;margin:0 0 10px;font-weight:670;letter-spacing:-.025em}
h2{margin:0;font-size:16px}
.subtitle,.muted{color:var(--muted)}
.subtitle{font-size:13px;line-height:1.5}
.panel{border:1px solid var(--line);background:linear-gradient(155deg,rgba(15,34,50,.94),rgba(9,23,35,.96));border-radius:var(--radius)}
.btn{height:38px;padding:0 15px;border-radius:8px;border:1px solid var(--line2);display:inline-flex;align-items:center;justify-content:center;background:#0c1a26;color:#eaf5ff;font-size:12px;font-weight:650;cursor:pointer}
.btn.primary{background:linear-gradient(180deg,#258eff,#0f6fe5);border-color:#288ff7}
.btn:hover,.btn:focus-visible{filter:brightness(1.08);outline:none}
.btn.danger{border-color:#633740;color:#ffc0c4}
.footer{border-top:1px solid var(--line);padding:18px 0 26px;color:#708a9e;font-size:10px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

/* Public */
.public-hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(330px,.75fr);gap:46px;align-items:center;min-height:560px;padding:54px 0}
.public-hero h1{font-size:clamp(42px,5vw,70px)}
.public-lead{max-width:720px;color:#b0c2d1;font-size:15px;line-height:1.65}
.public-actions{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap}
.public-card{padding:24px}
.public-card h2{font-size:18px;margin-bottom:8px}
.public-card>p{font-size:12px;line-height:1.55;color:#9db4c7}
.info-list{display:grid;gap:9px;margin-top:18px}
.info-row{padding:11px 12px;border:1px solid var(--line);border-radius:8px;background:rgba(5,14,22,.35)}
.info-row strong{display:block;font-size:11px;margin-bottom:3px}
.info-row span{font-size:10px;line-height:1.45;color:#859fb3}
.public-sections{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding-bottom:40px}
.public-sections .panel{padding:18px}
.public-sections p{font-size:11px;line-height:1.6;color:#91a8ba}

/* Dashboard */
.welcome-row{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:stretch}
.welcome-copy{padding:10px 0}
.weather{padding:16px;min-height:108px;display:flex;flex-direction:column;justify-content:center}
.weather-head{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:7px}
.weather-title{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:#78a5c6}
.weather-main{font-size:22px;font-weight:700}
.weather-detail{font-size:10px;color:#8ea7ba;margin-top:4px;line-height:1.45}
.weather a{color:#78b7ff}
.section-head{display:flex;justify-content:space-between;align-items:center;margin-top:28px;margin-bottom:10px}
.section-head h2{font-size:14px}
.services{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px}
.service{--accent:var(--blue);min-width:0;min-height:156px;border:1px solid var(--line);border-radius:10px;padding:13px 9px 11px;background:linear-gradient(155deg,#0f2130,#0b1824);display:flex;flex-direction:column;align-items:center;text-align:center;transition:transform .12s ease,border-color .12s ease}
.service.active:hover,.service.active:focus-visible{transform:translateY(-1px);border-color:var(--accent);outline:none}
.service.unavailable{filter:saturate(.32);opacity:.57}
.service-icon{width:40px;height:40px;border:1px solid var(--accent);border-radius:50%;display:grid;place-items:center;color:var(--accent);margin-bottom:9px;background:#08131d}
.service-icon svg{width:22px;height:22px}
.service h3{font-size:11px;line-height:1.25;margin:0 0 5px;color:var(--accent);overflow-wrap:anywhere;word-break:normal}
.service p{font-size:9px;line-height:1.35;color:#8ca3b5;margin:0;overflow-wrap:anywhere;hyphens:auto}
.service-state{margin-top:auto;padding-top:9px;font-size:8.5px;color:#83e9ae}
.unavailable .service-state{color:#a8b2b9}
.dashboard-lower{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.small-panel{padding:14px;min-height:104px}
.small-panel h3{font-size:11px;margin:0 0 8px}
.small-panel p{font-size:10px;line-height:1.5;color:#8da5b7;margin:0}
.quick{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.quick a{border:1px solid var(--line);border-radius:7px;padding:8px 10px;color:#bdd0de;font-size:10px;background:#0a1722}
.quick a:hover{border-color:#2f80ed}

/* Help */
.help-intro{max-width:760px;margin-bottom:18px}
.help-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.help-card{padding:17px}
.help-card h2{font-size:14px;margin-bottom:8px}
.help-card p,.help-card li{font-size:10.5px;line-height:1.55;color:#9bb1c2}
.help-card ol,.help-card ul{padding-left:19px;margin:9px 0}
.server-box{margin:10px 0;padding:9px 10px;border:1px solid var(--line);border-radius:7px;background:#07131d;font-size:10px}
.help-note{border-left:3px solid #ffb000;padding-left:10px;color:#cfb97a!important}
.geo-status{margin-top:8px;font-size:10px;color:#8ea7ba;min-height:1.4em}

/* Unavailable */
.center-card{width:min(600px,100%);margin:70px auto;padding:24px}
.center-card h1{font-size:26px}
.center-card p{font-size:12px;line-height:1.6;color:#98afc0}

/* Harmonize existing identity component without redefining its behavior */
.dh-account-menu{font-family:inherit!important}
.dh-menu-name,.dh-menu-username{overflow-wrap:anywhere}
.dh-header-display-name{font-size:11px;color:#eaf4fc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px}

@media(max-width:1180px){
  .services{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:820px){
  .shell{width:min(100% - 28px,760px)}
  .public-hero{grid-template-columns:1fr;min-height:auto;padding:42px 0;gap:24px}
  .public-card{max-width:640px}
  .welcome-row{grid-template-columns:1fr}
  .weather{max-width:460px}
  .help-grid,.public-sections,.dashboard-lower{grid-template-columns:1fr}
}
@media(max-width:600px){
  .shell{width:min(100% - 20px,520px)}
  .site-header{height:58px}
  .brand{font-size:13px}
  .brand-mark{width:25px;height:25px}
  .header-link.optional{display:none}
  .page{padding:24px 0 30px}
  h1{font-size:30px}
  .public-hero h1{font-size:39px}
  .public-lead{font-size:13px}
  .public-actions{display:grid;grid-template-columns:1fr}
  .public-actions .btn{width:100%}
  .services{grid-template-columns:1fr;gap:7px}
  .service{min-height:118px;display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:10px;text-align:left;align-items:center;padding:11px 12px}
  .service-icon{grid-row:1/4;margin:0;width:40px;height:40px}
  .service h3{font-size:10.5px;margin:0}
  .service p{font-size:9px;margin-top:2px}
  .service-state{font-size:8px;padding-top:5px;margin-top:0}
  .weather{max-width:none}
  .dh-header-display-name{max-width:100px;font-size:10px}
  .footer{font-size:9px}
}

/* ===== DromeHub dashboard VScreen candidate ===== */
.site-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
}
.site-header .header-left,
.site-header .header-right{
  display:flex;
  align-items:center;
  gap:1rem;
}
.dh-header-welcome{
  color:rgba(255,255,255,.86);
  font-size:.96rem;
  letter-spacing:.01em;
}
.hero-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:1.25rem;
  margin:1.1rem 0 1.25rem;
}
.activity-screen{
  position:relative;
  min-height:228px;
  padding:13px;
  overflow:hidden;

  border:1px solid rgba(56,104,136,.78);
  border-radius:11px;

  background:
    linear-gradient(145deg,#142b3a 0%,#0c1b27 45%,#07121c 100%);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 -1px 0 rgba(0,0,0,.55),
    0 5px 16px rgba(0,0,0,.24);
}

/* recessed instrument bezel */
.activity-screen::before{
  content:"";
  position:absolute;
  inset:7px;
  border:1px solid rgba(61,118,154,.48);
  border-radius:7px;
  box-shadow:
    inset 0 0 0 2px rgba(2,8,13,.68),
    inset 0 0 18px rgba(0,0,0,.38);
  pointer-events:none;
}

.vscreen-head,
.vscreen-body{
  position:relative;
  z-index:2;
}

.vscreen-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:1rem;

  padding:11px 12px 9px;
  margin:0;

  border-bottom:1px solid rgba(68,156,198,.22);

  background:
    linear-gradient(
      180deg,
      rgba(7,25,37,.96),
      rgba(4,17,27,.94)
    );
}

.vscreen-eyebrow{
  margin-bottom:3px;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;

  font-size:.64rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.17em;

  color:rgba(113,196,226,.72);
}

.vscreen-title{
  margin:0;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;

  font-size:.96rem;
  font-weight:650;
  letter-spacing:.025em;

  color:#d9f3ff;
}

.vscreen-legend{
  align-self:center;

  max-width:45%;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;

  font-size:.62rem;
  letter-spacing:.08em;
  text-align:right;

  color:rgba(126,186,210,.60);
}

.vscreen-body{
  display:grid;
  gap:0;

  min-height:145px;

  padding:5px 8px 8px;

  overflow:hidden;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;

  background:
    repeating-linear-gradient(
      0deg,
      rgba(88,180,213,.018) 0px,
      rgba(88,180,213,.018) 1px,
      transparent 1px,
      transparent 4px
    ),
    radial-gradient(
      ellipse at center,
      rgba(22,89,111,.13),
      transparent 72%
    ),
    linear-gradient(
      180deg,
      #04121c 0%,
      #030d15 100%
    );

  box-shadow:
    inset 0 0 20px rgba(0,0,0,.48);
}

.vscreen-row{
  display:grid;

  grid-template-columns:
    16px
    54px
    minmax(0,1.45fr)
    minmax(0,.95fr)
    54px;

  align-items:center;
  gap:8px;

  min-height:28px;
  padding:4px 5px;

  border:0;
  border-bottom:1px solid rgba(80,174,207,.10);
  border-radius:0;

  background:transparent;

  color:#badbe8;
  text-decoration:none;

  transition:
    background .11s ease,
    color .11s ease;
}

.vscreen-row:last-child{
  border-bottom:0;
}

.vscreen-row:hover,
.vscreen-row:focus-visible{
  outline:none;

  background:
    linear-gradient(
      90deg,
      rgba(36,157,194,.12),
      rgba(36,157,194,.025)
    );

  color:#e5f8ff;
}

.vscreen-row:first-child{
  background:
    linear-gradient(
      90deg,
      rgba(38,180,218,.10),
      rgba(38,180,218,.018)
    );
}

.vscreen-marker{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  color:#3fdcff;

  font-size:.76rem;
  font-weight:800;

  text-shadow:
    0 0 5px rgba(63,220,255,.35);
}

.vscreen-source{
  overflow:hidden;
  white-space:nowrap;

  color:#73c9e6;

  font-size:.61rem;
  font-weight:700;
  letter-spacing:.075em;
}

.vscreen-name,
.vscreen-path{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.vscreen-name{
  color:#d9edf5;

  font-size:.69rem;
  font-weight:600;
}

.vscreen-path{
  color:rgba(151,190,205,.56);

  font-size:.60rem;
}

.vscreen-time{
  color:rgba(166,202,215,.55);

  font-size:.60rem;
  text-align:right;
  white-space:nowrap;
}

.vscreen-empty{
  min-height:132px;

  display:flex;
  align-items:center;
  justify-content:center;

  color:rgba(141,190,208,.58);

  font-size:.68rem;
  letter-spacing:.04em;

  border:0;
  border-radius:0;
}

@media(max-width:760px){
  .activity-screen{
    padding:10px;
  }

  .vscreen-head{
    padding:9px 9px 8px;
  }

  .vscreen-legend{
    display:none;
  }

  .vscreen-body{
    padding:4px 5px 6px;
  }

  .vscreen-row{
    grid-template-columns:
      14px
      49px
      minmax(0,1fr)
      45px;

    gap:6px;
  }

  .vscreen-path{
    display:none;
  }

  .vscreen-source,
  .vscreen-name,
  .vscreen-time{
    font-size:.58rem;
  }
}
.dashboard-lower{
  display:grid;
  grid-template-columns:1fr;
  margin-top:1.15rem;
}
.quick-access-panel .quick{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
}
.dashboard-tagline{
  margin-top:1rem;
  padding-top:.85rem;
  border-top:1px solid rgba(85,145,205,.25);
  color:rgba(255,255,255,.64);
  font-size:.92rem;
}
@media (max-width: 980px){
  .hero-row{
    grid-template-columns:1fr;
  }
}
@media (max-width: 760px){
  .site-header{
    flex-wrap:wrap;
  }
  .site-header .header-left,
  .site-header .header-right{
    width:100%;
    justify-content:space-between;
  }
  .vscreen-row{
    grid-template-columns:1.2rem 4.6rem minmax(0,1fr) auto;
  }
  .vscreen-path{
    display:none;
  }
}

/* ============================================================
   DromeHub Basic Interface — Mobile usability baseline
   ============================================================ */

@media(max-width:600px){

  body{
    font-size:16px;
  }

  .page{
    padding-top:26px;
  }

  .section-head{
    margin-top:30px;
    margin-bottom:14px;
  }

  .section-head h2{
    font-size:20px;
  }

  .section-head .subtitle{
    font-size:16px;
  }

  .service{
    min-height:150px;
    grid-template-columns:64px minmax(0,1fr);
    column-gap:16px;
    padding:18px 16px;
    border-radius:14px;
  }

  .service-icon{
    width:56px;
    height:56px;
  }

  .service-icon svg{
    width:29px;
    height:29px;
  }

  .service h3{
    font-size:16px;
    line-height:1.25;
  }

  .service p{
    font-size:14px;
    line-height:1.45;
    margin-top:5px;
  }

  .service-state{
    font-size:13px;
    padding-top:10px;
  }

  .weather{
    padding:20px;
  }

  .weather-title{
    font-size:14px;
  }

  .weather-main{
    font-size:28px;
  }

  .weather-detail{
    font-size:14px;
    line-height:1.5;
  }

  .quick a,
  .btn,
  button{
    min-height:46px;
    padding-left:14px;
    padding-right:14px;
    font-size:15px;
  }

  input,
  textarea,
  select{
    min-height:46px;
    font-size:16px;
  }

  .vscreen-eyebrow{
    font-size:.72rem;
  }

  .vscreen-title{
    font-size:1rem;
  }

  .vscreen-row{
    min-height:38px;
  }

  .vscreen-source{
    font-size:.68rem;
  }

  .vscreen-name{
    font-size:.76rem;
  }

  .vscreen-time{
    font-size:.66rem;
  }

  .dh-header-welcome{
    font-size:.85rem;
  }
}


/* ============================================================
   DromeWeather v1
   ============================================================ */

.weather-card-link{
  color:inherit;
  text-decoration:none;
  cursor:pointer;
  transition:
    border-color .14s ease,
    transform .12s ease;
}

.weather-card-link:hover,
.weather-card-link:focus-visible{
  border-color:#3d7fa7;
  outline:none;
  transform:translateY(-1px);
}

.weather-open-detail{
  margin-top:10px;
  color:#74bfe7;
  font-size:11px;
}

.weather-page{
  max-width:1180px;
}

.weather-page-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:18px;
}

.weather-location-name{
  color:#9fd6ef;
  font-size:15px;
  font-weight:650;
  text-align:right;
}

.weather-location-panel{
  padding:18px;
  margin-bottom:14px;
}

.weather-location-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:18px;
}

.weather-search{
  max-width:720px;
}

.weather-search label{
  display:block;
  margin-bottom:7px;
  font-size:13px;
  font-weight:650;
}

.weather-search-line{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:9px;
}

.weather-search-results{
  display:grid;
  gap:5px;
  margin-top:8px;
}

.weather-location-result{
  width:100%;
  min-height:42px;
  padding:9px 12px;
  text-align:left;
  border:1px solid var(--line);
  border-radius:7px;
  background:#071722;
  color:#dcecf7;
  cursor:pointer;
}

.weather-location-result:hover{
  border-color:#3186b8;
}

.weather-current-panel{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:24px;
  align-items:center;
  padding:22px;
  margin-bottom:14px;
}

.weather-page-label{
  color:#79b9d7;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em;
  margin-bottom:5px;
}

.weather-current-main{
  font-size:32px;
  font-weight:720;
}

.weather-current-detail{
  margin-top:7px;
  color:#9db4c5;
  font-size:14px;
}

.weather-current-stats{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
}

.weather-stat{
  min-width:108px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#071722;
}

.weather-stat span,
.weather-stat strong{
  display:block;
}

.weather-stat span{
  color:#829fb2;
  font-size:10px;
  margin-bottom:4px;
}

.weather-stat strong{
  font-size:15px;
}

.weather-detail-grid{
  display:grid;
  grid-template-columns:1.35fr .85fr;
  gap:12px;
}

.weather-detail-panel{
  padding:18px;
  overflow:hidden;
}

.weather-detail-panel h2{
  margin-bottom:12px;
}

.weather-hourly,
.weather-daily{
  display:grid;
  gap:0;
}

.weather-hour-row{
  display:grid;
  grid-template-columns:
    64px minmax(100px,1fr)
    48px 78px 100px 54px 54px;
  gap:8px;
  align-items:center;
  min-height:39px;
  padding:6px 4px;
  border-bottom:1px solid rgba(80,145,180,.13);
  font-size:11px;
}

.weather-day-row{
  display:grid;
  grid-template-columns:
    86px minmax(90px,1fr)
    72px 70px 92px minmax(120px,1fr);
  gap:7px;
  align-items:center;
  min-height:43px;
  padding:7px 4px;
  border-bottom:1px solid rgba(80,145,180,.13);
  font-size:11px;
}

.weather-hour-row span,
.weather-day-row span{
  color:#9cb4c5;
}

.weather-provider-note{
  margin-top:12px;
  color:#6f8da0;
  font-size:10px;
}

@media(max-width:900px){
  .weather-detail-grid{
    grid-template-columns:1fr;
  }

  .weather-hourly,
  .weather-daily{
    overflow-x:auto;
  }

  .weather-hour-row{
    min-width:700px;
  }

  .weather-day-row{
    min-width:650px;
  }
}

@media(max-width:600px){
  .weather-page-head{
    align-items:flex-start;
    flex-direction:column;
  }

  .weather-location-name{
    text-align:left;
    font-size:16px;
  }

  .weather-location-panel,
  .weather-current-panel,
  .weather-detail-panel{
    padding:16px;
  }

  .weather-search-line{
    grid-template-columns:1fr;
  }

  .weather-current-panel{
    grid-template-columns:1fr;
  }

  .weather-current-main{
    font-size:30px;
  }

  .weather-current-detail{
    font-size:15px;
    line-height:1.5;
  }

  .weather-current-stats{
    justify-content:flex-start;
  }

  .weather-stat{
    min-width:130px;
  }

  .weather-open-detail{
    font-size:14px;
  }
}


/* ============================================================
   DromeWeather v1.1 — responsive/readability polish
   ============================================================ */

.weather-page{
  width:100%;
  max-width:1180px;
  min-width:0;
}

.weather-page-head{
  min-width:0;
}

.weather-page-head > div{
  min-width:0;
}

.weather-location-name{
  max-width:46%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.weather-location-panel,
.weather-current-panel,
.weather-detail-panel{
  min-width:0;
  overflow:hidden;
}

.weather-current-panel{
  grid-template-columns:minmax(0,1fr) minmax(180px,auto);
}

.weather-current-stats{
  max-width:340px;
}

.weather-detail-grid{
  min-width:0;
}

.weather-detail-panel{
  min-width:0;
}

.weather-hourly,
.weather-daily{
  width:100%;
  min-width:0;
}

.weather-hour-row{
  grid-template-columns:
    58px
    minmax(90px,1fr)
    42px
    68px
    88px
    44px
    48px;

  font-size:11.5px;
}

.weather-day-row{
  grid-template-columns:
    78px
    minmax(80px,1fr)
    66px
    64px
    80px
    minmax(116px,1fr);

  font-size:11.5px;
}

@media(max-width:1050px){

  .weather-detail-grid{
    grid-template-columns:1fr;
  }

  .weather-location-name{
    max-width:50%;
  }
}

@media(max-width:760px){

  .weather-page-head{
    align-items:flex-start;
    flex-direction:column;
  }

  .weather-location-name{
    max-width:100%;
    width:100%;
    text-align:left;
    white-space:normal;
  }

  .weather-current-panel{
    grid-template-columns:1fr;
  }

  .weather-current-stats{
    max-width:none;
    justify-content:flex-start;
  }

  .weather-stat{
    flex:1 1 120px;
  }

  .weather-detail-panel{
    overflow-x:auto;
  }

  .weather-hour-row{
    min-width:660px;
  }

  .weather-day-row{
    min-width:620px;
  }
}

@media(max-width:600px){

  .weather-page h1{
    font-size:32px;
  }

  .weather-search-line{
    display:grid;
    grid-template-columns:1fr;
  }

  .weather-search-line .btn{
    width:100%;
  }

  .weather-location-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .weather-location-actions .btn{
    width:100%;
  }

  .weather-current-main{
    font-size:29px;
  }

  .weather-current-stats{
    display:grid;
    grid-template-columns:1fr 1fr;
    width:100%;
  }

  .weather-stat{
    min-width:0;
  }
}


.weather-card-link{
  min-height:228px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.weather-card-link .weather-main{
  font-size:24px;
}

.weather-card-link .weather-detail{
  font-size:12px;
  line-height:1.5;
}

.weather-card-link .weather-open-detail{
  margin-top:12px;
  font-weight:600;
}


/* DromeHub dashboard — Weather-first hero order */

.hero-row{
  grid-template-columns:300px minmax(0,1fr);
}

.weather-card-link{
  order:1;
}

.activity-screen{
  order:2;
}

@media(max-width:980px){
  .hero-row{
    grid-template-columns:1fr;
  }

  .weather-card-link{
    order:1;
  }

  .activity-screen{
    order:2;
  }
}


/* ============================================================
   DromeHub Basic Interface — Desktop readability baseline
   ============================================================ */

@media(min-width:601px){

  body{
    font-size:16px;
  }

  .site-header{
    font-size:15px;
  }

  .header-link{
    font-size:14px;
  }

  .dh-header-welcome{
    font-size:14px;
  }

  .dh-header-display-name{
    font-size:14px;
    max-width:220px;
  }

  .section-head{
    margin-top:30px;
    margin-bottom:13px;
  }

  .section-head h2{
    font-size:19px;
  }

  .section-head .subtitle{
    font-size:14px;
  }

  .service{
    min-height:176px;
    padding:17px 13px 14px;
  }

  .service-icon{
    width:48px;
    height:48px;
  }

  .service-icon svg{
    width:26px;
    height:26px;
  }

  .service h3{
    font-size:15px;
    line-height:1.3;
    margin-bottom:7px;
  }

  .service p{
    font-size:12.5px;
    line-height:1.5;
  }

  .service-state{
    font-size:11.5px;
    padding-top:11px;
  }

  .quick-access-panel{
    padding:18px;
  }

  .small-panel h3,
  .quick-access-panel h3{
    font-size:15px;
  }

  .small-panel p,
  .quick-access-panel p{
    font-size:12.5px;
    line-height:1.5;
  }

  .quick{
    gap:9px;
  }

  .quick a{
    min-height:38px;
    display:inline-flex;
    align-items:center;
    padding:9px 12px;
    font-size:12.5px;
  }

  .weather-title{
    font-size:12px;
  }

  .weather-main{
    font-size:26px;
  }

  .weather-detail{
    font-size:12px;
    line-height:1.5;
  }

  .weather-open-detail{
    font-size:12px;
  }

  .vscreen-eyebrow{
    font-size:.72rem;
  }

  .vscreen-title{
    font-size:1.05rem;
  }

  .vscreen-legend{
    font-size:.68rem;
  }

  .vscreen-row{
    min-height:32px;
  }

  .vscreen-source{
    font-size:.68rem;
  }

  .vscreen-name{
    font-size:.76rem;
  }

  .vscreen-path{
    font-size:.66rem;
  }

  .vscreen-time{
    font-size:.66rem;
  }

  .dashboard-tagline{
    font-size:13px;
  }

  .footer{
    font-size:11.5px;
  }
}


/* ============================================================
   DromeHub Basic Interface — Button readability pass
   ============================================================ */

.btn,
button,
.quick a{
  font-size:14px;
  font-weight:650;
}

.quick a{
  min-height:42px;
  padding:10px 14px;
}

@media(min-width:601px){
  .btn,
  button,
  .quick a{
    font-size:14px;
  }
}

@media(max-width:600px){
  .btn,
  button,
  .quick a{
    font-size:16px;
    min-height:48px;
  }
}


/* DromeHub service-card readability */

@media(min-width:601px){

  .service h3{
    font-size:17px;
    line-height:1.3;
  }

  .service p{
    font-size:14px;
    line-height:1.5;
  }

  .service-state{
    font-size:12.5px;
  }
}

@media(max-width:600px){

  .service h3{
    font-size:18px;
  }

  .service p{
    font-size:15px;
  }

  .service-state{
    font-size:14px;
  }
}


/* ============================================================
   DromeWeather — sky / moon display
   ============================================================ */

.weather-current-line{
  display:flex;
  align-items:center;
  gap:13px;
  margin-top:7px;
}

.weather-sky-icon{
  width:48px;
  height:48px;
  flex:0 0 48px;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:36px;
  line-height:1;

  filter:
    drop-shadow(0 0 6px rgba(130,205,240,.16));
}

.weather-moon-phase{
  margin-top:2px;

  color:#a8cbe0;

  font-size:11px;
  font-weight:600;
  letter-spacing:.03em;
}

@media(max-width:600px){

  .weather-current-line{
    gap:15px;
  }

  .weather-sky-icon{
    width:58px;
    height:58px;
    flex-basis:58px;
    font-size:44px;
  }

  .weather-moon-phase{
    font-size:14px;
  }
}


/* ============================================================
   DromeHub Basic Interface
   Unified Adaptive VScreen + Tactile Service Control Deck
   ============================================================ */

/* ---------- Unified instrument chassis ---------- */

.hero-row.unified-vscreen-wrap{
  display:block;
  margin:18px 0 24px;
}

.unified-vscreen{
  position:relative;
  overflow:hidden;

  width:100%;

  padding:12px;

  border:1px solid #31546b;
  border-radius:14px;

  background:
    linear-gradient(
      145deg,
      #172c3a 0%,
      #0d1e2a 47%,
      #07131c 100%
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -2px 3px rgba(0,0,0,.50),
    0 7px 20px rgba(0,0,0,.28);
}

.unified-vscreen::before{
  content:"";

  position:absolute;
  inset:6px;

  border:1px solid rgba(90,150,184,.35);
  border-radius:9px;

  box-shadow:
    inset 0 0 0 2px rgba(2,7,12,.72),
    inset 0 0 26px rgba(0,0,0,.34);

  pointer-events:none;
}

.unified-vscreen-label{
  position:relative;
  z-index:3;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:3px 8px 10px;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;

  font-size:10px;
  font-weight:700;
  letter-spacing:.16em;

  color:#779aad;
}

.unified-vscreen-status{
  color:#65cf9b;

  font-size:9px;
  letter-spacing:.12em;
}

.unified-vscreen-display{
  position:relative;
  z-index:2;

  display:grid;
  grid-template-columns:minmax(270px,330px) minmax(0,1fr);

  min-height:220px;

  overflow:hidden;

  border:1px solid rgba(62,139,177,.36);
  border-radius:7px;

  background:
    repeating-linear-gradient(
      0deg,
      rgba(85,190,220,.018) 0,
      rgba(85,190,220,.018) 1px,
      transparent 1px,
      transparent 4px
    ),
    radial-gradient(
      ellipse at 35% 20%,
      rgba(29,100,127,.13),
      transparent 65%
    ),
    linear-gradient(
      180deg,
      #06151f 0%,
      #030d14 100%
    );

  box-shadow:
    inset 0 0 28px rgba(0,0,0,.52);
}

/* ---------- Shared VScreen zones ---------- */

.vscreen-zone{
  position:relative;
  min-width:0;
}

.weather-zone{
  order:1;

  min-height:100%;

  padding:18px 18px 16px;

  display:flex;
  flex-direction:column;
  justify-content:center;

  border:0;
  border-radius:0;
  border-right:1px solid rgba(72,157,193,.22);

  background:
    linear-gradient(
      110deg,
      rgba(12,40,53,.54),
      rgba(5,22,31,.18)
    );

  box-shadow:none;

  color:inherit;
}

.weather-zone:hover,
.weather-zone:focus-visible{
  transform:none;

  background:
    linear-gradient(
      110deg,
      rgba(16,51,67,.65),
      rgba(5,22,31,.22)
    );

  outline:none;
}

.weather-zone .weather-title{
  color:#75c6e6;
}

.weather-zone .weather-current-line{
  margin-top:12px;
}

.weather-zone .weather-sky-icon{
  width:58px;
  height:58px;
  flex-basis:58px;

  font-size:43px;
}

.weather-zone .weather-main{
  font-size:27px;
}

.weather-zone .weather-detail{
  margin-top:10px;

  font-size:13px;
  line-height:1.5;
}

.weather-zone .weather-open-detail{
  margin-top:14px;

  font-size:12px;
  font-weight:650;

  color:#77c8eb;
}

.recent-zone{
  order:2;

  min-height:100%;

  padding:0;

  overflow:hidden;

  border:0;
  border-radius:0;

  background:transparent;

  box-shadow:none;
}

.recent-zone::before{
  display:none;
}

.recent-zone .vscreen-head{
  padding:13px 14px 10px;

  background:
    linear-gradient(
      180deg,
      rgba(7,28,40,.64),
      rgba(4,18,27,.22)
    );
}

.recent-zone .vscreen-body{
  min-height:158px;

  padding:5px 10px 9px;

  background:transparent;
  box-shadow:none;
}

.recent-zone .vscreen-row{
  min-height:34px;

  grid-template-columns:
    16px
    60px
    minmax(0,1.35fr)
    minmax(0,.9fr)
    58px;

  padding:5px 6px;
}

.recent-zone .vscreen-source{
  font-size:.70rem;
}

.recent-zone .vscreen-name{
  font-size:.78rem;
}

.recent-zone .vscreen-path,
.recent-zone .vscreen-time{
  font-size:.67rem;
}

/* ---------- Service control deck ---------- */

.section-head{
  margin-top:22px;
}

.services{
  gap:12px;
}

.service{
  position:relative;

  min-height:132px;

  padding:13px 12px 12px;

  border:1px solid #2b4b60;
  border-radius:9px;

  background:
    linear-gradient(
      180deg,
      #122938 0%,
      #0a1b27 55%,
      #07141e 100%
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -2px 2px rgba(0,0,0,.48),
    0 3px 7px rgba(0,0,0,.24);

  transform:translateY(0);

  transition:
    transform .08s ease,
    border-color .12s ease,
    filter .12s ease;
}

.service::before{
  content:"";

  position:absolute;
  inset:5px;

  border:1px solid rgba(255,255,255,.025);
  border-radius:6px;

  pointer-events:none;
}

.service.active:hover,
.service.active:focus-visible{
  transform:translateY(-1px);

  border-color:var(--accent);

  filter:brightness(1.08);

  outline:none;
}

.service.active:active{
  transform:translateY(2px);

  box-shadow:
    inset 0 2px 5px rgba(0,0,0,.55),
    0 1px 2px rgba(0,0,0,.24);
}

.service-icon{
  width:43px;
  height:43px;

  margin-bottom:8px;

  border:1px solid var(--accent);

  background:
    radial-gradient(
      circle,
      rgba(255,255,255,.03),
      rgba(0,0,0,.18)
    );

  box-shadow:
    inset 0 0 7px rgba(0,0,0,.30),
    0 0 7px color-mix(
      in srgb,
      var(--accent) 18%,
      transparent
    );
}

.service h3{
  font-size:16px;
}

.service p{
  font-size:13px;
  line-height:1.4;
}

.service-state{
  font-size:11px;
}

.service.unavailable{
  opacity:.50;
  filter:saturate(.30);
}

/* ---------- Secondary controls ---------- */

.dashboard-lower{
  margin-top:14px;
}

.quick-access-panel{
  min-height:0;

  padding:13px 14px;

  background:
    linear-gradient(
      180deg,
      rgba(14,32,44,.82),
      rgba(7,20,29,.92)
    );
}

.quick-access-panel > h3{
  display:inline-block;

  margin-right:12px;

  font-size:13px;
}

.quick-access-panel > p{
  display:none;
}

.quick-access-panel .quick{
  display:inline-flex;

  margin-top:0;

  gap:7px;
}

.quick-access-panel .quick a{
  min-height:34px;

  padding:7px 11px;

  border-radius:6px;

  font-size:12px;

  background:
    linear-gradient(
      180deg,
      #102635,
      #081924
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04);
}

.quick-access-panel .quick a:active{
  transform:translateY(1px);
}

/* ---------- Tablet ---------- */

@media(max-width:900px){

  .unified-vscreen-display{
    grid-template-columns:minmax(240px,290px) minmax(0,1fr);
  }

  .weather-zone{
    padding:16px;
  }

  .recent-zone .vscreen-path{
    display:none;
  }

  .recent-zone .vscreen-row{
    grid-template-columns:
      15px
      56px
      minmax(0,1fr)
      54px;
  }
}

/* ---------- Mobile ---------- */

@media(max-width:680px){

  .hero-row.unified-vscreen-wrap{
    margin-top:12px;
  }

  .unified-vscreen{
    padding:9px;

    border-radius:12px;
  }

  .unified-vscreen-label{
    padding:2px 6px 8px;

    font-size:9px;
  }

  .unified-vscreen-display{
    grid-template-columns:1fr;
  }

  .weather-zone{
    min-height:170px;

    padding:16px;

    border-right:0;
    border-bottom:1px solid rgba(72,157,193,.25);
  }

  .weather-zone .weather-sky-icon{
    width:56px;
    height:56px;
    flex-basis:56px;

    font-size:42px;
  }

  .weather-zone .weather-main{
    font-size:27px;
  }

  .weather-zone .weather-detail{
    font-size:14px;
  }

  .weather-zone .weather-open-detail{
    font-size:13px;
  }

  .recent-zone .vscreen-head{
    padding:12px 11px 9px;
  }

  .recent-zone .vscreen-body{
    padding:5px 7px 8px;
  }

  .recent-zone .vscreen-row{
    min-height:39px;

    grid-template-columns:
      15px
      55px
      minmax(0,1fr)
      48px;

    gap:6px;
  }

  .recent-zone .vscreen-source{
    font-size:.68rem;
  }

  .recent-zone .vscreen-name{
    font-size:.76rem;
  }

  .recent-zone .vscreen-time{
    font-size:.65rem;
  }

  .services{
    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:9px;
  }

  .service{
    min-height:142px;

    display:flex;
    flex-direction:column;

    align-items:center;
    justify-content:flex-start;

    text-align:center;

    padding:14px 10px;
  }

  .service-icon{
    width:48px;
    height:48px;

    margin:0 0 8px;
  }

  .service h3{
    font-size:16px;
  }

  .service p{
    font-size:13px;
  }

  .service-state{
    margin-top:auto;

    font-size:12px;
  }

  .quick-access-panel{
    display:block;
  }

  .quick-access-panel > h3{
    display:block;

    margin-bottom:8px;
  }

  .quick-access-panel .quick{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));

    width:100%;
  }

  .quick-access-panel .quick a{
    min-height:44px;

    justify-content:center;

    font-size:14px;
  }
}

/* DromeWeather location permission recovery */
.weather-location-recovery{
  margin-top:12px;
  padding:13px 14px;
  border:1px solid rgba(240,185,82,.38);
  border-radius:8px;
  background:rgba(63,43,14,.24);
  color:#c8d8e2;
  font-size:13px;
  line-height:1.5;
}

.weather-location-recovery strong{
  display:block;
  margin-bottom:6px;
  color:#f0c16a;
}

.weather-location-recovery .btn{
  margin-top:10px;
}

/* ==========================================================
   DROMEHUB VSCREEN — RIVERDROME INHERITANCE GRAMMAR
   Fixed header / scrollable event body / fixed status footer
   ========================================================== */

.dh-vscreen-fixed-top{
    grid-column:1/-1;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:5px 10px;
    border-bottom:1px solid rgba(38,255,164,.34);
    background:#031510;
    color:#66ffc0;
    font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
    font-size:clamp(11px,1vw,14px);
    font-weight:700;
    line-height:1.2;
    text-shadow:0 0 7px rgba(20,255,160,.36);
    white-space:nowrap;
}

.dh-vscreen-fixed-user{
    overflow:hidden;
    text-overflow:ellipsis;
}

.dh-vscreen-fixed-clock{
    flex:0 0 auto;
    font-variant-numeric:tabular-nums;
}

.dh-event-stream{
    font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
    overflow:auto;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    scrollbar-color:#176f52 #031510;
}

.dh-vscreen-event-line{
    display:grid;
    grid-template-columns:18px minmax(0,1fr);
    gap:3px;
    padding:2px 4px;
    color:#6ee9bc;
    font-size:clamp(10px,.9vw,13px);
    line-height:1.34;
    text-shadow:0 0 5px rgba(44,255,176,.16);
}

.dh-event-marker{
    color:#8dffd2;
    font-weight:800;
}

.dh-event-warning{
    color:#b0ffd8;
    font-weight:750;
}

.dh-event-warning-note{
    color:#75dba9;
}

.dh-event-muted{
    color:#477c68;
}

.dh-vscreen-ack{
    margin:7px 4px 3px 22px;
}

.dh-vscreen-ack button{
    appearance:none;
    border:0;
    padding:2px 0;
    background:transparent;
    color:#8dffd2;
    font:700 clamp(9px,.85vw,12px)/1.3
        ui-monospace,SFMono-Regular,Consolas,monospace;
    text-align:left;
    cursor:pointer;
    text-shadow:0 0 5px rgba(44,255,176,.20);
}

.dh-vscreen-ack button:hover,
.dh-vscreen-ack button:focus-visible{
    color:#d0ffe9;
    outline:none;
    text-decoration:underline;
}

.dh-vscreen-fixed-bottom{
    grid-column:1/-1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    min-width:0;
    padding:4px 8px;
    border-top:1px solid rgba(38,255,164,.28);
    background:#02110d;
    color:#438c70;
    font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
    font-size:clamp(8px,.75vw,11px);
    font-weight:800;
    line-height:1.15;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* CRT hierarchy — static only; no invented blink/fade/ticker. */
.unified-vscreen{
    position:relative;
}

.unified-vscreen::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.08;
    background:
        repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent 2px,
            rgba(67,255,180,.12) 3px
        );
}

@media(max-width:700px){
    .dh-vscreen-fixed-bottom{
        justify-content:flex-start;
    }
}


/* ==========================================================
   DROMEHUB VSCREEN — FIXED CANONICAL GEOMETRY
   Header and footer never move.
   Weather and event viewer remain in preset positions.
   ========================================================== */

.unified-vscreen-display{
    display:grid !important;
    grid-template-columns:minmax(270px,330px) minmax(0,1fr) !important;
    grid-template-rows:auto minmax(0,1fr) auto !important;
    grid-template-areas:
        "vtop    vtop"
        "weather events"
        "vbottom vbottom" !important;
    align-items:stretch;
    min-height:0;
}

.dh-vscreen-fixed-top{
    grid-area:vtop !important;
    position:relative;
    z-index:2;
}

.weather-zone{
    grid-area:weather !important;
    min-width:0;
}

.recent-zone{
    grid-area:events !important;
    min-width:0;
    min-height:0;
}

.dh-event-stream{
    min-height:0;
    overflow:auto;
}

.dh-vscreen-fixed-bottom{
    grid-area:vbottom !important;
    position:relative;
    z-index:2;
    width:100%;
    box-sizing:border-box;
}

/* Same grammar on narrow screens; geometry only changes. */
@media(max-width:700px){
    .unified-vscreen-display{
        grid-template-columns:1fr !important;
        grid-template-rows:auto auto minmax(0,1fr) auto !important;
        grid-template-areas:
            "vtop"
            "weather"
            "events"
            "vbottom" !important;
    }
}


/* ==========================================================
   DROMEHUB VSCREEN — 10-LINE MINIMUM EVENT DENSITY
   ========================================================== */

.recent-zone{
    min-height:0;
}

.recent-zone .vscreen-head{
    padding-bottom:4px;
    margin-bottom:2px;
}

.recent-zone .vscreen-eyebrow{
    margin-bottom:1px;
    font-size:9px;
    line-height:1.1;
}

.recent-zone .vscreen-title{
    margin:0;
    font-size:clamp(17px,1.45vw,27px);
    line-height:1.02;
}

.recent-zone .vscreen-legend{
    font-size:10px;
    line-height:1.15;
}

.dh-event-stream{
    min-height:232px;
    max-height:none;
    overflow:auto;
    padding-top:2px;
    padding-bottom:2px;
}

.dh-vscreen-event-line{
    display:grid;
    grid-template-columns:14px minmax(0,1fr);
    gap:4px;
    padding:1px 4px;
    min-height:18px;
    font-size:clamp(9px,.72vw,11px);
    line-height:1.18;
    align-items:start;
}

.dh-event-marker{
    line-height:1.18;
}

.dh-event-text{
    display:block;
    min-width:0;
    word-break:break-word;
}

.dh-vscreen-ack{
    margin:5px 4px 1px 18px;
}

.dh-vscreen-ack button{
    font-size:clamp(9px,.72vw,11px);
    line-height:1.18;
    padding:1px 0;
}

@media (max-width: 1100px){
    .dh-event-stream{
        min-height:220px;
    }

    .dh-vscreen-event-line{
        min-height:17px;
        font-size:10px;
    }
}


/* ==========================================================
   DROMEHUB VSCREEN — PROMINENT FOOTER ACK ACTION
   ========================================================== */

.dh-vscreen-fixed-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    position:relative;
    z-index:3;
}

.dh-vscreen-footer-status{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    min-width:0;
    flex:1 1 auto;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.dh-vscreen-footer-action{
    flex:0 0 auto;
    margin:0;
    position:relative;
    z-index:4;
}

.dh-vscreen-footer-action button{
    appearance:none;
    border:1px solid rgba(255,210,90,.95);
    border-radius:0;
    background:rgba(90,55,0,.92);
    color:#ffe38f;
    padding:3px 10px;
    font:800 clamp(9px,.78vw,12px)/1.15
        ui-monospace,SFMono-Regular,Consolas,monospace;
    letter-spacing:.03em;
    text-transform:uppercase;
    cursor:pointer;
    pointer-events:auto;
    box-shadow:
        0 0 0 1px rgba(255,190,60,.16) inset,
        0 0 8px rgba(255,190,60,.18);
}

.dh-vscreen-footer-action button:hover,
.dh-vscreen-footer-action button:focus-visible{
    background:rgba(130,75,0,.96);
    color:#fff1b8;
    outline:1px solid rgba(255,232,160,.95);
    outline-offset:1px;
}

@media(max-width:900px){
    .dh-vscreen-fixed-bottom{
        flex-wrap:wrap;
        justify-content:center;
    }

    .dh-vscreen-footer-status{
        flex:1 1 100%;
        justify-content:center;
    }
}


/* ==========================================================
   DROMEHUB VSCREEN — CLOUDDROME STORAGE GADGET
   ========================================================== */

.unified-vscreen-display{
    grid-template-rows:auto auto minmax(0,1fr) auto !important;
    grid-template-areas:
        "vtop    vtop"
        "weather events"
        "storage events"
        "vbottom vbottom" !important;
}

.dh-storage-zone{
    grid-area:storage !important;
    min-width:0;
    padding:8px 14px 10px;
    border-top:1px solid rgba(40,180,160,.22);
    background:
        linear-gradient(
            180deg,
            rgba(2,20,25,.72),
            rgba(1,14,18,.82)
        );
    font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
}

.dh-storage-title{
    color:#55bdd3;
    font-size:10px;
    font-weight:800;
    letter-spacing:.08em;
}

.dh-storage-values{
    display:flex;
    align-items:baseline;
    gap:5px;
    margin-top:5px;
    color:#7fffd0;
    font-size:12px;
    font-weight:800;
    font-variant-numeric:tabular-nums;
}

.dh-storage-meter{
    position:relative;
    height:7px;
    margin-top:6px;
    border:1px solid rgba(47,210,160,.55);
    background:#02120f;
    overflow:hidden;
}

.dh-storage-meter-fill{
    display:block;
    height:100%;
    min-width:1px;
    max-width:100%;
    background:#36d99b;
    box-shadow:0 0 6px rgba(54,217,155,.42);
}

.dh-storage-percent{
    margin-top:4px;
    color:#478e74;
    font-size:9px;
    font-weight:700;
    font-variant-numeric:tabular-nums;
}

@media(max-width:700px){
    .unified-vscreen-display{
        grid-template-columns:1fr !important;
        grid-template-rows:auto auto auto minmax(0,1fr) auto !important;
        grid-template-areas:
            "vtop"
            "weather"
            "storage"
            "events"
            "vbottom" !important;
    }
}


/* ==========================================================
   DROMEHUB MOBILE — SUPERADMIN / NORMAL DASHBOARD SCROLL FIX
   Same base UI. VScreen bounded. Page remains scrollable.
   ========================================================== */

@media(max-width:700px){

    html,
    body{
        height:auto !important;
        min-height:100% !important;
        overflow-x:hidden !important;
        overflow-y:auto !important;
    }

    body{
        position:static !important;
    }

    .shell,
    .page,
    main.page{
        height:auto !important;
        min-height:0 !important;
        max-height:none !important;
        overflow:visible !important;
    }

    .hero-row,
    .unified-vscreen-wrap{
        height:auto !important;
        min-height:0 !important;
        max-height:none !important;
        overflow:visible !important;
    }

    .unified-vscreen{
        height:auto !important;
        min-height:0 !important;
        max-height:62vh !important;
        overflow:hidden !important;
        display:flex !important;
        flex-direction:column !important;
    }

    .unified-vscreen-label{
        flex:0 0 auto !important;
    }

    .unified-vscreen-display{
        flex:1 1 auto !important;
        min-height:0 !important;
        max-height:calc(62vh - 28px) !important;
        overflow:hidden !important;

        grid-template-columns:1fr !important;
        grid-template-rows:
            auto
            auto
            auto
            minmax(120px,1fr)
            auto !important;

        grid-template-areas:
            "vtop"
            "weather"
            "storage"
            "events"
            "vbottom" !important;
    }

    .dh-vscreen-fixed-top,
    .dh-vscreen-fixed-bottom{
        flex:0 0 auto !important;
    }

    .weather-zone{
        min-height:0 !important;
        max-height:150px !important;
        overflow:hidden !important;
        padding-top:8px !important;
        padding-bottom:8px !important;
    }

    .weather-zone .weather-current-line{
        margin-top:4px !important;
        margin-bottom:4px !important;
    }

    .weather-zone .weather-sky-icon{
        width:42px !important;
        height:42px !important;
        font-size:32px !important;
    }

    .weather-zone .weather-main{
        font-size:clamp(20px,7vw,30px) !important;
    }

    .weather-zone .weather-detail,
    .weather-zone .weather-open-detail{
        font-size:11px !important;
        line-height:1.2 !important;
    }

    .dh-storage-zone{
        min-height:0 !important;
        padding:6px 10px !important;
    }

    .recent-zone{
        min-height:0 !important;
        overflow:hidden !important;
    }

    .recent-zone .vscreen-head{
        flex:0 0 auto !important;
    }

    .dh-event-stream{
        min-height:110px !important;
        max-height:none !important;
        overflow-y:auto !important;
        overflow-x:hidden !important;
        overscroll-behavior:contain !important;
        -webkit-overflow-scrolling:touch;
    }

    .services,
    .quick-access,
    .dashboard-lower,
    .section-head{
        position:relative !important;
        z-index:1 !important;
    }

    .services{
        margin-top:10px !important;
    }

    .dh-vscreen-footer-status{
        font-size:8px !important;
        gap:4px !important;
    }

    .dh-vscreen-footer-action button{
        font-size:9px !important;
        padding:3px 7px !important;
    }
}

/* Short-phone safeguard. */
@media(max-width:700px) and (max-height:760px){
    .unified-vscreen{
        max-height:58vh !important;
    }

    .unified-vscreen-display{
        max-height:calc(58vh - 28px) !important;
    }

    .weather-zone{
        max-height:125px !important;
    }
}

/* COMMAND-102 — flagship VScreen identity + bounded information surface */
.dh-vscreen-identity-band{
    grid-column:1 / -1;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    min-height:72px;
    padding:8px 12px;
    border-bottom:1px solid rgba(74,255,179,.22);
    background:linear-gradient(180deg,rgba(7,28,25,.76),rgba(2,18,17,.38));
    position:relative;
    z-index:4;
}
.dh-vscreen-brand{min-width:0;display:flex;align-items:center;gap:10px;font-size:17px;color:#eafdf6}
.dh-vscreen-brand .brand-mark{width:36px;height:36px;flex:0 0 36px}
.dh-vscreen-avatar{min-width:0;display:flex;align-items:center;justify-content:flex-end}
.dh-vscreen-avatar .dh-account-menu{margin:0}
.dh-vscreen-avatar .dh-header-welcome,
.dh-vscreen-avatar .dh-header-display-name{display:none!important}
.dh-vscreen-avatar img,
.dh-vscreen-avatar .avatar,
.dh-vscreen-avatar [class*="avatar"]{
    width:54px!important;height:54px!important;
    max-width:54px!important;max-height:54px!important;
    object-fit:cover
}
.recent-zone{min-height:0!important;overflow:hidden!important}
.dh-event-stream{
    min-height:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
    -webkit-overflow-scrolling:touch;
    touch-action:none;
}
.dh-vscreen-event-line{flex:0 0 auto}
.dh-vscreen-event-line.dh-event-actionable{cursor:pointer}
.dh-vscreen-event-line.dh-event-actionable:focus-visible{outline:1px solid currentColor;outline-offset:-1px}
.dh-event-stream.dh-longtouch-scroll{cursor:ns-resize;user-select:none}
@media(max-width:700px){
  .dh-vscreen-identity-band{min-height:64px;padding:6px 9px;gap:10px}
  .dh-vscreen-brand{font-size:15px;gap:8px}
  .dh-vscreen-brand .brand-mark{width:32px;height:32px;flex-basis:32px}
  .dh-vscreen-avatar img,
  .dh-vscreen-avatar .avatar,
  .dh-vscreen-avatar [class*="avatar"]{
      width:48px!important;height:48px!important;
      max-width:48px!important;max-height:48px!important
  }
}

/* COMMAND-103 — mobile flagship VScreen correction */

.dh-event-stream{
    touch-action:none !important;
}

/*
 * Mobile VScreen hierarchy:
 * frame label
 * identity band
 * frozen user/date
 * information instruments
 * event stream
 * frozen status
 */
@media(max-width:700px){

    .shell{
        padding-top:0 !important;
    }

    .page{
        padding-top:4px !important;
        margin-top:0 !important;
    }

    .hero-row.unified-vscreen-wrap{
        margin-top:0 !important;
        padding-top:0 !important;
    }

    .unified-vscreen{
        margin-top:0 !important;
    }

    .dh-vscreen-identity-band{
        order:0 !important;
    }

    .dh-vscreen-fixed-top{
        order:1 !important;
    }

    .weather-zone{
        order:2 !important;
    }

    .dh-storage-zone{
        order:3 !important;
    }

    .recent-zone{
        order:4 !important;
    }

    .dh-vscreen-fixed-bottom{
        order:5 !important;
    }

    /*
     * Identity band is intentionally compact:
     * logo left, avatar right.
     */
    .dh-vscreen-identity-band{
        min-height:64px !important;
        padding:6px 10px !important;
    }

    .dh-vscreen-brand{
        align-self:center;
    }

    .dh-vscreen-avatar{
        align-self:center;
    }
}

/* COMMAND-105 — canonical VScreen structural grid */

.dh-vscreen-identity-band{
    grid-area:identity !important;
}

/*
 * Canonical desktop/tablet VScreen:
 * identity + frozen header span the full screen,
 * instruments occupy the left column,
 * event surface occupies the right,
 * fixed status spans the bottom.
 */
.unified-vscreen-display{
    grid-template-columns:
        minmax(270px,330px)
        minmax(0,1fr) !important;

    grid-template-rows:
        auto
        auto
        auto
        minmax(0,1fr)
        auto !important;

    grid-template-areas:
        "identity identity"
        "vtop     vtop"
        "weather  events"
        "storage  events"
        "vbottom  vbottom" !important;
}

/*
 * Canonical phone VScreen:
 * physical vertical order is explicit.
 */
@media(max-width:700px){

    .unified-vscreen-display{
        grid-template-columns:1fr !important;

        grid-template-rows:
            auto
            auto
            auto
            auto
            minmax(0,1fr)
            auto !important;

        grid-template-areas:
            "identity"
            "vtop"
            "weather"
            "storage"
            "events"
            "vbottom" !important;
    }

    .dh-vscreen-identity-band{
        order:initial !important;
    }

    .dh-vscreen-fixed-top,
    .weather-zone,
    .dh-storage-zone,
    .recent-zone,
    .dh-vscreen-fixed-bottom{
        order:initial !important;
    }
}

/* COMMAND-106 — compact circular identity-band avatar */

.dh-vscreen-identity-band{
    align-items:center !important;
}

.dh-vscreen-avatar{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    min-width:0;
}

/*
 * Hide duplicate text beside the avatar inside the identity band.
 * The frozen line below remains the authoritative username display.
 */
.dh-vscreen-avatar .dh-account-menu,
.dh-vscreen-avatar [class*="account-menu"]{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:0 !important;
    font-size:0 !important;
    line-height:0 !important;
}

.dh-vscreen-avatar .dh-header-welcome,
.dh-vscreen-avatar .dh-header-display-name,
.dh-vscreen-avatar .dh-account-name,
.dh-vscreen-avatar .dh-account-label,
.dh-vscreen-avatar .dh-account-text,
.dh-vscreen-avatar .dh-account-trigger-label,
.dh-vscreen-avatar .dh-account-trigger-text,
.dh-vscreen-avatar .dh-account-display-name{
    display:none !important;
}

/*
 * Make the identity avatar compact and circular again.
 * Roughly two text lines tall.
 */
.dh-vscreen-avatar img,
.dh-vscreen-avatar .avatar,
.dh-vscreen-avatar .dh-avatar,
.dh-vscreen-avatar [class*="avatar"]{
    width:46px !important;
    height:46px !important;
    max-width:46px !important;
    max-height:46px !important;
    min-width:46px !important;
    min-height:46px !important;
    border-radius:50% !important;
    object-fit:cover !important;
    aspect-ratio:1 / 1 !important;
    overflow:hidden !important;
}

.dh-vscreen-avatar button,
.dh-vscreen-avatar a{
    min-height:46px !important;
    padding:0 !important;
    gap:0 !important;
}

@media(max-width:700px){
    .dh-vscreen-identity-band{
        min-height:58px !important;
        padding:6px 10px !important;
    }

    .dh-vscreen-avatar img,
    .dh-vscreen-avatar .avatar,
    .dh-vscreen-avatar .dh-avatar,
    .dh-vscreen-avatar [class*="avatar"]{
        width:42px !important;
        height:42px !important;
        max-width:42px !important;
        max-height:42px !important;
        min-width:42px !important;
        min-height:42px !important;
    }

    .dh-vscreen-avatar button,
    .dh-vscreen-avatar a{
        min-height:42px !important;
    }
}

/* COMMAND-107 — remove duplicate identity-band account name */

.dh-vscreen-avatar{
    font-size:0 !important;
    line-height:0 !important;
}

.dh-vscreen-avatar *{
    font-size:0 !important;
    line-height:0 !important;
}

/*
 * Restore only the visual avatar itself.
 */
.dh-vscreen-avatar img,
.dh-vscreen-avatar .avatar,
.dh-vscreen-avatar .dh-avatar,
.dh-vscreen-avatar [class*="avatar"]{
    display:block !important;
    font-size:initial !important;
    line-height:normal !important;
}

/*
 * Hide common text-bearing descendants while keeping the
 * account control clickable.
 */
.dh-vscreen-avatar span:not(.avatar):not(.dh-avatar),
.dh-vscreen-avatar strong,
.dh-vscreen-avatar small,
.dh-vscreen-avatar .dh-menu-name,
.dh-vscreen-avatar .dh-menu-username,
.dh-vscreen-avatar .dh-header-display-name{
    display:none !important;
}

.dh-vscreen-avatar button,
.dh-vscreen-avatar a{
    width:42px !important;
    min-width:42px !important;
    max-width:42px !important;
    height:42px !important;
    min-height:42px !important;
    max-height:42px !important;
    padding:0 !important;
    margin:0 !important;
    overflow:hidden !important;
    border-radius:50% !important;
}

/* COMMAND-112 — surgical VScreen avatar restoration */

/*
 * Undo COMMAND-107 blanket suppression inside this container.
 */
.dh-vscreen-avatar,
.dh-vscreen-avatar *{
    font-size:initial !important;
    line-height:normal !important;
}

/*
 * Real identity hierarchy:
 * .dh-account > details > summary > .dh-avatar
 */
.dh-vscreen-avatar .dh-account{
    position:relative !important;
    display:inline-flex !important;
}

.dh-vscreen-avatar .dh-account details{
    position:relative !important;
    display:inline-block !important;
    width:auto !important;
    height:auto !important;
    min-width:0 !important;
    min-height:0 !important;
    max-width:none !important;
    max-height:none !important;
    overflow:visible !important;
}

.dh-vscreen-avatar .dh-account summary{
    display:flex !important;
    align-items:center !important;
    width:auto !important;
    height:auto !important;
    min-width:0 !important;
    min-height:0 !important;
    max-width:none !important;
    max-height:none !important;
    padding:0 !important;
    margin:0 !important;
    overflow:visible !important;
    border-radius:50% !important;
}

/* Exact avatar node from app/identity.php */
.dh-vscreen-avatar .dh-avatar{
    display:block !important;
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    min-height:42px !important;
    max-width:42px !important;
    max-height:42px !important;
    flex:0 0 42px !important;
    border-radius:50% !important;
    overflow:hidden !important;
    background-position:center !important;
    background-repeat:no-repeat !important;
    background-size:cover !important;
}

/*
 * Restore the native account dropdown fully.
 */
.dh-vscreen-avatar .dh-account-menu{
    display:block !important;
    width:230px !important;
    height:auto !important;
    min-width:0 !important;
    max-width:none !important;
    max-height:none !important;
    padding:14px !important;
    overflow:visible !important;
    font-size:initial !important;
    line-height:normal !important;
}

.dh-vscreen-avatar .dh-account-menu *{
    font-size:inherit !important;
    line-height:normal !important;
}

.dh-vscreen-avatar .dh-account-menu .dh-menu-name{
    display:block !important;
    font-weight:700 !important;
}

.dh-vscreen-avatar .dh-account-menu .dh-menu-username{
    display:block !important;
}

.dh-vscreen-avatar .dh-account-menu a{
    display:block !important;
    width:auto !important;
    height:auto !important;
    min-width:0 !important;
    min-height:0 !important;
    max-width:none !important;
    max-height:none !important;
    overflow:visible !important;
}

/* Slightly larger only on wider layouts. */
@media(min-width:701px){
    .dh-vscreen-avatar .dh-avatar{
        width:46px !important;
        height:46px !important;
        min-width:46px !important;
        min-height:46px !important;
        max-width:46px !important;
        max-height:46px !important;
        flex-basis:46px !important;
    }
}

/* COMMAND-114 — authoritative avatar visibility override */

/*
 * COMMAND-107 hides:
 * .dh-vscreen-avatar span:not(.avatar):not(.dh-avatar)
 *
 * The real account wrapper is:
 * span.dh-account
 *
 * This selector is intentionally MORE specific.
 */
.dh-vscreen-avatar span.dh-account:not(.avatar):not(.dh-avatar){
    display:inline-flex !important;
    visibility:visible !important;
    opacity:1 !important;
    position:relative !important;
    align-items:center !important;

    width:auto !important;
    height:auto !important;
    min-width:0 !important;
    min-height:0 !important;
    max-width:none !important;
    max-height:none !important;

    margin:0 !important;
    padding:0 !important;

    overflow:visible !important;

    font-size:initial !important;
    line-height:normal !important;
}

.dh-vscreen-avatar span.dh-account:not(.avatar):not(.dh-avatar) > details{
    display:inline-block !important;
    visibility:visible !important;
    opacity:1 !important;
    position:relative !important;

    width:auto !important;
    height:auto !important;

    margin:0 !important;
    padding:0 !important;

    overflow:visible !important;
}

.dh-vscreen-avatar span.dh-account:not(.avatar):not(.dh-avatar) > details > summary{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;

    align-items:center !important;
    justify-content:center !important;

    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    min-height:42px !important;
    max-width:42px !important;
    max-height:42px !important;

    margin:0 !important;
    padding:0 !important;

    overflow:visible !important;
    border-radius:50% !important;

    font-size:initial !important;
    line-height:normal !important;
}

.dh-vscreen-avatar span.dh-account:not(.avatar):not(.dh-avatar)
> details
> summary
> span.dh-avatar{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;

    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    min-height:42px !important;
    max-width:42px !important;
    max-height:42px !important;

    flex:0 0 42px !important;

    border-radius:50% !important;
    overflow:hidden !important;

    background-position:center !important;
    background-repeat:no-repeat !important;
    background-size:cover !important;

    font-size:initial !important;
    line-height:normal !important;
}

/* Keep the dropdown itself usable. */
.dh-vscreen-avatar span.dh-account:not(.avatar):not(.dh-avatar)
.dh-account-menu{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;

    font-size:initial !important;
    line-height:normal !important;
}

.dh-vscreen-avatar span.dh-account:not(.avatar):not(.dh-avatar)
.dh-account-menu *{
    font-size:inherit !important;
    line-height:normal !important;
}

/* COMMAND-119 — SuperAdmin onboarding VScreen controls */

.dh-onboarding-actions{
    display:flex;
    flex-direction:column;
    gap:6px;
    margin:7px 0 2px;
    padding:7px 8px;
    border-top:1px solid rgba(74,255,179,.22);
}

.dh-onboarding-action-row{
    display:flex;
    align-items:center;
    gap:7px;
    flex-wrap:wrap;
    min-width:0;
}

.dh-onboarding-action-user{
    margin-right:auto;
    min-width:0;
    font-family:
        ui-monospace,
        SFMono-Regular,
        Consolas,
        monospace;
    font-size:11px;
    letter-spacing:.04em;
}

.dh-onboarding-action-form{
    display:inline-flex;
    margin:0;
}

.dh-onboarding-action-form button{
    min-height:30px;
    padding:4px 9px;
    border:1px solid currentColor;
    border-radius:5px;
    background:rgba(5,24,20,.78);
    color:inherit;
    font-family:
        ui-monospace,
        SFMono-Regular,
        Consolas,
        monospace;
    font-size:10px;
    letter-spacing:.035em;
    cursor:pointer;
}

.dh-onboarding-action-form button:focus-visible{
    outline:2px solid currentColor;
    outline-offset:2px;
}

@media(max-width:700px){
    .dh-onboarding-action-row{
        display:grid;
        grid-template-columns:1fr 1fr;
    }

    .dh-onboarding-action-user{
        grid-column:1 / -1;
        width:100%;
    }

    .dh-onboarding-action-form,
    .dh-onboarding-action-form button{
        width:100%;
    }

    .dh-onboarding-action-form button{
        min-height:34px;
    }
}

/* COMMAND-121 — VScreen onboarding action controls */
.dh-onboarding-choice-label{
  display:block;
  margin:.3rem 0 .45rem;
  font-size:.72rem;
  letter-spacing:.08em;
  opacity:.78;
}

.dh-onboarding-action-form{
  display:inline-block;
  margin:.3rem .35rem .3rem 0;
  vertical-align:middle;
}

.dh-onboarding-action-btn{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  min-height:42px;
  min-width:132px;
  padding:.58rem .78rem;
  border:1px solid currentColor;
  border-radius:8px;
  background:rgba(0,0,0,.34);
  font:inherit;
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.045em;
  line-height:1.1;
  text-align:center;
  cursor:pointer;
  touch-action:manipulation !important;
  -webkit-tap-highlight-color:rgba(255,255,255,.14);
}

.dh-onboarding-action-btn:active{
  transform:translateY(1px);
}

.dh-onboarding-keep{
  outline:1px solid rgba(120,255,180,.25);
}

.dh-onboarding-elevate{
  outline:1px solid rgba(120,190,255,.28);
}

@media (max-width:700px){
  .dh-onboarding-action-form{
    display:block;
    width:100%;
    margin:.34rem 0;
  }

  .dh-onboarding-action-btn{
    width:100%;
    min-width:0;
    min-height:44px;
    box-sizing:border-box;
  }
}

/* ============================================================
   COMMAND-123
   VScreen compact weather + visible SuperAdmin onboarding
   ============================================================ */

/* Onboarding controls must consume minimal vertical space
   while remaining unmistakably actionable. */

.dh-onboarding-actions{
    display:block !important;
    margin:0 0 5px !important;
    padding:4px 6px 5px !important;
    border-top:0 !important;
    border-bottom:1px solid rgba(74,255,179,.30);
}

.dh-onboarding-action-row{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:5px !important;
    align-items:center !important;
}

.dh-onboarding-action-user{
    grid-column:1 / -1 !important;
    width:100% !important;
    margin:0 !important;
    padding:0 1px 2px !important;
    font-size:10px !important;
    line-height:1.15 !important;
    opacity:.78;
}

.dh-onboarding-action-form{
    display:block !important;
    width:100% !important;
    margin:0 !important;
}

.dh-onboarding-action-btn{
    display:flex !important;
    width:100% !important;
    min-width:0 !important;
    min-height:32px !important;
    padding:4px 5px !important;
    border-radius:5px !important;
    box-sizing:border-box !important;
    font-size:10px !important;
    font-weight:700 !important;
    line-height:1 !important;
    letter-spacing:.035em !important;
    touch-action:manipulation !important;
}

.dh-onboarding-keep{
    background:rgba(7,45,31,.88) !important;
}

.dh-onboarding-elevate{
    background:rgba(8,31,48,.90) !important;
}


/* ------------------------------------------------------------
   DromeWeather = compact VScreen report.
   Maximum visual intent: about two information lines.
   ------------------------------------------------------------ */

.dh-weather-compact{
    min-height:0 !important;
    height:auto !important;
    padding:5px 10px !important;
    overflow:hidden !important;
}

/* Remove large standalone weather title/header presentation. */
.dh-weather-compact .vscreen-head,
.dh-weather-compact .vscreen-eyebrow,
.dh-weather-compact .vscreen-title{
    display:none !important;
}

/* Compress all internal spacing. */
.dh-weather-compact *{
    margin-top:0 !important;
    margin-bottom:0 !important;
}

/* Main weather body becomes a short horizontal report. */
.dh-weather-compact .vscreen-body{
    min-height:0 !important;
    height:auto !important;
    padding:0 !important;
    overflow:hidden !important;
}

/* Known/likely weather wrappers all receive the same compact flow. */
.dh-weather-compact .weather-main,
.dh-weather-compact .weather-current,
.dh-weather-compact .weather-summary,
.dh-weather-compact .weather-now{
    display:flex !important;
    align-items:center !important;
    flex-wrap:wrap !important;
    gap:3px 8px !important;
    min-height:0 !important;
}

/* Small unobtrusive icon. */
.dh-weather-compact svg,
.dh-weather-compact img,
.dh-weather-compact .weather-icon{
    width:24px !important;
    height:24px !important;
    max-width:24px !important;
    max-height:24px !important;
    flex:0 0 24px !important;
}

/* Main temperature/condition remains strongest item. */
.dh-weather-compact .weather-temp,
.dh-weather-compact .weather-temperature,
.dh-weather-compact .temperature{
    font-size:18px !important;
    line-height:1.05 !important;
    font-weight:700 !important;
}

/* Secondary data becomes line 2. */
.dh-weather-compact .weather-details,
.dh-weather-compact .weather-meta,
.dh-weather-compact .weather-feels,
.dh-weather-compact .weather-wind{
    font-size:10px !important;
    line-height:1.15 !important;
}

/* Location is redundant on the persistent VScreen and currently
   causes the ugly Athens/Attica/Greece collision. */
.dh-weather-compact .weather-location,
.dh-weather-compact [class*="location"]{
    display:none !important;
}

/* Any text that remains should stay compact rather than create
   another tall weather card. */
.dh-weather-compact p,
.dh-weather-compact small{
    font-size:10px !important;
    line-height:1.15 !important;
}

/* Hard ceiling prevents weather from stealing the VScreen again.
   Content stays a compact report; detailed weather can become
   a selectable/full weather mode later. */
.dh-weather-compact{
    max-height:68px !important;
}

@media(max-width:700px){
    .dh-weather-compact{
        max-height:62px !important;
        padding:4px 8px !important;
    }

    .dh-onboarding-action-btn{
        min-height:32px !important;
    }
}

/* ============================================================
   COMMAND-124
   Persistent onboarding controls + compact DromeWeather
   ============================================================ */

/* Controls live OUTSIDE the scrolling event body now. */
.dh-onboarding-fixed-actions{
    flex:0 0 auto !important;
    width:100% !important;
    box-sizing:border-box !important;
    padding:4px 7px 5px !important;
    border-bottom:1px solid rgba(74,255,179,.26) !important;
    overflow:visible !important;
}

.dh-onboarding-fixed-actions .dh-onboarding-actions{
    display:block !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
}

.dh-onboarding-fixed-actions .dh-onboarding-action-row{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:5px !important;
}

.dh-onboarding-fixed-actions .dh-onboarding-action-user{
    grid-column:1 / -1 !important;
    width:100% !important;
    font-size:9px !important;
    line-height:1.1 !important;
    margin:0 0 2px !important;
    opacity:.8 !important;
}

.dh-onboarding-fixed-actions .dh-onboarding-action-form{
    display:block !important;
    width:100% !important;
    margin:0 !important;
}

.dh-onboarding-fixed-actions .dh-onboarding-action-btn{
    display:flex !important;
    width:100% !important;
    min-width:0 !important;
    min-height:31px !important;
    padding:4px !important;
    box-sizing:border-box !important;
    border-radius:5px !important;
    font-size:9px !important;
    line-height:1 !important;
    font-weight:700 !important;
    touch-action:manipulation !important;
}

.dh-onboarding-fixed-actions .dh-onboarding-keep{
    background:rgba(7,47,31,.93) !important;
}

.dh-onboarding-fixed-actions .dh-onboarding-elevate{
    background:rgba(8,33,52,.94) !important;
}


/* ============================================================
   Compact DromeWeather report
   ============================================================ */

.dh-weather-compact{
    min-height:0 !important;
    height:58px !important;
    max-height:58px !important;
    padding:4px 9px !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
}

/* Kill the large card title/header area. */
.dh-weather-compact .vscreen-head{
    display:none !important;
}

/* Compact body. */
.dh-weather-compact .vscreen-body{
    min-height:0 !important;
    height:100% !important;
    padding:0 !important;
    margin:0 !important;
    overflow:hidden !important;

    display:flex !important;
    align-items:center !important;
    gap:7px !important;
}

/* Small subtle icon. */
.dh-weather-compact svg,
.dh-weather-compact img,
.dh-weather-compact .weather-icon,
.dh-weather-compact [class*="icon"]{
    width:22px !important;
    height:22px !important;
    max-width:22px !important;
    max-height:22px !important;
    flex:0 0 22px !important;
}

/* Remove redundant location. */
.dh-weather-compact .weather-location,
.dh-weather-compact [class*="location"]{
    display:none !important;
}

/* Collapse weather layout into compact report flow. */
.dh-weather-compact .weather-main,
.dh-weather-compact .weather-current,
.dh-weather-compact .weather-summary,
.dh-weather-compact .weather-now,
.dh-weather-compact [class*="weather"]{
    min-height:0 !important;
    margin:0 !important;
}

/* Temperature/condition line. */
.dh-weather-compact .weather-temp,
.dh-weather-compact .weather-temperature,
.dh-weather-compact .temperature{
    font-size:17px !important;
    line-height:1 !important;
    font-weight:700 !important;
}

/* Secondary line. */
.dh-weather-compact p,
.dh-weather-compact small,
.dh-weather-compact .weather-details,
.dh-weather-compact .weather-meta,
.dh-weather-compact .weather-feels,
.dh-weather-compact .weather-wind{
    font-size:9px !important;
    line-height:1.1 !important;
}

/* Prevent accidental third/fourth line expansion. */
.dh-weather-compact br:nth-of-type(n+2){
    display:none !important;
}

@media(max-width:700px){
    .dh-weather-compact{
        height:54px !important;
        max-height:54px !important;
        padding:3px 8px !important;
    }
}

/* ==========================================================
   COMMAND-125 — Flagship compact VScreen
   ========================================================== */


/* ----------------------------------------------------------
   DromeWeather: compact REPORT, not permanent weather page
   ---------------------------------------------------------- */

.weather-zone.dh-weather-compact{
    min-height:0 !important;
    height:58px !important;
    max-height:58px !important;
    padding:5px 9px !important;
    box-sizing:border-box !important;
    overflow:hidden !important;

    display:grid !important;
    grid-template-columns:28px 1fr !important;
    grid-template-rows:1fr 1fr !important;
    column-gap:8px !important;
    row-gap:0 !important;
    align-items:center !important;
}

/* Hide large heading/location row. */
.weather-zone.dh-weather-compact .weather-head{
    display:none !important;
}

/* Main icon + temperature/condition occupy first report line. */
.weather-zone.dh-weather-compact .weather-current-line{
    grid-column:1 / -1 !important;
    grid-row:1 !important;

    display:grid !important;
    grid-template-columns:28px 1fr !important;
    gap:8px !important;
    align-items:center !important;

    margin:0 !important;
    padding:0 !important;
    min-height:0 !important;
}

.weather-zone.dh-weather-compact .weather-sky-icon{
    width:24px !important;
    height:24px !important;
    min-width:24px !important;
    margin:0 !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    font-size:20px !important;
    line-height:1 !important;
    opacity:.82 !important;
}

.weather-zone.dh-weather-compact .weather-main{
    margin:0 !important;
    padding:0 !important;

    font-size:16px !important;
    line-height:1.05 !important;
    font-weight:700 !important;

    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
}

/* Moon information must not create extra height. */
.weather-zone.dh-weather-compact .weather-moon-phase{
    display:none !important;
}

/* Second report line: feels-like + wind. */
.weather-zone.dh-weather-compact .weather-detail{
    grid-column:2 !important;
    grid-row:2 !important;

    margin:0 !important;
    padding:0 !important;

    font-size:9px !important;
    line-height:1.05 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    opacity:.76 !important;
}

/* Detailed forecast remains available by tapping whole gadget. */
.weather-zone.dh-weather-compact .weather-open-detail{
    display:none !important;
}


/* ----------------------------------------------------------
   Onboarding controls: fixed above scrollable event lines
   ---------------------------------------------------------- */

.recent-zone{
    display:flex !important;
    flex-direction:column !important;
    min-height:0 !important;
}

.recent-zone > .vscreen-head{
    flex:0 0 auto !important;
}

.dh-onboarding-fixed-actions{
    display:block !important;
    flex:0 0 auto !important;

    width:100% !important;
    padding:4px 7px 5px !important;
    margin:0 !important;
    box-sizing:border-box !important;

    border-bottom:1px solid rgba(74,255,179,.30) !important;
    overflow:visible !important;
}

.dh-onboarding-fixed-actions .dh-onboarding-actions{
    display:block !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
}

.dh-onboarding-fixed-actions .dh-onboarding-action-row{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:5px !important;
    margin:0 !important;
}

.dh-onboarding-fixed-actions .dh-onboarding-action-user{
    display:block !important;
    grid-column:1 / -1 !important;

    width:100% !important;
    margin:0 0 3px !important;

    font-size:9px !important;
    line-height:1 !important;
    opacity:.78 !important;
}

.dh-onboarding-fixed-actions .dh-onboarding-action-form{
    display:block !important;
    width:100% !important;
    margin:0 !important;
}

.dh-onboarding-fixed-actions .dh-onboarding-action-btn{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:100% !important;
    min-width:0 !important;
    min-height:32px !important;

    padding:4px 5px !important;
    box-sizing:border-box !important;

    border-radius:5px !important;

    font-size:9px !important;
    line-height:1 !important;
    font-weight:700 !important;
    letter-spacing:.03em !important;

    cursor:pointer !important;
    touch-action:manipulation !important;
}

.dh-onboarding-fixed-actions .dh-onboarding-keep{
    background:rgba(7,48,31,.95) !important;
}

.dh-onboarding-fixed-actions .dh-onboarding-elevate{
    background:rgba(8,34,54,.95) !important;
}

/* Event stream receives all remaining vertical headroom. */
.recent-zone > .dh-event-stream{
    flex:1 1 auto !important;
    min-height:0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
}

/* ==========================================================
   COMMAND-138
   VScreen administrative action slot
   ========================================================== */

/* Remove the old dashboard-like Live Events heading footprint. */
.recent-zone > .vscreen-head{
    display:none !important;
}

/* Reserved administrative/system-action area. */
.dh-vscreen-admin-head{
    flex:0 0 auto !important;
    min-height:20px !important;
    padding:3px 8px 2px !important;
    box-sizing:border-box !important;
    border-bottom:0 !important;
}

.dh-vscreen-admin-head-label{
    font-family:
        ui-monospace,
        SFMono-Regular,
        Consolas,
        monospace !important;
    font-size:9px !important;
    line-height:1.1 !important;
    letter-spacing:.12em !important;
    opacity:.58 !important;
}

/* Buttons occupy the space previously wasted by the
   "Activity Screen / Live events" title. */
.dh-onboarding-fixed-actions{
    flex:0 0 auto !important;
    padding:2px 7px 5px !important;
    margin:0 !important;
    border-bottom:1px solid rgba(74,255,179,.28) !important;
}

.dh-onboarding-fixed-actions .dh-onboarding-action-user{
    display:none !important;
}

.dh-onboarding-fixed-actions .dh-onboarding-action-row{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:6px !important;
}

.dh-onboarding-fixed-actions .dh-onboarding-action-btn{
    min-height:34px !important;
    font-size:10px !important;
    letter-spacing:.035em !important;
    border-radius:6px !important;
}

/* No question/action waiting:
   same physical slot becomes a system status report. */
.dh-vscreen-admin-idle{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    min-height:30px !important;
    padding:0 3px !important;
    box-sizing:border-box !important;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Consolas,
        monospace !important;
    font-size:9px !important;
    line-height:1 !important;
    letter-spacing:.035em !important;
    opacity:.72 !important;
}

/* The event/question description starts immediately under
   the administrative action slot. */
.recent-zone > .dh-event-stream{
    flex:1 1 auto !important;
    min-height:0 !important;
    padding-top:4px !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
}

/* Keep the first current-event line visually connected
   to the controls above it. */
.recent-zone .dh-vscreen-event-line:first-child{
    margin-top:0 !important;
}

/* ==========================================================
   COMMAND-139
   VScreen action caption + event text alignment correction
   ========================================================== */

/* Do not consume vertical space above the buttons. */
.dh-vscreen-admin-head{
    display:none !important;
}

/* Buttons stay exactly in the action slot. */
.dh-onboarding-fixed-actions{
    margin:0 !important;
    padding:4px 12px 6px !important;
    border-bottom:0 !important;
}

/* ADMIN ACTION REQUIRED now sits directly below buttons. */
.dh-vscreen-action-caption{
    flex:0 0 auto !important;
    box-sizing:border-box !important;

    margin:0 !important;
    padding:2px 14px 5px !important;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Consolas,
        monospace !important;

    font-size:10px !important;
    font-weight:700 !important;
    line-height:1.15 !important;
    letter-spacing:.10em !important;

    color:rgba(255,210,96,.92) !important;

    border-bottom:1px solid rgba(74,255,179,.24) !important;
}

/* Main text stream uses one consistent left edge. */
.recent-zone > .dh-event-stream{
    box-sizing:border-box !important;
    padding:5px 14px 5px !important;
}

/* Normalize every event line onto the same grid. */
.recent-zone .dh-vscreen-event-line{
    display:grid !important;
    grid-template-columns:22px minmax(0,1fr) !important;
    column-gap:7px !important;

    margin:0 !important;
    padding:2px 0 !important;

    align-items:start !important;
    box-sizing:border-box !important;
}

/* Marker column fixed. */
.recent-zone .dh-vscreen-event-line > :first-child{
    width:22px !important;
    min-width:22px !important;
    margin:0 !important;
    padding:0 !important;
    text-align:left !important;
}

/* Event text starts on one clean vertical line. */
.recent-zone .dh-vscreen-event-line > :last-child{
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    text-align:left !important;
    overflow-wrap:anywhere !important;
}

/* Tighten the first line under the action caption. */
.recent-zone .dh-vscreen-event-line:first-child{
    padding-top:1px !important;
}

/* Idle/system status uses same left/right inset. */
.dh-vscreen-admin-idle{
    padding-left:14px !important;
    padding-right:14px !important;
}

/* ==========================================================
   COMMAND-140
   Keep VScreen bottom status strip inside the physical frame
   ========================================================== */

/* The VScreen content body must own all internal zones,
   including the bottom runtime/status strip. */
.recent-zone{
    display:flex !important;
    flex-direction:column !important;
    min-height:0 !important;
    overflow:hidden !important;
}

/* Event stream occupies only the remaining internal space. */
.recent-zone > .dh-event-stream{
    flex:1 1 auto !important;
    min-height:0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
}

/* Common status/footer variants: force them back into normal
   VScreen flow instead of viewport/page positioning. */
.recent-zone .vscreen-status,
.recent-zone .vscreen-status-line,
.recent-zone .vscreen-bottom-status,
.recent-zone .dh-vscreen-status,
.recent-zone .dh-vscreen-bottom-status,
.recent-zone .runtime-status,
.recent-zone .runtime-status-line,
.recent-zone .status-line{
    position:static !important;
    inset:auto !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;

    flex:0 0 auto !important;
    width:auto !important;
    max-width:none !important;

    margin:0 !important;
    box-sizing:border-box !important;

    z-index:2 !important;
}

/* Preserve the visual status bar geometry at the bottom
   of the VScreen rather than below the whole device frame. */
.recent-zone .vscreen-status,
.recent-zone .vscreen-status-line,
.recent-zone .vscreen-bottom-status,
.recent-zone .dh-vscreen-status,
.recent-zone .dh-vscreen-bottom-status{
    min-height:28px !important;
    padding:5px 10px !important;
    border-top:1px solid rgba(74,255,179,.30) !important;
}

/* Do not let any generic sticky/fixed footer rule pull
   descendants of the VScreen outside its frame. */
.recent-zone [class*="status"]{
    max-width:100% !important;
}

/* Preserve COMMAND-139 action geometry. */
.dh-onboarding-fixed-actions{
    margin:0 !important;
}

.dh-vscreen-action-caption{
    margin:0 !important;
}

/* ==========================================================
   COMMAND-141
   Exact repair for real VScreen fixed-bottom classes
   ========================================================== */

/*
   The real runtime strip is .dh-vscreen-fixed-bottom,
   containing .dh-vscreen-footer-status.
   Keep it attached to the VScreen frame rather than page flow.
*/

.dh-vscreen-fixed-bottom{
    position:absolute !important;
    left:18px !important;
    right:18px !important;
    bottom:10px !important;
    width:auto !important;
    max-width:none !important;

    margin:0 !important;
    padding:0 !important;

    box-sizing:border-box !important;
    z-index:20 !important;
}

/* VScreen shell must be the positioning container. */
.unified-vscreen,
.vscreen-shell,
.vscreen-frame,
.vscreen{
    position:relative !important;
}

/* Exact footer status visual geometry. */
.dh-vscreen-footer-status{
    position:static !important;
    inset:auto !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:7px !important;

    width:100% !important;
    min-height:28px !important;

    margin:0 !important;
    padding:5px 9px !important;

    box-sizing:border-box !important;

    border-top:1px solid rgba(74,255,179,.30) !important;
    background:rgba(0,28,22,.88) !important;
}

/* Give the scrolling/event body enough room so the fixed
   footer never overlays the final event line. */
.recent-zone{
    padding-bottom:34px !important;
}

/* Preserve current action layout from COMMAND-139. */
.dh-onboarding-fixed-actions{
    margin:0 !important;
}

.dh-vscreen-action-caption{
    margin:0 !important;
}

/* ==========================================================
   COMMAND-142
   Footer is now structurally inside the VScreen.
   Stop treating it as a page-level floating element.
   ========================================================== */

.dh-vscreen-fixed-bottom{
    position:static !important;
    inset:auto !important;

    flex:0 0 auto !important;

    width:100% !important;
    max-width:none !important;

    margin:0 !important;
    padding:0 !important;

    box-sizing:border-box !important;
    z-index:auto !important;
}

.dh-vscreen-footer-status{
    position:static !important;
    inset:auto !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:7px !important;

    width:100% !important;
    min-height:28px !important;

    margin:0 !important;
    padding:5px 9px !important;

    box-sizing:border-box !important;

    border-top:1px solid rgba(74,255,179,.30) !important;
    background:rgba(0,28,22,.88) !important;
}

/* Event stream takes remaining space; footer stays at the
   physical bottom of the VScreen because it is now a sibling
   inside the same flex column. */
.recent-zone{
    display:flex !important;
    flex-direction:column !important;
    min-height:0 !important;
    overflow:hidden !important;
    padding-bottom:0 !important;
}

.recent-zone > .dh-event-stream{
    flex:1 1 auto !important;
    min-height:0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
}

/* ==========================================================
   COMMAND-143
   Natural-height VScreen event rows
   ========================================================== */

.recent-zone .dh-vscreen-event-line{
    display:grid !important;
    grid-template-columns:22px minmax(0,1fr) !important;
    grid-auto-rows:auto !important;

    height:auto !important;
    min-height:0 !important;
    max-height:none !important;

    margin:0 !important;
    padding:3px 0 !important;

    line-height:1.22 !important;
    align-items:start !important;
}

.recent-zone .dh-event-marker{
    display:block !important;
    height:auto !important;
    line-height:1.22 !important;
}

.recent-zone .dh-event-text{
    display:block !important;

    height:auto !important;
    min-height:0 !important;
    max-height:none !important;

    line-height:1.22 !important;

    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
}

/* Slightly stronger separation after a wrapped event,
   without wasting VScreen height. */
.recent-zone .dh-vscreen-event-line + .dh-vscreen-event-line{
    margin-top:1px !important;
}

/* ==========================================================
   COMMAND-144
   Event stream natural-flow correction
   ========================================================== */

/*
   Previous legacy rules can still make rows behave like
   fixed grid tracks. Make the stream itself ordinary block
   flow so wrapped rows push every following row downward.
*/
.recent-zone > .dh-event-stream{



}

/*
   Each event is now a normal flex row. Its height is determined
   entirely by the text content.
*/
.recent-zone .dh-vscreen-event-line{







}

.recent-zone .dh-event-marker{






}

.recent-zone .dh-event-text{









}

/* A wrapped line now creates actual vertical separation. */
.recent-zone .dh-vscreen-event-line + .dh-vscreen-event-line{
}

/* Preserve current fixed VScreen bottom status geometry. */
.dh-vscreen-fixed-bottom{
}

/* COMMAND-146 — final event-flow override */

.recent-zone > .vscreen-body.dh-event-stream{
    display:block !important;
    flex:1 1 auto !important;
    min-height:0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
}

.recent-zone > .vscreen-body.dh-event-stream > .dh-vscreen-event-line{
    display:flex !important;
    position:static !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    align-items:flex-start !important;
    margin:0 0 3px 0 !important;
    padding:1px 0 !important;
    overflow:visible !important;
}

.recent-zone > .vscreen-body.dh-event-stream > .dh-vscreen-event-line > .dh-event-marker{
    flex:0 0 22px !important;
    width:22px !important;
    margin:0 7px 0 0 !important;
    line-height:1.25 !important;
}

.recent-zone > .vscreen-body.dh-event-stream > .dh-vscreen-event-line > .dh-event-text{
    display:block !important;
    flex:1 1 auto !important;
    min-width:0 !important;
    width:auto !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    white-space:normal !important;
    line-height:1.25 !important;
    overflow:visible !important;
    text-overflow:clip !important;
}


/* CR0370 — external identity bar and unified Active Context VScreen */
.dh-dashboard-identity-bar{position:relative;z-index:200;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:58px;margin:0 0 10px;padding:0 12px;overflow:visible}
.dh-dashboard-brand{font-size:17px;color:#eafdf6}
.dh-dashboard-account{position:relative;z-index:201;display:flex;align-items:center;overflow:visible}
.dh-dashboard-account .dh-account,.dh-dashboard-account details{position:relative;overflow:visible}
.dh-dashboard-account .dh-account-menu{position:absolute!important;z-index:1000!important}
.unified-vscreen-display{grid-template-columns:1fr!important;grid-template-rows:auto auto auto auto minmax(0,1fr) auto!important;grid-template-areas:"vtop" "active" "weather" "storage" "events" "vbottom"!important}
.dh-vscreen-fixed-top{grid-area:vtop!important}
.dh-active-context{grid-area:active!important;min-width:0;padding:7px 14px 9px;border-top:1px solid rgba(74,255,179,.18);border-bottom:1px solid rgba(74,255,179,.32);background:linear-gradient(180deg,rgba(8,42,34,.78),rgba(2,23,20,.54));font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
.dh-active-context-head{display:flex;justify-content:space-between;gap:12px;color:#4affb3;font-size:9px;font-weight:800;letter-spacing:.13em}
.dh-active-context-body{display:grid;grid-template-columns:20px minmax(0,1fr);gap:7px;margin-top:6px;color:#a8ffda;font-size:clamp(12px,1.05vw,17px);font-weight:800;line-height:1.2;text-shadow:0 0 7px rgba(74,255,179,.24)}
.dh-active-context-marker{color:#4affb3}
.dh-active-context-text{min-width:0;overflow-wrap:anywhere}
.weather-zone{grid-area:weather!important;width:100%!important;box-sizing:border-box!important;border-bottom:1px solid rgba(74,255,179,.22)!important}
.dh-storage-zone{grid-area:storage!important;width:100%!important;box-sizing:border-box!important;border-bottom:1px solid rgba(74,255,179,.22)!important}
.recent-zone{grid-area:events!important;width:100%!important;box-sizing:border-box!important}
.dh-vscreen-fixed-bottom{grid-area:vbottom!important}
@media(max-width:700px){.dh-dashboard-identity-bar{min-height:50px;margin-bottom:6px;padding:0 6px}.dh-dashboard-brand{font-size:15px}.unified-vscreen-display{grid-template-columns:1fr!important;grid-template-rows:auto auto auto auto minmax(0,1fr) auto!important;grid-template-areas:"vtop" "active" "weather" "storage" "events" "vbottom"!important}.dh-active-context{padding:6px 10px 8px}.dh-active-context-body{font-size:11px}}

/* CR0383 — final visual-base refinement and About learning hub */
.dh-dashboard-identity-bar{min-height:87px!important}
.dh-dashboard-brand{font-size:25.5px!important;gap:15px!important}
.dh-dashboard-brand .brand-mark{width:43.5px!important;height:43.5px!important;border-width:4px!important}
.dh-dashboard-brand .brand-mark:after{inset:7.5px!important;border-width:3px!important}
.dh-dashboard-account .dh-account summary>.dh-avatar{width:54px!important;height:54px!important;flex-basis:54px!important}
.unified-vscreen-display{grid-template-columns:minmax(240px,32%) minmax(0,1fr)!important;grid-template-rows:auto auto auto minmax(0,1fr) auto!important;grid-template-areas:"vtop vtop" "weather active" "storage storage" "events events" "vbottom vbottom"!important}
.weather-zone{grid-area:weather!important;border-right:1px solid rgba(74,255,179,.22)!important}
.dh-active-context{grid-area:active!important;display:flex;flex-direction:column;justify-content:center}
.dh-about-page{display:grid;gap:14px}
.dh-about-hero{padding:clamp(22px,4vw,46px);background:radial-gradient(circle at 15% 0,rgba(47,128,237,.15),transparent 40%),linear-gradient(155deg,rgba(15,34,50,.96),rgba(9,23,35,.98))}
.dh-about-hero .subtitle{max-width:850px;font-size:14px}
.dh-about-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.dh-about-card{padding:22px;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.dh-about-card h2{font-size:18px}
.dh-about-card p,.dh-about-card li{color:#9bb1c2;font-size:12px;line-height:1.65}
.dh-about-card .btn{margin-top:auto}
.dh-about-principles{grid-column:1/-1}
.dh-about-principles ul{margin:0;padding-left:20px}
.dh-guide-list{display:grid;gap:8px;width:100%;margin-top:auto}
.dh-guide-list a{padding:11px 12px;border:1px solid var(--line);border-radius:8px;background:#07131d;color:#bdd0de;font-size:11px}
.dh-guide-list a:hover,.dh-guide-list a:focus-visible{border-color:#2f80ed;color:#fff}
@media(max-width:700px){.dh-dashboard-identity-bar{min-height:75px!important}.dh-dashboard-brand{font-size:22.5px!important;gap:12px!important}.dh-dashboard-brand .brand-mark{width:37.5px!important;height:37.5px!important}.dh-dashboard-account .dh-account summary>.dh-avatar{width:54px!important;height:54px!important;flex-basis:54px!important}.unified-vscreen-display{grid-template-columns:1fr!important;grid-template-rows:auto auto auto auto minmax(0,1fr) auto!important;grid-template-areas:"vtop" "weather" "active" "storage" "events" "vbottom"!important}.weather-zone{border-right:0!important}.dh-about-grid{grid-template-columns:1fr}.dh-about-hero{padding:20px}.dh-about-card{padding:18px}.dh-about-principles{grid-column:auto}}

/* CR0386 — identity geometry refinement */
.dh-dashboard-identity-bar {
  min-height: 64px !important;
  padding-block: 5px !important;
}
.dh-dashboard-brand .brand-mark,
.dh-dashboard-identity-bar .dh-account summary > .dh-avatar,
.site-header .brand-mark,
.site-header .dh-account summary > .dh-avatar {
  width: 54px !important;
  height: 54px !important;
  flex: 0 0 54px !important;
}