:root{
      --purple-500:#6844ED;
      --blue-500:#3468F0;
      --teal-500:#09B6A2;
      --amber-500:#F5A623;
      --red-500:#E5484D;
      --ink-950:#030014;
      --ink-600:#181525;
      --slate-600:#4A4D66;
      --slate-500:#6B6B80;
      --slate-300:#A0A0B2;
      --lavender-200:#ECECF4;
      --lavender-150:#F2F2F8;
      --lavender-100:#EBEBFD;
      --lavender-75:#F5F5F9;
      --lavender-50:#F7F7FB;
      --lavender-25:#FAFAFD;
      --white:#FFFFFF;
      --radius-xs:8px;
      --radius-sm:12px;
      --radius-md:14px;
      --radius-xl:16px;
      --radius-full:999px;
      --shadow-soft:0 10px 60px rgba(0,0,0,0.10);
      --shadow-elevated:0 20px 40px rgba(0,0,0,0.20);
      --topbar-h:76px;
      --sidebar-w:260px;
      --sidebar-collapsed:64px;
      --rail-w:48px;
      --panel-w:300px;
      --footer-h:48px;
    }

    *{box-sizing:border-box}
    /* Class rules below set display on many components, which would otherwise
       beat the UA [hidden] rule — keep the attribute authoritative. */
    [hidden]{display:none !important;}
    html,body{margin:0;padding:0;height:100%;}
    body{
      font-family:"Space Grotesk", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background:var(--lavender-150);
      color:var(--ink-600);
      -webkit-font-smoothing:antialiased;
    }

    /* Icon helpers */
    .icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex:0 0 20px}
    .icon svg{width:100%;height:100%;fill:currentColor}

    /* Topbar */
    .topbar{
      position:fixed;inset:0 0 auto 0;height:var(--topbar-h);
      background:var(--white);border-bottom:1px solid var(--lavender-200);
      box-shadow:var(--shadow-soft);display:flex;align-items:center;gap:18px;
      padding:0 24px;z-index:100;
    }
    .brand{display:flex;align-items:center;gap:10px;}
    .mark{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;color:var(--white);font-weight:800;font-size:16px;background:linear-gradient(150deg,#8163F2,#5A38D6);}
    .wordmark{font-size:18px;font-weight:700;letter-spacing:-0.03em;color:var(--ink-950);}
    .wordmark span{color:var(--purple-500);}

    .topbar-actions{display:flex;align-items:center;gap:8px;}
    .chip-btn{
      height:36px;border-radius:var(--radius-full);padding:0 14px;display:inline-flex;align-items:center;gap:8px;
      font-weight:600;font-size:13px;border:1px solid transparent;cursor:pointer;transition:background .15s, color .15s, border-color .15s;
    }
    .chip-btn.action{background:color-mix(in srgb, var(--ink-600) 8%, transparent);color:var(--ink-600);border-color:transparent;position:relative;width:38px;padding:0;gap:0;justify-content:center;}
    .chip-btn.action:hover{background:color-mix(in srgb, var(--ink-600) 14%, transparent);}
    .chip-btn.action .chip-label{display:none;}
    .chip-btn.action[data-label]::after{content:attr(data-label);position:absolute;top:calc(100% + 8px);left:50%;
      transform:translateX(-50%) translateY(-4px);white-space:nowrap;background:var(--ink-600);color:#fff;
      font-size:12px;font-weight:600;padding:6px 9px;border-radius:8px;box-shadow:0 10px 24px rgba(3,0,20,.22);
      opacity:0;pointer-events:none;transition:opacity .15s,transform .15s;z-index:130;}
    .chip-btn.action:hover::after,.chip-btn.action:focus::after,.chip-btn.action:active::after{opacity:1;transform:translateX(-50%) translateY(0);}
    .chip-btn.view{background:var(--lavender-75);color:var(--slate-500);border-color:var(--lavender-200);}
    .chip-btn.view:hover{background:var(--lavender-100);}
    .chip-btn .icon{width:14px;height:14px;}
    .chip-btn.more{padding:0 10px;}

    .view-toggle{
      display:inline-flex;align-items:center;gap:2px;background:var(--lavender-75);border:1px solid var(--lavender-200);border-radius:var(--radius-full);padding:3px;
    }
    .view-toggle button{
      all:unset;cursor:pointer;width:34px;height:30px;border-radius:var(--radius-full);display:grid;place-items:center;color:var(--slate-500);transition:background .15s,color .15s;
    }
    .view-toggle button.active{background:var(--ink-600);color:var(--white);}
    .view-toggle button .icon{width:15px;height:15px;}

    .global-search{
      width:280px;height:40px;border-radius:var(--radius-full);background:var(--lavender-75);border:1px solid var(--lavender-200);
      display:flex;align-items:center;gap:10px;padding:0 16px;color:var(--slate-300);font-size:13px;
    }
    .global-search .icon{width:16px;height:16px;color:var(--slate-500);}

    .topbar-spacer{flex:1;}
    .topbar-right{display:flex;align-items:center;gap:14px;}
    .circle-btn{
      width:40px;height:40px;border-radius:50%;background:var(--lavender-75);border:1px solid var(--lavender-200);display:grid;place-items:center;cursor:pointer;position:relative;transition:background .15s;
    }
    .circle-btn:hover{background:var(--lavender-100);}
    .circle-btn .icon{width:18px;height:18px;color:var(--slate-500);}
    .unread-dot{position:absolute;top:9px;right:9px;width:8px;height:8px;border-radius:50%;background:#CBED44;border:2px solid var(--white);}
    /* Identity cluster + its menu — the only route back out of the app. */
    .user-menu,.more-menu{position:relative;}
    .more-dropdown{
      position:absolute;top:calc(100% + 10px);left:0;min-width:210px;padding:6px;
      background:var(--white);border:1px solid var(--lavender-200);border-radius:var(--radius-md);
      box-shadow:0 12px 30px rgba(3,0,20,.18);z-index:150;}
    .user-cluster{display:flex;align-items:center;gap:10px;cursor:pointer;background:none;border:0;font:inherit;padding:4px;border-radius:var(--radius-sm);}
    .user-cluster:hover{background:var(--lavender-50);}
    .user-caret{color:var(--slate-500);font-size:12px;}
    .user-dropdown{
      position:absolute;top:calc(100% + 10px);right:0;min-width:200px;padding:6px;
      background:var(--white);border:1px solid var(--lavender-200);border-radius:var(--radius-md);
      box-shadow:0 12px 30px rgba(3,0,20,.18);z-index:150;}
    .user-dropdown-item{
      display:block;padding:10px 12px;border-radius:var(--radius-sm);font-size:14px;
      font-weight:600;color:var(--slate-600);text-decoration:none;white-space:nowrap;}
    .user-dropdown-item:hover{background:var(--lavender-50);color:var(--ink-600);}
    .user-dropdown-item.danger{color:var(--red-500);}
    .user-dropdown-sep{height:1px;margin:6px 4px;background:var(--lavender-200);}
    .user-avatar{width:36px;height:36px;border-radius:10px;background:linear-gradient(150deg,#8163F2,#5A38D6);display:grid;place-items:center;color:var(--white);font-weight:700;font-size:14px;}
    .user-name{font-weight:700;font-size:14px;color:var(--ink-600);}

    /* Layout shell */
    .shell{display:flex;min-height:100vh;padding-top:var(--topbar-h);}
    .sidebar{
      position:fixed;inset:var(--topbar-h) auto 0 0;width:var(--sidebar-w);background:var(--white);border-right:1px solid var(--lavender-200);
      display:flex;flex-direction:column;padding:18px 0;z-index:90;
    }
    .sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:0 20px 16px;}
    .sidebar-title{font-size:11px;font-weight:700;letter-spacing:0.09em;color:var(--slate-500);text-transform:uppercase;}
    .collapse-chip{width:24px;height:24px;border-radius:6px;border:1px solid var(--lavender-200);display:grid;place-items:center;cursor:pointer;color:var(--slate-500);}

    .nav-list{flex:1;overflow:auto;padding:0 12px;}
    .nav-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--radius-sm);cursor:pointer;color:var(--slate-600);font-weight:600;font-size:14px;margin-bottom:2px;position:relative;}
    .nav-item:hover{background:var(--lavender-50);}
    .nav-item.active{background:color-mix(in srgb, var(--purple-500) 10%, transparent);color:var(--purple-500);}
    .nav-item .icon{width:18px;height:18px;}
    .nav-item .expander{margin-left:auto;font-size:16px;color:var(--slate-500);}

    .submenu{padding-left:16px;margin-bottom:6px;}
    .submenu-item{padding:8px 12px 8px 34px;border-radius:var(--radius-sm);font-size:13px;font-weight:600;color:var(--slate-500);cursor:pointer;}
    .submenu-item:hover{background:var(--lavender-50);}
    .submenu-item.active{background:var(--white);box-shadow:0 0 0 1px var(--lavender-200);color:var(--purple-500);}

    .sidebar-footer{padding:0 14px;margin-top:auto;}
    .chat-entry{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--radius-sm);color:var(--slate-600);font-weight:600;font-size:14px;cursor:pointer;}
    .chat-entry:hover{background:var(--lavender-50);}
    .chat-entry .badge{margin-left:auto;height:20px;min-width:20px;padding:0 6px;border-radius:var(--radius-full);background:var(--ink-600);color:var(--white);font-size:11px;font-weight:700;display:grid;place-items:center;}

    .rail{
      position:fixed;inset:var(--topbar-h) 0 0 auto;width:var(--rail-w);background:var(--purple-500);z-index:80;
      display:flex;flex-direction:column;align-items:center;padding:40px 0 12px;gap:12px;color:var(--white);
    }
    .rail-btn{position:relative;width:32px;height:32px;border:0;border-radius:8px;background:transparent;color:inherit;display:grid;place-items:center;cursor:pointer;opacity:.85;transition:opacity .15s, background .15s;}
    .rail-btn:hover,.rail-btn:focus-visible{background:color-mix(in srgb, var(--white) 14%, transparent);opacity:1;outline:0;}
    .rail-btn .icon{width:18px;height:18px;}
    .rail-btn::after{content:attr(data-tooltip);position:absolute;right:42px;top:50%;transform:translateY(-50%) translateX(6px);min-width:150px;max-width:220px;padding:8px 10px;border-radius:10px;background:var(--ink-600);color:var(--white);font-size:12px;font-weight:600;line-height:1.35;text-align:left;box-shadow:0 14px 30px rgba(3,0,20,.24);opacity:0;pointer-events:none;transition:opacity .15s, transform .15s;}
    .rail-btn::before{content:"";position:absolute;right:34px;top:50%;transform:translateY(-50%) translateX(6px);border:6px solid transparent;border-left-color:var(--ink-600);opacity:0;pointer-events:none;transition:opacity .15s, transform .15s;}
    .rail-btn:hover::after,.rail-btn:focus-visible::after,.rail-btn:hover::before,.rail-btn:focus-visible::before{opacity:1;transform:translateY(-50%) translateX(0);}

    /* Main content */
    .main{
      margin-left:var(--sidebar-w);margin-right:var(--rail-w);min-width:0;
      padding:28px 32px calc(var(--footer-h) + 28px);min-height:calc(100vh - var(--topbar-h));flex:1;
    }

    .page-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:28px;gap:20px;flex-wrap:wrap;}
    /* Static section label above an H1 — same type as .crumb-link but not a link
       (used by the Settings subpages, which have no landing page to go back to). */
    .page-eyebrow{display:inline-block;margin-bottom:6px;color:var(--purple-500);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;}
    .page-title-block h1{font-size:32px;font-weight:700;letter-spacing:-0.03em;margin:0 0 4px;line-height:1.15;}
    .page-title-block p{margin:0;color:var(--slate-500);font-size:14px;}
    .page-actions{display:flex;gap:10px;}
    .btn{
      height:44px;padding:0 24px;border-radius:var(--radius-md);font-weight:700;font-size:14px;border:1px solid transparent;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:background .15s, color .15s, border-color .15s;
    }
    .btn-primary{background:var(--ink-600);color:var(--white);}
    .btn-primary:hover{background:var(--ink-950);}
    .btn-secondary{background:var(--white);color:var(--ink-600);border-color:var(--lavender-200);}
    .btn-secondary:hover{background:var(--lavender-50);}
    .btn .icon{width:16px;height:16px;}

    .grid{display:grid;gap:20px;}
    .grid-4{grid-template-columns:repeat(4, minmax(0,1fr));}
    .grid-3{grid-template-columns:repeat(3, minmax(0,1fr));}
    .grid-2{grid-template-columns:repeat(2, minmax(0,1fr));}

    .card{background:var(--white);border-radius:var(--radius-xl);padding:20px;box-shadow:0 1px 2px rgba(0,0,0,0.04);}
    .card h2{font-size:16px;font-weight:700;margin:0 0 16px;color:var(--ink-600);}

    /* Empty content area on the Dashboard until its widgets exist. Dashed so it
       reads as "intentionally blank", not as a card that failed to render. */
    .dash-canvas{min-height:min(56vh, 420px);border:1px dashed var(--lavender-200);
      border-radius:var(--radius-xl);background:var(--white);
      display:grid;place-items:center;padding:32px;text-align:center;}
    .dash-canvas p{margin:0;font-size:13px;color:var(--slate-300);}
    .stat-card{display:flex;flex-direction:column;gap:8px;}
    .stat-label{font-size:13px;color:var(--slate-500);font-weight:600;}
    .stat-value{font-size:32px;font-weight:700;letter-spacing:-0.03em;color:var(--ink-600);}
    .stat-change{font-size:12px;font-weight:600;color:var(--teal-500);}
    .stat-change.down{color:var(--red-500);}
    .stat-icon{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:var(--lavender-75);color:var(--purple-500);margin-bottom:8px;}

    .activity-row{display:flex;align-items:flex-start;gap:14px;padding:14px 0;border-bottom:1px solid var(--lavender-150);}
    .activity-row:last-child{border-bottom:0;padding-bottom:0;}
    .activity-dot{width:8px;height:8px;border-radius:50%;margin-top:7px;flex:0 0 8px;}
    .activity-body{flex:1;}
    .activity-title{font-size:14px;font-weight:600;color:var(--ink-600);margin-bottom:2px;}
    .activity-meta{font-size:12px;color:var(--slate-300);}
    .activity-time{font-size:12px;color:var(--slate-300);white-space:nowrap;}

    .appt-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--lavender-150);}
    .appt-row:last-child{border-bottom:0;}
    .appt-patient{display:flex;align-items:center;gap:12px;}
    .appt-avatar{width:36px;height:36px;border-radius:10px;background:var(--lavender-75);display:grid;place-items:center;font-weight:700;font-size:14px;color:var(--purple-500);}
    .appt-name{font-size:14px;font-weight:600;color:var(--ink-600);}
    .appt-reason{font-size:12px;color:var(--slate-500);}
    .appt-time{font-size:13px;font-weight:600;color:var(--slate-600);background:var(--lavender-75);padding:6px 12px;border-radius:var(--radius-full);}

    .badge{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:var(--radius-full);font-size:11.5px;font-weight:600;}
    .badge-info{background:color-mix(in srgb, var(--blue-500) 10%, transparent);color:var(--blue-500);}
    .badge-success{background:color-mix(in srgb, var(--teal-500) 10%, transparent);color:var(--teal-500);}
    .badge-warning{background:color-mix(in srgb, var(--amber-500) 10%, transparent);color:var(--amber-500);}


    .crumb-link{display:inline-flex;align-items:center;gap:6px;margin-bottom:10px;color:var(--purple-500);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;}
    .layout-shell{display:grid;grid-template-columns:minmax(0, 1fr) 260px;gap:20px;align-items:start;}
    .layout-shell > *{min-width:0;}
    .floor-card{padding:18px;overflow:hidden;}
    .floor-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap;}
    .floor-toolbar h2{margin:0;font-size:16px;}
    .floor-toolbar p{margin:4px 0 0;color:var(--slate-500);font-size:13px;}
    .floor-tabs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px;}
    .floor-chip{height:34px;padding:0 8px 0 14px;border-radius:var(--radius-full);border:1px solid var(--lavender-200);background:var(--white);color:var(--slate-600);font:inherit;font-weight:600;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:background .15s,color .15s,border-color .15s;}
    .floor-chip:hover{background:var(--lavender-50);}
    .floor-chip:focus-visible{outline:2px solid color-mix(in srgb, var(--purple-500) 40%, transparent);outline-offset:2px;}
    .floor-chip.active{background:var(--ink-600);color:var(--white);border-color:var(--ink-600);}
    .floor-count{min-width:18px;height:18px;padding:0 5px;border-radius:var(--radius-full);background:color-mix(in srgb, currentColor 14%, transparent);font-size:11px;font-weight:700;display:inline-grid;place-items:center;}
    .floor-del{width:20px;height:20px;border:0;border-radius:50%;background:transparent;color:inherit;font-size:14px;font-weight:800;line-height:1;cursor:pointer;display:grid;place-items:center;opacity:.75;padding:0;}
    .floor-del:hover{opacity:1;background:color-mix(in srgb, currentColor 20%, transparent);}
    .add-floor-chip{height:34px;padding:0 14px;border-radius:var(--radius-full);border:1px dashed var(--slate-300);background:transparent;color:var(--purple-500);font:inherit;font-weight:700;font-size:13px;cursor:pointer;transition:background .15s;}
    .add-floor-chip:hover{background:var(--lavender-50);}
    .canvas-wrap{border:1px solid var(--lavender-200);border-radius:var(--radius-xl);background:linear-gradient(135deg,#fbfbff,#f4f6ff);padding:14px;}
    .floor-canvas{position:relative;min-height:520px;border:2px dashed #d8d7e7;border-radius:var(--radius-md);background:#fff;overflow:visible;touch-action:none;}
    .floor-canvas::before{content:"Drag blocks to arrange the floor";position:absolute;inset:14px auto auto 16px;color:var(--slate-300);font-size:12px;font-weight:600;pointer-events:none;}
    .layout-block{position:absolute;min-width:120px;min-height:72px;border:2px solid var(--block-border);border-radius:14px;background:var(--block-bg);box-shadow:0 8px 18px rgba(24,21,37,.08);padding:34px 12px 12px;cursor:grab;user-select:none;display:flex;flex-direction:column;justify-content:space-between;}
    .layout-block:active,.layout-block.dragging{cursor:grabbing;box-shadow:0 18px 34px rgba(24,21,37,.18);z-index:20;}
    .layout-block strong{font-size:14px;color:var(--ink-600);line-height:1.15;}
    .layout-block span{font-size:11px;color:var(--slate-500);font-weight:600;}
    .layout-block small{font-size:10px;color:var(--slate-300);font-weight:700;text-transform:uppercase;letter-spacing:.06em;}
    .block-actions{position:absolute;top:8px;right:8px;display:flex;gap:6px;z-index:2;}
    .block-action{width:22px;height:22px;border:1px solid color-mix(in srgb, var(--block-border) 45%, white);border-radius:7px;background:rgba(255,255,255,.88);color:var(--ink-600);display:grid;place-items:center;cursor:pointer;font-size:12px;font-weight:800;line-height:1;box-shadow:0 4px 10px rgba(24,21,37,.08);}
    .block-action:hover{background:var(--white);border-color:var(--block-border);}
    .block-action.delete{color:var(--red-500);}
    .edit-popup{position:fixed;inset:0;background:rgba(3,0,20,.32);display:none;align-items:center;justify-content:center;z-index:200;padding:20px;}
    .edit-popup.open{display:flex;}
    .edit-card{width:min(420px,100%);background:var(--white);border-radius:var(--radius-xl);box-shadow:var(--shadow-elevated);padding:20px;}
    .edit-card h2{margin:0 0 14px;font-size:18px;color:var(--ink-600);}
    .edit-field{display:grid;gap:6px;margin-bottom:12px;}
    .edit-field label{font-size:12px;font-weight:700;color:var(--slate-500);}
    .edit-field input{height:42px;border:1px solid var(--lavender-200);border-radius:var(--radius-sm);padding:0 12px;font:inherit;color:var(--ink-600);}
    .edit-field input:focus{outline:2px solid color-mix(in srgb, var(--purple-500) 24%, transparent);border-color:var(--purple-500);}
    .edit-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px;}
    .block-ot{--block-bg:#f3efff;--block-border:#6844ed;}
    .block-sterile{--block-bg:#eaf6ff;--block-border:#4a8fe8;}
    .block-clean{--block-bg:#eafaf5;--block-border:#09b6a2;}
    .block-recovery{--block-bg:#edf7ff;--block-border:#3468f0;}
    .block-support{--block-bg:#fff7e8;--block-border:#f5a623;}
    .block-dirty{--block-bg:#fff0f2;--block-border:#e5484d;}
    .palette-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;}
    .palette-head h2{margin:0;}
    .add-block-btn{height:30px;padding:0 12px;border-radius:var(--radius-full);border:1px solid var(--lavender-200);background:var(--white);color:var(--purple-500);font:inherit;font-weight:700;font-size:12px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:background .15s;}
    .add-block-btn:hover{background:var(--lavender-50);}
    .palette-list{display:grid;gap:10px;}
    .palette-item{position:relative;display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--lavender-200);border-radius:var(--radius-sm);background:var(--white);cursor:grab;user-select:none;}
    .palette-item:active{cursor:grabbing;}
    .palette-swatch{flex:0 0 18px;width:18px;height:18px;border-radius:6px;background:var(--swatch-bg);border:2px solid var(--swatch-border);}
    .palette-text{display:flex;flex-direction:column;gap:1px;min-width:0;}
    .palette-item strong{font-size:13px;}
    .palette-item span{font-size:11px;color:var(--slate-500);}
    .palette-actions{margin-left:auto;display:flex;gap:4px;opacity:0;transition:opacity .12s;}
    .palette-item:hover .palette-actions,.palette-item:focus-within .palette-actions{opacity:1;}
    .palette-action{width:24px;height:24px;border:1px solid var(--lavender-200);border-radius:7px;background:var(--white);color:var(--slate-600);display:grid;place-items:center;cursor:pointer;font-size:12px;font-weight:800;line-height:1;transition:background .15s,border-color .15s;}
    .palette-action:hover{background:var(--lavender-50);}
    .palette-action.delete{color:var(--red-500);}
    .palette-action:disabled{opacity:.3;cursor:not-allowed;}
    .in-use-pill{display:inline-flex;align-items:center;height:18px;padding:0 7px;border-radius:var(--radius-full);font-size:10px;font-weight:700;background:var(--lavender-75);color:var(--slate-500);white-space:nowrap;}
    .swatch-picker{display:flex;gap:8px;flex-wrap:wrap;}
    .swatch-picker button{width:30px;height:30px;border-radius:8px;border:2px solid transparent;cursor:pointer;padding:0;background:var(--sw-bg);box-shadow:inset 0 0 0 2px var(--sw-border);}
    .swatch-picker button.selected{border-color:var(--ink-600);}
    .hint-card{margin-top:20px;}
    .hint-list{margin:0;padding-left:18px;color:var(--slate-500);font-size:13px;line-height:1.7;}

    /* Footer */
    .footer{
      position:fixed;inset:auto 0 0 var(--sidebar-w);height:var(--footer-h);background:var(--white);border-top:1px solid var(--lavender-200);
      display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;color:var(--slate-500);margin-right:var(--rail-w);
    }
    .footer-links{display:flex;gap:18px;}
    .footer-links a{color:var(--slate-500);text-decoration:none;}
    .footer-links a:hover{color:var(--ink-600);}

    /* Responsive */
    @media (max-width:1400px){
      .grid-4{grid-template-columns:repeat(2, minmax(0,1fr));}
      .grid-3{grid-template-columns:repeat(2, minmax(0,1fr));}
    }
    /* Right rail (pinned buildings) stays visible at every width — content keeps
       its right margin so nothing hides under the rail. */
    @media (max-width:1024px){
      /* Left menu becomes an icon-only rail (still visible); labels show as
         hover tooltips. */
      .sidebar{width:var(--sidebar-collapsed);}
      .main,.footer{margin-left:var(--sidebar-collapsed);}
      .footer{left:var(--sidebar-collapsed);}
      .sidebar-title{display:none;}
      .nav-list{padding:0 8px;}
      .nav-item{justify-content:center;gap:0;}
      .nav-item .nav-label,.nav-item .expander,.submenu{display:none;}
      /* Icon rail: an open submenu flies out beside its icon instead of stacking
         under it — otherwise Settings subpages would be unreachable on small
         screens, since those pages carry no in-page tabs. Fixed, not absolute:
         .nav-list scrolls, and an absolute flyout would be clipped by it.
         `top` is set from the parent icon's position in chrome.js. */
      .nav-parent.open + .submenu{
        display:block;position:fixed;left:calc(var(--sidebar-collapsed) + 8px);min-width:172px;
        margin:0;padding:6px;background:var(--white);border:1px solid var(--lavender-200);
        border-radius:var(--radius-md);box-shadow:0 12px 30px rgba(3,0,20,.18);z-index:140;}
      .nav-parent.open + .submenu .submenu-item{padding:10px 14px;padding-left:14px;white-space:nowrap;}
      .chat-entry{justify-content:center;gap:0;position:relative;}
      .chat-entry .nav-label,.chat-entry .badge{display:none;}
      .nav-item[data-label]::after,.chat-entry[data-label]::after{
        content:attr(data-label);position:absolute;left:calc(100% + 10px);top:50%;
        transform:translateY(-50%) translateX(-4px);white-space:nowrap;background:var(--ink-600);
        color:#fff;font-size:12px;font-weight:600;padding:6px 9px;border-radius:8px;
        box-shadow:0 10px 24px rgba(3,0,20,.22);opacity:0;pointer-events:none;
        transition:opacity .15s,transform .15s;z-index:130;}
      .nav-item:hover::after,.chat-entry:hover::after,.nav-item:focus-visible::after{
        opacity:1;transform:translateY(-50%) translateX(0);}
      .global-search{width:220px;}
    }

    /* ---- Collapsible panels: slide the left menu / right rail off-screen ---- */
    .sidebar,.rail{transition:transform .22s ease, width .22s ease;}
    .main,.footer{transition:margin .22s ease, left .22s ease;}
    body.nav-off .sidebar{transform:translateX(-110%);}
    body.nav-off .main{margin-left:0;}
    body.nav-off .footer{margin-left:0;left:0;}
    body.rail-off .rail{transform:translateX(110%);}
    body.rail-off .main{margin-right:0;}
    body.rail-off .footer{margin-right:0;}
    .panel-tab{position:fixed;z-index:95;display:none;align-items:center;justify-content:center;
      width:22px;height:54px;border:1px solid var(--lavender-200);background:var(--white);
      color:var(--slate-600);cursor:pointer;font-size:15px;line-height:1;box-shadow:0 8px 20px rgba(3,0,20,.14);}
    .panel-tab:hover{background:var(--lavender-50);color:var(--ink-600);}
    .panel-tab.nav-tab{left:0;top:calc(var(--topbar-h) + 16px);border-left:0;border-radius:0 10px 10px 0;}
    .panel-tab.rail-tab{right:0;top:calc(var(--topbar-h) + 16px);border-right:0;border-radius:10px 0 0 10px;}
    body.nav-off .panel-tab.nav-tab{display:flex;}
    body.rail-off .panel-tab.rail-tab{display:flex;}
    .rail-collapse{position:fixed;top:calc(var(--topbar-h) + 8px);right:11px;z-index:95;width:26px;height:22px;
      border:0;border-radius:6px;background:color-mix(in srgb,var(--white) 18%,transparent);color:#fff;
      cursor:pointer;display:grid;place-items:center;font-size:13px;line-height:1;}
    .rail-collapse:hover{background:color-mix(in srgb,var(--white) 30%,transparent);}
    body.rail-off .rail-collapse{display:none;}
    @media (max-width:768px){
      .topbar{padding:0 14px;gap:10px;}
      /* Icon-only action buttons stay inline on one row (they are compact now);
         the row scrolls only if the screen is genuinely too narrow. */
      .topbar-actions{flex:0 1 auto;min-width:0;overflow-x:auto;gap:6px;scrollbar-width:none;}
      .topbar-actions::-webkit-scrollbar{display:none;}
      .topbar-actions .chip-btn{flex:0 0 auto;}
      .wordmark{display:none;}
      .user-name{display:none;}
      .view-toggle{display:none;}
      .global-search{display:none;}
      .grid-4,.grid-3,.grid-2{grid-template-columns:1fr;}
      /* .loc-grid base rule is defined later in the file, so double the class to
         win the cascade at equal specificity. */
      .loc-grid.loc-grid{grid-template-columns:1fr;}
      .loc-card{min-width:0;}
      .loc-card-actions{flex-wrap:wrap;}
      .page-header{flex-direction:column;align-items:flex-start;}
      .page-actions{flex-wrap:wrap;}
      .layout-shell{grid-template-columns:1fr;}
      .floor-canvas{min-height:620px;}
      .dash-canvas{min-height:220px;padding:24px 16px;}
      .footer{left:var(--sidebar-collapsed);height:auto;flex-wrap:wrap;justify-content:center;gap:4px 16px;padding:12px 16px;text-align:center;line-height:1.4;}
      .main{padding:20px 14px 104px;}
    }

    /* Only on very narrow phones do the icon action buttons drop to their own
       full-width row (there's not enough room to keep them inline). */
    @media (max-width:480px){
      :root{--topbar-h:116px;}
      .topbar{flex-wrap:wrap;height:var(--topbar-h);align-content:center;}
      .topbar-actions{order:10;flex:1 0 100%;}
    }

/* ---- Right-rail location switcher (shared) ---- */
.rail-sep{width:24px;height:1px;background:color-mix(in srgb, var(--white) 34%, transparent);margin:4px 0;flex:0 0 auto;}
.loc-btn{text-decoration:none;background:color-mix(in srgb, var(--white) 12%, transparent);}
.loc-btn .loc-initial{font-size:13px;font-weight:800;line-height:1;}
.loc-btn.active{background:var(--white);color:var(--purple-500);opacity:1;}
.loc-btn.active:hover{background:var(--white);}

/* ---- Locations screen ---- */
.loc-intro{margin:0 0 20px;}
.loc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;}
.loc-card{position:relative;display:flex;flex-direction:column;gap:8px;background:var(--white);border:1px solid var(--lavender-200);border-radius:var(--radius-xl);padding:18px;box-shadow:0 1px 2px rgba(0,0,0,0.04);}
.loc-card .loc-badge{position:absolute;top:16px;right:16px;}
.loc-card-head{display:flex;align-items:center;gap:12px;}
.loc-avatar{width:40px;height:40px;border-radius:11px;background:linear-gradient(150deg,#8163F2,#5A38D6);display:grid;place-items:center;color:var(--white);font-weight:800;font-size:16px;flex:0 0 40px;}
.loc-name{font-size:16px;font-weight:700;color:var(--ink-600);}
.loc-address{font-size:13px;color:var(--slate-500);line-height:1.5;min-height:38px;}
.loc-card-actions{display:flex;align-items:center;gap:8px;margin-top:6px;padding-top:12px;border-top:1px solid var(--lavender-150);}
.loc-open{margin-right:auto;display:inline-flex;align-items:center;gap:6px;color:var(--purple-500);font-weight:700;font-size:13px;text-decoration:none;}
.loc-open:hover{text-decoration:underline;}
.loc-icon-btn{width:32px;height:32px;border:1px solid var(--lavender-200);border-radius:9px;background:var(--white);color:var(--slate-600);display:grid;place-items:center;cursor:pointer;font-size:13px;font-weight:800;line-height:1;transition:background .15s,border-color .15s;}
.loc-icon-btn:hover{background:var(--lavender-50);}
.loc-icon-btn.delete{color:var(--red-500);}
.loc-card.active-loc{border-color:var(--purple-500);box-shadow:0 0 0 1px var(--purple-500);}
.loc-empty{border:2px dashed var(--lavender-200);border-radius:var(--radius-xl);padding:40px;text-align:center;color:var(--slate-500);font-size:14px;}
.edit-field textarea{min-height:76px;border:1px solid var(--lavender-200);border-radius:var(--radius-sm);padding:10px 12px;font:inherit;color:var(--ink-600);resize:vertical;}
.edit-field textarea:focus{outline:2px solid color-mix(in srgb, var(--purple-500) 24%, transparent);border-color:var(--purple-500);}

/* ---- Building cards / pins (shared with locations) ---- */
.loc-meta{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--slate-500);}
.count-pill{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:var(--radius-full);background:var(--lavender-75);color:var(--slate-600);font-size:11px;font-weight:700;}
.pin-btn{width:32px;height:32px;border:1px solid var(--lavender-200);border-radius:9px;background:var(--white);color:var(--slate-500);display:grid;place-items:center;cursor:pointer;transition:background .15s,color .15s,border-color .15s;}
.pin-btn:hover{background:var(--lavender-50);}
.pin-btn.pinned{background:color-mix(in srgb,var(--purple-500) 12%,transparent);color:var(--purple-500);border-color:color-mix(in srgb,var(--purple-500) 40%,transparent);}
.pin-btn .icon{width:16px;height:16px;}
.loc-icon-btn[disabled]{opacity:.35;cursor:not-allowed;}
.area-type{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:6px;font-size:11px;line-height:1;}
.area-type.floor{background:color-mix(in srgb,var(--blue-500) 12%,transparent);color:var(--blue-500);}
.area-type.lawn{background:color-mix(in srgb,var(--teal-500) 14%,transparent);color:var(--teal-500);}
.floor-empty{display:grid;place-items:center;min-height:300px;color:var(--slate-300);font-size:14px;font-weight:600;text-align:center;}

/* ---- Top-nav location switcher ---- */
.loc-switch{position:relative;}
.loc-switch-btn{height:40px;border-radius:var(--radius-full);background:var(--lavender-75);border:1px solid var(--lavender-200);padding:0 12px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;font:inherit;font-weight:700;font-size:13px;color:var(--ink-600);}
.loc-switch-btn:hover{background:var(--lavender-100);}
.loc-switch-btn .icon{width:16px;height:16px;color:var(--purple-500);}
.loc-switch-caret{color:var(--slate-500);font-size:10px;}
.loc-switch-name{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.loc-switch-menu{position:absolute;top:48px;left:0;min-width:250px;background:var(--white);border:1px solid var(--lavender-200);border-radius:var(--radius-md);box-shadow:var(--shadow-soft);padding:6px;z-index:120;}
.loc-switch-menu[hidden]{display:none;}
.loc-switch-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--radius-sm);cursor:pointer;color:var(--ink-600);font-size:13px;font-weight:600;text-decoration:none;}
.loc-switch-item:hover{background:var(--lavender-50);}
.loc-switch-item.active{background:color-mix(in srgb,var(--purple-500) 10%,transparent);color:var(--purple-500);}
.loc-switch-item .icon{width:16px;height:16px;color:var(--purple-500);flex:0 0 16px;}
.loc-switch-nm{display:block;}
.loc-switch-addr{display:block;font-size:11px;font-weight:500;color:var(--slate-500);}
.loc-switch-sep{height:1px;background:var(--lavender-200);margin:6px 4px;}
.loc-switch-manage{color:var(--purple-500);font-weight:700;}
@media (max-width:768px){ .loc-switch-name{max-width:96px;} }

/* ---- Empty area state (no floors/areas yet) ---- */
.floor-canvas.is-empty::before{display:none;}
.floor-canvas.is-empty::after{content:"No floors yet — add a floor or lawn above.";position:absolute;inset:0;display:grid;place-items:center;color:var(--slate-300);font-weight:600;font-size:14px;text-align:center;padding:20px;}

/* ---- Responsive floor stage: scale the fixed-px layout down to fit narrow screens ---- */
.floor-stage{position:relative;width:100%;overflow:hidden;}
.floor-canvas{transform-origin:top left;}