/* ============================================================ Portal da empresa — a MESMA linguagem visual do Quibt Studio. Tokens, tipografia (Hanken Grotesk), raios, barra lateral, cards, chips e botões copiados de apps/desktop/src/renderer/styles/app.css. Autossuficiente: não depende do admin.css. Tema claro por padrão, escuro pelo sistema ou pelo botão do rodapé (data-theme no ). ============================================================ */ @font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/hanken-grotesk-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/hanken-grotesk-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/jetbrains-mono-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ---------- tokens (= app.css do Studio) ---------- */ :root { color-scheme: light; --accent: #0071fb; --accent-hover: #005fe0; --accent-foreground: #ffffff; --accent-soft: #e7f1ff; --accent-soft-border: #cfe3ff; --solid-bg: #18181b; --solid-fg: #ffffff; --bg-app: #f5f5f7; --bg-behind: #e4e4e8; --panel: #ffffff; --surface: #fafafa; --surface-2: #f7f7f9; --border: #ececef; --border-subtle: #f0f0f3; --border-subtle-2: #f5f5f7; --ink: #18181b; --ink-2: #27272a; --ink-3: #3f3f46; --ink-4: #52525b; --muted: #71717a; --weak: #a1a1aa; --weaker: #c4c4cc; --success: #16a34a; --success-text: #15803d; --success-bg: #dcfce7; --success-border: #bbf7d0; --amber: #d97706; --amber-text: #b45309; --amber-bg: #fef3c7; --amber-border: #fde68a; --red: #dc2626; --red-text: #b91c1c; --red-bg: #fee2e2; --red-border: #fecaca; --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --text-xs: 11px; --text-sm: 12px; --text-base: 13px; --text-md: 14px; --text-lg: 16px; --text-xl: 22px; --text-2xl: 32px; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --shadow-xs: 0 1px 2px rgba(24, 24, 27, 0.04); --shadow-sm: 0 1px 3px rgba(24, 24, 27, 0.06); --shadow-md: 0 12px 34px rgba(0, 0, 0, 0.16); --shadow-lg: 0 24px 70px rgba(0, 0, 0, 0.4); --font-ui: "Hanken Grotesk", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace; --sidebar-w: 236px; --content-max: 1080px; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --accent: #3b8cff; --accent-hover: #60a5fa; --accent-soft: color-mix(in srgb, var(--accent) 18%, var(--panel)); --accent-soft-border: color-mix(in srgb, var(--accent) 34%, var(--panel)); --solid-bg: #f4f4f5; --solid-fg: #18181b; --bg-app: #1a1a1e; --bg-behind: #0f0f12; --panel: #232327; --surface: #1f1f23; --surface-2: #26262b; --border: #34343a; --border-subtle: #2b2b30; --border-subtle-2: #292930; --ink: #f4f4f5; --ink-2: #e4e4e7; --ink-3: #d4d4d8; --ink-4: #b4b4bb; --muted: #a1a1aa; --weak: #8a8a93; --weaker: #5c5c64; --success: #22c55e; --success-text: #4ade80; --success-bg: #0f2a1a; --success-border: #14532d; --amber: #f59e0b; --amber-text: #fbbf24; --amber-bg: #2a1f08; --amber-border: #78350f; --red: #ef4444; --red-text: #f87171; --red-bg: #2a1212; --red-border: #5b1d1d; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.28); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-md: 0 12px 34px rgba(0, 0, 0, 0.55); --shadow-lg: 0 24px 70px rgba(0, 0, 0, 0.7); } } :root[data-theme="dark"] { color-scheme: dark; --accent: #3b8cff; --accent-hover: #60a5fa; --accent-soft: color-mix(in srgb, var(--accent) 18%, var(--panel)); --accent-soft-border: color-mix(in srgb, var(--accent) 34%, var(--panel)); --solid-bg: #f4f4f5; --solid-fg: #18181b; --bg-app: #1a1a1e; --bg-behind: #0f0f12; --panel: #232327; --surface: #1f1f23; --surface-2: #26262b; --border: #34343a; --border-subtle: #2b2b30; --border-subtle-2: #292930; --ink: #f4f4f5; --ink-2: #e4e4e7; --ink-3: #d4d4d8; --ink-4: #b4b4bb; --muted: #a1a1aa; --weak: #8a8a93; --weaker: #5c5c64; --success: #22c55e; --success-text: #4ade80; --success-bg: #0f2a1a; --success-border: #14532d; --amber: #f59e0b; --amber-text: #fbbf24; --amber-bg: #2a1f08; --amber-border: #78350f; --red: #ef4444; --red-text: #f87171; --red-bg: #2a1212; --red-border: #5b1d1d; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.28); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-md: 0 12px 34px rgba(0, 0, 0, 0.55); --shadow-lg: 0 24px 70px rgba(0, 0, 0, 0.7); } /* ---------- base ---------- */ * { box-sizing: border-box; } html, body { margin: 0; min-height: 100dvh; } body.portal-body { font-family: var(--font-ui); font-size: var(--text-md); line-height: 1.45; color: var(--ink); background: var(--bg-app); -webkit-font-smoothing: antialiased; } button, input, select, textarea { font: inherit; color: inherit; } b, strong { font-weight: var(--fw-semibold); } .muted { color: var(--muted); } .mono { font-family: var(--font-mono); font-size: var(--text-sm); } [hidden] { display: none !important; } /* ---------- controles (= Studio: settings-input, btn-primary, btn-ghost, chips) ---------- */ input:where(:not([type="checkbox"]):not([type="file"]):not([type="radio"])), select, textarea, .select { width: 100%; min-width: 0; height: 34px; padding: 0 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: var(--text-base); color: var(--ink-2); outline: none; transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; } select, .select { appearance: none; -webkit-appearance: none; padding-right: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2371717a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 14px; } textarea { height: auto; padding: 10px 12px; resize: vertical; } input::placeholder, textarea::placeholder { color: var(--weak); } input:focus, select:focus, textarea:focus { border-color: var(--accent); background: var(--panel); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); } input[type="date"] { width: auto; } input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); } .btn-primary, button[type="submit"]:not(.compact):not(.btn-ghost), .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 34px; padding: 0 14px; background: var(--accent); color: var(--accent-foreground); border: none; border-radius: var(--radius-sm); font-size: var(--text-base); font-weight: var(--fw-semibold); cursor: pointer; white-space: nowrap; transition: background 0.15s, transform 0.1s; } .btn-primary:hover, button[type="submit"]:not(.compact):not(.btn-ghost):hover, .btn:hover { background: var(--accent-hover); } .btn-primary:active, .btn:active { transform: translateY(1px); } .btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 12px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: var(--text-base); font-weight: var(--fw-medium); color: var(--ink-4); cursor: pointer; white-space: nowrap; transition: background 0.15s, border-color 0.15s, color 0.15s; } .btn-ghost:hover { background: var(--surface); border-color: var(--weak); color: var(--ink); } button.compact, label.compact { display: inline-flex; align-items: center; justify-content: center; height: 28px; padding: 0 10px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--ink-4); cursor: pointer; white-space: nowrap; transition: background 0.15s, border-color 0.15s, color 0.15s; } button.compact:hover, label.compact:hover { background: var(--surface); border-color: var(--weak); color: var(--ink); } button.compact.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-foreground); font-weight: var(--fw-semibold); } button.compact.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); } button.compact.danger { color: var(--red-text); } button.compact.danger:hover { background: var(--red-bg); border-color: var(--red-border); color: var(--red-text); } button:disabled, button.compact:disabled, .btn-ghost:disabled { opacity: 0.55; cursor: not-allowed; } .chip { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border-radius: 999px; font-size: var(--text-xs); font-weight: var(--fw-semibold); line-height: 1; white-space: nowrap; background: var(--surface-2); color: var(--ink-4); border: 1px solid var(--border-subtle); } .chip.owner { background: var(--accent-soft); border-color: transparent; color: var(--accent); } .chip.ok { background: var(--success-bg); border-color: transparent; color: var(--success-text); } .chip.ok::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--success); } .chip.off { background: var(--red-bg); border-color: transparent; color: var(--red-text); } /* ---------- login (= EntryShell do Studio) ---------- */ .portal-login { min-height: 100dvh; display: grid; place-items: center; padding: 24px; background: var(--bg-behind); } .portal-login-card { width: min(420px, 100%); background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px 28px 24px; box-shadow: var(--shadow-md); display: grid; gap: 12px; } .portal-login-brand { display: flex; align-items: center; gap: 8px; font-weight: var(--fw-semibold); font-size: var(--text-base); color: var(--ink); } .brand-logo { display: block; flex: none; width: 22px; height: 22px; object-fit: contain; user-select: none; -webkit-user-drag: none; } .portal-login-brand .brand-logo { width: 26px; height: 26px; } .portal-login-card h1 { margin: 6px 0 0; font-size: var(--text-xl); font-weight: var(--fw-semibold); letter-spacing: -0.02em; line-height: 1.2; } .portal-login-card > .muted { margin: -8px 0 4px; font-size: var(--text-base); } .field { display: grid; gap: 6px; } .field > span { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--ink-4); } .portal-login-card input { height: 42px; padding: 0 14px; border-radius: var(--radius-md); font-size: var(--text-md); font-weight: var(--fw-medium); } .portal-login-card button[type="submit"] { height: 42px; margin-top: 4px; border-radius: var(--radius-md); font-size: var(--text-md); } .portal-login-foot { margin: 2px 0 0; font-size: var(--text-sm); line-height: 1.5; color: var(--weak); } .login-switch { color: var(--accent); font-weight: var(--fw-semibold); text-decoration: none; } .login-switch:hover { text-decoration: underline; } .login-error { margin: 0; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--red-bg); color: var(--red-text); font-size: var(--text-base); } /* ---------- casca (= teia-sidebar do Studio) ---------- */ .portal-brand { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 6px; margin: 0 0 6px; color: var(--ink); font-size: var(--text-base); font-weight: var(--fw-semibold); } .portal-brand .brand-logo { width: 18px; height: 18px; } .portal-brand-sub { margin-left: auto; font-size: var(--text-xs); font-weight: var(--fw-medium); color: var(--weak); white-space: nowrap; } .shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100dvh; } .sidebar { position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; gap: 1px; padding: 12px 8px 10px; background: var(--bg-app); border-right: 1px solid var(--border-subtle); overflow: hidden; } .company { display: flex; align-items: center; gap: 9px; min-width: 0; height: 40px; padding: 0 6px; margin: 0 0 12px; border-top: 1px solid var(--border-subtle); padding-top: 6px; } .company-mark { flex: none; width: 26px; height: 26px; border-radius: var(--radius-xs); background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font-weight: var(--fw-bold); font-size: var(--text-sm); display: grid; place-items: center; overflow: hidden; object-fit: cover; box-shadow: inset 0 0 0 1px var(--border-subtle); } img.company-mark { background: var(--panel); } .company-text { min-width: 0; line-height: 1.2; } .company-name { font-weight: var(--fw-semibold); font-size: var(--text-base); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .company-plan { font-size: var(--text-xs); text-transform: capitalize; } .nav { display: flex; flex-direction: column; gap: 1px; } .nav-item { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; padding: 0 10px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink-2); font-size: var(--text-base); font-weight: var(--fw-medium); text-align: left; cursor: pointer; transition: background 0.12s, color 0.12s; } .nav-item svg { flex: none; width: 18px; height: 18px; padding: 1px; fill: currentColor; color: var(--ink-3); } .nav-item:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--ink); } .nav-item.is-active { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); } .nav-item.is-active svg { color: var(--accent); } .sidebar-foot { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--border-subtle); display: flex; align-items: center; gap: 6px; min-width: 0; } .me { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; padding: 4px 6px; border-radius: var(--radius-sm); } .me-avatar { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #6d4bf5, #3b8cff); color: #ffffff; font-size: var(--text-xs); font-weight: var(--fw-bold); } .me-text { min-width: 0; line-height: 1.2; } .me-email { font-size: var(--text-base); font-weight: var(--fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .me-role { font-size: var(--text-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-icon-btn { flex: none; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink-4); cursor: pointer; } .sidebar-icon-btn:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); } .sidebar-icon-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .sidebar-foot .btn-ghost { height: 30px; padding: 0 10px; font-size: var(--text-sm); } .sidebar-icon-btn.danger:hover { background: var(--red-bg); color: var(--red-text); } /* ---------- conteúdo ---------- */ .content { min-width: 0; padding: 26px 36px 64px; background: var(--bg-app); } .tab-panel { max-width: var(--content-max); display: grid; gap: 16px; } .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding-bottom: 2px; } .page-title { margin: 0 0 3px; font-size: var(--text-xl); font-weight: var(--fw-semibold); letter-spacing: -0.02em; line-height: 1.2; } .page-head .muted { margin: 0; font-size: var(--text-base); color: var(--weak); } .page-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .page-tools label { display: flex; align-items: center; gap: 6px; font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--ink-4); } .page-tools input, .page-tools select, .page-tools .select { width: auto; } /* ---------- cartões e KPIs (= settings-card do Studio) ---------- */ .card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px 18px; box-shadow: var(--shadow-xs); } .card-title { display: flex; align-items: baseline; gap: 8px; margin: 0 0 12px; font-size: var(--text-md); font-weight: var(--fw-semibold); } .card-title .muted { font-weight: var(--fw-regular); font-size: var(--text-sm); color: var(--weak); } .card-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; } .two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; } .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; } .kpi { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 16px; box-shadow: var(--shadow-xs); } .kpi b { display: block; font-size: var(--text-xl); font-weight: var(--fw-semibold); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.15; } .kpi span { display: block; margin-top: 3px; font-size: var(--text-sm); color: var(--muted); } .kpis.compact .kpi { padding: 10px 12px; background: var(--surface); border-color: var(--border-subtle); box-shadow: none; } .kpis.compact .kpi b { font-size: var(--text-lg); } .kpi .bar { margin-top: 10px; } .note { margin: 10px 0 0; font-size: var(--text-sm); line-height: 1.5; color: var(--muted); } .card > .note:last-child { margin-bottom: 0; } .download-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 2px; } .download-btn { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border: 1px solid var(--accent); border-radius: var(--radius-sm); background: var(--accent); color: var(--accent-foreground); text-decoration: none; font-weight: var(--fw-semibold); font-size: var(--text-base); } .download-btn.secondary { background: var(--panel); border-color: var(--border); color: var(--ink-3); } .download-btn small { font-weight: var(--fw-regular); opacity: 0.8; } /* ---------- tabelas (= linhas de Configurações do Studio) ---------- */ .table { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-xs); } .card > .table { border: 0; border-radius: 0; box-shadow: none; margin: 0 -18px -16px; border-top: 1px solid var(--border-subtle); } .row { display: grid; align-items: center; gap: 12px; padding: 11px 16px; border-top: 1px solid var(--border-subtle-2); font-size: var(--text-base); transition: background 0.1s; } .row:first-child { border-top: 0; } .row:not(.head):hover { background: color-mix(in srgb, var(--ink) 2.5%, transparent); } .row.head { background: var(--surface); color: var(--muted); font-size: var(--text-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.04em; padding: 8px 16px; } .row.people { grid-template-columns: minmax(220px, 1.6fr) minmax(140px, 1fr) minmax(110px, 0.8fr) 90px auto; } .row.usage-people { grid-template-columns: minmax(200px, 1.6fr) 120px 80px minmax(160px, 1fr); } .row.events { grid-template-columns: 150px minmax(180px, 1.4fr) minmax(160px, 1fr) 100px; } .row.teams { grid-template-columns: minmax(200px, 1.4fr) 100px 140px minmax(160px, 1fr) auto; } .row.library { grid-template-columns: minmax(220px, 1.6fr) minmax(160px, 1fr) 170px 110px auto; } .row.usage-teams { grid-template-columns: minmax(200px, 1.6fr) 120px minmax(160px, 1fr); } .row.devices { grid-template-columns: minmax(220px, 1.4fr) 150px 150px 120px auto; } .row.activity { grid-template-columns: 150px minmax(160px, 1fr) minmax(160px, 1fr) minmax(200px, 1.4fr); } .row.connections { grid-template-columns: minmax(200px, 1.4fr) minmax(200px, 1.6fr) 120px auto; } .row.invites { grid-template-columns: minmax(200px, 1.5fr) 120px minmax(150px, 1fr) auto; } .row.analytics { grid-template-columns: 1.5fr 1fr 0.8fr 0.6fr; } .row.analytics > span { min-width: 0; overflow-wrap: anywhere; } .row .primary-text { font-weight: var(--fw-semibold); color: var(--ink); } .row small { display: block; color: var(--muted); font-size: var(--text-sm); line-height: 1.4; } .row .num { font-variant-numeric: tabular-nums; } .row .actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; } .row.disabled > :not(.actions) { opacity: 0.55; } .row .editor { grid-column: 1 / -1; background: var(--surface); margin: 8px -16px -11px; padding: 14px 16px; border-top: 1px solid var(--border-subtle); } .row .editor .card-actions { margin-top: 12px; } .table.scroll { max-height: 520px; overflow: auto; } .empty { padding: 22px 16px; color: var(--muted); font-size: var(--text-base); } .quota-alert { color: var(--amber-text); font-weight: var(--fw-semibold); } .perm-line { display: block; margin-top: 4px; color: var(--muted); font-size: var(--text-xs); } /* ---------- barras e gráfico ---------- */ .bar { height: 5px; border-radius: 999px; background: var(--border-subtle); overflow: hidden; } .bar i { display: block; height: 100%; border-radius: 999px; background: var(--accent); } .bar i.hot { background: var(--amber); } .bar i.full { background: var(--red); } .chart { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: end; gap: 4px; height: 140px; padding-top: 8px; } .chart .col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; min-width: 0; } .chart .col i { display: block; width: 100%; max-width: 28px; background: var(--accent); border-radius: var(--radius-xs) var(--radius-xs) 0 0; opacity: 0.9; } .chart .col i.zero { background: var(--border-subtle); } .chart .col span { font-size: var(--text-xs); color: var(--weak); font-variant-numeric: tabular-nums; } /* ---------- formulários ---------- */ .editor-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 14px; } .editor-grid label, .portal-filters label { display: grid; gap: 6px; min-width: 0; font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--ink-4); } .editor-grid label small, .portal-filters label small { font-weight: var(--fw-regular); color: var(--weak); line-height: 1.4; } .editor-grid .form-actions { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; } .perm-title { margin: 14px 0 8px; font-size: var(--text-base); font-weight: var(--fw-semibold); } .perm-title .muted { font-weight: var(--fw-regular); color: var(--weak); } .perm-grid { padding: 12px 14px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--surface); } .portal-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 12px; } .portal-filters label { flex: 1 1 150px; } .portal-filters input, .portal-filters select { width: 100%; } .switch-row { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font-size: var(--text-base); } .switch-row input { margin-top: 2px; } .switch-row small { display: block; margin-top: 2px; color: var(--weak); } .logo-row { display: flex; align-items: center; gap: 16px; } .logo-big { width: 64px; height: 64px; border-radius: var(--radius-md); object-fit: cover; border: 1px solid var(--border); background: var(--panel); } .logo-empty { display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font-weight: var(--fw-bold); font-size: var(--text-xl); border: 0; } .logo-actions { display: flex; gap: 8px; flex-wrap: wrap; } .logo-pick { cursor: pointer; } /* ---------- convites ---------- */ .invites-card { margin-top: 4px; } .invites-card > .card-actions { margin: 0 0 10px; } .invites-card .table { margin-top: 12px; } .code-box { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-top: 12px; padding: 14px 16px; border: 1px solid var(--accent-soft-border); border-radius: var(--radius-md); background: var(--accent-soft); } .code-box-title { font-size: var(--text-base); font-weight: var(--fw-semibold); margin-bottom: 8px; } .code-box code { display: inline-block; font-family: var(--font-mono); font-size: var(--text-xl); font-weight: var(--fw-bold); letter-spacing: 0.08em; padding: 6px 12px; border-radius: var(--radius-sm); background: var(--panel); border: 1px solid var(--border); user-select: all; } .code-box p { margin: 8px 0 0; font-size: var(--text-sm); line-height: 1.5; } .code-box-actions { display: flex; flex-direction: column; gap: 6px; } /* ---------- toast ---------- */ .toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); max-width: min(560px, calc(100vw - 32px)); padding: 10px 16px; border-radius: var(--radius-sm); background: var(--solid-bg); color: var(--solid-fg); font-size: var(--text-base); font-weight: var(--fw-medium); box-shadow: var(--shadow-md); z-index: 50; } .toast.error { background: var(--red-text); color: #ffffff; } /* ---------- uso ---------- */ #analytics-from, #analytics-to { min-width: 135px; } #usage-more { justify-self: start; } /* ---------- telas estreitas ---------- */ @media (max-width: 860px) { .shell { grid-template-columns: 1fr; } .sidebar { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--border-subtle); } .nav { flex-direction: row; overflow-x: auto; gap: 2px; } .nav-item { width: auto; flex: none; } .sidebar-foot { margin-top: 8px; } .content { padding: 20px 16px 48px; } .row { grid-template-columns: 1fr 1fr !important; } .row.head { display: none; } .row .actions { grid-column: 1 / -1; justify-content: flex-start; } .page-head { flex-direction: column; align-items: flex-start; } } /* ---------- downloads (uma placa por plataforma e arquitetura) ---------- */ .download-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 14px; } .download-card .download-sub { margin: -6px 0 12px; } .download-card .download-btn { width: 100%; justify-content: center; box-sizing: border-box; } .download-card .download-alt { margin: 8px 0 0; font-size: var(--text-base); } .download-card .download-alt a { color: var(--ink-3); } .download-card .download-missing { color: var(--ink-3); margin: 0; } .link-btn { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }