/* Shared visual layer inspired by Magic UI's spotlight card and dot pattern.
   It is plain CSS so the existing device update and release scripts keep working. */
:root {
  --ui-ink:#182238;
  --ui-muted:#69758b;
  --ui-line:#e4e9f2;
  --ui-surface:#fff;
  --ui-canvas:#f7f9fd;
  --ui-accent:#7356d8;
  --ui-accent-deep:#5d42c2;
  --ui-sidebar:#121a2e;
  --ui-shadow:0 12px 34px rgba(37,47,87,.06);
}
body,body.site-body{background:var(--ui-canvas);color:var(--ui-ink)}
.app>main,.site-shell>.site-main{background-color:transparent}
.app .sidebar,.site-shell>.site-sidebar{
  background:radial-gradient(circle at 5% 0%,#30365b 0,transparent 39%),var(--ui-sidebar);
  color:#c7d0e6;border-right:1px solid #2b3450;
}
.app .sidebar .brand,.site-shell>.site-sidebar .site-brand{color:#fff}
.app .brand-mark,.site-shell .site-brand-mark{
  background:linear-gradient(135deg,#a88bff,#6b6be7 58%,#477bd1);
  color:#fff;box-shadow:0 7px 22px #826eff57;
}
.app .brand small,.site-shell .site-brand small{color:#a4add0}
.app .sidebar .side-label,.site-shell .site-nav-label{color:#8896bc}
.app .sidebar nav a,.site-shell .site-sidebar .site-nav-link{color:#c7d0e6}
.app .sidebar nav a:hover,.site-shell .site-sidebar .site-nav-link:hover{background:#26314e;color:#fff}
.app .sidebar nav a.active,.site-shell .site-sidebar .site-nav-link[aria-current="page"]{
  background:linear-gradient(100deg,#374270,#2c365a);color:#fff;
  border-color:#56659b;box-shadow:inset 3px 0 #aa91ff;
}
.site-shell .site-nav-link>span,.site-shell .site-nav-link[aria-current="page"]>span{color:#b3a8ff}
.app .side-footer,.site-shell .site-sidebar-note,.site-shell .site-sidebar-note small{color:#9caace}
.app .topbar,.site-shell>.site-main>.site-header{background:#ffffffd9;border-color:var(--ui-line)}
.site-shell>.site-main>.site-header{padding-left:20px;padding-right:20px;border:1px solid var(--ui-line);border-radius:14px;margin-top:18px;min-height:58px}
.site-body .site-topbar{background:#eaeef9;color:#5d698b;letter-spacing:.05em}
.app .heading h1,.site-body .site-hero h1,.site-body .ball-heading h1,.site-body .page-heading h1,.site-body .heading h1{color:var(--ui-ink)}
.app .heading p,.site-body .site-hero p,.site-body .ball-heading p,.app .card p,.app .module-card p{color:var(--ui-muted)}
.app .eyebrow,.site-body .eyebrow,.site-body .site-kicker,.site-body .ball-kicker{color:var(--ui-accent);letter-spacing:.16em}
.app .hero-card,.app .login-intro{
  background:radial-gradient(circle at 92% 22%,#796de78c 0,transparent 27%),
    radial-gradient(circle at 63% 120%,#2483a965 0,transparent 36%),
    linear-gradient(125deg,#172441,#222a51 70%,#313367);
  border:1px solid #47547d;box-shadow:0 20px 46px #17244725;
}
.app .hero-card p,.app .login-intro p{color:#cbd4eb}
.app .hero-card h2{font-size:clamp(20px,2vw,24px)}
.app .login-intro .password-note{display:inline-block;width:max-content;max-width:100%;padding:10px 14px;border-radius:10px;background:#dcfff01c;border:1px solid #a1e8c588;color:#ddffed}
.app .hero-mark,.app .hero-icon{border-color:#7480b5;background:#ffffff1c;color:#f6f1ff}
.app .section-label{color:#bcaaff}
.app .module-card,.app .series-card,.app .card,.app .panel,.app .stats>div,
.site-body .site-entry,.site-body .site-info,.site-body .ball-release-card,.site-body .panel,
.site-body .summary,.site-body .login-card,.site-body .site-basic #login,
.site-body .site-basic #install{
  background-color:var(--ui-surface);border-color:var(--ui-line);
  box-shadow:var(--ui-shadow);border-radius:16px;
}
.app .series-card.series-ball{background:linear-gradient(135deg,#fffaf2,#fff 70%)}
.app .series-card.series-badge{background:linear-gradient(135deg,#f4fcf9,#fff 70%)}
.app .module-card:hover,.app .series-card:hover,.site-body .site-entry:hover{
  border-color:#aca5e8;box-shadow:0 16px 36px #46459b22;transform:translateY(-3px);
}
.app .module-icon,.site-body .card-icon{background:#f0edff;border-color:#e0d9ff;color:var(--ui-accent)}
.app .module-card h3,.app .series-card h2,.site-body .site-entry h2{color:var(--ui-ink)}
.app .module-link,.app .series-card a,.site-body .site-entry span,.site-body .topbar a,
.site-body .site-header a,.site-body .site-info a{color:var(--ui-accent)}
.app .topbar a:not(.ghost),.app .crumb a{color:var(--ui-accent)}
.app .primary,.site-body .site-main .primary,.site-body .site-main .button.primary,
.site-body .site-main #update-firmware,.site-body .site-main #update-tf,.site-body .site-main #update-all,
.site-body .site-main .ball-login-forms button{
  background:linear-gradient(105deg,#7356d8,#5d71d5);border-color:#6d59d6;color:#fff;
  box-shadow:0 7px 17px #6056c52e;
}
.app .primary:hover,.site-body .site-main .primary:hover:enabled,
.site-body .site-main .ball-login-forms button:hover:enabled{background:linear-gradient(105deg,#6449c5,#5061c3)}
.site-body .site-main .ball-login-forms #admin-login button{background:#f7f5ff!important;color:#5846aa!important;box-shadow:none}
.app .ghost,.site-body .site-main .secondary{background:#fff;border-color:#d8deec;color:#53607a}
.app .ghost:hover,.site-body .site-main .secondary:hover{background:#f0f2fa}
.app input:not([type="checkbox"]),.app textarea,.app select,
.site-body .site-main input:not([type="checkbox"]),.site-body .site-main select{
  border-color:#d9dfec;color:var(--ui-ink);background:#fff;
}
.app input:focus-visible,.app textarea:focus-visible,.app select:focus-visible,
.site-body :focus-visible{outline:2px solid #876de7;outline-offset:2px;box-shadow:0 0 0 4px #7356d827}
.app input[type="checkbox"],.site-body input[type="checkbox"]{accent-color:var(--ui-accent)}
.app .stats strong,.app .summary-box strong{color:var(--ui-ink)}
.app .stats>div{min-width:0}
.app .stats strong{overflow-wrap:anywhere;font-size:clamp(16px,1.7vw,22px)}
.app .pill,.app .grant-tags span,.site-body .valid-tag{background:#eeeaff;color:#6950bd}
.app .item,.app .panel-head,.app .list-group,.site-body .release-row{border-color:var(--ui-line)}
.app .local-notice,.site-body .ball-update-page #local-notice{
  background:#f0effb;border-color:#dcd8f4;color:#66568e;
}
.site-body .site-main .notice,.site-body .site-main #notice:not(.error){background:#f1f0fa;border-color:#dedaf1;color:#615881}
.site-body .site-main .badge{background:#eeeaff;border-color:#ddd6fa;color:#6756ae}
.site-body .site-main .guide{background:#f1f2fb;border-color:var(--ui-line)}
.site-body .ball-release-card{background:linear-gradient(135deg,#fff,#f9f8ff);border-color:var(--ui-line)}
.site-body .ball-release-head h2{color:var(--ui-ink)}
.site-body .ball-release-head h2 small{color:var(--ui-muted)}
.site-body .ball-release-card>p{color:var(--ui-muted);font-size:15px;line-height:1.7}
.site-body .ball-release-card li{background:#f7f7fc;border-color:#e6e7f0;color:#4d5a70;font-size:15px;line-height:1.65}
.site-body .ball-release-card .ball-release-foot{border-color:var(--ui-line);font-size:14px}
.site-body .ball-login-forms form{background:#fafaff;border-color:var(--ui-line)}
.site-body .ball-login-forms h3{color:var(--ui-ink)}
.site-body .ball-login-copy p{color:var(--ui-muted);font-size:15px;line-height:1.7}
.site-body .ball-login-copy a,.site-body .ball-login-copy #cancel-switch,.site-body .ball-session-actions #switch-account,.site-body .ball-session-actions #logout{color:var(--ui-accent);font-size:14px}
.site-body .site-basic #login.ball-login form label{font-size:15px}
.site-body .site-basic #login.ball-login form input{min-height:44px}
.site-body .site-main .ball-login-forms button{background:linear-gradient(105deg,#7356d8,#5d71d5)!important;border-color:#6d59d6!important;color:#fff!important;min-height:44px}
.site-body .site-main .ball-login-forms #admin-login button{border-color:#d8d1f4!important}
.app .device-step.current{border-color:#a99ae9;box-shadow:0 0 0 3px #7865d919}
.app .device-step b,.app .scope-grid .scope-group-title{color:var(--ui-accent)}
.app .scope-grid label,.app .summary-box,.app .tabs,.app .checks{background:#f8f9fe;border-color:var(--ui-line)}
.app .tabs button.active{color:var(--ui-accent)}
.app .small-btn:hover{background:#f1f1fc}
.app dialog,.site-body dialog{border-color:#d8deec;box-shadow:0 24px 72px #17233b42}
.app dialog::backdrop,.site-body dialog::backdrop{background:#10192cb5}
.app .magic-surface,.site-body .magic-surface{position:relative;overflow:hidden;isolation:isolate}
.app .magic-surface::before,.site-body .magic-surface::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(440px circle at var(--magic-x,50%) var(--magic-y,50%),#8368f01c,transparent 55%);
  opacity:0;transition:opacity .2s;
}
.app .magic-surface:hover::before,.site-body .magic-surface:hover::before{opacity:1}
.app .content::before,.site-body .site-main::before{
  content:"";position:absolute;inset:0 0 auto;height:360px;pointer-events:none;opacity:.22;
  background-image:radial-gradient(#9da8d4 1px,transparent 1px);
  background-size:18px 18px;mask-image:linear-gradient(#000,transparent);
}
.app .content,.site-body .site-main{position:relative}
.app .content>*,.site-body .site-main>*{position:relative}
.wifi-content .wifi-steps{grid-template-columns:repeat(3,minmax(0,1fr))}
.wifi-content .wifi-steps .module-card{min-height:190px}
.wifi-content .wifi-hero .hero-mark{width:90px;height:72px;font-size:17px}

/* Keep working content readable before decorative summaries take space. */
.app .module-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.app .section-four .module-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.app .module-card{min-height:180px;padding:21px}
.app .module-card h3{font-size:18px;line-height:1.4}
.app .module-card p{font-size:15px;line-height:1.65}
.app .module-link{font-size:14px}
.app .hero-card p,.app .heading p,.app .card p{font-size:15px;line-height:1.7}
.app .card h2{font-size:20px;line-height:1.4}
.app .quiet,.app .panel-head p,.app .item-sub,.app .item-meta{font-size:14px;line-height:1.6}
.app .field,.app .login-card label{font-size:15px;line-height:1.5}
.app .field input,.app .field select,.app .search input{min-height:44px;font-size:16px}
.app .search{border-color:#d9dfec;background:#fff;min-height:44px}
.app .search:focus-within{outline:2px solid #876de7;outline-offset:2px}
.app .search input:focus-visible{outline:0;box-shadow:none}
.app .primary,.app .ghost,dialog .primary,dialog .ghost{min-height:44px}
.app .primary:disabled,dialog .primary:disabled{opacity:1;background:#e6e9f1;border-color:#e6e9f1;color:#858fa4;box-shadow:none}
.app .stack{display:flex;flex-direction:column;align-self:start;gap:18px;min-width:0}
.app .stack>.card{width:100%}
.app .overview-strip{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:14px 19px;margin-bottom:22px;background:#fff;border:1px solid var(--ui-line);border-radius:14px;box-shadow:var(--ui-shadow);color:var(--ui-muted);font-size:14px;line-height:1.55}
.app .overview-metric{display:inline-flex;align-items:baseline;gap:8px;padding-right:17px;border-right:1px solid var(--ui-line);white-space:nowrap}
.app .overview-metric strong{font-size:24px;line-height:1.2;color:var(--ui-accent)}
.app .overview-note,.app #overview-note{flex:1;min-width:250px}
.app .upload-zone{border-color:#cfc6f2;background:#faf9ff;padding:18px}
.app .upload-zone label{font-size:15px;color:var(--ui-ink);font-weight:650}
.app .upload-zone input[type="file"]{font-size:14px;max-width:100%;min-height:47px;padding:7px;color:var(--ui-muted)}
.app .upload-zone input[type="file"]::file-selector-button{font:inherit;font-weight:650;background:#f1edff;border:1px solid #d9d0fb;border-radius:8px;color:#604caf;padding:8px 12px;margin-right:12px;cursor:pointer}
.app .upload-zone span{font-size:14px;color:var(--ui-muted)}
.app .release-info-content{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
.app .release-info-content p{margin:0}
.app .captcha-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.app .captcha-row img{border:1px solid var(--ui-line);border-radius:8px;background:#fff}
.app .captcha-row .small-btn{min-height:44px;font-size:14px;padding:8px 14px}
.app .action-line{align-items:center;flex-wrap:wrap}
.app #update-hint{margin:9px 0 0}
.app .item-actions button,.app .small-btn{font-size:14px;min-height:40px}
.app .grant-scope-tags small,.app .fields small{font-size:14px}

/* Dialogs sit outside .app in the document, so style them explicitly. */
dialog{border-color:var(--ui-line);border-radius:16px;box-shadow:0 24px 72px #17233b42;color:var(--ui-ink)}
dialog::backdrop{background:#10192cb5}
dialog .eyebrow{color:var(--ui-accent)}
dialog .dialog-head{border-color:var(--ui-line)}
dialog .dialog-head h2{color:var(--ui-ink)}
dialog .icon{width:34px;height:34px;background:#f1f2fa;color:#586480}
dialog .fields label,dialog .fields>div>label{font-size:15px;line-height:1.5;color:#49556d}
dialog .fields input:not([type="checkbox"]),dialog .fields textarea,dialog .fields select{border-color:#d9dfec;color:var(--ui-ink);min-height:44px}
dialog .fields input:focus-visible,dialog .fields textarea:focus-visible,dialog .fields select:focus-visible{outline:2px solid #876de7;outline-offset:2px;box-shadow:0 0 0 4px #7356d827}
dialog input[type="checkbox"]{accent-color:var(--ui-accent)}
dialog .fields .check-line input,dialog .checks input,dialog .scope-grid input{accent-color:var(--ui-accent)}
dialog .dialog-actions{border-color:var(--ui-line)}
dialog .primary{background:linear-gradient(105deg,#7356d8,#5d71d5);border-color:#6d59d6;color:#fff;box-shadow:0 7px 17px #6056c52e}
dialog .primary:hover:enabled{background:linear-gradient(105deg,#6449c5,#5061c3)}
dialog .ghost{background:#fff;border-color:#d8deec;color:#53607a}
dialog .ghost:hover{background:#f0f2fa}
dialog .checks,dialog .scope-grid label{background:#f8f9fe;border-color:var(--ui-line)}
dialog .check-group,dialog .list-group{color:var(--ui-accent);border-color:var(--ui-line)}
dialog .quiet,dialog .fields small{font-size:14px;line-height:1.55;color:var(--ui-muted)}
dialog .scope-grid label,dialog .checks label{font-size:14px}

/* Shared reading scale: body 16, content 15, supporting text 14. */
.app,.site-body{font-size:16px;line-height:1.6}
.app small,.site-body small{font-size:14px}
.app .brand small,.site-body .site-brand small{font-size:12px;letter-spacing:.12em}
.app .side-label,.site-body .site-sidebar .site-nav-label{font-size:12px;letter-spacing:.12em}
.app .sidebar nav a,.site-body .site-sidebar .site-nav-link{font-size:15px;line-height:1.45}
.app .side-footer,.site-body .site-sidebar-note,.site-body .site-sidebar-note small{font-size:13px;line-height:1.7}
.app .crumb,.app .account,.site-body .site-main>.site-header,.site-body .site-header .breadcrumb{font-size:14px}
.app .eyebrow,.app .section-label,.site-body .eyebrow,.site-body .site-kicker,.site-body .ball-kicker{font-size:12px;letter-spacing:.12em}
.app .section-heading h2,.app .panel-head h2{font-size:20px;line-height:1.4}
.app .login-intro p,.app .login-card p,.app .public-link p,.app .series-card p{font-size:15px;line-height:1.65}
.app .login-flow span,.app .public-link a,.app .series-card a{font-size:14px}
.app .local-notice,.app .stats span,.app .stats small{font-size:14px;line-height:1.55}
.app .item-title,.app .row-title{font-size:16px;line-height:1.5}
.app .row-sub,.app .release-row p,.app .card .muted,.app .right-note{font-size:14px;line-height:1.6}
.app .list-group,.app .check-group,.app .pill,.app .grant-tags span{font-size:13px}
.app .empty,.app .message,.app .status-line,.app .notice-box,.app .device-step p,.app .scope-grid label,.app .grant-scope>strong,.app .grant-scope-tags small{font-size:14px;line-height:1.6}
.app .device-step b,.app .scope-grid .scope-group-title{font-size:14px}
.app .summary-box small,.app .summary-box>span,.app .account-banner{font-size:14px}
.app .primary,.app .ghost,.app .tabs button,.app .link-button,dialog .primary,dialog .ghost{font-size:15px}
.app .search input{min-width:0;width:100%}
.app .item{gap:14px}
.app .item-actions{flex-wrap:wrap}
dialog{font-size:16px}
dialog .eyebrow{font-size:12px}
dialog .fields input:not([type="checkbox"]),dialog .fields textarea,dialog .fields select{font-size:16px}
dialog .check-group,dialog .list-group{font-size:14px}
.site-body .site-topbar,.site-body .site-footer{font-size:13px}
.site-body .site-main button,.site-body .site-main .button{font-size:15px;min-height:44px}
.site-body .site-main input,.site-body .site-main select{font-size:16px;min-height:44px}
.site-body .site-main .site-toolbar label,.site-body .site-basic #login label,.site-body .site-basic .choices label{font-size:15px}
.site-body .site-main .text-button,.site-body .site-basic #logout,.site-body .site-basic summary{font-size:14px}
.site-body .site-hero p,.site-body .site-entry p,.site-body .site-info p,.site-body .site-basic>p,.site-body .site-basic #install>p,.site-body .site-basic #release{font-size:15px;line-height:1.65}
.site-body .site-entry span,.site-body .site-basic #status,.site-body .site-basic #account,.site-body .site-main .help,.site-body .site-main .muted{font-size:14px}
.site-body .ball-release-head h2 small,.site-body .ball-release-tag{font-size:14px}
.site-body .ball-heading p{font-size:16px;line-height:1.6}
.site-body .ball-update-page #local-notice{font-size:14px;line-height:1.6}
.site-body .steps,.site-body .summary .muted,.site-body .panel-title p,.site-body .selected,.site-body .guide li,.site-body .guide li p,.site-body .guide-note,.site-body .release-info p,.site-body .empty,.site-body #delivery-status{font-size:14px;line-height:1.6}
.site-body .guide li strong,.site-body .dropzone strong{font-size:15px}
.site-body .step-tag,.site-body .valid-tag,.site-body .badge,.site-body .label{font-size:13px}
.site-body .dropzone span:last-of-type,.site-body .login-card .help,.site-body .help{font-size:14px}
.site-body .login-card label{font-size:15px}
.site-body .login-card input{font-size:16px}
.site-body .secondary{font-size:15px}

@media(max-width:700px){
  .app .sidebar nav a{font-size:14px;min-height:40px}
  .site-body .site-sidebar .site-nav-link{font-size:14px;white-space:normal;text-align:center}
  .site-body .site-sidebar .site-navigation{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:1100px){.app .stats{grid-template-columns:repeat(2,minmax(0,1fr))}.app .stats>div:last-child{grid-column:1/-1}}
@media(max-width:1100px){.app .module-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:950px){.wifi-content .wifi-steps{grid-template-columns:1fr}.wifi-content .wifi-steps .module-card{min-height:0}}
@media(max-width:950px){.app .release-info-content{grid-template-columns:1fr}}
@media(max-width:950px){
  .app,.site-body .site-shell{display:block}
  .app .sidebar,.site-body .site-shell>.site-sidebar{position:static;display:block;width:100%;height:auto;min-height:0;padding:14px 18px;overflow-x:auto;white-space:nowrap;border-right:0;border-bottom:1px solid #2b3450}
  .app .sidebar .brand,.site-body .site-sidebar .site-brand{font-size:18px;margin-bottom:9px}
  .app .sidebar .side-label,.app .sidebar .side-footer,.site-body .site-sidebar .site-nav-label,.site-body .site-sidebar-note{display:none}
  .app .sidebar nav,.site-body .site-sidebar .site-navigation,.site-body .site-sidebar .site-nav-group{display:inline-flex;gap:5px;width:auto;margin:0 6px 0 0;vertical-align:middle}
  .app .sidebar nav a,.site-body .site-sidebar .site-nav-link{flex:none;white-space:nowrap;font-size:14px;min-height:40px;padding:9px 11px}
  .site-body .site-shell>.site-main{width:100%;padding:0 22px 25px}
}
@media(max-width:700px){
  .app .sidebar,.site-shell>.site-sidebar{background:var(--ui-sidebar)}
  .site-shell>.site-main>.site-header{margin-top:12px}
  .app .content::before,.site-body .site-main::before{height:240px}
  .app .stats>div:last-child{display:none}
}
@media(max-width:520px){
  .app .module-grid{grid-template-columns:1fr}
  .app .section-four .module-grid{grid-template-columns:1fr}
  .app .module-card{min-height:0}
  .app .overview-strip{align-items:flex-start;gap:10px}
  .app .overview-metric{border-right:0;padding-right:10px}
  .app .overview-note,.app #overview-note{min-width:100%;border-top:1px solid var(--ui-line);padding-top:9px}
}
@media(prefers-reduced-motion:reduce){
  .app .module-card,.app .series-card,.site-body .site-entry,.magic-surface::before{transition:none!important}
  .app .module-card:hover,.app .series-card:hover,.site-body .site-entry:hover{transform:none}
}