:root{
  color-scheme:dark;
  --bg:#050b14;--bg2:#071321;--surface:#0c1828;--surface2:#101f32;
  --surface3:#13243a;--line:#1c324a;--line2:#2a4768;
  --text:#eef5ff;--muted:#8da2ba;--blue:#2588ff;--blue2:#57b9ff;
  --cyan:#6de6ff;--green:#35d981;--red:#ff5d70;--amber:#f4bc54;--purple:#a77cff;
  --shadow:0 20px 70px rgba(0,0,0,.28);
}
*{box-sizing:border-box}
html{min-height:100%;background:var(--bg)}
body{
  margin:0;min-height:100vh;color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:
    radial-gradient(circle at 55% -10%,rgba(31,102,174,.23),transparent 34rem),
    radial-gradient(circle at 10% 55%,rgba(22,76,133,.10),transparent 31rem),
    linear-gradient(180deg,#07111f 0,#050a12 100%);
}
button,input,select{font:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.42}
.hidden{display:none!important}
.good{color:var(--green)!important}.bad{color:var(--red)!important}.warn{color:var(--amber)!important}
.app-header{
  position:sticky;top:0;z-index:40;height:70px;padding:0 max(20px,env(safe-area-inset-left));
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid rgba(38,64,92,.62);
  background:rgba(5,12,22,.82);backdrop-filter:blur(18px);
}
.brand-button{display:flex;align-items:center;gap:11px;border:0;background:none;color:var(--text);padding:6px}
.brand-mark{
  width:35px;height:35px;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(135deg,#54bbff,#1763df 62%,#3c39d8);
  box-shadow:0 6px 22px rgba(37,136,255,.28);font-weight:900;font-size:20px;
}
.brand-mark.large{width:54px;height:54px;border-radius:14px;font-size:29px}
.brand-text{font-size:19px;font-style:normal}.brand-text em{font-style:normal;color:var(--blue)}
.header-actions{display:flex;align-items:center;gap:9px}
.icon-button,.account-button{
  min-height:36px;border:1px solid var(--line);background:#0d1a2a;color:#dbe9fa;border-radius:9px;
}
.icon-button{width:36px;display:grid;place-items:center;font-size:19px}
.account-button{display:flex;gap:8px;align-items:center;padding:4px 10px 4px 5px}
.avatar{width:27px;height:27px;border-radius:8px;background:#183f69;color:#88c7ff;display:grid;place-items:center;font-weight:800}
.backend-pill{display:flex;gap:7px;align-items:center;border:1px solid #1e6144;background:#0a2b1d;color:#8beeb4;border-radius:999px;padding:7px 10px;font-size:11px}
.backend-pill i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 9px var(--green)}
.page-shell{max-width:1540px;margin:auto;padding:26px 30px 80px}
.view{animation:fadeIn .16s ease-out}@keyframes fadeIn{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
.eyebrow{font-size:10px;font-weight:800;letter-spacing:.12em;color:#6f90b1}
.page-heading,.detail-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:20px}
.page-heading h1,.detail-heading h1{font-size:30px;margin:5px 0 4px;letter-spacing:-.03em}
.page-heading p,.detail-heading p{color:var(--muted);margin:0;font-size:13px}
.btn,.small-btn{
  border:1px solid var(--line2);border-radius:8px;color:#e9f3ff;background:#14243a;font-weight:700;
  transition:.15s ease;box-shadow:none;
}
.btn{padding:10px 15px}.small-btn{padding:7px 10px;font-size:11px}
.btn:hover,.small-btn:hover{border-color:#4d79a8;transform:translateY(-1px)}
.btn.primary{background:linear-gradient(180deg,#2c91ff,#176fd6);border-color:#3098ff;color:#fff}
.btn.secondary{background:#101d2e}.btn.danger-outline{color:#ff8592;border-color:#713d49;background:#21131a}
.primary-soft{background:#13375d!important;color:#8dcbff!important;border-color:#2a669d!important}
.wide{width:100%}
.summary-strip{
  display:grid;grid-template-columns:repeat(4,minmax(110px,1fr));gap:10px;margin-bottom:18px;
}
.summary-strip>div{
  border:1px solid var(--line);border-radius:11px;background:linear-gradient(180deg,#0c1929,#091522);
  padding:12px 14px;display:flex;align-items:center;justify-content:space-between;
}
.summary-strip span{font-size:11px;color:var(--muted)}.summary-strip b{font-size:18px}
.printer-grid{display:grid;grid-template-columns:repeat(3,minmax(260px,1fr));gap:15px}
.printer-card{
  overflow:hidden;border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,#0e1c2e,#0a1523);
  box-shadow:0 10px 40px rgba(0,0,0,.16);transition:.18s ease;
}
.printer-card:hover{border-color:#365d85;transform:translateY(-2px);box-shadow:var(--shadow)}
.printer-card.offline{filter:saturate(.55);opacity:.76}
.card-preview{
  position:relative;height:172px;overflow:hidden;
  background:
    radial-gradient(circle at 50% 48%,rgba(44,127,205,.24),transparent 34%),
    linear-gradient(145deg,#0b1b2c,#07101b 70%);
  border-bottom:1px solid var(--line);
}
.card-preview::before,.card-preview::after{
  content:"";position:absolute;left:13%;right:13%;border:1px solid rgba(75,132,182,.20)
}
.card-preview::before{top:18%;bottom:18%}.card-preview::after{top:38%;bottom:38%;border-left:0;border-right:0}
.printer-silhouette{
  position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);
  width:92px;height:96px;border:4px solid #334e69;border-radius:5px;
  box-shadow:inset 0 0 0 1px #15283a,0 18px 38px rgba(0,0,0,.35);
}
.printer-silhouette::before{
  content:"";position:absolute;width:34px;height:17px;left:50%;top:24px;transform:translateX(-50%);
  border-radius:4px;background:#49657f;box-shadow:0 8px 0 -6px #65aee8;
}
.printer-silhouette::after{
  content:"";position:absolute;width:56px;height:7px;left:50%;bottom:18px;transform:translateX(-50%);
  border-radius:4px;background:#274663;box-shadow:0 -21px 30px rgba(44,148,255,.22);
}
.preview-status{position:absolute;top:11px;left:11px;display:flex;gap:6px;align-items:center;padding:5px 8px;border-radius:999px;background:rgba(4,10,18,.72);font-size:10px}
.preview-status i{width:7px;height:7px;border-radius:50%}.preview-status.online i{background:var(--green)}.preview-status.offline i{background:#6d7784}
.preview-badge{position:absolute;top:11px;right:11px;font-size:9px;color:#8fa9c4;background:rgba(4,10,18,.72);border-radius:7px;padding:5px 7px}
.card-body{padding:14px}
.card-title-row{display:flex;align-items:center;justify-content:space-between;gap:10px}.card-title-row h2{font-size:17px;margin:0}
.card-gear{border:0;background:none;color:#7890a8;font-size:17px;padding:4px}.card-gear:hover{color:#bde1ff}
.state-line{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:12px;margin:5px 0 11px}.state-line b.printing{color:#57aeff}.state-line b.paused{color:#f4bc54}.state-line b.idle{color:#5ae096}
.card-progress-row{display:flex;gap:8px;align-items:center;margin-bottom:12px}.card-progress-row .progress-track{flex:1}.card-progress-row b{font-size:11px;color:#8bbef0}
.progress-track{height:5px;background:#16293e;border-radius:999px;overflow:hidden}.progress-track i{height:100%;display:block;width:0;background:linear-gradient(90deg,#1d78e1,#49c5ff);border-radius:inherit}
.card-temps{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px 0;border-top:1px solid #172b40;border-bottom:1px solid #172b40}
.card-temps div span{display:block;color:#758ca5;font-size:9px;text-transform:uppercase;letter-spacing:.07em}.card-temps div b{display:block;margin-top:3px;font-size:13px}
.card-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.card-actions .btn{padding:9px;font-size:11px}
.empty-state{margin:50px auto;text-align:center;max-width:390px;color:var(--muted)}.empty-state h2{color:var(--text)}.empty-icon{font-size:48px;color:#4c87bd}
.login-view{min-height:calc(100vh - 150px);display:grid;grid-template-columns:minmax(280px,460px) minmax(320px,430px);gap:80px;justify-content:center;align-items:center}
.login-brand{padding:20px}.login-brand h1{font-size:42px;letter-spacing:-.04em;margin:16px 0 5px}.login-brand h1 span{color:var(--blue)}.login-brand p{color:var(--muted)}
.login-card{border:1px solid var(--line);background:linear-gradient(180deg,#0e1c2d,#091522);border-radius:15px;padding:25px;box-shadow:var(--shadow)}
.login-card h2{font-size:25px;margin:6px 0}.login-card p{color:var(--muted);margin-top:0}
.login-card label,.small-modal label{display:flex;flex-direction:column;gap:6px;font-size:11px;color:#a8bbcf;margin:12px 0}
.btn.patreon{display:flex;align-items:center;justify-content:center;text-decoration:none;margin-top:18px;background:linear-gradient(180deg,#ff5f6d,#e84d60);border-color:#ff7b86;color:white;font-weight:800}
.btn.patreon:hover{filter:brightness(1.06)}
.login-plan-note{font-size:11px!important;line-height:1.45;color:#8196ad!important;margin:11px 2px 2px!important;text-align:center}
.legacy-login{margin-top:15px}.login-divider{display:flex;align-items:center;gap:9px;margin:15px 0 7px;color:#6f849a;font-size:9px;text-transform:uppercase;letter-spacing:.1em}.login-divider:before,.login-divider:after{content:"";height:1px;background:#1b3046;flex:1}
input,select{
  color:var(--text);border:1px solid var(--line2);background:#0b1726;border-radius:8px;padding:10px 11px;outline:none;
}
input:focus,select:focus{border-color:#3685d2;box-shadow:0 0 0 3px rgba(37,136,255,.11)}
.inline-message{min-height:18px;color:var(--muted);font-size:11px;margin-top:8px}
.breadcrumb{border:0;background:none;color:#61b2f7;padding:0;font-size:11px;margin-bottom:8px}
.detail-title-row{display:flex;align-items:center;gap:11px}.detail-title-row h1{margin:0}
.status-badge{font-size:9px;font-weight:900;padding:5px 8px;border-radius:999px}.status-badge.online{color:#85efb0;background:#0a3221;border:1px solid #226541}.status-badge.offline{color:#aab2bd;background:#242b33;border:1px solid #414b56}
.detail-layout{display:grid;grid-template-columns:minmax(430px,1.22fr) minmax(390px,.78fr);gap:14px}
.surface,.health-card{border:1px solid var(--line);border-radius:13px;background:linear-gradient(180deg,rgba(15,30,48,.98),rgba(8,19,32,.98));box-shadow:0 13px 45px rgba(0,0,0,.13)}
.surface-head{height:56px;padding:0 14px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.surface-head b{display:block;font-size:13px}.surface-kicker{display:block;color:#7692ae;font-size:8px;font-weight:900;letter-spacing:.12em;margin-bottom:3px}
.camera-actions{display:flex;align-items:center;gap:7px}.mini-state{font-size:9px;border-radius:999px;padding:5px 7px}.mini-state.sleeping{color:#91a5ba;background:#142437}.mini-state.live{color:#85efb0;background:#0b3222}
.camera-frame{position:relative;background:#020509;overflow:hidden}
.detail-camera-frame{min-height:410px;border-radius:0 0 13px 13px}
.camera-frame video{display:block;width:100%;height:100%;object-fit:contain;background:#020509}
.detail-camera-frame video{position:absolute;inset:0}
.camera-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;gap:7px;align-items:center;justify-content:center;text-align:center;color:#7f96af;background:radial-gradient(circle,#0e2237,#050b12 70%)}
.camera-placeholder b{color:#c5d4e4}.camera-placeholder span{font-size:10px;max-width:310px}.camera-placeholder .btn{margin-top:5px}
.camera-placeholder-icon{font-size:40px;color:#377bb7}
.camera-live-badge{position:absolute;top:11px;left:11px;display:flex;gap:6px;align-items:center;background:rgba(3,13,10,.8);border:1px solid #225e40;color:#87ebb0;border-radius:999px;padding:5px 8px;font-size:9px}.camera-live-badge i{width:6px;height:6px;background:var(--green);border-radius:50%}
.job-surface{padding-bottom:14px}.job-main{display:grid;grid-template-columns:180px 1fr;gap:15px;padding:14px}
.job-state{font-size:9px;border-radius:999px;padding:5px 8px}.job-state.printing{color:#77c0ff;background:#102f50}.job-state.paused{color:#ffd276;background:#392e15}.job-state.idle{color:#78e7a7;background:#0c3021}.job-state.offline{color:#adb5c0;background:#272d34}
.model-preview{
  min-height:154px;position:relative;overflow:hidden;border:1px solid #284867;border-radius:10px;background:radial-gradient(circle,#17344e,#091725 70%);color:#9bcdf6;
}
.model-thumbnail{
  position:absolute;inset:7px;width:calc(100% - 14px);height:calc(100% - 14px);
  object-fit:contain;object-position:center;opacity:0;z-index:1;pointer-events:none;
  transition:opacity .18s ease,filter .18s ease;
}
.model-preview.has-thumbnail .model-thumbnail{opacity:1}
.model-preview.has-thumbnail::after{
  content:"";position:absolute;inset:auto 0 0;height:44px;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(4,15,25,.78));
}
.model-orbit{position:absolute;width:105px;height:48px;border:1px solid rgba(85,181,255,.28);border-radius:50%;left:50%;top:49%;transform:translate(-50%,-50%) rotate(-17deg);transition:opacity .15s ease}
.model-cube{font-size:59px;position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);text-shadow:0 0 30px rgba(38,146,255,.38);transition:opacity .15s ease}
.model-preview.has-thumbnail .model-orbit,.model-preview.has-thumbnail .model-cube{opacity:0}
.model-label{position:absolute;left:9px;bottom:8px;z-index:3;font-size:8px;letter-spacing:.09em;color:#7390ac}
.model-view-badge{position:absolute;right:8px;top:8px;z-index:3;font-size:8px;border:1px solid #315d85;border-radius:6px;padding:4px 6px;background:rgba(7,23,38,.72);backdrop-filter:blur(3px)}
.job-progress-block{display:flex;flex-direction:column;justify-content:center}.progress-title{display:flex;justify-content:space-between;font-size:11px;margin-bottom:8px}.progress-title span{color:var(--muted)}.progress-title b{font-size:17px}
.job-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:13px}.job-metrics div{border:1px solid #1a324b;background:#0a1827;border-radius:8px;padding:8px}.job-metrics span{display:block;color:#768ea7;font-size:8px}.job-metrics b{display:block;margin-top:4px;font-size:11px}
.control-title{margin:0 14px 8px;color:#829bb4;font-size:9px;text-transform:uppercase;font-weight:900;letter-spacing:.1em}.print-controls{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 14px}
.temperature-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}.temp-card{position:relative;padding:15px}.temp-icon{position:absolute;right:14px;top:13px;color:#4b769c;font-size:19px}.temp-top span{display:block;color:#8aa1b9;font-size:10px}.temp-top b{display:block;font-size:23px;margin-top:3px}.temp-target{display:grid;grid-template-columns:36px 88px 36px 58px;gap:6px;margin-top:12px}.temp-target button{border:1px solid var(--line2);background:#112139;color:#d9e8f8;border-radius:8px}.temp-target input{min-width:0;width:100%;text-align:center;padding:7px}
.health-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-top:14px}.health-card{display:flex;gap:10px;align-items:center;padding:12px}.health-card span,.health-card small{display:block;color:#7890aa;font-size:9px}.health-card b{display:block;font-size:12px;margin:2px 0}.health-icon{width:33px;height:33px;border-radius:9px;display:grid;place-items:center;font-size:16px}.health-icon.blue{background:#12345d;color:#62aef8}.health-icon.green{background:#123a29;color:#5ce196}.health-icon.purple{background:#30204b;color:#be91ff}.health-icon.cyan{background:#123945;color:#6ee8ff}
.activity-surface{margin-top:14px}.activity-list{padding:5px 14px 13px}.activity-row{display:grid;grid-template-columns:9px 1fr auto;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid #142a40}.activity-row:last-child{border:0}.activity-dot{width:7px;height:7px;border-radius:50%;background:var(--blue)}.activity-row span{font-size:10px}.activity-row time{font-size:9px;color:#758ba1}.activity-empty{padding:18px 0;color:#71879e;font-size:10px}
.modal-shell{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:18px}.modal-backdrop{position:absolute;inset:0;background:rgba(1,5,10,.78);backdrop-filter:blur(8px)}
.quick-modal,.small-modal,.viewer-modal{position:relative;z-index:1;border:1px solid #294968;background:linear-gradient(180deg,#0e1f33,#07131f);border-radius:15px;box-shadow:0 35px 100px #0008}
.quick-modal{width:min(880px,96vw);padding:14px}.small-modal{width:min(470px,95vw);padding:17px}.viewer-modal{width:min(1050px,96vw);padding:14px}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.modal-head h2{margin:2px 0 0;font-size:20px}
.quick-camera{height:min(54vh,490px);border-radius:11px}.quick-camera video{position:absolute;inset:0}.spinner{width:29px;height:29px;border:3px solid #183451;border-top-color:#57baff;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.quick-status-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:11px}.quick-status-row div{border:1px solid #1d354e;background:#0a1828;border-radius:9px;padding:8px}.quick-status-row span{display:block;color:#7189a2;font-size:8px}.quick-status-row b{display:block;margin-top:3px;font-size:12px}.quick-progress{margin:10px 1px}.quick-actions{display:grid;grid-template-columns:1fr 1fr 1fr 1.4fr;gap:7px}.camera-diagnostics{display:flex;gap:12px;color:#718ba5;font-size:9px;margin-top:9px}
.settings-kv{display:grid;grid-template-columns:100px 1fr;gap:9px;font-size:11px}.settings-kv span{color:#7890aa}.settings-kv code{overflow-wrap:anywhere;color:#8dcbff}.future-box,.viewer-coming{margin-top:15px;border:1px solid #1e3a55;background:#091827;border-radius:10px;padding:12px;color:#89a2ba;font-size:10px}.future-box b{display:block;color:#c7d8e9;margin-bottom:4px}
.viewer-coming{text-align:center;padding:50px 20px}.viewer-hex{font-size:75px;color:#56b7ff;text-shadow:0 0 35px rgba(37,136,255,.32)}.viewer-coming h3{font-size:21px;color:var(--text);margin:8px}.viewer-coming p{max-width:640px;margin:0 auto;line-height:1.55}.viewer-checks{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:18px}.viewer-checks span{border:1px solid #244766;border-radius:999px;padding:6px 9px}
.account-menu{position:fixed;right:24px;top:62px;z-index:80;width:190px;border:1px solid var(--line2);background:#0b1828;border-radius:10px;box-shadow:var(--shadow);overflow:hidden}.account-menu-head{padding:11px}.account-menu-head b,.account-menu-head span{display:block}.account-menu-head span{font-size:9px;color:var(--muted);margin-top:2px}.account-menu button{width:100%;border:0;border-top:1px solid var(--line);background:#0e1c2d;color:#dce8f5;text-align:left;padding:10px}
.mobile-detail-nav{display:none}
@media(max-width:1120px){.printer-grid{grid-template-columns:repeat(2,minmax(260px,1fr))}.detail-layout{grid-template-columns:1fr}.health-grid{grid-template-columns:1fr 1fr}.detail-camera-frame{min-height:470px}}
@media(max-width:720px){
  .app-header{height:61px;padding:0 12px}.brand-text{font-size:15px}.backend-pill span{display:none}.account-button>span:last-child{display:none}
  .page-shell{padding:18px 12px 86px}.page-heading,.detail-heading{align-items:flex-start}.page-heading h1{font-size:26px}.page-heading p{max-width:260px}
  .page-heading>.btn{padding:9px 10px}.summary-strip{grid-template-columns:1fr 1fr}.printer-grid{grid-template-columns:1fr}.card-preview{height:190px}
  .login-view{display:flex;min-height:calc(100vh - 110px);flex-direction:column;gap:12px;justify-content:center}.login-brand{text-align:center;padding:5px}.login-brand .brand-mark{margin:auto}.login-brand h1{font-size:29px}.login-card{width:100%;max-width:430px}
  .detail-heading{margin-bottom:13px}.detail-heading>.btn{display:none}.detail-title-row h1{font-size:25px}
  .detail-camera-frame{min-height:265px}.job-main{grid-template-columns:132px 1fr;gap:10px;padding:10px}.model-preview{min-height:132px}.job-metrics{grid-template-columns:1fr}.job-metrics div:nth-child(1),.job-metrics div:nth-child(3){display:none}
  .temperature-grid,.health-grid{grid-template-columns:1fr}.temp-target{grid-template-columns:42px 1fr 42px 62px}
  .quick-modal{padding:10px}.quick-camera{height:42vh;min-height:240px}.quick-status-row{grid-template-columns:1fr 1fr}.quick-actions{grid-template-columns:1fr 1fr}.quick-actions .secondary{grid-column:1/-1}.camera-diagnostics{flex-wrap:wrap}
  .mobile-detail-nav{position:fixed;z-index:55;left:0;right:0;bottom:0;height:68px;padding-bottom:env(safe-area-inset-bottom);display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line2);background:rgba(6,14,24,.94);backdrop-filter:blur(14px)}
  .mobile-detail-nav button{border:0;background:none;color:#7f96ad;display:flex;flex-direction:column;gap:2px;align-items:center;justify-content:center}.mobile-detail-nav button:first-child{color:#58b5ff}.mobile-detail-nav span{font-size:8px}
}


/* v0.7.2 native JPEG snapshots */
.card-snapshot{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  background:#020509;
  z-index:0;
}
.card-preview:has(.card-snapshot:not(.hidden))::before,
.card-preview:has(.card-snapshot:not(.hidden))::after{
  display:none;
}
.card-preview .preview-status,
.card-preview .preview-badge{z-index:3}
.card-preview .printer-silhouette{z-index:2}


/* v0.7.3 active-job / printer controls */
.controls-surface{margin-top:14px}
.control-stack{display:grid;grid-template-columns:repeat(2,minmax(250px,1fr));gap:10px;padding:13px}
.fan-control,.led-control{
  border:1px solid #1b354f;background:#091827;border-radius:10px;padding:11px 12px;
}
.fan-control-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.fan-control-head span,.led-control span{font-size:11px;color:#b9ccdf}
.fan-control-head b{font-size:13px;color:#72c0ff}
.fan-control-line{display:grid;grid-template-columns:1fr 56px;gap:9px;align-items:center}
.fan-control-line input[type=range]{width:100%;padding:0;border:0;background:transparent;accent-color:#2588ff}
.led-control{display:flex;align-items:center;justify-content:space-between;gap:14px}
.led-control small{display:block;color:#718aa4;font-size:8px;margin-top:3px}
.toggle-control{
  width:78px;height:34px;border-radius:999px;border:1px solid #31516f;background:#122236;color:#859bb1;
  display:flex;align-items:center;gap:8px;padding:4px 9px 4px 5px;font-size:9px;font-weight:800
}
.toggle-control i{width:24px;height:24px;border-radius:50%;background:#526274;transition:.18s ease}
.toggle-control.on{background:#123b29;border-color:#2b7850;color:#87ebb0}
.toggle-control.on i{background:#39d982;transform:translateX(33px)}
.toggle-control.on span{transform:translateX(-27px)}
.controls-empty{grid-column:1/-1;color:#758ba1;font-size:10px;padding:10px 3px}
.card-file{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#7790a9;font-size:9px;
  margin:-4px 0 9px;
}
.job-file-meta{display:flex;gap:8px;flex-wrap:wrap;color:#738da6;font-size:8px;margin-top:8px}
.job-file-meta span{border:1px solid #19324b;background:#091726;border-radius:7px;padding:5px 7px}
@media(max-width:720px){
  .control-stack{grid-template-columns:1fr}
}


/* ============================================================
   v0.7.4 DASHBOARD POLISH
   Desktop My Printers page brought close to the approved mockup.
   Printer detail page keeps the proven v0.7.3 functional layout.
   ============================================================ */

:root{
  --dash-card:#0d1929;
  --dash-card-2:#101d2d;
  --dash-border:#29435e;
  --dash-border-soft:#1c3249;
  --dash-blue:#2d8cff;
  --dash-blue-bright:#3da1ff;
}

body{
  background:
    radial-gradient(1000px 580px at 53% 3%, rgba(30,79,135,.16), transparent 60%),
    linear-gradient(180deg,#081320 0,#050c15 72%,#050b13 100%);
}

.app-header{
  height:68px;
  padding:0 30px;
  background:linear-gradient(180deg,rgba(12,24,39,.96),rgba(8,18,31,.96));
  border-bottom:1px solid #15283b;
  box-shadow:0 8px 30px rgba(0,0,0,.18);
}
.brand-mark{
  width:38px;height:38px;border-radius:9px;
  clip-path:polygon(50% 0,93% 23%,93% 77%,50% 100%,7% 77%,7% 23%);
  background:linear-gradient(135deg,#62c5ff 0,#248bff 42%,#365bff 100%);
  border-radius:0;
}
.brand-text{font-size:20px;letter-spacing:-.02em}
.brand-text em{color:#338cff}

.page-shell{
  max-width:1600px;
  padding:32px 32px 80px;
}

#dashboardView .page-heading{
  margin-bottom:24px;
  align-items:center;
}
#dashboardView .page-heading .eyebrow{display:none}
#dashboardView .page-heading h1{
  font-size:31px;
  margin:0 0 6px;
  letter-spacing:-.035em;
}
#dashboardView .page-heading p{
  font-size:13px;
  color:#a0aec0;
}
#dashboardView .page-heading>.btn{
  min-width:154px;
  min-height:43px;
  font-size:13px;
  border-radius:7px;
  box-shadow:0 8px 28px rgba(18,111,231,.25),inset 0 1px 0 rgba(255,255,255,.15);
}

.summary-strip{
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin-bottom:28px;
}
.summary-strip>div.summary-card{
  min-height:92px;
  padding:16px 18px;
  justify-content:flex-start;
  gap:15px;
  border:1px solid #29425c;
  border-radius:10px;
  background:
    radial-gradient(circle at 17% 45%,rgba(43,129,222,.10),transparent 27%),
    linear-gradient(180deg,#101d2c,#0b1725);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 10px 30px rgba(0,0,0,.08);
}
.summary-icon{
  width:49px;height:49px;border-radius:50%;display:grid;place-items:center;
  border:1px solid #174a78;background:#0a2846;
}
.summary-icon svg{
  width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
.summary-icon.printer-icon{color:#d4e9ff;background:#0d2741}
.summary-icon.online-icon{color:#47e4d3;background:#0b3138;border-color:#175766}
.summary-icon.printing-icon{color:#ca71ff;background:#291443;border-color:#563174}
.summary-icon.paused-icon{color:#ff9b45;background:#351e10;border-color:#6a3d1d}
.summary-copy{display:flex;flex-direction:column;gap:3px}
.summary-copy small{font-size:12px;color:#a7b8ca}
.summary-copy b{font-size:22px!important;color:#fff;line-height:1}

.printer-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:22px;
  align-items:stretch;
  margin-bottom:26px;
}
.printer-card{
  min-width:0;
  border-radius:10px;
  border:1px solid #3b4f62;
  background:linear-gradient(180deg,#111d2b,#0a1624);
  box-shadow:0 18px 50px rgba(0,0,0,.19),inset 0 1px 0 rgba(255,255,255,.025);
}
.printer-card:hover{
  border-color:#3f75ab;
  transform:translateY(-2px);
  box-shadow:0 22px 60px rgba(0,0,0,.25),0 0 0 1px rgba(40,136,255,.08);
}
.printer-card.offline{
  opacity:.56;
  filter:saturate(.35);
}
.card-preview{
  height:178px;
  border-bottom:1px solid #24384c;
  background:#05090e;
}
.card-snapshot{
  object-fit:cover;
}
.preview-status{
  top:13px;left:13px;
  padding:6px 9px;
  background:rgba(8,16,25,.52);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  border:1px solid rgba(89,115,138,.32);
  font-size:11px;
  text-transform:none;
}
.preview-badge{
  top:13px;right:13px;
  padding:6px 9px;
  background:rgba(8,16,25,.48);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  border:1px solid rgba(56,91,123,.34);
  color:#8aa9c7;
  font-size:9px;
  border-radius:999px;
}
.card-body{padding:13px 15px 15px}
.card-title-row{min-height:37px}
.card-printer-title{display:flex;align-items:center;gap:10px;min-width:0}
.card-printer-icon{
  flex:0 0 auto;width:35px;height:35px;border-radius:7px;
  display:grid;place-items:center;
  border:1px solid #2d4054;background:#101e2e;color:#dceaff;
  font-size:18px;
}
.card-title-row h2{
  font-size:18px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.card-gear{
  width:34px;height:34px;border:0;border-radius:8px;
  background:transparent;color:#aec2d6;
}
.card-gear:hover{background:#14263a;color:#e1efff}
.state-line{
  margin:4px 0 12px;
  padding-left:45px;
  font-size:11px;
}
.card-file{
  padding-left:45px;
  margin:-7px 0 10px;
  color:#829bb4;
}
.card-progress-row{
  margin:6px 4px 13px;
}
.card-progress-row .progress-track{height:6px}
.card-progress-row b{font-size:12px;color:#e4eff9}
.card-temps{
  gap:0;
  padding:13px 0;
  border-top:1px solid #26394b;
  border-bottom:0;
}
.card-temps>div{padding:0 12px}
.card-temps>div+div{border-left:1px solid #24394c}
.card-temps div span{
  color:#9aacc0;font-size:10px;text-transform:none;letter-spacing:0;
}
.card-temps div b{
  font-size:16px;
  margin-top:5px;
}
.card-actions{
  gap:10px;margin-top:13px;
}
.card-actions .btn{
  min-height:42px;
  font-size:12px;
  border-radius:7px;
}
.card-actions .btn.secondary{
  border-color:#3b5066;
  background:#101d2c;
}
.card-actions .btn.primary{
  background:linear-gradient(180deg,#3897ff,#176ce9);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 7px 20px rgba(22,104,218,.18);
}

.add-printer-card{
  min-height:445px;
  border:1px dashed #2664a6;
  border-radius:10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:32px;
  background:
    radial-gradient(circle at 50% 42%,rgba(36,116,207,.09),transparent 30%),
    rgba(8,17,29,.46);
  transition:.16s ease;
}
.add-printer-card:hover{
  border-color:#3b8dec;
  background:
    radial-gradient(circle at 50% 42%,rgba(36,116,207,.14),transparent 30%),
    rgba(10,21,35,.67);
}
.add-printer-plus{
  width:55px;height:55px;border-radius:50%;
  display:grid;place-items:center;
  color:#3f96ff;font-size:38px;font-weight:200;
  border:3px solid #3189ef;
  margin-bottom:18px;
}
.add-printer-card h2{font-size:20px;margin:0 0 12px}
.add-printer-card p{
  max-width:220px;margin:0 0 25px;
  color:#8f9eae;font-size:13px;line-height:1.55;
}
.add-printer-card .btn{min-width:165px}

.dashboard-activity{
  border:1px solid #31475d;
  border-radius:10px;
  background:linear-gradient(180deg,#0e1b2a,#091522);
  overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.12);
}
.dashboard-section-head{
  min-height:64px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 18px;
  border-bottom:1px solid #283c50;
}
.dashboard-section-title{display:flex;align-items:center;gap:10px}
.dashboard-section-title h2{font-size:18px;margin:0}
.activity-pulse-icon{font-size:25px;color:#2d8cff}
.text-action{
  border:0;background:none;color:#368fff;
  font-size:12px;padding:8px;
}
.text-action span{font-size:22px;vertical-align:-2px;margin-left:7px}
.dashboard-activity-list{padding:0 17px}
.dashboard-activity-row{
  min-height:54px;
  display:grid;
  grid-template-columns:34px minmax(240px,1fr) minmax(150px,.7fr) auto;
  align-items:center;gap:12px;
  border-bottom:1px solid #21364a;
}
.dashboard-activity-row:last-child{border-bottom:0}
.dashboard-activity-icon{
  width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;
  color:#fff;font-size:12px;font-weight:900;
  background:#237ad9;
}
.dashboard-activity-icon.good{background:#25a964}
.dashboard-activity-icon.bad{background:#d64b5a}
.dashboard-activity-row strong{font-size:12px}
.dashboard-activity-source{font-size:11px;color:#3d95ff}
.dashboard-activity-row time{font-size:11px;color:#8494a6}
.dashboard-activity-empty{padding:22px 2px;color:#778b9f;font-size:11px}

@media(max-width:1350px){
  .printer-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:1040px){
  .summary-strip{grid-template-columns:1fr 1fr}
  .printer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:720px){
  .app-header{padding:0 13px}
  .page-shell{padding:18px 12px 86px}
  #dashboardView .page-heading{align-items:flex-start}
  #dashboardView .page-heading>.btn{display:none}
  .summary-strip{grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px}
  .summary-strip>div.summary-card{min-height:71px;padding:10px}
  .summary-icon{width:38px;height:38px}
  .summary-icon svg{width:19px;height:19px}
  .summary-copy small{font-size:10px}
  .summary-copy b{font-size:18px!important}
  .printer-grid{grid-template-columns:1fr;gap:13px}
  .printer-card,.add-printer-card{min-height:0}
  .add-printer-card{padding:26px;min-height:250px}
  .card-preview{height:195px}
  .dashboard-activity-row{
    grid-template-columns:30px 1fr auto;
  }
  .dashboard-activity-source{display:none}
}


/* ============================================================
   v0.7.4.1 CLEAN DASHBOARD
   Main dashboard intentionally keeps only high-frequency content:
   printer cards + recent activity. Pairing moved to the profile menu.
   ============================================================ */

#dashboardView .page-heading{
  margin-bottom:25px;
}

#dashboardView .page-heading>div{
  width:100%;
}

/* No permanent low-frequency "Add printer" CTA in the main content. */
#dashboardView .page-heading>.btn{
  display:none!important;
}

/* Printer layout becomes the visual hero of the page. */
.printer-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
  margin-bottom:27px;
  max-width:none;
}

/* Cards are deliberately a little wider, matching the concept render. */
.printer-card{
  min-height:438px;
}

.card-preview{
  height:184px;
}

.dashboard-activity{
  margin-top:2px;
}

/* Profile menu is now the home of rare account/device actions. */
.account-menu{
  width:205px;
}
.account-menu button{
  display:flex;
  align-items:center;
  gap:9px;
  color:#d7e4f2;
}
.account-menu button:hover{
  background:#12243a;
}
.account-menu-icon{
  width:22px;
  height:22px;
  border-radius:6px;
  display:grid;
  place-items:center;
  background:#102a47;
  color:#58adff;
  font-size:14px;
}

/* v0.7.4 Add Printer tile is intentionally retired. */
.add-printer-card{
  display:none!important;
}

@media(max-width:1200px){
  .printer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:720px){
  .printer-grid{grid-template-columns:1fr}
  .printer-card{min-height:0}
}


/* ============================================================
   v0.7.4.2 COMPACT PRINTER CARDS
   The printer card should be a compact monitoring tile, not a
   full-width dashboard panel.  Camera source is 16:9, so keep
   the preview at the native visual aspect instead of stretching
   the card horizontally and turning the snapshot into a strip.
   ============================================================ */

/* Fixed visual card width on desktop, packed from the left. */
.printer-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, 360px);
  justify-content:start;
  align-items:start;
  gap:20px;
}

/* Do not force the card to fill a wide fractional grid column. */
.printer-card{
  width:360px;
  max-width:100%;
  min-height:0;
}

/* Native K1 camera output is 16:9. */
.card-preview{
  width:100%;
  height:auto;
  aspect-ratio:16 / 9;
  min-height:0;
}

/* Show the whole camera frame. With a 16:9 source this normally
   fills perfectly; contain is intentionally used as a safety net
   for future cameras with another aspect ratio. */
.card-snapshot{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  background:#03070c;
}

/* Slightly denser lower half, closer to OE-style efficient cards. */
.card-body{
  padding:12px 14px 13px;
}
.card-title-row{
  min-height:34px;
}
.card-printer-icon{
  width:32px;
  height:32px;
  font-size:16px;
}
.card-title-row h2{
  font-size:16px;
}
.state-line{
  padding-left:42px;
  margin:3px 0 10px;
}
.card-file{
  padding-left:42px;
}
.card-temps{
  padding:11px 0;
}
.card-temps div b{
  font-size:15px;
}
.card-actions{
  margin-top:11px;
}
.card-actions .btn{
  min-height:39px;
}

/* Recent activity spans the dashboard and is visually independent
   from the narrower printer tiles. */
.dashboard-activity{
  width:100%;
}

/* Responsive: preserve compactness until there is genuinely not
   enough room, then let the single card use the available width. */
@media(max-width:820px){
  .printer-grid{
    grid-template-columns:repeat(auto-fill,minmax(300px,360px));
  }
}
@media(max-width:420px){
  .printer-grid{
    grid-template-columns:1fr;
  }
  .printer-card{
    width:100%;
  }
}


/* v0.7.4.4 CSP-safe dynamic UI */
.pcm-progress{
  display:block;
  width:100%;
  height:6px;
  border:0;
  border-radius:999px;
  overflow:hidden;
  appearance:none;
  -webkit-appearance:none;
  background:#16293e;
}
.pcm-progress::-webkit-progress-bar{
  background:#16293e;
  border-radius:999px;
}
.pcm-progress::-webkit-progress-value{
  background:linear-gradient(90deg,#1d78e1,#49c5ff);
  border-radius:999px;
}
.pcm-progress::-moz-progress-bar{
  background:linear-gradient(90deg,#1d78e1,#49c5ff);
  border-radius:999px;
}
.card-progress-row .pcm-progress{flex:1}
.quick-progress{margin:10px 1px}

.activity-dot.info{background:#2588ff}
.activity-dot.good{background:#35d981}
.activity-dot.bad{background:#ff5d70}


/* ============================================================
   v0.7.5 ICON SYSTEM
   ============================================================ */

.ui-icon{
  --icon:none;
  display:inline-block;
  width:1em;
  height:1em;
  flex:0 0 auto;
  background:currentColor;
  -webkit-mask:var(--icon) center / contain no-repeat;
  mask:var(--icon) center / contain no-repeat;
  vertical-align:-.12em;
}
.icon-printer3d{--icon:url('/assets/icons/printer-3d.svg')}
.icon-extruder{--icon:url('/assets/icons/extruder.svg')}
.icon-heat-bed{--icon:url('/assets/icons/heat-bed.svg')}
.icon-fan{--icon:url('/assets/icons/fan.svg')}
.icon-gear{--icon:url('/assets/icons/gear.svg')}
.icon-eye{--icon:url('/assets/icons/eye.svg')}
.icon-arrow-up-right{--icon:url('/assets/icons/arrow-up-right.svg')}
.icon-camera{--icon:url('/assets/icons/camera.svg')}
.icon-lightbulb{--icon:url('/assets/icons/lightbulb.svg')}

.card-printer-icon{
  color:#cfe7ff;
}
.card-printer-icon .ui-icon{
  width:21px;
  height:21px;
}

.card-gear{
  display:grid;
  place-items:center;
}
.card-gear .ui-icon{
  width:17px;
  height:17px;
}

.preview-badge{
  display:flex;
  align-items:center;
  gap:5px;
}
.preview-badge .ui-icon{
  width:12px;
  height:12px;
  color:#76bfff;
}

.card-temp-label{
  display:flex!important;
  align-items:center;
  gap:6px;
}
.card-temp-label .ui-icon{
  width:14px;
  height:14px;
  color:#a9bfd4;
}

.card-actions .btn,
.icon-text-button{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
}
.card-actions .btn .ui-icon{
  width:15px;
  height:15px;
}
.card-actions .btn.secondary .ui-icon{
  color:#c8ddf2;
}
.card-actions .btn.primary .ui-icon{
  color:#fff;
}

.icon-text-button .ui-icon{
  width:15px;
  height:15px;
}

.temp-icon{
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border:1px solid #24425f;
  border-radius:8px;
  background:#0d2134;
}
.temp-icon .ui-icon{
  width:19px;
  height:19px;
  color:#77baff;
}

.control-label-with-icon{
  display:flex!important;
  align-items:center;
  gap:7px;
}
.control-label-with-icon .ui-icon{
  width:16px;
  height:16px;
  color:#86bde8;
}
#ledRow .control-label-with-icon .ui-icon{
  color:#f2c86b;
}


/* ============================================================
   v0.8.0 MOBILE-FIRST PREVIEW
   ============================================================ */

.mobile-dashboard-nav,
.mobile-overview-surface{
  display:none;
}

.icon-activity{--icon:url('/assets/icons/activity.svg')}
.icon-user{--icon:url('/assets/icons/user.svg')}
.icon-sliders{--icon:url('/assets/icons/sliders.svg')}
.icon-job{--icon:url('/assets/icons/job.svg')}
.icon-overview{--icon:url('/assets/icons/overview.svg')}

@media(max-width:720px){
  html{scroll-padding-top:68px}
  body{min-width:0;overscroll-behavior-y:contain}

  .app-header{
    height:58px;
    padding:env(safe-area-inset-top) max(11px,env(safe-area-inset-right)) 0 max(11px,env(safe-area-inset-left));
  }
  .brand-button{gap:8px;padding:4px 2px}
  .brand-mark{width:31px;height:31px;border-radius:8px;font-size:17px}
  .brand-text{font-size:15px}
  .backend-pill{display:none}
  .account-button{min-width:36px;min-height:36px;padding:4px;justify-content:center}
  .account-button .avatar{width:28px;height:28px}

  .page-shell{width:100%;padding:15px 10px calc(86px + env(safe-area-inset-bottom))}

  /* Dashboard */
  #dashboardView .page-heading{margin:0 3px 15px}
  #dashboardView .page-heading .eyebrow,
  #dashboardView .page-heading p{display:none}
  #dashboardView .page-heading h1{margin:1px 0;font-size:23px}

  #dashboardView[data-mobile-tab="activity"] .page-heading,
  #dashboardView[data-mobile-tab="activity"] .printer-grid,
  #dashboardView[data-mobile-tab="activity"] #emptyState{display:none!important}
  #dashboardView[data-mobile-tab="printers"] .dashboard-activity{display:none!important}
  #dashboardView[data-mobile-tab="activity"] .dashboard-activity{display:block!important;margin:0}

  .printer-grid{display:grid;grid-template-columns:1fr!important;gap:13px;width:100%}
  .printer-card{width:100%!important;max-width:none!important;border-radius:15px}
  .printer-card:hover{transform:none}
  .card-preview{width:100%;aspect-ratio:16/9;height:auto!important}
  .card-body{padding:12px 13px 13px}
  .card-title-row{min-height:35px}
  .card-title-row h2{font-size:16px}
  .state-line{font-size:10px}
  .card-temps{gap:8px}
  .card-temps div{min-width:0}
  .card-temps div b{font-size:14px}
  .card-actions{gap:8px}
  .card-actions .btn{min-height:46px;padding:10px 8px;font-size:11px}
  .card-gear{min-width:42px;min-height:42px}

  .dashboard-activity{border-radius:14px}
  .dashboard-section-head{min-height:54px;padding:0 13px}
  .dashboard-section-title h2{font-size:15px}
  .dashboard-activity-row{min-height:58px;grid-template-columns:34px minmax(0,1fr) auto;gap:9px;padding:8px 12px}
  .dashboard-activity-row strong{font-size:12px;overflow-wrap:anywhere}

  .mobile-dashboard-nav,
  .mobile-detail-nav{
    position:fixed;z-index:65;left:0;right:0;bottom:0;min-height:64px;
    padding:3px max(8px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(8px,env(safe-area-inset-left));
    border-top:1px solid #253e59;background:rgba(5,13,23,.96);backdrop-filter:blur(18px);
    box-shadow:0 -8px 35px rgba(0,0,0,.26)
  }
  .mobile-dashboard-nav{display:grid;grid-template-columns:repeat(3,1fr)}
  .mobile-dashboard-nav button,
  .mobile-detail-nav button{
    min-height:58px;border:0;background:none;color:#70879e;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:4px;font:inherit
  }
  .mobile-dashboard-nav button .ui-icon,
  .mobile-detail-nav button .ui-icon{width:20px;height:20px}
  .mobile-dashboard-nav button span:last-child,
  .mobile-detail-nav button span:last-child{font-size:9px;font-weight:700}
  .mobile-dashboard-nav button[aria-current="page"],
  .mobile-detail-nav button[aria-current="page"]{color:#55b6ff}

  .account-menu{
    top:auto;right:8px;left:8px;bottom:calc(70px + env(safe-area-inset-bottom));width:auto;
    border-radius:15px;box-shadow:0 20px 70px #000a
  }
  .account-menu-head{padding:14px}
  .account-menu button{min-height:50px;font-size:12px}

  /* Printer header */
  #printerView .detail-heading{min-height:52px;margin:0 2px 12px;align-items:center}
  #printerView .detail-heading>div{min-width:0;flex:1}
  #printerView .breadcrumb{margin-bottom:4px;font-size:10px}
  #printerView .detail-title-row{min-width:0}
  #printerView .detail-title-row h1{
    max-width:calc(100vw - 155px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    font-size:20px;margin:1px 0
  }
  #printerView #detailMeta{display:none}
  #printerView .detail-heading>.btn{
    display:grid!important;place-items:center;min-width:42px;width:42px;height:42px;padding:0
  }
  #printerView .detail-heading>.btn span:last-child{display:none}
  #printerView .detail-heading>.btn .ui-icon{width:18px;height:18px}

  /* Mobile section switcher */
  .mobile-overview-surface{display:none}
  #printerView .detail-layout{display:contents}
  #printerView .camera-surface,
  #printerView .job-surface,
  #printerView .temperature-grid,
  #printerView #printerControlsSurface,
  #printerView .health-grid,
  #printerView .activity-surface{display:none!important}

  #printerView[data-mobile-tab="overview"] .mobile-overview-surface{display:block!important}
  #printerView[data-mobile-tab="camera"] .camera-surface{display:block!important}
  #printerView[data-mobile-tab="controls"] .temperature-grid{display:grid!important}
  #printerView[data-mobile-tab="controls"] #printerControlsSurface:not(.hidden){display:block!important}
  #printerView[data-mobile-tab="job"] .job-surface,
  #printerView[data-mobile-tab="job"] .activity-surface{display:block!important}

  .mobile-detail-nav{display:grid!important;grid-template-columns:repeat(4,1fr)}

  /* Overview */
  .mobile-overview-surface{overflow:hidden;border-radius:15px}
  .mobile-overview-head{
    min-height:58px;padding:11px 13px;border-bottom:1px solid var(--line);
    display:flex;align-items:center;justify-content:space-between;gap:10px
  }
  .mobile-overview-head>div{min-width:0}
  .mobile-overview-head b{
    display:block;max-width:65vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px
  }
  .mobile-overview-progress{padding:15px 13px 10px}
  .mobile-overview-progress .pcm-progress{height:8px}
  .mobile-overview-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:0 13px 12px}
  .mobile-overview-metrics div{padding:9px 8px;border:1px solid #1c354e;border-radius:9px;background:#091827}
  .mobile-overview-metrics span,
  .mobile-overview-temps span{display:block;color:#7890a8;font-size:9px}
  .mobile-overview-metrics b{display:block;margin-top:3px;font-size:12px}
  .mobile-overview-temps{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 13px 13px}
  .mobile-overview-temps>div{padding:11px;border:1px solid #1c354e;border-radius:10px;background:#0a1929}
  .mobile-overview-temps b{display:block;margin-top:7px;font-size:14px}
  .mobile-overview-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 13px 13px}
  .mobile-overview-actions .btn{min-height:47px}
  .mobile-overview-actions .danger-outline{grid-column:1/-1}
  #mobileCommandMessage{margin:0 13px 12px}

  /* Camera */
  #printerView[data-mobile-tab="camera"] .camera-surface{border-radius:15px;overflow:hidden}
  .camera-surface .surface-head{min-height:54px;height:auto;padding:9px 12px}
  .camera-actions .small-btn{min-height:40px}
  .detail-camera-frame{min-height:0!important;height:auto;aspect-ratio:16/9}
  .camera-placeholder .btn{min-height:45px}

  /* Controls */
  #printerView[data-mobile-tab="controls"] .temperature-grid{grid-template-columns:1fr;gap:10px;margin-top:0}
  .temp-card{min-height:112px}
  .temp-target button,
  .temp-target input,
  .fan-control-line .small-btn,
  .toggle-control{min-height:44px}
  .controls-surface{margin-top:10px}
  .control-stack{padding:10px;gap:9px}
  .fan-control,.led-control{padding:12px}
  .fan-control-line input[type=range]{min-height:38px}

  /* Job */
  #printerView[data-mobile-tab="job"] .job-surface{border-radius:15px;overflow:hidden}
  .job-main{grid-template-columns:112px minmax(0,1fr);gap:10px;padding:11px}
  .model-preview{min-height:112px}
  .job-metrics{grid-template-columns:1fr 1fr 1fr;gap:5px}
  .job-metrics div:nth-child(1),
  .job-metrics div:nth-child(3){display:block}
  .print-controls .btn{min-height:46px}
  .activity-surface{margin-top:10px}

  /* Quick View bottom sheet */
  #quickModal{place-items:end center;padding:0}
  #quickModal .modal-backdrop{backdrop-filter:blur(5px)}
  .quick-modal{
    width:100vw;max-width:none;max-height:calc(96dvh - env(safe-area-inset-top));overflow:auto;
    padding:12px 10px calc(12px + env(safe-area-inset-bottom));
    border-left:0;border-right:0;border-bottom:0;border-radius:18px 18px 0 0
  }
  .quick-modal .modal-head{
    position:sticky;top:-12px;z-index:4;margin:-12px -10px 10px;padding:12px 10px 10px;
    background:rgba(10,24,39,.96);backdrop-filter:blur(14px);border-bottom:1px solid #1c344d
  }
  .quick-modal .modal-head h2{font-size:18px}
  .quick-modal .icon-button{min-width:42px;width:42px;height:42px}
  .quick-camera{width:100%;height:auto!important;min-height:0!important;aspect-ratio:16/9;border-radius:12px}
  .quick-status-row{grid-template-columns:1fr 1fr;gap:7px;margin-top:9px}
  .quick-status-row div{min-height:50px;padding:9px 10px}
  .quick-status-row span{font-size:9px}
  .quick-status-row b{font-size:12px}
  .quick-progress{height:8px;margin:10px 2px}
  .quick-actions{grid-template-columns:1fr 1fr;gap:8px}
  .quick-actions .btn{min-height:47px}
  .quick-actions .secondary{grid-column:1/-1}
  .camera-diagnostics{padding-bottom:4px}

  /* Setup/settings bottom sheets */
  #settingsModal,#pairModal{place-items:end center;padding:0}
  #settingsModal .small-modal,
  #pairModal .small-modal{
    width:100vw;max-width:none;max-height:90dvh;overflow:auto;border-left:0;border-right:0;border-bottom:0;
    border-radius:18px 18px 0 0;padding:16px 13px calc(16px + env(safe-area-inset-bottom))
  }
}

@media(max-width:370px){
  .card-actions{grid-template-columns:1fr}
  .card-actions .btn{width:100%}
  .mobile-overview-metrics{grid-template-columns:1fr 1fr}
  .mobile-overview-metrics div:last-child{grid-column:1/-1}
  .job-main{grid-template-columns:1fr}
}


/* v0.8.1 mobile refinement */
@media(max-width:720px){
  /* Quick View is centered on the usable mobile viewport, not a bottom sheet. */
  #quickModal{
    place-items:center;
    padding:max(12px,env(safe-area-inset-top))
            max(10px,env(safe-area-inset-right))
            max(12px,env(safe-area-inset-bottom))
            max(10px,env(safe-area-inset-left));
  }
  .quick-modal{
    width:min(100%,520px);
    max-width:520px;
    max-height:calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow:auto;
    padding:12px;
    border:1px solid #25415e;
    border-radius:17px;
    box-shadow:0 24px 80px rgba(0,0,0,.58);
  }
  .quick-modal .modal-head{
    position:sticky;
    top:-12px;
    z-index:4;
    margin:-12px -12px 10px;
    padding:12px 12px 10px;
    border-radius:17px 17px 0 0;
  }

  /* Camera first in Full Control > Overview. */
  #printerView[data-mobile-tab="overview"]{
    display:flex;
    flex-direction:column;
  }
  #printerView[data-mobile-tab="overview"] .detail-heading{order:0}
  #printerView[data-mobile-tab="overview"] .detail-layout{display:contents}

  #printerView[data-mobile-tab="overview"] .camera-surface{
    display:block!important;
    order:1;
    margin-bottom:10px;
    border-radius:15px;
    overflow:hidden;
  }
  #printerView[data-mobile-tab="overview"] .mobile-overview-surface{
    display:block!important;
    order:2;
  }
  #printerView[data-mobile-tab="overview"] .mobile-detail-nav{order:99}

  #printerView[data-mobile-tab="overview"] .job-surface,
  #printerView[data-mobile-tab="overview"] .temperature-grid,
  #printerView[data-mobile-tab="overview"] #printerControlsSurface,
  #printerView[data-mobile-tab="overview"] .health-grid,
  #printerView[data-mobile-tab="overview"] .activity-surface{
    display:none!important;
  }

  #printerView[data-mobile-tab="overview"] .camera-surface .surface-head{
    min-height:50px;
    padding:8px 11px;
  }
  #printerView[data-mobile-tab="overview"] .detail-camera-frame{
    width:100%;
    aspect-ratio:16/9;
    min-height:0!important;
    height:auto!important;
  }
}

@media(max-width:720px) and (max-height:620px){
  #quickModal{
    align-items:flex-start;
    padding-top:max(8px,env(safe-area-inset-top));
  }
  .quick-modal{
    max-height:calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
}


/* ============================================================
   v0.8.3 MOBILE WIDGET / PAGE EDITOR
   ============================================================ */

.mobile-layout-menu-action{display:none!important}
.account-menu-svg{width:17px;height:17px;color:#8cb9de}

@media(max-width:720px){
  .mobile-layout-menu-action{display:flex!important;align-items:center;gap:10px}

  .widget-page-nav{
    display:flex!important;
    grid-template-columns:none!important;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
    justify-content:stretch;
  }
  .widget-page-nav::-webkit-scrollbar{display:none}
  .widget-page-nav button{flex:1 0 82px;min-width:82px;max-width:160px}

  #printerView{display:flex;flex-direction:column}
  #printerView .detail-heading{order:0}
  #printerView .detail-layout{display:contents!important}
  #printerView .mobile-detail-nav{order:99}

  #printerView [data-mobile-widget].mw-hidden{display:none!important}
  #printerView [data-mobile-widget].mw-visible:not(.hidden){display:block!important;margin-bottom:10px}
  #printerView .temperature-grid.mw-visible:not(.hidden),
  #printerView .health-grid.mw-visible:not(.hidden){display:grid!important}

  #printerView .mw-order-0{order:1}
  #printerView .mw-order-1{order:2}
  #printerView .mw-order-2{order:3}
  #printerView .mw-order-3{order:4}
  #printerView .mw-order-4{order:5}
  #printerView .mw-order-5{order:6}
  #printerView .mw-order-6{order:7}
  #printerView .mw-order-7{order:8}
  #printerView .mw-order-8{order:9}
  #printerView .mw-order-9{order:10}
  #printerView .mw-order-10{order:11}
  #printerView .mw-order-11{order:12}

  #printerView .camera-surface.mw-visible,
  #printerView .job-surface.mw-visible,
  #printerView .mobile-overview-surface.mw-visible,
  #printerView #printerControlsSurface.mw-visible,
  #printerView .activity-surface.mw-visible{
    width:100%;
    border-radius:15px;
    overflow:hidden;
  }
  #printerView .temperature-grid.mw-visible,
  #printerView .health-grid.mw-visible{width:100%;margin-top:0}

  #layoutModal{
    place-items:center;
    padding:max(10px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right))
            max(10px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
  }
  .mobile-layout-editor{
    position:relative;
    z-index:2;
    width:min(100%,560px);
    max-height:calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow:auto;
    border:1px solid #294966;
    border-radius:18px;
    background:#091724;
    box-shadow:0 28px 90px rgba(0,0,0,.62);
    padding:13px;
  }
  .layout-editor-head{
    position:sticky;top:-13px;z-index:7;
    margin:-13px -13px 0;padding:13px;
    background:rgba(9,23,36,.97);backdrop-filter:blur(16px);
    border-bottom:1px solid #203a53;border-radius:18px 18px 0 0;
  }
  .layout-editor-head h2{margin:2px 0 0;font-size:20px}
  .layout-editor-intro{margin:13px 2px;color:#8da5bc;font-size:11px;line-height:1.55}

  .layout-editor-section{
    margin-top:12px;padding:11px;border:1px solid #1e3951;
    border-radius:13px;background:#0a1928;
  }
  .layout-editor-section-title{
    display:flex;justify-content:space-between;align-items:end;gap:10px;margin-bottom:9px;
  }
  .layout-editor-section-title b{display:block;margin-top:2px;font-size:13px}
  .layout-editor-section-title small{
    max-width:48%;color:#698198;font-size:8px;text-align:right;line-height:1.35;
  }

  .layout-page-chips{
    display:flex;gap:7px;overflow-x:auto;padding:2px 0 8px;scrollbar-width:none;
  }
  .layout-page-chips::-webkit-scrollbar{display:none}
  .layout-page-chip{
    flex:0 0 auto;min-height:38px;padding:0 13px;border:1px solid #294863;
    border-radius:20px;background:#0c2032;color:#8fa8be;font:inherit;font-size:10px;font-weight:700;
  }
  .layout-page-chip.active{border-color:#298ddb;background:#0d3150;color:#69c2ff}

  .layout-page-tools{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:7px;margin-top:4px}
  .layout-add-page{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;margin-top:8px}
  .layout-page-tools input,.layout-add-page input{
    width:100%;min-width:0;min-height:42px;padding:0 10px;border:1px solid #29445e;
    border-radius:9px;background:#071522;color:#dcecff;font:inherit;font-size:11px;
  }
  .layout-page-tools button,.layout-add-page button{min-height:42px}

  .layout-widget-list{display:flex;flex-direction:column;gap:7px}
  .layout-widget-row{
    min-height:64px;display:grid;grid-template-columns:36px minmax(0,1fr) 48px;
    align-items:center;gap:9px;padding:7px 8px;border:1px solid #254159;
    border-radius:10px;background:#0b1d2d;
    transition:border-color .15s ease,background .15s ease,transform .15s ease;
  }
  .layout-widget-row.dragging{border-color:#3ba9ff;background:#0d2a42;transform:scale(.985);opacity:.88}
  .layout-widget-list.drag-active .layout-widget-row:not(.dragging){border-style:dashed}
  .layout-drag-handle{
    width:36px;height:44px;border:0;border-radius:8px;background:#102940;color:#7da8ca;
    font-size:23px;line-height:1;touch-action:none;cursor:grab;
  }
  .layout-drag-handle:active{cursor:grabbing}
  .layout-widget-placeholder{
    width:36px;height:36px;display:grid;place-items:center;border:1px dashed #31506c;
    border-radius:8px;color:#6488a5;font-size:17px;
  }
  .layout-widget-copy{min-width:0}
  .layout-widget-copy b{display:block;color:#dcecff;font-size:12px}
  .layout-widget-copy span{display:block;margin-top:3px;color:#6f899f;font-size:9px;line-height:1.35}
  .available-row{background:#081724;border-style:dashed}

  .layout-switch{position:relative;width:44px;height:26px;display:block}
  .layout-switch input{position:absolute;opacity:0;pointer-events:none}
  .layout-switch i{
    position:absolute;inset:0;border-radius:20px;background:#24394b;border:1px solid #36516a;
    transition:.16s ease;
  }
  .layout-switch i::after{
    content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;
    background:#8197aa;transition:.16s ease;
  }
  .layout-switch input:checked + i{background:#0e6fad;border-color:#2499df}
  .layout-switch input:checked + i::after{transform:translateX(18px);background:#e6f6ff}

  .layout-empty{
    padding:17px 10px;border:1px dashed #29445c;border-radius:9px;
    color:#71899d;text-align:center;font-size:10px;
  }
  .layout-editor-footer{
    position:sticky;bottom:-13px;z-index:7;display:grid;grid-template-columns:1fr 1fr;gap:8px;
    margin:13px -13px -13px;padding:11px 13px calc(11px + env(safe-area-inset-bottom));
    border-top:1px solid #203a53;background:rgba(9,23,36,.97);backdrop-filter:blur(16px);
    border-radius:0 0 18px 18px;
  }
  .layout-editor-footer .btn{min-height:46px}
}

@media(max-width:390px){
  .layout-page-tools{grid-template-columns:minmax(0,1fr) auto}
  .layout-page-tools #layoutDeletePage{grid-column:1/-1}
  .layout-add-page{grid-template-columns:1fr}
}


/* ============================================================
   v0.8.4 — Fans & Light widget visibility + live fullscreen
   ============================================================ */

@media(max-width:720px){

  /* Fix: older #printerControlsSurface hide rule outranked v0.8.3 generic widget rule. */
  #printerView #printerControlsSurface[data-mobile-widget="controls"].mw-visible:not(.hidden){
    display:block!important;
  }

  .detail-camera-frame{
    position:relative;
    background:#000;
    overflow:hidden;
  }

  .camera-overlay-controls{
    position:absolute;
    inset:0;
    z-index:8;
    pointer-events:none;
    opacity:1;
    transition:opacity .22s ease;
  }
  .camera-overlay-controls.camera-controls-faded{
    opacity:0;
  }

  .camera-fullscreen-button{
    position:absolute;
    right:10px;
    bottom:10px;
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    pointer-events:auto;
    border:1px solid rgba(255,255,255,.24);
    border-radius:10px;
    background:rgba(3,10,18,.72);
    color:#fff;
    box-shadow:0 5px 20px rgba(0,0,0,.32);
    backdrop-filter:blur(8px);
    font:inherit;
    font-size:24px;
    line-height:1;
  }
  .camera-fullscreen-button:active{
    transform:scale(.96);
  }

  .camera-fullscreen-exit{
    display:none;
    font-size:27px;
    font-weight:300;
  }
  .detail-camera-frame.camera-is-fullscreen .camera-fullscreen-enter{display:none}
  .detail-camera-frame.camera-is-fullscreen .camera-fullscreen-exit{display:block}

  .detail-camera-frame:fullscreen,
  .detail-camera-frame:-webkit-full-screen{
    width:100vw!important;
    height:100vh!important;
    height:100dvh!important;
    aspect-ratio:auto!important;
    border-radius:0!important;
    background:#000;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .detail-camera-frame:fullscreen video,
  .detail-camera-frame:-webkit-full-screen video{
    width:100%!important;
    height:100%!important;
    object-fit:contain;
    background:#000;
  }

  .detail-camera-frame:fullscreen .camera-live-badge,
  .detail-camera-frame:-webkit-full-screen .camera-live-badge{
    top:max(12px,env(safe-area-inset-top));
    left:max(12px,env(safe-area-inset-left));
  }

  .detail-camera-frame:fullscreen .camera-fullscreen-button,
  .detail-camera-frame:-webkit-full-screen .camera-fullscreen-button{
    right:max(14px,env(safe-area-inset-right));
    bottom:max(14px,env(safe-area-inset-bottom));
    width:50px;
    height:50px;
  }
}


/* ============================================================
   v0.8.5 — Parsed error modal + service alerts + landscape video
   ============================================================ */

.problem-modal{
  position:relative;
  z-index:2;
  width:min(92vw,520px);
  max-height:min(86dvh,720px);
  overflow:auto;
  padding:16px;
  border:1px solid #314b64;
  border-radius:16px;
  background:#091725;
  box-shadow:0 30px 100px rgba(0,0,0,.62);
}

.problem-modal-top{
  display:grid;
  grid-template-columns:48px minmax(0,1fr) 42px;
  gap:11px;
  align-items:center;
}

.problem-icon{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:13px;
  font-size:25px;
  font-weight:800;
}
.problem-icon.error{
  color:#ff9a9a;
  background:#351721;
  border:1px solid #713245;
}
.problem-icon.warning{
  color:#ffd58a;
  background:#342611;
  border:1px solid #6c5122;
}

.problem-title-copy{min-width:0}
.problem-title-copy h2{
  margin:2px 0 0;
  color:#e6f2ff;
  font-size:20px;
  line-height:1.15;
}

.problem-summary{
  margin:16px 1px 13px;
  color:#d4e3f0;
  font-size:13px;
  line-height:1.55;
}

.problem-explanation{
  padding:12px;
  border:1px solid #233f58;
  border-radius:11px;
  background:#0a1c2c;
}
.problem-explanation>span{
  display:block;
  margin-bottom:5px;
  color:#5fbaff;
  font-size:8px;
  font-weight:800;
  letter-spacing:.09em;
}
.problem-explanation p{
  margin:0;
  color:#8ea8bf;
  font-size:11px;
  line-height:1.55;
}

.problem-technical{
  margin-top:10px;
  border:1px solid #20384e;
  border-radius:10px;
  background:#07131f;
}
.problem-technical summary{
  min-height:42px;
  display:flex;
  align-items:center;
  padding:0 11px;
  color:#738da4;
  font-size:10px;
  cursor:pointer;
}
.problem-technical pre{
  margin:0;
  padding:0 11px 12px;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  color:#7590a8;
  font:9px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;
}

.problem-actions{
  display:flex;
  justify-content:flex-end;
  margin-top:13px;
}
.problem-actions .btn{min-width:112px}

@media(max-width:720px){
  #problemModal{
    place-items:center;
    padding:max(10px,env(safe-area-inset-top))
            max(9px,env(safe-area-inset-right))
            max(10px,env(safe-area-inset-bottom))
            max(9px,env(safe-area-inset-left));
  }
  .problem-modal{
    width:min(100%,520px);
    max-height:calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    padding:14px;
  }
  .problem-title-copy h2{font-size:18px}
  .problem-summary{font-size:12px}
  .problem-actions .btn{
    width:100%;
    min-height:46px;
  }

  /*
    If Screen Orientation API cannot force landscape, rotate the actual
    fullscreen camera surface only while the device/browser remains portrait.
  */
  @media(orientation:portrait){
    .detail-camera-frame.camera-landscape-fallback:fullscreen,
    .detail-camera-frame.camera-landscape-fallback:-webkit-full-screen{
      position:fixed!important;
      left:50%!important;
      top:50%!important;
      width:100vh!important;
      width:100dvh!important;
      height:100vw!important;
      transform:translate(-50%,-50%) rotate(90deg);
      transform-origin:center center;
    }

    .detail-camera-frame.camera-landscape-fallback:fullscreen video,
    .detail-camera-frame.camera-landscape-fallback:-webkit-full-screen video{
      width:100%!important;
      height:100%!important;
      object-fit:contain;
    }
  }
}


/* ============================================================
   v0.8.6 — Local printer files + remote print confirmation
   ============================================================ */
.icon-search{--icon:url('/assets/icons/search.svg')}
.icon-file-gcode{--icon:url('/assets/icons/file-gcode.svg')}
.files-surface{margin-top:14px;overflow:hidden}
.files-head-actions{display:flex;align-items:center;gap:8px}
.files-toolbar{min-height:48px;display:flex;align-items:center;gap:9px;padding:8px 12px;border-top:1px solid #1c344a;border-bottom:1px solid #1c344a;background:#081725}
.files-toolbar .ui-icon{width:17px;height:17px;color:#6d8ba4}
.files-toolbar input{flex:1;min-width:0;height:34px;border:0;outline:0;background:transparent;color:#dcecff;font:inherit;font-size:11px}
.files-toolbar input::placeholder{color:#60798e}
.files-status{padding:20px 13px;color:#7890a6;font-size:10px;text-align:center}
.local-files-list{display:flex;flex-direction:column}
.local-file-row{min-height:66px;display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 12px;border-bottom:1px solid #172d40}
.local-file-row:last-child{border-bottom:0}
.local-file-icon{width:36px;height:36px;display:grid;place-items:center;border:1px solid #25445f;border-radius:9px;background:#0b2032;color:#75bdf1}
.local-file-icon .ui-icon{width:19px;height:19px}
.local-file-copy{min-width:0}
.local-file-copy b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#d9ebfb;font-size:11px}
.local-file-copy span{display:block;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#678299;font-size:8px}
.local-file-print{min-width:65px;min-height:38px}
.local-file-print:disabled{opacity:.48}
.files-more{padding:11px;color:#698399;font-size:9px;text-align:center;background:#071522}
.remote-print-modal{position:relative;z-index:2;width:min(92vw,500px);padding:17px;border:1px solid #614d24;border-radius:16px;background:#0c1823;box-shadow:0 30px 100px rgba(0,0,0,.65)}
.remote-print-head{display:grid;grid-template-columns:48px minmax(0,1fr);gap:12px;align-items:center}
.remote-print-head h2{margin:3px 0 0;color:#f1f5f8;font-size:20px}
.remote-print-warning-icon{width:46px;height:46px;display:grid;place-items:center;border:1px solid #765a20;border-radius:13px;background:#392a10;color:#ffd16d;font-size:25px;font-weight:800}
.remote-print-file{margin:15px 0 12px;padding:11px;border:1px solid #29445a;border-radius:10px;background:#081725}
.remote-print-file span{display:block;color:#6f879c;font-size:8px;text-transform:uppercase;letter-spacing:.08em}
.remote-print-file b{display:block;margin-top:5px;overflow-wrap:anywhere;color:#dbeeff;font-size:11px}
.remote-print-modal p{margin:10px 1px;color:#91a7b9;font-size:11px;line-height:1.55}
.remote-print-modal .remote-print-emphasis{color:#e3c47d}
.remote-print-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
.warning-action{border-color:#84621f!important;background:#684814!important;color:#fff4d3!important}
.warning-action:hover{background:#79551a!important}

@media(max-width:720px){
  #printerView .mw-order-12{order:13}#printerView .mw-order-13{order:14}#printerView .mw-order-14{order:15}#printerView .mw-order-15{order:16}
  #printerView .files-surface.mw-visible:not(.hidden){display:block!important;width:100%;margin-top:0;margin-bottom:10px;border-radius:15px}
  .local-file-row{grid-template-columns:36px minmax(0,1fr) 62px;padding:8px 10px}.local-file-copy b{font-size:10px}.local-file-copy span{font-size:8px}
  #remotePrintModal{place-items:center;padding:max(10px,env(safe-area-inset-top)) max(9px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(9px,env(safe-area-inset-left))}
  .remote-print-modal{width:min(100%,500px);padding:15px}.remote-print-head h2{font-size:18px}.remote-print-actions .btn{min-height:48px}

  /* In fullscreen the exit X is always in the visible top-right viewport. */
  .detail-camera-frame:fullscreen .camera-fullscreen-button,
  .detail-camera-frame:-webkit-full-screen .camera-fullscreen-button{position:fixed!important;top:max(12px,env(safe-area-inset-top))!important;right:max(12px,env(safe-area-inset-right))!important;bottom:auto!important;z-index:30}

  /* Rotate only video when orientation lock is refused; never rotate controls. */
  @media(orientation:portrait){
    .detail-camera-frame.camera-landscape-fallback:fullscreen,
    .detail-camera-frame.camera-landscape-fallback:-webkit-full-screen{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;transform:none!important;background:#000}
    .detail-camera-frame.camera-landscape-fallback:fullscreen video,
    .detail-camera-frame.camera-landscape-fallback:-webkit-full-screen video{position:absolute!important;left:50%!important;top:50%!important;width:100dvh!important;height:100vw!important;transform:translate(-50%,-50%) rotate(90deg)!important;transform-origin:center center!important;object-fit:contain!important}
    .detail-camera-frame.camera-landscape-fallback:fullscreen .camera-overlay-controls,
    .detail-camera-frame.camera-landscape-fallback:-webkit-full-screen .camera-overlay-controls{transform:none!important}
  }
}
@media(max-width:390px){.remote-print-actions{grid-template-columns:1fr}}

/* ============================================================
   v0.8.7 — video-player camera UX
   ============================================================ */
.detail-camera-frame,.quick-camera{background:#000}
.video-player-placeholder{
  background:#000!important;
  color:#8ca0b4!important;
  cursor:default;
}
.video-player-placeholder b{color:#e6f1fb!important;font-size:13px}
.video-player-placeholder span{max-width:310px;color:#7d91a5;font-size:9px;line-height:1.45}
.video-play-button{
  width:66px;height:66px;display:grid;place-items:center;padding:0 0 0 4px;
  border:1px solid rgba(255,255,255,.28);border-radius:50%;
  background:rgba(20,34,48,.78);color:#fff;box-shadow:0 10px 38px rgba(0,0,0,.48);
  font:inherit;cursor:pointer;backdrop-filter:blur(8px);transition:transform .15s ease,background .15s ease
}
.video-play-button:hover{background:rgba(27,53,76,.88)}
.video-play-button:active{transform:scale(.94)}
.video-play-button span{
  display:block;width:0;height:0;margin-left:3px;border-top:11px solid transparent;
  border-bottom:11px solid transparent;border-left:18px solid currentColor
}
.video-loading-spinner{
  width:42px;height:42px;border:3px solid rgba(112,151,181,.2);border-top-color:#55b8ff;
  border-radius:50%;animation:pcm-camera-spin .85s linear infinite
}
@keyframes pcm-camera-spin{to{transform:rotate(360deg)}}
.video-player-placeholder.is-idle .video-play-button{margin-bottom:5px}
.video-player-placeholder.is-loading{cursor:progress}

@media(max-width:720px){
  .video-play-button{width:64px;height:64px}
  .video-player-placeholder b{font-size:12px}

  /* Fullscreen overlay remains in viewport coordinates. Only the VIDEO is
     rotated when Android refuses Screen Orientation lock. */
  .detail-camera-frame:fullscreen .camera-overlay-controls,
  .detail-camera-frame:-webkit-full-screen .camera-overlay-controls{
    position:fixed!important;inset:0!important;transform:none!important;z-index:25!important
  }
  .detail-camera-frame:fullscreen .camera-fullscreen-button,
  .detail-camera-frame:-webkit-full-screen .camera-fullscreen-button{
    position:fixed!important;top:max(12px,env(safe-area-inset-top))!important;
    right:max(12px,env(safe-area-inset-right))!important;bottom:auto!important;z-index:30!important
  }
  @media(orientation:portrait){
    .detail-camera-frame.camera-landscape-fallback:fullscreen,
    .detail-camera-frame.camera-landscape-fallback:-webkit-full-screen{
      position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;
      transform:none!important;background:#000!important
    }
    .detail-camera-frame.camera-landscape-fallback:fullscreen video,
    .detail-camera-frame.camera-landscape-fallback:-webkit-full-screen video{
      position:absolute!important;left:50%!important;top:50%!important;
      width:100dvh!important;height:100vw!important;max-width:none!important;max-height:none!important;
      transform:translate(-50%,-50%) rotate(90deg)!important;transform-origin:center center!important;
      object-fit:contain!important
    }
  }
}


/* ============================================================
   v0.8.7.1 — fullscreen button is ENTRY ONLY
   ------------------------------------------------------------
   Once fullscreen is active there is intentionally no web X/exit button.
   Use Android/tablet Back or the browser/system fullscreen gesture to exit.
   This avoids orientation/fallback implementations moving an overlay button
   outside the usable viewport.
   ============================================================ */

.camera-fullscreen-button.fullscreen-entry-hidden{
  display:none!important;
}

.detail-camera-frame:fullscreen .camera-fullscreen-button,
.detail-camera-frame:-webkit-full-screen .camera-fullscreen-button,
.detail-camera-frame.native-video-fullscreen .camera-fullscreen-button{
  display:none!important;
}

.camera-fullscreen-exit{
  display:none!important;
}

/* v0.8.8 desktop widget/page layout */
.desktop-layout-menu-action{display:flex!important;align-items:center;gap:10px}
.desktop-widget-page-nav{display:flex;grid-column:1/-1;order:1;gap:7px;overflow-x:auto;margin:-2px 0 14px;padding:2px 0;scrollbar-width:none}
.desktop-widget-page-nav::-webkit-scrollbar{display:none}
.desktop-widget-page-nav button{flex:0 0 auto;min-height:36px;padding:0 15px;border:1px solid #294863;border-radius:20px;background:#0a1a2a;color:#879fb5;font:inherit;font-size:10px;font-weight:750}
.desktop-widget-page-nav button[aria-current="page"]{border-color:#2c8fd4;background:#0d3150;color:#6ec4ff}

.desktop-layout-editor{position:relative;z-index:2;width:min(900px,94vw);max-height:min(88dvh,900px);overflow:auto;padding:16px;border:1px solid #294966;border-radius:18px;background:#091724;box-shadow:0 30px 100px rgba(0,0,0,.62)}
.desktop-layout-editor-head{position:sticky;top:-16px;z-index:7;margin:-16px -16px 0;padding:16px;background:rgba(9,23,36,.97);backdrop-filter:blur(16px);border-bottom:1px solid #203a53;border-radius:18px 18px 0 0}
.desktop-layout-editor-head h2{margin:2px 0 0;font-size:22px}
.desktop-layout-editor-intro{max-width:760px;margin:14px 2px;color:#8da5bc;font-size:11px;line-height:1.55}
.desktop-layout-section{margin-top:13px;padding:13px;border:1px solid #1e3951;border-radius:13px;background:#0a1928}
.desktop-layout-section-title{display:flex;justify-content:space-between;align-items:end;gap:12px;margin-bottom:10px}
.desktop-layout-section-title b{display:block;margin-top:2px;font-size:13px}.desktop-layout-section-title small{color:#71899f;font-size:9px}
.desktop-layout-page-chips{display:flex;gap:7px;overflow-x:auto;padding:2px 0 9px;scrollbar-width:none}.desktop-layout-page-chips::-webkit-scrollbar{display:none}
.desktop-layout-page-chip{flex:0 0 auto;min-height:38px;padding:0 14px;border:1px solid #294863;border-radius:20px;background:#0c2032;color:#8fa8be;font:inherit;font-size:10px;font-weight:700}
.desktop-layout-page-chip.active{border-color:#298ddb;background:#0d3150;color:#69c2ff}
.desktop-layout-page-tools{display:grid;grid-template-columns:minmax(220px,1fr) auto auto;gap:8px}.desktop-layout-add-page{display:grid;grid-template-columns:minmax(220px,1fr) auto;gap:8px;margin-top:8px}
.desktop-layout-page-tools input,.desktop-layout-add-page input{width:100%;min-width:0;min-height:42px;padding:0 10px;border:1px solid #29445e;border-radius:9px;background:#071522;color:#dcecff;font:inherit;font-size:11px}
.desktop-layout-page-tools button,.desktop-layout-add-page button{min-height:42px}
.desktop-layout-widget-list{display:flex;flex-direction:column;gap:8px}
.desktop-layout-widget-row{min-height:66px;display:grid;grid-template-columns:42px minmax(0,1fr) 90px 52px;align-items:center;gap:10px;padding:8px 9px;border:1px solid #254159;border-radius:10px;background:#0b1d2d}
.desktop-layout-widget-row.dragging{border-color:#3ba9ff;background:#0d2a42;transform:scale(.992);opacity:.9}
.desktop-layout-drag-handle{width:40px;height:46px;border:0;border-radius:8px;background:#102940;color:#7da8ca;font-size:24px;cursor:grab;touch-action:none}
.desktop-layout-widget-copy{min-width:0}.desktop-layout-widget-copy b{display:block;color:#dcecff;font-size:12px}.desktop-layout-widget-copy span{display:block;margin-top:3px;color:#6f899f;font-size:9px;line-height:1.35}
.desktop-layout-size{min-height:38px;padding:0 8px;border:1px solid #294760;border-radius:8px;background:#081725;color:#bed3e6;font:inherit;font-size:10px}
.desktop-layout-default-size{display:grid;place-items:center;min-height:32px;border:1px solid #203c55;border-radius:8px;color:#718ca4;font-size:9px}
.desktop-layout-editor-footer{position:sticky;bottom:-16px;z-index:7;display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:14px -16px -16px;padding:12px 16px 16px;border-top:1px solid #203a53;background:rgba(9,23,36,.97);backdrop-filter:blur(16px);border-radius:0 0 18px 18px}
.desktop-layout-editor-footer .btn{min-height:45px}

@media(min-width:721px){
 #printerView.desktop-layout-active:not(.hidden){display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px;align-items:start}
 #printerView.desktop-layout-active .detail-heading{grid-column:1/-1;order:0;margin-bottom:0}
 #printerView.desktop-layout-active .detail-layout{display:contents}
 #printerView.desktop-layout-active .mobile-overview-surface,#printerView.desktop-layout-active .mobile-detail-nav{display:none!important}
 #printerView.desktop-layout-active [data-desktop-widget].dw-hidden{display:none!important}
 #printerView.desktop-layout-active [data-desktop-widget].dw-visible:not(.hidden){margin-top:0;margin-bottom:0;width:100%}
 #printerView.desktop-layout-active .dw-span-half{grid-column:span 6}
 #printerView.desktop-layout-active .dw-span-full{grid-column:1/-1}
 #printerView.desktop-layout-active .dw-order-0{order:10}#printerView.desktop-layout-active .dw-order-1{order:11}#printerView.desktop-layout-active .dw-order-2{order:12}#printerView.desktop-layout-active .dw-order-3{order:13}#printerView.desktop-layout-active .dw-order-4{order:14}#printerView.desktop-layout-active .dw-order-5{order:15}#printerView.desktop-layout-active .dw-order-6{order:16}#printerView.desktop-layout-active .dw-order-7{order:17}
 #printerView.desktop-layout-active .camera-surface.dw-visible,#printerView.desktop-layout-active .job-surface.dw-visible,#printerView.desktop-layout-active .files-surface.dw-visible,#printerView.desktop-layout-active #printerControlsSurface.dw-visible,#printerView.desktop-layout-active .activity-surface.dw-visible{display:block!important}
 #printerView.desktop-layout-active .temperature-grid.dw-visible,#printerView.desktop-layout-active .health-grid.dw-visible{display:grid!important}
 #printerView.desktop-layout-active .temperature-grid.dw-span-half{grid-template-columns:1fr}
 #printerView.desktop-layout-active .health-grid.dw-span-half{grid-template-columns:1fr 1fr}
 #printerView.desktop-layout-active #printerControlsSurface.dw-span-half .control-stack{grid-template-columns:1fr}
 #printerView.desktop-layout-active .camera-surface.dw-span-full .detail-camera-frame{min-height:min(68vh,680px)}
 .account-menu{width:235px}
}
@media(max-width:720px){.desktop-layout-menu-action{display:none!important}.desktop-widget-page-nav{display:none!important}#desktopLayoutModal{display:none!important}}

/* Integrated G-code 3D Viewer v0.2.2 */
.viewer-modal-live{width:min(1680px,98vw);height:min(94vh,1040px);display:flex;flex-direction:column;overflow:hidden}
.viewer-modal-live .modal-head{flex:0 0 auto}
.viewer-frame-wrap{flex:1;min-height:0;margin-top:10px;border:1px solid #1e3a55;border-radius:10px;overflow:hidden;background:#050b13}
.viewer-frame-wrap iframe{display:block;width:100%;height:100%;border:0;background:#050b13}
.viewer-modal-live .viewer-coming{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;margin-top:10px}
@media(max-width:820px){.viewer-modal-live{width:98vw;height:96vh;padding:8px}.viewer-frame-wrap{margin-top:6px}}

/* ============================================================
   v0.9.1 integrated Live 3D modal
   The viewer iframe remains an implementation boundary, but visually the
   modal and viewer form one surface. No nested frame border or page scroll.
   ============================================================ */
body:has(#viewerModal:not(.hidden)){overflow:hidden}
.viewer-modal-live{
  box-sizing:border-box;
  width:min(1800px,calc(100vw - 24px));
  height:min(1100px,calc(100dvh - 24px));
  max-height:calc(100dvh - 24px);
  padding:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.viewer-modal-live .modal-head{
  box-sizing:border-box;
  min-height:62px;
  flex:0 0 auto;
  margin:0;
  padding:11px 14px 10px 16px;
  border-bottom:1px solid #1d3952;
  background:#0d1d2f;
}
.viewer-modal-live .modal-head h2{font-size:18px}
.viewer-frame-wrap{
  flex:1 1 auto;
  min-width:0;
  min-height:0;
  margin:0;
  border:0;
  border-radius:0 0 15px 15px;
  overflow:hidden;
  background:#07131f;
}
.viewer-frame-wrap iframe{
  display:block;
  width:100%;
  height:100%;
  border:0;
  background:#07131f;
}
.viewer-modal-live .viewer-coming{
  flex:1 1 auto;
  margin:0;
  border:0;
  border-radius:0;
}
@media(max-width:820px){
  .modal-shell:has(.viewer-modal-live){padding:0}
  .viewer-modal-live{
    width:100vw;
    height:100dvh;
    max-height:100dvh;
    border-radius:0;
  }
  .viewer-modal-live .modal-head{min-height:56px;padding:8px 10px 8px 12px}
  .viewer-frame-wrap{border-radius:0}
}
.modal-shell:has(.viewer-modal-live){box-sizing:border-box;padding:12px}


/* v0.9.2: the iframe is a fixed flex child; it never contributes scroll size. */
.viewer-frame-wrap,.viewer-frame-wrap iframe{min-height:0;max-height:100%;overflow:hidden!important}
.viewer-frame-wrap iframe{overscroll-behavior:none}

/* ============================================================
   v0.9.4 — native camera aspect on desktop
   Grow the camera surface vertically to match the actual WebRTC video
   instead of letterboxing a 16:9 stream inside a wide/short widget.
   The --camera-aspect value is populated from videoWidth/videoHeight;
   16:9 is the K1-safe fallback before metadata arrives.
   ============================================================ */
@media (min-width:721px){
  .detail-camera-frame,
  #printerView.desktop-layout-active .camera-surface.dw-visible .detail-camera-frame,
  #printerView.desktop-layout-active .camera-surface.dw-span-half .detail-camera-frame,
  #printerView.desktop-layout-active .camera-surface.dw-span-full .detail-camera-frame{
    box-sizing:border-box;
    width:100%;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    aspect-ratio:var(--camera-aspect,16 / 9);
    overflow:hidden;
  }

  .detail-camera-frame video{
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
  }
}


/* ============================================================
   v0.9.5 Live 3D mobile modal shell
   ============================================================ */
@media (max-width:620px), (max-width:900px) and (pointer:coarse){
  .modal-shell:has(.viewer-modal-live){padding:0}
  .viewer-modal-live{
    width:100vw;height:100dvh;max-height:100dvh;
    border:0;border-radius:0;
  }
  .viewer-modal-live .modal-head{
    min-height:48px;padding:6px 8px 6px 11px;
  }
  .viewer-modal-live .modal-head .surface-kicker{display:none}
  .viewer-modal-live .modal-head h2{margin:0;font-size:16px}
  .viewer-modal-live .modal-head .icon-button{width:38px;height:38px}
  .viewer-frame-wrap{border-radius:0}
}


/* v1.0.1 — unlimited paired printers, plan-limited active slots */
.active-slot-summary{margin-top:7px!important;color:#6f93b8!important;font-size:12px!important}
.printer-card.inactive{border-style:dashed;border-color:#31506f;background:linear-gradient(180deg,#0c1826,#09131f);opacity:.88;cursor:pointer}
.printer-card.inactive:hover{opacity:1;border-color:#4c7dad}
.inactive-preview{filter:saturate(.58)}
.preview-status.inactive{background:rgba(82,104,128,.52);color:#d7e2ed}
.preview-status.inactive i{background:#8aa0b4;box-shadow:none}
.inactive-preview-overlay{position:absolute;inset:auto 16px 17px 16px;z-index:4;display:flex;flex-direction:column;gap:3px;padding:10px 12px;border:1px solid rgba(95,133,170,.28);border-radius:8px;background:rgba(4,11,19,.76);backdrop-filter:blur(5px)}
.inactive-preview-overlay b{font-size:12px;color:#d7e8f7}.inactive-preview-overlay span{font-size:10px;color:#8299ad}
.state-line b.inactive{color:#9bb0c4}
.inactive-card-note{min-height:42px;margin-top:13px;color:#8297aa;font-size:11px;line-height:1.5}
.active-printer-modal{position:relative;z-index:1;width:min(620px,95vw);max-height:min(760px,90vh);overflow:auto;padding:18px;border:1px solid #294968;background:linear-gradient(180deg,#0e1f33,#07131f);border-radius:15px;box-shadow:0 35px 100px #0008}
.active-printer-intro{margin:10px 0 16px;color:#a7bacd;font-size:13px;line-height:1.6}
.active-printer-list{display:flex;flex-direction:column;gap:9px}
.active-printer-choice{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;padding:13px;border:1px solid #29435d;border-radius:10px;background:#0a1826}
.active-printer-choice-copy{display:flex;min-width:0;flex-direction:column;gap:3px}.active-printer-choice-copy b{font-size:13px;color:#edf6ff}.active-printer-choice-copy span{font-size:11px;color:#8ca4b9}.active-printer-choice-copy small{margin-top:4px;max-width:390px;color:#e3b176;font-size:10px;line-height:1.45}
.active-printer-replace{white-space:nowrap;min-height:39px}
.active-printer-support{display:flex;gap:14px;align-items:center;justify-content:space-between;margin-top:14px;padding:12px 13px;border:1px solid #274768;border-radius:10px;background:rgba(23,72,119,.13)}
.active-printer-support span{color:#91abc3;font-size:11px;line-height:1.5}.active-printer-support .btn{flex:0 0 auto;text-decoration:none}
.active-printer-footer{display:flex;justify-content:flex-end;gap:9px;margin-top:16px}
#activePrinterError:not(:empty){margin-top:12px}
@media(max-width:620px){
  .active-printer-modal{width:100%;max-height:calc(100dvh - 20px);padding:15px;border-radius:14px}
  .active-printer-choice{grid-template-columns:1fr;gap:10px}.active-printer-replace{width:100%}
  .active-printer-support{align-items:flex-start;flex-direction:column}.active-printer-support .btn{width:100%}
  .active-printer-footer{display:grid;grid-template-columns:1fr 1fr}.active-printer-footer .btn{width:100%}
}


/* v1.0.2 — public Patreon legal pages */
.login-legal{margin:14px 2px 0;color:#6f879e;font-size:10px;line-height:1.55;text-align:center}
.login-legal a{color:#8fbbe4;text-decoration:none}.login-legal a:hover{text-decoration:underline}
.account-menu-link{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;color:inherit;text-decoration:none;border:0;background:transparent;font:inherit}
.account-menu-link:hover{background:rgba(79,138,193,.10)}

/* v1.0.3 owner admin dashboard + Patreon avatars */
.avatar{overflow:hidden;position:relative}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.avatar img.hidden{display:none}
.avatar img:not(.hidden)+#avatarLetter{display:none}
.account-menu-profile{display:flex;align-items:center;gap:10px}
.account-menu-profile>div{min-width:0;flex:1}
.account-menu-avatar{width:34px;height:34px;border-radius:10px;background:#173955;overflow:hidden;display:grid;place-items:center;flex:0 0 auto}
.account-menu-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.account-menu-avatar img.hidden{display:none}

.admin-view{padding-bottom:40px}
.admin-heading{margin-bottom:18px}
.admin-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.admin-title-row h1{margin-bottom:5px}
.admin-lock-badge{border:1px solid rgba(73,184,255,.34);background:rgba(30,108,163,.12);color:#8ed2ff;border-radius:999px;padding:7px 10px;font-size:10px;font-weight:800;letter-spacing:.08em;white-space:nowrap}
.admin-stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:14px}
.admin-stat{padding:18px 20px;min-height:95px;display:flex;flex-direction:column;justify-content:center}
.admin-stat span{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.admin-stat b{font-size:28px;line-height:1.15;margin-top:6px}
.admin-plan-test,.admin-users-section{padding:20px;margin-bottom:14px}
.admin-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:18px}
.admin-section-head h2{margin:3px 0 4px;font-size:20px}
.admin-section-head p{margin:0;color:var(--muted);max-width:700px}
.admin-effective-plan{border:1px solid #2d5575;background:#0d2235;color:#8ed2ff;border-radius:9px;padding:8px 11px;font-size:11px;font-weight:900;letter-spacing:.08em;white-space:nowrap}
.admin-plan-controls{display:flex;align-items:end;gap:12px;max-width:680px}
.admin-plan-controls label{display:grid;gap:6px;flex:1;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.06em}
.admin-plan-controls select,.admin-user-search input{width:100%;background:#091625;border:1px solid var(--line2);color:var(--text);border-radius:8px;padding:10px 11px;outline:none}
.admin-plan-controls select:focus,.admin-user-search input:focus{border-color:#3b80b5;box-shadow:0 0 0 2px rgba(58,133,188,.12)}
.admin-limit-preview{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px}
.admin-limit-chip{border:1px solid var(--line2);background:#0b1828;border-radius:999px;padding:6px 9px;font-size:10px;color:#bdd3e5}
.admin-owner-safety{margin:13px 0 0;color:#89a6bc;font-size:11px}
.admin-owner-safety b{color:#72c8ff}
.admin-users-head{align-items:end}
.admin-user-search{display:grid;gap:5px;width:min(330px,100%);font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.admin-user-table-head,.admin-user-row{display:grid;grid-template-columns:minmax(220px,2fr) minmax(120px,1fr) minmax(120px,1fr) minmax(100px,.8fr) minmax(135px,1fr);gap:12px;align-items:center}
.admin-user-table-head{padding:0 12px 8px;color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.08em}
.admin-user-row{padding:11px 12px;border-top:1px solid var(--line);min-height:64px}
.admin-user-row:hover{background:rgba(64,127,178,.055)}
.admin-user-ident{display:flex;align-items:center;gap:10px;min-width:0}
.admin-user-avatar{width:38px;height:38px;border-radius:11px;background:#15334d;overflow:hidden;display:grid;place-items:center;flex:0 0 auto;color:#89cfff;font-weight:800;position:relative}
.admin-user-avatar img{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0}
.admin-user-copy{min-width:0}
.admin-user-copy b,.admin-user-copy span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-user-copy span{font-size:9px;color:var(--muted);margin-top:2px}
.admin-tier-stack b,.admin-tier-stack span{display:block}
.admin-tier-stack b{font-size:11px}.admin-tier-stack span{font-size:9px;color:var(--muted);margin-top:2px}
.admin-plan-mismatch b{color:#ffc968}
.admin-owner-user b{color:#75caff}
.admin-printer-count b{font-size:12px}.admin-printer-count span{display:block;color:var(--muted);font-size:9px;margin-top:2px}
.admin-verified{font-size:10px;color:#a9bfd1}
.admin-user-list{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#091522}

@media (max-width:900px){
  .admin-stat-grid{grid-template-columns:1fr 1fr 1fr}
  .admin-section-head,.admin-users-head{display:grid;gap:12px}
  .admin-user-search{width:100%}
  .admin-user-table-head{display:none}
  .admin-user-row{grid-template-columns:1fr 1fr;gap:12px;padding:14px}
  .admin-user-ident{grid-column:1/-1}
  .admin-user-row>[data-admin-cell]::before{content:attr(data-label);display:block;color:var(--muted);font-size:8px;text-transform:uppercase;letter-spacing:.07em;margin-bottom:3px}
}
@media (max-width:620px){
  .admin-title-row{display:grid}.admin-lock-badge{justify-self:start}
  .admin-stat-grid{grid-template-columns:1fr}
  .admin-plan-controls{display:grid;align-items:stretch}
  .admin-user-row{grid-template-columns:1fr}
  .admin-user-ident{grid-column:auto}
}

.account-menu-avatar>span{font-weight:800;color:#7ec7ff}.account-menu-avatar img:not(.hidden)+span{display:none}


/* ============================================================
   v1.0.4 PRINTER MANAGEMENT + STABLE DASHBOARD GRID
   ============================================================ */
@media(min-width:421px){
  .printer-grid{align-items:stretch}
  .printer-card{
    height:456px;
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }
  .printer-card .card-preview{flex:0 0 auto}
  .printer-card .card-body{
    flex:1 1 auto;
    min-height:0;
    display:flex;
    flex-direction:column;
  }
  .printer-card .card-job-slot{
    min-height:54px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
  }
  .printer-card .card-temps{margin-top:auto}
  .printer-card .card-actions{margin-top:11px}
  .printer-card.inactive .inactive-card-spacer{flex:1 1 auto;min-height:16px}
  .printer-card.inactive .card-actions{margin-top:auto}
}
@media(max-width:420px){
  .printer-card{height:auto;min-height:0}
  .card-job-slot{min-height:0}
}

.settings-section{
  margin-top:18px;padding-top:17px;border-top:1px solid #263b50;
}
.settings-label{display:block;margin-bottom:7px;color:#dce9f6;font-size:12px;font-weight:700}
.settings-rename-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;align-items:center}
.settings-rename-row input{
  min-width:0;height:42px;border-radius:8px;border:1px solid #35516c;background:#091523;
  color:#edf6ff;padding:0 12px;outline:none;
}
.settings-rename-row input:focus{border-color:#388ff3;box-shadow:0 0 0 2px rgba(56,143,243,.13)}
.settings-help{display:block;margin-top:6px;color:#7f94a9;line-height:1.45}
.settings-danger-zone{
  margin-top:18px;padding:14px;border:1px solid rgba(223,80,92,.38);border-radius:9px;
  background:rgba(88,18,26,.15);display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.settings-danger-zone>div{display:flex;flex-direction:column;gap:4px;min-width:0}
.settings-danger-zone b{color:#ffbbc1;font-size:12px}
.settings-danger-zone span{color:#9eafbF;font-size:11px;line-height:1.45}
.btn.danger{background:#8f2733;border-color:#b23c49;color:#fff}
.btn.danger:hover{background:#a52f3c;border-color:#d05b67}
.confirm-modal p{color:#c9d6e3;line-height:1.55}
.confirm-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
.unpair-print-warning{
  display:flex;flex-direction:column;gap:4px;margin:14px 0;padding:12px 13px;border-radius:8px;
  border:1px solid #8a5e20;background:rgba(122,77,13,.18)
}
.unpair-print-warning b{color:#ffd77b}.unpair-print-warning span{color:#d7c8a8;font-size:12px;line-height:1.45}
.danger-text{color:#ff8d99!important}.muted-copy{color:#8295a8!important;font-size:12px}
@media(max-width:560px){
  .settings-rename-row{grid-template-columns:1fr}.settings-danger-zone{align-items:stretch;flex-direction:column}
  .confirm-actions{flex-direction:column-reverse}.confirm-actions .btn{width:100%}
}

/* ============================================================
   v1.0.6 AI GUARD BADGE POLISH
   Compact translucent printer-card badge; simulated states remain owner-only.
   ============================================================ */
.ai-guard-card-badge{
  position:absolute;left:13px;bottom:12px;z-index:4;display:flex;align-items:center;gap:5px;
  max-width:calc(100% - 26px);padding:5px 8px;border:1px solid rgba(84,111,136,.58);border-radius:999px;
  background:rgba(6,14,23,.42);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#9db0c3;font-size:8.5px;font-weight:800;
  letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
 .ai-guard-robot-mark{
  display:inline-block;flex:0 0 auto;background:currentColor;
  -webkit-mask:url("/assets/ai-guard-robot-zest.svg") center/contain no-repeat;
  mask:url("/assets/ai-guard-robot-zest.svg") center/contain no-repeat;
}
.ai-guard-card-icon{width:11px;height:11px;color:currentColor}
.ai-guard-card-badge.ready{border-color:rgba(57,118,164,.66);color:#82c9ff;background:rgba(8,38,61,.42)}
.ai-guard-card-badge.monitoring{border-color:rgba(54,133,91,.66);color:#72e4a6;background:rgba(8,48,31,.40)}
.ai-guard-card-badge.warning{border-color:rgba(158,111,38,.70);color:#ffd17a;background:rgba(65,42,8,.44)}
.ai-guard-card-badge.critical{border-color:rgba(169,62,76,.72);color:#ff9aa5;background:rgba(72,15,23,.44)}
.ai-guard-card-badge.error{border-color:rgba(139,77,89,.70);color:#ffb5bd;background:rgba(51,24,31,.42)}
.inactive-preview .ai-guard-card-badge{left:13px;top:50px;bottom:auto}


.admin-ai-guard-test{padding:20px;margin-bottom:14px}
.admin-ai-simulated{border:1px solid #6e5c28;background:#28220d;color:#eac96f;border-radius:9px;padding:8px 11px;font-size:10px;font-weight:900;letter-spacing:.08em;white-space:nowrap}
.admin-ai-guard-controls{display:grid;grid-template-columns:minmax(220px,1fr) minmax(190px,.75fr) auto;gap:12px;align-items:end;max-width:900px}
.admin-ai-guard-controls label{display:grid;gap:6px;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.06em}
.admin-ai-guard-controls select{width:100%;min-height:42px;background:#091625;border:1px solid var(--line2);color:var(--text);border-radius:8px;padding:0 11px;outline:none}
.admin-ai-guard-controls select:focus{border-color:#3b80b5;box-shadow:0 0 0 2px rgba(58,133,188,.12)}
.admin-ai-guard-controls .btn{min-height:42px}
.ai-guard-settings-value{color:#91a6b9}.ai-guard-settings-value.ready{color:#82c9ff}.ai-guard-settings-value.monitoring{color:#72e4a6}.ai-guard-settings-value.warning{color:#ffd17a}.ai-guard-settings-value.critical,.ai-guard-settings-value.error{color:#ff9aa5}

@media(max-width:720px){
  .admin-ai-guard-controls{grid-template-columns:1fr}
  .admin-ai-guard-controls .btn{width:100%}
  .admin-ai-simulated{justify-self:start}
}


/* v1.0.7: increased transparency for preview bubbles (online, snapshot, AI Guard) */


/* v1.0.8: Zest Interface Icons robot SVG used for AI Guard identity. */


/* ============================================================
   v1.0.9 AI GUARD TIER SETTINGS
   Inline header status + per-printer ON/OFF entitlement control.
   ============================================================ */
.quick-title-row{display:flex;align-items:center;gap:9px;min-width:0;flex-wrap:wrap}
.quick-title-row h2{min-width:0}
.ai-guard-inline-badge{display:inline-flex;align-items:center;align-self:center;gap:.32em;flex:0 0 auto;padding:0;border:0;border-radius:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;color:#8295a8;font-size:20px;font-weight:650;line-height:1;letter-spacing:-.01em;white-space:nowrap}
.ai-guard-inline-icon{width:.9em;height:.9em;color:currentColor}
.quick-title-row .ai-guard-inline-badge{font-size:20px}
#printerView .detail-title-row .ai-guard-inline-badge{font-size:30px}
.ai-guard-inline-badge.ready{color:#76bfff}
.ai-guard-inline-badge.monitoring{color:#62d99a}
.ai-guard-inline-badge.warning{color:#ffc95f}
.ai-guard-inline-badge.critical{color:#ff7787}
.ai-guard-inline-badge.error{color:#e799a2}
.ai-guard-inline-badge.off{color:#788b9d;opacity:.82}

.settings-ai-guard-section{display:grid;gap:11px}
.settings-ai-guard-row{display:flex;align-items:center;justify-content:space-between;gap:14px}
.settings-ai-guard-copy{display:flex;align-items:center;gap:10px;min-width:0}
.settings-ai-guard-copy>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.settings-ai-guard-copy b{font-size:13px;color:#e8f1f9}.settings-ai-guard-copy span{font-size:10px;color:#8298ab;line-height:1.4}
.settings-ai-guard-icon{width:34px;height:34px;border:1px solid rgba(57,118,164,.48);border-radius:9px;background:rgba(8,38,61,.32);display:grid;place-items:center;color:#7ec8ff;flex:0 0 auto}
.settings-ai-guard-icon .ai-guard-robot-mark{width:19px;height:19px}
.settings-ai-guard-toggle{border:0;background:transparent;color:#92a7ba;display:flex;align-items:center;gap:8px;padding:5px;cursor:pointer;flex:0 0 auto}
.settings-ai-guard-toggle b{width:26px;text-align:left;font-size:9px;letter-spacing:.07em;color:#8195a8}
.settings-ai-guard-switch{position:relative;width:38px;height:21px;border-radius:999px;border:1px solid #3a4b5d;background:#172433;transition:.16s ease;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.settings-ai-guard-switch i{position:absolute;width:15px;height:15px;left:2px;top:2px;border-radius:50%;background:#8494a3;transition:.16s ease;box-shadow:0 2px 6px #0007}
.settings-ai-guard-toggle.on .settings-ai-guard-switch{border-color:#2e8b5b;background:rgba(18,103,61,.72)}
.settings-ai-guard-toggle.on .settings-ai-guard-switch i{left:19px;background:#83efad}
.settings-ai-guard-toggle.on b{color:#72e4a6}
.settings-ai-guard-toggle:disabled{opacity:.55;cursor:wait}
.settings-ai-guard-status-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap;color:#8095a8;font-size:9px}
.settings-ai-guard-status-row>span:first-child{color:#70879b}.settings-ai-guard-status-row>span:first-child::after{content:':' }

.ai-guard-tier-modal{width:min(520px,95vw)}
.ai-guard-tier-modal p{color:#aebfd0;line-height:1.55;font-size:12px}
.ai-guard-tier-hero{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid rgba(57,118,164,.38);border-radius:11px;background:rgba(8,38,61,.24);margin:4px 0 13px}
.ai-guard-tier-robot{width:43px;height:43px;border-radius:11px;border:1px solid rgba(57,118,164,.48);background:rgba(8,38,61,.38);display:grid;place-items:center;color:#7ec8ff;flex:0 0 auto}
.ai-guard-tier-robot .ai-guard-robot-mark{width:24px;height:24px}
.ai-guard-tier-hero>div{display:flex;flex-direction:column;gap:3px}.ai-guard-tier-hero b{font-size:13px;color:#edf6ff}.ai-guard-tier-hero span{font-size:10px;color:#83a1bb}
.ai-guard-tier-current{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0;padding:10px 12px;border-radius:9px;background:#091725;border:1px solid #263d52;color:#8399ad;font-size:10px}.ai-guard-tier-current b{color:#edf5fd;font-size:11px}
.ai-guard-tier-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:4px}
.ai-guard-tier-actions .btn{min-width:125px;text-align:center;text-decoration:none}

@media(max-width:700px){
  .detail-title-row{flex-wrap:wrap}
  .quick-title-row .ai-guard-inline-badge{font-size:18px}
  #printerView .detail-title-row .ai-guard-inline-badge{font-size:25px}
  .settings-ai-guard-row{align-items:flex-start}
  .ai-guard-tier-actions{flex-direction:column-reverse}.ai-guard-tier-actions .btn{width:100%}
}

/* v1.0.10: Free tier shows a normal AI Guard switch; upgrade explanation appears only after enable attempt. */


/* v1.0.11: Quick View / Full Control AI Guard title status is plain inline text, not a pill. */


/* v1.0.12: AI Guard inline title status matches printer-title size and vertical alignment. */

/* v1.0.13: On desktop, center AI Guard in Quick View header; mobile keeps inline flow. */
@media(min-width:721px){
  .quick-modal .modal-head{position:sticky}
  .quick-modal .quick-title-row{display:block;min-height:1.15em}
  .quick-modal #quickName{
    display:block;
    max-width:min(46%,430px);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .quick-modal #quickAIGuardBadge{
    position:absolute;
    left:50%;
    bottom:14px;
    transform:translateX(-50%);
    z-index:1;
    text-align:center;
    justify-content:center;
  }
}
@media(max-width:720px){
  .quick-modal #quickAIGuardBadge{
    position:static;
    left:auto;
    bottom:auto;
    transform:none;
  }
}



/* v1.0.14: On desktop, center AI Guard in Full Control header; mobile keeps inline flow. */
@media(min-width:721px){
  #printerView .detail-title-row{
    position:relative;
    min-height:1.15em;
  }
  #printerView #detailName{
    display:block;
    max-width:min(42%,520px);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  #printerView #detailTitleAIGuardBadge{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    z-index:1;
    text-align:center;
    justify-content:center;
  }
  #printerView #detailOnline{
    margin-left:auto;
  }
}
@media(max-width:720px){
  #printerView #detailTitleAIGuardBadge{
    position:static;
    left:auto;
    top:auto;
    transform:none;
  }
}

/* ============================================================
   v1.0.15 ACCOUNT NOTIFICATION CENTER + TELEGRAM
   Channels are account-level; event preferences are channel-agnostic.
   ============================================================ */
.notification-modal{width:min(620px,calc(100vw - 28px));max-width:620px}
.notification-intro{margin:2px 0 15px;color:#8fa4b9;font-size:11px;line-height:1.55}
.notification-section{display:grid;gap:10px;padding:13px 0;border-top:1px solid #20364b}
.notification-section:first-of-type{border-top:0;padding-top:4px}
.notification-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.notification-section-head b{font-size:13px;color:#e4eef8}
.notification-channel-card{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px;border:1px solid #29445e;border-radius:12px;background:rgba(9,24,39,.72)}
.notification-channel-card.connected{border-color:rgba(45,118,80,.72);background:rgba(8,38,27,.42)}
.notification-channel-card.unavailable{border-color:#3d4650;opacity:.78}
.notification-channel-main{display:flex;align-items:center;gap:11px;min-width:0}
.telegram-channel-icon{width:36px;height:36px;flex:0 0 36px;border-radius:50%;display:grid;place-items:center;background:#168bd2;border:1px solid #53b9ef;color:white;font-size:10px;font-weight:900;letter-spacing:.04em;box-shadow:0 7px 20px rgba(22,139,210,.16)}
.notification-channel-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.notification-channel-copy b{font-size:13px;color:#e8f3fd}.notification-channel-copy span{font-size:10px;color:#8da3b8;white-space:normal}
.notification-channel-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap}
.notification-channel-actions .btn{min-height:34px;padding:7px 10px;font-size:10px}
.notification-connect-hint{padding:9px 10px;border-radius:9px;border:1px solid rgba(54,126,181,.48);background:rgba(9,40,65,.40);color:#96cfff;font-size:10px;line-height:1.5}
.notification-event-row{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 12px;border:1px solid #243c53;border-radius:11px;background:rgba(8,20,33,.62);cursor:pointer}
.notification-event-row>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.notification-event-row b{font-size:12px;color:#e4eef8}.notification-event-row>div span{font-size:10px;color:#8299af;line-height:1.4}
.notification-event-checkbox{position:absolute;opacity:0;pointer-events:none}
.notification-event-switch{position:relative;width:36px;height:20px;flex:0 0 36px;border-radius:999px;border:1px solid #445a6e;background:#1a2b3c;transition:.18s ease}
.notification-event-switch i{position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#8093a5;transition:.18s ease}
.notification-event-checkbox:checked+.notification-event-switch{border-color:#2676ae;background:#0e3c5d}
.notification-event-checkbox:checked+.notification-event-switch i{left:18px;background:#67c3ff}
.notification-event-checkbox:focus-visible+.notification-event-switch{box-shadow:0 0 0 3px rgba(58,159,230,.18)}
.notification-photo-note{display:block;color:#71899f;font-size:9px;line-height:1.45;padding:1px 2px}
.ai-guard-notification-warning{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 11px;border:1px solid rgba(159,111,37,.60);border-radius:10px;background:rgba(66,42,8,.38)}
.ai-guard-notification-warning>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.ai-guard-notification-warning b{font-size:10px;color:#ffd17a}.ai-guard-notification-warning span{font-size:9px;color:#bca477;line-height:1.4}
.ai-guard-notification-warning .small-btn{flex:0 0 auto;white-space:nowrap}

@media(max-width:720px){
  .notification-modal{width:100%;max-width:none}
  .notification-channel-card{align-items:flex-start;flex-direction:column}
  .notification-channel-actions{width:100%;justify-content:flex-start}
  .notification-channel-actions .btn{flex:1}
  .ai-guard-notification-warning{align-items:flex-start;flex-direction:column}
  .ai-guard-notification-warning .small-btn{width:100%}
}


/* ============================================================
   v1.0.16 NOTIFICATION UI FIX
   The generic .small-modal label rule must not turn event rows into columns.
   ============================================================ */
.notification-modal .notification-event-row{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:0;
  padding:11px 12px;
}
.notification-modal .notification-event-row>div{
  flex:1 1 auto;
  min-width:0;
}
.notification-modal .notification-event-switch{
  width:40px;
  height:22px;
  flex:0 0 40px;
  border-radius:999px;
  border:1px solid #40566b;
  background:#17293a;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.28);
}
.notification-modal .notification-event-switch i{
  left:2px;
  top:2px;
  width:16px;
  height:16px;
  background:#7f91a3;
  box-shadow:0 1px 4px rgba(0,0,0,.45);
}
.notification-modal .notification-event-checkbox:checked + .notification-event-switch{
  border-color:#2686c5;
  background:#0d4d75;
}
.notification-modal .notification-event-checkbox:checked + .notification-event-switch i{
  left:20px;
  background:#72caff;
}
@media(max-width:720px){
  .notification-modal .notification-event-row{
    flex-direction:row;
    align-items:center;
    margin:0;
  }
}


/* ============================================================
   v1.0.17 AI GUARD DESKTOP HEADER FIX
   - Center AI Guard against the whole header, not the title box.
   - Restore natural printer-name width.
   - Use a smaller 16px AI Guard status on desktop.
   - Mobile behavior stays unchanged.
   ============================================================ */
@media(min-width:721px){
  /* QUICK VIEW */
  .quick-modal .modal-head{
    position:sticky;
  }
  .quick-modal .modal-head > div{
    min-width:0;
  }
  .quick-modal .quick-title-row{
    display:flex;
    align-items:center;
    flex-wrap:nowrap;
    min-height:0;
  }
  .quick-modal #quickName{
    display:block;
    max-width:none;
    overflow:visible;
    text-overflow:clip;
    white-space:nowrap;
  }
  .quick-modal #quickAIGuardBadge{
    position:absolute;
    left:50%;
    top:calc(50% + 6px);
    bottom:auto;
    transform:translate(-50%,-50%);
    z-index:2;
    justify-content:center;
    text-align:center;
    font-size:16px;
    line-height:1;
  }

  /* FULL CONTROL */
  #printerView .detail-heading{
    position:relative;
  }
  #printerView .detail-title-row{
    position:static;
    min-height:0;
  }
  #printerView #detailName{
    display:block;
    max-width:none;
    overflow:visible;
    text-overflow:clip;
    white-space:nowrap;
  }
  #printerView #detailTitleAIGuardBadge{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    z-index:2;
    justify-content:center;
    text-align:center;
    font-size:16px;
    line-height:1;
  }
  #printerView #detailOnline{
    margin-left:0;
  }
}


/* ============================================================
   v1.0.19 DEVELOPMENT NOTICE
   Server-backed per-user dismissal; no browser-only preference.
   ============================================================ */
.development-notice-modal{width:min(650px,calc(100vw - 28px));max-width:650px;padding:20px}
.development-notice-head{display:flex;align-items:center;gap:13px;padding-bottom:15px;border-bottom:1px solid #20384f}
.development-notice-head h2{margin:2px 0 0;font-size:21px;letter-spacing:-.02em}
.development-notice-mark{width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;border-radius:12px;border:1px solid #2b6c9b;background:rgba(12,55,84,.56);color:#77c8ff;font-size:23px;font-weight:900}
.development-notice-copy{display:grid;gap:12px;padding:16px 1px 5px;color:#c4d2df;font-size:12px;line-height:1.62}
.development-notice-copy p{margin:0}
.development-notice-support{display:grid;gap:5px;padding:12px 13px;border:1px solid #294760;border-radius:10px;background:rgba(9,28,44,.62)}
.development-notice-support b{color:#e8f2fb;font-size:12px}
.development-notice-support span{color:#9fb4c8}
.development-notice-support strong{color:#71c4ff}
.development-notice-choice{display:flex!important;flex-direction:row!important;align-items:center!important;gap:9px!important;margin-top:13px;padding:9px 1px;cursor:pointer;color:#b9c9d8;font-size:11px;font-weight:700}
.development-notice-choice input{position:absolute;opacity:0;pointer-events:none}
.development-notice-checkbox{position:relative;width:19px;height:19px;flex:0 0 19px;border:1px solid #45617a;border-radius:5px;background:#091522}
.development-notice-checkbox i{display:none;position:absolute;left:5px;top:2px;width:6px;height:10px;border-right:2px solid #dff3ff;border-bottom:2px solid #dff3ff;transform:rotate(45deg)}
.development-notice-choice input:checked+.development-notice-checkbox{border-color:#2e8bc7;background:#13618f}
.development-notice-choice input:checked+.development-notice-checkbox i{display:block}
.development-notice-choice input:focus-visible+.development-notice-checkbox{box-shadow:0 0 0 3px rgba(70,166,230,.18)}
.development-notice-actions{display:flex;justify-content:flex-end;margin-top:5px}
.development-notice-actions .btn{min-width:112px}
@media(max-width:720px){
  .development-notice-modal{width:min(100%,520px);max-width:520px;padding:16px}
  .development-notice-head{align-items:flex-start}.development-notice-head h2{font-size:18px}
  .development-notice-mark{width:38px;height:38px;flex-basis:38px;font-size:20px}
  .development-notice-actions .btn{width:100%}
}


/* v1.0.21 — long-term coarse network / node planning analytics */
.admin-network-section{padding:20px;margin-bottom:14px}
.admin-network-retention{font-size:9px;font-weight:900;letter-spacing:.08em;color:#7fb9e8;border:1px solid #315574;background:#0c2438;border-radius:999px;padding:6px 9px;white-space:nowrap}
.admin-network-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:16px 0}
.admin-network-stat-grid>div{min-height:86px;padding:13px 14px;border:1px solid var(--line);border-radius:10px;background:#091522;display:flex;flex-direction:column;justify-content:center}
.admin-network-stat-grid span{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.07em}
.admin-network-stat-grid b{font-size:23px;margin:4px 0 2px}.admin-network-stat-grid small{font-size:9px;color:#69829a}
.admin-network-history-wrap{border:1px solid var(--line);border-radius:10px;background:#08131f;padding:12px 13px;margin-bottom:14px}
.admin-network-subhead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:9px}.admin-network-subhead b{font-size:11px}.admin-network-subhead span{font-size:9px;color:var(--muted)}
.admin-network-history{height:96px;display:grid;grid-template-columns:repeat(24,minmax(3px,1fr));gap:4px;align-items:end}
.admin-network-hour{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;min-width:0}.admin-network-hour>i{display:block;width:100%;max-width:18px;min-height:4px;background:#153451;border-radius:3px 3px 1px 1px;position:relative;overflow:hidden}.admin-network-hour>i>em{position:absolute;left:0;right:0;bottom:0;background:#d8953d}.admin-network-hour>span{font-size:7px;color:#57728b;writing-mode:vertical-rl;display:none}
.admin-network-columns{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(260px,.75fr);gap:14px}
.admin-network-table-head,.admin-network-row{display:grid;grid-template-columns:minmax(170px,1.6fr) .65fr .65fr .8fr .8fr;gap:9px;align-items:center}
.admin-network-table-head{padding:0 10px 6px;color:var(--muted);font-size:8px;text-transform:uppercase;letter-spacing:.06em}
.admin-network-list,.admin-agent-rtt-list{border:1px solid var(--line);border-radius:9px;overflow:hidden;background:#08131f}
.admin-network-row{padding:10px;border-top:1px solid var(--line)}.admin-network-row:first-child{border-top:0}.admin-network-row>div b,.admin-network-row>div span{display:block}.admin-network-row>div b{font-size:10px}.admin-network-row>div span{font-size:8px;color:var(--muted);margin-top:2px}.admin-network-row .good b,.admin-agent-rtt-row .good{color:#66d89a}.admin-network-row .warn b,.admin-agent-rtt-row .warn{color:#e8bb5f}.admin-network-row .bad b,.admin-agent-rtt-row .bad{color:#ee818e}
.admin-agent-rtt-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 11px;border-top:1px solid var(--line)}.admin-agent-rtt-row:first-child{border-top:0}.admin-agent-rtt-row div{min-width:0}.admin-agent-rtt-row b,.admin-agent-rtt-row span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.admin-agent-rtt-row b{font-size:10px}.admin-agent-rtt-row span{font-size:8px;color:var(--muted);margin-top:2px}.admin-agent-rtt-row strong{font-size:11px;white-space:nowrap}
.admin-network-privacy{font-size:9px;line-height:1.55;color:#718aa2;margin:13px 2px 0;padding-top:11px;border-top:1px solid var(--line)}
@media(max-width:1000px){.admin-network-stat-grid{grid-template-columns:1fr 1fr}.admin-network-columns{grid-template-columns:1fr}.admin-network-table-head,.admin-network-row{grid-template-columns:minmax(150px,1.4fr) repeat(4,.7fr)}}
@media(max-width:720px){.admin-network-stat-grid{grid-template-columns:1fr 1fr}.admin-network-table-head{display:none}.admin-network-row{grid-template-columns:1fr 1fr}.admin-network-row>div:first-child{grid-column:1/-1}.admin-network-history{gap:2px}.admin-network-retention{display:none}}

/* ============================================================
   v1.0.25 MATERIAL / CFS UI
   Compact presentation of strict PCM1 v2 material telemetry.
   ============================================================ */
.material-color-dot,.material-color-swatch,.material-active-color{display:block;overflow:visible}
.material-color-dot{width:10px;height:10px;flex:0 0 10px;border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.08),0 0 12px color-mix(in srgb,var(--material-color,#61758a) 34%,transparent)}


.quick-material{min-height:42px;display:flex;align-items:center;gap:9px;margin:2px 1px 10px;padding:8px 10px;border:1px solid #203b53;border-radius:9px;background:#091725}
.quick-material-main{min-width:0;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.quick-material-main b{color:#d7e5f2;font-size:10px}.quick-material-main span{color:#7892aa;font-size:9px}
.quick-material-main.issue b,.quick-material-main.issue span{color:#f09ca7}

.material-surface{margin-top:14px;overflow:hidden}
.material-body{padding:14px}
.material-good{color:#82e3a8!important;background:#0b3022!important;border:1px solid #235f43}
.material-issue{color:#f3a0aa!important;background:#321921!important;border:1px solid #70404a}
.material-fault{display:flex;align-items:center;gap:10px;margin-bottom:12px;padding:10px 11px;border:1px solid #6d3a45;border-radius:9px;background:rgba(70,23,33,.42)}
.material-fault-icon{width:26px;height:26px;flex:0 0 26px;display:grid;place-items:center;border-radius:50%;background:#5e2731;color:#ffd6db;font-weight:900}
.material-fault div{min-width:0}.material-fault b,.material-fault span{display:block}.material-fault b{font-size:11px;color:#ffd4da}.material-fault span{margin-top:2px;color:#b98a92;font-size:9px}
.material-summary{min-width:0}
.material-active-card{display:grid;grid-template-columns:46px minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 14px;border:1px solid #294965;border-radius:11px;background:linear-gradient(135deg,rgba(13,38,59,.92),rgba(7,22,36,.94))}
.material-active-color{width:42px;height:42px;border-radius:11px;border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 0 0 2px rgba(0,0,0,.12),0 0 20px color-mix(in srgb,var(--material-color,#61758a) 18%,transparent)}
.material-active-copy span,.material-active-remaining span{display:block;color:#728aa1;font-size:8px;font-weight:800;letter-spacing:.09em}
.material-active-copy b{display:block;margin:2px 0 1px;font-size:18px;color:#e3f1ff}.material-active-copy small{color:#8da4b9;font-size:9px}
.material-active-remaining{text-align:right}.material-active-remaining b{display:block;margin-top:3px;color:#d8e9f8;font-size:18px}
.material-empty{display:grid;gap:4px;min-height:74px;place-content:center;padding:13px;border:1px dashed #29445b;border-radius:10px;text-align:center;background:#081522}
.material-empty.compact{min-height:66px}.material-empty b{color:#b8ccde;font-size:11px}.material-empty span{color:#71899f;font-size:9px}
.material-slots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-top:10px}
.material-slot{position:relative;min-width:0;padding:11px;border:1px solid #203a51;border-radius:10px;background:#081522;overflow:hidden}
.material-slot.active{border-color:#327fb2;background:#0a2032;box-shadow:inset 0 0 0 1px rgba(65,167,230,.08)}
.material-slot.empty{opacity:.46}
.material-slot-head{display:flex;align-items:center;justify-content:space-between;gap:7px}.material-slot-head b{font-size:12px;color:#d2e2f0}.material-slot-head span{padding:3px 5px;border-radius:999px;background:#0f4260;color:#73c9ff;font-size:7px;font-weight:900;letter-spacing:.05em}
.material-slot-color{display:flex;align-items:center;gap:7px;margin-top:10px;color:#7892a8;font-size:9px}
.material-color-swatch{width:20px;height:20px;flex:0 0 20px;border-radius:6px;border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(0,0,0,.16)}
.material-slot-remaining{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:10px}.material-slot-remaining span{color:#6f879d;font-size:8px}.material-slot-remaining b{color:#cbdcea;font-size:12px}
.material-remaining-bar{height:4px;margin-top:6px;border-radius:999px;background:#14293b;overflow:hidden}.material-remaining-bar.unknown{background:#10202e}
.material-remaining-bar>progress{display:block;width:100%;height:100%;border:0;border-radius:inherit;overflow:hidden;background:#14293b;appearance:none;-webkit-appearance:none}
.material-remaining-bar>progress::-webkit-progress-bar{background:#14293b}
.material-remaining-bar>progress::-webkit-progress-value{background:#3d9bd5;border-radius:999px}
.material-remaining-bar>progress::-moz-progress-bar{background:#3d9bd5;border-radius:999px}
.material-rfid{display:inline-flex;margin-top:9px;padding:4px 6px;border:1px solid #2d4a61;border-radius:999px;color:#849bae;background:#0b1c2a;font-size:8px;font-weight:700}
.material-rfid.rfid{border-color:#276044;color:#76d59d;background:#0b2b20}.material-rfid.no-rfid{border-color:#4c4650;color:#ada0ac;background:#1d1a20}
.material-external-card{display:flex;align-items:center;gap:12px;min-height:78px;padding:13px 14px;border:1px solid #29465e;border-radius:11px;background:#091725}
.material-external-icon{width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;border-radius:50%;border:2px solid #3a6f91;color:#75bde7;font-size:25px}
.material-external-card span,.material-external-card b,.material-external-card small{display:block}.material-external-card div>span{color:#718aa2;font-size:8px;font-weight:900;letter-spacing:.09em}.material-external-card b{margin:3px 0;color:#d5e7f5;font-size:13px}.material-external-card small{color:#7890a5;font-size:9px}
.material-external-card.missing{border-color:#68404a;background:#24151b}.material-external-card.missing .material-external-icon{border-color:#7a4652;color:#ef939e}.material-external-card.missing b{color:#f2a3ac}

@media(min-width:721px){
  #printerView.desktop-layout-active .material-surface.dw-visible{display:block!important}
  #printerView.desktop-layout-active .material-surface.dw-span-half .material-slots{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:980px){.material-slots{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){
  #printerView .material-surface.mw-visible{display:block!important;width:100%;margin-top:0;margin-bottom:10px;border-radius:15px}
  .material-body{padding:11px}.material-slots{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .material-active-card{grid-template-columns:38px minmax(0,1fr) auto;padding:10px;gap:9px}.material-active-color{width:36px;height:36px;border-radius:9px}
  .material-active-copy b,.material-active-remaining b{font-size:15px}
  .material-slot{padding:9px}.material-slot-color{margin-top:8px}.material-slot-remaining{margin-top:8px}
}


/* ============================================================
   v1.0.29 COMPACT DASHBOARD PRINTER CARDS
   Remove the obsolete fixed 456px desktop height. The card grew
   after the preview became true 16:9 and material/CFS telemetry
   was added, so the old height clipped the action row. Keep cards
   content-sized and reduce vertical whitespace, especially while
   idle where no job/progress block is needed.
   ============================================================ */
@media(min-width:421px){
  .printer-grid{align-items:start}
  .printer-card{
    height:auto;
    min-height:0;
    overflow:hidden;
  }
  .printer-card .card-body{
    flex:0 0 auto;
    padding:10px 14px 12px;
  }
  .printer-card .card-title-row{min-height:31px}
  .printer-card .card-printer-icon{width:30px;height:30px;font-size:15px}
  .printer-card .card-printer-title{gap:9px}
  .printer-card .card-title-row h2{font-size:16px}
  .printer-card .card-gear{width:31px;height:31px}
  .printer-card .state-line{
    padding-left:39px;
    margin:2px 0 6px;
    line-height:1.25;
  }
  .printer-card .card-job-slot{
    min-height:0;
    display:block;
  }
  .printer-card .card-job-slot.has-job{min-height:40px}
  .printer-card .card-file{
    padding-left:39px;
    margin:0 0 5px;
    line-height:1.3;
  }
  .printer-card .card-progress-row{margin:4px 3px 7px}
  .printer-card .card-temps{
    margin-top:5px;
    padding:9px 0;
  }
  .printer-card .card-temps>div{padding:0 10px}
  .printer-card .card-temps div b{margin-top:3px;font-size:15px}
  .printer-card .card-actions{
    margin-top:8px;
    gap:8px;
  }
  .printer-card .card-actions .btn{
    min-height:36px;
    padding:8px 9px;
    font-size:11px;
  }
  .printer-card.inactive .inactive-card-spacer{min-height:8px;flex:0 0 auto}
  .printer-card.inactive .card-actions{margin-top:8px}
}

/* ============================================================
   v1.0.30 UNIFORM DASHBOARD CARD JOB HOLDERS
   Keep every active printer card structurally aligned. Printing
   cards use this slot for filename + progress; idle/ready cards
   keep the same compact space as an invisible holder. This avoids
   card-height jumps without returning to the obsolete fixed card
   height that clipped the action row.
   ============================================================ */
@media(min-width:421px){
  .printer-card:not(.inactive) .card-job-slot{
    min-height:44px;
  }
}

/* ============================================================
   v1.0.31 QUICK DASHBOARD CARDS
   Dashboard cards intentionally omit filament/CFS details. Those
   remain available in Quick View and the printer detail material
   widget. The uniform job holder from v1.0.30 is kept so idle and
   printing cards remain aligned without a fixed/clipped card height.
   ============================================================ */


/* ============================================================
   v1.0.33 AI GUARD ALERT FOCUS
   Quick View / Full Control keep only the compact inline AI Guard
   status. Warning/Critical gain a pulsing aura. Dashboard alerts
   illuminate the complete printer card so attention is drawn to
   the affected printer without adding another panel or widget.
   ============================================================ */
.ai-guard-inline-badge.warning{
  text-shadow:0 0 8px rgba(255,190,66,.42),0 0 18px rgba(255,154,32,.18);
  filter:drop-shadow(0 0 4px rgba(255,184,51,.28));
  animation:aiGuardInlineWarningPulse 2.35s ease-in-out infinite;
}
.ai-guard-inline-badge.critical{
  text-shadow:0 0 9px rgba(255,92,108,.58),0 0 22px rgba(255,44,70,.30);
  filter:drop-shadow(0 0 5px rgba(255,67,88,.44));
  animation:aiGuardInlineCriticalPulse 1.3s ease-in-out infinite;
}
@keyframes aiGuardInlineWarningPulse{
  0%,100%{filter:drop-shadow(0 0 3px rgba(255,184,51,.22));text-shadow:0 0 7px rgba(255,190,66,.34),0 0 15px rgba(255,154,32,.13)}
  50%{filter:drop-shadow(0 0 8px rgba(255,184,51,.58));text-shadow:0 0 11px rgba(255,205,92,.68),0 0 26px rgba(255,145,24,.34)}
}
@keyframes aiGuardInlineCriticalPulse{
  0%,100%{filter:drop-shadow(0 0 4px rgba(255,67,88,.34));text-shadow:0 0 8px rgba(255,92,108,.48),0 0 19px rgba(255,44,70,.22)}
  50%{filter:drop-shadow(0 0 11px rgba(255,54,79,.78));text-shadow:0 0 13px rgba(255,116,128,.90),0 0 32px rgba(255,31,62,.55)}
}

.printer-card.ai-guard-warning{
  border-color:rgba(213,150,45,.82);
  box-shadow:0 10px 40px rgba(0,0,0,.16),0 0 0 1px rgba(255,184,64,.14),0 0 20px rgba(255,153,38,.16);
  animation:aiGuardCardWarningPulse 2.5s ease-in-out infinite;
}
.printer-card.ai-guard-critical{
  border-color:rgba(224,73,91,.92);
  box-shadow:0 10px 40px rgba(0,0,0,.18),0 0 0 1px rgba(255,77,99,.24),0 0 28px rgba(255,38,67,.26);
  animation:aiGuardCardCriticalPulse 1.35s ease-in-out infinite;
}
@keyframes aiGuardCardWarningPulse{
  0%,100%{border-color:rgba(200,139,43,.68);box-shadow:0 10px 40px rgba(0,0,0,.16),0 0 0 1px rgba(255,184,64,.10),0 0 14px rgba(255,153,38,.10)}
  50%{border-color:rgba(255,189,73,.98);box-shadow:0 13px 46px rgba(0,0,0,.21),0 0 0 1px rgba(255,199,90,.30),0 0 32px rgba(255,156,34,.34)}
}
@keyframes aiGuardCardCriticalPulse{
  0%,100%{border-color:rgba(213,61,81,.78);box-shadow:0 10px 40px rgba(0,0,0,.18),0 0 0 1px rgba(255,73,96,.18),0 0 20px rgba(255,35,64,.18)}
  50%{border-color:rgba(255,102,118,1);box-shadow:0 15px 50px rgba(0,0,0,.24),0 0 0 2px rgba(255,96,116,.35),0 0 42px rgba(255,31,62,.48)}
}

@media(prefers-reduced-motion:reduce){
  .ai-guard-inline-badge.warning,
  .ai-guard-inline-badge.critical,
  .printer-card.ai-guard-warning,
  .printer-card.ai-guard-critical{animation:none!important}
}


/* v1.0.34: restore the Zest robot icon before the compact Quick View / Full Control AI Guard text. */


/* ============================================================
   v1.0.35 MOBILE FULL CONTROL HEADER
   Keep printer name + ONLINE/OFFLINE on one row. AI Guard owns
   a second row centered across the visual header width. The
   settings button remains on the right and desktop is unchanged.
   ============================================================ */
@media(max-width:720px){
  #printerView .detail-heading{
    gap:12px;
  }
  #printerView .detail-title-row{
    display:grid;
    grid-template-columns:minmax(0,max-content) auto minmax(0,1fr);
    grid-template-areas:
      "name online filler"
      "guard guard guard";
    column-gap:10px;
    row-gap:10px;
    align-items:center;
    width:100%;
    min-width:0;
    flex-wrap:initial;
  }
  #printerView #detailName{
    grid-area:name;
    min-width:0;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:20px;
    margin:1px 0;
  }
  #printerView #detailOnline{
    grid-area:online;
    justify-self:start;
    align-self:center;
    margin:0;
    white-space:nowrap;
  }
  #printerView #detailTitleAIGuardBadge{
    grid-area:guard;
    position:static;
    left:auto;
    top:auto;
    justify-self:center;
    align-self:center;
    justify-content:center;
    text-align:center;
    margin:2px 0 0;
    /* The title container ends before the 42px settings button.
       Shift by half(button + 12px parent gap) to center against
       the complete visual header rather than only the left pane. */
    transform:translateX(27px);
  }
}


/* v1.0.38: compact, zero-jitter snapshot age badge; reserve width after the value */
.preview-badge.snapshot-compact{
  gap:3px;
  padding:4px 6px;
  font-size:8px;
  line-height:1;
}
.preview-badge.snapshot-compact .ui-icon{
  width:11px;
  height:11px;
}
.preview-badge.snapshot-compact .snapshot-sep{
  opacity:.58;
  line-height:1;
}
.preview-badge.snapshot-compact .snapshot-age{
  display:inline-block;
  width:4ch;
  text-align:left;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

/* v1.0.40 owner admin sections + Rabisu VPS/network resource history */
.admin-tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 0 14px;padding:3px 1px 5px;position:sticky;top:8px;z-index:20;background:linear-gradient(180deg,var(--bg) 70%,rgba(5,14,24,0));}
.admin-tabs::-webkit-scrollbar{display:none}
.admin-tabs button{min-height:40px;display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line2);background:#0a1827;color:#83a3bc;border-radius:10px;padding:0 13px;font-size:10px;font-weight:800;letter-spacing:.02em;white-space:nowrap;cursor:pointer;position:relative}
.admin-tabs button .ui-icon{width:14px;height:14px}
.admin-tabs button:hover{border-color:#315d80;color:#b8dbf5}
.admin-tabs button.active{border-color:#3c7eae;background:#0d263a;color:#8fd4ff;box-shadow:0 0 0 1px rgba(65,157,220,.08) inset}
.admin-tabs button.warning::after{content:"";position:absolute;right:6px;top:6px;width:6px;height:6px;border-radius:50%;background:#f2b94f;box-shadow:0 0 8px rgba(242,185,79,.75)}
.admin-tab-panel{min-width:0}
.admin-overview-note{padding:20px}
.admin-overview-note h2{margin:4px 0 5px;font-size:20px}.admin-overview-note>p{margin:0;color:var(--muted);font-size:11px}
.admin-overview-health{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px}
.admin-overview-health>div{border:1px solid var(--line);background:#091522;border-radius:10px;padding:13px 14px}.admin-overview-health span,.admin-overview-health b{display:block}.admin-overview-health span{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.07em}.admin-overview-health b{margin-top:4px;font-size:16px}.admin-overview-health .good{color:#6fdaa0}.admin-overview-health .warn{color:#efbd59}.admin-overview-health .bad{color:#f07d89}
.admin-vps-section{padding:20px;margin-bottom:14px}
.admin-vps-status{border:1px solid var(--line2);background:#0b1d2d;color:#91acc2;border-radius:999px;padding:7px 10px;font-size:9px;font-weight:900;letter-spacing:.08em;white-space:nowrap}.admin-vps-status.good{border-color:#28624a;background:#0b2b20;color:#77d7a2}.admin-vps-status.warn{border-color:#725c2f;background:#2a220e;color:#f0c366}.admin-vps-status.bad{border-color:#793640;background:#32151a;color:#ff8e99;box-shadow:0 0 18px rgba(220,65,80,.13)}
.admin-vps-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:15px 0}
.admin-vps-stat{border:1px solid var(--line);background:#091522;border-radius:11px;padding:14px}.admin-vps-stat>div:first-child{display:flex;align-items:baseline;justify-content:space-between;gap:10px}.admin-vps-stat span{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}.admin-vps-stat b{font-size:20px}.admin-vps-stat small{display:block;color:#6f8ba2;font-size:9px;margin-top:3px}.admin-vps-stat p{margin:7px 0 0;color:#7f9bb1;font-size:9px}
.admin-vps-meter{height:7px;margin-top:12px;background:#10283d;border-radius:999px;position:relative;overflow:visible}.admin-vps-meter>i{display:block;height:100%;width:0;border-radius:inherit;background:#4ba5dd;transition:width .35s ease}.admin-vps-meter>em{position:absolute;left:90%;top:-3px;bottom:-3px;width:1px;background:#e6ad49;box-shadow:0 0 6px rgba(230,173,73,.35)}
.admin-vps-history-wrap{border:1px solid var(--line);border-radius:10px;background:#08131f;padding:12px 13px;margin-bottom:12px}
.admin-vps-chart-legend{display:flex;gap:13px;flex-wrap:wrap;margin:2px 0 9px;font-size:8px;color:#7590a8}.admin-vps-chart-legend span::before{content:"";display:inline-block;width:12px;height:2px;vertical-align:middle;margin-right:5px;border-radius:2px;background:#4da8df}.admin-vps-chart-legend .ram::before{background:#7bd69f}.admin-vps-chart-legend .disk::before{background:#b690ee}.admin-vps-chart-legend .network::before{background:#5bc7d6}.admin-vps-chart-legend .limit::before{background:#e4ad4b}
.admin-vps-history{display:block;width:100%;height:190px;overflow:visible}.admin-vps-history path{fill:none;vector-effect:non-scaling-stroke;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}.admin-vps-history .cpu-line{stroke:#4da8df}.admin-vps-history .ram-line{stroke:#7bd69f}.admin-vps-history .disk-line{stroke:#b690ee}.admin-vps-history .network-line{stroke:#5bc7d6}.admin-vps-history .grid-line{stroke:#173149;stroke-width:1;vector-effect:non-scaling-stroke}.admin-vps-history .warn-line{stroke:#d99d3d;stroke-width:1;stroke-dasharray:5 5;vector-effect:non-scaling-stroke;opacity:.8}
.admin-vps-axis{display:flex;justify-content:space-between;color:#58738a;font-size:8px;margin-top:3px}
.admin-vps-alert-note{display:flex;align-items:flex-start;gap:10px;border:1px solid #5b4a28;background:#211b0d;border-radius:10px;padding:12px 13px;color:#d9bd72}.admin-vps-alert-note .ui-icon{width:16px;height:16px;margin-top:1px}.admin-vps-alert-note b,.admin-vps-alert-note p{display:block}.admin-vps-alert-note b{font-size:10px}.admin-vps-alert-note p{margin:3px 0 0;font-size:9px;line-height:1.45;color:#a88f58}
@media(max-width:1100px){.admin-vps-stat-grid{grid-template-columns:1fr 1fr}}
@media(max-width:820px){.admin-tabs{top:4px}.admin-vps-stat-grid{grid-template-columns:1fr}.admin-vps-history{height:160px}.admin-overview-health{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.admin-tabs{margin-left:-4px;margin-right:-4px;padding-left:4px;padding-right:4px}.admin-tabs button{min-height:38px;padding:0 11px}.admin-overview-health{grid-template-columns:1fr}.admin-vps-section{padding:15px}.admin-vps-history{height:145px}.admin-vps-stat b{font-size:18px}}

/* v1.0.42: live AI Guard beta + guided per-printer calibration. */
.ai-guard-card-badge.calibration_required{border-color:rgba(73,112,153,.72);color:#9fc7ed;background:rgba(12,37,62,.48)}
.ai-guard-card-badge.warming{border-color:rgba(65,117,145,.66);color:#8fc4de;background:rgba(9,35,49,.42)}
.ai-guard-inline-badge.calibration_required{color:#9fc7ed}
.ai-guard-inline-badge.warming{color:#8fc4de}
.ai-guard-settings-value.calibration_required{color:#9fc7ed}
.ai-guard-settings-value.warming{color:#8fc4de}

.ai-guard-calibration-card{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 12px;border:1px solid #2d4b66;border-radius:10px;background:rgba(8,28,46,.58)
}
.ai-guard-calibration-card.required{border-color:rgba(184,129,44,.62);background:rgba(66,43,9,.24)}
.ai-guard-calibration-card.ready{border-color:rgba(45,139,91,.55);background:rgba(9,54,34,.22)}
.ai-guard-calibration-card.error{border-color:rgba(179,69,82,.56);background:rgba(73,19,27,.22)}
.ai-guard-calibration-copy{display:flex;align-items:center;gap:9px;min-width:0}
.ai-guard-calibration-copy>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.ai-guard-calibration-copy b{font-size:11px;color:#e7f2fb}
.ai-guard-calibration-copy span{font-size:9px;color:#88a0b5;line-height:1.4}
.ai-guard-calibration-status-dot{width:8px;height:8px;border-radius:50%;background:#668095;box-shadow:0 0 0 3px rgba(102,128,149,.12);flex:0 0 auto}
.ai-guard-calibration-card.required .ai-guard-calibration-status-dot{background:#ffc95f;box-shadow:0 0 12px rgba(255,201,95,.35)}
.ai-guard-calibration-card.ready .ai-guard-calibration-status-dot{background:#67e49f;box-shadow:0 0 12px rgba(103,228,159,.3)}
.ai-guard-calibration-card.error .ai-guard-calibration-status-dot{background:#ff7787;box-shadow:0 0 12px rgba(255,119,135,.3)}
.ai-guard-calibration-card .small-btn{white-space:nowrap;flex:0 0 auto}

.ai-guard-runtime-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.ai-guard-runtime-grid>div{display:flex;flex-direction:column;gap:2px;padding:7px 8px;border:1px solid #223b50;border-radius:8px;background:#081725}
.ai-guard-runtime-grid span{font-size:8px;text-transform:uppercase;letter-spacing:.05em;color:#71899e}
.ai-guard-runtime-grid b{font-size:10px;color:#d6e6f4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.ai-guard-incidents{display:grid;gap:8px;padding-top:2px}
.ai-guard-incidents-head>div{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.ai-guard-incidents-head b{font-size:10px;color:#dceaf6}.ai-guard-incidents-head span{font-size:8px;color:#758ba0}
.ai-guard-incident-list{display:grid;gap:7px}
.ai-guard-incidents-empty{padding:10px;border:1px dashed #29445a;border-radius:8px;color:#768fa4;font-size:9px;text-align:center}
.ai-guard-incident{display:grid;grid-template-columns:62px minmax(0,1fr);gap:8px;padding:7px;border:1px solid #2b4357;border-radius:9px;background:rgba(7,20,31,.66)}
.ai-guard-incident.warning{border-color:rgba(171,119,39,.48)}.ai-guard-incident.critical{border-color:rgba(174,61,76,.52)}
.ai-guard-incident img{width:62px;height:46px;object-fit:cover;border-radius:6px;background:#06111b;grid-row:1/3}
.ai-guard-incident-copy{min-width:0}.ai-guard-incident-copy>div{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.ai-guard-incident-copy b{font-size:10px;color:#ffc95f}.ai-guard-incident.critical .ai-guard-incident-copy b{color:#ff8795}
.ai-guard-incident-copy span{font-size:8px;color:#758da2}.ai-guard-incident-copy p{margin:3px 0 0;color:#a9bac9;font-size:9px;line-height:1.35}
.ai-guard-feedback{display:flex;gap:5px;grid-column:2}
.tiny-feedback{border:1px solid #314c62;background:#0a1a28;color:#8da3b6;border-radius:6px;padding:4px 7px;font-size:8px;cursor:pointer}
.tiny-feedback.selected{border-color:#34855d;color:#78e1a5;background:rgba(19,80,52,.34)}
.tiny-feedback.selected.false{border-color:#a66c39;color:#ffc98d;background:rgba(86,51,18,.32)}

.ai-guard-calibration-modal{position:relative;z-index:1;width:min(920px,96vw);max-height:94dvh;overflow:auto;padding:16px;border:1px solid #294968;background:linear-gradient(180deg,#0e1f33,#07131f);border-radius:15px;box-shadow:0 35px 100px #0008}
.ai-guard-calibration-progress{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:4px 0 12px;padding:8px 10px;border:1px solid #233d53;border-radius:8px;background:#081726;color:#7e96aa;font-size:9px;text-transform:uppercase;letter-spacing:.05em}
.ai-guard-calibration-progress b{color:#9dd3ff}
.ai-guard-calibration-intro{display:grid;gap:10px;color:#9db0c1;font-size:11px;line-height:1.55}
.ai-guard-calibration-intro p{margin:0}
.ai-guard-calibration-hero{display:flex;gap:12px;align-items:center;padding:12px;border:1px solid rgba(57,118,164,.42);border-radius:10px;background:rgba(8,38,61,.28)}
.ai-guard-calibration-hero>.ai-guard-robot-mark{width:32px;height:32px;color:#7ec8ff;flex:0 0 auto}
.ai-guard-calibration-hero>div{display:flex;flex-direction:column;gap:3px}.ai-guard-calibration-hero b{font-size:12px;color:#edf6ff}.ai-guard-calibration-hero span{font-size:10px;color:#85a3bc;line-height:1.4}
.ai-guard-calibration-work{display:grid;gap:10px}
.ai-guard-calibration-instruction{display:flex;flex-direction:column;gap:3px}.ai-guard-calibration-instruction b{font-size:12px;color:#e8f2fa}.ai-guard-calibration-instruction span{font-size:10px;color:#8da5b9;line-height:1.45}
.ai-guard-calibration-stage,.ai-guard-calibration-reference-stage{position:relative;width:100%;overflow:hidden;border:1px solid #31526d;border-radius:10px;background:#040b11;touch-action:none;cursor:crosshair}
.ai-guard-calibration-stage img,.ai-guard-calibration-reference-stage img{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}
.ai-guard-calibration-polygon{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ai-guard-calibration-polygon polyline{fill:rgba(55,151,230,.10);stroke:#59b5f5;stroke-width:1.2;vector-effect:non-scaling-stroke}
.ai-guard-calibration-markers{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ai-guard-calibration-reference{display:grid;gap:6px;padding:8px;border:1px solid #27445b;border-radius:9px;background:rgba(7,20,31,.48)}
.ai-guard-calibration-reference>b{font-size:9px;color:#8db2ce}
.ai-guard-calibration-reference-stage{max-width:480px;cursor:default}
.ai-guard-calibration-point-status{font-size:9px;color:#85a0b5;text-align:center}
.ai-guard-calibration-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:13px}

@media(max-width:600px){
  .ai-guard-runtime-grid{grid-template-columns:1fr 1fr 1fr}
  .ai-guard-calibration-card{align-items:stretch;flex-direction:column}.ai-guard-calibration-card .small-btn{width:100%}
  #aiGuardCalibrationModal{place-items:end center;padding:0}
  .ai-guard-calibration-modal{width:100vw;max-width:none;max-height:94dvh;border-left:0;border-right:0;border-bottom:0;border-radius:18px 18px 0 0;padding:15px 12px calc(15px + env(safe-area-inset-bottom))}
  .ai-guard-calibration-actions{display:grid;grid-template-columns:1fr 1fr}.ai-guard-calibration-actions .btn{width:100%}
  #aiGuardCalibrationNext{grid-column:1/-1;grid-row:1}
  .ai-guard-incident{grid-template-columns:56px minmax(0,1fr)}.ai-guard-incident img{width:56px;height:43px}
}

.ai-guard-resolution-stats{display:grid;gap:2px;border:1px solid #20384d;border-radius:8px;overflow:hidden;background:#0b141c}
.ai-guard-resolution-table-head,.ai-guard-resolution-row{display:grid;grid-template-columns:48px 64px minmax(110px,1fr) 34px 34px 38px 42px;align-items:center;gap:6px;padding:6px 8px;font-size:8px}
.ai-guard-resolution-table-head{background:#101f2b;color:#6f8799;text-transform:uppercase;letter-spacing:.04em}
.ai-guard-resolution-row{border-top:1px solid #172a39;color:#b9c9d6}
.ai-guard-resolution-row>span:first-child{display:flex;align-items:center;gap:4px}.ai-guard-resolution-row i{display:inline-grid;place-items:center;width:14px;height:14px;border:1px solid #36536b;border-radius:4px;color:#75bdf5;font-size:7px;font-style:normal}
.ai-guard-resolution-row .good{color:#7ed8aa}.ai-guard-resolution-row .bad{color:#ff8a8a}.ai-guard-resolution-row .warn{color:#f5c774}
.ai-guard-resolution-empty{padding:9px;color:#72899b;font-size:8px;text-align:center}
.ai-guard-resolution-votes{display:flex;align-items:center;flex-wrap:wrap;gap:5px;margin-top:5px;font-size:8px;color:#6f8799}
.ai-guard-resolution-votes>b{padding:2px 4px;border-radius:4px;background:#122330;color:#8096a8;font-size:8px}.ai-guard-resolution-votes>b.alert{color:#f1c46c}.ai-guard-resolution-votes>b.tp,.ai-guard-resolution-votes>b.tn{color:#77d8a5}.ai-guard-resolution-votes>b.fp{color:#ff7777}.ai-guard-resolution-votes>b.miss{color:#f2bd64}
.ai-guard-incident.deep-linked{outline:2px solid #42a8ff;outline-offset:2px}
@media(max-width:650px){.ai-guard-resolution-table-head,.ai-guard-resolution-row{grid-template-columns:42px 48px minmax(100px,1fr) 28px 28px 32px 36px;gap:4px;padding-left:6px;padding-right:6px}}

/* v1.0.46: A4 depth-preparation UX + transparent nozzle target. */
.ai-guard-calibration-depth-prep{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;padding:14px;border:1px solid rgba(64,132,182,.46);border-radius:11px;background:linear-gradient(145deg,rgba(11,43,67,.55),rgba(6,24,39,.48));color:#9db0c1}
.ai-guard-calibration-sheet-icon{display:grid;place-items:center;width:48px;height:58px;border:1px solid #4e7899;border-radius:6px;background:#edf6fb;color:#12324a;font:800 13px system-ui,sans-serif;box-shadow:0 6px 18px #0004}
.ai-guard-calibration-sheet-copy{display:grid;gap:9px;min-width:0;font-size:10px;line-height:1.5}
.ai-guard-calibration-sheet-copy>b{font-size:13px;color:#edf6ff}
.ai-guard-calibration-sheet-copy p{margin:0}
.ai-guard-calibration-sheet-copy strong{color:#d9ebf8}
.ai-guard-calibration-sheet-download{justify-self:start;text-decoration:none}
.ai-guard-calibration-sheet-tip{display:grid;gap:3px;padding:9px 10px;border:1px solid rgba(124,157,184,.3);border-radius:8px;background:rgba(3,16,27,.42)}
.ai-guard-calibration-sheet-tip strong{font-size:10px;color:#bfe2fb}
.ai-guard-calibration-sheet-tip span{font-size:9.5px;color:#8fa8bb}
.ai-guard-calibration-sheet-ready{color:#8fb3cb}
@media(max-width:600px){.ai-guard-calibration-depth-prep{grid-template-columns:1fr}.ai-guard-calibration-sheet-icon{width:42px;height:50px}.ai-guard-calibration-sheet-download{width:100%;justify-content:center}}

/* v1.0.52 — AI Camera Tuning CSP-safe Canvas preview */
.camera-tuning-link{border:1px solid #315574;background:#0b1e30;color:#91cfff;border-radius:8px;padding:5px 8px;font-size:9px;font-weight:900;letter-spacing:.04em;cursor:pointer}
.camera-tuning-link:hover{border-color:#4389bd;background:#102a41}
.settings-ai-guard-tools{display:flex;align-items:center;gap:10px;margin:10px 0 2px;padding:9px 10px;border:1px solid #203b55;border-radius:9px;background:#091a2a}
.settings-ai-guard-tools span{color:#7893aa;font-size:10px;line-height:1.35}
.ai-guard-tuning-modal{position:relative;z-index:1;width:min(1080px,96vw);max-height:94dvh;overflow:auto;padding:16px;border:1px solid #294968;background:linear-gradient(180deg,#0e1f33,#07131f);border-radius:15px;box-shadow:0 35px 100px #0008}
.ai-guard-tuning-note{display:flex;gap:10px;align-items:flex-start;margin:10px 0 14px;padding:10px 12px;border:1px solid #31516d;border-radius:10px;background:#0b2032}
.ai-guard-tuning-note b{white-space:nowrap;color:#bfe3ff;font-size:11px}.ai-guard-tuning-note span{font-size:10px;line-height:1.45;color:#8ca7bc}
.ai-guard-tuning-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,.75fr);gap:14px}
.ai-guard-tuning-preview-card,.ai-guard-tuning-controls{border:1px solid #223e58;border-radius:11px;background:#091a2a;padding:11px}
.ai-guard-tuning-preview-head{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:9px}
.ai-guard-tuning-tabs{display:flex;border:1px solid #294a67;border-radius:8px;overflow:hidden;background:#071522}
.ai-guard-tuning-tabs button{border:0;border-right:1px solid #294a67;background:transparent;color:#7899b3;font-size:9px;font-weight:900;letter-spacing:.06em;padding:7px 10px;cursor:pointer}.ai-guard-tuning-tabs button:last-child{border-right:0}.ai-guard-tuning-tabs button.active{background:#123451;color:#aee1ff}
.ai-guard-tuning-preview{position:relative;min-height:300px;display:grid;place-items:center;overflow:hidden;border:1px solid #294a67;border-radius:10px;background:#020b12}
.ai-guard-tuning-preview canvas{display:none;width:100%;height:auto;max-height:66vh;object-fit:contain}.ai-guard-tuning-preview.has-image canvas{display:block}.ai-guard-tuning-preview.has-image .ai-guard-tuning-placeholder{display:none}
.ai-guard-tuning-placeholder{max-width:360px;padding:30px;text-align:center;color:#718da5;font-size:11px;line-height:1.5}
.ai-guard-tuning-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-top:8px}.ai-guard-tuning-metrics>div{padding:8px;border:1px solid #1d3851;border-radius:8px;background:#081724}.ai-guard-tuning-metrics span{display:block;color:#66839b;font-size:8px;text-transform:uppercase;letter-spacing:.05em}.ai-guard-tuning-metrics b{display:block;margin-top:3px;color:#d4e8f7;font-size:12px}
.ai-guard-tuning-controls{display:flex;flex-direction:column;gap:9px}.ai-guard-tuning-controls select{width:100%}.ai-guard-tuning-custom{display:flex;flex-direction:column;gap:11px;padding:10px;border:1px solid #203b55;border-radius:9px;background:#071724}.ai-guard-tuning-custom label{display:flex;flex-direction:column;gap:6px}.ai-guard-tuning-custom label>span{display:flex;justify-content:space-between;color:#91a9bd;font-size:10px}.ai-guard-tuning-custom label b{color:#d3e8f7}.ai-guard-tuning-custom input[type=range]{width:100%}
.ai-guard-tuning-quality{display:grid;grid-template-columns:1fr auto;gap:4px 10px;padding:10px;border:1px solid #203b55;border-radius:9px;background:#081927}.ai-guard-tuning-quality span{color:#708ca4;font-size:9px;text-transform:uppercase}.ai-guard-tuning-quality b{font-size:11px;color:#b8ddf8}.ai-guard-tuning-quality small{grid-column:1/-1;color:#738da3;font-size:9px;line-height:1.4}
.ai-guard-tuning-applied{padding:8px 10px;border:1px dashed #29465f;border-radius:8px;color:#7691a8;font-size:9px;line-height:1.4}.ai-guard-tuning-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:auto}
@media(max-width:760px){.ai-guard-tuning-grid{grid-template-columns:1fr}.ai-guard-tuning-preview{min-height:220px}.ai-guard-tuning-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.ai-guard-tuning-note{display:block}.ai-guard-tuning-note b{display:block;margin-bottom:5px}.settings-ai-guard-tools{align-items:flex-start;flex-direction:column}}


/* v1.0.55 — CSP-safe native camera aspect classes. */
.detail-camera-frame.camera-aspect-16x9{--camera-aspect:16 / 9}
.detail-camera-frame.camera-aspect-4x3{--camera-aspect:4 / 3}
.detail-camera-frame.camera-aspect-3x2{--camera-aspect:3 / 2}
.detail-camera-frame.camera-aspect-5x4{--camera-aspect:5 / 4}
.detail-camera-frame.camera-aspect-1x1{--camera-aspect:1 / 1}
.detail-camera-frame.camera-aspect-9x16{--camera-aspect:9 / 16}

/* ============================================================
   v1.0.53 — Live Camera Appearance (display-only, CSP-safe)
   ============================================================ */
.camera-frame{
  --camera-display-brightness:1;
  --camera-display-contrast:1;
  --camera-display-saturation:1;
}
.camera-frame video{
  filter:brightness(var(--camera-display-brightness)) contrast(var(--camera-display-contrast)) saturate(var(--camera-display-saturation));
}
.camera-appearance-button{
  position:absolute;right:11px;top:11px;z-index:12;width:36px;height:36px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.24);border-radius:9px;background:rgba(3,10,18,.76);color:#fff;
  box-shadow:0 5px 20px rgba(0,0,0,.3);backdrop-filter:blur(8px);font:inherit;font-size:16px;cursor:pointer
}
.camera-appearance-button:hover{background:rgba(14,36,55,.9);border-color:rgba(104,190,255,.52)}
.camera-appearance-button[aria-expanded="true"]{border-color:#3d92ca;background:rgba(11,42,64,.94);color:#8fd2ff}
.camera-appearance-panel{
  position:absolute;right:11px;top:54px;z-index:13;width:min(310px,calc(100% - 22px));padding:12px;
  border:1px solid #31536f;border-radius:11px;background:rgba(7,19,31,.96);color:#d8e6f3;
  box-shadow:0 16px 44px rgba(0,0,0,.48);backdrop-filter:blur(12px)
}
.camera-appearance-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px}
.camera-appearance-head>div{display:flex;flex-direction:column;gap:2px}.camera-appearance-head b{font-size:12px}.camera-appearance-head span{font-size:8px;color:#7f98b0}
.camera-appearance-head button{border:0;background:transparent;color:#8fa9c1;font-size:20px;line-height:1;cursor:pointer;padding:0 2px}
.camera-appearance-control{display:grid;grid-template-columns:1fr auto;gap:5px 10px;align-items:center;padding:8px 0;border-top:1px solid rgba(61,88,112,.36)}
.camera-appearance-control span{font-size:9px;color:#99aec1;font-weight:750}.camera-appearance-control b{font-size:10px;color:#dbeafb;font-variant-numeric:tabular-nums}
.camera-appearance-control input{grid-column:1/-1;width:100%;accent-color:#39a7f4}
.camera-appearance-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:9px;border-top:1px solid rgba(61,88,112,.36)}
.camera-appearance-footer span{font-size:7.5px;color:#70879d;line-height:1.35}.camera-appearance-footer .small-btn{flex:0 0 auto}
@media(max-width:720px){
  .camera-appearance-button{top:10px;right:10px;width:40px;height:40px}
  .camera-appearance-panel{position:absolute;right:10px;top:56px;width:min(300px,calc(100% - 20px));max-height:calc(100% - 68px);overflow:auto}
  .detail-camera-frame:fullscreen .camera-appearance-button,.detail-camera-frame:-webkit-full-screen .camera-appearance-button{position:fixed;top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));z-index:31}
  .detail-camera-frame:fullscreen .camera-appearance-panel,.detail-camera-frame:-webkit-full-screen .camera-appearance-panel{position:fixed;top:64px;right:max(12px,env(safe-area-inset-right));z-index:32}
}
.camera-display-brightness-70{--camera-display-brightness:0.70}
.camera-display-brightness-75{--camera-display-brightness:0.75}
.camera-display-brightness-80{--camera-display-brightness:0.80}
.camera-display-brightness-85{--camera-display-brightness:0.85}
.camera-display-brightness-90{--camera-display-brightness:0.90}
.camera-display-brightness-95{--camera-display-brightness:0.95}
.camera-display-brightness-100{--camera-display-brightness:1.00}
.camera-display-brightness-105{--camera-display-brightness:1.05}
.camera-display-brightness-110{--camera-display-brightness:1.10}
.camera-display-brightness-115{--camera-display-brightness:1.15}
.camera-display-brightness-120{--camera-display-brightness:1.20}
.camera-display-brightness-125{--camera-display-brightness:1.25}
.camera-display-brightness-130{--camera-display-brightness:1.30}
.camera-display-brightness-135{--camera-display-brightness:1.35}
.camera-display-brightness-140{--camera-display-brightness:1.40}
.camera-display-brightness-145{--camera-display-brightness:1.45}
.camera-display-brightness-150{--camera-display-brightness:1.50}
.camera-display-contrast-70{--camera-display-contrast:0.70}
.camera-display-contrast-75{--camera-display-contrast:0.75}
.camera-display-contrast-80{--camera-display-contrast:0.80}
.camera-display-contrast-85{--camera-display-contrast:0.85}
.camera-display-contrast-90{--camera-display-contrast:0.90}
.camera-display-contrast-95{--camera-display-contrast:0.95}
.camera-display-contrast-100{--camera-display-contrast:1.00}
.camera-display-contrast-105{--camera-display-contrast:1.05}
.camera-display-contrast-110{--camera-display-contrast:1.10}
.camera-display-contrast-115{--camera-display-contrast:1.15}
.camera-display-contrast-120{--camera-display-contrast:1.20}
.camera-display-contrast-125{--camera-display-contrast:1.25}
.camera-display-contrast-130{--camera-display-contrast:1.30}
.camera-display-contrast-135{--camera-display-contrast:1.35}
.camera-display-contrast-140{--camera-display-contrast:1.40}
.camera-display-saturation-0{--camera-display-saturation:0.00}
.camera-display-saturation-5{--camera-display-saturation:0.05}
.camera-display-saturation-10{--camera-display-saturation:0.10}
.camera-display-saturation-15{--camera-display-saturation:0.15}
.camera-display-saturation-20{--camera-display-saturation:0.20}
.camera-display-saturation-25{--camera-display-saturation:0.25}
.camera-display-saturation-30{--camera-display-saturation:0.30}
.camera-display-saturation-35{--camera-display-saturation:0.35}
.camera-display-saturation-40{--camera-display-saturation:0.40}
.camera-display-saturation-45{--camera-display-saturation:0.45}
.camera-display-saturation-50{--camera-display-saturation:0.50}
.camera-display-saturation-55{--camera-display-saturation:0.55}
.camera-display-saturation-60{--camera-display-saturation:0.60}
.camera-display-saturation-65{--camera-display-saturation:0.65}
.camera-display-saturation-70{--camera-display-saturation:0.70}
.camera-display-saturation-75{--camera-display-saturation:0.75}
.camera-display-saturation-80{--camera-display-saturation:0.80}
.camera-display-saturation-85{--camera-display-saturation:0.85}
.camera-display-saturation-90{--camera-display-saturation:0.90}
.camera-display-saturation-95{--camera-display-saturation:0.95}
.camera-display-saturation-100{--camera-display-saturation:1.00}
.camera-display-saturation-105{--camera-display-saturation:1.05}
.camera-display-saturation-110{--camera-display-saturation:1.10}
.camera-display-saturation-115{--camera-display-saturation:1.15}
.camera-display-saturation-120{--camera-display-saturation:1.20}
.camera-display-saturation-125{--camera-display-saturation:1.25}
.camera-display-saturation-130{--camera-display-saturation:1.30}
.camera-display-saturation-135{--camera-display-saturation:1.35}
.camera-display-saturation-140{--camera-display-saturation:1.40}
.camera-display-saturation-145{--camera-display-saturation:1.45}
.camera-display-saturation-150{--camera-display-saturation:1.50}

/* v1.0.54 — AI Guard Vision v2 */
.ai-guard-incident-layer{font-size:11px;color:var(--muted);margin:2px 0 5px}

/* v1.0.55 — Camera appearance specificity fix + printer-page CSP cleanup. */