:root { color-scheme: light; --bg: #f4eee6; --panel: #fbfaf7; --ink: #130b07; --muted: #756b64; --soft: #ece5dc; --line: #1b120d; --orange: #ff5a00; --orange-dark: #d94d00; --orange-soft: #ffe1cf; --green: #139a45; --danger: #bb2e24; --brown: #291611; --brown-deep: #160c09; --shadow-hard: 0 4px 0 #1b120d; --shadow-soft: 0 14px 32px rgba(27, 18, 13, 0.08); } * { box-sizing: border-box; } body { margin: 0; min-width: 320px; background: var(--bg); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } body.focus-mode { --bg: #fffaf2; --panel: #fffefd; --orange: #e64f00; } /* * Tema escuro global (botao "D" no cabecalho): fica no , nao no body, entao * cobre a tela de login tambem, antes de saber se quem esta entrando e admin ou * cliente. So redefine os tokens que o resto do CSS ja usa (--bg/--panel/--ink/etc), * entao qualquer coisa construida com var(--panel) etc. reage sozinha; so os poucos * lugares com cor fixa em vez de var() (sidebar, cabecalho, nav, endpoint-line...) * precisam de uma linha propria aqui. */ html.dark-theme { color-scheme: dark; --bg: #140b08; --panel: #241511; --soft: #2f1c16; --ink: #f7f1ea; --muted: #c2ab9c; --line: #4a352c; --green: #2fbd63; --danger: #e0483a; --orange-soft: rgba(255, 90, 0, 0.16); --shadow-hard: 0 4px 0 #000; } html.dark-theme body { background: var(--bg); color: var(--ink); } html.dark-theme .sidebar { background: var(--panel); border-right-color: var(--line); } html.dark-theme .brand, html.dark-theme .auth-brand { color: var(--ink); } html.dark-theme .nav-button { color: var(--muted); } html.dark-theme .nav-button:hover { color: var(--ink); } html.dark-theme .nav-button.active { box-shadow: none; } html.dark-theme .invite-box { border-color: var(--line); background: var(--soft); color: var(--ink); } html.dark-theme .invite-box span { color: var(--muted); } html.dark-theme .logout-button { color: var(--muted); } html.dark-theme .app-header { background: var(--panel); border-bottom-color: var(--line); } html.dark-theme .crumb { color: var(--muted); } html.dark-theme .search-box { border-color: var(--line); background: var(--soft); color: var(--ink); } html.dark-theme .circle-button { border-color: var(--line); background: var(--soft); color: var(--ink); } html.dark-theme .user-chip { color: var(--ink); } html.dark-theme .profile-menu { border-color: var(--line); background: var(--panel); color: var(--ink); } html.dark-theme .profile-menu button { color: var(--ink); } html.dark-theme .profile-card-head small { color: var(--muted); } html.dark-theme .endpoint-line { background: var(--soft); color: var(--muted); } .is-hidden { display: none !important; } button, input, select, textarea { font: inherit; } button { border: 0; cursor: pointer; } [hidden] { display: none !important; } code, pre, kbd { font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; } h1, h2, h3, p { margin-top: 0; } .auth-screen { min-height: 100vh; display: grid; place-items: center; padding: 28px; background: linear-gradient(90deg, rgba(255, 90, 0, 0.08) 0 1px, transparent 1px 100%), linear-gradient(0deg, rgba(27, 18, 13, 0.06) 0 1px, transparent 1px 100%), var(--bg); background-size: 44px 44px; } .auth-shell { width: min(440px, 100%); display: grid; gap: 20px; } .forced-password-overlay { position: fixed; inset: 0; z-index: 999; display: grid; place-items: center; padding: 28px; background: linear-gradient(90deg, rgba(255, 90, 0, 0.08) 0 1px, transparent 1px 100%), linear-gradient(0deg, rgba(27, 18, 13, 0.06) 0 1px, transparent 1px 100%), var(--bg); background-size: 44px 44px; } .forced-password-overlay .auth-card { width: min(440px, 100%); } .auth-brand { display: flex; align-items: center; gap: 10px; color: #3f3833; font-size: 21px; font-weight: 950; } .auth-card { display: grid; gap: 14px; padding: 26px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); box-shadow: var(--shadow-hard); } .auth-card h1 { margin-bottom: 0; font-size: 32px; line-height: 1.05; } .auth-card label { display: grid; gap: 6px; } .auth-card label span { color: var(--muted); font-size: 12px; font-weight: 850; text-transform: uppercase; } .auth-card .primary { width: 100%; min-height: 44px; } .auth-card .primary:disabled { opacity: 0.7; cursor: wait; } .login-error { margin: 0; padding: 10px 12px; border: 1px solid #ffc1ad; border-radius: 12px; background: #fff0e9; color: var(--danger); font-size: 13px; font-weight: 800; } .shell { display: grid; grid-template-columns: 194px minmax(0, 1fr); min-height: 100vh; } .sidebar { position: sticky; top: 0; height: 100vh; padding: 12px 16px 14px 4px; border-right: 1px solid var(--line); background: #eee7de; display: flex; flex-direction: column; gap: 18px; } .brand { display: flex; align-items: center; gap: 8px; padding-left: 0; color: #3f3833; font-size: 18px; font-weight: 900; } .brand-mark { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 9px; background: var(--orange); color: #fff; box-shadow: 0 3px 0 #000; font-size: 20px; line-height: 1; } .brand small { display: none; } .nav { display: grid; gap: 2px; } .nav-button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 9px 12px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: #73665e; text-align: left; font-size: 13px; font-weight: 750; } .nav-button.active { border-color: var(--line); background: var(--orange); color: #fff; box-shadow: 0 3px 0 #000; } .nav-button:hover { color: var(--ink); } .nav-button.active:hover { color: #fff; } .nav-icon { display: grid; place-items: center; width: 13px; color: currentColor; font-size: 10px; font-weight: 900; } .nav-admin { margin-top: 8px; } .invite-box { margin-top: auto; margin-right: 0; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: #ffeadc; box-shadow: var(--shadow-hard); display: grid; gap: 8px; color: #3a2d27; font-size: 12px; } .invite-box strong { font-size: 13px; } .invite-box span { color: #71645d; line-height: 1.25; } .invite-box button, .logout-button { min-height: 30px; border-radius: 12px; font-size: 12px; font-weight: 850; } .invite-box button { background: var(--brown); color: #fff; } .logout-button { background: transparent; color: #756b64; text-align: left; } .main-stage { min-width: 0; display: grid; grid-template-rows: 47px 1fr; background: var(--bg); } .app-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-width: 0; padding: 0 18px; border-bottom: 1px solid var(--line); background: #f8f2ea; } .crumb { color: #756b64; font-size: 12px; } .crumb strong { color: var(--ink); } .crumb span { margin: 0 8px; color: #9c9188; } .header-actions { display: flex; align-items: center; gap: 8px; min-width: 0; } .search-box { display: flex; align-items: center; gap: 8px; width: 232px; height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); } .search-box span { font-size: 11px; font-weight: 900; } .search-box input { flex: 1; min-width: 0; border: 0; background: transparent; outline: 0; color: var(--ink); font-size: 12px; } .search-box kbd { padding: 1px 5px; border-radius: 5px; background: #efe6db; color: #a18f82; font-size: 10px; } .circle-button { position: relative; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 50%; background: var(--panel); color: var(--ink); font-size: 11px; font-weight: 900; } .notify-button span { position: absolute; top: -6px; right: -3px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--orange); color: #fff; font-size: 10px; } .user-chip { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 3px 12px 3px 4px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); box-shadow: 0 3px 0 #000; color: var(--ink); } .user-chip span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--orange); color: #fff; font-size: 12px; font-weight: 900; } .user-chip strong { font-size: 12px; } .profile-menu-wrap { position: relative; } .profile-menu { position: absolute; top: calc(100% + 5px); right: 0; z-index: 20; width: 230px; padding: 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); box-shadow: 0 12px 30px rgba(27, 18, 13, 0.14); } .profile-menu[hidden] { display: none; } .profile-card-head { display: grid; gap: 2px; padding: 2px 2px 9px; border-bottom: 1px solid var(--line); } .profile-card-head strong { font-size: 12px; } .profile-card-head small { color: #756b64; font-size: 10px; } .profile-menu button { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 30px; padding: 5px 2px; background: transparent; color: #2a211b; text-align: left; font-size: 12px; } .profile-menu button:hover { color: var(--orange); } .profile-menu button span { display: grid; place-items: center; width: 14px; color: currentColor; font-size: 10px; font-weight: 900; } .profile-menu .profile-exit { color: #e23131; } .profile-accounts { display: grid; gap: 2px; padding: 6px 0; } .profile-accounts:empty { display: none; } .profile-account-row { display: flex; align-items: center; gap: 2px; } .profile-account-switch { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; min-height: 34px; padding: 4px 6px; border-radius: 6px; background: transparent; text-align: left; } .profile-account-switch:hover { background: var(--orange-soft); } .profile-account-row.is-active .profile-account-switch { background: var(--orange-soft); } .profile-account-initial { display: grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--orange); color: #fff; font-size: 10px; font-weight: 900; } .profile-account-info { display: grid; min-width: 0; gap: 0; } .profile-account-info strong { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .profile-account-info small { color: #756b64; font-size: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .profile-account-check { flex: none; color: var(--orange); font-size: 9px; font-weight: 900; text-transform: uppercase; } .profile-account-remove { flex: none; width: 22px; height: 22px; border-radius: 50%; background: transparent; color: #a89c92; font-size: 13px; line-height: 1; } .profile-account-remove:hover { color: #e23131; background: rgba(226, 49, 49, 0.1); } .profile-menu-divider { height: 1px; margin: 6px 0; background: var(--line); } .add-account-form { display: grid; gap: 6px; padding: 4px 2px 8px; } .add-account-form input { min-height: 30px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 12px; } .add-account-form .login-error { margin: 0; color: #e23131; font-size: 10px; } .add-account-form button[type="submit"] { min-height: 30px; font-size: 12px; } .content { min-width: 0; width: min(100%, 1560px); margin: 0 auto; padding: 26px 25px 34px; } .view { display: none; gap: 20px; } .active-view { display: grid; } .client-dashboard { display: grid; gap: 18px; } .client-hero { display: flex; justify-content: space-between; gap: 20px; align-items: end; } .client-date, .eyebrow { margin: 0 0 8px; color: var(--orange); font-size: 10px; font-weight: 850; letter-spacing: 0; text-transform: uppercase; } .client-hero h1 { margin: 0; font-size: 30px; line-height: 1.08; letter-spacing: 0; } .client-hero h1 span { color: #6a625d; } .orange-button, .primary { min-height: 36px; padding: 9px 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--orange); color: #fff; box-shadow: 0 3px 0 #000; font-weight: 850; } a.primary, a.secondary { display: inline-flex; align-items: center; text-decoration: none; } .orange-button:hover, .primary:hover { background: var(--orange-dark); } .client-metrics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .apx-card, .panel, .metric, .usage-card { border: 1px solid var(--line); border-radius: 16px; background: var(--panel); box-shadow: var(--shadow-hard); } .metric-card { position: relative; min-height: 134px; padding: 18px; } .metric-icon, .mini-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--orange-soft); color: var(--orange); font-weight: 900; } .metric-card p { margin: 13px 0 2px; color: #7a6e66; font-size: 10px; font-weight: 800; text-transform: uppercase; } .metric-card strong { display: block; font-size: 27px; line-height: 1; } .metric-card small { color: #7a6e66; font-size: 12px; } .live-dot { position: absolute; top: 18px; right: 18px; color: var(--green); font-size: 11px; font-weight: 800; } .live-dot::before { content: ""; display: inline-block; width: 4px; height: 4px; margin-right: 5px; border-radius: 50%; background: currentColor; vertical-align: middle; } .limit-card { display: grid; grid-template-columns: minmax(0, 1fr) 224px; min-height: 166px; overflow: hidden; } .limit-main { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 18px; padding: 20px; } .limit-main h2, .card-title-row h2, .requests-head h2 { margin: 0; font-size: 16px; line-height: 1.1; } .limit-main h2 { display: flex; align-items: center; gap: 9px; margin-bottom: 28px; } .mini-icon { width: 24px; height: 24px; font-size: 10px; } .limit-main label { display: block; margin-bottom: 7px; color: #655a53; font-size: 12px; font-weight: 750; } .apx-progress { height: 8px; overflow: hidden; border-radius: 999px; background: #efe7dd; } .apx-progress span { display: block; min-width: 16px; height: 100%; border-radius: inherit; background: var(--orange); } .limit-note { margin: 8px 0 0; color: #6f635b; font-size: 11px; line-height: 1.35; } .limit-note.small { margin-top: 4px; font-size: 10px; } .limit-percent { display: grid; align-content: center; justify-items: end; gap: 16px; } .limit-percent strong { font-size: 23px; } .status-pill { display: inline-flex; align-items: center; width: max-content; min-height: 22px; padding: 3px 9px; border: 1px solid #b9dfc5; border-radius: 999px; background: #f7fff9; color: var(--green); font-size: 10px; font-weight: 850; text-transform: uppercase; } .status-pill::before { content: ""; width: 4px; height: 4px; margin-right: 6px; border-radius: 50%; background: currentColor; } .limit-reset { display: grid; align-content: start; gap: 8px; padding: 20px; border-left: 1px solid var(--line); } .limit-reset strong { font-size: 13px; } .limit-reset p, .limit-reset small { margin: 0; color: #766a63; font-size: 11px; line-height: 1.35; } .limit-reset small { text-align: center; font-size: 9px; } .limit-reset button { min-height: 38px; border-radius: 19px; background: #928780; color: #fff; font-size: 12px; font-weight: 850; } .client-bottom-grid { display: grid; grid-template-columns: minmax(0, 1fr) 368px; gap: 14px; } .key-card { padding: 20px; } .card-title-row, .requests-head, .panel-head, .topbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; } .client-key-value { display: flex; align-items: center; gap: 12px; min-height: 50px; margin-top: 16px; padding: 0 12px; border: 1px dashed var(--line); border-radius: 16px; } .client-key-value code { flex: 1; min-width: 0; overflow-wrap: anywhere; color: var(--ink); font-size: 13px; } .key-actions { display: flex; gap: 6px; } .key-actions button, .endpoint-line button, .requests-head button, .ghost { background: transparent; color: var(--ink); font-size: 11px; font-weight: 850; } .endpoint-line { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; margin-top: 10px; padding: 9px 12px; border-radius: 12px; background: #f0e8df; color: #6f635b; font-size: 11px; } .endpoint-line code { min-width: 0; overflow-wrap: anywhere; color: var(--ink); } .key-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; } .key-stats div { min-height: 54px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; text-align: center; } .key-stats span { display: block; color: #8b7f77; font-size: 9px; font-weight: 800; text-transform: uppercase; } .key-stats strong { display: block; margin-top: 4px; font-size: 13px; } .plan-card { min-height: 206px; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: radial-gradient(circle at 82% 14%, rgba(255, 90, 0, 0.28), transparent 30%), linear-gradient(135deg, #291812, #43200f); box-shadow: var(--shadow-hard); color: #fff; display: grid; gap: 8px; } .plan-card > span { width: max-content; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.78); font-size: 10px; font-weight: 850; text-transform: uppercase; } .plan-card > strong { font-size: 28px; line-height: 1; } .plan-card small { color: rgba(255, 255, 255, 0.58); font-size: 13px; font-weight: 750; } .plan-divider { height: 1px; margin: 8px 0 10px; background: rgba(255, 255, 255, 0.11); } .plan-managed-note { margin: 0; color: rgba(255, 255, 255, 0.7); font-size: 12px; line-height: 1.35; } .plan-card select { min-height: 34px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 12px; background: rgba(0, 0, 0, 0.16); color: #fff; padding: 0 10px; } .plan-card button { min-height: 34px; border-radius: 18px; background: var(--orange); color: #fff; font-size: 12px; font-weight: 850; } .billing-layout { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr); gap: 14px; align-items: start; } .current-plan-card, .renewal-card { border: 1px solid var(--ink); border-radius: 16px; background: #fffdf9; box-shadow: var(--shadow-hard); } .current-plan-card { position: relative; min-height: 340px; overflow: hidden; padding: 22px; display: grid; grid-template-columns: minmax(0, 1fr) 148px; gap: 18px; background: linear-gradient(135deg, rgba(255, 90, 0, 0.12), rgba(255, 255, 255, 0) 48%), #fffdf9; } .current-plan-copy { display: grid; gap: 10px; align-content: start; } .current-plan-copy h2, .renewal-card h2 { margin: 0; font-size: 32px; line-height: 1; } .current-plan-copy > strong { font-size: 22px; } .current-plan-copy > p, .renewal-card p { max-width: 540px; margin: 0; color: #6d625b; font-size: 13px; line-height: 1.45; } .plan-status-badge { width: max-content; display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border: 1px solid #99d8b1; border-radius: 999px; background: #f3fff7; color: #168b45; font-size: 10px; font-weight: 900; text-transform: uppercase; } .plan-status-badge span { width: 6px; height: 6px; border-radius: 999px; background: #18a957; } .plan-meta-grid, .renewal-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 6px 0 0; } .plan-meta-grid div, .renewal-summary div { min-height: 62px; padding: 12px; border: 1px solid #ded4ca; border-radius: 12px; background: #faf7f1; } .plan-meta-grid dt, .renewal-summary dt { color: #8b7f77; font-size: 10px; font-weight: 900; text-transform: uppercase; } .plan-meta-grid dd, .renewal-summary dd { margin: 5px 0 0; font-size: 13px; font-weight: 850; } .plan-benefits { display: grid; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; } .plan-benefits li { position: relative; padding-left: 18px; color: #453b35; font-size: 12px; font-weight: 750; } .plan-benefits li::before { content: ""; position: absolute; left: 0; top: 6px; width: 8px; height: 8px; border-radius: 999px; background: var(--orange); } .claude-robot { align-self: stretch; min-height: 210px; border: 1px solid rgba(43, 27, 18, 0.22); border-radius: 16px; background: linear-gradient(180deg, #301b13, #6e2d0b); color: #fff; display: grid; place-items: center; align-content: center; gap: 10px; } .bot-head { width: 82px; height: 64px; border: 2px solid rgba(255, 255, 255, 0.9); border-radius: 24px; background: rgba(255, 255, 255, 0.12); display: flex; justify-content: center; align-items: center; gap: 16px; } .bot-head span { width: 10px; height: 10px; border-radius: 999px; background: #fff; } .bot-body { width: 58px; height: 38px; border-radius: 16px 16px 10px 10px; background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.55); } .claude-robot small { color: rgba(255, 255, 255, 0.78); font-size: 10px; font-weight: 900; text-transform: uppercase; } .requests-card { overflow: hidden; } .requests-head { padding: 20px; } .requests-head p { margin: 4px 0 0; color: #756b64; font-size: 12px; } .requests-head button { color: var(--orange); } .requests-table { width: 100%; min-width: 720px; border-collapse: collapse; } .requests-table th, .requests-table td { padding: 10px 20px; border-top: 1px solid var(--line); text-align: left; } .requests-table th { background: #f0e9df; color: #75665d; font-size: 9px; font-weight: 850; text-transform: uppercase; } .requests-table td { color: #685d56; font-size: 12px; } .requests-table th:last-child, .requests-table td:last-child { text-align: right; } .model-pill { display: inline-flex; padding: 4px 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); font-family: "SFMono-Regular", Consolas, monospace; font-size: 10px; font-weight: 850; } .ok-status { color: var(--green); font-weight: 850; } .bad-status { color: var(--danger); font-weight: 850; } .demo-hidden { display: none; } .admin-dashboard-hero { align-items: end; } .admin-dashboard-hero h1, .topbar h1 { margin: 0; font-size: 30px; line-height: 1.08; letter-spacing: 0; } .admin-dashboard-hero .muted { margin: 8px 0 0; } .admin-hero-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; } .admin-kpi-grid { display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr)); gap: 14px; } .admin-kpi-card { position: relative; min-height: 136px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); box-shadow: var(--shadow-hard); } .admin-card-live { position: absolute; top: 18px; right: 18px; color: var(--green); font-size: 11px; font-weight: 800; } .admin-card-live::before { content: ""; display: inline-block; width: 4px; height: 4px; margin-right: 5px; border-radius: 50%; background: currentColor; vertical-align: middle; } .metric-icon.blue { background: #dcecff; color: #1f67d8; } .metric-icon.green { background: #dbf3e2; color: var(--green); } .admin-kpi-card p { margin: 18px 0 3px; color: #786b63; font-size: 10px; font-weight: 850; text-transform: uppercase; } .admin-kpi-card strong { display: block; font-size: 27px; line-height: 1; } .admin-kpi-card small { color: #746861; font-size: 12px; } .admin-kpi-card.featured { border-color: var(--orange); background: linear-gradient(160deg, var(--orange-soft), var(--panel) 60%); } .admin-kpi-card.featured strong { color: var(--orange); } .admin-dashboard-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr); gap: 14px; } .admin-dashboard-card { padding: 20px; } .token-usage-grid { display: grid; grid-template-columns: repeat(3, minmax(140px, 1fr)); gap: 14px; margin-top: 14px; } .token-usage-card { padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); } .token-usage-card .token-usage-label { display: block; margin-bottom: 8px; color: var(--muted); font-size: 10px; font-weight: 850; letter-spacing: 0.03em; text-transform: uppercase; } .token-usage-card strong { display: block; font-size: 24px; line-height: 1; } .token-usage-card.is-today strong { color: var(--orange); } .token-usage-card.is-week strong { color: #1f67d8; } .token-usage-card.is-month strong { color: var(--green); } .token-usage-card small { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; } .token-usage-chart { margin-top: 18px; } .token-chart-bars { display: flex; align-items: flex-end; gap: 5px; height: 72px; } .token-chart-bar { display: flex; flex: 1; align-items: flex-end; height: 100%; border-radius: 4px; background: var(--soft); cursor: default; } .token-chart-bar span { display: block; width: 100%; min-height: 3px; border-radius: 4px; background: var(--orange-soft); transition: background 0.15s ease; } .token-chart-bar:hover span { background: var(--orange); } .token-chart-bar.is-today span { background: var(--orange); } .token-chart-labels { display: flex; justify-content: space-between; margin-top: 6px; color: var(--muted); font-size: 11px; } .admin-usage-query { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid #ded4ca; } .usage-query-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) auto; gap: 8px; align-items: end; } .usage-query-form label { display: grid; gap: 6px; } .usage-query-form label span { color: var(--muted); font-size: 10px; font-weight: 850; text-transform: uppercase; } .usage-query-totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; padding: 12px; border: 1px solid #d8cec4; border-radius: 12px; background: rgba(255, 255, 255, 0.42); } .usage-query-totals span { display: block; color: var(--muted); font-size: 10px; font-weight: 850; text-transform: uppercase; } .usage-query-days { display: grid; gap: 4px; margin-top: 10px; max-height: 220px; overflow-y: auto; } .usage-query-day-row { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; padding: 7px 10px; border-bottom: 1px solid #ede4d8; font-size: 12px; font-weight: 700; } @media (max-width: 640px) { .usage-query-form, .usage-query-totals { grid-template-columns: 1fr; } } .admin-list { display: grid; } .admin-client-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; min-height: 49px; border-bottom: 1px solid var(--line); } .admin-client-row:last-child { border-bottom: 0; } .admin-avatar { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--orange-soft); color: var(--orange); font-size: 13px; font-weight: 900; } .admin-client-row strong, .admin-client-row small { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .admin-client-row small { color: #756b64; font-size: 11px; } .admin-client-row time, .activity-row time { color: #7a6e66; font-family: "SFMono-Regular", Consolas, monospace; font-size: 10px; text-align: right; text-transform: uppercase; } .admin-rank-badge { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--orange-soft); color: var(--orange); font-size: 12px; font-weight: 900; } .admin-rank-tokens { color: var(--orange); font-size: 13px; text-align: right; white-space: nowrap; } .health-list { display: grid; gap: 14px; } .health-row { display: grid; gap: 7px; } .health-row div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; } .health-row strong { font-size: 12px; } .health-bar { height: 6px; overflow: hidden; border-radius: 999px; background: #e8ded5; } .health-bar span { display: block; height: 100%; border-radius: inherit; background: var(--green); } .health-note { display: grid; gap: 3px; margin-top: 4px; padding: 16px; border: 1px solid #ffc09f; border-radius: 14px; background: #fff1e7; } .health-note strong { color: var(--ink); font-size: 13px; } .health-note span { color: #756b64; font-size: 11px; } .activity-list { display: grid; gap: 2px; max-height: 340px; overflow: auto; } .activity-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) 120px; gap: 10px; align-items: center; min-height: 52px; } .activity-row p { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; } .activity-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #dcecff; color: #1f67d8; font-weight: 900; } .activity-icon.green { background: #dbf3e2; color: var(--green); } .activity-icon.danger { background: #f8e0db; color: var(--danger); } .client-page-panel { display: grid; gap: 18px; } .subpage-hero { display: flex; align-items: end; justify-content: space-between; gap: 16px; } .subpage-hero h1 { margin: 0; font-size: 30px; line-height: 1.08; letter-spacing: 0; } .subpage-card { padding: 20px; } .key-list { display: grid; gap: 10px; } .key-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 12px; align-items: center; min-height: 58px; padding: 12px; border: 1px solid #d8cec4; border-radius: 12px; } .key-row strong, .key-row code { display: block; } .key-row code { margin-top: 3px; overflow-wrap: anywhere; color: #315f9f; font-size: 12px; } .key-row time { color: #756b64; font-size: 11px; } .plan-catalog { display: grid; gap: 10px; } .plan-catalog article { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px 12px; align-items: center; padding: 14px; border: 1px solid #d8cec4; border-radius: 12px; background: #fffdf9; } .plan-catalog article.is-current { background: #fff5ee; border-color: #ffb58b; } .plan-catalog span { color: #756b64; font-size: 12px; } .plan-catalog small { align-self: center; color: var(--orange); font-weight: 850; } .plan-catalog button { min-width: 126px; min-height: 36px; border-radius: 999px; } .upgrade-preview { display: grid; gap: 3px; margin-top: 8px; padding: 10px; border: 1px dashed #d8cec4; border-radius: 10px; background: #faf7f1; } .upgrade-preview span, .upgrade-preview strong { color: #453b35; font-size: 11px; } .upgrade-preview strong { color: var(--orange); } .renewal-card { padding: 22px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 0.8fr) auto; gap: 18px; align-items: center; } .renewal-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); } .renewal-card button { min-height: 42px; padding: 0 18px; border-radius: 999px; white-space: nowrap; } .invoice-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; align-items: center; min-height: 62px; border-bottom: 1px solid #d8cec4; } .invoice-row:last-child { border-bottom: 0; } .invoice-row strong, .invoice-row span { display: block; } .invoice-row div > span { margin-top: 3px; color: #756b64; font-size: 12px; } .settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .settings-grid label { display: grid; gap: 6px; } .settings-grid label span { color: #756b64; font-size: 11px; font-weight: 850; text-transform: uppercase; } .settings-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; } .download-card { display: grid; gap: 14px; } .download-card h2 { margin: 0 0 6px; font-size: 18px; } .download-card pre { min-height: 150px; max-height: none; } .login-card { display: grid; gap: 14px; max-width: 680px; } .login-card h1 { margin: 0 0 8px; font-size: 30px; } .demo-login-list { display: flex; flex-wrap: wrap; gap: 8px; } .metrics { display: grid; grid-template-columns: repeat(4, minmax(140px, 1fr)); gap: 14px; } .metric, .panel, .usage-card { padding: 18px; } .grid { display: grid; gap: 16px; } .grid.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .stack { display: grid; gap: 12px; } .plan-row, .client-card, .log-row, .usage-card { border: 1px solid #d8cec4; border-radius: 12px; padding: 14px; } .plan-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; } .progress { width: 100%; height: 9px; overflow: hidden; border-radius: 999px; background: #e8ded5; } .progress > span { display: block; height: 100%; background: var(--orange); } .progress.warn > span { background: #d89a24; } .progress.danger > span { background: var(--danger); } .muted { color: var(--muted); font-size: 13px; } .log-list { display: grid; gap: 10px; max-height: 430px; overflow: auto; } .log-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: start; } .status.ok { color: var(--green); } .status.blocked { color: var(--danger); } input, select, textarea { width: 100%; min-height: 42px; padding: 10px 11px; border: 1px solid #d6cbc1; border-radius: 10px; background: #fff; color: var(--ink); outline: none; } textarea { min-height: 360px; resize: vertical; } input:focus, select:focus, textarea:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255, 90, 0, 0.13); } .secondary, .danger { min-height: 38px; padding: 9px 13px; border-radius: 12px; font-weight: 800; } .secondary { background: #e8ded5; color: var(--ink); } .danger { background: #f8e0db; color: var(--danger); } .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .form-grid button, .form-grid .checkline { grid-column: span 2; } .access-message-panel { display: grid; gap: 14px; } .access-message-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .access-message-grid label { display: grid; gap: 7px; } .access-message-grid label span { color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; } .access-message-grid textarea { min-height: 180px; font-family: "Courier New", monospace; line-height: 1.45; } .access-message-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .token-field { display: grid; gap: 6px; min-width: 260px; } .token-field.full { min-width: 100%; margin-bottom: 14px; } .token-field span, .editor-grid span { color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; } .checkline { display: flex; align-items: center; gap: 8px; color: var(--muted); } .checkline input { width: 18px; min-height: 18px; } .usage-transparency-box { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); } .usage-transparency-box .checkline { align-items: flex-start; gap: 10px; color: var(--ink); } .usage-transparency-box .checkline input { margin-top: 2px; flex: 0 0 auto; } .usage-transparency-box strong { display: block; font-size: 14px; } .usage-transparency-box small { display: block; margin-top: 3px; max-width: 62ch; color: var(--muted); font-size: 12px; line-height: 1.45; } .table-wrap { overflow-x: auto; } .client-list-head > div { min-width: 0; } .client-search-box { display: flex; align-items: center; gap: 9px; width: min(320px, 100%); min-height: 40px; padding: 0 12px; border: 1px solid #cfc3b8; border-radius: 8px; background: var(--panel); } .client-search-box:focus-within { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255, 91, 0, 0.12); } .client-search-box > span { color: var(--orange); font-size: 11px; font-weight: 900; } .client-search-box input { flex: 1; min-width: 0; min-height: 38px; padding: 0; border: 0; background: transparent; outline: 0; color: var(--ink); } .client-search-empty td { padding: 28px 12px; color: var(--muted); text-align: center; } .license-expiry-cell { min-width: 144px; } .license-expiry-cell strong { display: inline-flex; min-height: 24px; align-items: center; padding: 3px 8px; border: 1px solid #b8dac1; border-radius: 6px; background: #eef8f0; color: var(--green); font-size: 11px; white-space: nowrap; } .license-expiry-cell small { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; white-space: nowrap; } .license-expiry-cell.warning strong { border-color: #e6ce8d; background: #fff8df; color: #8a6000; } .license-expiry-cell.danger strong { border-color: #edb7b2; background: #fff0ee; color: var(--danger); } .renew-month-button { border-color: #ffc09c; background: var(--orange-soft); color: var(--orange); } table { width: 100%; border-collapse: collapse; } th, td { padding: 12px 10px; border-bottom: 1px solid #d8cec4; text-align: left; vertical-align: top; } th { color: var(--muted); font-size: 12px; text-transform: uppercase; } td code, .key-line { display: block; max-width: 340px; overflow-wrap: anywhere; color: #315f9f; } .actions { display: flex; flex-wrap: wrap; gap: 8px; } .plan-edit-list { display: grid; gap: 10px; } .plan-edit { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px; border: 1px solid #d8cec4; border-radius: 12px; } .plan-edit-main, .renewal-price-grid { min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); gap: 8px; } .renewal-price-grid { grid-column: 1 / -1; } .renewal-price-grid label, .field-stack, .profile-form-grid label, .license-custom-form label, .security-custom-form label { min-width: 0; display: grid; gap: 6px; } .renewal-price-grid label span, .field-stack > span, .profile-form-grid label > span, .license-custom-form label > span, .security-custom-form label > span { color: var(--muted); font-size: 10px; font-weight: 850; text-transform: uppercase; } .client-name-link { display: block; max-width: 100%; padding: 0; background: transparent; color: var(--ink); font-weight: 900; text-align: left; overflow-wrap: anywhere; } .client-name-link:hover { color: var(--orange); text-decoration: underline; } .license-inline { display: block; margin-top: 5px; color: var(--green); font-size: 10px; font-weight: 800; overflow-wrap: anywhere; } .license-inline.warning { color: #9a6700; } .license-inline.danger { color: var(--danger); } .license-summary-band, .usage-summary-band { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid #d8cec4; background: rgba(255, 255, 255, 0.42); } .usage-summary-band { margin-bottom: 14px; border: 1px solid #d8cec4; border-radius: 12px; overflow: hidden; } .license-summary-band > div, .usage-summary-band > div { min-width: 0; padding: 12px 14px; border-right: 1px solid #d8cec4; } .license-summary-band > div:last-child, .usage-summary-band > div:last-child { border-right: 0; } .license-summary-band span, .usage-summary-band span, .profile-metrics-grid span { display: block; color: var(--muted); font-size: 10px; font-weight: 850; text-transform: uppercase; } .license-summary-band strong, .usage-summary-band strong { display: block; margin-top: 5px; font-size: 13px; overflow-wrap: anywhere; } .usage-summary-band strong { font-size: 16px; } .usage-summary-band .usage-band-highlight { color: var(--orange); } .license-alert { width: 100%; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border: 1px solid #ef9f83; border-left: 5px solid var(--danger); background: #fff1eb; } .license-alert > div, .license-alert:not(:has(> div)) { min-width: 0; } .license-alert strong, .license-alert span { display: block; } .license-alert span { margin-top: 3px; color: #6d4e43; font-size: 12px; overflow-wrap: anywhere; } .billing-license-alert { grid-column: 1 / -1; } .license-status-badge, .presence-dot { display: inline-flex; align-items: center; width: fit-content; padding: 6px 9px; border: 1px solid #b9dbc5; border-radius: 999px; background: #f0fff5; color: var(--green); font-size: 10px; font-weight: 900; text-transform: uppercase; } .license-status-badge.warning { border-color: #e8cf8a; background: #fff9e6; color: #8f6300; } .license-status-badge.danger { border-color: #efb2a2; background: #fff1eb; color: var(--danger); } .presence-dot.offline { border-color: #d8cec4; background: #f3eee8; color: var(--muted); } #admin-client-profile-panel { min-width: 0; display: grid; gap: 18px; } .admin-profile-hero { align-items: end; } .back-button { margin: 0 0 14px; padding: 0; color: var(--orange); } .admin-profile-grid { min-width: 0; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 14px; align-items: start; } .profile-identity-panel, .profile-license-panel, .profile-usage-panel, .profile-history-panel { min-width: 0; display: grid; gap: 16px; } .profile-password-actions { display: flex; flex-wrap: wrap; gap: 8px; } .profile-form-grid, .profile-data-grid, .profile-activity-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; } .profile-data-grid > div, .profile-activity-grid > div { min-width: 0; padding: 11px; border-bottom: 1px solid #ded4ca; } .profile-data-grid dt, .profile-activity-grid dt { color: var(--muted); font-size: 10px; font-weight: 850; text-transform: uppercase; } .profile-data-grid dd, .profile-activity-grid dd { margin: 5px 0 0; font-size: 12px; font-weight: 800; overflow-wrap: anywhere; } .license-days-hero { display: flex; align-items: baseline; gap: 8px; } .license-days-hero strong { font-size: 34px; font-weight: 900; line-height: 1; } .license-days-hero span { color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; } .license-custom-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 8px; align-items: end; margin-top: 4px; padding-top: 12px; border-top: 1px solid #ded4ca; } .profile-security-panel { display: grid; gap: 16px; } .security-custom-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 8px; align-items: end; margin-top: 4px; padding-top: 12px; border-top: 1px solid #ded4ca; } .known-ips-list { display: flex; flex-wrap: wrap; gap: 6px; } .known-ip-chip { font-size: 11px; font-weight: 800; padding: 4px 9px; border-radius: 999px; background: #ede4d8; color: var(--ink); } .profile-metrics-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-block: 1px solid #ded4ca; } .profile-metrics-grid > div { min-width: 0; padding: 12px; border-right: 1px solid #ded4ca; } .profile-metrics-grid > div:last-child { border-right: 0; } .profile-metrics-grid strong { display: block; margin-top: 5px; font-size: 16px; overflow-wrap: anywhere; } .license-event-list { display: grid; } .license-event-list > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #ded4ca; } .license-event-list span { color: var(--muted); font-size: 11px; text-align: right; } .editor-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; } pre { min-height: 360px; max-height: 520px; overflow: auto; margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #111816; color: #e9efe8; white-space: pre-wrap; } .toast { position: fixed; right: 18px; bottom: 18px; max-width: 420px; padding: 12px 14px; border-radius: 12px; background: #17231f; color: white; box-shadow: var(--shadow-soft); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity 160ms ease, transform 160ms ease; } .toast.show { opacity: 1; transform: translateY(0); } @media (max-width: 1080px) { .client-bottom-grid, .billing-layout, .limit-card, .client-metrics-grid, .admin-dashboard-grid, .grid.two, .editor-grid, .admin-profile-grid { grid-template-columns: 1fr; } .plan-edit-main, .renewal-price-grid, .profile-metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .license-custom-form, .security-custom-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } .limit-reset { border-left: 0; border-top: 1px solid var(--line); } } @media (max-width: 820px) { .main-stage { grid-template-rows: auto 1fr; } .shell { grid-template-columns: 1fr; } .sidebar { position: static; height: auto; padding: 12px; border-right: 0; border-bottom: 1px solid var(--line); } .nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } .invite-box, .logout-button { display: none; } .app-header { align-items: stretch; height: auto; min-height: 47px; padding: 10px 14px; flex-direction: column; } .header-actions { width: 100%; } .search-box { width: 100%; } .client-list-head { align-items: stretch; flex-direction: column; } .client-search-box { width: 100%; } .client-hero { align-items: stretch; flex-direction: column; } .client-hero h1 { font-size: 28px; } .limit-main, .admin-kpi-grid, .token-usage-grid, .key-stats, .metrics, .current-plan-card, .renewal-card, .renewal-summary, .access-message-grid, .license-summary-band, .usage-summary-band, .profile-form-grid, .profile-data-grid, .profile-activity-grid { grid-template-columns: 1fr; } .license-summary-band > div, .profile-metrics-grid > div { border-right: 0; border-bottom: 1px solid #d8cec4; } .license-alert { align-items: stretch; flex-direction: column; } .license-alert button { width: 100%; } .admin-client-row, .key-row, .invoice-row, .plan-catalog article, .settings-grid, .activity-row { grid-template-columns: 1fr; } .plan-catalog button { width: 100%; } .claude-robot { min-height: 150px; } .admin-client-row .model-pill, .admin-client-row time, .activity-row time { grid-column: 2; text-align: left; } .subpage-hero { align-items: stretch; flex-direction: column; } .subpage-hero h1 { font-size: 28px; } } @media (max-width: 560px) { .content { padding: 18px 14px 26px; } .header-actions { flex-wrap: wrap; } .user-chip strong { display: none; } .client-key-value, .endpoint-line { align-items: stretch; grid-template-columns: 1fr; flex-direction: column; } .form-grid, .plan-edit { grid-template-columns: 1fr; } .plan-edit-main, .renewal-price-grid, .license-custom-form, .security-custom-form, .profile-metrics-grid { grid-template-columns: 1fr; } .form-grid button, .form-grid .checkline { grid-column: auto; } } /* ---------------------------------------------------------------- fornecedores */ .provider-grid { display: grid; gap: 16px; } .provider-card { display: grid; gap: 14px; } .provider-card-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; } .provider-card-head h3 { margin: 2px 0 4px; font-size: 18px; } .provider-card-head .muted { margin: 0; font-size: 12px; word-break: break-all; } .provider-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .provider-status, .provider-mode { display: inline-flex; align-items: center; min-height: 22px; padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--soft); color: var(--ink); font-size: 10px; font-weight: 850; text-transform: uppercase; } .provider-status::before { content: ""; width: 5px; height: 5px; margin-right: 6px; border-radius: 50%; background: currentColor; } .provider-status.is-live { border-color: #b9dfc5; background: #f7fff9; color: var(--green); } .provider-status.is-stale, .provider-status.is-pending { border-color: #f0c9a4; background: #fff6ec; color: var(--orange-dark); } .provider-status.is-degraded { border-color: #e9b7b0; background: #fdf1ef; color: var(--danger); } .provider-status.is-off { color: var(--muted); } .provider-mode.is-on { border-color: var(--orange); background: var(--orange-soft); color: var(--orange-dark); } /* Metodo de login que a sincronizacao automatica nao consegue usar sozinha (conta Google): o cartao precisa dizer isso, senao o operador cadastra e fica esperando um sync que nunca vai acontecer. */ .provider-mode.is-warn { border-color: #f0c9a4; background: #fff6ec; color: var(--orange-dark); } .provider-auth-warning { margin: 0 0 8px; line-height: 1.45; } .provider-window { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: 16px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--soft); } .provider-window-main { display: grid; align-content: start; gap: 4px; } .provider-window-main > span { color: var(--muted); font-size: 10px; font-weight: 850; text-transform: uppercase; } .provider-window-main > strong { font-size: 28px; font-variant-numeric: tabular-nums; line-height: 1.1; } .provider-window-main > small { color: var(--muted); font-size: 11px; } .provider-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0; } .provider-facts > div { min-width: 0; } .provider-facts dt { color: var(--muted); font-size: 10px; font-weight: 850; text-transform: uppercase; } .provider-facts dd { margin: 2px 0 0; font-size: 13px; font-weight: 700; word-break: break-word; } .provider-tokens { padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; } .provider-note, .provider-alert { margin: 0; font-size: 12px; line-height: 1.45; } .provider-note { color: var(--muted); } .provider-alert { padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); } .provider-alert.is-warn { border-color: #f0c9a4; background: #fff6ec; color: var(--orange-dark); } .provider-alert.is-ok { border-color: #b9dfc5; background: #f7fff9; color: var(--green); } .provider-credentials-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; } .provider-credentials { padding: 5px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); font-size: 12px; letter-spacing: 0.02em; word-break: break-all; } .provider-actions { display: flex; flex-wrap: wrap; gap: 8px; } .provider-actions button { min-height: 36px; padding: 0 14px; border-radius: 10px; } .provider-actions button[disabled] { opacity: 0.45; cursor: not-allowed; } .provider-danger { color: var(--danger); } .provider-detail { display: grid; gap: 16px; padding-top: 14px; border-top: 1px solid var(--line); } .provider-detail-block { display: grid; gap: 10px; } .provider-detail-block h4 { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; } .provider-client-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; max-height: 260px; overflow-y: auto; } .provider-client-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); font-size: 13px; } .provider-client-row small { grid-column: 2; color: var(--muted); font-size: 11px; } .provider-events { font-size: 12px; } .provider-events td { word-break: break-word; } @media (max-width: 900px) { .provider-window { grid-template-columns: 1fr; } .provider-window-main > strong { font-size: 24px; } } .codex-tabs { display: flex; gap: 6px; flex-wrap: wrap; } .codex-tab-button { min-height: 34px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: #6b5f57; font-size: 12px; font-weight: 700; } .codex-tab-button:hover { border-color: var(--orange); color: var(--orange); } .codex-tab-button.active { border-color: var(--orange); background: var(--orange-soft); color: var(--orange); } .codex-kv-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); } .codex-kv-row:last-child { border-bottom: none; } .codex-kv-row strong { display: block; font-size: 11px; color: #756b64; margin-bottom: 2px; } .codex-kv-row code { font-size: 13px; } /* ---------------------------------------------------------------- painel do cliente */ /* * O painel do cliente vira uma pagina unica, no formato de um painel de fornecedor * que o Kauan mostrou como referencia -- mas a cor e a MESMA do painel admin, ponto. * --cp-* so existe pra dar nome as pecas (fundo do card, borda, texto, etc.); cada * uma aponta pro token que o admin ja usa, entao sidebar/header do cliente ficam * identicos ao admin sem nenhuma regra propria de recoloracao. */ body.user-panel-mode { --cp-bg: var(--bg); --cp-panel: var(--panel); --cp-panel-raised: var(--soft); --cp-border: var(--line); --cp-text: var(--ink); --cp-muted: var(--muted); --cp-muted-2: var(--muted); --cp-green: var(--green); --cp-green-soft: rgba(19, 154, 69, 0.12); --cp-red: var(--danger); --cp-red-soft: rgba(187, 46, 36, 0.12); --cp-accent-soft: var(--orange-soft); } body.user-panel-mode .content { max-width: 760px; } .cp { display: grid; gap: 16px; color: var(--cp-text); font-variant-numeric: tabular-nums; } .cp-identity { display: grid; gap: 8px; } .cp-identity-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .cp-identity-row h1 { margin: 0; font-size: 24px; line-height: 1.15; } .cp-plan-badge { padding: 3px 10px; border: 1px solid var(--orange); border-radius: 999px; background: var(--cp-accent-soft); color: var(--orange); font-size: 10px; font-weight: 850; letter-spacing: 0.03em; } .cp-status-line { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--cp-muted); font-size: 13px; } .cp-status-dot { display: inline-block; width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--cp-green); box-shadow: 0 0 0 3px var(--cp-green-soft); } .cp-status-dot.is-off { background: var(--cp-red); box-shadow: 0 0 0 3px var(--cp-red-soft); } .cp-card { padding: 18px; border: 1px solid var(--cp-border); border-radius: 16px; background: var(--cp-panel); box-shadow: var(--shadow-hard); } .cp-card-danger { border-color: var(--cp-red); background: linear-gradient(180deg, var(--cp-red-soft), var(--cp-panel) 70%); } .cp-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .cp-card-head h2 { margin: 0; color: var(--cp-text); font-size: 14px; font-weight: 800; } .cp-badge { padding: 3px 10px; border-radius: 999px; background: var(--cp-panel-raised); color: var(--cp-muted); font-size: 11px; font-weight: 800; white-space: nowrap; } .cp-badge-danger { background: var(--cp-red-soft); color: var(--cp-red); } .cp-card-note { margin: 0; color: var(--cp-muted); font-size: 12px; line-height: 1.5; } .cp-note-small { margin-top: 8px; font-size: 11px; } .cp-big-number { display: block; margin-bottom: 6px; color: var(--cp-text); font-size: 30px; line-height: 1.1; letter-spacing: -0.01em; } .cp-subscription-actions { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; } .cp-button-accent { min-height: 40px; padding: 0 18px; border: none; border-radius: 12px; background: var(--orange); color: #fff; font-size: 13px; font-weight: 850; } .cp-button-accent:hover { filter: brightness(1.08); } .cp-button-ghost-accent { min-height: 34px; padding: 0 14px; border: 1px solid var(--orange); border-radius: 10px; background: transparent; color: var(--orange); font-size: 12px; font-weight: 800; } .cp-inline-button { min-height: 32px; margin-top: 10px; padding: 0 14px; border: 1px solid var(--cp-border); border-radius: 10px; background: var(--cp-panel-raised); color: var(--cp-text); font-size: 11px; font-weight: 800; } body.user-panel-mode #invoice-renew-term { min-height: 40px; padding: 0 12px; border: 1px solid var(--cp-border); border-radius: 12px; background: var(--cp-panel-raised); color: var(--cp-text); font-size: 12px; font-weight: 700; } .cp-stat-grid { display: grid; grid-template-columns: 1fr; gap: 14px; } .cp-progress { height: 7px; margin: 6px 0 10px; overflow: hidden; border-radius: 999px; background: var(--cp-panel-raised); } .cp-progress span { display: block; min-width: 4px; height: 100%; border-radius: inherit; background: var(--orange); } .cp-field { display: block; margin-top: 12px; } .cp-field:first-of-type { margin-top: 14px; } .cp-field-label { display: block; margin-bottom: 6px; color: var(--cp-muted-2); font-size: 10px; font-weight: 850; text-transform: uppercase; letter-spacing: 0.04em; } .cp-connection-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .cp-connection-value { display: flex; align-items: center; gap: 8px; } .cp-connection-value code { color: var(--cp-text); font-size: 13px; } .cp-lock-pill { padding: 3px 9px; border-radius: 999px; background: var(--cp-panel-raised); color: var(--cp-muted); font-size: 10px; font-weight: 800; white-space: nowrap; } .cp-input-row { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 12px; border: 1px solid var(--cp-border); border-radius: 12px; background: var(--cp-panel-raised); } .cp-input-row code { flex: 1; min-width: 0; overflow: hidden; color: var(--cp-text); text-overflow: ellipsis; white-space: nowrap; font-size: 12px; } .cp-input-row button { flex: 0 0 auto; min-height: 28px; padding: 0 10px; border: 1px solid var(--cp-border); border-radius: 8px; background: transparent; color: var(--cp-text); font-size: 11px; font-weight: 800; } .cp-key-list { display: grid; gap: 8px; } .cp-key-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 10px; min-height: 46px; padding: 8px 12px; border: 1px solid var(--cp-border); border-radius: 12px; background: var(--cp-panel-raised); } .cp-key-row div { min-width: 0; } .cp-key-row strong { display: block; color: var(--cp-text); font-size: 12px; } .cp-key-row code { display: block; overflow: hidden; color: var(--cp-muted); text-overflow: ellipsis; white-space: nowrap; font-size: 11px; } .cp-key-row time { color: var(--cp-muted-2); font-size: 10px; white-space: nowrap; } .cp-pill { padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 800; white-space: nowrap; } .cp-pill.is-ok { background: var(--cp-green-soft); color: var(--cp-green); } .cp-pill.is-off { background: var(--cp-red-soft); color: var(--cp-red); } .cp-ghost-button-sm { min-height: 26px; padding: 0 10px; border: 1px solid var(--cp-border); border-radius: 8px; background: transparent; color: var(--cp-text); font-size: 10px; font-weight: 800; white-space: nowrap; } .cp-count-pill { padding: 2px 9px; border-radius: 999px; background: var(--cp-panel-raised); color: var(--cp-muted); font-size: 11px; font-weight: 800; } .cp-recent-list { display: grid; gap: 2px; } .cp-recent-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; min-height: 40px; padding: 8px 4px; border-bottom: 1px solid var(--cp-border); } .cp-recent-row:last-child { border-bottom: 0; } .cp-recent-route { min-width: 0; overflow: hidden; color: var(--cp-text); text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 700; } .cp-recent-tokens { white-space: nowrap; font-size: 11px; font-variant-numeric: tabular-nums; } .cp-token-in { color: var(--orange); } .cp-token-out { color: var(--cp-green); } .cp-muted-inline { color: var(--cp-muted-2); } .cp-recent-row time { color: var(--cp-muted-2); font-size: 10px; white-space: nowrap; } .cp-empty { margin: 0; color: var(--cp-muted); font-size: 12px; } .cp-plan-catalog { display: grid; gap: 10px; } .cp-plan-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--cp-border); border-radius: 12px; background: var(--cp-panel-raised); } .cp-plan-row.is-current { border-color: var(--orange); } .cp-plan-row strong { display: block; color: var(--cp-text); font-size: 13px; } .cp-plan-row > div { min-width: 0; display: grid; gap: 4px; } .cp-plan-row > small { color: var(--cp-muted); font-size: 12px; white-space: nowrap; } .cp-upgrade-preview { display: grid; gap: 2px; margin-top: 4px; color: var(--cp-muted-2); font-size: 10px; } .cp-upgrade-preview strong { color: var(--orange); font-size: 11px; } .cp-settings-grid { display: grid; gap: 12px; margin-bottom: 14px; } .cp-settings-grid label { display: block; } .cp-settings-grid input { width: 100%; min-height: 40px; padding: 0 12px; border: 1px solid var(--cp-border); border-radius: 10px; background: var(--cp-panel-raised); color: var(--cp-text); font-size: 13px; } /* O card de transparencia de consumo (clientUsageSectionHtml), incluindo "Consultar outro periodo", usa as mesmas classes do admin (.usage-summary-band, .token-usage- card, .subpage-card...) sem nenhuma sobrescrita aqui -- e assim que fica identico ao admin, em vez de so parecido. */ /* * Mobile-first: uma coluna so, linhas de chave/requisicao compactas (sem a coluna de * data/hora -- ela sempre fica disponivel no title do proprio card). Nada de dividir * a pagina em duas colunas independentes: com conteudo de altura tao diferente entre * os cards (poucas chaves vs. varias, poucas requisicoes vs. muitas), uma coluna * sempre acaba bem mais curta que a outra e sobra vao vazio -- o mesmo defeito do * admin usar cards do mesmo tamanho lado a lado so quando o conteudo realmente casa * (ver .cp-stat-grid). No desktop a pagina so fica mais larga, nunca mais estreita. */ .cp-key-row, .cp-recent-row { grid-template-columns: minmax(0, 1fr) auto; } .cp-key-row time, .cp-recent-row time { display: none; } @media (min-width: 620px) { .cp-stat-grid { grid-template-columns: 1fr 1fr; } } /* Requisicoes recentes ganha a coluna de horario de volta assim que tem largura -- o card e sempre largura total da pagina, nunca fica espremido numa coluna lateral. */ @media (min-width: 700px) { .cp-recent-row { grid-template-columns: auto minmax(0, 1fr) auto auto; } .cp-recent-row time { display: block; } } /* Chaves API fica pareada com Sua conexao (.cp-stat-grid), entao sua largura real e metade da pagina -- so libera a coluna de data quando essa metade tem espaco de verdade, nao no mesmo ponto da pagina inteira. */ @media (min-width: 900px) { .cp-key-row { grid-template-columns: minmax(0, 1fr) auto auto auto; } .cp-key-row time { display: block; } } /* * Desktop: a pagina so fica mais larga (like a tela de configuracoes bem cuidada), * nao vira um dashboard de multiplas colunas soltas. Cada card usa o espaco extra * internamente (linhas mais largas, grades de 2 como .cp-stat-grid), em vez da * pagina inteira se partir em duas colunas de altura imprevisivel. */ @media (min-width: 900px) { body.user-panel-mode .content { max-width: 820px; } }