/* Cloud HA panel — visual language follows the Home Assistant frontend (sidebar, toolbar, ha-card). */
:root{
  color-scheme:light;
  --primary-color:#03a9f4;--primary-dark:#0288d1;--accent-color:#ff9800;
  --bg:#fafafa;--card:#fff;--sidebar:#fff;--text:#212121;--secondary:#727272;--disabled:#bdbdbd;
  --divider:rgba(0,0,0,.12);--hover:rgba(0,0,0,.04);--selected:rgba(3,169,244,.12);
  --input-bg:#f5f5f5;--input-line:rgba(0,0,0,.42);
  --success:#43a047;--warning:#ffa600;--error:#db4437;--unknown:#9e9e9e;
  --shadow:0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12),0 3px 1px -2px rgba(0,0,0,.2);
  --radius:12px;--sidebar-w:256px;
  --font:Roboto,"Noto Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){:root{
  color-scheme:dark;
  --bg:#111111;--card:#1c1c1c;--sidebar:#1c1c1c;--text:#e1e1e1;--secondary:#9b9b9b;--disabled:#6f6f6f;
  --divider:rgba(225,225,225,.12);--hover:rgba(255,255,255,.06);--selected:rgba(3,169,244,.18);
  --input-bg:#2a2a2a;--input-line:rgba(225,225,225,.42);
  --shadow:0 2px 6px rgba(0,0,0,.5);
}}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.5 var(--font);-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
a{color:var(--primary-color);text-decoration:none}a:hover{text-decoration:underline}
h1,h2,h3{font-weight:400;margin:0}
h2{font-size:20px;margin-bottom:8px}
h3{font-size:16px;font-weight:500;margin:24px 0 10px}
.secondary,.note,footer{color:var(--secondary)}
.note{font-size:12px}
.icon{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
pre{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--input-bg);padding:12px 14px;border-radius:8px;font:13px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace}

/* Buttons */
button{font:500 14px var(--font);letter-spacing:.01em;border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 16px;border-radius:18px;background:transparent;color:var(--primary-color);transition:background .15s}
button .icon{width:18px;height:18px}
button:hover{background:var(--selected)}
button.primary{background:var(--primary-color);color:#fff}
button.primary:hover{background:var(--primary-dark)}
button.outlined{border:1px solid var(--divider)}
button.danger{color:var(--error);border:1px solid color-mix(in srgb,var(--error) 45%,transparent)}
button.danger:hover{background:color-mix(in srgb,var(--error) 12%,transparent)}
button:disabled{opacity:.5;cursor:progress}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,#map:focus-visible{outline:2px solid var(--primary-color);outline-offset:2px}
.icon-button{width:40px;height:40px;padding:0;border-radius:50%;color:var(--secondary)}
.icon-button .icon{width:24px;height:24px}
.buttons{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* Inputs (HA filled text field) */
input,textarea,select{width:100%;font:16px var(--font);color:var(--text);background:var(--input-bg);border:0;border-bottom:1px solid var(--input-line);border-radius:4px 4px 0 0;padding:10px 12px;min-height:44px}
input:focus,textarea:focus,select:focus{outline:none;border-bottom:2px solid var(--primary-color)}
input[type=checkbox]{width:18px;height:18px;min-height:0;accent-color:var(--primary-color)}
.field{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--secondary)}
.check{display:flex;align-items:center;gap:10px;color:var(--text)}
form{display:grid;gap:16px}
.inline{display:flex;gap:12px;align-items:end;flex-wrap:wrap}
.inline>.field,.inline>input{flex:1;min-width:180px}
.grid-form{grid-template-columns:repeat(2,minmax(0,1fr));align-items:end}
.wide{grid-column:1/-1}

/* Card */
.ha-card{background:var(--card);border:1px solid var(--divider);border-radius:var(--radius);color:var(--text)}
.padded{padding:16px 20px 20px}

/* Login */
.login{min-height:100%;display:grid;place-items:center;padding:24px 16px}
.login-card{width:min(420px,100%);padding:32px 28px;text-align:center}
.login-card h1{font-size:24px;margin:12px 0 4px}
.login-card form{text-align:left;margin-top:24px}
.login-card button{justify-self:end}

/* Shell: sidebar + main, like HA */
.shell{display:flex;min-height:100%}
.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar-w);background:var(--sidebar);border-right:1px solid var(--divider);display:flex;flex-direction:column;z-index:20;transition:transform .2s}
.sidebar-title{display:flex;align-items:center;gap:12px;height:56px;padding:0 16px;border-bottom:1px solid var(--divider);font-size:20px}
.menu{display:flex;flex-direction:column;padding:8px 0;gap:2px}
.menu button,.sidebar-bottom button{justify-content:flex-start;gap:24px;height:48px;margin:0 8px;padding:0 12px;border-radius:4px;color:var(--text);font-weight:500}
.menu button .icon,.sidebar-bottom button .icon{width:24px;height:24px;color:var(--secondary)}
.menu button:hover,.sidebar-bottom button:hover{background:var(--hover)}
.menu button.active{background:var(--selected);color:var(--primary-color)}
.menu button.active .icon{color:var(--primary-color)}
.sidebar-bottom{margin-top:auto;border-top:1px solid var(--divider);padding:8px 0;display:flex;flex-direction:column}
.version{font-size:12px;color:var(--secondary);padding:4px 20px 8px}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:15}
.main{flex:1;margin-left:var(--sidebar-w);min-width:0;display:flex;flex-direction:column}
.toolbar{position:sticky;top:0;z-index:10;height:56px;display:flex;align-items:center;gap:8px;padding:0 12px 0 20px;background:var(--bg);border-bottom:1px solid var(--divider)}
.toolbar h1{font-size:20px;flex:1}
#menu-toggle{display:none;margin-left:-8px}
#updated{font-size:12px;color:var(--secondary)}
.content{padding:16px;max-width:1400px;width:100%;margin:0 auto}
footer{font-size:12px;padding:24px 4px 8px}

/* Metrics: HA tile cards */
.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:16px}
.metric{display:flex;align-items:center;gap:12px;padding:12px;background:var(--card);border:1px solid var(--divider);border-radius:var(--radius)}
.metric .badge{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none;color:var(--c,var(--primary-color));background:color-mix(in srgb,var(--c,var(--primary-color)) 18%,transparent)}
.metric .badge .icon{width:22px;height:22px}
.metric strong{display:block;font-size:20px;font-weight:500;line-height:1.2}
.metric span{color:var(--secondary);font-size:12px}

/* Clients */
.heading{display:flex;gap:12px;align-items:end;flex-wrap:wrap;margin-bottom:16px}
.heading>input{flex:1 1 260px;max-width:420px}
.heading form{flex:1 1 360px;justify-content:flex-end}
.notice{padding:16px 20px;margin-bottom:16px;border-left:4px solid var(--primary-color)}
.notice h3{margin-top:0}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:8px;margin-top:8px}
.card{background:var(--card);border:1px solid var(--divider);border-radius:var(--radius);padding:16px;display:flex;flex-direction:column;overflow-wrap:anywhere}
.card-head{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.card-head .badge{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none;color:var(--c);background:color-mix(in srgb,var(--c) 18%,transparent)}
.card-head h3{margin:0;font-size:16px}
.card-head small{display:block;color:var(--secondary);font-size:12px}
.card p{margin:2px 0;color:var(--secondary)}
.card p b{color:var(--text);font-weight:400}
.card button{margin-top:12px;align-self:flex-end}
.state-online{--c:var(--success)}.state-offline{--c:var(--warning)}.state-blocked{--c:var(--error)}.state-unknown{--c:var(--unknown)}
.chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:12px;font-size:12px;font-weight:500;color:var(--c);background:color-mix(in srgb,var(--c) 15%,transparent)}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:4px;vertical-align:middle}
.dot.online{background:var(--success)}.dot.offline{background:var(--warning)}.dot.blocked{background:var(--error)}.dot.unknown{background:var(--unknown)}

/* Toast */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:100;max-width:min(560px,calc(100% - 32px));margin:0;padding:14px 20px;border-radius:4px;background:#323232;color:#fff;box-shadow:var(--shadow)}
.toast:empty{display:none}

/* Dialog (HA more-info) */
dialog{width:min(920px,calc(100% - 32px));max-height:calc(100% - 48px);padding:0;border:0;border-radius:24px;background:var(--card);color:var(--text);box-shadow:0 8px 32px rgba(0,0,0,.35)}
dialog::backdrop{background:rgba(0,0,0,.45)}
.dialog-header{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:8px;padding:12px 12px 12px 24px;background:var(--card);border-bottom:1px solid var(--divider)}
.dialog-header h2{flex:1;margin:0;font-size:22px}
.dialog-body{padding:16px 24px 24px}
.chip-line{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 8px;color:var(--secondary)}
.actions{display:flex;gap:12px;align-items:end;flex-wrap:wrap}
.actions .field{min-width:220px}
.history{max-height:240px;overflow:auto;border:1px solid var(--divider);border-radius:8px}
.history p{margin:0;padding:10px 14px;border-bottom:1px solid var(--divider);font-size:13px;white-space:pre-wrap}
.history p:last-child{border:0}
#dialog-message{color:var(--accent-color)}
#dialog-message:empty{display:none}

/* Map */
.map-card{overflow:hidden}
#map{position:relative;height:min(70vh,680px);min-height:360px;overflow:hidden;background:#dfe7ec;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
@media (prefers-color-scheme:dark){#map{background:#1f2a30}#tiles{filter:brightness(.78) contrast(1.08) saturate(.85)}}
#map.dragging{cursor:grabbing}
#map.placing{cursor:crosshair}
#map:fullscreen{height:100%;border-radius:0}
#map.fake-full{position:fixed;inset:0;height:auto;z-index:50}
#tiles,#markers{position:absolute;inset:0}#tiles{z-index:0}#markers{z-index:3}
#tiles img{position:absolute;max-width:none;user-select:none;pointer-events:none;image-rendering:auto}
#tiles img.loading{opacity:0}
#tiles img{transition:opacity .2s}
#markers{pointer-events:none}
.map-pin{position:absolute;transform:translate(-50%,-50%);width:22px;height:22px;padding:0;border:3px solid #fff;border-radius:50%;pointer-events:auto;box-shadow:0 1px 4px rgba(0,0,0,.45);background:var(--unknown);transition:transform .12s}
.map-pin:hover,.map-pin:focus-visible{transform:translate(-50%,-50%) scale(1.25);background:var(--unknown)}
.map-pin.online,.map-pin.online:hover{background:var(--success)}.map-pin.offline,.map-pin.offline:hover{background:var(--warning)}.map-pin.blocked,.map-pin.blocked:hover{background:var(--error)}
.map-pin.draft{background:var(--primary-color);animation:pulse 1.4s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 10px color-mix(in srgb,var(--primary-color) 25%,transparent)}}
.map-cluster{position:absolute;transform:translate(-50%,-50%);min-width:34px;height:34px;padding:0 8px;border-radius:17px;pointer-events:auto;color:#fff;font-weight:600;font-size:13px;border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.45);background:var(--primary-dark)}
.map-cluster:hover{background:var(--primary-color);transform:translate(-50%,-50%) scale(1.08)}
.map-cluster i{position:absolute;right:-3px;top:-3px;width:11px;height:11px;border-radius:50%;border:2px solid #fff;background:var(--c)}
.cluster-sample{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 5px;border-radius:11px;background:var(--primary-dark);color:#fff;font-size:11px;font-weight:600;border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.4)}
.map-controls{position:absolute;left:12px;top:12px;z-index:5;display:flex;flex-direction:column;background:var(--card);border-radius:8px;box-shadow:var(--shadow);overflow:hidden}
.map-controls.second{top:104px}
.map-controls button{width:40px;height:40px;padding:0;border-radius:0;color:var(--text)}
.map-controls button+button{border-top:1px solid var(--divider)}
.map-controls button .icon{width:20px;height:20px}
.map-controls button:hover{background:var(--hover)}
.map-hint{position:absolute;left:64px;right:12px;top:12px;z-index:5;width:fit-content;max-width:calc(100% - 76px);padding:8px 12px;border-radius:8px;background:color-mix(in srgb,var(--card) 92%,transparent);box-shadow:var(--shadow);font-size:13px;pointer-events:none}
#map .map-hint{transition:opacity .4s}#map .map-hint.faded{opacity:0}#map.placing .map-hint{opacity:1;background:var(--primary-color);color:#fff}
.map-cancel{position:absolute;right:12px;bottom:40px;z-index:6;background:var(--card);color:var(--error);box-shadow:var(--shadow)}
.map-tip{position:absolute;z-index:7;transform:translate(-50%,calc(-100% - 18px));padding:6px 10px;border-radius:6px;background:rgba(33,33,33,.92);color:#fff;font-size:12px;white-space:nowrap;pointer-events:none}
.map-scale{position:absolute;left:12px;bottom:8px;z-index:5;display:flex;align-items:center;gap:8px;font-size:11px;color:#333;pointer-events:none}
#map-scale-bar{display:inline-block;height:8px;border:2px solid #333;border-top:0;background:rgba(255,255,255,.7);text-align:center;line-height:0}
#map-scale-bar::after{content:attr(data-label);position:relative;top:-8px;font-size:11px;background:rgba(255,255,255,.75);padding:0 3px}
#map-zoom{background:rgba(255,255,255,.75);padding:0 4px;border-radius:3px}
.attribution{position:absolute;bottom:0;right:0;z-index:5;background:rgba(255,255,255,.85);color:#0078a8;padding:2px 6px;font-size:11px}
.map-footer{padding:12px 16px}
.legend{display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap;margin:0 0 6px}
.map-footer .note{margin:0}

/* Responsive: sidebar becomes a drawer like HA on mobile */
@media (max-width:870px){
  .sidebar{transform:translateX(-100%);box-shadow:var(--shadow)}
  .shell.drawer-open .sidebar{transform:none}
  .main{margin-left:0}
  #menu-toggle{display:inline-flex}
  .toolbar{padding-left:12px}
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .content{padding:12px}
  #updated{display:none}
  .grid-form{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .heading form{justify-content:stretch}
  dialog{width:100%;max-width:100%;max-height:100%;height:100%;border-radius:0}
  .dialog-body{padding:12px 16px 24px}
  #map{height:calc(100vh - 230px)}
  .map-hint{font-size:12px}
}

/* 0.3: list views, filters, table */
.state-primary{--c:var(--primary-color)}
.view-toggle{display:flex;gap:2px;background:var(--card);border:1px solid var(--divider);border-radius:20px;padding:2px}
.view-toggle .icon-button{width:36px;height:36px}
.view-toggle .icon-button.active{background:var(--selected);color:var(--primary-color)}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 8px}
.filter{height:32px;padding:0 14px;border-radius:16px;border:1px solid var(--divider);color:var(--text);font-weight:400;font-size:13px}
.filter.active{background:var(--selected);border-color:transparent;color:var(--primary-color);font-weight:500}
.buttons.end{justify-content:flex-end;margin-top:auto}
.card .buttons.end button{margin-top:8px}
.tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px!important}
.tag{display:inline-block;padding:1px 8px;border-radius:10px;font-size:12px;background:var(--hover);border:1px solid var(--divider);color:var(--secondary);margin:1px 2px 1px 0}
.table-wrap{overflow:auto;margin-top:8px}
#table{width:100%;border-collapse:collapse;font-size:14px}
#table th{position:sticky;top:0;background:var(--card);text-align:left;font-weight:500;color:var(--secondary);font-size:12px;padding:12px;border-bottom:1px solid var(--divider);cursor:pointer;white-space:nowrap;user-select:none}
#table th:hover{color:var(--text)}
#table th.sorted{color:var(--primary-color)}
#table th.sorted::after{content:' ' attr(data-dir)}
#table td{padding:10px 12px;border-bottom:1px solid var(--divider);vertical-align:middle}
#table td small{display:block;color:var(--secondary);font-size:12px}
#table td b{font-weight:500}
#table tbody tr{cursor:pointer}
#table tbody tr:hover,#table tbody tr:focus-visible{background:var(--hover);outline:none}
#table tbody tr:last-child td{border-bottom:0}
.num{text-align:right!important;white-space:nowrap;font-variant-numeric:tabular-nums}
.negative{color:var(--error)}

/* 0.3: provider client card */
.dialog-tabs{display:flex;gap:4px;padding:0 16px;border-bottom:1px solid var(--divider);overflow-x:auto;position:sticky;top:65px;z-index:2;background:var(--card)}
.dialog-tabs button{border-radius:0;height:44px;color:var(--secondary);border-bottom:2px solid transparent;white-space:nowrap}
.dialog-tabs button.active{color:var(--primary-color);border-bottom-color:var(--primary-color)}
.dialog-tabs button:hover{background:var(--hover)}
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;margin:12px 0}
.kpi{border:1px solid var(--divider);border-radius:var(--radius);padding:10px 12px;display:flex;flex-direction:column;border-left:4px solid var(--c,var(--divider))}
.kpi span{font-size:12px;color:var(--secondary)}
.kpi strong{font-size:18px;font-weight:500;color:var(--c,var(--text))}
.kpi small{font-size:12px;color:var(--secondary)}
.facts{display:grid;grid-template-columns:minmax(150px,max-content) 1fr;gap:6px 16px;margin:12px 0;font-size:14px}
.facts dt{color:var(--secondary)}
.facts dd{margin:0;overflow-wrap:anywhere}
.check.service{align-items:flex-start;padding:12px;border:1px solid var(--divider);border-radius:var(--radius);gap:12px}
.check.service .icon{color:var(--primary-color);flex:none}
.check.service small{color:var(--secondary)}
.check.service b{font-weight:500}
button.small{height:28px;padding:0 10px;font-size:12px;float:right}
#client-notes p b{font-weight:500}
@media (max-width:600px){.facts{grid-template-columns:1fr}.facts dd{margin-bottom:6px}.dialog-tabs{top:65px}}
#table td{white-space:nowrap}
#table td small{max-width:260px;overflow:hidden;text-overflow:ellipsis}
dialog#client-dialog{height:min(880px,calc(100% - 48px))}
.code-box{border:1px solid var(--divider);border-radius:var(--radius);padding:12px 16px}
.code-head{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
#code-value{margin:8px 0;font-size:15px;user-select:all}
.warn-line{display:flex;gap:8px;align-items:flex-start;padding:10px 12px;border-radius:8px;background:color-mix(in srgb,var(--warning) 14%,transparent);color:var(--text);margin:8px 0}

/* Client portal */
.portal .portal-bar{position:sticky;padding:0 12px 0 16px;gap:12px}
.portal .portal-bar h1{font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.portal #home-select{width:auto;max-width:240px;min-height:36px;padding:6px 10px;font-size:14px}
.portal-content{max-width:1000px;display:flex;flex-direction:column;gap:12px}
.portal-title{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:flex-start}
.portal-title h2{margin:0}
.portal-title p{margin:2px 0 0}
.portal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.card-title{display:flex;align-items:center;gap:10px;margin:0 0 8px}
.card-title .icon{color:var(--primary-color)}
.service-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--divider);border-radius:var(--radius);margin-top:8px}
.service-row .icon{color:var(--primary-color)}
.service-row div{flex:1}
.service-row small{display:block;color:var(--secondary)}
.service-row b{font-weight:500}
.thread{display:flex;flex-direction:column;gap:8px;margin-top:12px;max-height:420px;overflow:auto}
.msg{max-width:85%;padding:8px 12px;border-radius:12px;border:1px solid var(--divider)}
.msg p{margin:2px 0 0;white-space:pre-wrap}
.msg small{color:var(--secondary);font-size:12px}
.msg.from-me{align-self:flex-end;background:var(--selected);border-color:transparent}
.msg.from-op{align-self:flex-start;background:var(--card)}
.notice-line{padding:10px 12px;border-radius:8px;background:var(--selected);text-align:left}
.tg-login{display:flex;justify-content:center;min-height:48px;margin:20px 0 8px}
details.move{margin-top:12px;border-top:1px solid var(--divider);padding-top:12px}
details.move summary{cursor:pointer;color:var(--primary-color);font-weight:500}
details.move li{margin:6px 0}
@media (max-width:700px){.portal-grid{grid-template-columns:1fr}}
#client-notes p.note-client{border-left:3px solid var(--primary-color)}
#client-notes p.note-reply{border-left:3px solid var(--success)}

/* Object, zones, warehouse */
.object-tools{display:flex;gap:12px 24px;flex-wrap:wrap;margin:8px 0 16px}
.object-tools form{flex:1 1 320px}
.floor{margin:16px 0}
.floor-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.floor-head h3{margin:0;flex:1;display:flex;align-items:center;gap:8px}
.floor-head .icon{color:var(--primary-color)}
.zone{border:1px solid var(--divider);border-radius:var(--radius);padding:12px;margin:8px 0}
.zone-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.zone-head b{font-weight:500;font-size:15px;flex:1}
.zone-head small{color:var(--secondary)}
.zone-notes{color:var(--secondary);font-size:13px;margin:4px 0 0;white-space:pre-wrap}
.data-table{width:100%;border-collapse:collapse;font-size:14px}
.data-table th{text-align:left;font-weight:500;color:var(--secondary);font-size:12px;padding:8px;border-bottom:1px solid var(--divider);white-space:nowrap}
.data-table td{padding:6px 8px;border-bottom:1px solid var(--divider);vertical-align:middle}
.data-table tr:last-child td{border-bottom:0}
.data-table td small{display:block;color:var(--secondary);font-size:12px}
.data-table input.cell{width:90px;min-height:32px;padding:4px 8px;font-size:14px;text-align:right}
.data-table input.cell.qty{width:64px}
.zone .table-scroll{overflow-x:auto;margin-top:8px}
.add-line{display:flex;gap:8px;flex-wrap:wrap;align-items:end;margin-top:8px}
.add-line select{flex:1 1 260px;min-height:36px;padding:6px 10px;font-size:14px}
.add-line input{width:80px;min-height:36px;padding:6px 10px;font-size:14px}
.stock-heading select{max-width:260px}
.low{color:var(--error);font-weight:500}
.row-actions{white-space:nowrap;text-align:right}
#print-sheet{display:none}
@media print{
  body>*:not(#print-sheet){display:none!important}
  #print-sheet{display:block;color:#000;background:#fff;font:12px/1.4 Roboto,Arial,sans-serif;padding:0}
  #print-sheet h1{font-size:20px;margin:0}
  #print-sheet .ps-head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px solid #000;margin-bottom:8px}
  #print-sheet table{width:100%;border-collapse:collapse;margin-top:8px}
  #print-sheet th,#print-sheet td{border:1px solid #999;padding:4px 6px;text-align:left}
  #print-sheet td.n{text-align:right;white-space:nowrap}
  #print-sheet .ps-group td{background:#eee;font-weight:600}
  #print-sheet tfoot td{font-weight:600}
  #print-sheet .ps-foot{margin-top:24px;color:#555}
  @page{margin:14mm}
}
.estimate-row{flex-wrap:wrap}
.estimate-row div{min-width:200px}
.floor-title{margin:16px 0 4px;font-size:16px}
.row-actions button.small,.zone-head button.small,.floor-head button.small{float:none}
#stock-table td{white-space:nowrap}
#stock-table td:nth-child(2){white-space:normal;min-width:220px}
.chip{white-space:nowrap}
.no-perm{display:none!important}
.perm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:8px 16px}
.perm-grid .check{font-size:14px}
details.key-login{text-align:left;margin-top:12px}
details.key-login summary{cursor:pointer;color:var(--primary-color);font-weight:500;margin-bottom:8px}

/* ---------- Safari / iOS ---------- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{min-height:100vh;min-height:100dvh;padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
button,a,label,summary,select{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
/* Same look for fields in Safari as in Chrome: no native rounded/inset styling */
input:not([type=checkbox]):not([type=radio]),select,textarea{-webkit-appearance:none;appearance:none;background-clip:padding-box}
select{padding-right:36px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23888' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:12px 8px}
input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button{-webkit-appearance:none}
input[type=date],input[type=datetime-local]{display:flex;align-items:center;min-height:44px;line-height:1.2}
input::-webkit-date-and-time-value{text-align:left;margin:0}
input::-webkit-datetime-edit{padding:0}
input[type=number]{-moz-appearance:textfield}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{opacity:.6}
input::placeholder,textarea::placeholder{color:var(--secondary);opacity:.8}
input:-webkit-autofill,input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px var(--input-bg) inset;-webkit-text-fill-color:var(--text);caret-color:var(--text)}
input:user-invalid{border-bottom-color:var(--error)}
summary{list-style:none}summary::-webkit-details-marker{display:none}
details>summary::before{content:'▸ ';display:inline-block;transition:transform .15s}details[open]>summary::before{transform:rotate(90deg)}
dialog{-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.history,.thread,.table-wrap,.table-scroll{-webkit-overflow-scrolling:touch}
/* iPhone: 16px fields stop Safari from zooming the page on focus */
@media (hover:none) and (pointer:coarse){
  input:not([type=checkbox]):not([type=radio]),select,textarea,.data-table input.cell,.add-line select,.add-line input,.portal #home-select{font-size:16px!important}
  button{min-height:40px}
  button.small{min-height:36px;padding:0 12px}
}
@media (max-width:600px){
  #map{height:calc(100vh - 230px);height:calc(100dvh - 230px)}
  dialog{height:100%;height:100dvh;max-height:100dvh;padding-bottom:env(safe-area-inset-bottom)}
  .toolbar{padding-top:env(safe-area-inset-top);height:calc(56px + env(safe-area-inset-top))}
}
.toast{bottom:calc(24px + env(safe-area-inset-bottom))}
.login{min-height:100vh;min-height:100dvh}
/* Safari < 16.2 has no color-mix(): readable fallbacks */
@supports not (background:color-mix(in srgb,red 10%,transparent)){
  .chip,.metric .badge,.card-head .badge{background:rgba(127,127,127,.16)}
  .kpi{border-left-color:var(--c,var(--divider))}
  button.danger{border-color:var(--error)}
  .map-hint{background:var(--card)}
  .warn-line{background:rgba(255,166,0,.16)}
}
.login-ways{display:flex;flex-direction:column;gap:10px;text-align:left;margin-top:16px;border-top:1px solid var(--divider);padding-top:16px}
.login-ways div{display:flex;flex-direction:column;font-size:13px;color:var(--secondary)}
.login-ways b{color:var(--text);font-weight:500;font-size:14px}
.onboard-way{border:1px solid var(--divider);border-radius:var(--radius);padding:16px}
.onboard-way h3{margin-top:0}
#pending-note{margin:0}

/* Device pictures */
.device-art{display:inline-grid;place-items:center;flex:none;border-radius:10px;background:#f3f5f7;overflow:hidden;vertical-align:middle}
.device-art svg{width:100%;height:100%}
.device-art img{width:100%;height:100%;object-fit:contain;background:#fff}
.device-art.thumb{width:40px;height:40px;padding:3px}
.device-art.medium{width:88px;height:88px;padding:6px}
.device-art.large{width:216px;height:216px;padding:12px;border-radius:14px}
.with-art{display:flex;align-items:center;gap:10px}
.has-art{cursor:default}
.device-pop{position:fixed;z-index:1000;width:240px;padding:12px;border-radius:16px;background:var(--card);color:var(--text);border:1px solid var(--divider);box-shadow:0 10px 32px rgba(0,0,0,.3);display:flex;flex-direction:column;gap:4px;pointer-events:none;animation:pop .12s ease-out}
.device-pop b{font-weight:500;margin-top:6px}
.device-pop small{color:var(--secondary);font-size:12px}
@keyframes pop{from{opacity:0;transform:scale(.96)}}
.photo-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.file-btn{display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:18px;border:1px solid var(--divider);color:var(--primary-color);font:500 14px var(--font);cursor:pointer}
.add-preview:empty{display:none}
@media (prefers-color-scheme:dark){.device-art{background:#2a2f33}}
.tg-phone{font-size:12px;font-weight:500;margin-top:2px;align-self:flex-start}
#signup-form{align-items:start}
/* ---- Devices: energy flow (HA energy distribution style) and sensor table ---- */
.energy-box{max-width:420px;width:100%;margin:0 auto}
.energy-flow{display:block;width:100%;height:auto;font-family:var(--font)}
.energy-flow .flow-label{fill:var(--secondary);font-size:17px}
.energy-flow .flow-value{fill:var(--text);font-size:19px}
.energy-flow .flow-value.small{font-size:16px}
.energy-flow .flow-live{font-size:13px;font-weight:500}
.energy-flow .flow-icon{color:var(--text)}
.energy-flow .flow-node.solar .flow-icon{color:#ff9800}
.energy-flow .flow-node.grid .flow-icon{color:#488fc2}
.energy-flow .flow-node.battery .flow-icon{color:#4db6ac}
.device-layout{display:grid;grid-template-columns:minmax(260px,420px) 1fr;gap:24px;align-items:start}
@media (max-width:760px){.device-layout{grid-template-columns:1fr}}
.sensor-groups{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.sensor-group{border:1px solid var(--divider);border-radius:var(--radius);padding:8px 12px}
.sensor-group h4{margin:4px 0 6px;font-weight:500;font-size:14px;color:var(--secondary)}
.sensor-row{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-top:1px solid var(--divider);font-size:14px}
.sensor-row:first-of-type{border-top:0}
.sensor-row b{font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums}
tr.clickable{cursor:pointer}tr.clickable:hover{background:var(--hover)}
.data-table td small{display:block;color:var(--secondary)}
.portal-device+.portal-device{margin-top:24px;padding-top:16px;border-top:1px solid var(--divider)}
dialog#device-dialog{width:min(1040px,calc(100% - 32px))}
.direct-help summary{cursor:pointer;font-weight:500;color:var(--primary-color)}
.direct-help{margin-bottom:12px}
/* ---- Inverter statistics ---- */
.stats-head{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:4px 0 12px}
.stats-periods{display:flex;gap:6px}
.chart{position:relative;margin:4px 0 16px}
.chart-title{margin:16px 0 4px;font-weight:500;font-size:14px;color:var(--secondary)}
.chart-svg{display:block;width:100%;height:auto;touch-action:pan-y;font-family:var(--font)}
.chart-svg .axis{stroke:var(--divider);stroke-width:1}
.chart-svg .axis.zero{stroke:var(--secondary);stroke-opacity:.5}
.chart-svg .tick{fill:var(--secondary);font-size:11px}
.chart-svg .tick.mark{fill:var(--primary-color);font-weight:600}
.chart-svg .cursor{stroke:var(--secondary);stroke-dasharray:3 3}
.chart-svg .cursor.mark{stroke:var(--primary-color);stroke-dasharray:4 3}
.chart-legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:var(--secondary);margin-top:4px}
.chart-legend i,.chart-tip i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.chart-tip{position:absolute;top:8px;min-width:160px;background:var(--card);border:1px solid var(--divider);border-radius:8px;padding:6px 10px;font-size:12px;box-shadow:0 2px 8px rgba(0,0,0,.2);pointer-events:none;z-index:2}
.chart-tip b{display:block;margin-bottom:2px}.chart-tip span{display:block;white-space:nowrap}
.advice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px}
.advice{border:1px solid var(--divider);border-radius:var(--radius);padding:12px 14px;border-left:4px solid var(--primary-color)}
.advice.ok{border-left-color:#43a047}.advice.tight{border-left-color:#ffa600}.advice.overloaded{border-left-color:#db4437}
.advice h4{margin:0 0 6px;font-size:15px;font-weight:500}.advice p{margin:4px 0;font-size:14px}.advice small{display:block;margin-top:6px}
.equipment-form{margin-bottom:12px}
.portal-stats{margin-top:12px}.portal-stats>summary{cursor:pointer;color:var(--primary-color);font-weight:500;padding:6px 0}
/* Client portal: sidebar layout like the operator panel */
.portal .sidebar-home{padding:8px 16px 0}
.portal .sidebar-home select{width:100%;font-size:14px}
.portal .sidebar-bottom .version{padding:4px 20px 8px;color:var(--secondary);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.portal [data-psec]{display:flex;flex-direction:column;gap:12px}
.portal [data-psec][hidden]{display:none}
.device-tabs{position:static;margin:8px 0 12px;border-bottom:1px solid var(--divider)}
.device-pane[hidden]{display:none}
.operator-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:10px 16px;border-radius:var(--radius);background:var(--selected);border:1px solid var(--primary-color)}
.operator-bar[hidden]{display:none}
.view-only #home-view form button,.view-only #home-view form input,.view-only #home-view form textarea,.view-only #rebind,.view-only #renew-code,.view-only .tg-phone{pointer-events:none;opacity:.45}
.device-tabs{overflow-x:auto;scrollbar-width:none}.device-tabs::-webkit-scrollbar{display:none}
@media (max-width:600px){.device-tabs button,#device-dialog .dialog-tabs button{padding:0 10px;font-size:13px}.portal .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.portal-device.combined{border:1px solid var(--primary-color);border-radius:var(--radius);padding:12px}
/* ---- Support tickets ---- */
.menu-badge{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--primary-color);color:#fff;font-size:12px;line-height:20px;text-align:center}
.menu-badge[hidden]{display:none}
.tickets-table tr.unread td:first-child b::before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--primary-color);margin-right:6px;vertical-align:1px}
.tickets-table td small.overdue,.ticket-meta-overdue{color:#db4437;font-weight:500}
.ticket-client{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px}
.ticket-controls{margin:8px 0}
.ticket-thread{max-height:min(50vh,520px);border:1px solid var(--divider);border-radius:var(--radius);padding:12px;margin:8px 0 12px}
.msg.internal{background:rgba(255,166,0,.12);border:1px dashed #ffa600}
.msg-system{align-self:center;margin:0;font-size:12px;color:var(--secondary);text-align:center}
.ticket-reply textarea{width:100%}
.heading-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
dialog#ticket-dialog{width:min(860px,calc(100% - 32px))}
dialog#new-ticket-dialog{width:min(640px,calc(100% - 32px))}
.ticket-list .ticket-item{cursor:pointer}
.ticket-item{cursor:pointer}.ticket-item:hover{background:var(--hover)}
.ticket-item.unread b::before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--primary-color);margin-right:6px;vertical-align:1px}
.rate-box{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:8px 0;padding:10px 12px;border:1px solid var(--divider);border-radius:var(--radius)}
.rate-box input{flex:1;min-width:180px}
.stars{display:flex;gap:2px}.stars .star{font-size:24px;padding:0 4px;height:36px;color:#ffa600}
#tickets-list{margin-top:8px}
.portal .menu button .menu-badge{margin-left:auto}
.ticket-controls{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:700px){.ticket-controls{grid-template-columns:repeat(2,minmax(0,1fr))}}
.view-only #tv-close,.view-only #ticket-new-btn,.view-only #tv-rate-send,.view-only .stars{pointer-events:none;opacity:.45}
/* ---- Inverter settings (screen-like) ---- */
.set-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 16px;margin:4px 0 12px}
.control-switch{font-weight:500}
.screen-card{border:1px solid var(--divider);border-radius:var(--radius);padding:12px 14px;margin-bottom:12px;background:linear-gradient(180deg,rgba(3,169,244,.06),transparent 40%)}
.screen-title{margin:0 0 10px;font-size:15px;font-weight:600;letter-spacing:.02em}
.mode-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:10px}
.mode-btn{height:auto;min-height:48px;padding:8px 10px;border:1px solid var(--divider);border-radius:10px;color:var(--text);white-space:normal;text-align:center;line-height:1.3}
.mode-btn.active{border-color:var(--primary-color);background:var(--selected);color:var(--primary-color);font-weight:600}
.mode-btn:disabled{opacity:1;cursor:default}
.mode-btn:disabled:not(.active){opacity:.55}
.screen-toggle{margin:4px 0 8px}
.tou-table input[type=time]{width:110px}.tou-table input[type=number]{width:96px;text-align:right}
.tou-table td,.tou-table th{white-space:nowrap}
.screen-actions{margin:8px 0 4px}
.set-history p{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
@media (max-width:700px){.mode-buttons{grid-template-columns:1fr}}
.snapshot summary{cursor:pointer}.snapshot-search{width:100%;margin:8px 0}.snapshot-out{max-height:320px;overflow:auto}
.tou-table input.unverified{outline:1px dashed #ffa600}
.mode-extras{margin:4px 0 8px}
.charge-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.charge-col{display:flex;flex-direction:column;gap:8px;border:1px solid var(--divider);border-radius:8px;padding:10px}
@media (max-width:700px){.charge-cols{grid-template-columns:1fr}}
.tou-table input.unverified{width:130px;color:var(--secondary)}
.info-values{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
/* Portal: one device at a time, picked by tabs */
.device-picker{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.device-pick{flex:none;height:36px;padding:0 14px;border-radius:18px;border:1px solid var(--divider);color:var(--text);font-weight:400;font-size:14px;background:transparent;white-space:nowrap}
.device-pick.active{background:var(--selected);border-color:transparent;color:var(--primary-color);font-weight:500}
.device-pick .dot{width:8px;height:8px;margin-right:6px}
/* Equipment for the analytics: panel groups */
.panel-groups{display:grid;gap:8px;margin:6px 0}
.panel-group{display:grid;grid-template-columns:1fr 1fr 1.3fr auto;gap:8px;align-items:end}
.panel-group .remove{min-width:36px;height:40px;font-size:20px;padding:0}
.groups-hint{font-size:13px;margin:8px 0 0}
.equipment-form.readonly .buttons,.equipment-form.readonly .remove{display:none}
.equipment-form,.location-form{border:1px solid var(--divider);border-radius:var(--radius);padding:12px 14px;margin-bottom:12px}
.equipment-form h4,.location-form h4{margin-top:0}
.wx-need{border-radius:var(--radius);padding:10px 14px;margin:0 0 12px;background:color-mix(in srgb,var(--warning) 14%,transparent)}
.wx-need ul{margin:6px 0;padding-left:20px}.wx-need p{margin:4px 0}
.months-table td{text-align:right;white-space:nowrap}.months-table td:first-child,.months-table th:first-child{text-align:left}
.months-table th{text-align:right}.months-table tr.total td{font-weight:500;border-top:1px solid var(--divider)}
.table-scroll{overflow-x:auto}
@media (max-width:600px){.panel-group{grid-template-columns:1fr 1fr}.panel-group label:nth-child(3){grid-column:1}.panel-group .remove{justify-self:start}}
.equipment-form .grid-form,.location-form .grid-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px}
.bot-login{display:flex;flex-direction:column;align-items:center;gap:6px;margin:4px 0 12px;text-align:center}
.bot-login a.button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:22px;border:1px solid var(--primary-color);color:var(--primary-color);text-decoration:none;font-weight:500}
.bot-login small{font-size:12px;max-width:320px}
/* Portal login: email */
.email-box{display:flex;flex-direction:column;align-items:center;gap:6px;margin:0 0 12px}
.email-form{width:100%;text-align:left;margin-top:8px}
.email-form .buttons{justify-content:flex-start}
.letter-body{white-space:pre-wrap;font:14px/1.5 inherit;font-family:inherit;max-height:60vh;overflow:auto;background:var(--secondary-background,transparent);padding:8px 0}
#mail-log tr.clickable{cursor:pointer}#mail-log td small{display:block;color:var(--error)}
#portal-letter{margin-top:8px}
#mail-test{display:flex;gap:8px;align-items:center;flex-wrap:wrap}#mail-test input{flex:1;min-width:220px}

/* ---- Electrical panel designer (конструктор щитов) ---- */
.panel-head.grid-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px 12px;margin-bottom:8px}.panel-head .wide{grid-column:1/-1}
.panel-toolbar,.wire-tools{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;margin:8px 0}
.spacer{flex:1}
.segmented{display:inline-flex;border:1px solid var(--divider);border-radius:18px;overflow:hidden}
.segmented button{border:0;background:none;color:var(--text);padding:6px 14px;font:inherit;cursor:pointer;min-height:32px}
.segmented button+button{border-left:1px solid var(--divider)}
.segmented button.active{background:var(--selected);color:var(--primary-color);font-weight:500}
.segmented .w-L.active{color:#d32f2f}.segmented .w-L2.active{color:#6d4c41}.segmented .w-L3.active{color:#757575}.segmented .w-N.active{color:#1e5bd8}.segmented .w-PE.active{color:#2e9d3a}
.chip-button{border:1px solid var(--divider);background:var(--card);color:var(--text);border-radius:16px;padding:4px 12px;margin:0 6px 6px 0;cursor:pointer;font:inherit}
.chip-button.active{border-color:var(--primary-color);color:var(--primary-color);background:var(--selected)}
.panel-palette{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.palette-title{flex-basis:100%;color:var(--secondary);margin-top:4px}
.palette-item{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:8px;align-items:center;text-align:left;border:1px solid var(--divider);border-radius:8px;background:var(--card);color:var(--text);padding:4px 10px;cursor:grab;font:inherit;max-width:240px}
.palette-item b{grid-row:span 2;font-size:12px;min-width:34px;text-align:center;padding:4px;border-radius:4px;background:var(--input-bg)}
.palette-item span{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.palette-item small{color:var(--secondary);font-size:11px}
.palette-item.stock{border-style:dashed}
.palette-item:hover{border-color:var(--primary-color)}
.panel-layout{display:flex;gap:16px;align-items:flex-start}
.panel-canvas{flex:1;min-width:0;overflow:auto;border-radius:var(--radius);background:var(--input-bg);padding:8px;-webkit-overflow-scrolling:touch}
.din-svg{display:block;width:100%;min-width:min(100%,var(--panel-w));max-width:var(--panel-w);height:auto;margin:0 auto;font-family:var(--font);user-select:none;-webkit-user-select:none;touch-action:pan-x pan-y}
.module-form{flex:0 0 260px;border:1px solid var(--divider);border-radius:var(--radius);padding:12px;background:var(--card)}
.module-form h3{margin:0 0 8px}
.module-form .two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.module-form .buttons{flex-wrap:wrap}
@media (max-width:900px){.panel-layout{flex-direction:column}.module-form{flex-basis:auto;width:100%}}
/* SVG parts */
.din-enclosure{fill:#f4f4f2;stroke:#c9c9c4;stroke-width:3}
.din-enclosure.flush{stroke:#9e9e98;stroke-width:8}
.din-model{font-size:13px;fill:#6b6b66}
.din-rail-bar{fill:#c4c8cc;stroke:#9aa0a6}
.din-rail-slot{fill:#8a9096}
.din-rail-no,.din-used{font-size:14px;fill:#8a8a85;font-weight:500}
.din-used.over{fill:#db4437}
.mod-body{fill:#fdfdfd;stroke:#b5b5b0;stroke-width:1.2}
.mod-front{fill:#f1f1ee}
.mod-tag{fill:#ffe066;stroke:#d4b106;stroke-width:.6}
.mod-num{font-size:9px;font-weight:700;fill:#333}
.mod-model{font-size:7.5px;fill:#2e7d32}
.mod-rating{font-size:10px;font-weight:700;fill:#333}
.mod-small{font-size:10px;font-weight:600;fill:#555}
.mod-tiny{font-size:8px;font-weight:700;fill:#fff}
.mod-label{font-size:10px;fill:#333}
.toggle-slot{fill:#d9d9d5;stroke:#a9a9a4}
.toggle{fill:#2b2b2b}.toggle.red{fill:#d32f2f}
.indicator-green{fill:#43a047}
.test-btn{fill:#757575}
.lcd{fill:#1d2b36;stroke:#5f6b74}
.lcd-text{font:700 14px/1 "SFMono-Regular",Menlo,Consolas,monospace;fill:#7fdfff}
.mod-keys{fill:#cfd2d4}
.led-green{fill:#2ecc40}.led-red{fill:#e53935}.led-blue{fill:#1e88e5}
.cartridge{fill:#9ea4a8;stroke:#7d8286}
.socket{fill:#fafafa;stroke:#9e9e9e}.socket-hole{fill:#555}
.blank{fill:#e6e6e2;stroke:#bdbdb8}
.bus-cover{fill:#e8e8e5;stroke:#a6a6a1}
.bus-mark{font-size:11px;font-weight:700;fill:#fff}
.screw{fill:#e2e2df;stroke:#8d8d88;stroke-width:1.2}
.screw-slot{stroke:#77776f;stroke-width:1.6}
.din-term.live .term-hit{fill:transparent;cursor:crosshair}
.din-term.live:hover .screw{fill:#fff3c4;stroke:#f9a825}
.din-term.pending .screw{fill:#ffd54f;stroke:#f57f17;stroke-width:2.5}
.term-hit{fill:transparent}
.wire-core{fill:none;stroke-width:3.4;stroke-linejoin:round;stroke-linecap:round}
.wire-stripe{fill:none;stroke:#fdd835;stroke-width:3.4;stroke-dasharray:6 6;stroke-linejoin:round}
.wire-hit{fill:none;stroke:transparent;stroke-width:12;cursor:pointer}
.din-wire.selected .wire-core{stroke-width:6}
.din-wire.selected{filter:drop-shadow(0 0 3px #03a9f4)}
.mod-hit{fill:transparent;cursor:pointer}
.din-mod.selected .mod-body,.din-mod.selected .bus-cover{stroke:#03a9f4;stroke-width:3}
.din-mod.dragging{opacity:.75;cursor:grabbing}
#client-dialog:has(#dtab-panel:not([hidden])){width:min(1500px,96vw);max-width:96vw}
.panel-canvas{background:#e9eae6}
@media print{
  #print-sheet .ps-panel{page-break-after:always}
  #print-sheet .din-svg{width:100%;max-width:none;min-width:0}
  #print-sheet .din-enclosure{fill:#fff}
  #print-sheet .ps-labels{display:flex;margin:6px 0;border:1px dashed #999}
  #print-sheet .ps-label{flex:0 0 calc(var(--s) * 18mm);height:12mm;border-right:1px dashed #999;padding:1mm;font-size:8pt;line-height:1.1;overflow:hidden}
  #print-sheet .ps-label b{display:block}
  #print-sheet h2{font-size:14px;margin:12px 0 4px}
}
/* front view (как настоящий щит) */
.din-svg.front .din-enclosure{fill:#f3f1ec;stroke:#d9d5cb}
.enc-cover{fill:#fbfbfa;stroke:#e1ded6}
.enc-brand{font:700 26px var(--font);fill:#b9b9b5;letter-spacing:.5px}
.enc-sub{font-size:14px;fill:#8d8d88}
.cover-plate{fill:#faf9f6;stroke:#e2dfd7}
.cover-blank{fill:#f7f6f2}
.pos-no{font-size:15px;fill:#9a9a95}
.label-strip{fill:#fbfaf7;stroke:#e2dfd7}
.label-groove{stroke:#e5e2da;stroke-width:1.2}
.strip-text{font-size:9px;fill:#444}
.b-hager{font:700 6.5px var(--font);fill:#1f6fd1}
.b-mark{font:6.5px var(--font);fill:#555}
.b-mark-c{font:700 8px var(--font);fill:#444}
.b-tongou{font:700 7.5px var(--font);fill:#fff}
.b-tongou-a{font:700 8.5px var(--font);fill:#eee}
.b-tiny-light{font:5.5px var(--font);fill:#bdbdbd}
.b-tiny{font:5.5px var(--font);fill:#555}
.b-earu{font:700 8px var(--font);fill:#fff}
.b-earu-btn{font:700 10px var(--font);fill:#8a4a42}
.b-schneider{font:700 7px var(--font);fill:#3dcd58}
.b-legrand{font:700 7.5px var(--font);fill:#c62828}
.b-abb{font:900 9px var(--font);fill:#e53935}
.b-legrand-c{font:700 11px var(--font);fill:#222}
.bus-caption{font-size:11px;font-weight:600;fill:#555}
.enc-bus.selected rect{stroke:#03a9f4;stroke-width:2}
.panel-buses{border:1px solid var(--divider);border-radius:var(--radius);padding:8px 12px;margin:8px 0}
.bus-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bus-head b{font-weight:500;margin-right:8px}
.bus-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px}
.bus-row select,.bus-row input,.palette-library select{background:var(--input-bg);color:var(--text);border:1px solid var(--divider);border-radius:6px;padding:4px 6px;font:inherit}
.bus-row input[type=number]{width:64px}
.palette-library{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex-basis:100%;margin-bottom:4px}
.palette-title-inline{color:var(--secondary)}
.w-N{color:#1e5bd8!important}.w-PE{color:#2e9d3a!important}.w-L{color:#d32f2f!important}
.din-svg.front,.din-svg.wiring{max-width:min(100%,calc(var(--panel-w) * 1.8))}
.mod-selected{fill:none;stroke:#03a9f4;stroke-width:3}
.niimbot-dialog{width:min(860px,calc(100% - 32px))}
.niimbot-dialog .dialog-body{padding:0 24px 24px;overflow:auto;max-height:calc(100vh - 140px)}
.niimbot-connect{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;margin:8px 0 12px}
.niimbot-connect [data-state]{flex:1 1 220px}
.niimbot-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px 16px}
.niimbot-preview{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 16px;max-height:340px;overflow:auto;padding:8px;background:var(--input-bg);border-radius:8px}
.niimbot-preview canvas{height:auto;border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.15);background:#fff;image-rendering:pixelated}
.push-dot{fill:#222}
.bus-letter{font:700 13px var(--font);fill:#fff}
.term-mark{font:700 9px var(--font);fill:#c62828}
.din-wires.has-net .din-wire{opacity:.18}
.din-wires.has-net .din-wire.in-net,.din-wires.has-net .din-wire.selected{opacity:1}
.din-wire.in-net .wire-core{stroke-width:5}
.din-wire.in-net{filter:drop-shadow(0 0 2px #03a9f4)}
.din-term.in-net .screw{fill:#b3e5fc;stroke:#0288d1;stroke-width:2}
.din-term.in-net .push-dot{fill:#0288d1}
.icon-grid{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0}
.icon-pick{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--divider);border-radius:6px;background:var(--card);color:var(--text);cursor:pointer;padding:0}
.icon-pick.none{width:auto;padding:0 8px;font-size:12px}
.icon-pick.active{border-color:var(--primary-color);background:var(--selected);color:var(--primary-color)}
.icon-pick:disabled{opacity:.5;cursor:default}
.sticker-editor{border:1px solid var(--divider);border-radius:var(--radius);padding:10px 12px;margin-bottom:12px}
.sticker-head{display:flex;justify-content:space-between;align-items:center}
.niimbot-preview canvas{cursor:pointer}
.niimbot-preview canvas.editing{box-shadow:0 0 0 3px var(--primary-color)}
.ps-label svg{width:12px;height:12px;vertical-align:middle;margin-right:2px}
.panel-stage{flex:1;min-width:0}
.panel-stage .panel-canvas{max-height:78vh}
.zoom-bar{display:flex;align-items:center;gap:4px;margin:0 0 6px}
.zoom-btn{min-width:32px;height:30px;border:1px solid var(--divider);border-radius:6px;background:var(--card);color:var(--text);cursor:pointer;font:inherit;padding:0 8px}
.zoom-btn:hover{border-color:var(--primary-color)}
.zoom-label{color:var(--secondary);font-size:12px;margin-left:6px}
.stage-row{display:flex;gap:8px;align-items:flex-start}
.stage-row .panel-canvas{flex:1;min-width:0}
.wire-rail{position:sticky;top:8px;display:flex;flex-direction:column;gap:6px;flex:0 0 58px}
.wire-rail small{color:var(--secondary);text-align:center;font-size:11px}
.wr{display:flex;flex-direction:column;align-items:center;gap:3px;border:2px solid var(--divider);border-radius:10px;background:var(--card);color:var(--text);font:600 12px var(--font);padding:6px 0;cursor:pointer}
.wr i{display:block;width:30px;height:8px;border-radius:4px;background:var(--c)}
.wr.w-L{--c:#d32f2f}.wr.w-L2{--c:#3e2723}.wr.w-L3{--c:#757575}.wr.w-N{--c:#1e5bd8}.wr.w-PE{--c:repeating-linear-gradient(90deg,#2e9d3a 0 6px,#fdd835 6px 12px)}
.wr.active{border-color:var(--primary-color);background:var(--selected)}
.wr:hover{border-color:var(--primary-color)}
@media (max-width:600px){.stage-row{flex-direction:column}.wire-rail{position:static;flex-direction:row;flex-basis:auto}.wr{flex:1}}
.enc-frame{fill:#e9e4d6;stroke:#cfc7b1;stroke-width:2}
.enc-slot{fill:#d6cfbb;stroke:#bfb69e}
.enc-plate{fill:#f6f5f1;stroke:#dedbd2}
.din-svg.front .enc-cover{fill:#fbfbfa;stroke:#e3e0d8;stroke-width:1.5}
.din-svg.front .enc-brand{font:700 30px var(--font);fill:#b2b2ad}
.din-svg.front .enc-sub{font-size:15px;fill:#8d8d88}
.din-svg.front .cover-plate{fill:#fbfaf7;stroke:#e6e3db}
.cover-window{fill:#d9d8d2}
.din-svg.front .label-strip{fill:#fdfdfb;stroke:#e6e3db}
.din-svg.front .label-groove{stroke:#e4e1d9;stroke-width:1.5}
.sticker{fill:#fff;stroke:#d8d8d8;stroke-width:.8}
.din-svg.front .strip-text{font:600 11px var(--font);fill:#111}
.din-svg.front .pos-no{font-size:17px;fill:#9a9a95}
.bus-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:8px 0;border-top:1px solid var(--divider)}
.bus-row select,.bus-row input{width:auto!important;min-width:0;height:34px;margin:0}
.bus-row input[type=number]{width:62px!important}
.bus-row input:not([type]){flex:1 1 140px}
.bus-row button{margin-left:auto}
.sticker-hit{fill:transparent;cursor:pointer}
.sticker-hit:hover{fill:rgba(3,169,244,.12);stroke:#03a9f4;stroke-width:1.5}
.qr-login{display:flex;gap:16px;align-items:center;text-align:left;margin:12px 0 16px;padding:12px;border:1px solid var(--divider);border-radius:var(--radius)}
.qr-box{flex:0 0 150px;width:150px;height:150px}
.qr-svg{width:150px;height:150px;display:block;border-radius:6px}
.qr-text{display:flex;flex-direction:column;gap:6px;font-size:13px}
.qr-text ol{margin:0;padding-left:18px}
.qr-text .button{align-self:flex-start}
@media (max-width:520px){.qr-login{flex-direction:column;text-align:center}.qr-text .button{align-self:center}}
.niimbot-advanced{border:1px solid var(--divider);border-radius:8px;padding:6px 12px;margin:8px 0}
.niimbot-advanced summary{cursor:pointer;color:var(--secondary)}
.niimbot-log{margin:8px 0}.niimbot-log summary{cursor:pointer;color:var(--secondary)}
.niimbot-log pre{max-height:220px;overflow:auto;background:var(--input-bg);padding:8px;border-radius:6px;font-size:11px;white-space:pre-wrap}
.niimbot-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 12px}
.niimbot-advanced>summary{font-weight:500;color:var(--primary-color)!important}
.din-wires.has-net .din-wire{transition:opacity .12s}

/* «План» объекта */
.fp-mini{display:inline-flex;align-items:center;gap:6px;color:var(--secondary);font-size:13px}
.fp-mini select{background:var(--input-bg);color:var(--text);border:1px solid var(--divider);border-radius:6px;padding:4px 6px;font:inherit}
.fp-toolbar button.text.active{color:var(--primary-color);font-weight:500}
.fp-main{display:flex;gap:12px;align-items:stretch;position:relative}
.fp-canvas{position:relative;flex:1;min-width:0}
.fp-svg{display:block;width:100%;height:min(68vh,760px);max-height:min(68vh,760px);min-height:380px;border:1px solid var(--divider);border-radius:8px;background:var(--card);touch-action:none;user-select:none;-webkit-user-select:none;cursor:default}
.fp-svg[data-tool=wall],.fp-svg[data-tool=rect],.fp-svg[data-tool=sensor],.fp-svg[data-tool=window],.fp-svg[data-tool=door]{cursor:crosshair}
.fp-svg[data-tool=zone],.fp-svg[data-tool=floor]{cursor:cell}
.fp-side{width:270px;flex:none;display:flex;flex-direction:column;gap:6px}
.fp-side h4{margin:0 0 4px;font-size:15px;font-weight:500}
.fp-side .field{width:100%}
.fp-side .buttons{display:flex;flex-wrap:wrap;gap:4px}
.fp-side button.danger{color:var(--error);align-self:flex-start}
.fp-tree{display:flex;flex-direction:column;gap:2px}
.fp-tree>div{padding:4px 8px;border-radius:6px;cursor:pointer}.fp-tree>div:hover{background:var(--hover)}
.fp-tree-floor{font-weight:500}.fp-tree-zone{padding-left:22px!important;color:var(--secondary)}
#fp-wrap:fullscreen{background:var(--bg);padding:12px;overflow:auto}
#fp-wrap:fullscreen .fp-svg{height:calc(100vh - 130px)}
@media (max-width:860px){.fp-main{flex-direction:column}.fp-side{width:auto}.fp-canvas{flex:none;width:100%}}
.fp-grid1{stroke:rgba(127,127,127,.16)}.fp-grid2{stroke:rgba(127,127,127,.32)}
.fp-wall{stroke:var(--text);stroke-linecap:square}
.fp-hit{stroke:transparent;stroke-linecap:square;cursor:pointer}.fp-hit:hover{stroke:rgba(3,169,244,.25)}.fp-hit.sel{stroke:rgba(3,169,244,.55)}
.fp-cut{fill:var(--card)}
.fp-win{fill:none;stroke:var(--primary-color)}
.fp-jamb{stroke:var(--text)}.fp-door{stroke:var(--text);stroke-linecap:round}.fp-swing{fill:none;stroke:var(--secondary)}
.fp-hit-o{fill:transparent;cursor:pointer}.fp-open.sel .fp-cut{fill:var(--selected)}.fp-open:hover .fp-cut{fill:var(--hover)}
.fp-zone{fill-opacity:.13;stroke:none;cursor:pointer}.fp-zone:hover{fill-opacity:.2}.fp-zone.sel{fill-opacity:.3}
.fp-floor{fill:none;stroke:var(--accent-color);cursor:pointer;pointer-events:stroke}.fp-floor.sel{stroke:var(--primary-color)}
.fp-dim{fill:var(--secondary);text-anchor:middle;pointer-events:none;font-variant-numeric:tabular-nums}
.fp-zlabel{fill:var(--text);text-anchor:middle;font-weight:500;cursor:pointer}.fp-zlabel .fp-area{fill:var(--secondary);font-weight:400}.fp-zlabel.sel{fill:var(--primary-color)}
.fp-flabel{fill:var(--accent-color);font-weight:500;cursor:pointer}.fp-flabel.sel{fill:var(--primary-color)}
.fp-broken{fill:var(--error);cursor:pointer}
.fp-sensor{cursor:pointer}.fp-sensor circle{fill:var(--card);stroke:var(--primary-color)}.fp-sensor.unbound circle{stroke:var(--warning);stroke-dasharray:3 2}
.fp-sensor.sel circle{fill:var(--selected);stroke-width:3}.fp-sensor .fp-sname,.fp-sensor .fp-sval{fill:var(--text)}
.fp-sensor.on circle{fill:rgba(255,166,0,.25)}.fp-sensor.off circle{opacity:.7}
.fp-node{fill:var(--card);stroke:var(--primary-color);cursor:move}.fp-node.sel{fill:var(--primary-color)}
.fp-ghost{stroke:var(--primary-color);stroke-opacity:.35;fill:none;stroke-linecap:square}
.fp-live{fill:var(--primary-color);font-weight:500}
.fp-cursor{fill:none;stroke:var(--secondary);pointer-events:none}.fp-cursor.hit{stroke:var(--primary-color)}
.fp-pop{position:absolute;top:auto;bottom:8px;right:8px;width:min(290px,calc(100% - 16px));max-height:calc(min(68vh,760px) - 16px);overflow:auto;background:var(--card);border:1px solid var(--divider);border-radius:10px;box-shadow:var(--shadow);padding:10px 12px;z-index:2}
.fp-side .fp-close{position:absolute;top:2px;right:2px;font-size:20px;line-height:1;padding:4px 10px;min-height:0}
.fp-top{display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap;margin:4px 0 8px}
.fp-status button{padding:6px 12px}
.fp-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.fp-tools{display:flex;gap:2px;flex-wrap:wrap;background:var(--input-bg);border-radius:12px;padding:3px}
.fp-tools button{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:62px;padding:5px 6px 4px;border:0;border-radius:9px;background:none;color:var(--secondary);font:inherit;font-size:11.5px;cursor:pointer}
.fp-tools button:hover{background:var(--hover);color:var(--text)}
.fp-tools button.active{background:var(--card);color:var(--primary-color);box-shadow:0 1px 3px rgba(0,0,0,.18);font-weight:500}
.fp-ti{flex:none;width:22px!important;height:22px!important;min-height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fp-actions{display:flex;align-items:center;gap:2px;flex-wrap:wrap;position:relative}
.icon-btn{border:0;background:none;color:var(--text);font-size:18px;line-height:1;width:34px;height:34px;border-radius:50%;cursor:pointer}.icon-btn:hover{background:var(--hover)}
.fp-sep{width:1px;height:22px;background:var(--divider);margin:0 4px}
.fp-more{position:relative}.fp-more summary{list-style:none;cursor:pointer;padding:6px 10px;color:var(--primary-color)}.fp-more summary::-webkit-details-marker{display:none}
.fp-menu{position:absolute;right:0;top:100%;z-index:5;display:flex;flex-direction:column;align-items:stretch;gap:4px;min-width:230px;padding:10px;background:var(--card);border:1px solid var(--divider);border-radius:10px;box-shadow:var(--shadow)}
.fp-menu button{text-align:left}.fp-menu .fp-mini{justify-content:space-between}
.fp-hint{margin:0 0 6px;font-size:13px;min-height:20px;color:var(--secondary);padding:6px 10px;border-radius:8px;background:var(--selected)}
.fp-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;padding:16px}
.fp-empty-card{pointer-events:auto;max-width:440px;background:var(--card);border:1px solid var(--divider);border-radius:12px;box-shadow:var(--shadow);padding:14px 18px}
.fp-empty-card h4{margin:0 0 6px;font-size:16px;font-weight:500}.fp-empty-card ol{margin:0 0 10px;padding-left:20px;color:var(--secondary);font-size:13px}.fp-empty-card li{margin:3px 0}
.fp-tile{fill:#fff;stroke:#90a4ae}
.fp-dev{cursor:pointer}.fp-dev.sel .fp-tile,.fp-dev.sel rect{stroke:var(--primary-color)!important;stroke-width:2.5px}
.fp-dev.sel{filter:drop-shadow(0 0 3px rgba(3,169,244,.9))}
.fp-dev.dim{opacity:.38}.fp-dev.dim .fp-tile{stroke-dasharray:3 2}
.fp-dev.ghost{opacity:.55;pointer-events:none}
.fp-badge{fill:var(--accent-color);stroke:var(--card);stroke-width:1px}.fp-badge-t{fill:#fff;font-weight:700}
.fp-dname{fill:var(--text);pointer-events:none;paint-order:stroke;stroke:var(--card);stroke-width:3px;stroke-linejoin:round}.fp-dname.dim{opacity:.45}
.fp-zone.loose{fill-opacity:.07}
.fp-tree>div{display:flex;flex-wrap:wrap;gap:0 8px;align-items:center}
.fp-tree-dev{padding-left:8px!important}.fp-tree-dev svg{flex:none}
.fp-warn{color:var(--warning);font-size:12px}
.fp-status-line{margin:0 0 6px;font-size:13px;color:var(--secondary)}
.fp-legend{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px;margin-top:4px}
.fp-lg::before{content:"";display:inline-block;width:12px;height:12px;border:1.5px solid #90a4ae;border-radius:3px;background:#fff;margin-right:5px;vertical-align:-2px}
.fp-lg.dim::before{opacity:.38;border-style:dashed}.fp-lg.client::before{background:var(--accent-color);border-color:var(--accent-color);border-radius:50%}
.fp-paltabs{margin-bottom:6px;display:flex}.fp-paltabs button{flex:1;padding:6px 8px}
.fp-pal{display:flex;flex-direction:column;gap:2px;max-height:min(52vh,560px);overflow:auto;margin-top:6px}
.fp-pal-cat{font-size:12px;color:var(--secondary);margin:8px 0 2px;text-transform:uppercase;letter-spacing:.03em}
.fp-pal-row{display:flex;align-items:center;gap:8px;text-align:left;border:1px solid transparent;background:none;color:var(--text);font:inherit;font-size:13px;padding:4px 6px;border-radius:8px;cursor:pointer}
.fp-pal-row:hover{background:var(--hover)}.fp-pal-row.active{border-color:var(--primary-color);background:var(--selected)}
.fp-pal-row.out{opacity:.55}.fp-pal-name{flex:1;min-width:0}.fp-pal-stock{font-size:12px;color:var(--secondary);white-space:nowrap}
.fp-ico{flex:none;overflow:visible}
.fp-devhead{display:flex;align-items:center;gap:10px}
.fp-check{display:flex;align-items:center;gap:6px;font-size:13px;cursor:pointer}
.fp-newref{display:flex;align-items:flex-end;gap:8px}.fp-newref .field{flex:1}
.fp-side .small,.fp-side p.small{font-size:12px}
.fp-menu .danger{color:var(--error)}
.fp-key{cursor:pointer}.fp-key:hover{filter:brightness(1.06)}
.fp-tile.lit{fill:#fff6cf;stroke:#f9a825}
.fp-link{stroke:#f9a825;fill:none;pointer-events:none}
.fp-sub{margin-top:6px!important;font-size:14px!important}
.fp-keybox{border:1px solid var(--divider);border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:4px}
.fp-keyhead{display:flex;gap:6px;align-items:center}.fp-keyhead input{flex:1;min-width:0;background:var(--input-bg);color:var(--text);border:0;border-bottom:1px solid var(--input-line);border-radius:6px 6px 0 0;padding:6px 8px;font:inherit}
.fp-toggle{border:1px solid var(--divider);background:var(--card);color:var(--secondary);border-radius:16px;padding:4px 12px;font:inherit;font-size:13px;cursor:pointer;white-space:nowrap;align-self:flex-start}
.fp-toggle.on{background:#ffd54f;border-color:#f9a825;color:#3e2a00}
.zone-plan{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:6px 0 8px}
.plan-chip{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--divider);background:var(--card);color:var(--text);border-radius:14px;padding:2px 10px 2px 4px;font:inherit;font-size:12.5px;cursor:pointer}
.plan-chip:hover{background:var(--hover)}.plan-chip.c{border-color:var(--accent-color)}.plan-chip.n{opacity:.6;border-style:dashed}
/* Platform core: partner console, owner's access page */
a.button{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 18px;border-radius:20px;text-decoration:none;font-weight:500}
a.button.primary{background:var(--primary-color);color:#fff}
.core-link{margin:12px 0;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.core-link svg{width:168px;height:168px;flex:none}
.core-link code{word-break:break-all;font-size:13px;display:block;margin:4px 0 8px}
.core-link>div{flex:1;min-width:220px}
tr.clickable{cursor:pointer}tr.clickable:hover td{background:var(--selected)}
.core-pending{border:2px solid var(--primary-color)}
body[data-role="family"] [data-ptab="billing"],body[data-role="guest"] [data-ptab="billing"],body[data-role="guest"] [data-ptab="support"],
body[data-role="family"] #code-box,body[data-role="guest"] #code-box,body[data-role="family"] details.move,body[data-role="guest"] details.move{display:none!important}

/* Partner console: client search and equipment */
.search-field { display: block; margin: 8px 0 12px; max-width: 420px; }
.search-field input { width: 100%; }
.equipment-ha { margin-bottom: 12px; }
.equipment-ha > p { margin: 4px 0; }
.equipment-ha .chip { margin-left: 6px; }
.equipment-ha > button { margin: 4px 0 8px; }
#claims-box h4 { margin: 16px 0 4px; }
#equip-form { margin-top: 16px; }

/* Operator panel: partners */
.module-set { border: 1px solid var(--divider, rgba(127,127,127,.3)); border-radius: 12px; padding: 8px 12px; }
.module-set legend { font-size: 12px; color: var(--secondary); padding: 0 4px; }
.module-set .check { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0; }
#pd-clients td .text { padding: 2px 6px; min-height: 0; }
#pd-clients select { max-width: 220px; }
#client-partner { margin: 2px 0 0; font-size: 13px; }
#pd-q { min-width: 220px; }

/* Portal: switch between objects; the partner who looks after the object */
.object-bar { display: flex; gap: 8px; overflow-x: auto; padding: 8px 16px 0; scrollbar-width: none; }
.object-bar::-webkit-scrollbar { display: none; }
.object-chip { flex: none; border: 1px solid var(--divider, rgba(127,127,127,.35)); background: transparent; color: inherit; border-radius: 18px; padding: 8px 14px; font: inherit; font-size: 14px; cursor: pointer; white-space: nowrap; }
.object-chip.active { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }
.partner-card .facts { margin-top: 4px; }
.partner-only { display: none; }
.partner-host .partner-only { display: block; }
.partner-host .login-ways, .partner-host #onboard .portal-grid, .partner-host #onboard > .ha-card > .secondary, .partner-host #add-home { display: none; }