:root {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color-scheme: dark light;
    }
    body {
      margin: 0;
      padding: 0;
      background: #0f172a;
      color: #e5e7eb;
    }
    .app {
      max-width: 1100px;
      margin: 0 auto;
      padding: 1.5rem;
    }
    h1, h2 {
      font-weight: 600;
      margin: 0 0 0.75rem 0;
    }
    h1 {
      font-size: 1.6rem;
    }
    h2 {
      font-size: 1.1rem;
      margin-top: 1.5rem;
    }
    .card {
      background: rgba(15,23,42,0.9);
      border-radius: 1rem;
      padding: 1.25rem;
      box-shadow: 0 18px 40px rgba(0,0,0,0.35);
      border: 1px solid rgba(148,163,184,0.35);
    }
    .grid {
      display: grid;
      gap: 1rem;
    }
    @media (min-width: 900px) {
      .grid-cols-2 {
        grid-template-columns: 1.1fr 1.4fr;
      }
    }
    label {
      display: block;
      font-size: 0.85rem;
      margin-bottom: 0.25rem;
      color: #cbd5f5;
    }
    input[type="text"],
    input[type="password"],
    select {
      width: 100%;
      box-sizing: border-box;
      border-radius: 0.7rem;
      border: 1px solid rgba(148,163,184,0.7);
      background: rgba(15,23,42,0.8);
      padding: 0.55rem 0.7rem;
      font-size: 0.95rem;
      color: #e5e7eb;
      outline: none;
    }
    input[type="text"]:focus,
    input[type="password"]:focus,
    select:focus {
      border-color: #38bdf8;
      box-shadow: 0 0 0 1px rgba(56,189,248,0.5);
    }
    .row {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      align-items: center;
      margin-top: 0.75rem;
    }
    .checkbox-row {
      display: flex;
      align-items: center;
      gap: 0.35rem;
      font-size: 0.85rem;
      color: #cbd5f5;
      margin-top: 0.4rem;
    }
    .btn {
      border: none;
      border-radius: 999px;
      padding: 0.5rem 1.1rem;
      font-size: 0.9rem;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      background: linear-gradient(135deg, #22c55e, #16a34a);
      color: white;
      box-shadow: 0 10px 25px rgba(22,163,74,0.5);
      transition: transform 0.08s ease, box-shadow 0.08s ease, opacity 0.12s ease;
    }
    .btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 14px 30px rgba(22,163,74,0.6);
    }
    .btn:active {
      transform: translateY(0);
      box-shadow: 0 8px 18px rgba(22,163,74,0.5);
      opacity: 0.85;
    }
    .btn-secondary {
      background: rgba(30,64,175,0.9);
      box-shadow: 0 10px 25px rgba(30,64,175,0.5);
    }
    .btn-danger {
      background: rgba(185,28,28,0.95);
      box-shadow: 0 10px 25px rgba(127,29,29,0.7);
    }
    .btn:disabled {
      opacity: 0.4;
      cursor: default;
      transform: none;
      box-shadow: none;
    }
    pre {
      margin: 0.25rem 0 0;
      padding: 0.75rem;
      background: rgba(15,23,42,0.85);
      border-radius: 0.75rem;
      border: 1px solid rgba(51,65,85,0.9);
      font-size: 0.8rem;
      max-height: 360px;
      overflow: auto;
      white-space: pre-wrap;
      word-wrap: break-word;
    }
    .badge {
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
      padding: 0.15rem 0.7rem;
      border-radius: 999px;
      font-size: 0.7rem;
      border: 1px solid rgba(148,163,184,0.7);
      color: #cbd5f5;
      background: rgba(15,23,42,0.8);
    }
    .status-dot {
      width: 0.4rem;
      height: 0.4rem;
      border-radius: 999px;
      background: #f97316;
      box-shadow: 0 0 0 2px rgba(148,163,184,0.4);
    }
    .status-dot.online {
      background: #22c55e;
      box-shadow: 0 0 0 2px rgba(34,197,94,0.6);
    }
    small {
      color: #9ca3af;
      font-size: 0.75rem;
      display: block;
      margin-top: 0.25rem;
    }
    .muted {
      color: #9ca3af;
      font-size: 0.8rem;
    }
    a {
      color: #38bdf8;
    }
    .nodes-header-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.5rem;
      flex-wrap: wrap;
    }
    .nodes-toolbar {
      display: flex;
      gap: 0.5rem;
      flex-wrap: wrap;
      align-items: center;
    }
    .nodes-list {
      margin-top: 0.6rem;
      max-height: 380px;
      overflow: auto;
    }
    details.node-card {
      border-radius: 0.75rem;
      border: 1px solid rgba(55,65,81,0.9);
      padding: 0.45rem 0.75rem 0.55rem;
      margin-bottom: 0.45rem;
      background: rgba(15,23,42,0.9);
    }
    .node-summary {
      cursor: pointer;
      list-style: none;
    }
    details.node-card > summary {
      list-style: none;
      outline: none;
    }
    details.node-card[open] > summary .node-chevron {
      transform: rotate(90deg);
    }
    .node-header {
      display: flex;
      align-items: center;
      gap: 0.45rem;
      justify-content: space-between;
    }
    .node-name {
      font-size: 0.92rem;
      font-weight: 600;
    }
    .node-meta {
      font-size: 0.75rem;
      color: #9ca3af;
      display: flex;
      flex-wrap: wrap;
      gap: 0.3rem;
      margin-top: 0.25rem;
    }
    
    .chip {
      padding: 0.1rem 0.55rem;
      border-radius: 999px;
      border: 1px solid rgba(75,85,99,0.9);
    }
    .chip-on {
      background: rgba(34,197,94,0.15);
      border-color: rgba(34,197,94,0.8);
      color: #bbf7d0;
    }
    .chip-off {
      background: rgba(248,113,113,0.18);
      border-color: rgba(248,113,113,0.85);
      color: #fecaca;
    }


    
    .burger-btn {
      display: inline-flex;
      border-radius: 999px;
      border: 1px solid rgba(148,163,184,0.7);
      background: rgba(15,23,42,0.9);
      padding: 0.25rem 0.55rem;
      font-size: 1rem;
      cursor: pointer;
      color: #e5e7eb;
      align-items: center;
      justify-content: center;
    }
    .burger-dropdown {
      position: fixed;
      right: 1rem;
      top: calc(var(--topbar-height, 56px) + 0.5rem); /* unterhalb des Icons, damit es nicht verdeckt wird */
      background: rgba(15,23,42,0.97);
      border-radius: 0.75rem;
      border: 1px solid rgba(148,163,184,0.4);
      padding: 0.55rem 0.65rem;
      box-shadow: 0 18px 40px rgba(0,0,0,0.5);
      max-height: calc(100vh - var(--topbar-height, 56px) - 1.5rem);
      overflow: auto;
      display: none;
      flex-direction: column;
      gap: 0.4rem;
      min-width: 170px;
      z-index: 10;
    }
    .burger-dropdown.show {
      display: flex;
    }
    .burger-dash-controls {
      display: flex;
      flex-direction: column;
      gap: 0.35rem;
      margin-top: 0.45rem;
      padding-top: 0.45rem;
      border-top: 1px solid rgba(148,163,184,0.35);
    }
    .btn-small {
      padding: 0.2rem 0.6rem;
      font-size: 0.8rem;
    }

    .dash-io-hint{
      font-size:0.72rem;
      opacity:0.78;
      margin-top:0.15rem;
      line-height:1.2;
    }

    .widget-size-label {
      display: flex;
      flex-direction: column;
      gap: 0.15rem;
      font-size: 0.78rem;
    }
    .widget-size-select {
      background: rgba(15,23,42,0.9);
      border-radius: 999px;
      border: 1px solid rgba(148,163,184,0.7);
      padding: 0.15rem 0.5rem;
      font-size: 0.78rem;
      color: #e5e7eb;
    }

    /* Dashboard Wizard: Value-Mapping UI */
    .map-attr-block {
      margin-top: 0.6rem;
      padding-top: 0.6rem;
      border-top: 1px solid rgba(148,163,184,0.28);
    }
    .map-attr-title {
      font-size: 0.85rem;
      font-weight: 700;
      color: #e5e7eb;
      margin-bottom: 0.35rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.5rem;
    }
    .map-attr-current {
      font-size: 0.78rem;
      opacity: 0.85;
      font-weight: 500;
      white-space: nowrap;
    }
    .map-rows {
      display: flex;
      flex-direction: column;
      gap: 0.35rem;
    }
    .map-row {
      display: grid;
      grid-template-columns: 80px 1fr 1fr 84px 42px;
      gap: 0.35rem;
      align-items: center;
    }
    .map-row input[type="number"],
    .map-row input[type="text"]{
      width: 100%;
      padding: 0.25rem 0.45rem;
      border-radius: 0.5rem;
      border: 1px solid rgba(148,163,184,0.5);
      background: rgba(15,23,42,0.6);
      color: #e5e7eb;
      font-size: 0.85rem;
      outline: none;
    }
    .map-row input[type="color"]{
      width: 100%;
      height: 34px;
      padding: 0;
      border: none;
      background: transparent;
    }
    .map-row .map-add,
    .map-row .map-del {
      width: 42px;
      height: 34px;
      border-radius: 0.6rem;
      border: 1px solid rgba(148,163,184,0.55);
      background: rgba(59,130,246,0.18);
      color: #e5e7eb;
      cursor: pointer;
      font-weight: 800;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .map-row .map-del {
      background: rgba(239,68,68,0.16);
    }
    @media (max-width: 520px){
      .map-row{
        grid-template-columns: 70px 1fr 1fr 70px 42px;
      }
    }


    @media (max-width: 600px) {
      .card {
        padding: 0.75rem 1rem;
      }
      .card header .muted {
        display: none;
      }
      .card header h1 {
        font-size: 1.35rem;
        margin-bottom: 0.25rem;
      }
      .dashboard-grid {
        justify-content: center;
      }
    }
    .top-nav {
      display: flex;
      gap: 0.35rem;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
    .nav-btn {
      border-radius: 999px;
      border: 1px solid rgba(148,163,184,0.7);
      background: rgba(15,23,42,0.8);
      padding: 0.25rem 0.7rem;
      font-size: 0.8rem;
      cursor: pointer;
      color: #e5e7eb;
    }
    .nav-btn.nav-active {
      background: rgba(37,99,235,0.9);
      border-color: rgba(59,130,246,1);
    }
    
    
    
    .dashboard-grid {
      margin-top: 0.75rem;
      display: flex;
      flex-wrap: wrap;
      gap: 0.8rem;
      justify-content: flex-start;
    }
    .dash-widget {
      position: relative;
      border-radius: 1rem;
      border: 1px solid rgba(148,163,184,0.8);
      padding: 0.8rem;
      background: rgba(31,41,55,0.98);
      box-shadow: 0 18px 40px rgba(0,0,0,0.45);
      font-size: 0.9rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      width: var(--dash-widget-width, 200px);
      height: var(--dash-widget-height, 200px);
      box-sizing: border-box;
    }
    .dash-widget-header {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.35rem;
      width: 100%;
      padding-top: 0.4rem;
      padding-bottom: 0.2rem;
    }
    .dash-widget-icon {
      font-size: 2.0rem;
      width: 3.6rem;
      height: 3.6rem;
      border-radius: 999px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(15,23,42,0.8);
      color: #e5e7eb;
      transition: background 0.2s ease, transform 0.15s ease;
    }
    .dash-widget-icon.dash-icon-on {
      background: rgba(34,197,94,0.18);
    }
    .dash-widget-icon.dash-icon-off {
      background: rgba(239,68,68,0.18);
    }
    .dash-widget-title {
      font-weight: 600;
      font-size: 1rem;
      text-align: center;
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .dash-widget-delete {
      position: absolute;
      top: 0.35rem;
      right: 0.35rem;
      border: none;
      background: rgba(185,28,28,0.9);
      color: white;
      border-radius: 999px;
      width: 1.3rem;
      height: 1.3rem;
      font-size: 0.75rem;
      cursor: pointer;
      display: none;
    }
    .dash-edit-mode .dash-widget-delete {
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .dash-widget-body {
      margin-top: 0.6rem;
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      justify-content: center;
    }
    .dash-attr-row {
      margin-bottom: 0.15rem;
      width: 100%;
      text-align: center;
    }
    .dash-attr-label {
      display: block;
      font-size: 0.78rem;
      opacity: 0.85;
      margin-bottom: 0.1rem;
    }
    .dash-attr-row.onoff-toggle-row {
      width: 48%;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .dash-attr-value {
      color: #e5e7eb;
      font-size: 0.85rem;
    }

    .dash-attr-row-inline {
      display: inline-block;
      width: 50%;
      vertical-align: top;
    }
    .dash-toggle {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.35rem;
    }
    .dash-toggle-text {
      font-size: 0.75rem;
      opacity: 0.85;
    }
    .toggle-switch {
      position: relative;
      width: 3.0rem;
      height: 1.6rem;
      border-radius: 999px;
      border: none;
      padding: 0.15rem;
      background: #b91c1c; /* AUS = rot */
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: flex-start;
      transition: background 0.22s ease, justify-content 0.22s ease;
    }
    .toggle-switch .toggle-thumb {
      width: 1.3rem;
      height: 1.3rem;
      border-radius: 999px;
      background: #ffffff; /* weiße Rundung */
      box-shadow: 0 2px 4px rgba(0,0,0,0.35);
    }
    .toggle-switch.toggle-on {
      background: #16a34a; /* AN = grün */
      justify-content: flex-end; /* Rundung nach rechts */
    }
    .toggle-switch.toggle-off {
      background: #b91c1c; /* AUS = rot */
      justify-content: flex-start; /* Rundung nach links */
    }



    .toggle-wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.35rem;
      margin-top: 0.1rem;
    }
    .toggle-text {
      font-size: 0.8rem;
      opacity: 0.85;
    }
    .toggle-switch {
      position: relative;
      width: 44px;
      height: 24px;
      display: inline-block;
    }
    .toggle-switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }
    .toggle-slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(148,163,184,0.6);
      transition: 0.2s;
      border-radius: 999px;
    }
    .toggle-slider::before {
      position: absolute;
      content: "";
      height: 18px;
      width: 18px;
      left: 3px;
      top: 3px;
      background-color: white;
      border-radius: 999px;
      transition: 0.2s;
      box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    }
    .toggle-switch input:checked + .toggle-slider {
      background-color: #8b5cf6;
    }
    .toggle-switch input:checked + .toggle-slider::before {
      transform: translateX(18px);
    }

    body.widget-size-small {
      --dash-widget-width: 160px;
      --dash-widget-height: 160px;
    }
    body.widget-size-medium {
      --dash-widget-width: 220px;
      --dash-widget-height: 210px;
    }
    body.widget-size-large {
      --dash-widget-width: 270px;
      --dash-widget-height: 230px;
    }

    @media (max-width: 600px) {
      .dashboard-grid {
        justify-content: center;
        gap: 0.6rem;
      }
      .dash-widget {
        width: 150px !important;
        height: 150px !important;
        padding: 0.5rem !important;
      }
      .dash-widget-icon {
        font-size: 1.6rem !important;
        width: 2.8rem !important;
        height: 2.8rem !important;
      }
      .dash-widget-title {
        font-size: 0.85rem !important;
        margin-top: 0.2rem;
      }
      .dash-attr-value {
        font-size: 0.75rem !important;
      }
    }
row {
      display: flex;
      flex-wrap: wrap;
      gap: 0.4rem;
      margin-bottom: 0.25rem;
    }
    .attr-name {
      font-weight: 500;
    }
    .attr-pill {
      padding: 0.05rem 0.45rem;
      border-radius: 999px;
      border: 1px solid rgba(75,85,99,0.9);
    }
    .attr-meta {
      color: #9ca3af;
    }
    .log-toolbar {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      align-items: center;
      margin-bottom: 0.35rem;
    }
  
    /* Mobile-Optimierungen */
    @media (max-width: 700px) {
      .app {
        padding: 0.75rem;
      }
      h1 {
        font-size: 1.3rem;
      }
      h2 {
        font-size: 1rem;
      }
      .card {
        padding: 0.9rem;
        border-radius: 0.75rem;
      }
      .nodes-header-row {
        flex-direction: column;
        align-items: flex-start;
      }
      .nodes-toolbar {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
      }
      .nodes-toolbar > * {
        width: 100%;
      }
      .nodes-toolbar label {
        font-size: 0.75rem;
      }
      #nodeSearchInput {
        max-width: none !important;
      }
      .row {
        gap: 0.5rem;
      }
      .attr-row {
        flex-direction: column;
        align-items: flex-start;
      }
      .attr-meta {
        width: 100%;
      }
      .attr-meta input[type="number"],
      .attr-meta input[type="range"],
      .attr-meta button {
        width: 100%;
      }
      .nodes-list {
        max-height: none;
      }
      .node-meta {
        font-size: 0.7rem;
      }
      .chip {
        padding: 0.05rem 0.45rem;
      }
    }

  
    /* Dashboard Wizard: Attribute Prefix + Value-Mapping */
    .attr-prefix-row{
      display:flex;
      gap:0.4rem;
      align-items:center;
      margin:0.25rem 0 0.35rem 0;
      flex-wrap:wrap;
    }
    .attr-prefix-row input[type="text"]{
      flex:1;
      min-width:180px;
      padding:0.25rem 0.45rem;
      border-radius:0.5rem;
      border:1px solid rgba(148,163,184,0.5);
      background:rgba(15,23,42,0.6);
      color:#e5e7eb;
      font-size:0.85rem;
    }
    .map-rows{ display:flex; flex-direction:column; gap:0.35rem; }
    .map-row{
      display:grid;
      grid-template-columns:64px 80px 1fr 1fr 84px 42px;
      gap:0.35rem;
      align-items:center;
    }
    .map-row input[type="number"], .map-row input[type="text"]{
      width:100%;
      padding:0.25rem 0.45rem;
      border-radius:0.5rem;
      border:1px solid rgba(148,163,184,0.5);
      background:rgba(15,23,42,0.6);
      color:#e5e7eb;
      font-size:0.85rem;
      outline:none;
    }
    .map-row input[type="color"]{ width:100%; height:34px; padding:0; border:none; background:transparent; }
    .map-row .map-add, .map-row .map-del{
      width:42px; height:34px;
      border-radius:0.6rem;
      border:1px solid rgba(148,163,184,0.55);
      color:#e5e7eb;
      cursor:pointer;
      font-weight:800;
      display:inline-flex;
      align-items:center;
      justify-content:center;
    }
    .map-row .map-add{ background:rgba(59,130,246,0.18); }
    .map-row .map-del{ background:rgba(239,68,68,0.16); }
    @media (max-width:520px){
      .map-row{ grid-template-columns:56px 70px 1fr 1fr 70px 42px; }
    }


    .conn-dot{
      display:inline-block;
      width:10px; height:10px;
      border-radius:50%;
      margin-left:10px;
      background:rgba(239,68,68,0.95);
      box-shadow:0 0 10px rgba(239,68,68,0.35);
      vertical-align:middle;
    }
    .conn-dot.connected{
      background:rgba(34,197,94,0.95);
      box-shadow:0 0 12px rgba(34,197,94,0.35);
    }


    .map-row select{
      width:100%;
      padding:0.25rem 0.35rem;
      border-radius:0.5rem;
      border:1px solid rgba(148,163,184,0.5);
      background:rgba(15,23,42,0.6);
      color:#e5e7eb;
      font-size:0.85rem;
      outline:none;
    }


    /* Fixierter Header mit Titel + Status-Dot */
    header.topbar{
  --topbar-height: 56px;
      position: sticky;
      top: 0;
      z-index: 999;
      background: rgba(3, 7, 18, 0.92);
      backdrop-filter: blur(10px);
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
      border-bottom: 1px solid rgba(148,163,184,0.18);
    }
    main{ padding-top: calc(var(--topbar-height, 56px) + 0.75rem); }
    .conn-dot{ cursor:pointer; }



    /* Modal (Node Details) */
    .modal-overlay{
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.55);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 1rem;
      z-index: 9999;
    }
    .modal-overlay.show{ display:flex; }
    .modal-card{
      width: min(720px, 100%);
      max-height: calc(100vh - 2rem);
      overflow: hidden;
      border: 1px solid rgba(148,163,184,0.25);
      border-radius: 1rem;
      background: rgba(15,23,42,0.92);
      backdrop-filter: blur(10px);
      box-shadow: 0 18px 60px rgba(0,0,0,0.55);
    }
    .modal-header{
      display:flex;
      align-items:flex-start;
      justify-content: space-between;
      gap: 0.75rem;
      padding: 0.9rem 1rem;
      border-bottom: 1px solid rgba(148,163,184,0.18);
    }
    .modal-title{ font-weight: 800; font-size: 1.05rem; }
    .modal-subtitle{ opacity: 0.75; font-size: 0.85rem; margin-top: 0.1rem; }
    .modal-body{
      padding: 0.75rem 1rem 1rem;
      overflow: auto;
      max-height: calc(100vh - 7rem);
    }
    .details-grid{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.75rem;
      align-items:center;
    }
    .details-head{
      font-size: 0.8rem;
      opacity: 0.75;
      padding: 0.25rem 0.25rem 0.5rem;
    }
    .details-row{
      padding: 0.6rem 0.25rem;
      border-top: 1px solid rgba(148,163,184,0.12);
    }
    .details-row .attr-name{
      font-weight: 700;
      line-height: 1.2;
    }
    .details-row .attr-meta{
      opacity: 0.7;
      font-size: 0.78rem;
      margin-top: 0.1rem;
    }
    .details-row .attr-value{
      display:flex;
      justify-content: flex-end;
      align-items: center;
      gap: 0.5rem;
      text-align: right;
      flex-wrap: wrap;
    }
    .details-pill{
      display:inline-flex;
      align-items:center;
      gap: 0.4rem;
      padding: 0.35rem 0.55rem;
      border-radius: 999px;
      border: 1px solid rgba(148,163,184,0.25);
      background: rgba(2,6,23,0.35);
      font-size: 0.9rem;
      white-space: nowrap;
    }
    .details-edit{
      display:flex;
      justify-content:flex-end;
      gap: 0.5rem;
      flex-wrap: wrap;
      margin-top: 0.45rem;
    }
    .details-edit input[type="number"]{
      width: 9rem;
      max-width: 100%;
    }

    .map-wrap{ display:flex; flex-direction:column; gap:0.5rem; }

    .material-symbols-rounded{
      font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48;
      line-height: 1;
      user-select:none;
    }
    .icon-grid{
      display:grid;
      grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
      gap: 0.5rem;
    }
    .icon-tile{
      display:flex;
      align-items:center;
      justify-content:center;
      aspect-ratio: 1 / 1;
      border-radius: 0.85rem;
      border: 1px solid rgba(148,163,184,0.25);
      background: rgba(2,6,23,0.25);
      cursor:pointer;
      transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
      position:relative;
    }
    .icon-tile:hover{ transform: translateY(-1px); border-color: rgba(148,163,184,0.45); background: rgba(2,6,23,0.35); }
    .icon-tile:active{ transform: translateY(0px) scale(0.99); }
    .icon-tile span{ font-size: 28px; }
    .icon-tile .icon-name{
      position:absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: -0.15rem;
      font-size: 10px;
      opacity: 0;
      pointer-events:none;
      white-space:nowrap;
      background: rgba(2,6,23,0.75);
      padding: 0.15rem 0.35rem;
      border-radius: 999px;
      border: 1px solid rgba(148,163,184,0.25);
      max-width: 95%;
      overflow:hidden;
      text-overflow: ellipsis;
    }
    .icon-tile:hover .icon-name{ opacity: 0.95; }
    input.icon-input{ cursor:pointer; }

    .node-checklist .node-item{ display:flex; align-items:center; gap:0.5rem; padding:0.35rem 0.25rem; border-bottom:1px solid rgba(148,163,184,0.10); }
    .node-checklist .node-item:last-child{ border-bottom:none; }
    .node-checklist label{ display:flex; align-items:center; gap:0.5rem; width:100%; cursor:pointer; }
    .node-checklist .node-name{ flex:1; }
    .node-checklist input[type="checkbox"]{ width:18px; height:18px; }

#groupDetailsModal{ z-index: 9000; }
#nodeDetailsModal{ z-index: 9500; }
#iconPickerModal{ z-index: 9600; }

    .node-checklist .node-item{ display:flex; align-items:center; gap:0.5rem; padding:0.35rem 0.25rem; border-bottom:1px solid rgba(148,163,184,0.10); }
    .node-checklist .node-item:last-child{ border-bottom:none; }
    .node-checklist label{ display:flex; align-items:center; gap:0.5rem; width:100%; cursor:pointer; }
    .node-checklist .node-name{ flex:1; }
    .node-checklist input[type="checkbox"]{ width:18px; height:18px; }

/* Phase 1: Layout + Header (extracted from index.html) */
:root{
  --bg: #071022;
  --panel: rgba(255,255,255,0.06);
  --panel-border: rgba(255,255,255,0.12);
  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.65);
  --accent: #2d77ff;
  --green: #22c55e;
  --red: #ef4444;
  --shadow: 0 10px 30px rgba(0,0,0,0.35);
}

/* Reset / base */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--text);
  background: radial-gradient(1200px 600px at 20% 0%, rgba(45,119,255,0.22), transparent 55%),
              radial-gradient(900px 500px at 80% 10%, rgba(34,197,94,0.10), transparent 55%),
              linear-gradient(180deg, #050a14, var(--bg));
}

/* Sticky top bar (Title + dot + burger) */
#topBar, .top-bar, header.app-header, header{
  position: sticky;
  top: 0;
  z-index: 1000;
}
#topBar, .top-bar, .header-card{
  margin: 16px;
  padding: 14px 14px;
  background: rgba(7,16,34,0.70);
  border: 1px solid var(--panel-border);
  border-radius: 18px;
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
}

/* If there is an inner row for title area */
.header-row, .top-row, .header-top, .header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}
h1{
  margin:0;
  font-size: 28px;
  letter-spacing: .2px;
}

/* Connection dot */
#connectionDot, .connection-dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display:inline-block;
  background: var(--red);
  box-shadow: 0 0 0 6px rgba(239,68,68,0.10);
}
#connectionDot.connected, .connection-dot.connected{
  background: var(--green);
  box-shadow: 0 0 0 6px rgba(34,197,94,0.12);
}

/* Burger button */
#burgerBtn, .burger-btn{
  width: 44px;
  height: 44px;
  border-radius: 22px;
  border: 1px solid var(--panel-border);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
#burgerBtn:active, .burger-btn:active{ transform: scale(0.98); }

/* Main spacing so content starts tight under header */
#app, main, .app, .content{
  padding: 0 16px 24px 16px;
}

/* Dashboard area layout (grid) */
#dashboardGrid, #dashboard, .dashboard-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 14px;
  align-items: start;
}

/* Mobile: more room */
@media (max-width: 480px){
  #topBar, .top-bar, .header-card{ margin: 12px; padding: 12px; }
  h1{ font-size: 24px; }
  #app, main, .app, .content{ padding: 0 12px 22px 12px; }
  #dashboardGrid, #dashboard, .dashboard-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Phase 2: Widgets + Overlays + Burger menu + Forms */

.btn{
  border: 1px solid var(--panel-border);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
}
.btn-secondary{ background: rgba(255,255,255,0.04); }
.btn-danger{ border-color: rgba(239,68,68,0.45); background: rgba(239,68,68,0.12); }
.btn:active{ transform: scale(0.99); }

.input, input[type="text"], input[type="number"], input[type="password"], select{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,0.25);
  background: rgba(0,0,0,0.25);
  color: var(--text);
  outline: none;
}
input::placeholder{ color: rgba(255,255,255,0.45); }
label{ color: var(--muted); font-size: 0.92rem; }

.muted{ color: var(--muted); }

/* Dashboard widgets */
.dash-widget{
  position: relative;
  border: 1px solid rgba(148,163,184,0.18);
  background: rgba(255,255,255,0.06);
  border-radius: 18px;
  box-shadow: 0 14px 30px rgba(0,0,0,0.25);
  overflow: hidden;
}
.dash-widget-inner{
  padding: 14px 14px 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
}
.dash-widget.small{ width: 170px; height: 170px; }
.dash-widget.medium{ width: 200px; height: 200px; }
.dash-widget.large{ width: 240px; height: 240px; }

@media (max-width: 480px){
  .dash-widget.small{ width: 150px; height: 150px; }
  .dash-widget.medium{ width: 180px; height: 180px; }
  .dash-widget.large{ width: 220px; height: 220px; }
}

.dash-widget-title{
  font-size: 14px;
  font-weight: 650;
  text-align: center;
  line-height: 1.1;
  margin-top: -2px;
}
.dash-widget-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 34px;
  line-height: 1;
  user-select: none;
}
.dash-widget-icon .material-symbols-rounded{
  font-size: 38px;
  line-height: 1;
}
.dash-widget-value{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 6px;
  font-size: 15px;
}
.dash-widget-attrs{
  display:flex;
  flex-direction:column;
  gap: 8px;
}

/* Widget delete X (only in edit mode should be visible via JS class) */
.dash-x{
  position:absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 14px;
  border: 1px solid rgba(239,68,68,0.55);
  background: rgba(239,68,68,0.15);
  color: rgba(255,255,255,0.92);
  display:none;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index: 5;
}
.dash-widget.editing .dash-x{ display:flex; }

/* Switch (on/off) */
.switch{
  width: 84px;
  height: 36px;
  border-radius: 18px;
  background: var(--red);
  position: relative;
  transition: background .18s ease;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25);
  cursor:pointer;
}
.switch.on{ background: var(--green); }
.switch::after{
  content:"";
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: #fff;
  position:absolute;
  top: 3px;
  left: 3px;
  transition: left .18s ease;
}
.switch.on::after{ left: 51px; }

/* Slider */
.range{
  width: 100%;
}
.range-row{
  display:flex;
  align-items:center;
  gap: 10px;
}
.range-value{
  min-width: 42px;
  text-align:right;
  color: var(--muted);
}

/* Modals / Overlays */
.modal-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 14px;
}
.modal-backdrop.active{ display:flex; }

.modal{
  width: min(720px, 100%);
  max-height: 88vh;
  overflow:auto;
  background: rgba(7,16,34,0.92);
  border: 1px solid rgba(148,163,184,0.24);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 14px;
}
.modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  position: sticky;
  top: 0;
  background: rgba(7,16,34,0.92);
  padding-bottom: 10px;
  z-index: 2;
}
.modal-title{ font-size: 16px; font-weight: 700; }
.modal-close{
  width: 40px;
  height: 40px;
  border-radius: 20px;
  border: 1px solid rgba(148,163,184,0.25);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Burger menu panel */
#burgerMenu, .burger-menu{
  position: fixed;
  top: 86px; /* below header card */
  right: 16px;
  width: min(340px, calc(100% - 32px));
  background: rgba(7,16,34,0.96);
  border: 1px solid rgba(148,163,184,0.24);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 10px;
  display:none;
  z-index: 1200;
}
#burgerMenu.open, .burger-menu.open{ display:block; }
.burger-menu .menu-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 12px;
  cursor:pointer;
}
.burger-menu .menu-item:hover{ background: rgba(255,255,255,0.06); }

/* Setup wizard sections */
.wizard{
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(148,163,184,0.16);
  border-radius: 18px;
  padding: 12px;
}
.wizard .row{ display:flex; gap: 10px; }
.wizard .row > *{ flex:1; }

/* Fix: #burgerMenu selector had higher specificity than .burger-dropdown.show */
#burgerMenu.show{ display:flex !important; }



/* Phase 3: Utility classes to remove inline styles */
.hidden{ display:none !important; }
.rel{ position:relative; }
.flex{ display:flex; }
.flex-between{ display:flex; justify-content:space-between; }
.flex-between-start{ display:flex; justify-content:space-between; align-items:flex-start; }
.items-center{ align-items:center; }
.justify-center{ justify-content:center; }
.gap-04{ gap:0.4rem; }
.gap-05{ gap:0.5rem; }
.gap-10{ gap:10px; }
.mt-035{ margin-top:0.35rem; }
.mt-05{ margin-top:0.5rem; }
.mt-075{ margin-top:0.75rem; }
.mt-10{ margin-top:1rem; }
.mt-15{ margin-top:1.5rem; }
.text-xs{ font-size:0.78rem; }
.opacity-90{ opacity:0.9; }
.opacity-75{ opacity:0.75; }
.w-5rem{ max-width:5rem; }
.img-fluid{ width:100%; height:auto; }
.center-row{ display:flex; justify-content:center; }
.map-grid{ display:grid; grid-template-columns: 90px 90px 1fr 90px 120px 70px; gap:0.5rem; align-items:center; }
.map-help{ opacity:.75; padding:.5rem .25rem; }
.map-divider{ padding:0.5rem 0; border-top:1px solid rgba(148,163,184,0.12); }
.bold{ font-weight:700; }
.small-meta{ opacity:.7; font-size:.85em; }
.row-compact{ display:flex; align-items:center; gap:0.4rem; }
.row-compact-sm{ display:flex; align-items:center; gap:0.4rem; margin-bottom:0.25rem; font-size:0.85rem; }


/* Phase 4 UX polish */
.dash-widget, .switch, .modal { transition: background-color .2s ease, color .2s ease, transform .18s ease, opacity .18s ease; }
.modal { transform: translateY(10px); }
.modal-backdrop.active .modal { transform: translateY(0); }


/* Phase 4B: prevent background scroll when modal/overlay open */
body.modal-open{ overflow:hidden; touch-action:none; }

/* Phase 4B: subtle value change highlight */
.flash-update{
  animation: flashUpdate 420ms ease;
}
@keyframes flashUpdate{
  0%{ box-shadow: 0 0 0 0 rgba(45,119,255,0.0); }
  35%{ box-shadow: 0 0 0 8px rgba(45,119,255,0.18); }
  100%{ box-shadow: 0 0 0 0 rgba(45,119,255,0.0); }
}


/* Fix: overlays must sit above sticky header */
.modal-backdrop{ z-index: 2500; }
#overlay{ z-index: 2500; }

/* Overlay layering hard-fix (iOS Safari safe): ensure overlay always above header */
.modal-backdrop{
  position: fixed !important;
  z-index: 99999 !important;
}
#overlay{
  position: fixed !important;
  z-index: 99999 !important;
}
#topBar, .top-bar, header.app-header, header{
  z-index: 500 !important;
}

/* Header title background transparent */
header.app-header h1,
header h1,
.top-bar h1 {
  background: transparent !important;
  box-shadow: none !important;
}


/* === Dashboard spacing fix (equal left / middle / right on iPhone) ===
   Goal: (viewport width - 2 tiles) / 3 => same value for left padding, middle gap, right padding.
*/
#dashboardGrid, #dashboard, .dashboard-grid{
  /* ensure full-width grid container */
  width: 100%;
  box-sizing: border-box;
}

/* Default (desktop/tablet): responsive grid with minimum spacing */
#dashboardGrid, #dashboard, .dashboard-grid{
  --dash-min-gap: 10px;
  gap: max(var(--dash-min-gap), 14px);
  padding-inline: max(var(--dash-min-gap), 14px);
  justify-items: stretch;
  align-items: start;
}

/* Make widgets fill their grid cell (prevents “left sticking” due to fixed width) */
#dashboardGrid .dash-widget,
#dashboard .dash-widget,
.dashboard-grid .dash-widget{
  width: 100%;
  max-width: var(--dash-widget-width, 200px);
  justify-self: stretch;
}

/* Phone layout: force 2 columns with mathematically equal outer + inner spacing */
@media (max-width: 520px){
  #dashboardGrid, #dashboard, .dashboard-grid{
    --dash-min-gap: 10px;
    /* tile width adapts so that 2 tiles + 3*minGap always fits */
    --dash-tile: min(170px, calc((100% - (3 * var(--dash-min-gap))) / 2));
    /* equal spacing: s = (100% - 2*tile) / 3, clamped */
    --dash-gap: clamp(var(--dash-min-gap), calc((100% - (2 * var(--dash-tile))) / 3), 28px);

    grid-template-columns: repeat(2, var(--dash-tile));
    gap: var(--dash-gap);
    padding-inline: var(--dash-gap);
    justify-content: start;
  }

  /* on small screens, let cards use the full tile width */
  #dashboardGrid .dash-widget,
  #dashboard .dash-widget,
  .dashboard-grid .dash-widget{
    max-width: none;
  }
}


/* === Equal gutter spacing + transparent header (fix) === */
:root{
  --grid-gap: clamp(10px, 3.2vw, 18px);
}

/* Edge spacing equals inner gap */
#app, main, .app, .content{
  padding: var(--grid-gap) !important;
}

/* Responsive dashboard grid: equal left/middle/right spacing */
#dashboardGrid, #dashboard, .dashboard-grid{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
  gap: var(--grid-gap) !important;
  align-items: start;
  justify-items: stretch;
  margin-top: 0.75rem;
}

@media (max-width: 480px){
  #dashboardGrid, #dashboard, .dashboard-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Make widgets fill their grid cell so spacing is mathematically even */
.dashboard-grid .dash-widget{
  width: 100% !important;
}

/* Remove dark/black bar behind the title (keep only page background) */
#topBar, .top-bar, .header-card,
header.app-header, header.topbar, header{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* Ensure title area itself never paints a background */
header.app-header h1,
header h1,
.top-bar h1{
  background: transparent !important;
}

/* MODAL GRID PATCH START */
/* Group details modal: render node widgets in a responsive grid with equal spacing */
#groupDetailsGrid.dash-grid,
#groupDetailsGrid {
  display: grid;
  gap: var(--grid-gap, 12px);
  /* columns are set inline by JS; this keeps it grid even if class was missing */
  align-items: stretch;
}

#groupDetailsGrid .dash-widget {
  width: 100%;
  margin: 0; /* prevent stacked look from margins */
}
/* MODAL GRID PATCH END */

/* DASH TOGGLE SLIDER START */
/* Wrapper hält "Aus" und "An" Texte */
.dash-toggle{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* Der eigentliche Slider-Button */
.dash-toggle .toggle-switch{
  position: relative;
  width: 62px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.18); /* OFF */
  cursor: pointer;
  padding: 0;
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12);
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}

/* Thumb */
.dash-toggle .toggle-switch .toggle-thumb{
  position: absolute;
  width: 24px;
  height: 24px;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
  transition: transform .25s ease;
}

/* ON Zustand (wird vom JS bereits gesetzt: toggle-on / toggle-off) */
.dash-toggle .toggle-switch.toggle-on{
  background: rgba(44, 197, 94, 0.85);
  border-color: rgba(255,255,255,0.28);
}

.dash-toggle .toggle-switch.toggle-on .toggle-thumb{
  transform: translateY(-50%) translateX(30px);
}

/* Fokus */
.dash-toggle .toggle-switch:focus-visible{
  box-shadow: 0 0 0 3px rgba(255,255,255,0.18);
}
/* DASH TOGGLE SLIDER END */

/* DASH TOGGLE SLIDER START */
/* Kompakte Slider-Größe passend zum bestehenden Widget-Layout */

.dash-toggle{
  display: inline-flex;
  align-items: center;
}

/* Slider */
.dash-toggle .toggle-switch{
  position: relative;
  width: 46px;          /* vorher größer */
  height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.18);
  cursor: pointer;
  padding: 0;
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12);
  transition: background .25s ease, border-color .25s ease;
}

/* Thumb */
.dash-toggle .toggle-switch .toggle-thumb{
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.35);
  transition: transform .25s ease;
}

/* ON */
.dash-toggle .toggle-switch.toggle-on{
  background: rgba(44, 197, 94, 0.85);
  border-color: rgba(255,255,255,0.28);
}

.dash-toggle .toggle-switch.toggle-on .toggle-thumb{
  transform: translateY(-50%) translateX(22px);
}
/* DASH TOGGLE SLIDER END */

/* --- Inline icon picker button (rules & mappings) --- */
.icon-field{
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.icon-field input{
  flex: 1 1 auto;
  min-width: 0;
}
.icon-pick-btn{
  flex: 0 0 auto;
  width: 38px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: inherit;
  cursor: pointer;
}
.icon-pick-btn:hover{
  background: rgba(255,255,255,0.1);
}
/* ================================
   Gruppen-Widget – Node Grid
   ================================ */

/* Container der Node-Widgets in geöffneter Gruppe */
.group-nodes,
.group-nodes-grid,
.group-devices,
#groupNodesGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  align-items: stretch;
}

/* WICHTIG: verhindert 1-Spalten-Bug in Safari/iOS */
.group-nodes .dash-widget,
.group-nodes-grid .dash-widget,
.group-devices .dash-widget,
#groupNodesGrid .dash-widget {
  min-width: 0;
  width: auto;
}

/* ================================
   Mobile: exakt 2 Widgets pro Zeile
   ================================ */
@media (max-width: 768px) {
  .group-nodes,
  .group-nodes-grid,
  .group-devices,
  #groupNodesGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}


/* Group Details toolbar (sorting button) */
.details-toolbar{display:flex;gap:.5rem;align-items:center;margin:.5rem 0;}

/* Color attribute control */
.color-control{display:inline-flex;align-items:center;gap:.4rem;position:relative;}
.color-dot{width:14px;height:14px;border-radius:999px;border:1px solid rgba(255,255,255,.35);display:inline-block;}
.color-picker{width:28px;height:22px;padding:0;border:0;background:transparent;cursor:pointer;}

/* Color attribute control v6 */
.color-control{position:relative;}
.color-control .color-picker{
  position:absolute;
  left:0;
  top:0;
  width:18px;
  height:18px;
  opacity:0;
}

/* Color presets */
.color-presets{display:flex;gap:.25rem;margin-left:.25rem;}
.color-dot.preset{width:12px;height:12px;cursor:pointer;opacity:.85}
.color-dot.preset:hover{opacity:1}

/* Group job running spinner */
.group-job-running button{opacity:.6;pointer-events:none;}
.group-job-running::after{
  content:'';
  width:16px;height:16px;
  border:2px solid rgba(255,255,255,.3);
  border-top-color:#fff;
  border-radius:50%;
  display:inline-block;
  margin-left:.5rem;
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* Group on/off widget value layout */
.group-onoff-value{display:flex;flex-direction:column;align-items:center;gap:.35rem;}
.group-onoff-summary{text-align:center;line-height:1.1;}
.group-onoff-toggle{justify-content:center;}

/* Pending (current != target) indicator */
.pending{position:relative;}
.pending-spinner{
  width:14px;height:14px;
  border:2px solid rgba(255,255,255,.25);
  border-top-color:rgba(255,255,255,.9);
  border-radius:50%;
  display:inline-block;
  margin-right:.35rem;
  animation:spin .8s linear infinite;
}
.details-edit.pending{display:flex;align-items:center;gap:.35rem;}
.dash-toggle.pending{display:flex;align-items:center;gap:.35rem;}