/* ============================================================
   Settings tab
   ============================================================ */
.settings-body{ display:flex; gap:22px; align-items:flex-start; }
.settings-nav{ width:230px; flex:none; position:sticky; top:0; display:flex; flex-direction:column; gap:14px; }
.sn-group-label{ font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); margin:0 0 6px 10px; }
.sn-item{ display:flex; align-items:center; gap:11px; width:100%; border:none; cursor:pointer; font:inherit;
  font-size:13px; font-weight:600; padding:10px 12px; border-radius:11px; color:var(--text-dim); background:none; text-align:left; }
.sn-item svg{ width:17px; height:17px; flex:none; }
.sn-item:hover{ color:var(--text); background:var(--surface-2); }
.sn-item.on{ color:var(--accent); background:color-mix(in srgb,var(--accent) 14%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 35%,transparent); }
.settings-content{ flex:1; min-width:0; max-width:760px; }

.set-panel{ margin-bottom:24px; }
.set-panel-head h2{ font-size:16px; font-weight:700; }
.set-panel-head p{ font-size:12.5px; color:var(--text-faint); margin:3px 0 12px; max-width:60ch; }
.set-card{ border-radius:16px; background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--hairline); padding:6px 16px; }
.set-row{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 16px; padding:14px 0; border-bottom:1px solid var(--hairline); }
.set-row:last-child{ border-bottom:none; }
.set-row-l{ flex:1 1 200px; min-width:0; }
.set-label{ font-size:13.5px; font-weight:600; overflow-wrap:break-word; }
.set-hint{ font-size:11.5px; color:var(--text-faint); margin-top:2px; overflow-wrap:break-word; }
/* Right-side value of any settings row never escapes the card: it right-aligns,
   refuses to be crushed by the label (flex-shrink:0 — otherwise flexbox collapses
   it to a one-character-per-line sliver), is capped at the card width, and drops
   to its own line on narrow screens. Applies system-wide to every settings tab. */
.set-row > .pill,
.set-row > .set-input,
.set-row > .set-select,
.set-row > .seg,
.set-row > .btn,
.set-row > .mini-btn,
.set-row > .set-range,
.set-row > .auto-switch{ margin-left:auto; max-width:100%; flex-shrink:0; }
/* The text value pills size to their content on one line (capped at the card
   width, where the text then wraps cleanly instead of overflowing). */
.set-row > .pill{ width:max-content; }
.set-select{ background:var(--surface-2); border:none; color:var(--text); font:inherit; font-size:13px; padding:9px 12px;
  border-radius:10px; box-shadow:inset 0 0 0 1px var(--hairline); min-width:min(180px,100%); max-width:100%; cursor:pointer; color-scheme:dark; }
.set-select.sm{ min-width:min(120px,100%); padding:7px 10px; }
html[data-scheme="light"] .set-select{ color-scheme:light; }
.set-input{ background:var(--surface-2); border:none; color:var(--text); font:inherit; font-size:13px; padding:9px 12px;
  border-radius:10px; box-shadow:inset 0 0 0 1px var(--hairline); min-width:min(200px,100%); max-width:100%; }
.set-input.mono{ font-family:'SFMono-Regular', ui-monospace, Menlo, monospace; font-size:12.5px; }
/* intensity slider */
.set-range{ display:flex; align-items:center; gap:12px; min-width:min(200px,100%); }
.set-range input[type=range]{ -webkit-appearance:none; appearance:none; width:160px; height:4px; border-radius:4px;
  background:linear-gradient(90deg, var(--accent) var(--fill,60%), var(--surface-2) var(--fill,60%));
  background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--hairline); outline:none; cursor:pointer; }
.set-range input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:16px; height:16px;
  border-radius:50%; background:var(--accent); box-shadow:0 0 10px -1px var(--accent), 0 1px 2px rgba(0,0,0,0.4); cursor:pointer; }
.set-range input[type=range]::-moz-range-thumb{ width:16px; height:16px; border:none; border-radius:50%;
  background:var(--accent); box-shadow:0 0 10px -1px var(--accent); cursor:pointer; }
.set-range-val{ font-size:12.5px; font-weight:600; color:var(--text-dim); min-width:34px; text-align:right; }
.set-row-off{ opacity:0.45; }
.set-row-off .set-range input[type=range]{ cursor:not-allowed; }
.set-foot{ display:flex; align-items:center; flex-wrap:wrap; gap:4px 9px; font-size:12px; color:var(--text-dim); padding:14px 0 4px; }
.status-led{ width:8px; height:8px; border-radius:50%; flex:none; }
.status-led.ok{ background:var(--battery); box-shadow:0 0 8px var(--battery); }
.pill{ font-size:12px; font-weight:600; padding:6px 12px; border-radius:9px; background:var(--surface-2); color:var(--text-dim);
  max-width:100%; overflow-wrap:break-word; text-align:right; }
.mini-btn{ border:none; cursor:pointer; font:inherit; font-size:12px; font-weight:600; padding:7px 13px; border-radius:9px;
  color:var(--text-dim); background:var(--surface-2); }
.mini-btn:hover{ color:var(--text); }

/* theme cards */
.theme-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; padding:12px 0; }
.theme-card{ display:flex; gap:13px; align-items:flex-start; padding:12px; border-radius:14px; cursor:pointer; border:none;
  font:inherit; text-align:left; color:var(--text); background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--hairline); position:relative; }
.theme-card.on{ box-shadow:inset 0 0 0 1.5px var(--accent); }
.theme-prev{ width:64px; height:54px; border-radius:10px; flex:none; position:relative; overflow:hidden; box-shadow:inset 0 0 0 1px rgba(255,255,255,0.1); }
.tp-dot{ position:absolute; width:11px; height:11px; border-radius:50%; top:9px; }
.tp-dot:nth-child(1){ left:9px; } .tp-dot:nth-child(2){ left:24px; opacity:.8; }
.tp-bar{ position:absolute; left:9px; height:5px; border-radius:3px; width:38px; bottom:16px; opacity:.85; }
.tp-bar.short{ width:22px; bottom:8px; opacity:.6; }
.theme-meta{ flex:1; min-width:0; }
.theme-name{ font-size:13.5px; font-weight:700; display:flex; align-items:center; gap:8px; }
.theme-scheme{ font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:2px 6px; border-radius:5px;
  color:var(--text-faint); background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--hairline); }
.theme-desc{ font-size:11.5px; color:var(--text-faint); margin-top:3px; line-height:1.4; }
.theme-check{ position:absolute; top:10px; right:10px; width:20px; height:20px; border-radius:50%; display:grid; place-items:center;
  color:#0a0a0a; background:var(--accent); }
.theme-check svg{ width:13px; height:13px; }

/* users / integrations / tokens lists */
.user-list{ display:flex; flex-direction:column; }
.user-row{ display:flex; align-items:center; gap:13px; padding:11px 0; border-bottom:1px solid var(--hairline); }
.user-row:last-child{ border-bottom:none; }
.user-av{ width:38px; height:38px; border-radius:11px; flex:none; display:grid; place-items:center; font-size:13px; font-weight:800;
  color:#0a0a0a; }
.user-av svg{ width:18px; height:18px; color:var(--text-dim); }
.user-meta{ flex:1; min-width:0; }
.user-meta b{ font-size:13.5px; font-weight:600; display:block; }
.user-meta span{ font-size:11.5px; color:var(--text-faint); }

.int-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; padding:10px 0; }
.int-card{ display:flex; align-items:center; gap:12px; padding:13px; border-radius:13px; background:var(--surface-2);
  box-shadow:inset 0 0 0 1px var(--hairline); }
.int-ic{ width:38px; height:38px; border-radius:11px; flex:none; display:grid; place-items:center; color:var(--text-dim); background:var(--surface-2); }
.int-card.on .int-ic{ color:var(--accent); background:color-mix(in srgb,var(--accent) 14%,transparent); }
.int-ic svg{ width:19px; height:19px; }
.int-meta{ flex:1; min-width:0; }
.int-meta b{ font-size:13px; font-weight:600; display:block; }
.int-meta span{ font-size:11px; color:var(--text-faint); }

.token-reveal{ display:flex; align-items:center; gap:14px; padding:14px; border-radius:13px; margin-bottom:12px;
  background:color-mix(in srgb,var(--battery) 12%,transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--battery) 35%,transparent); }
.token-reveal b{ font-size:12.5px; display:block; margin-bottom:6px; }
.token-reveal code{ font-family:ui-monospace, monospace; font-size:12px; color:var(--battery); word-break:break-all; }

/* logs */
.log-filter{ display:flex; gap:6px; padding:10px 0; }
.log-filter button{ border:none; cursor:pointer; font:inherit; font-size:12px; font-weight:600; padding:6px 13px; border-radius:8px;
  color:var(--text-dim); background:var(--surface-2); text-transform:capitalize; }
.log-filter button.on{ color:var(--accent); background:color-mix(in srgb,var(--accent) 14%,transparent); }
.log-view{ font-family:ui-monospace, monospace; font-size:12px; display:flex; flex-direction:column; gap:2px; padding:6px 0; }
.log-line{ display:flex; gap:12px; padding:6px 8px; border-radius:7px; }
.log-line:hover{ background:var(--surface-2); }
.log-t{ color:var(--text-faint); flex:none; }
.log-lvl{ flex:none; width:42px; text-transform:uppercase; font-size:10px; font-weight:800; padding-top:1px; }
.log-lvl.info{ color:var(--grid-c); } .log-lvl.warn{ color:var(--solar); } .log-lvl.error{ color:#ff7a8a; }
.log-msg{ color:var(--text-dim); }

/* terminal */
.term{ border-radius:12px; overflow:hidden; background:#06070b; box-shadow:inset 0 0 0 1px var(--hairline);
  font-family:ui-monospace, monospace; font-size:12.5px; }
.term-body{ padding:14px; max-height:300px; overflow-y:auto; display:flex; flex-direction:column; gap:3px; }
.term-line{ color:var(--text-dim); white-space:pre-wrap; word-break:break-word; }
.term-line.in{ color:var(--text); }
.term-prompt{ color:var(--battery); margin-right:8px; }
.term-input{ display:flex; align-items:center; gap:0; padding:11px 14px; border-top:1px solid var(--hairline); }
.term-input input{ flex:1; background:none; border:none; outline:none; color:var(--text); font:inherit; }

@media (max-width:900px){
  /* stacked: stretch children to full width, else flex-start sizes the content
     panel to its max-content (longest unwrapped line) and it overflows right. */
  .settings-body{ flex-direction:column; align-items:stretch; }
  .settings-content{ max-width:100%; min-width:0; }
  .settings-nav{ width:100%; position:static; flex-direction:row; flex-wrap:wrap; gap:6px; }
  .sn-group{ display:contents; }
  .sn-group-label{ display:none; }
  .theme-grid,.int-grid{ grid-template-columns:1fr; }
}

/* Inverter / energy integration */
.make-grid{ display:flex; gap:12px; flex-wrap:wrap; }
.make-card{ flex:1 1 200px; text-align:left; border:none; cursor:pointer; font:inherit; color:var(--text);
  background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--hairline); border-radius:14px; padding:16px; }
.make-card:hover:not(.disabled){ box-shadow:inset 0 0 0 1.5px var(--accent); }
.make-card.disabled{ opacity:.5; cursor:default; }
.make-name{ font-weight:700; display:flex; align-items:center; gap:8px; }
.make-name .soon{ font-size:11px; font-weight:600; color:var(--text-dim); background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--hairline); border-radius:20px; padding:1px 8px; }
.make-tag{ font-size:12.5px; color:var(--accent); margin-top:3px; }
.make-detail{ font-size:12.5px; color:var(--text-dim); margin-top:6px; line-height:1.45; }
.vic-preview{ display:flex; gap:10px; margin-top:14px; }
.vic-cell{ flex:1; background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--hairline);
  border-radius:12px; padding:12px; text-align:center; }
.vic-cell span{ display:block; font-size:11.5px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.04em; }
.vic-cell b{ display:block; font-size:16px; margin-top:5px; }