:root{
      --bg0:#eaf0f7;
      --bg1:#dfe8f3;
      --ink:#0f172a;
      --muted:#475569;
      --line:rgba(148,163,184,.35);
      --panel:rgba(255,255,255,.82);
      --ok:#16a34a;
      --warn:#d97706;
      --bad:#dc2626;
      --door:#0ea5e9;
      --light:#7c3aed;
      --radius:18px;
      --shadow:0 18px 40px rgba(15,23,42,.14);
    }
    body.theme-dark{
      --bg0:#0b1220;
      --bg1:#111827;
      --ink:#e5e7eb;
      --muted:#94a3b8;
      --line:rgba(148,163,184,.28);
      --panel:rgba(17,24,39,.84);
      --shadow:0 18px 40px rgba(2,6,23,.45);
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      color:var(--ink);
      font-family:"Avenir Next","Segoe UI",system-ui,-apple-system,sans-serif;
      background:
        radial-gradient(circle at 0% 0%, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 38%),
        radial-gradient(circle at 100% 0%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 30%),
        linear-gradient(180deg,var(--bg0) 0%,var(--bg1) 100%);
      min-height:100vh;
    }
    .app{max-width:1280px;margin:0 auto;padding:18px}
    .topbar{
      display:flex;gap:12px;align-items:center;justify-content:space-between;
      border:1px solid var(--line);border-radius:16px;background:var(--panel);backdrop-filter:blur(12px);
      box-shadow:var(--shadow);padding:12px 14px;
    }
    .watchdog{
      margin:8px 0 0;
      border:1px solid rgba(220,38,38,.35);
      background:rgba(239,68,68,.12);
      color:#7f1d1d;
      border-radius:12px;
      padding:10px 12px;
      font-size:12px;
      font-weight:800;
      display:none;
    }
    .watchdog.show{display:block}
    .mobile-tabs{display:none}
    .mobile-bottom-nav{display:none}
    .smart-strip{
      margin-top:10px;
      display:grid;
      grid-template-columns:repeat(5,minmax(0,1fr));
      gap:8px;
    }
    .smart-pill{
      border:1px solid var(--line);
      border-radius:12px;
      background:#fff;
      padding:8px 10px;
      font-size:12px;
      font-weight:800;
      color:#0f172a;
      box-shadow:0 8px 16px rgba(15,23,42,.1);
    }
    .smart-pill::before{
      content:attr(data-icon);
      display:inline-block;
      min-width:26px;
      margin-right:8px;
      padding:2px 6px;
      border-radius:999px;
      border:1px solid var(--line);
      background:rgba(148,163,184,.12);
      font-size:10px;
      font-weight:900;
      letter-spacing:.04em;
      text-align:center;
      vertical-align:middle;
    }
    .smart-pill.warn{
      background:rgba(250,204,21,.12);
      border-color:rgba(202,138,4,.35);
      color:#713f12;
    }
    .smart-pill.ok{
      background:rgba(34,197,94,.12);
      border-color:rgba(22,163,74,.35);
      color:#166534;
    }
    .quick-ribbon{
      margin-top:12px;
      border:1px solid var(--line);
      border-radius:14px;
      background:var(--panel);
      box-shadow:var(--shadow);
      padding:10px;
    }
    .quick-ribbon .title{
      font-size:12px;
      font-weight:800;
      text-transform:uppercase;
      letter-spacing:.08em;
      color:#64748b;
      margin-bottom:8px;
    }
    .quick-actions{
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:8px;
    }
    .quick-btn{
      border:1px solid var(--line);
      background:#fff;
      color:#0f172a;
      border-radius:10px;
      padding:10px 8px;
      font-size:12px;
      font-weight:800;
      cursor:pointer;
    }
    .quick-btn::before{
      content:attr(data-icon);
      display:inline-block;
      margin-right:8px;
      padding:2px 6px;
      border-radius:999px;
      border:1px solid var(--line);
      background:rgba(148,163,184,.12);
      font-size:10px;
      font-weight:900;
      letter-spacing:.04em;
      vertical-align:middle;
    }
    .quick-btn:hover{background:#f8fafc}
    .quick-btn.warn{background:rgba(239,68,68,.12);border-color:rgba(220,38,38,.35);color:#7f1d1d}
    .quick-btn.ok{background:rgba(34,197,94,.12);border-color:rgba(22,163,74,.35);color:#166534}
    .timeline-filter{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
    .timeline-filter .filter-btn{
      border:1px solid var(--line);
      background:#fff;
      color:#0f172a;
      border-radius:999px;
      padding:6px 10px;
      font-size:11px;
      font-weight:800;
      cursor:pointer;
    }
    .timeline-filter .filter-btn.active{background:#0f172a;color:#fff;border-color:#0f172a}
    .event-log li[data-kind="err"]{color:#7f1d1d;background:rgba(239,68,68,.06)}
    .event-log li[data-kind="ok"]{color:#166534;background:rgba(34,197,94,.06)}
    .event-log li[data-kind="auth"]{color:#1e3a8a;background:rgba(59,130,246,.06)}
    .event-log li[data-kind="scene"]{color:#5b21b6;background:rgba(124,58,237,.07)}
    .event-log li[data-kind="door"]{color:#0c4a6e;background:rgba(14,165,233,.07)}
    .event-log li[data-kind="system"]{color:#334155;background:rgba(148,163,184,.08)}
    .view-fade-in{animation:viewFade .24s ease}
    @keyframes viewFade{
      from{opacity:.35;transform:translateY(6px);filter:blur(1px)}
      to{opacity:1;transform:translateY(0);filter:blur(0)}
    }
    .title{display:flex;flex-direction:column}
    .title h1{margin:0;font-size:22px;letter-spacing:-.02em}
    .title p{margin:2px 0 0;color:var(--muted);font-size:13px}
    .status{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
    .chip{padding:6px 10px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:12px;font-weight:700}
    .chip.good{color:#166534;border-color:rgba(22,163,74,.4);background:rgba(34,197,94,.12)}
    .chip.bad{color:#7f1d1d;border-color:rgba(220,38,38,.4);background:rgba(239,68,68,.13)}
    .home-btn{
      border:1px solid var(--line);background:#fff;color:var(--ink);
      padding:8px 12px;border-radius:10px;font-weight:700;font-size:12px;cursor:pointer
    }
    .home-btn:hover{background:#f8fafc}

    #home{
      display:flex;flex-direction:column;align-items:center;justify-content:center;
      min-height:calc(100vh - 40px);position:relative;z-index:0;gap:24px;text-align:center;padding:28px 24px 34px;
      background:
        radial-gradient(circle at 8% 0%, rgba(255,255,255,.88) 0%, rgba(255,255,255,0) 36%),
        linear-gradient(180deg,#eef3f8 0%,#e7edf5 48%,#dee7f1 100%)
    }
    #home::before{
      content:"";
      position:absolute;inset:0;
      background:radial-gradient(circle at 50% 28%, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 44%);
      opacity:.18;pointer-events:none;z-index:0
    }
    #home > *{position:relative;z-index:1}
    .home-wrap{display:flex;flex-direction:column;align-items:center;gap:20px;width:min(1160px,95vw)}
    .home-logo-wrap{display:flex;justify-content:center;align-items:center;margin-bottom:6px}
    .home-logo{
      width:min(560px,90vw);
      height:auto;
      border-radius:28px;
      -webkit-mask-image: radial-gradient(ellipse 84% 76% at 50% 46%, #000 62%, rgba(0,0,0,.75) 76%, transparent 100%);
      mask-image: radial-gradient(ellipse 84% 76% at 50% 46%, #000 62%, rgba(0,0,0,.75) 76%, transparent 100%);
      filter:drop-shadow(0 10px 24px rgba(0,0,0,.26)) saturate(.94) contrast(.97);
      opacity:.92;
      object-fit:contain
    }
    .home-intro{
      width:100%;max-width:900px;margin:0 auto;padding:22px 24px;border-radius:20px;
      border:1px solid rgba(148,163,184,.3);
      background:linear-gradient(120deg,rgba(255,255,255,.78) 0%,rgba(255,255,255,.62) 100%);
      box-shadow:var(--shadow);text-align:center
    }
    .home-intro h2{margin:0 0 8px;font-size:34px;line-height:1.06;letter-spacing:-.03em;color:#0f172a;font-weight:650}
    .home-intro p{margin:0;color:#475569;font-size:15px;line-height:1.45}
    .home-row{display:grid;grid-template-columns:repeat(5,minmax(200px,1fr));gap:14px;width:100%}
    .tile{
      min-width:0;padding:20px 20px;border-radius:18px;border:1px solid rgba(255,255,255,.25);
      background:linear-gradient(160deg,rgba(255,255,255,.76) 0%,rgba(255,255,255,.62) 100%);
      box-shadow:0 14px 28px rgba(15,23,42,.1), inset 0 1px 0 rgba(255,255,255,.75);
      display:flex;flex-direction:column;align-items:center;gap:10px;
      transition:transform .16s ease,box-shadow .18s ease,border-color .18s ease
    }
    .tile:hover{transform:translateY(-2px);border-color:rgba(148,163,184,.45);box-shadow:0 18px 30px rgba(15,23,42,.14), inset 0 1px 0 rgba(255,255,255,.85)}
    .tile h2{margin:0;text-align:center;font-size:24px;letter-spacing:-.02em;font-weight:650}
    .tile .bigbtn{
      display:flex;justify-content:center;align-items:center;width:100%;padding:14px 18px;border-radius:12px;
      border:1px solid rgba(148,163,184,.35);background:#ffffff;color:#0f172a;font-weight:650;font-size:16px;cursor:pointer;text-align:center;
      transition:transform .12s ease,background .18s ease, box-shadow .18s ease
    }
    .tile .bigbtn:hover{transform:translateY(-1px);background:#f8fafc;box-shadow:0 10px 18px rgba(15,23,42,.12)}
    .tile .bigbtn:active{transform:translateY(1px)}
    .tile .bigbtn.highlight{background:#e2e8f0;box-shadow:none}

    #dashboard{display:none}
    #controlCentre{display:none;margin-top:14px}
    .grid{margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
    .panel{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);box-shadow:var(--shadow);padding:14px}
    .panel h2{margin:0 0 10px;font-size:17px;letter-spacing:-.01em}
    .sub{margin:0 0 12px;color:var(--muted);font-size:13px}
    .card-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:4px}
    .card-head h2{margin:0}
    .drag-handle{
      border:1px dashed var(--line);background:transparent;color:var(--muted);
      border-radius:8px;padding:4px 8px;font-size:11px;font-weight:700
    }
    .dashboard-card.dragging{opacity:.55}
    .dashboard-card.drop-target{outline:2px solid rgba(59,130,246,.45);outline-offset:2px}

    .btn-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
    .btn{
      border:1px solid var(--line);background:#fff;color:var(--ink);padding:12px 10px;border-radius:12px;
      font-weight:700;font-size:14px;cursor:pointer;transition:transform .12s ease,box-shadow .18s ease,border-color .18s ease;
    }
    .btn:hover{transform:translateY(-1px);box-shadow:0 10px 18px rgba(15,23,42,.12)}
    .btn:active{transform:translateY(0)}
    .btn:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}
    .btn.door{background:linear-gradient(180deg,#f0f9ff 0%,#e0f2fe 100%)}
    .btn.light{background:linear-gradient(180deg,#f5f3ff 0%,#ede9fe 100%)}
    .btn.active{border-color:rgba(15,23,42,.45);box-shadow:0 0 0 2px rgba(15,23,42,.08) inset}

    .door-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
    .door-tile{border:1px solid var(--line);border-radius:12px;padding:10px;background:#fff}
    .door-tile h3{margin:0 0 6px;font-size:13px}
    .door-state{font-size:12px;font-weight:700;color:var(--muted)}
    .door-meta{font-size:11px;color:var(--muted);margin-top:4px}

    .camera-wrap{display:grid;grid-template-columns:1fr;gap:8px}
    .camera-frame{width:100%;min-height:360px;border:1px solid var(--line);border-radius:14px;background:#fff}
    .camera-tools{display:flex;gap:8px;flex-wrap:wrap}
    .camera-tools .btn{padding:9px 12px;font-size:13px}

    .event-log{max-height:180px;overflow:auto;border:1px solid var(--line);border-radius:12px;background:#fff;padding:8px}
    .event-log ul{list-style:none;margin:0;padding:0}
    .event-log li{font-size:12px;color:#334155;padding:6px 4px;border-bottom:1px dashed rgba(148,163,184,.25)}
    .event-log li:last-child{border-bottom:none}
    .ops-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
    .ops-inline{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
    .ops-note{font-size:12px;color:#475569}
    .ops-kpi{font-size:12px;font-weight:700;padding:6px 10px;border:1px solid var(--line);border-radius:999px;background:#fff}
    .ops-btn{border:1px solid var(--line);background:#fff;color:var(--ink);padding:10px 12px;border-radius:10px;font-weight:700;font-size:13px;cursor:pointer}
    .ops-btn:hover{background:#f8fafc}
    .ops-btn.primary{background:#111827;color:#fff;border-color:#111827}
    .ops-btn.warn{background:#7f1d1d;color:#fff;border-color:#7f1d1d}
    .ops-btn.active{background:#0f172a;color:#fff;border-color:#0f172a}
    .ops-btn:disabled{opacity:.45;cursor:not-allowed}
    .ops-textarea{
      width:100%;
      min-height:140px;
      border:1px solid var(--line);
      border-radius:10px;
      padding:10px;
      font:inherit;
      background:#fff;
      color:var(--ink);
    }
    .checklist{
      display:grid;
      gap:8px;
    }
    .check-item{
      display:flex;
      align-items:center;
      gap:10px;
      border:1px solid var(--line);
      border-radius:10px;
      padding:8px 10px;
      background:#fff;
      color:#334155;
      font-size:13px;
      font-weight:600;
    }
    .check-item input[type="checkbox"]{
      width:16px;
      height:16px;
      accent-color:#0f172a;
      margin:0;
    }
    .check-item.done{
      background:rgba(34,197,94,.1);
      border-color:rgba(22,163,74,.35);
      color:#166534;
    }
    .handover{
      border:1px solid var(--line);
      border-radius:12px;
      background:#fff;
      padding:10px;
      min-height:120px;
      white-space:pre-wrap;
      font-size:12px;
      line-height:1.45;
      color:#334155;
    }
    .role-chip{font-size:12px;font-weight:700;padding:6px 10px;border:1px solid var(--line);border-radius:999px;background:#fff}
    .role-chip.role-welcome{color:#166534;border-color:rgba(22,163,74,.35);background:rgba(34,197,94,.12)}
    .role-chip.role-lead{color:#1e3a8a;border-color:rgba(37,99,235,.35);background:rgba(59,130,246,.12)}
    .role-chip.role-admin{color:#7f1d1d;border-color:rgba(220,38,38,.35);background:rgba(239,68,68,.13)}
    body.theme-dark .home-btn,
    body.theme-dark .btn,
    body.theme-dark .ops-btn,
    body.theme-dark .door-tile,
    body.theme-dark .entity{
      background:#0f172a;
      color:#e5e7eb;
      border-color:rgba(148,163,184,.3);
    }
    body.theme-dark .event-log,
    body.theme-dark #operatorNotes,
    body.theme-dark .handover{
      background:#0f172a;
      color:#e5e7eb;
      border-color:rgba(148,163,184,.3);
    }
    body.theme-dark .check-item{
      background:#0f172a;
      color:#e5e7eb;
      border-color:rgba(148,163,184,.3);
    }
    body.theme-dark .check-item.done{
      background:rgba(22,163,74,.2);
      border-color:rgba(34,197,94,.35);
      color:#dcfce7;
    }
    body.theme-dark .event-log li{color:#cbd5e1;border-bottom-color:rgba(148,163,184,.2)}
    body.theme-dark .tile .bigbtn{background:#0f172a;color:#e5e7eb}
    body.theme-dark .tile .bigbtn:hover{background:#111827}
    body.theme-dark .smart-pill,
    body.theme-dark .quick-btn,
    body.theme-dark .timeline-filter .filter-btn{
      background:#0f172a;
      color:#e5e7eb;
      border-color:rgba(148,163,184,.3);
    }
    body.theme-dark .timeline-filter .filter-btn.active{
      background:#e5e7eb;
      color:#0f172a;
      border-color:#e5e7eb;
    }
    body.with-sidebar .app{max-width:1440px}
    .ha-sidebar{
      position:fixed;left:16px;top:16px;bottom:16px;width:220px;z-index:1100;
      border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.86);backdrop-filter:blur(14px);
      box-shadow:var(--shadow);padding:12px;display:none;overflow:auto
    }
    .ha-brand{font-size:14px;font-weight:800;letter-spacing:.02em;color:#0f172a;margin:4px 0 10px}
    .ha-nav{display:flex;flex-direction:column;gap:6px}
    .ha-nav button{
      border:1px solid var(--line);background:#fff;color:#0f172a;padding:10px 11px;border-radius:10px;
      font-size:13px;font-weight:700;text-align:left;cursor:pointer
    }
    .ha-nav button::before,
    .mobile-tabs .tab-btn::before,
    .mobile-bottom-nav .nav-btn::before{
      content:attr(data-icon);
      display:inline-block;
      margin-right:6px;
      padding:1px 5px;
      border-radius:999px;
      border:1px solid var(--line);
      background:rgba(148,163,184,.12);
      font-size:10px;
      font-weight:900;
      letter-spacing:.04em;
      vertical-align:middle;
    }
    .ha-nav button.active{background:#0f172a;color:#fff;border-color:#0f172a}
    .ha-nav button:hover{background:#f8fafc}
    body.with-sidebar #dashboard, body.with-sidebar #controlCentre{
      margin-left:248px;
      width:calc(100% - 248px)
    }
    #overviewPanel{grid-column:1 / -1}
    .overview-cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
    .entity{
      border:1px solid var(--line);border-radius:12px;background:#fff;padding:10px 11px;
      box-shadow:0 8px 16px rgba(15,23,42,.08)
    }
    .entity .k{font-size:11px;color:#64748b;text-transform:uppercase;letter-spacing:.06em;font-weight:700}
    .entity .v{margin-top:4px;font-size:16px;font-weight:800;color:#0f172a}

    #toast{
      position:fixed;right:14px;bottom:14px;padding:10px 12px;border-radius:12px;
      border:1px solid var(--line);background:rgba(15,23,42,.92);color:#e2e8f0;font-size:12px;font-weight:700;
      opacity:0;transform:translateY(8px);transition:opacity .18s ease,transform .18s ease;pointer-events:none;z-index:1200;
    }
    #toast.show{opacity:1;transform:translateY(0)}
    #toast.ok{background:rgba(22,101,52,.95);border-color:rgba(34,197,94,.45);color:#dcfce7}
    #toast.err{background:rgba(127,29,29,.95);border-color:rgba(248,113,113,.45);color:#fee2e2}

    @media (max-width:980px){
      .home-wrap{width:min(96vw,760px)}
      .home-intro{text-align:center;padding:18px}
      .home-intro h2{font-size:26px}
      .home-row{grid-template-columns:repeat(2,minmax(150px,1fr))}
      .tile{padding:16px}
      .tile h2{font-size:20px}
      .tile .bigbtn{font-size:14px;padding:12px 14px}
      .grid{grid-template-columns:1fr}
      .ops-grid{grid-template-columns:1fr}
      .overview-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
      .camera-frame{min-height:280px}
      .btn-row{grid-template-columns:repeat(2,minmax(0,1fr))}
      .smart-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
      .quick-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
    }
    @media (max-width:900px){
      .app{padding:12px}
      .topbar{flex-direction:column;align-items:flex-start}
      .status{width:100%;justify-content:flex-start}
      .title h1{font-size:20px}
      .ha-sidebar{display:none !important}
      body.with-sidebar #dashboard,
      body.with-sidebar #controlCentre{
        margin-left:0;
        width:100%
      }
      .mobile-tabs{
        display:grid;
        grid-template-columns:repeat(5,minmax(0,1fr));
        gap:8px;
        margin:10px 0 0
      }
      .mobile-tabs .tab-btn{
        border:1px solid var(--line);
        background:#fff;
        color:#0f172a;
        border-radius:10px;
        padding:9px 8px;
        font-size:12px;
        font-weight:700;
        cursor:pointer
      }
      .mobile-tabs .tab-btn.active{
        background:#0f172a;
        color:#fff;
        border-color:#0f172a
      }
      body.theme-dark .mobile-tabs .tab-btn{
        background:#0f172a;
        color:#e5e7eb;
        border-color:rgba(148,163,184,.3)
      }
      body.theme-dark .mobile-tabs .tab-btn.active{
        background:#e5e7eb;
        color:#0f172a;
        border-color:#e5e7eb
      }
      .mobile-bottom-nav{
        position:fixed;
        left:10px;
        right:10px;
        bottom:10px;
        z-index:1300;
        display:grid;
        grid-template-columns:repeat(5,minmax(0,1fr));
        gap:8px;
        border:1px solid var(--line);
        border-radius:14px;
        padding:8px;
        background:rgba(255,255,255,.9);
        backdrop-filter:blur(14px);
        box-shadow:0 16px 34px rgba(15,23,42,.22)
      }
      .mobile-bottom-nav .nav-btn{
        border:1px solid var(--line);
        background:#fff;
        color:#0f172a;
        border-radius:10px;
        padding:9px 6px;
        font-size:11px;
        font-weight:800;
        cursor:pointer
      }
      .mobile-bottom-nav .nav-btn.active{
        background:#0f172a;
        color:#fff;
        border-color:#0f172a
      }
      body.theme-dark .mobile-bottom-nav{
        background:rgba(15,23,42,.9)
      }
      body.theme-dark .mobile-bottom-nav .nav-btn{
        background:#0f172a;
        color:#e5e7eb;
        border-color:rgba(148,163,184,.3)
      }
      body.theme-dark .mobile-bottom-nav .nav-btn.active{
        background:#e5e7eb;
        color:#0f172a;
        border-color:#e5e7eb
      }
      #dashboard,#controlCentre{padding-bottom:82px}
    }
    @media (max-width:640px){
      .home-row{grid-template-columns:1fr}
      .mobile-tabs{
        grid-template-columns:repeat(3,minmax(0,1fr))
      }
      .mobile-bottom-nav{
        grid-template-columns:repeat(3,minmax(0,1fr))
      }
    }