/* ============================================================================ Host-E — Design System (dark-first, tema claro opcional) Estética: Linear / Vercel / Railway. Tokens semânticos + componentes. Trocar de tema: . Sem tema = dark. ============================================================================ */ /* ----------------------------------------------------------------- Tokens */ :root{ /* superfícies */ --bg:#08080C; --bg-2:#0C0C12; --surface:#121219; --surface-2:#16161F; --elevated:#1C1C26; --hover:rgba(255,255,255,.04); --border:rgba(255,255,255,.07); --border-strong:rgba(255,255,255,.13); /* texto */ --text:#F4F4F5; --muted:#A1A1AA; --dim:#6B6B76; /* acentos */ --mint:#00E5A0; --mint-dim:rgba(0,229,160,.13); --indigo:#6E72F0; --indigo-dim:rgba(110,114,240,.16); --coral:#FF6B6B; --coral-dim:rgba(255,107,107,.13); --amber:#FFB547; --amber-dim:rgba(255,181,71,.13); /* papéis semânticos */ --accent:var(--indigo); --accent-dim:var(--indigo-dim); --cta:var(--mint); --cta-ink:#04231a; /* geometria */ --r:16px; --r-lg:20px; --r-sm:10px; --r-xs:8px; --pill:999px; --sidebar-w:264px; --topbar-h:62px; /* sombras */ --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow:0 10px 30px -12px rgba(0,0,0,.55); --shadow-lg:0 30px 70px -25px rgba(0,0,0,.7); /* topbar translúcida */ --topbar-bg:rgba(8,8,12,.72); --scrim:rgba(0,0,0,.6); } [data-theme="light"]{ --bg:#F6F6F9; --bg-2:#FFFFFF; --surface:#FFFFFF; --surface-2:#FBFBFD; --elevated:#F1F1F5; --hover:rgba(15,15,25,.04); --border:rgba(15,15,25,.09); --border-strong:rgba(15,15,25,.16); --text:#16161D; --muted:#5B5B66; --dim:#9A9AA6; --mint:#00B888; --mint-dim:rgba(0,184,136,.12); --indigo:#5B5FE3; --indigo-dim:rgba(91,95,227,.12); --coral:#E5484D; --coral-dim:rgba(229,72,77,.10); --amber:#D98324; --amber-dim:rgba(217,131,36,.12); --cta:#00C892; --cta-ink:#00251b; --shadow-sm:0 1px 2px rgba(15,15,25,.06); --shadow:0 12px 32px -14px rgba(15,15,25,.18); --shadow-lg:0 30px 70px -25px rgba(15,15,25,.22); --topbar-bg:rgba(246,246,249,.78); --scrim:rgba(15,15,25,.35); } /* ----------------------------------------------------------------- Base */ *{box-sizing:border-box} html{ -webkit-text-size-adjust:100%; } body{ margin:0; background:var(--bg); color:var(--text); font-family:"DM Sans",system-ui,-apple-system,sans-serif; font-size:15px; line-height:1.5; letter-spacing:-.005em; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; transition:background .25s ease,color .25s ease; } a{color:var(--text);text-decoration:none} a:hover{text-decoration:none} h1,h2,h3,h4{font-family:"Sora",sans-serif;letter-spacing:-.02em} button{font-family:inherit} ::selection{background:var(--accent-dim);color:var(--text)} .font-head{font-family:"Sora",sans-serif} .mono{font-family:"JetBrains Mono",ui-monospace,monospace} .muted{color:var(--muted)} .dim{color:var(--dim)} .grow{flex:1} /* scrollbar */ *{scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent} *::-webkit-scrollbar{width:10px;height:10px} *::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:99px;border:3px solid transparent;background-clip:content-box} *::-webkit-scrollbar-thumb:hover{background:var(--dim);background-clip:content-box} /* svg icons herdam a cor */ .ic{width:18px;height:18px;flex-shrink:0;stroke:currentColor;fill:none; stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round} /* ----------------------------------------------------------------- Shell */ .layout{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100dvh} .sidebar{ position:sticky;top:0;height:100dvh;align-self:start; background:var(--surface);border-right:1px solid var(--border); display:flex;flex-direction:column;padding:18px 14px;gap:2px;z-index:30; } .brand-mark{display:flex;align-items:center;gap:11px;padding:8px 10px 18px;text-decoration:none} .brand-logo{width:30px;height:30px;border-radius:9px;display:grid;place-items:center; background:linear-gradient(140deg,var(--mint),var(--indigo));color:#04231a;box-shadow:var(--shadow-sm)} .brand-logo svg{width:17px;height:17px;stroke:#04231a;fill:none;stroke-width:2.2} .brand-name{font-family:"Sora",sans-serif;font-weight:700;font-size:16px;letter-spacing:-.01em} .brand-name small{display:block;font-family:"JetBrains Mono",monospace;font-weight:400; font-size:9.5px;letter-spacing:.18em;color:var(--dim);margin-top:1px} /* compat: marca textual usada nas telas de login */ .brand{font-family:"Sora",sans-serif;font-weight:700;font-size:14px;letter-spacing:.04em;color:var(--mint)} .nav-section{padding:14px 10px 6px;font-size:10.5px;font-weight:600;letter-spacing:.13em; text-transform:uppercase;color:var(--dim)} .nav-item{position:relative;display:flex;align-items:center;gap:11px; padding:9px 11px;border-radius:var(--r-sm);color:var(--muted); font-weight:500;font-size:14px;transition:background .15s,color .15s} .nav-item .ic{width:18px;height:18px;opacity:.85} .nav-item:hover{background:var(--hover);color:var(--text)} .nav-item.active{background:var(--accent-dim);color:var(--text)} .nav-item.active .ic{opacity:1;color:var(--accent)} .nav-item.active::before{content:"";position:absolute;left:-14px;top:50%;transform:translateY(-50%); width:3px;height:20px;border-radius:0 3px 3px 0;background:var(--accent)} .nav-item .tag{margin-left:auto;font-size:9.5px;padding:2px 7px;border-radius:var(--pill); background:var(--hover);color:var(--dim);font-family:"JetBrains Mono",monospace} .sidebar-foot{margin-top:auto;padding-top:10px;border-top:1px solid var(--border)} .sidebar-foot .nav-item{width:100%;background:none;border:0;text-align:left;cursor:pointer} /* main + topbar */ .main{display:flex;flex-direction:column;min-width:0} .topbar{ position:sticky;top:0;z-index:20;height:var(--topbar-h); display:flex;align-items:center;gap:14px;padding:0 24px; border-bottom:1px solid var(--border);background:var(--topbar-bg); backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px); } .menu-btn{display:none;background:none;border:0;color:var(--muted);cursor:pointer;padding:6px} .breadcrumb{display:flex;align-items:center;gap:8px;min-width:0;font-size:14px} .breadcrumb a{color:var(--muted);white-space:nowrap} .breadcrumb a:hover{color:var(--text)} .breadcrumb .here{color:var(--text);font-weight:600;font-family:"Sora",sans-serif; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .breadcrumb .sep{color:var(--dim);flex-shrink:0;display:flex} .breadcrumb .sep svg{width:15px;height:15px;display:block} .topbar-actions{display:flex;align-items:center;gap:9px;margin-left:auto} /* botão de busca / command palette */ .cmdk-btn{display:flex;align-items:center;gap:9px;height:36px;padding:0 11px 0 12px; background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-sm); color:var(--muted);font-size:13px;cursor:pointer;transition:border .15s,color .15s;min-width:190px} .cmdk-btn:hover{border-color:var(--border-strong);color:var(--text)} .cmdk-btn .ic{width:16px;height:16px} .cmdk-btn .lbl{flex:1;text-align:left} .kbd{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--dim); background:var(--hover);border:1px solid var(--border);border-radius:6px;padding:2px 6px;line-height:1} .icon-btn{display:grid;place-items:center;width:36px;height:36px;border-radius:var(--r-sm); background:transparent;border:1px solid var(--border);color:var(--muted);cursor:pointer;transition:.15s} .icon-btn:hover{color:var(--text);border-color:var(--border-strong);background:var(--hover)} .icon-btn .ic{width:18px;height:18px} [data-theme="dark"] .theme-ic-sun{display:none} [data-theme="light"] .theme-ic-moon{display:none} .status-pill{display:flex;align-items:center;gap:7px;height:36px;padding:0 12px; border-radius:var(--pill);border:1px solid var(--border);background:var(--bg-2); font-size:12.5px;color:var(--muted);font-family:"JetBrains Mono",monospace} /* avatar + menu */ .avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center; background:linear-gradient(140deg,var(--indigo),#9aa0ff);color:#fff; font-family:"Sora",sans-serif;font-weight:600;font-size:13.5px;letter-spacing:.02em} .avatar-wrap{position:relative} .avatar-btn{display:flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer;padding:1px;border-radius:var(--pill)} .avatar-btn .chev{color:var(--dim);transition:transform .18s} .avatar-btn[aria-expanded="true"] .chev{transform:rotate(180deg)} .menu{position:absolute;right:0;top:46px;min-width:220px;background:var(--surface); border:1px solid var(--border-strong);border-radius:var(--r-sm);box-shadow:var(--shadow-lg); padding:6px;opacity:0;transform:translateY(-6px) scale(.98);transform-origin:top right; pointer-events:none;transition:.16s ease;z-index:40} .menu.open{opacity:1;transform:none;pointer-events:auto} .menu .who{padding:9px 11px 11px;border-bottom:1px solid var(--border);margin-bottom:5px} .menu .who .n{font-weight:600;font-size:14px} .menu .who .e{font-size:12.5px;color:var(--muted);font-family:"JetBrains Mono",monospace; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .menu a,.menu button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 11px; border-radius:var(--r-xs);color:var(--muted);font-size:13.5px;background:none;border:0; text-align:left;cursor:pointer;transition:.13s} .menu a:hover,.menu button:hover{background:var(--hover);color:var(--text)} .menu .ic{width:16px;height:16px} .menu .danger:hover{color:var(--coral)} .content{padding:28px 24px 56px;max-width:1180px;width:100%;margin:0 auto} .page-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px} .page-intro h1{font-size:24px;font-weight:700;margin:0 0 3px} .page-intro p{color:var(--muted);font-size:14px;margin:0} /* ------------------------------------------------- Command palette */ .cmdk-overlay{position:fixed;inset:0;z-index:60;background:var(--scrim); backdrop-filter:blur(3px);display:flex;align-items:flex-start;justify-content:center; padding-top:14vh;opacity:0;pointer-events:none;transition:opacity .15s} .cmdk-overlay.open{opacity:1;pointer-events:auto} .cmdk-panel{width:min(560px,92vw);background:var(--surface);border:1px solid var(--border-strong); border-radius:var(--r);box-shadow:var(--shadow-lg);overflow:hidden;transform:translateY(-8px) scale(.99);transition:transform .16s} .cmdk-overlay.open .cmdk-panel{transform:none} .cmdk-head{display:flex;align-items:center;gap:11px;padding:14px 16px;border-bottom:1px solid var(--border)} .cmdk-head .ic{width:19px;height:19px;color:var(--muted)} .cmdk-input{flex:1;background:none;border:0;outline:none;color:var(--text);font-size:16px;font-family:inherit} .cmdk-input::placeholder{color:var(--dim)} .cmdk-list{max-height:340px;overflow:auto;padding:7px} .cmdk-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r-sm); color:var(--muted);cursor:pointer} .cmdk-item .ic{width:17px;height:17px} .cmdk-item .sub{margin-left:auto;font-size:11px;color:var(--dim);font-family:"JetBrains Mono",monospace} .cmdk-item[aria-selected="true"]{background:var(--accent-dim);color:var(--text)} .cmdk-item[aria-selected="true"] .ic{color:var(--accent)} .cmdk-empty{padding:26px;text-align:center;color:var(--dim);font-size:14px} /* ----------------------------------------------------------------- Buttons */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px; font-family:"Sora",sans-serif;font-weight:600;font-size:13.5px; padding:10px 16px;border-radius:var(--r-sm);border:1px solid transparent; cursor:pointer;transition:.15s ease;white-space:nowrap} .btn .ic{width:16px;height:16px} .btn-primary{background:var(--cta);color:var(--cta-ink)} .btn-primary:hover{filter:brightness(1.07);box-shadow:0 0 0 4px var(--mint-dim)} .btn-accent{background:var(--accent);color:#fff} .btn-accent:hover{filter:brightness(1.07);box-shadow:0 0 0 4px var(--accent-dim)} .btn-ghost{background:transparent;color:var(--muted);border-color:var(--border-strong)} .btn-ghost:hover{color:var(--text);border-color:var(--muted);background:var(--hover)} .btn-danger{background:var(--coral-dim);color:var(--coral);border-color:rgba(255,107,107,.3)} .btn-danger:hover{background:var(--coral);color:#fff} .btn-block{width:100%} .btn-sm{padding:7px 12px;font-size:12.5px} /* ----------------------------------------------------------------- Cards */ .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r); padding:26px;box-shadow:var(--shadow-sm)} .card + .card{margin-top:16px} .section-title{font-family:"Sora",sans-serif;font-size:15.5px;font-weight:600;margin:0 0 16px} .grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;align-items:start} .tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-bottom:24px} .tile{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:18px;box-shadow:var(--shadow-sm)} .tile .k{font-size:11.5px;color:var(--dim);margin-bottom:9px;text-transform:uppercase;letter-spacing:.05em;font-weight:600} .tile .v{font-family:"Sora",sans-serif;font-size:23px;font-weight:700;letter-spacing:-.02em} .tile .v small{font-size:13px;color:var(--muted);font-weight:500} .bar{height:6px;background:var(--bg-2);border-radius:3px;margin-top:11px;overflow:hidden} .bar > span{display:block;height:100%;border-radius:3px} .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-bottom:26px} .stat{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r); padding:20px;box-shadow:var(--shadow-sm);overflow:hidden} .stat::after{content:"";position:absolute;inset:0 0 auto auto;width:120px;height:120px; background:radial-gradient(circle at 100% 0,var(--accent-dim),transparent 70%);opacity:.7;pointer-events:none} .stat .k{font-size:12.5px;color:var(--dim);margin-bottom:9px;font-weight:500} .stat .v{font-family:"Sora",sans-serif;font-size:30px;font-weight:700;letter-spacing:-.025em} .stat .v small{font-size:14px;color:var(--muted);font-weight:500} .stat-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;position:relative;z-index:1} .stat-top .k{margin:0} .stat-ico{display:grid;place-items:center;width:36px;height:36px;border-radius:11px; background:var(--accent-dim);color:var(--accent);position:relative;z-index:1} .stat-ico .ic{width:19px;height:19px} .stat .v{position:relative;z-index:1} .card-head{display:flex;align-items:center;gap:10px;margin-bottom:16px} .card-head .ic{width:18px;height:18px;color:var(--muted)} .card-head h3{font-family:"Sora",sans-serif;font-size:15.5px;font-weight:600;margin:0} .card-head .grow{flex:1} /* ----------------------------------------------------------------- Badges */ .badge{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:500; font-family:"JetBrains Mono",monospace;padding:4px 10px;border-radius:var(--pill)} .badge-mint{color:var(--mint);background:var(--mint-dim);border:1px solid rgba(0,229,160,.24)} .badge-indigo{color:var(--accent);background:var(--accent-dim);border:1px solid var(--border-strong)} .badge-dim{color:var(--muted);background:var(--hover);border:1px solid var(--border)} .badge-warn{color:var(--amber);background:var(--amber-dim);border:1px solid rgba(255,181,71,.26)} .badge-coral{color:var(--coral);background:var(--coral-dim);border:1px solid rgba(255,107,107,.26)} .dot{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 9px currentColor} /* ----------------------------------------------------------------- Forms */ .field{margin-bottom:18px} .label{display:block;font-size:13px;font-weight:500;color:var(--muted);margin-bottom:7px} .input{width:100%;background:var(--bg-2);color:var(--text); border:1px solid var(--border-strong);border-radius:var(--r-sm); padding:11px 13px;font-size:14.5px;font-family:inherit;transition:border .15s,box-shadow .15s} .input::placeholder{color:var(--dim)} .input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-dim)} .input.code{font-family:"JetBrains Mono",monospace;font-size:22px;letter-spacing:8px;text-align:center} select.input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23A1A1AA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;padding-right:38px} /* ----------------------------------------------------------------- Alerts */ .alert{display:flex;align-items:center;gap:10px;border-radius:var(--r-sm);padding:12px 14px; font-size:14px;margin-bottom:18px;border:1px solid transparent} .alert .ic{width:18px;height:18px;flex-shrink:0} .alert-error{background:var(--coral-dim);color:var(--coral);border-color:rgba(255,107,107,.26)} .alert-success{background:var(--mint-dim);color:var(--mint);border-color:rgba(0,229,160,.26)} /* ----------------------------------------------------------------- Tables */ .table{width:100%;border-collapse:collapse;font-size:14px} .table th{text-align:left;color:var(--dim);font-weight:600;font-size:11.5px;padding:11px 14px; text-transform:uppercase;letter-spacing:.05em} .table td{padding:13px 14px;border-top:1px solid var(--border)} .table tbody tr{transition:background .12s} .table tbody tr:hover td{background:var(--hover)} /* --------------------------------------------------- Site detail header */ .site-head{margin-bottom:4px} .site-head .crumb{font-size:12.5px;color:var(--dim);margin-bottom:12px} .site-head .crumb a{color:var(--muted)} .site-head .row{display:flex;align-items:center;gap:13px;flex-wrap:wrap} .site-head h1{font-size:25px;font-weight:700;margin:0} .site-head h1 a{color:var(--text)} .tabs{display:flex;gap:3px;border-bottom:1px solid var(--border);margin:20px 0 26px;overflow-x:auto} .tab{display:inline-flex;align-items:center;gap:7px;padding:11px 14px;color:var(--muted); font-size:13.5px;font-weight:500;border-bottom:2px solid transparent;white-space:nowrap;transition:color .15s} .tab .ic{width:15px;height:15px} .tab:hover{color:var(--text)} .tab.active{color:var(--text);border-bottom-color:var(--accent)} .kv{display:grid;grid-template-columns:auto 1fr;gap:11px 18px;font-size:14px} .kv dt{color:var(--dim)} .kv dd{font-family:"JetBrains Mono",monospace;text-align:right} /* ----------------------------------------------------------------- Portal */ .portal-top{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between; gap:12px;padding:0 18px;height:58px;background:var(--topbar-bg); backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px); border-bottom:1px solid var(--border)} .portal-top .brand-mark{padding:0} .portal-wrap{max-width:780px;margin:0 auto;padding:26px 18px 64px} .portal-greet{font-family:"Sora",sans-serif;font-size:23px;font-weight:600;margin:0 0 4px} .site-card{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--surface); border:1px solid var(--border);border-radius:var(--r);padding:18px;margin-bottom:12px; box-shadow:var(--shadow-sm);transition:border .15s,transform .15s} .site-card:hover{border-color:var(--border-strong)} .site-card .dom{font-family:"JetBrains Mono",monospace;font-size:15px} .site-card .actions{display:flex;gap:8px;flex-wrap:wrap} @media(max-width:560px){ .site-card{flex-direction:column;align-items:flex-start} .site-card .actions{width:100%} .site-card .actions .btn{flex:1} } /* ----------------------------------------------------------------- Editor */ .editor-shell{display:flex;flex-direction:column;height:100dvh;overflow:hidden} .editor-bar{display:flex;align-items:center;gap:14px;padding:0 16px;height:58px;flex-shrink:0; background:var(--surface);border-bottom:1px solid var(--border);z-index:10} .editor-bar .e-title{display:flex;align-items:center;gap:11px;min-width:0} .editor-bar .e-title b{font-family:"Sora",sans-serif;font-weight:600;font-size:14.5px} .editor-bar .e-title .dom{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--muted); white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:38vw} .editor-bar .spacer{flex:1} .back-btn{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;color:var(--muted); border:1px solid var(--border);flex-shrink:0;transition:.15s} .back-btn:hover{color:var(--text);border-color:var(--muted)} .e-status{font-size:12.5px;color:var(--dim);min-width:120px;text-align:right} .e-status.dirty{color:var(--amber)} .e-status.saved{color:var(--mint)} .seg{display:inline-flex;background:var(--bg-2);border:1px solid var(--border-strong);border-radius:11px;padding:3px;gap:2px} .seg button{border:0;background:transparent;color:var(--muted);font-size:13px;padding:6px 13px;border-radius:8px; cursor:pointer;font-family:"DM Sans",sans-serif;display:flex;align-items:center;gap:6px;transition:.12s} .seg button:hover{color:var(--text)} .seg button.active{background:var(--elevated);color:var(--text);box-shadow:var(--shadow-sm)} .editor-canvas{flex:1;overflow:auto;display:flex;justify-content:center;padding:22px; background:radial-gradient(60rem 30rem at 50% -5%,var(--accent-dim),transparent 60%),var(--bg)} .frame{height:100%;width:100%;max-width:1320px;display:flex;transition:max-width .35s cubic-bezier(.4,0,.2,1)} .frame.tablet{max-width:834px} .frame.mobile{max-width:402px} .device{flex:1;display:flex;background:#fff;border:1px solid var(--border);border-radius:10px;overflow:hidden;box-shadow:var(--shadow-lg)} .frame.mobile .device{border:11px solid #14141B;border-radius:34px} .device iframe{flex:1;width:100%;height:100%;border:0;display:block;background:#fff} /* ----------------------------------------------------------------- Heatmap */ .hm-ctrls{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:14px} .hm-ctrls label{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:7px} .hm-wrap{position:relative;overflow:auto;max-height:74vh;border:1px solid var(--border);border-radius:var(--r-sm);background:#fff} .hm-stage{position:relative;transform-origin:0 0} .hm-stage iframe{border:0;display:block;background:#fff} .hm-overlay{position:absolute;left:0;top:0;pointer-events:none} .hm-pt{position:absolute;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;mix-blend-mode:multiply} .hm-rage{position:absolute;border:2px solid #FF6B6B;border-radius:50%;width:22px;height:22px;transform:translate(-50%,-50%);box-shadow:0 0 8px rgba(255,107,107,.6);pointer-events:none} /* ----------------------------------------------------------------- Toast */ .toast{position:fixed;top:74px;left:50%;transform:translateX(-50%);z-index:50; background:var(--elevated);border:1px solid var(--border-strong);border-radius:11px; padding:11px 18px;font-size:14px;box-shadow:var(--shadow-lg);opacity:0; transition:opacity .25s,transform .25s;pointer-events:none} .toast.show{opacity:1;transform:translateX(-50%) translateY(4px)} .toast.ok{color:var(--mint)} .toast.err{color:var(--coral)} /* ----------------------------------------------------------------- Misc */ .empty{text-align:center;padding:46px 24px;color:var(--muted)} .empty .ic{width:30px;height:30px;color:var(--dim);margin:0 auto 12px;display:block;stroke-width:1.5} .qr{background:#fff;padding:14px;border-radius:var(--r-sm);width:fit-content;margin:0 auto 18px} .secret{font-family:"JetBrains Mono",monospace;font-size:14px;background:var(--bg-2); border:1px dashed var(--border-strong);border-radius:var(--r-sm);padding:12px;text-align:center; word-break:break-all;color:var(--mint);margin-bottom:18px} .codes{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:18px 0} .codes code{font-family:"JetBrains Mono",monospace;background:var(--bg-2);border:1px solid var(--border); border-radius:var(--r-sm);padding:11px;text-align:center;font-size:15px;letter-spacing:1px} /* ----------------------------------------------------------------- Auth */ .auth-wrap{min-height:100dvh;display:grid;place-items:center;padding:24px; background-image:radial-gradient(60rem 40rem at 78% -12%,var(--accent-dim),transparent 60%), radial-gradient(50rem 40rem at -12% 112%,var(--mint-dim),transparent 55%)} .auth-card{width:min(424px,100%);background:var(--surface);border:1px solid var(--border); border-radius:var(--r-lg);padding:38px;box-shadow:var(--shadow-lg)} .auth-card .brand-mark{padding:0 0 4px} .auth-card h1{font-weight:700;font-size:25px;margin:18px 0 5px} .auth-card .lead{color:var(--muted);font-size:14.5px;margin-bottom:26px} /* ----------------------------------------------------------------- Responsive */ @media(max-width:900px){ :root{--sidebar-w:0px} .menu-btn{display:grid;place-items:center} .sidebar{position:fixed;left:0;top:0;width:264px;transform:translateX(-100%); transition:transform .25s cubic-bezier(.4,0,.2,1);box-shadow:var(--shadow-lg)} .sidebar.open{transform:none} .scrim{position:fixed;inset:0;background:var(--scrim);z-index:25;opacity:0;pointer-events:none;transition:opacity .2s} .scrim.show{opacity:1;pointer-events:auto} .cmdk-btn{min-width:0;width:36px;padding:0;justify-content:center} .cmdk-btn .lbl,.cmdk-btn .kbd{display:none} .status-pill{display:none} .content{padding:22px 16px 48px} } @media(max-width:520px){ .breadcrumb .crumb-link{display:none} .topbar{padding:0 14px} } /* tabelas roláveis no mobile (evita quebra de layout) */ @media(max-width:640px){ table.table{display:block;width:100%;overflow-x:auto;white-space:nowrap} } /* ----------------------------------------------------------------- Print (PDF) */ @media print{ .sidebar,.topbar,.scrim,.hm-ctrls,.seg,.no-print,.page-intro .btn,form.no-print{display:none!important} .layout{display:block} .main{min-width:0} .content{max-width:100%;padding:0} body{background:#fff;color:#000} .card{break-inside:avoid;box-shadow:none;border-color:#ddd} .hm-wrap{max-height:none} a[href]:after{content:""} }