/* ── THEMES ── */
    /* Padrão: claro/monocromático (preto & branco), estilo app SaaS minimalista */
    :root {
      --dark:      #f7f7f8; --dark-card:#ffffff; --dark-2:#f2f2f4; --dark-3:#e9e9ec;
      --white:     #16161a; --muted:#71717a; --dim:#c7c7cc;
      --border:    rgba(0,0,0,0.08); --border-2:rgba(0,0,0,0.14);
      --r:10px; --r-lg:16px; --ease:cubic-bezier(0.4,0,0.2,1); --font:'Inter',-apple-system,system-ui,sans-serif;
      --sidebar:220px; --sidebar-mini:76px; --green:#16a34a; --red:#dc2626; --blue:#2563eb; --yellow:#d97706;
      --shadow:0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.05);
      --accent:#18181b; --accent-2:#3f3f46; --accent-ink:#ffffff;
      --accent-soft:rgba(24,24,27,0.06); --accent-border:rgba(24,24,27,0.16);
      --accent-grad:linear-gradient(135deg,var(--accent),var(--accent-2));
      --ov-02:rgba(0,0,0,0.02); --ov-03:rgba(0,0,0,0.03); --ov-04:rgba(0,0,0,0.04); --ov-05:rgba(0,0,0,0.05);
      --ov-06:rgba(0,0,0,0.06); --ov-07:rgba(0,0,0,0.07); --ov-10:rgba(0,0,0,0.1); --ov-20:rgba(0,0,0,0.2);
      --nav-bg:var(--dark-card); --nav-text:var(--white); --nav-text-dim:var(--muted); --nav-border:var(--border);
      --nav-hover:var(--ov-04); --nav-active:var(--dark-2); --nav-surface:var(--dark-2); --nav-chip-ring:rgba(0,0,0,0.12);
    }
    /* Variante: escuro monocromático (mesmo padrão preto&branco do claro, invertido) */
    [data-theme="dark"] {
      --dark:#0a0a0b; --dark-card:#141415; --dark-2:#1c1c1e; --dark-3:#242426;
      --white:#f5f5f6; --muted:#8f8f95; --dim:#48484a;
      --border:rgba(255,255,255,0.08); --border-2:rgba(255,255,255,0.14);
      --green:#25d366; --red:#e05555; --blue:#4a9eff; --yellow:#f0b429;
      --shadow:0 4px 20px rgba(0,0,0,0.4);
      --accent:#f5f5f6; --accent-2:#c8c8cc; --accent-ink:#141415;
      --accent-soft:rgba(245,245,246,0.08); --accent-border:rgba(245,245,246,0.2);
      --accent-grad:linear-gradient(135deg,var(--accent),var(--accent-2));
      --ov-02:rgba(255,255,255,0.02); --ov-03:rgba(255,255,255,0.03); --ov-04:rgba(255,255,255,0.04); --ov-05:rgba(255,255,255,0.05);
      --ov-06:rgba(255,255,255,0.06); --ov-07:rgba(255,255,255,0.07); --ov-10:rgba(255,255,255,0.1); --ov-20:rgba(255,255,255,0.2);
      --nav-bg:var(--dark-card); --nav-text:var(--white); --nav-text-dim:var(--muted); --nav-border:var(--border);
      --nav-hover:var(--ov-04); --nav-active:var(--dark-2); --nav-surface:var(--dark-2); --nav-chip-ring:rgba(255,255,255,0.12);
    }
    *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
    html { font-size:16px; -webkit-font-smoothing:antialiased; overflow-x:hidden; max-width:100%; }
    body { background:var(--dark); color:var(--white); font-family:var(--font); display:flex; min-height:100vh; overflow-x:hidden; max-width:100%; }
    a { text-decoration:none; color:inherit; }
    ::-webkit-scrollbar { width:4px; height:4px; }
    ::-webkit-scrollbar-track { background:var(--dark); }
    ::-webkit-scrollbar-thumb { background:var(--dim); border-radius:4px; }

    /* ── LOGIN SCREEN ── */
    #login-screen {
      position:fixed; inset:0; background:var(--dark);
      display:flex; align-items:center; justify-content:center;
      z-index:9999; padding:20px;
    }
    #login-screen.hidden { display:none; }
    .login-card {
      background:var(--dark-card); border:1px solid var(--border);
      border-radius:var(--r-lg); padding:40px 36px; width:100%; max-width:360px; text-align:center;
    }
    .login-logo { font-size:11px; font-weight:800; letter-spacing:.22em; text-transform:uppercase; }
    .login-logo span { color:var(--muted); }
    .login-title { font-size:20px; font-weight:700; margin:8px 0 4px; }
    .login-sub { font-size:12px; color:var(--muted); margin-bottom:28px; }
    .login-err { font-size:12px; color:var(--red); min-height:20px; margin-bottom:10px; }
    .pass-field { position:relative; }
    .pass-field input { padding-right:38px!important; }
    .pass-eye-btn { position:absolute; right:9px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; color:var(--dim); padding:2px; display:flex; align-items:center; transition:color .15s; line-height:1; }
    .pass-eye-btn:hover { color:var(--muted); }
    .login-field { margin-bottom:12px; }
    .login-field input {
      width:100%; background:var(--dark-2); border:1px solid var(--border);
      border-radius:var(--r); padding:12px 16px; font-size:14px; color:var(--white);
      font-family:var(--font); outline:none; transition:border-color .18s;
    }
    .login-field input:focus { border-color:var(--accent-border); }
    [data-theme="light"] .login-field input { color:var(--white); }
    .login-btn {
      width:100%; padding:12px; font-size:12px; font-weight:700; letter-spacing:.1em;
      text-transform:uppercase; background:var(--accent-grad); color:var(--accent-ink);
      border:none; border-radius:var(--r); cursor:pointer; transition:all .18s; margin-top:4px;
      box-shadow:0 2px 14px rgba(0,0,0,0.16);
    }
    .login-btn:hover { opacity:.92; box-shadow:0 4px 18px rgba(0,0,0,0.22); }

    /* ── SIDEBAR ── */
    #sb-backdrop {
      display:none; position:fixed; inset:0; background:rgba(0,0,0,0.6);
      z-index:199; backdrop-filter:blur(2px);
    }
    #sb-backdrop.open { display:block; }
    .sidebar {
      width:var(--sidebar); min-height:100vh; background:var(--nav-bg); color:var(--nav-text);
      border-right:1px solid var(--nav-border); display:flex; flex-direction:column;
      position:fixed; top:0; left:0; z-index:200; transition:transform .3s var(--ease), width .3s var(--ease), background .18s var(--ease);
    }
    .sidebar.collapsed { width:var(--sidebar-mini); }
    .btn-sb-collapse { display:flex; flex-shrink:0; }
    @media(max-width:768px){ .btn-sb-collapse { display:none; } }


    .sidebar-brand { display:flex; align-items:center; gap:10px; padding:20px 20px 16px; border-bottom:1px solid var(--nav-border); }
    .sidebar-brand-logo { width:30px; height:30px; border-radius:8px; object-fit:contain; flex-shrink:0; }
    .sidebar-brand-ph { width:30px; height:30px; border-radius:8px; background:var(--accent-grad); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; box-shadow:inset 0 0 0 1px var(--nav-chip-ring); }
    .sidebar-brand-name { font-size:14px; font-weight:800; letter-spacing:-.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .sidebar.collapsed .sidebar-brand { justify-content:center; padding:20px 0 16px; }
    .sidebar.collapsed .sidebar-brand-name { display:none; }
    .sidebar-nav { flex:1; padding:14px 0; overflow-y:auto; overflow-x:hidden; }
    .nav-section-label { display:none; }
    .nav-item {
      display:flex; align-items:center; gap:11px; margin:1px 12px; padding:10px 12px;
      border-radius:10px; border:1px solid transparent;
      font-size:13.5px; font-weight:500; color:var(--nav-text-dim); cursor:pointer;
      transition:color .18s var(--ease), background .18s var(--ease); position:relative;
    }
    .nav-item:hover { color:var(--nav-text); background:var(--nav-hover); }
    .nav-item.active { color:var(--nav-text); background:var(--nav-active); font-weight:600; }
    .nav-icon { width:16px; height:16px; opacity:.65; flex-shrink:0; }
    .nav-item.active .nav-icon, .nav-item:hover .nav-icon { opacity:1; }
    .nav-item.active .nav-icon { color:var(--nav-text); }
    .nav-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .nav-trailing { margin-left:auto; display:flex; align-items:center; gap:6px; flex-shrink:0; }
    .nav-badge { background:var(--accent-grad); color:var(--accent-ink); font-size:9px; font-weight:800; padding:1px 6px; border-radius:20px; }
    .nav-chevron { display:none; }

    /* ── SIDEBAR: modo colapsado (barra de ícones) ── */
    .sidebar.collapsed .nav-item { justify-content:center; padding:10px 0; margin:2px 14px; gap:0; }
    .sidebar.collapsed .nav-label,
    .sidebar.collapsed .nav-trailing { display:none; }

    /* ── SIDEBAR: cartão de perfil no rodapé ── */
    .sidebar-footer { padding:14px; border-top:1px solid var(--nav-border); }
    .sidebar-profile {
      display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:10px;
      cursor:pointer; transition:background .18s var(--ease);
    }
    .sidebar-profile:hover { background:var(--nav-hover); }
    .sidebar.collapsed .sidebar-profile { justify-content:center; padding:9px 0; }
    .sidebar.collapsed .sidebar-profile-info { display:none; }
    .sidebar-profile-avatar {
      width:34px; height:34px; border-radius:50%; background:var(--accent-grad); color:var(--accent-ink);
      display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; flex-shrink:0; overflow:hidden;
      box-shadow:inset 0 0 0 1px var(--nav-chip-ring);
    }
    .sidebar-profile-info { min-width:0; flex:1; }
    .sidebar-profile-nome { font-size:12.5px; font-weight:700; color:var(--nav-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .sidebar-profile-sub { font-size:10.5px; color:var(--nav-text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:1px; }

    /* ── BOTTOM NAV (mobile, estilo app) ── */
    .bottom-nav {
      display:none; position:fixed; left:0; right:0; bottom:0; z-index:150;
      background:var(--nav-bg); border-top:1px solid var(--nav-border);
      padding:6px 4px calc(6px + env(safe-area-inset-bottom));
      box-shadow:0 -4px 20px rgba(0,0,0,0.25);
    }
    .bnav-item {
      display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
      flex:1; padding:6px 2px; border-radius:10px; color:var(--nav-text-dim); cursor:pointer;
      transition:color .18s var(--ease); -webkit-tap-highlight-color:transparent;
    }
    .bnav-item.active { color:var(--nav-text); }
    .bnav-icon { width:19px; height:19px; opacity:.75; transition:opacity .18s var(--ease); }
    .bnav-item.active .bnav-icon { opacity:1; color:var(--nav-text); }
    .bnav-label { font-size:9.5px; font-weight:600; letter-spacing:.01em; }

    /* ── MAIN ── */
    .main { margin-left:var(--sidebar); flex:1; display:flex; flex-direction:column; min-height:100vh; transition:margin-left .3s var(--ease); overflow-x:hidden; }
    .main.sb-collapsed { margin-left:var(--sidebar-mini); }
    .topbar {
      height:56px; background:var(--nav-bg); color:var(--nav-text); border-bottom:1px solid var(--nav-border);
      display:flex; align-items:center; padding:0 24px; gap:12px;
      position:sticky; top:0; z-index:50; transition:background .18s var(--ease);
    }
    .topbar-title { font-size:13px; font-weight:600; letter-spacing:.02em; }
    .topbar-sub { font-size:11px; color:var(--nav-text-dim); margin-left:6px; }
    .topbar-actions { margin-left:auto; display:flex; gap:10px; align-items:center; flex-shrink:0; }
    .topbar-search { display:flex; position:relative; flex:1; max-width:420px; }
    .topbar-search .search-input { width:100%; border-radius:var(--r); background:var(--nav-surface); color:var(--nav-text); }
    .topbar-search .search-input::placeholder { color:var(--nav-text-dim); }
    .topbar-search svg { color:var(--nav-text-dim); }
    .topbar .btn-icon { background:var(--nav-hover); color:var(--nav-text-dim); }
    .topbar .btn-icon:hover { background:var(--nav-active); color:var(--nav-text); }
    .topbar .notif-dot, .topbar .notif-count { border-color:var(--nav-bg); }
    .topbar-search .search-input:focus { width:100%; border-color:var(--border-2); }
    @media (max-width:900px) { .topbar-search { max-width:none; min-width:0; } }
    @media (max-width:640px) { .topbar-search .search-input { padding-left:26px; font-size:12px; } .topbar-search svg { width:12px; height:12px; } }
    .search-dropdown {
      display:none; position:absolute; top:calc(100% + 8px); left:0; right:0; max-height:400px; overflow-y:auto;
      background:var(--dark-card); border:1px solid var(--border-2); border-radius:var(--r-lg); box-shadow:var(--shadow); padding:6px; z-index:120;
    }
    .search-dropdown.open { display:block; }
    .search-group-label { font-size:9.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); padding:8px 10px 4px; }
    .search-result-item { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; cursor:pointer; transition:background .15s; }
    .search-result-item:hover { background:var(--ov-06); }
    .search-result-title { font-size:12.5px; font-weight:600; color:var(--white); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .search-result-sub { font-size:10.5px; color:var(--muted); margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .search-empty { font-size:12px; color:var(--muted); text-align:center; padding:20px 10px; }
    .topbar-user { position:relative; padding-bottom:14px; margin-bottom:-14px; }
    .topbar-user-trigger { display:flex; align-items:center; gap:9px; cursor:pointer; }
    .topbar-user-info { text-align:left; line-height:1.25; }
    .topbar-user-nome { font-size:12.5px; font-weight:700; color:var(--nav-text); }
    .topbar-user-role { font-size:10.5px; color:var(--nav-text-dim); }
    @media (max-width:640px) { .topbar-user-info { display:none; } }
    .topbar-avatar {
      width:32px; height:32px; border-radius:50%; background:var(--accent-grad); color:var(--accent-ink);
      display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800;
      cursor:pointer; flex-shrink:0; transition:opacity .15s; box-shadow:inset 0 0 0 1px var(--nav-chip-ring);
    }
    .topbar-avatar:hover { opacity:.85; }
    .user-dropdown {
      display:none; position:fixed; width:190px; background:var(--dark-card);
      border:1px solid var(--border-2); border-radius:var(--r-lg); box-shadow:var(--shadow); padding:6px; z-index:200;
    }
    .user-dropdown.open { display:block; }
    .user-dropdown-item {
      display:flex; align-items:center; gap:9px; padding:9px 10px; font-size:12.5px; font-weight:500;
      border-radius:8px; cursor:pointer; transition:background .15s; color:var(--white);
    }
    .user-dropdown-item:hover { background:var(--ov-06); }
    .user-dropdown-item.danger { color:var(--red); }
    .user-dropdown-item.danger:hover { background:rgba(224,85,85,0.1); }
    .user-dropdown-divider { height:1px; background:var(--border); margin:4px 2px; }
    .user-dropdown-item.disabled { opacity:.4; pointer-events:none; }

    /* ── SELECT DROPDOWN (botão "Selecionar" das listas, abre um menu flutuante) ── */
    .list-toolbar { display:flex; justify-content:flex-end; margin-bottom:12px; }
    .select-trigger { position:relative; }
    .select-badge {
      position:absolute; top:-3px; right:-3px; min-width:15px; height:15px; padding:0 3px; border-radius:20px;
      background:var(--accent); color:var(--accent-ink); font-size:9px; font-weight:800; display:none;
      align-items:center; justify-content:center; border:1.5px solid var(--dark-card); line-height:1;
    }
    .select-badge.show { display:flex; }
    .select-dropdown {
      display:none; position:fixed; width:220px; background:var(--dark-card);
      border:1px solid var(--border-2); border-radius:var(--r-lg); box-shadow:var(--shadow); padding:6px; z-index:200;
    }
    .select-dropdown.open { display:block; }
    .select-dd-count { font-size:11px; font-weight:700; color:var(--muted); padding:8px 10px 6px; text-transform:uppercase; letter-spacing:.04em; }
    .notif-dot { position:absolute; top:6px; right:6px; width:7px; height:7px; border-radius:50%; background:var(--red); border:1.5px solid var(--dark-card); }
    .notif-count {
      position:absolute; top:-3px; right:-3px; min-width:15px; height:15px; padding:0 3px; border-radius:20px;
      background:var(--red); color:#fff; font-size:9px; font-weight:800; display:flex; align-items:center; justify-content:center;
      border:1.5px solid var(--dark-card); line-height:1;
    }
    .notif-dropdown {
      display:none; position:fixed; width:320px; background:var(--dark-card);
      border:1px solid var(--border-2); border-radius:var(--r-lg); box-shadow:var(--shadow); padding:8px; z-index:200;
      max-height:420px; overflow-y:auto;
    }
    .notif-dropdown.open { display:block; }
    .notif-dropdown-header { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:4px 6px 8px; }
    .notif-dropdown-title { font-size:12px; font-weight:700; }
    .notif-mark-all { background:none; border:none; color:var(--muted); font-size:10.5px; cursor:pointer; font-family:var(--font); padding:0; }
    .notif-mark-all:hover { color:var(--white); text-decoration:underline; }
    .notif-empty { font-size:12px; color:var(--muted); text-align:center; padding:16px 0; }
    .notif-item { display:flex; gap:9px; padding:9px 6px; border-radius:8px; cursor:pointer; transition:background .15s; position:relative; }
    .notif-item:hover { background:var(--ov-06); }
    .notif-item-dot { width:7px; height:7px; border-radius:50%; background:var(--blue); flex-shrink:0; margin-top:5px; }
    .notif-item.lida .notif-item-dot { background:transparent; }
    .notif-item-title { font-size:12px; font-weight:700; }
    .notif-item.lida .notif-item-title { font-weight:500; color:var(--muted); }
    .notif-item-msg { font-size:11px; color:var(--muted); margin-top:2px; }
    .notif-item-time { font-size:9.5px; color:var(--dim); margin-top:3px; }
    .notif-item-del {
      background:none; border:none; color:var(--dim); cursor:pointer; padding:4px; border-radius:6px;
      flex-shrink:0; align-self:flex-start; opacity:0; transition:opacity .15s,color .15s,background .15s;
    }
    .notif-item:hover .notif-item-del { opacity:1; }
    .notif-item-del:hover { color:var(--red); background:var(--ov-06); }
    .notif-hist-row { display:flex; align-items:flex-start; gap:10px; padding:12px 0; border-bottom:1px solid var(--border); }
    .notif-hist-row:last-child { border-bottom:none; }
    .notif-hist-titulo { font-size:13px; font-weight:700; }
    .notif-hist-msg { font-size:12px; color:var(--muted); margin-top:2px; }
    .notif-hist-meta { font-size:10.5px; color:var(--dim); margin-top:5px; }
    @media (max-width:480px) {
      .notif-dropdown { width:calc(100vw - 24px); max-width:340px; }
    }
    .hamburger {
      display:none; flex-direction:column; gap:4px; cursor:pointer;
      padding:6px; margin-right:4px; flex-shrink:0;
    }
    .hamburger span { width:18px; height:2px; background:var(--nav-text); border-radius:2px; transition:all .2s; display:block; }
    .content { padding:24px; flex:1; }

    /* ── VIEWS ── */
    .view { display:none; }
    .view.active { display:block; animation:fadeIn .2s ease; }
    @keyframes fadeIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }

    /* ── BUTTONS ── */
    .btn { display:inline-flex; align-items:center; gap:7px; padding:8px 16px; font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; border:none; border-radius:var(--r); cursor:pointer; transition:all .18s var(--ease); white-space:nowrap; }
    .btn-white { background:var(--accent-grad); color:var(--accent-ink); box-shadow:0 2px 14px rgba(0,0,0,0.16); }
    .btn-white:hover { opacity:.92; box-shadow:0 4px 18px rgba(0,0,0,0.22); transform:translateY(-1px); }
    .btn-ghost { background:transparent; color:var(--white); border:1px solid var(--border-2); }
    .btn-ghost:hover { background:var(--ov-06); border-color:var(--ov-20); }
    .btn-green { background:rgba(37,211,102,0.12); color:var(--green); border:1px solid rgba(37,211,102,0.2); }
    .btn-green:hover { background:rgba(37,211,102,0.2); }
    .btn-sm { padding:6px 12px; font-size:10px; }
    .btn-icon {
      width:32px; height:32px; padding:0; display:inline-flex; align-items:center; justify-content:center;
      background:var(--ov-05); border:1px solid transparent; border-radius:var(--r);
      cursor:pointer; transition:all .18s var(--ease); color:var(--muted);
    }
    .btn-icon:hover { background:var(--ov-10); color:var(--white); }
    .btn-sb-collapse { background:transparent; }
    .btn-sb-collapse:hover { background:var(--ov-05); }
    .btn-icon svg { width:14px; height:14px; }
    .sidebar .btn-icon { color:var(--nav-text-dim); }
    .sidebar .btn-icon:hover { background:var(--nav-hover); color:var(--nav-text); }

    /* ── CARDS ── */
    .card { background:var(--dark-card); border:1px solid var(--border); border-radius:var(--r-lg); padding:22px; box-shadow:var(--shadow), inset 0 1px 0 var(--ov-02); }

    /* ── GRID ── */
    .grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
    .grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
    .grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }

    /* ── STATS ── */
    .stat-card { background:var(--dark-card); border:1px solid var(--border); border-radius:var(--r); padding:16px; box-shadow:var(--shadow), inset 0 1px 0 var(--ov-02); transition:border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease); }
    .stat-card:hover { border-color:var(--border-2); transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,0.3), inset 0 1px 0 var(--ov-03); }
    .stat-top { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; }
    .stat-icon { width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    .stat-icon svg { width:13px; height:13px; }
    .stat-icon-accent, .stat-icon-green, .stat-icon-red, .stat-icon-blue, .stat-icon-yellow {
      background:var(--dark-2); color:var(--white); border:1px solid var(--border);
    }
    .stat-label { font-size:9.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
    .stat-value { font-size:22px; font-weight:800; letter-spacing:-.02em; }
    .stat-sub { font-size:10.5px; color:var(--muted); margin-top:3px; }
    .stat-trend { font-size:10.5px; font-weight:600; display:inline-flex; align-items:center; gap:3px; margin-top:5px; }
    .stat-trend::before { content:''; width:0; height:0; border-left:3px solid transparent; border-right:3px solid transparent; }
    .trend-up { color:var(--green); }
    .trend-up::before { border-bottom:4.5px solid var(--green); }
    .trend-down { color:var(--red); }
    .trend-down::before { border-top:4.5px solid var(--red); }
    .trend-flat { color:var(--muted); }
    .trend-flat::before { display:none; }
    .trend-side { color:var(--muted); }
    .trend-side::before { display:none; }

    /* ── TABLE ── */
    .table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
    table { width:100%; border-collapse:collapse; }
    th { font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); text-align:left; padding:10px 14px; border-bottom:1px solid var(--border); white-space:nowrap; }
    td { padding:12px 14px; font-size:13px; border-bottom:1px solid var(--border); vertical-align:middle; }
    tr:last-child td { border-bottom:none; }
    tr:hover td { background:var(--ov-02); }

    /* ── BADGES ── */
    .badge { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:20px; font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
    .badge-green  { background:rgba(37,211,102,0.12); color:var(--green); }
    .badge-yellow { background:rgba(240,180,41,0.12);  color:var(--yellow); }
    .badge-red    { background:rgba(224,85,85,0.12);   color:var(--red); }
    .badge-blue   { background:rgba(74,158,255,0.12);  color:var(--blue); }
    .badge-gray   { background:var(--ov-07); color:var(--muted); }

    /* ── AVATAR / LOGO ── */
    .avatar { width:32px; height:32px; border-radius:50%; background:var(--accent-soft); border:1px solid var(--accent-border); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:var(--accent-2); flex-shrink:0; overflow:hidden; }
    .avatar img { width:100%; height:100%; object-fit:cover; }

    /* ── FORMS ── */
    .form-group { margin-bottom:16px; }
    .form-group label { display:block; font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
    .form-control { width:100%; background:var(--dark-2); border:1px solid var(--border); border-radius:var(--r); padding:10px 14px; font-size:13px; color:var(--white); font-family:var(--font); transition:border-color .18s var(--ease); outline:none; }
    .form-control:focus { border-color:var(--accent-border); }
    .form-control::placeholder { color:var(--dim); }
    select.form-control { cursor:pointer; }
    select.form-control option { background:var(--dark-card); color:var(--white); }
    textarea.form-control { resize:vertical; min-height:90px; }

    /* Logo upload */
    .logo-upload-area { display:flex; flex-direction:column; align-items:center; gap:10px; border:2px dashed var(--border); border-radius:var(--r); padding:20px; cursor:pointer; transition:border-color .18s; text-align:center; }
    .logo-upload-area:hover { border-color:var(--border-2); }
    #c-logo-preview { width:72px; height:72px; border-radius:var(--r); object-fit:cover; display:none; }

    /* ── SECTION HEADER ── */
    .section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; gap:12px; flex-wrap:wrap; }
    .section-header h2 { font-size:16px; font-weight:700; letter-spacing:-.01em; }
    .section-header p { font-size:12px; color:var(--muted); margin-top:2px; }

    /* ── MODAL ── */
    .modal-overlay {
      display:none; position:fixed; inset:0; background:rgba(0,0,0,0.72); backdrop-filter:blur(3px);
      z-index:500; align-items:center; justify-content:center; padding:16px;
    }
    .modal-overlay.open { display:flex; }
    @keyframes modalIn { from{opacity:0; transform:translateY(8px) scale(.98)} to{opacity:1; transform:none} }
    .modal {
      background:var(--dark-card); border:1px solid var(--border-2); border-radius:var(--r-lg); padding:24px;
      width:100%; max-width:520px; max-height:92vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,0.5);
      animation:modalIn .2s var(--ease);
    }
    .modal-header {
      display:flex; align-items:center; justify-content:space-between;
      margin-bottom:18px; padding-bottom:16px; border-bottom:1px solid var(--border);
    }
    .modal-header h3 { font-size:15px; font-weight:700; letter-spacing:-.01em; }
    .modal-close {
      display:flex; align-items:center; justify-content:center; width:28px; height:28px; flex-shrink:0;
      background:var(--ov-05); border:1px solid var(--border); border-radius:8px;
      color:var(--muted); cursor:pointer; font-size:18px; line-height:1; padding:0; transition:all .15s var(--ease);
    }
    .modal-close:hover { color:var(--white); background:var(--ov-10); border-color:var(--border-2); }

    /* ── SEARCH ── */
    .search-wrap { position:relative; }
    .search-wrap svg { position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--dim); width:13px; height:13px; }
    .search-input { background:var(--dark-2); border:1px solid var(--border); border-radius:var(--r); padding:8px 12px 8px 30px; font-size:12px; color:var(--white); font-family:var(--font); outline:none; width:200px; transition:border-color .18s; }
    .search-input:focus { border-color:var(--ov-20); width:240px; }
    .search-input::placeholder { color:var(--dim); }

    /* ── DIVIDER ── */
    .divider { height:1px; background:var(--border); margin:16px 0; }

    /* ── TABS (controle segmentado, quadrado com cantos arredondados, largura total e centralizado) ── */
    .tabs { display:flex; justify-content:center; gap:2px; width:100%; background:var(--dark-2); border:1px solid var(--border); border-radius:var(--r); padding:4px; margin-bottom:20px; overflow-x:auto; }
    .tab { padding:7px 15px; font-size:11.5px; font-weight:700; color:var(--muted); cursor:pointer; border-radius:calc(var(--r) - 4px); transition:all .18s var(--ease); white-space:nowrap; }
    .tab.active { color:var(--accent-ink); background:var(--accent-grad); box-shadow:0 1px 6px rgba(0,0,0,0.14); }
    .tab:hover:not(.active) { color:var(--white); background:var(--ov-06); }


    /* ── SELECT MODE: oculta checkboxes por padrão, mostra em modo seleção ── */
    #view-clientes .cb-cell   { display:none; }
    #view-financeiro .cb-cell { display:none; }
    #view-clientes.select-mode .cb-cell   { display:table-cell; }
    #view-financeiro.select-mode .cb-cell { display:table-cell; }

    /* ── EMPTY STATE ── */
    .empty-state { text-align:center; padding:48px 20px; }
    .empty-state-icon { font-size:36px; margin-bottom:12px; opacity:.3; }
    .empty-state h3 { font-size:14px; font-weight:600; color:var(--muted); margin-bottom:6px; }
    .empty-state p { font-size:12px; color:var(--dim); }

    /* ── TOAST ── */
    .toast-container { position:fixed; bottom:20px; right:20px; display:flex; flex-direction:column; gap:8px; z-index:9999; }
    .toast { background:var(--dark-card); border:1px solid var(--border-2); border-radius:var(--r); padding:12px 16px; font-size:12px; font-weight:500; display:flex; align-items:center; gap:10px; animation:slideUp .25s var(--ease); max-width:300px; box-shadow:var(--shadow); }
    @keyframes slideUp { from { transform:translateY(12px); opacity:0; } to { transform:none; opacity:1; } }
    .toast-green { border-color:rgba(37,211,102,0.3); }
    .toast-red   { border-color:rgba(224,85,85,0.3); }

    /* ── WA ── */
    .wa-preview { background:var(--dark-3); border-radius:var(--r-lg); padding:14px; font-size:13px; line-height:1.6; border:1px solid var(--border); color:var(--white); white-space:pre-wrap; min-height:80px; }
    .wa-chip { display:inline-flex; align-items:center; gap:4px; background:rgba(37,211,102,0.1); border:1px solid rgba(37,211,102,0.2); color:var(--green); font-size:10px; font-weight:700; padding:3px 8px; border-radius:20px; cursor:pointer; transition:background .15s; }
    .wa-chip:hover { background:rgba(37,211,102,0.2); }
    .wa-chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
    .wa-card-title { display:flex; align-items:center; gap:12px; margin-bottom:18px; }
    .wa-phone { background:#0b141a; border:1px solid var(--border); border-radius:var(--r-lg); padding:14px; }
    .wa-phone-header { display:flex; align-items:center; gap:10px; margin-bottom:12px; padding-bottom:12px; border-bottom:1px solid var(--ov-06); }
    .wa-phone-avatar {
      width:34px; height:34px; border-radius:50%; background:var(--accent-grad); color:var(--accent-ink);
      display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; flex-shrink:0; overflow:hidden;
    }
    .wa-phone-nome { font-size:12.5px; font-weight:700; color:#e9edef; }
    .wa-phone-status { font-size:10px; color:var(--green); margin-top:1px; }
    .wa-phone-bubble { background:#1f2c34; border-radius:2px 10px 10px 10px; padding:10px 14px; position:relative; }
    .wa-phone-time { font-size:10px; color:#8696a0; margin-top:6px; text-align:right; }

    /* ── FINANCEIRO ── */
    .fin-entrada { color:var(--green); font-weight:700; }
    .fin-saida   { color:var(--red);   font-weight:700; }
    .fin-type-toggle { display:flex; border:1px solid var(--border); border-radius:var(--r); overflow:hidden; margin-bottom:18px; }
    .fin-type-btn { flex:1; padding:10px; font-size:11px; font-weight:700; text-align:center; cursor:pointer; border:none; background:transparent; color:var(--muted); font-family:var(--font); transition:all .18s; letter-spacing:.06em; text-transform:uppercase; }
    .fin-type-btn.sel-entrada { background:rgba(37,211,102,0.15); color:var(--green); }
    .fin-type-btn.sel-saida   { background:rgba(224,85,85,0.15);  color:var(--red); }

    .fin-nav {
      display:flex; align-items:center; justify-content:space-between; gap:16px;
      background:linear-gradient(135deg, var(--dark-card), var(--dark-2));
      border:1px solid var(--border); border-radius:var(--r-lg); padding:18px 24px; margin-bottom:16px;
      box-shadow:var(--shadow), inset 0 1px 0 var(--ov-02); position:relative; overflow:hidden;
    }
    .fin-nav-btn { background:var(--dark-card); border:1px solid var(--border-2); border-radius:50%; width:38px; height:38px; cursor:pointer; color:var(--white); display:flex; align-items:center; justify-content:center; transition:all .18s var(--ease); font-family:var(--font); flex-shrink:0; box-shadow:var(--shadow); }
    .fin-nav-btn:hover { background:var(--accent-grad); color:var(--accent-ink); border-color:transparent; transform:translateY(-1px) scale(1.04); }
    .fin-nav-center { display:flex; align-items:center; justify-content:center; gap:14px; }
    .fin-nav-icon {
      width:44px; height:44px; border-radius:var(--r); background:var(--accent-grad); color:var(--accent-ink);
      display:flex; align-items:center; justify-content:center; flex-shrink:0;
      box-shadow:0 3px 12px rgba(0,0,0,0.18);
    }
    .fin-nav-icon svg { width:19px; height:19px; }
    .fin-nav-label { font-size:17px; font-weight:800; letter-spacing:-.01em; text-align:left; }
    .fin-nav-sub { font-size:11px; color:var(--muted); text-align:left; margin-top:1px; }
    .fin-nav-today { background:none; border:none; color:var(--muted); font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; cursor:pointer; font-family:var(--font); padding:7px 0 0; text-align:left; transition:color .15s; }
    .fin-nav-today:hover { color:var(--white); text-decoration:underline; }
    .fin-nav-progress-wrap { display:flex; align-items:center; gap:8px; margin-top:8px; }
    .fin-nav-progress-track { width:130px; height:4px; background:var(--dark-3); border-radius:3px; overflow:hidden; }
    .fin-nav-progress-bar { height:100%; background:var(--accent-grad); border-radius:3px; transition:width .5s var(--ease); }
    .fin-nav-progress-pct { font-size:9.5px; font-weight:700; color:var(--muted); white-space:nowrap; }

    /* ── BREAKDOWN: gráfico de rosca (SVG, fatia por categoria, hover destaca) + legenda ── */
    .donut-wrap { display:flex; justify-content:center; margin-bottom:18px; }
    .donut { width:132px; height:132px; position:relative; flex-shrink:0; }
    .donut-hole {
      position:absolute; inset:22px; background:var(--dark-card); border-radius:50%;
      display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
      box-shadow:inset 0 0 0 1px var(--border); pointer-events:none; padding:4px;
    }
    .donut-hole-label { font-size:8.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
    .donut-hole-value { font-size:13px; font-weight:800; margin-top:3px; letter-spacing:-.01em; }
    .donut-hole-pct { font-size:9.5px; color:var(--muted); margin-top:2px; font-weight:600; }
    .breakdown-legend { display:flex; flex-direction:column; }
    .breakdown-row { cursor:default; }
    .breakdown-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:1px solid var(--border); }
    .breakdown-row:last-child { border-bottom:none; padding-bottom:0; }
    .breakdown-row:first-child { padding-top:0; }
    .breakdown-cat { display:flex; align-items:center; gap:8px; min-width:0; }
    .breakdown-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
    .breakdown-vals { display:flex; align-items:center; gap:8px; flex-shrink:0; }
    .savings-box { background:var(--dark-2); border-radius:var(--r); padding:12px 16px; margin-top:12px; display:flex; align-items:center; justify-content:space-between; }

    /* ── PROJETOS (KANBAN) ── */
    .projetos-board { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; align-items:start; }
    .kanban-col { background:var(--dark-card); border:1px solid var(--border); border-radius:var(--r-lg); padding:14px; min-height:120px; transition:background .2s, border-color .2s; }
    .kanban-col.drag-over { background:var(--ov-04); border-color:var(--border-2); }
    .kanban-col-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
    .kanban-col-title { font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
    .kanban-col-count { font-size:10px; font-weight:700; background:var(--ov-07); padding:1px 7px; border-radius:20px; color:var(--muted); }
    .kanban-card { background:var(--dark-2); border:1px solid var(--border); border-left:3px solid transparent; border-radius:var(--r); padding:12px; margin-bottom:8px; cursor:grab; user-select:none; transition:box-shadow .18s var(--ease), opacity .2s, transform .15s, border-color .18s; position:relative; touch-action:none; }
    .kanban-card:hover { border-color:var(--border-2); box-shadow:0 6px 18px rgba(0,0,0,0.28); transform:translateY(-1px); }
    .kanban-card.prio-alta-card  { border-left-color:var(--red); }
    .kanban-card.prio-media-card { border-left-color:var(--yellow); }
    .kanban-card.prio-baixa-card { border-left-color:var(--green); }
    .kanban-card:active { cursor:grabbing; }
    .kanban-card.dragging { opacity:.4; transform:scale(.98); }
    .kanban-card.card-drag-over { box-shadow:0 -3px 0 0 var(--accent-2); }
    .kanban-card.drag-ghost { box-shadow:0 8px 28px rgba(0,0,0,.5); transform:rotate(1.5deg) scale(1.02); opacity:.9; pointer-events:none; }
    .kanban-card-title  { font-size:13px; font-weight:600; margin-bottom:4px; line-height:1.4; }
    .kanban-card-client { font-size:11px; color:var(--muted); margin-bottom:6px; }
    .kanban-card-desc   { font-size:11px; color:var(--muted); margin-bottom:8px; line-height:1.5; }
    .kanban-card-footer { display:flex; align-items:center; justify-content:space-between; gap:6px; }
    .kanban-add { width:100%; background:transparent; border:1px dashed var(--ov-10); border-radius:var(--r); padding:8px; font-size:11px; color:var(--dim); cursor:pointer; text-align:center; transition:all .18s; margin-top:4px; font-family:var(--font); }
    .kanban-add:hover { border-color:var(--border-2); color:var(--muted); background:var(--ov-02); }
    .prio-alta  { color:var(--red); }
    .prio-media { color:var(--yellow); }
    .prio-baixa { color:var(--green); }

    /* ── SPACING / UTILS ── */
    .mt-4{margin-top:4px} .mt-8{margin-top:8px} .mt-12{margin-top:12px} .mt-16{margin-top:16px} .mb-16{margin-bottom:16px}
    .flex{display:flex} .items-center{align-items:center} .justify-between{justify-content:space-between}
    .gap-8{gap:8px} .gap-12{gap:12px} .gap-16{gap:16px} .flex-1{flex:1}
    .text-muted{color:var(--muted)} .text-sm{font-size:12px} .text-xs{font-size:11px}
    .font-bold{font-weight:700} .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

    /* ── PORTFÓLIO ── */
    .portfolio-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
    .portfolio-item { background:var(--dark-card); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; transition:border-color .18s, box-shadow .18s, transform .18s; display:flex; flex-direction:column; }
    .portfolio-item:hover { border-color:var(--border-2); cursor:pointer; box-shadow:0 8px 24px rgba(0,0,0,0.3); transform:translateY(-2px); }
    .portfolio-item-header { padding:16px 16px 12px; display:flex; align-items:flex-start; gap:13px; flex:1; }
    .portfolio-item-favicon { width:46px; height:46px; border-radius:10px; background:var(--dark-2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; overflow:hidden; }
    .portfolio-item-favicon img { width:100%; height:100%; object-fit:cover; }
    .portfolio-item-body { flex:1; min-width:0; }
    .portfolio-item-title { font-size:14px; font-weight:700; display:flex; align-items:center; gap:6px; flex-wrap:wrap; line-height:1.3; }
    .portfolio-item-meta { display:flex; align-items:center; flex-wrap:wrap; gap:5px; margin-top:6px; }
    .portfolio-meta-chip { display:inline-flex; align-items:center; gap:4px; font-size:10px; color:var(--muted); background:var(--dark-2); border:1px solid var(--border); border-radius:6px; padding:2px 8px; max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .portfolio-item-actions { display:flex; gap:4px; align-items:center; flex-shrink:0; }
    .portfolio-item-footer { padding:10px 16px 14px; display:flex; flex-direction:column; gap:8px; }
    .portfolio-item-desc { font-size:11px; color:var(--muted); line-height:1.6; }
    .portfolio-techs { display:flex; flex-wrap:wrap; gap:4px; }
    .portfolio-tech { background:rgba(74,158,255,0.08); color:var(--blue); font-size:9px; font-weight:700; padding:3px 8px; border-radius:10px; border:1px solid rgba(74,158,255,0.18); letter-spacing:.04em; }
    .portfolio-cred-panel { padding:12px 16px; background:rgba(74,158,255,0.04); border-top:1px solid rgba(74,158,255,0.12); display:none; flex-wrap:wrap; gap:16px; align-items:center; }
    .portfolio-cred-panel.open { display:flex; }
    .portfolio-cred-item { display:flex; align-items:center; gap:6px; }
    .portfolio-links-bar { padding:10px 16px; background:var(--dark-2); border-top:1px solid var(--border); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
    .portfolio-link-btn { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; padding:4px 10px; border-radius:6px; border:1px solid var(--border); background:transparent; color:var(--muted); cursor:pointer; text-decoration:none; transition:all .15s; }
    .portfolio-link-btn:hover { border-color:var(--border-2); color:var(--white); background:var(--dark-3); }
    .portfolio-link-btn.wp { border-color:rgba(0,161,224,0.3); color:#00a1e0; }
    .portfolio-link-btn.wp:hover { background:rgba(0,161,224,0.1); }
    .portfolio-star { color:var(--yellow); font-size:12px; }

    /* ── UTILITÁRIOS — LINKS ── */
    .util-sites-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
    .util-site-card { background:var(--dark-card); border:1px solid var(--border); border-radius:var(--r-lg); padding:12px 14px; display:flex; align-items:center; gap:10px; transition:border-color .18s, background .18s, box-shadow .18s, transform .18s; cursor:pointer; position:relative; }
    .util-site-card:hover { border-color:var(--border-2); background:var(--dark-2); box-shadow:0 6px 18px rgba(0,0,0,0.25); transform:translateY(-1px); }
    .util-site-card.selected { border-color:rgba(74,158,255,0.5); background:rgba(74,158,255,0.07); }
    .util-site-card.selected:hover { border-color:rgba(74,158,255,0.7); background:rgba(74,158,255,0.12); }
    .portfolio-item.selected { border-color:rgba(74,158,255,0.5)!important; background:rgba(74,158,255,0.07)!important; }
    .code-card.selected { border-color:rgba(74,158,255,0.4)!important; background:rgba(74,158,255,0.06)!important; }
    tr.row-selected td { background:rgba(74,158,255,0.07)!important; }
    tr.row-selected:hover td { background:rgba(74,158,255,0.11)!important; }
    .util-site-icon { width:30px; height:30px; border-radius:var(--r); background:var(--dark-3); display:flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden; font-size:14px; }
    .util-site-icon img { width:100%; height:100%; object-fit:cover; }
    .link-checkbox { width:17px; height:17px; border-radius:4px; border:2px solid var(--dim); background:transparent; flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:all .15s; }
    .link-checkbox.chk { border-color:var(--blue); background:var(--blue); }

    /* ── UTILITÁRIOS — CÓDIGOS ── */
    .code-cards-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
    .code-card { background:var(--dark-card); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; transition:border-color .18s, box-shadow .18s; }
    .code-card:hover { border-color:var(--border-2); box-shadow:0 6px 18px rgba(0,0,0,0.25); }
    .code-card-header { padding:12px 14px; display:flex; align-items:center; gap:8px; cursor:pointer; user-select:none; }
    .code-card-header-info { flex:1; min-width:0; }
    .lang-badge { background:var(--ov-07); color:var(--muted); font-size:9px; font-weight:700; padding:2px 8px; border-radius:10px; font-family:monospace; letter-spacing:.06em; }
    .code-card-preview { background:#1a1a1a; font-family:'Fira Mono','Cascadia Code','Consolas',monospace; font-size:10.5px; line-height:1.55; color:#888; padding:0 14px 12px; white-space:pre; overflow:hidden; max-height:56px; -webkit-mask-image:linear-gradient(to bottom,#000 20%,transparent 100%); mask-image:linear-gradient(to bottom,#000 20%,transparent 100%); }
    .code-card-expanded { display:none; border-top:1px solid var(--border); }
    .code-card.is-open .code-card-expanded { display:block; }
    .code-card.is-open .code-card-preview { display:none; }
    .code-card-full { background:#1a1a1a; font-family:'Fira Mono','Cascadia Code','Consolas',monospace; font-size:12px; line-height:1.7; color:#e2e2e2; padding:14px; white-space:pre; overflow-x:auto; max-height:280px; overflow-y:auto; }
    .code-card-footer { padding:10px 14px; background:var(--dark-2); border-top:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:8px; }
    .copy-code-btn { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; padding:4px 10px; border-radius:6px; border:1px solid var(--border); background:transparent; color:var(--muted); cursor:pointer; transition:all .18s; font-family:var(--font); white-space:nowrap; flex-shrink:0; }
    .copy-code-btn:hover { border-color:var(--border-2); color:var(--white); }
    .copy-code-btn.copied { border-color:rgba(78,204,163,0.4)!important; color:var(--green)!important; background:rgba(78,204,163,0.08)!important; }
    .code-card.dragging { opacity:0.35; }
    .code-card.drag-over { border-color:var(--blue)!important; box-shadow:0 0 0 2px rgba(74,158,255,0.25); }
    .drag-handle { cursor:grab; color:var(--dim); padding:0 4px; display:flex; align-items:center; flex-shrink:0; }
    .drag-handle:active { cursor:grabbing; }
    .code-block { border:1px solid var(--border); border-radius:var(--r); overflow:hidden; padding:0; background:#282c34; }
    .code-block code { font-family:'Fira Mono','Cascadia Code','Consolas',monospace!important; font-size:12px!important; line-height:1.7!important; display:block!important; max-height:58vh; overflow-y:auto!important; overflow-x:auto!important; border-radius:0!important; padding:16px!important; }
    [data-theme="dark"] .code-card-preview, [data-theme="dark"] .code-card-full { background:#0d0d0d; }

    /* ── DETALHE SHARED ── */
    .detalhe-section { margin-bottom:18px; }
    .detalhe-section:last-child { margin-bottom:0; }
    .detalhe-label { font-size:9px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin-bottom:8px; }
    .detalhe-row { display:flex; align-items:center; gap:8px; padding:9px 12px; background:var(--dark-2); border-radius:var(--r); margin-bottom:5px; }
    .detalhe-row-label { font-size:10px; color:var(--dim); white-space:nowrap; width:70px; flex-shrink:0; }
    .detalhe-row-val { font-size:12px; font-weight:600; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .detalhe-cred-val { font-family:monospace; font-size:12px; font-weight:600; flex:1; letter-spacing:1px; }
    .pd-link-btn { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:7px 14px; border-radius:var(--r); border:1px solid var(--border); background:transparent; color:var(--muted); cursor:pointer; text-decoration:none; transition:all .15s; }
    .pd-link-btn:hover { border-color:var(--border-2); color:var(--white); background:var(--dark-3); }
    .pd-link-btn.wp { border-color:rgba(0,161,224,0.3); color:#00a1e0; }
    .pd-link-btn.wp:hover { background:rgba(0,161,224,0.1); }

    /* ── PROJETO DETALHE ── */
    .proj-detalhe-section { margin-bottom:18px; }
    .proj-detalhe-label { font-size:9px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin-bottom:8px; }
    .proj-link-row, .proj-file-row { display:flex; align-items:center; gap:8px; padding:8px 10px; background:var(--dark-2); border-radius:var(--r); margin-bottom:6px; }
    .proj-link-row a { font-size:12px; font-weight:600; color:var(--blue); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
    .proj-file-row a { font-size:12px; font-weight:500; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
    .proj-link-edit-row { display:flex; align-items:center; gap:6px; margin-bottom:6px; }
    .proj-link-edit-row input { flex:1; }

    /* ── THEME TOGGLE ── */
    #btn-theme svg { transition:transform .3s; }
    #btn-theme:hover svg { transform:rotate(20deg); }

    /* ── MINHA CONTA ── */
    .conta-logo-area { display:flex;flex-direction:column;align-items:center;gap:10px;border:2px dashed var(--border-2);border-radius:var(--r);padding:24px;cursor:pointer;transition:all .18s var(--ease);text-align:center; }
    .conta-logo-area:hover { border-color:var(--accent-border); background:var(--ov-03); }
    .conta-logo-display { width:100px;height:100px;border-radius:var(--r);object-fit:contain;background:var(--dark-3); }
    .conta-logo-ph { width:100px;height:100px;border-radius:var(--r);background:var(--dark-3);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--muted); }
    .conta-logo-ph svg { width:32px;height:32px; }
    .conta-uploads-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:16px; }
    .conta-logo-area-sm { padding:14px 10px; gap:6px; }
    .conta-logo-area-sm .conta-logo-display, .conta-logo-area-sm .conta-logo-ph { width:52px; height:52px; }
    .conta-logo-area-sm .conta-logo-ph svg { width:18px; height:18px; }
    .conta-logo-area-sm.round .conta-logo-display, .conta-logo-area-sm.round .conta-logo-ph { border-radius:50%; }
    .conta-logo-area-sm .text-xs { font-size:10px; }
    .login-logo-img { max-height:64px;max-width:200px;object-fit:contain;display:block;margin:0 auto;transition:filter .3s; }
    .dash-header-logo-img { transition:filter .3s; }
    /* Logo inverte para branco no dark mode */
    [data-theme="dark"] .login-logo-img,
    [data-theme="dark"] .sidebar-brand-logo { filter: brightness(0) invert(1); }
    .login-logo-ph { font-size:11px;font-weight:800;letter-spacing:.22em;text-transform:uppercase; }
    .login-logo-ph span { color:var(--muted); }

    /* ── PERFIL: mini-mockup da tela de login ── */
    .conta-login-preview {
      position:relative; background:var(--dark-2); border:1px dashed var(--border-2); border-radius:var(--r-lg);
      padding:24px 16px 18px; text-align:center; margin-top:8px;
    }
    .conta-login-preview-tag {
      position:absolute; top:10px; right:12px; font-size:8.5px; font-weight:700; letter-spacing:.1em;
      text-transform:uppercase; color:var(--dim);
    }
    .conta-login-preview-logo { font-size:9.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
    .conta-login-preview .login-title { font-size:15px; margin:0 0 4px; }
    .dash-greeting { display:flex; align-items:center; gap:16px; }
    .dash-header-text { flex:1; min-width:0; }
    .dash-greeting-title { font-size:22px; font-weight:800; letter-spacing:-.02em; }
    .dash-greeting-wave { display:inline-block; }
    .dash-greeting-sub { font-size:13px; color:var(--muted); margin-top:5px; }
    .danger-btn { color:var(--red)!important;border-color:rgba(224,85,85,0.25)!important; }

    .dash-period-select {
      font-size:11px; font-weight:600; color:var(--muted); background:var(--dark-2); border:1px solid var(--border);
      border-radius:var(--r); padding:5px 10px; cursor:pointer; font-family:var(--font); flex-shrink:0; outline:none;
    }
    .dash-period-select:hover { color:var(--white); border-color:var(--border-2); }

    /* ── DASHBOARD: gráfico, visão financeira, clientes recentes e atividades ── */
    .dash-grid-3 { display:grid; grid-template-columns:1.8fr 1fr; gap:18px; align-items:stretch; }
    .dash-grid-3 > .card { display:flex; flex-direction:column; height:100%; }
    .dash-grid-3 > .card > #dash-chart { flex:1; display:flex; align-items:center; position:relative; }
    .dash-grid-3 > .card > #dash-chart > svg { width:100%; }
    .dash-chart-tooltip {
      display:none; position:absolute; width:160px; background:var(--dark-card); border:1px solid var(--border-2);
      border-radius:var(--r); box-shadow:var(--shadow); padding:9px 10px; z-index:30; pointer-events:none;
    }
    .dash-chart-tooltip-mes { font-size:10.5px; font-weight:700; text-transform:capitalize; margin-bottom:5px; }
    .dash-chart-tooltip-row { display:flex; align-items:center; gap:6px; font-size:10.5px; color:var(--muted); margin-top:3px; }
    .dash-chart-tooltip-row b { color:var(--white); margin-left:auto; font-weight:700; }
    .dash-chart-tooltip-dot { width:7px; height:7px; border-radius:50%; background:var(--white); flex-shrink:0; }
    .dash-chart-tooltip-dot.dashed { background:transparent; border:1.4px dashed var(--muted); width:6px; height:6px; }
    .dash-vf-rows { flex:1; display:flex; flex-direction:column; justify-content:space-evenly; }
    .dash-chart-legend { display:flex; gap:16px; margin-bottom:14px; flex-wrap:wrap; }
    .dash-chart-legend-item { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--muted); }
    .dash-chart-legend-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
    .dash-chart-legend-dot-dashed { width:12px; height:0; border-top:1.4px dashed var(--muted); flex-shrink:0; }
    .dash-cliente-row { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--border); }
    .dash-cliente-row:last-child { border-bottom:none; }
    .dash-cliente-info { flex:1; min-width:0; }
    .dash-cliente-nome { font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .dash-cliente-sub { font-size:11px; color:var(--muted); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

    /* ── DASHBOARD: visão financeira (lista) ── */
    .dash-vf-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 0; border-bottom:1px solid var(--border); }
    .dash-vf-row:last-child { border-bottom:none; padding-bottom:0; }
    .dash-vf-row-total { padding-top:14px; }
    .dash-vf-label { display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--muted); }
    .dash-vf-row-total .dash-vf-label { color:var(--white); font-weight:600; }
    .dash-vf-icon { width:26px; height:26px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    .dash-vf-icon svg { width:12px; height:12px; }
    .dash-vf-value { font-size:13.5px; font-weight:700; white-space:nowrap; }
    .dash-vf-row-total .dash-vf-value { font-size:16px; }

    /* ── DASHBOARD: tarefas + atividades lado a lado ── */
    .dash-grid-tarefas { display:grid; grid-template-columns:1.8fr 1fr; gap:18px; align-items:stretch; }
    .dash-grid-tarefas > .card { display:flex; flex-direction:column; height:100%; }
    @media (max-width:1100px) { .dash-grid-tarefas { grid-template-columns:1fr; } }

    /* ── DASHBOARD: preview de tarefas (3 colunas) ── */
    .dash-tarefas-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
    .dash-tarefas-col-header { display:flex; align-items:center; gap:8px; font-size:11.5px; font-weight:700; color:var(--muted); margin-bottom:10px; text-transform:uppercase; letter-spacing:.04em; }
    .dash-tarefas-col-count { background:var(--dark-2); color:var(--muted); font-size:9.5px; font-weight:700; padding:1px 6px; border-radius:20px; }
    .dash-tarefas-item { display:flex; align-items:flex-start; gap:9px; padding:9px 6px; margin:0 -6px; border-radius:8px; cursor:pointer; transition:background .15s; }
    .dash-tarefas-item:hover { background:var(--ov-04); }
    .dash-tarefas-check { width:15px; height:15px; border-radius:5px; border:1.5px solid var(--border-2); flex-shrink:0; margin-top:1px; display:flex; align-items:center; justify-content:center; }
    .dash-tarefas-check.done { background:var(--white); border-color:var(--white); color:var(--dark-card); }
    .dash-tarefas-item-title { font-size:12px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .dash-tarefas-item.done .dash-tarefas-item-title { color:var(--muted); text-decoration:line-through; }
    .dash-tarefas-item-sub { font-size:10.5px; color:var(--muted); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .dash-tarefas-empty { font-size:11.5px; color:var(--dim); padding:8px 0; }
    .dash-tarefas-add { width:100%; background:transparent; border:1px dashed var(--ov-10); border-radius:var(--r); padding:7px; font-size:10.5px; color:var(--dim); cursor:pointer; text-align:center; transition:all .18s; margin-top:8px; font-family:var(--font); }
    .dash-tarefas-add:hover { border-color:var(--border-2); color:var(--muted); background:var(--ov-02); }
    @media (max-width:900px) { .dash-tarefas-grid { grid-template-columns:1fr; } }

    /* ── DASHBOARD: atividades recentes ── */
    .dash-activity-row { display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--border); }
    .dash-activity-row:last-child { border-bottom:none; }
    .dash-activity-icon { width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    .dash-activity-icon svg { width:14px; height:14px; }
    .dash-activity-info { flex:1; min-width:0; }
    .dash-activity-title { font-size:12.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .dash-activity-sub { font-size:11px; color:var(--muted); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .dash-activity-time { font-size:10.5px; color:var(--dim); white-space:nowrap; flex-shrink:0; }
    @media (max-width:900px) { .dash-grid-3 { grid-template-columns:1fr; } }

    /* ── CHECKBOX / MULTISELECT ── */
    .cb-cell { width:40px;text-align:center;padding:0!important; }
    input[type="checkbox"] { width:14px;height:14px;accent-color:var(--white);cursor:pointer;flex-shrink:0; }
    .bulk-bar { display:none;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;background:var(--ov-04);border:1px solid var(--border-2);border-radius:var(--r);margin-bottom:12px;animation:fadeIn .15s ease; }
    .bulk-bar.visible { display:flex; }
    .bulk-bar-info { font-size:12px;font-weight:600;color:var(--white); }

    /* ── CONTA TABS (mesmo controle segmentado usado nas outras listas) ── */
    .conta-tabs { display:flex; justify-content:center; gap:2px; width:100%; background:var(--dark-2); border:1px solid var(--border); border-radius:var(--r); padding:4px; margin-bottom:24px; overflow-x:auto; }
    .conta-tab { padding:7px 15px; font-size:11.5px; font-weight:700; color:var(--muted); cursor:pointer; border-radius:calc(var(--r) - 4px); transition:all .18s var(--ease); white-space:nowrap; }
    .conta-tab.active { color:var(--accent-ink); background:var(--accent-grad); box-shadow:0 1px 6px rgba(0,0,0,0.14); }
    .conta-tab:hover:not(.active) { color:var(--white); background:var(--ov-06); }
    .conta-panel { display:none; }
    .conta-panel.active { display:block; animation:fadeIn .2s ease; }

    /* ── USER ROWS ── */
    .user-row { display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border); }
    .user-row:last-child { border-bottom:none; }
    .user-avatar { width:34px;height:34px;border-radius:50%;background:var(--dark-3);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0; }
    .user-page-badge { background:rgba(74,158,255,0.1);color:var(--blue);font-size:9px;font-weight:700;padding:2px 7px;border-radius:10px;letter-spacing:.04em;border:1px solid rgba(74,158,255,0.2); }
    .perm-grid { display:grid;grid-template-columns:1fr 1fr;gap:6px 16px;margin-top:4px; }
    .perm-item { display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer;padding:4px 0; }
    .nivel-opcoes { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:6px; }
    .nivel-card { display:block; border:1px solid var(--border); border-radius:var(--r); padding:10px 12px; cursor:pointer; transition:border-color .15s,background .15s; position:relative; }
    .nivel-card:has(input:checked) { border-color:var(--accent-border); background:var(--accent-soft); }
    .nivel-card input { position:absolute; top:10px; right:10px; }
    .nivel-card-title { font-size:12.5px; font-weight:700; margin-bottom:3px; padding-right:20px; }
    .nivel-card-desc { font-size:10.5px; color:var(--muted); line-height:1.4; }
    .login-painel-title { font-size:18px;font-weight:700;letter-spacing:-.01em;margin-bottom:4px; }

    /* ── HOSTING ── */
    .hosting-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
    .hosting-toolbar .search-wrap { flex:1; max-width:360px; }
    .hosting-filter { width:180px; min-height:36px; }
    .hosting-plan-name { font-size:13px; font-weight:700; }
    .hosting-plan-note { max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:3px; }
    .hosting-type-chip { display:inline-flex; padding:3px 8px; border-radius:999px; background:var(--accent-soft); border:1px solid var(--accent-border); color:var(--accent-2); font-size:9.5px; font-weight:700; white-space:nowrap; }
    .hosting-actions { justify-content:flex-end; }
    .hosting-wa-btn { width:30px; padding:0 5px; color:var(--green); border-color:rgba(37,211,102,.28); font-size:8.5px; font-weight:800; letter-spacing:.02em; }
    .hosting-wa-btn:disabled, .hosting-renewal-row .btn:disabled { opacity:.35; cursor:not-allowed; }
    .hosting-renewal-list { display:flex; flex-direction:column; }
    .hosting-renewal-row { display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--border); }
    .hosting-renewal-row:last-child { border-bottom:none; }
    .hosting-renewal-icon { width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:rgba(240,180,41,.12); color:var(--yellow); font-size:11px; font-weight:800; }
    .hosting-renewal-info { flex:1; min-width:0; }
    .hosting-renewal-title { font-size:12.5px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .hosting-renewal-client { font-size:10.5px; color:var(--muted); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .hosting-days { flex-shrink:0; padding:4px 9px; border-radius:999px; background:rgba(240,180,41,.1); color:var(--yellow); font-size:9.5px; font-weight:700; white-space:nowrap; }
    .hosting-days.urgent { background:rgba(224,85,85,.1); color:var(--red); }
    .hosting-empty { padding:18px 0; }

    /* ══════════ MOBILE ══════════ */
    @media (max-width: 900px) {
      .projetos-board { grid-template-columns:repeat(2,1fr); }
      .util-sites-grid { grid-template-columns:repeat(3,1fr); }
      .code-cards-grid { grid-template-columns:repeat(2,1fr); }
    }
    @media (max-width: 768px) {
      /* ── Layout ── */
      .hamburger { display:flex; }
      .bottom-nav { display:flex; }
      .btn-sb-collapse { display:none !important; }
      .sidebar { transform:translateX(-100%); z-index:200; }
      .sidebar.open, .sidebar.open.collapsed { transform:translateX(0) !important; }
      .sidebar.collapsed { transform:translateX(-100%); }
      .main, .main.sb-collapsed { margin-left:0; }
      .content { padding:14px; padding-bottom:calc(78px + env(safe-area-inset-bottom)); }
      .topbar { padding:0 14px; }
      .topbar-sub { display:none; }

      /* ── Grids ── */
      .grid-4 { grid-template-columns:repeat(2,1fr); gap:10px; }
      .grid-3 { grid-template-columns:repeat(3,1fr); gap:10px; }
      .grid-2 { grid-template-columns:1fr; gap:12px; }
      .projetos-board { grid-template-columns:1fr; gap:12px; }

      /* ── Dashboard hero: empilha em vez de espremer o texto numa coluna estreita ── */
      .dash-greeting { flex-direction:column; align-items:flex-start; gap:12px; }
      .dash-header-text { width:100%; }
      .dash-greeting-title { font-size:19px; }

      /* ── Stats ── */
      .stat-value { font-size:20px; }
      .stat-card { padding:14px; }
      .stat-label { font-size:9px; }

      /* ── Section header ── */
      .section-header { flex-direction:column; align-items:flex-start; gap:10px; margin-bottom:14px; }
      .section-header > div:last-child { width:100%; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
      .section-header .btn { flex:1; justify-content:center; min-width:0; }

      /* ── Search ── */
      .search-wrap { flex:1; }
      .search-input { width:100%; }
      .search-input:focus { width:100%; }

      /* ── Tables ── */
      .table-wrap { border-radius:var(--r); }
      .table-wrap table { font-size:12px; }
      th { padding:8px 10px; font-size:9px; }
      td { padding:10px 10px; }

      /* ── Financeiro: esconde texto do badge TIPO, mostra só ícone ── */
      #view-financeiro .tipo-text { display:none; }
      #view-financeiro td .badge { font-size:12px; padding:3px 8px; }
      #view-financeiro .fin-entrada, #view-financeiro .fin-saida { font-size:13px; white-space:nowrap; }
      #view-financeiro #tabela-financeiro td:nth-child(3) { max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

      /* Clientes: hide segmento (3), serviços (4), próx. contato (7) */
      #view-clientes th:nth-child(3),
      #view-clientes td:nth-child(3),
      #view-clientes th:nth-child(4),
      #view-clientes td:nth-child(4),
      #view-clientes th:nth-child(7),
      #view-clientes td:nth-child(7) { display:none; }

      /* Financeiro: hide categoria (4) */
      #view-financeiro th:nth-child(4),
      #view-financeiro td:nth-child(4) { display:none; }

      /* ── Financeiro ── */
      .fin-nav { padding:10px 12px; gap:8px; }
      .fin-nav-center { gap:8px; }
      .fin-nav-icon { width:32px; height:32px; }
      .fin-nav-icon svg { width:14px; height:14px; }
      .fin-nav-label { font-size:13px; }
      .fin-nav-sub { font-size:10px; }
      .fin-nav-btn { width:28px; height:28px; font-size:12px; }
      .fin-nav-progress-track { width:70px; }
      .fin-nav-progress-pct { display:none; }
      #fin-breakdown { grid-template-columns:1fr; gap:12px; }
      .donut { width:112px; height:112px; }
      .donut-hole { inset:19px; }
      #view-financeiro .grid-3 { grid-template-columns:1fr 1fr; gap:8px; }
      #view-financeiro .stat-card:last-child { grid-column:1/-1; }

      /* ── Modal ── */
      .modal-overlay { padding:12px; align-items:center; }
      .modal { padding:20px 18px; max-height:90vh; border-radius:var(--r-lg); }

      /* ── Kanban ── */
      .kanban-card { touch-action:auto; }

      /* ── Bulk bar ── */
      .bulk-bar { flex-wrap:wrap; gap:8px; }

      /* ── Toast ── */
      .toast-container { left:12px; right:12px; bottom:calc(76px + env(safe-area-inset-bottom)); }
      .toast { max-width:100%; }

      /* ── Conta ── */
      .conta-tabs { overflow-x:auto; -webkit-overflow-scrolling:touch; }
      .conta-tab { padding:8px 14px; }

      /* ── User rows ── */
      .user-row { gap:8px; }

      /* ── Portfolio / Utilitários ── */
      .util-sites-grid { grid-template-columns:repeat(2,1fr); }
      .code-cards-grid { grid-template-columns:repeat(2,1fr); gap:8px; }
      .util-site-card { padding:10px 12px; }
      .portfolio-grid { grid-template-columns:1fr; gap:10px; }
      .portfolio-item-header { padding:14px 14px 10px; }
      .portfolio-item-footer { padding:8px 14px 12px; }
      .portfolio-links-bar { padding:8px 14px; }

      /* ── Hosting ── */
      .hosting-toolbar { align-items:stretch; }
      .hosting-toolbar .search-wrap { max-width:none; }
      .hosting-filter { width:160px; }
      #view-hosting th:nth-child(3), #view-hosting td:nth-child(3),
      #view-hosting th:nth-child(5), #view-hosting td:nth-child(5) { display:none; }
      .hosting-renewal-row { flex-wrap:wrap; gap:8px; }
      .hosting-renewal-info { min-width:180px; }

      /* ── WhatsApp ── */
      .wa-chips { gap:4px; }
      .wa-chip { font-size:9px; padding:2px 6px; }

      /* ── Btn icons ── */
      .btn-icon { width:34px; height:34px; }

      /* ── Topbar: no mobile remove só a seta do avatar ── */
      .topbar-actions { gap:4px; }
      .topbar-user-chevron { display:none; }
      .topbar-user, .topbar-user-trigger { padding:0; margin:0; }
    }

    @media (max-width: 480px) {
      /* ── Layout ── */
      .content { padding:10px; padding-bottom:calc(78px + env(safe-area-inset-bottom)); }
      .topbar { padding:0 12px; gap:8px; }
      .btn-text { display:none; }

      /* ── Grids ── */
      .grid-4 { grid-template-columns:1fr 1fr; gap:8px; }
      .grid-3 { grid-template-columns:1fr 1fr 1fr; gap:8px; }
      .util-sites-grid { grid-template-columns:1fr; }
      .code-cards-grid { grid-template-columns:1fr; }
      .portfolio-item-actions { gap:4px; }
      .portfolio-links-bar { gap:6px; }
      .portfolio-link-btn { font-size:10px; padding:3px 8px; }
      .hosting-toolbar { flex-direction:column; }
      .hosting-filter { width:100%; }
      #view-hosting th:nth-child(4), #view-hosting td:nth-child(4) { display:none; }
      .hosting-days { margin-left:44px; }
      .hosting-renewal-row .btn { margin-left:auto; }

      /* ── Stats ── */
      .stat-value { font-size:16px; }
      .stat-card { padding:12px 10px; }
      .stat-sub { font-size:10px; }

      /* Clientes: também esconde ticket (5) */
      #view-clientes th:nth-child(5),
      #view-clientes td:nth-child(5) { display:none; }

      /* Financeiro: também esconde data (2) */
      #view-financeiro th:nth-child(2),
      #view-financeiro td:nth-child(2) { display:none; }

      /* Financeiro stats em 1 coluna quando muito pequeno */
      #view-financeiro .grid-3 { grid-template-columns:1fr; gap:8px; }

      /* ── Topbar ── */
      .topbar-title { font-size:12px; }

      /* ── Modal ── */
      .modal { padding:16px 14px; }
      .modal-header h3 { font-size:14px; }

      /* ── Tabs ── */
      .tab { padding:6px 12px; font-size:11px; }

      /* ── Section header ── */
      .section-header h2 { font-size:15px; }

      /* ── Kanban ── */
      .kanban-col { padding:10px; }
      .kanban-card-title { font-size:12px; }

      /* ── Conta ── */
      .conta-logo-area { padding:16px; }
      .conta-logo-display, .conta-logo-ph { width:80px; height:80px; }
    }

    /* ── LOADING SPINNER ── */
    .loading-overlay {
      position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:9998;
      display:none; align-items:center; justify-content:center;
    }
    .loading-overlay.active { display:flex; }
    .spinner {
      width:32px; height:32px; border:3px solid var(--border-2);
      border-top-color:var(--white); border-radius:50%;
      animation:spin .6s linear infinite;
    }
    @keyframes spin { to { transform:rotate(360deg); } }
    .btn.loading {
      pointer-events:none; opacity:.7;
    }
    .btn.loading::after {
      content:''; width:12px; height:12px; border:2px solid transparent;
      border-top-color:currentColor; border-radius:50%;
      animation:spin .6s linear infinite; display:inline-block;
    }