*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --bg:#0f0f0f; --surface:#1a1a1a; --surface2:#242424; --border:#2e2e2e;
      --text:#e5e5e5; --muted:#888; --accent:#f97316; --accent-h:#fb923c;
      --green:#10b981; --sidebar-w:240px;
    }
    body { font-family:'Inter',sans-serif; background:var(--bg); color:var(--text); min-height:100vh; display:flex; overflow:hidden; }

    /* SIDEBAR */
    .sidebar { width:var(--sidebar-w); background:var(--surface); border-right:1px solid var(--border); display:flex; flex-direction:column; height:100vh; position:fixed; left:0; top:0; z-index:100; }
    .sb-brand { padding:20px; border-bottom:1px solid var(--border); }
    .sb-brand .row { display:flex; align-items:center; gap:10px; margin-bottom:3px; }
    .sb-brand h1 { font-size:13px; font-weight:700; line-height:1.3; }
    .sb-brand p { font-size:11px; color:var(--muted); }
    .sb-nav { padding:14px 8px; flex:1; overflow-y:auto; }
    .nav-lbl { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); padding:0 12px; margin:12px 0 5px; }
    .nav-item { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:7px; cursor:pointer; font-size:13px; font-weight:500; color:var(--muted); transition:background .15s,color .15s; user-select:none; }
    .nav-item:hover { background:var(--surface2); color:var(--text); }
    .nav-item.active { background:rgba(249,115,22,.15); color:var(--accent); }
    .sb-foot { padding:14px 16px; border-top:1px solid var(--border); font-size:11px; color:var(--muted); }

    /* MAIN */
    .main { margin-left:var(--sidebar-w); flex:1; height:100vh; display:flex; flex-direction:column; overflow:hidden; }
    .topbar { height:56px; background:var(--surface); border-bottom:1px solid var(--border); display:flex; align-items:center; padding:0 24px; gap:14px; flex-shrink:0; }
    .topbar-title { font-size:14px; font-weight:600; }
    .topbar-sep { width:1px; height:18px; background:var(--border); }
    .topbar-sub { font-size:12px; color:var(--muted); }
    #content { flex:1; overflow-y:auto; padding:24px 28px 40px; }
    #content.gen-mode { padding:0; overflow:hidden; }

    /* SCROLLBAR */
    ::-webkit-scrollbar{width:5px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px} ::-webkit-scrollbar-thumb:hover{background:#444}

    /* CARDS */
    .card { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:18px 20px; }
    .card-title { font-size:13px; font-weight:600; margin-bottom:14px; display:flex; align-items:center; gap:8px; }

    /* FORM */
    .fg { display:flex; flex-direction:column; gap:5px; }
    .fgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px; }
    label { font-size:11px; font-weight:500; color:var(--muted); }
    input[type=text],input[type=url],input[type=number],select,textarea {
      background:var(--surface2); border:1px solid var(--border); border-radius:6px;
      padding:7px 10px; color:var(--text); font-family:'Inter',sans-serif; font-size:13px;
      width:100%; transition:border-color .15s; outline:none;
    }
    input:focus,select:focus,textarea:focus { border-color:var(--accent); }
    textarea { resize:vertical; min-height:72px; }
    .cf { display:flex; align-items:center; gap:8px; background:var(--surface2); border:1px solid var(--border); border-radius:6px; padding:5px 10px; }
    .cf input[type=color] { width:26px; height:26px; border:none; border-radius:4px; padding:0; cursor:pointer; background:none; }
    .cf input[type=text] { border:none; background:transparent; padding:0; font-size:12px; font-family:'Consolas',monospace; }
    .input-unit { display:flex; background:var(--surface2); border:1px solid var(--border); border-radius:6px; overflow:hidden; }
    .input-unit input { border:none; background:transparent; }
    .input-unit span { padding:7px 9px; font-size:11px; color:var(--muted); background:var(--surface); border-left:1px solid var(--border); }

    /* BUTTONS */
    .btn { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:6px; font-size:13px; font-weight:500; font-family:'Inter',sans-serif; cursor:pointer; border:none; transition:all .15s; }
    .btn-primary { background:var(--accent); color:#fff; }
    .btn-primary:hover { background:var(--accent-h); }
    .btn-ghost { background:var(--surface2); color:var(--text); border:1px solid var(--border); }
    .btn-ghost:hover { background:#2e2e2e; }
    .btn-sm { padding:5px 12px; font-size:12px; }

    /* BADGES */
    .badge { display:inline-flex; align-items:center; gap:3px; padding:2px 8px; border-radius:20px; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; }
    .badge-html { background:rgba(249,115,22,.18); color:#fdba74; }
    .badge-native { background:rgba(16,185,129,.15); color:#6ee7b7; }

    /* SECTION GRID (dashboard) */
    .sec-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:16px; }
    .sec-card { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:18px; cursor:pointer; transition:border-color .2s,transform .2s; }
    .sec-card:hover { border-color:var(--accent); transform:translateY(-2px); }
    .sec-card.dim { opacity:.55; cursor:default; }
    .sec-card.dim:hover { transform:none; border-color:var(--border); }
    .sec-icon { font-size:28px; margin-bottom:10px; }
    .sec-name { font-size:14px; font-weight:600; margin-bottom:5px; }
    .sec-desc { font-size:12px; color:var(--muted); line-height:1.55; margin-bottom:12px; }
    .sec-foot { display:flex; align-items:center; justify-content:space-between; }
    .sec-why { font-size:11px; color:#555; margin-top:10px; line-height:1.5; }

    /* GENERATOR */
    .gen-wrap { display:grid; grid-template-columns:360px 1fr; height:calc(100vh - 56px); overflow:hidden; }
    .gen-panel { overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:16px; }
    .gen-panel:first-child { border-right:1px solid var(--border); }

    /* TABS */
    .tabs { display:flex; gap:4px; background:var(--surface2); padding:4px; border-radius:8px; }
    .tab { flex:1; padding:7px; border-radius:5px; font-size:12px; font-weight:500; cursor:pointer; text-align:center; color:var(--muted); transition:all .15s; border:none; background:transparent; font-family:'Inter',sans-serif; }
    .tab.active { background:var(--accent); color:#fff; }
    .tab:hover:not(.active) { background:var(--surface); color:var(--text); }

    /* CODE BLOCK */
    .code-wrap { background:#0d1117; border:1px solid var(--border); border-radius:8px; }
    .code-head { display:flex; align-items:center; justify-content:space-between; padding:9px 14px; border-bottom:1px solid var(--border); }
    .code-lbl { font-size:11px; font-weight:500; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
    .code-wrap pre { padding:14px; overflow-x:auto; font-size:11.5px; line-height:1.6; color:#c9d1d9; font-family:'Consolas','Monaco',monospace; max-height:360px; overflow-y:auto; white-space:pre-wrap; word-break:break-all; }

    /* PREVIEW */
    .prev-wrap { background:var(--surface); border:1px solid var(--border); border-radius:8px; overflow:hidden; }
    .prev-head { display:flex; align-items:center; justify-content:space-between; padding:9px 14px; border-bottom:1px solid var(--border); }
    .prev-dots { display:flex; gap:5px; }
    .prev-dots span { width:10px; height:10px; border-radius:50%; }
    iframe.prev { width:100%; border:none; display:block; min-height:220px; }

    /* TOAST */
    .toast { position:fixed; bottom:22px; right:22px; background:var(--green); color:#fff; padding:11px 18px; border-radius:8px; font-size:13px; font-weight:500; display:flex; align-items:center; gap:8px; z-index:9999; transform:translateY(80px); opacity:0; transition:all .3s; pointer-events:none; }
    .toast.show { transform:translateY(0); opacity:1; }

    /* REPEATER */
    .rep-item { background:var(--surface2); border:1px solid var(--border); border-radius:8px; padding:12px; }
    .rep-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
    .rep-lbl { font-size:11px; font-weight:600; color:var(--muted); }
    .btn-rm { background:none; border:none; color:#ef4444; cursor:pointer; font-size:15px; padding:1px 5px; border-radius:4px; }
    .btn-rm:hover { background:rgba(239,68,68,.1); }

    /* INFO BOX */
    .info { background:rgba(249,115,22,.08); border:1px solid rgba(249,115,22,.25); border-radius:8px; padding:11px 13px; font-size:12px; color:#fdba74; line-height:1.6; }
    .info strong { color:#fb923c; }

    /* PATTERN LIBRARY */
    .pat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
    .pat-card { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:20px; display:flex; flex-direction:column; gap:12px; transition:border-color .2s,transform .2s; }
    .pat-card:hover { border-color:var(--accent); transform:translateY(-2px); }
    .pat-top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
    .pat-name { font-size:14px; font-weight:600; line-height:1.3; }
    .pat-badge { display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:20px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; white-space:nowrap; flex-shrink:0; }
    .pat-badge-html   { background:rgba(249,115,22,.18); color:#fdba74; }
    .pat-badge-native { background:rgba(34,197,94,.15);  color:#86efac; }
    .pat-desc { font-size:12px; color:var(--muted); line-height:1.55; flex:1; }
    .pat-btn { align-self:flex-start; padding:6px 14px; background:var(--surface2); border:1px solid var(--border); border-radius:6px; font-size:12px; font-weight:500; font-family:'Inter',sans-serif; color:var(--text); cursor:pointer; transition:background .15s,border-color .15s; }
    .pat-btn:hover { background:rgba(249,115,22,.15); border-color:var(--accent); color:var(--accent); }

    /* DRAWER */
    .drawer-overlay { position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:200; opacity:0; pointer-events:none; transition:opacity .3s; }
    .drawer-overlay.open { opacity:1; pointer-events:all; }
    .drawer { position:fixed; top:0; right:0; width:480px; height:100vh; background:#1a1a1a; border-left:2px solid var(--accent); z-index:201; display:flex; flex-direction:column; transform:translateX(100%); transition:transform .3s cubic-bezier(.4,0,.2,1); box-shadow:-8px 0 40px rgba(0,0,0,.5); }
    .drawer.open { transform:translateX(0); }
    .drawer-head { padding:18px 20px; border-bottom:1px solid var(--border); display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-shrink:0; }
    .drawer-head-left { display:flex; flex-direction:column; gap:6px; }
    .drawer-title { font-size:15px; font-weight:700; }
    .drawer-close { background:none; border:none; color:var(--muted); cursor:pointer; font-size:20px; line-height:1; padding:2px 4px; border-radius:4px; transition:color .15s,background .15s; }
    .drawer-close:hover { color:var(--text); background:var(--surface2); }
    .drawer-body { flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:18px; }
    .drawer-section { display:flex; flex-direction:column; gap:10px; }
    .drawer-section-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); padding-bottom:8px; border-bottom:1px solid var(--border); }
    .drawer-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
    .drawer-foot { padding:16px 20px; border-top:1px solid var(--border); flex-shrink:0; display:flex; flex-direction:column; gap:10px; }
    .drawer-cf { display:flex; align-items:center; gap:8px; background:var(--surface2); border:1px solid var(--border); border-radius:6px; padding:5px 10px; }
    .drawer-cf input[type=color] { width:24px; height:24px; border:none; border-radius:4px; padding:0; cursor:pointer; background:none; flex-shrink:0; }
    .drawer-cf input[type=text] { border:none; background:transparent; padding:0; font-size:12px; font-family:'Consolas',monospace; color:var(--text); width:100%; outline:none; }
    .prompt-out { background:#0d1117; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
    .prompt-out textarea { width:100%; background:transparent; border:none; padding:12px 14px; font-size:11.5px; font-family:'Consolas','Monaco',monospace; color:#c9d1d9; line-height:1.6; resize:none; outline:none; min-height:160px; }
    .repeater-cards { display:flex; flex-direction:column; gap:8px; }
    .rc-item { background:var(--surface2); border:1px solid var(--border); border-radius:7px; padding:10px; }
    .rc-item .rc-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; font-size:11px; font-weight:600; color:var(--muted); }
    .rc-item .rc-grid { display:grid; grid-template-columns:56px 1fr; gap:8px; }
    .faq-item { background:var(--surface2); border:1px solid var(--border); border-radius:7px; padding:10px; display:flex; flex-direction:column; gap:7px; }
    .faq-item label { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
    /* GEN TAB BAR */
    .gen-tab-btn { background:transparent; border:none; border-bottom:2px solid transparent; padding:16px 16px 14px; font-size:13px; font-weight:500; color:var(--muted); cursor:pointer; font-family:'Inter',sans-serif; white-space:nowrap; transition:color .15s,border-color .15s; }
    .gen-tab-btn:hover { color:var(--text); }
    .gen-tab-btn.active { color:var(--accent); border-bottom-color:var(--accent); }
    /* PB PAGE ROWS */
    .pb-page-row input[type=text]:focus { outline:none; }
    input[type=date] { background:var(--surface2); border:1px solid var(--border); border-radius:6px; padding:7px 10px; color:var(--text); font-family:'Inter',sans-serif; font-size:13px; width:100%; outline:none; }
    input[type=date]:focus { border-color:var(--accent); }
    input[type=url] { background:var(--surface2); border:1px solid var(--border); border-radius:6px; padding:7px 10px; color:var(--text); font-family:'Inter',sans-serif; font-size:13px; width:100%; outline:none; }
    input[type=url]:focus { border-color:var(--accent); }
    .prj-chip { display:inline-block; font-size:10px; background:rgba(249,115,22,.15); color:#fdba74; padding:2px 7px; border-radius:10px; margin-left:6px; font-weight:600; }

    /* PROCESSO */
    .proc-progress { height:5px; background:var(--border); border-radius:3px; overflow:hidden; margin-bottom:12px; }
    .proc-progress-bar { height:100%; background:linear-gradient(90deg,var(--accent),#fb923c); border-radius:3px; transition:width .5s cubic-bezier(.4,0,.2,1); }
    .proc-step { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:16px 18px; display:flex; gap:14px; transition:border-color .2s,background .2s; }
    .proc-step:hover { border-color:#3a3a3a; }
    .proc-step.ps-active { border-color:#f59e0b; background:rgba(245,158,11,.03); }
    .proc-step.ps-done { border-color:#10b981; background:rgba(16,185,129,.03); }
    .proc-num { width:26px; height:26px; border-radius:50%; background:var(--surface2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; color:var(--muted); flex-shrink:0; margin-top:3px; }
    .proc-step.ps-active .proc-num { background:rgba(245,158,11,.18); border-color:#f59e0b; color:#fbbf24; }
    .proc-step.ps-done   .proc-num { background:rgba(16,185,129,.18); border-color:#10b981; color:#6ee7b7; }
    .proc-body { flex:1; min-width:0; }
    .proc-title { font-size:13px; font-weight:600; margin-bottom:4px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
    .proc-desc { font-size:12px; color:var(--muted); line-height:1.55; margin-bottom:10px; }
    .proc-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
    .proc-status-btn { display:inline-flex; align-items:center; gap:5px; padding:4px 11px; border-radius:20px; font-size:11px; font-weight:600; border:1px solid; cursor:pointer; background:transparent; font-family:'Inter',sans-serif; transition:all .15s; }
    .proc-notes-area { margin-top:10px; display:none; }
    .proc-notes-area.open { display:block; }
    .proc-notes-area textarea { width:100%; background:var(--surface2); border:1px solid var(--border); border-radius:6px; padding:8px 10px; color:var(--text); font-family:'Inter',sans-serif; font-size:12px; resize:vertical; min-height:64px; outline:none; transition:border-color .15s; }
    .proc-notes-area textarea:focus { border-color:var(--accent); }
    .proc-cont-check { display:flex; flex-direction:column; gap:7px; margin-top:10px; background:var(--surface2); border:1px solid var(--border); border-radius:8px; padding:12px; }
    .proc-cont-check label { display:flex; align-items:center; gap:8px; cursor:pointer; font-size:12px; color:var(--muted); user-select:none; }
    .proc-cont-check label.done-item { color:var(--text); text-decoration:line-through; opacity:.55; }
    .tb-proc { display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:10px; background:rgba(249,115,22,.12); color:#fdba74; font-size:11px; font-weight:600; margin-left:auto; }

    /* ── HAMBURGER BUTTON (hidden on desktop) ── */
    .hamburger { display:none; flex-direction:column; justify-content:center; gap:5px; width:40px; height:40px; padding:8px; border:none; background:none; cursor:pointer; flex-shrink:0; border-radius:6px; transition:background .15s; }
    .hamburger:hover { background:var(--surface2); }
    .hamburger span { display:block; width:20px; height:2px; background:var(--text); border-radius:2px; transition:all .25s; }
    .hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
    .hamburger.open span:nth-child(2) { opacity:0; }
    .hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

    /* ── MOBILE SIDEBAR OVERLAY ── */
    .sb-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.65); z-index:99; opacity:0; pointer-events:none; transition:opacity .3s; }
    .sb-overlay.open { opacity:1; pointer-events:all; }

    /* ── RESPONSIVE ── */
    @media (max-width: 767px) {
      /* Show hamburger */
      .hamburger { display:flex; }
      .sb-overlay { display:block; }

      /* Sidebar becomes a slide-in drawer */
      .sidebar {
        transform: translateX(-100%);
        transition: transform .3s cubic-bezier(.4,0,.2,1);
        z-index: 100;
        width: min(var(--sidebar-w), 85vw);
      }
      .sidebar.open { transform: translateX(0); }

      /* Main fills full width */
      .main { margin-left: 0; }

      /* Topbar */
      .topbar { padding: 0 12px; gap: 10px; }
      .topbar-sep { display: none; }
      .topbar-sub { display: none; }
      #tb-client-badge { max-width: 110px; }

      /* Content padding */
      #content { padding: 16px 14px 40px; }

      /* Form grid: single column */
      .fgrid { grid-template-columns: 1fr; }
      .fg--full { grid-column: 1; }

      /* Section & pattern grids: single column */
      .sec-grid { grid-template-columns: 1fr; }
      .pat-grid  { grid-template-columns: 1fr; }

      /* Generator: stack panels vertically */
      .gen-wrap { grid-template-columns: 1fr; grid-template-rows: auto auto; height:auto; overflow:visible; }
      .gen-panel:first-child { border-right: none; border-bottom: 1px solid var(--border); }
      #content.gen-mode { overflow-y: auto; padding: 0; }
      /* gen-tab-body: flex row → flex column */
      #gen-tab-body { flex-direction: column !important; overflow: visible !important; height: auto !important; }
      #gen-tab-body .gen-panel { max-height: none; overflow-y: visible; }
      /* prompt builder wrap */
      #prompt-builder-wrap { padding: 16px 14px 40px !important; }

      /* Fatturazione KPI cards: wrap tightly */
      /* Already flex-wrap:wrap — ensure min-width is smaller */
      .fatt-kpi-wrap > div { min-width: calc(50% - 6px) !important; }

      /* Checklist Pre-Live: stack ring sotto la lista su mobile */
      #content > div[style*="grid-template-columns:1fr 240px"] { grid-template-columns: 1fr !important; }
      #content > div[style*="grid-template-columns:1fr 240px"] > div[style*="sticky"] { position:static !important; }

      /* Touch targets: min 44px */
      .btn       { min-height: 44px; }
      .btn-sm    { min-height: 36px; }
      .nav-item  { min-height: 44px; padding: 10px 12px; }
      .proc-status-btn { min-height: 36px; padding: 6px 14px; }
      .pat-btn   { min-height: 40px; }
      .tab       { min-height: 40px; }
      .gen-tab-btn { min-height: 44px; }
      .btn-rm    { min-height: 36px; min-width: 36px; }

      /* Drawer: full width on mobile */
      .drawer { width: 100%; border-left: none; border-top: 2px solid var(--accent); top: auto; bottom: 0; height: 92vh; border-radius: 16px 16px 0 0; }

      /* Processo step: simpler layout */
      .proc-step { gap: 10px; padding: 14px; }

      /* Reduce gap on small screens */
      .card { padding: 14px; }
    }

    @media (max-width: 400px) {
      .fatt-kpi-wrap > div { min-width: 100% !important; }
    }

    /* ── AUTH SCREEN ── */
    #auth-screen {
      position:fixed; inset:0; background:var(--bg); z-index:9000;
      display:flex; align-items:center; justify-content:center; padding:20px;
    }
    #auth-screen.hidden { display:none; }
    .auth-box {
      background:var(--surface); border:1px solid var(--border); border-radius:14px;
      padding:36px 32px; width:100%; max-width:400px;
      display:flex; flex-direction:column; gap:22px;
    }
    .auth-logo { text-align:center; }
    .auth-logo h1 { font-size:20px; font-weight:800; color:var(--text); }
    .auth-logo p  { font-size:12px; color:var(--muted); margin-top:4px; }
    .auth-tabs { display:flex; background:var(--surface2); border-radius:8px; padding:3px; gap:3px; }
    .auth-tab  { flex:1; padding:8px; border-radius:6px; border:none; background:transparent;
                 font-family:'Inter',sans-serif; font-size:13px; font-weight:500;
                 color:var(--muted); cursor:pointer; transition:all .15s; }
    .auth-tab.active { background:var(--accent); color:#fff; }
    .auth-fields { display:flex; flex-direction:column; gap:12px; }
    .auth-err { font-size:12px; color:#f87171; text-align:center; min-height:16px; }
    .auth-btn { width:100%; padding:11px; border-radius:8px; border:none;
                background:var(--accent); color:#fff; font-family:'Inter',sans-serif;
                font-size:14px; font-weight:600; cursor:pointer; transition:background .15s; }
    .auth-btn:hover { background:var(--accent-h); }
    .auth-btn:disabled { opacity:.5; cursor:not-allowed; }
    .auth-divider { text-align:center; font-size:11px; color:var(--muted); }

    /* ── SYNC INDICATOR ── */
    #sync-indicator {
      position:fixed; bottom:16px; left:50%; transform:translateX(-50%);
      background:var(--surface); border:1px solid var(--border); border-radius:20px;
      padding:6px 14px; font-size:11px; color:var(--muted);
      display:flex; align-items:center; gap:7px; z-index:8000;
      opacity:0; pointer-events:none; transition:opacity .3s;
    }
    #sync-indicator.show { opacity:1; }
    #sync-indicator.error { background:rgba(239,68,68,.1); border-color:rgba(239,68,68,.35); color:#fca5a5; }
    .sync-dot { width:7px; height:7px; border-radius:50%; background:var(--accent); animation:pulse 1s infinite; flex-shrink:0; }
    #sync-indicator.error .sync-dot { background:#ef4444; animation:none; }
    @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

    /* ── USER CHIP in sidebar footer ── */
    .sb-user { padding:10px 14px; border-top:1px solid var(--border);
               display:flex; align-items:center; gap:10px; }
    .sb-user-avatar { width:28px; height:28px; border-radius:50%;
                      background:rgba(249,115,22,.2); border:1px solid rgba(249,115,22,.4);
                      display:flex; align-items:center; justify-content:center;
                      font-size:12px; font-weight:700; color:var(--accent); flex-shrink:0; }
    .sb-user-email { font-size:11px; color:var(--muted); flex:1; min-width:0;
                     white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .sb-logout-btn { background:none; border:none; color:var(--muted); font-size:11px;
                     cursor:pointer; padding:3px 6px; border-radius:4px; white-space:nowrap;
                     font-family:'Inter',sans-serif; transition:color .15s; }
    .sb-logout-btn:hover { color:#f87171; }