/* ===================================================== Code Trace Gateway — Developer Dark Theme GitHub-dark inspired, monospace-heavy, mobile-first ===================================================== */ /* ===================================================== Palette aligned with Belo Panel (panelbot.dzax.cloud) ===================================================== */ :root, .theme-dark { /* Background layers — slate dark, deeper blue tint */ --bg-0: rgb(11, 18, 32); /* page bg */ --bg-1: rgb(17, 26, 46); /* card bg */ --bg-2: rgb(22, 32, 56); /* nested card */ --bg-3: rgb(29, 41, 66); /* hover */ --bg-4: rgb(42, 58, 90); /* active */ /* Borders */ --border: rgb(31, 44, 71); --border-soft: rgb(42, 58, 90); /* Text */ --fg: rgb(232, 237, 247); --fg-muted: rgb(148, 163, 184); --fg-subtle: rgb(100, 116, 139); /* Accents — Tailwind palette (matched with kiro-panel) */ --accent: rgb(59, 130, 246); --accent-bg: rgba(59, 130, 246, 0.15); --green: rgb(34, 197, 94); --green-bg: rgba(34, 197, 94, 0.15); --orange: rgb(245, 158, 11); --orange-bg: rgba(245, 158, 11, 0.15); --red: rgb(239, 68, 68); --red-bg: rgba(239, 68, 68, 0.15); --purple: rgb(168, 85, 247); --purple-bg: rgba(168, 85, 247, 0.15); /* Spacing — match Belo (rounded-md/lg = 8px/12px, more pill-like) */ --r-sm: 6px; --r-md: 8px; --r-lg: 12px; /* Fonts */ --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mono: "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace; color-scheme: dark; } /* Light theme variant — toggle via .theme-light class on */ .theme-light { --bg-0: rgb(248, 250, 252); --bg-1: rgb(255, 255, 255); --bg-2: rgb(255, 255, 255); --bg-3: rgb(241, 245, 249); --bg-4: rgb(226, 232, 240); --border: rgb(226, 232, 240); --border-soft: rgb(203, 213, 225); --fg: rgb(15, 23, 42); --fg-muted: rgb(71, 85, 105); --fg-subtle: rgb(148, 163, 184); --accent: rgb(37, 99, 235); --accent-bg: rgba(37, 99, 235, 0.10); --green: rgb(22, 163, 74); --green-bg: rgba(22, 163, 74, 0.10); --orange: rgb(217, 119, 6); --orange-bg: rgba(217, 119, 6, 0.10); --red: rgb(220, 38, 38); --red-bg: rgba(220, 38, 38, 0.10); --purple: rgb(126, 34, 206); --purple-bg: rgba(126, 34, 206, 0.10); color-scheme: light; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg-0); color: var(--fg); font-family: var(--font); font-size: 14px; line-height: 1.55; letter-spacing: -0.005em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } code, pre, .mono { font-family: var(--mono); font-size: 12.5px; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-soft); border-radius: 6px; border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: var(--fg-subtle); background-clip: content-box; border: 2px solid transparent; } /* ===================================================== Layout: Login, App grid, Sidebar, Content ===================================================== */ .wrap { width: 100%; min-height: 100vh; } /* Login screen */ #loginBox { max-width: 380px; margin: 80px auto 20px; padding: 32px 28px; background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--r-lg); } #loginBox h2 { margin: 0 0 4px; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; } #loginBox input { width: 100%; padding: 10px 14px; background: var(--bg-0); border: 1px solid var(--border); border-radius: var(--r-md); color: var(--fg); font-family: var(--font); font-size: 13px; margin-bottom: 12px; } #loginBox input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); } #loginBox button.primary { width: 100%; padding: 8px 16px; background: var(--green); border: 1px solid var(--green); border-radius: var(--r-md); color: #fff; font-weight: 500; cursor: pointer; } #loginBox button.primary:hover { background: #46c655; } /* Main app shell: sidebar + content */ .layout { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; gap: 0; } .sidebar { background: var(--bg-1); border-right: 1px solid var(--border); padding: 16px 12px; display: flex; flex-direction: column; gap: 16px; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .content-wrap { padding: 20px 24px; max-width: 100%; overflow-x: hidden; } /* Mobile: sidebar collapses to top, single column */ @media (max-width: 900px) { .layout { grid-template-columns: 1fr; } .sidebar { position: relative; height: auto; border-right: none; border-bottom: 1px solid var(--border); padding: 12px; } .content-wrap { padding: 14px; } } /* ===================================================== Sidebar internals ===================================================== */ .side-head { display: flex; align-items: center; gap: 10px; padding: 8px 8px 12px; border-bottom: 1px solid var(--border-soft); } .side-logo { width: 32px; height: 32px; background: var(--accent); color: #fff; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; font-family: var(--mono); letter-spacing: 0.5px; } .brand { margin: 0; font-size: 14px; font-weight: 600; color: var(--fg); } .brand-sub { font-size: 11px; color: var(--fg-muted); margin-top: 2px; } .side-section { padding: 0 4px; } .side-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-subtle); font-weight: 600; margin-bottom: 6px; padding: 0 8px; } .nav { display: flex; flex-direction: column; gap: 2px; } .navbtn { display: flex; align-items: center; gap: 10px; background: transparent; border: 1px solid transparent; color: var(--fg-muted); padding: 8px 12px; border-radius: var(--r-md); font-family: var(--font); font-size: 13px; text-align: left; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; width: 100%; } .navbtn:hover { background: var(--bg-3); color: var(--fg); } .navbtn.active { background: var(--accent-bg); border-color: rgba(59, 130, 246, 0.35); color: var(--accent); font-weight: 500; } .navbtn .icon { font-size: 14px; opacity: 0.95; width: 16px; text-align: center; } .side-info { background: var(--bg-2); border: 1px solid var(--border-soft); border-radius: var(--r-md); padding: 8px 10px; font-size: 12px; display: flex; flex-direction: column; gap: 6px; } .side-info code { display: block; background: var(--bg-0); padding: 4px 6px; border-radius: var(--r-sm); color: var(--accent); font-size: 11px; word-break: break-all; } .row-flex { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .side-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border-soft); display: flex; flex-direction: column; gap: 6px; } .side-theme, .side-logout { display: flex; align-items: center; gap: 8px; width: 100%; background: transparent; border: 1px solid var(--border); color: var(--fg-muted); padding: 6px 10px; border-radius: var(--r-md); cursor: pointer; font-family: var(--font); font-size: 12px; transition: background 0.15s, border-color 0.15s, color 0.15s; } .side-theme:hover { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); } .side-logout:hover { background: var(--red-bg); border-color: var(--red); color: var(--red); } /* ===================================================== Cards, Headings, Stats ===================================================== */ .card { background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px 18px; margin-bottom: 12px; } .card h2 { margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--fg); letter-spacing: -0.01em; } .card h3 { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--fg); letter-spacing: -0.01em; } .muted { color: var(--fg-muted); } .subtle { color: var(--fg-subtle); } .small { font-size: 12px; } /* Stat boxes */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 12px; } .statbox { background: var(--bg-2); border: 1px solid var(--border-soft); border-radius: var(--r-md); padding: 14px 16px; transition: border-color 0.15s, background 0.15s; } .statbox:hover { border-color: var(--border); background: var(--bg-3); } .statlabel { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-muted); font-weight: 600; margin-bottom: 6px; } .statvalue { font-size: 22px; font-weight: 700; font-family: var(--font); font-variant-numeric: tabular-nums; color: var(--fg); letter-spacing: -0.01em; } /* Tables — Belo-style: subtle hover, softer th */ .table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-1); } table { width: 100%; border-collapse: collapse; font-size: 12.5px; } th, td { text-align: left; padding: 9px 14px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; } th { background: var(--bg-2); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-muted); font-weight: 600; border-bottom: 1px solid var(--border); white-space: nowrap; } td { color: var(--fg); font-family: var(--mono); } td.col-text { font-family: var(--font); } tbody tr:last-child td { border-bottom: none; } tbody tr { transition: background 0.1s; } tbody tr:hover { background: var(--bg-2); } /* Buttons */ button { font-family: var(--font); cursor: pointer; } /* Buttons — Belo-style: blue primary, subtle ghost, transparent danger */ .btn, button.primary, button.ghost, button.danger { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 14px; border-radius: var(--r-md); font-size: 12.5px; font-weight: 500; border: 1px solid var(--border); background: var(--bg-2); color: var(--fg); transition: background 0.15s, border-color 0.15s, color 0.15s; user-select: none; } .btn:hover, button.ghost:hover { background: var(--bg-3); border-color: var(--border-soft); } .btn:active, button.ghost:active { background: var(--bg-4); } button.primary { background: var(--accent); border-color: var(--accent); color: #fff; } button.primary:hover { background: rgb(96, 165, 250); border-color: rgb(96, 165, 250); } button.primary:active { background: rgb(37, 99, 235); } button.danger { background: transparent; border-color: rgba(239, 68, 68, 0.45); color: var(--red); } button.danger:hover { background: var(--red-bg); border-color: var(--red); } button:disabled, .btn:disabled, button.primary:disabled, button.ghost:disabled, button.danger:disabled { opacity: 0.55; cursor: not-allowed; } /* Inputs — Belo-style: softer focus ring, sans-serif default for prose, mono only for code-like fields */ input, textarea, select { background: var(--bg-0); border: 1px solid var(--border); border-radius: var(--r-md); color: var(--fg); padding: 8px 12px; font-family: var(--font); font-size: 13px; transition: border-color 0.15s, box-shadow 0.15s; } input[type="password"], input.mono, textarea.mono { font-family: var(--mono); font-size: 12.5px; } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); } input::placeholder, textarea::placeholder { color: var(--fg-subtle); } textarea { width: 100%; min-height: 100px; resize: vertical; line-height: 1.5; } @media (max-width: 700px) { .stats { grid-template-columns: repeat(2, 1fr); } .statvalue { font-size: 18px; } .card { padding: 12px 14px; } th, td { padding: 6px 8px; font-size: 11.5px; } } /* ===================================================== Pills / Status badges (Realtime states) ===================================================== */ .pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 500; font-family: var(--font); border: 1px solid var(--border); background: var(--bg-2); color: var(--fg-muted); white-space: nowrap; letter-spacing: 0.01em; } /* State pills — match the JS class names from stateLabel() */ .pill.received { color: var(--orange); background: var(--orange-bg); border-color: var(--orange); } .pill.streaming { color: var(--accent); background: var(--accent-bg); border-color: var(--accent); } .pill.streaming::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: pulse-blue 1.4s ease-in-out infinite; } @keyframes pulse-blue { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.7); } } .pill.retrying { color: var(--purple); background: var(--purple-bg); border-color: var(--purple); } .pill.retrying::before { content: "↻"; font-weight: bold; animation: spin 1.5s linear infinite; display: inline-block; } @keyframes spin { to { transform: rotate(360deg); } } .pill.stuck { color: var(--orange); background: var(--orange-bg); border-color: var(--orange); font-weight: 600; animation: pulse-orange 1.5s ease-in-out infinite; } .pill.stuck::before { content: "⏱"; font-size: 11px; } @keyframes pulse-orange { 0%, 100% { box-shadow: 0 0 0 0 rgba(210,153,34,0.5); } 50% { box-shadow: 0 0 0 4px rgba(210,153,34,0); } } .pill.completed { color: var(--green); background: var(--green-bg); border-color: rgba(34,197,94,0.30); } .pill.completed::before { content: "✓"; font-weight: bold; } .pill.failed { color: var(--red); background: var(--red-bg); border-color: rgba(239,68,68,0.30); font-weight: 500; } .pill.failed::before { content: "✕"; font-weight: bold; } /* Connection state pill (sidebar) */ .pill.dot { padding: 2px 8px 2px 6px; } .pill.dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--fg-subtle); margin-right: 4px; } .pill.dot.live { color: var(--green); border-color: var(--green); background: var(--green-bg); } .pill.dot.live::before { background: var(--green); animation: pulse-blue 2s ease-in-out infinite; } .pill.dot.reconnecting { color: var(--orange); border-color: var(--orange); background: var(--orange-bg); } .pill.dot.reconnecting::before { background: var(--orange); animation: spin 1s linear infinite; } .pill.dot.offline { color: var(--fg-subtle); } /* Provider/tier/role pills */ .pill.provider-ag { color: var(--purple); background: var(--purple-bg); border-color: var(--purple); } .pill.provider-kr { color: var(--green); background: var(--green-bg); border-color: var(--green); } .pill.provider-cx { color: var(--accent); background: var(--accent-bg); border-color: var(--accent); } .pill.provider-gc { color: #f0abfc; background: rgba(240,171,252,0.1); border-color: rgba(240,171,252,0.4); } .pill.provider-gh { color: var(--orange); background: var(--orange-bg); border-color: var(--orange); } .pill.provider-ab { color: #fbbf24; background: rgba(251,191,36,0.1); border-color: rgba(251,191,36,0.4); } .pill.tier-free { color: var(--green); background: var(--green-bg); border-color: var(--green); } .pill.tier-pro { color: var(--accent); background: var(--accent-bg); border-color: var(--accent); } .pill.tier-proplus { color: var(--orange); background: var(--orange-bg); border-color: var(--orange); } .pill.tier-unknown { color: var(--fg-subtle); } .pill.image { color: var(--purple); border-color: var(--purple); background: var(--purple-bg); font-weight: 600; } .role-badge { display: inline-block; padding: 1px 6px; font-size: 10px; border-radius: 4px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .role-badge.admin { background: var(--accent-bg); color: var(--accent); border: 1px solid var(--accent); } .role-badge.key { background: var(--orange-bg); color: var(--orange); border: 1px solid var(--orange); } /* ===================================================== Realtime Requests rows + detail panel ===================================================== */ .req-row { cursor: pointer; transition: background 0.1s; } .req-row:hover { background: var(--bg-2); } .req-row.expanded { background: var(--bg-2); } .req-row.expanded td { border-bottom-color: transparent; } /* Detail row spans full width */ .detail-row td { background: var(--bg-0); padding: 0 !important; } .dp-panel { padding: 14px; display: flex; flex-direction: column; gap: 12px; } .dp-section { background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px 14px; } .dp-section-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; padding-bottom: 8px; border-bottom: 1px solid var(--border-soft); } .dp-section-title { font-size: 12px; font-weight: 600; color: var(--fg); text-transform: uppercase; letter-spacing: 0.06em; } .dp-pills { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; } .dp-pill { background: var(--bg-2); border: 1px solid var(--border-soft); color: var(--fg-muted); padding: 2px 8px; border-radius: 4px; font-size: 11px; font-family: var(--mono); } .dp-pill-stream { color: var(--green); border-color: var(--green); background: var(--green-bg); } /* Conversation message bubbles */ .dp-messages { display: flex; flex-direction: column; gap: 6px; max-height: 500px; overflow-y: auto; padding-right: 4px; } .dp-msg { border-radius: var(--r-md); padding: 8px 12px; border-left: 3px solid var(--border); background: var(--bg-2); } .dp-msg-system { border-left-color: var(--fg-subtle); } .dp-msg-system .dp-msg-role { color: var(--fg-subtle); } .dp-msg-user { border-left-color: var(--accent); } .dp-msg-user .dp-msg-role { color: var(--accent); } .dp-msg-assistant { border-left-color: var(--purple); } .dp-msg-assistant .dp-msg-role { color: var(--purple); } .dp-msg-tool { border-left-color: var(--orange); } .dp-msg-tool .dp-msg-role { color: var(--orange); } .dp-msg-role { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; display: flex; align-items: center; gap: 4px; } .dp-msg-content { font-family: var(--mono); font-size: 12px; line-height: 1.55; color: var(--fg); white-space: pre-wrap; word-break: break-word; max-height: 280px; overflow-y: auto; } /* Tool call card (oranye, distinct dari text response) */ .dp-tool-call { background: var(--orange-bg); border: 1px solid var(--orange); border-radius: var(--r-md); padding: 10px 12px; margin-top: 6px; } .dp-tool-call-header { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--orange); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.04em; } .dp-tool-call-name { font-family: var(--mono); font-size: 12px; color: var(--fg); background: var(--bg-0); padding: 1px 6px; border-radius: 3px; } .dp-tool-call-args { font-family: var(--mono); font-size: 11px; color: var(--fg); background: var(--bg-0); padding: 8px; border-radius: var(--r-sm); white-space: pre-wrap; word-break: break-word; max-height: 200px; overflow-y: auto; } /* Error response highlight */ .dp-error { background: var(--red-bg); border: 1px solid var(--red); border-radius: var(--r-md); padding: 10px 12px; color: var(--red); } .dp-error-title { font-weight: 600; font-size: 12px; margin-bottom: 4px; } .dp-error-msg { font-family: var(--mono); font-size: 11.5px; color: var(--fg); } /* Model list table inside response */ .dp-model-list { display: grid; gap: 4px; max-height: 400px; overflow-y: auto; } .dp-model-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 8px; background: var(--bg-2); border: 1px solid var(--border-soft); border-radius: var(--r-sm); font-family: var(--mono); font-size: 11.5px; } .dp-model-row .id { color: var(--fg); } /* Raw JSON toggle */ .dp-raw-toggle { background: transparent; border: 1px solid var(--border); color: var(--fg-muted); padding: 3px 10px; font-size: 11px; border-radius: var(--r-sm); cursor: pointer; font-family: var(--mono); margin-left: auto; } .dp-raw-toggle:hover { color: var(--accent); border-color: var(--accent); } .dp-raw { background: var(--bg-0); border: 1px solid var(--border-soft); border-radius: var(--r-sm); padding: 10px; font-family: var(--mono); font-size: 11px; line-height: 1.5; white-space: pre-wrap; word-break: break-all; max-height: 400px; overflow-y: auto; color: var(--fg-muted); margin-top: 8px; } /* Meta bar */ .dp-meta { font-family: var(--mono); font-size: 11px; color: var(--fg-muted); background: var(--bg-2); border: 1px solid var(--border-soft); border-radius: var(--r-sm); padding: 6px 10px; display: flex; flex-wrap: wrap; gap: 12px; } .dp-meta strong { color: var(--fg); font-weight: 500; } @media (max-width: 700px) { .dp-panel { padding: 10px; } .dp-section { padding: 10px; } .dp-msg-content { font-size: 11.5px; } } /* ===================================================== Tabs visibility, Models filters, Key list, Docs ===================================================== */ .tabpanel { display: none; animation: fadeIn 0.2s ease; } .tabpanel.active { display: block; } @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } /* Models filter chips */ .tier-chip { padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 500; border: 1px solid var(--border); background: transparent; cursor: pointer; color: var(--fg-muted); font-family: var(--font); transition: background 0.15s, color 0.15s, border-color 0.15s; white-space: nowrap; } .tier-chip:hover { background: var(--bg-2); color: var(--fg); border-color: var(--border-soft); } .tier-chip.active { background: var(--accent-bg); border-color: rgba(59, 130, 246, 0.35); color: var(--accent); } .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } /* API Key list */ .key-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--bg-2); border: 1px solid var(--border-soft); border-radius: var(--r-md); margin-bottom: 6px; flex-wrap: wrap; } .key-row:hover { border-color: var(--border); background: var(--bg-3); } .key-name { font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--fg); flex: 1 1 200px; word-break: break-word; } .key-meta { font-size: 11px; color: var(--fg-muted); } .key-actions { display: flex; gap: 6px; flex-wrap: wrap; } /* Docs / config snippets */ .snippet { background: var(--bg-0); border: 1px solid var(--border-soft); border-radius: var(--r-md); padding: 12px; font-family: var(--mono); font-size: 12px; line-height: 1.55; white-space: pre; overflow-x: auto; color: var(--fg); } /* Hidden helpers */ [hidden], .hidden { display: none !important; } /* Modal/key-detail */ .key-detail-card { border: 1px solid var(--accent); background: var(--bg-1); position: relative; } .key-detail-close { position: absolute; top: 10px; right: 12px; background: transparent; border: 1px solid var(--border); color: var(--fg-muted); width: 24px; height: 24px; border-radius: 50%; font-size: 14px; display: flex; align-items: center; justify-content: center; cursor: pointer; } .key-detail-close:hover { color: var(--red); border-color: var(--red); } /* Role-based visibility (admin-only sections) */ .role-key .admin-only { display: none !important; } @media (max-width: 700px) { .key-row { padding: 10px; } .row { gap: 6px; } } /* ===================================================== Auth visibility: app hidden by default until login ===================================================== */ #app { display: none; } #loginBox { display: block; } /* ===================================================== Mobile-specific: top bar + bottom tab bar (native pattern) ===================================================== */ @media (max-width: 900px) { /* Sidebar: compact top strip with logo + logout */ .sidebar { flex-direction: row; align-items: center; justify-content: space-between; padding: 8px 12px; gap: 8px; height: auto; } .side-head { margin-bottom: 0; padding: 0; border-bottom: 0; flex: 1 1 auto; min-width: 0; gap: 8px; } .side-logo { width: 30px; height: 30px; font-size: 12px; border-radius: 6px; flex: 0 0 auto; } .brand { font-size: 13px; } .brand-sub { font-size: 10px; } /* Hide endpoint + statistik sections entirely */ .sidebar > .side-section:not(.nav-section) { display: none; } /* NAV section becomes a fixed bottom tab bar */ .sidebar > .side-section.nav-section { position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; margin: 0; padding: 0; background: var(--bg-1); border-top: 1px solid var(--border); box-shadow: 0 -4px 12px rgba(0,0,0,0.4); } .sidebar > .side-section.nav-section .side-label { display: none; } .nav { flex-direction: row; gap: 0; overflow: visible; padding: 0; height: 56px; } .nav::-webkit-scrollbar { display: none; } .navbtn { flex: 1 1 0; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px 4px; background: transparent; border: 0; border-radius: 0; color: var(--fg-subtle); text-align: center; width: auto; height: 100%; min-width: 0; } .navbtn .icon { font-size: 18px; opacity: 1; width: auto; } .navbtn span:not(.icon) { font-size: 10px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; font-weight: 500; } .navbtn:hover { background: transparent; color: var(--fg); } .navbtn.active { background: transparent; color: var(--accent); box-shadow: inset 0 2px 0 var(--accent); } /* Compact logout button in top strip */ .side-foot { display: flex !important; flex-direction: row; gap: 6px; margin: 0; padding: 0; border: 0; flex: 0 0 auto; } .side-theme, .side-logout { width: auto; padding: 6px 10px; font-size: 11px; border-radius: 6px; } .side-theme span:not(:first-child), .side-logout span:not(:first-child) { display: none; } /* hide labels on mobile, keep icon */ /* Add bottom padding to content so bottom bar doesn't cover content */ .content-wrap, main.content-wrap { padding-bottom: 70px; } /* Stats grid: 2 columns */ .stats { grid-template-columns: 1fr 1fr; gap: 10px; } .statvalue { font-size: 22px; } /* Card padding tighter */ .card { padding: 12px; } h2 { font-size: 16px; } } @media (max-width: 480px) { .brand-sub { display: none; } .stats { grid-template-columns: 1fr; } .navbtn span:not(.icon) { font-size: 9px; } } /* ===================================================== Native-app feel polish for mobile ===================================================== */ @media (max-width: 900px) { /* Use system font stack on mobile (iOS San Francisco / Android Roboto) */ body { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; overscroll-behavior-y: contain; /* prevent bounce/over-scroll */ } /* No text selection on chrome (top bar, bottom tab bar) */ .sidebar, .nav, .navbtn, .side-head { -webkit-user-select: none; user-select: none; } /* iOS safe area insets — notch & home indicator */ .sidebar { padding-top: max(8px, env(safe-area-inset-top)); padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); } .sidebar > .side-section.nav-section { padding-bottom: env(safe-area-inset-bottom); } .content-wrap { padding-bottom: calc(70px + env(safe-area-inset-bottom)); } /* Larger tap targets, smooth tap response */ .navbtn { min-height: 56px; -webkit-tap-highlight-color: transparent; transition: background 0.15s ease, color 0.15s ease; position: relative; } .navbtn:active { background: var(--bg-3); transform: scale(0.97); transition: transform 0.05s ease, background 0.05s ease; } .navbtn.active::after { content: ''; position: absolute; top: 0; left: 25%; right: 25%; height: 3px; background: var(--accent); border-radius: 0 0 3px 3px; } .navbtn.active { box-shadow: none; } /* override the inset shadow */ /* Buttons: bigger tap, native bounce */ button, .btn { min-height: 40px; -webkit-tap-highlight-color: transparent; transition: background 0.15s ease, transform 0.1s ease; } button:active, .btn:active { transform: scale(0.97); } /* Smooth tab transitions */ .tabpanel { animation: tab-slide 0.25s ease; } @keyframes tab-slide { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* Backdrop-blur on top bar (frosted glass — iOS-like) */ .sidebar { backdrop-filter: blur(12px) saturate(180%); -webkit-backdrop-filter: blur(12px) saturate(180%); background: rgba(13, 17, 23, 0.85); /* semi-transparent for blur */ position: sticky; top: 0; z-index: 100; } /* Backdrop-blur on bottom tab bar */ .sidebar > .side-section.nav-section { backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); background: rgba(22, 27, 34, 0.92); } /* Smoother scrolling on content */ body, html { -webkit-overflow-scrolling: touch; scroll-behavior: smooth; } /* Card lift effect on tap (subtle) */ .card { transition: transform 0.15s ease; } .card:active { transform: scale(0.998); } /* Native-style focus rings (just for keyboard, not touch) */ button:focus:not(:focus-visible) { outline: none; } input:focus:not(:focus-visible) { outline: none; } /* Prevent zoom on iOS when tapping input (font-size >= 16px) */ input, textarea, select { font-size: 16px !important; } /* Bigger bottom safe spacing for last card so floating tab doesn't touch */ .tabpanel > .card:last-child { margin-bottom: 12px; } } /* ===================================================== Mobile: Realtime Requests table → card stack ===================================================== */ @media (max-width: 900px) { /* Hide table header + horizontal scroll wrapper */ #tabRealtime .table-wrap { overflow: visible; } #tabRealtime table { display: block; width: 100%; } #tabRealtime thead { display: none; } #tabRealtime tbody { display: block; } /* Each request row becomes a card */ #tabRealtime tr.req-row { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "state model elapsed" "id id time" "meta meta meta"; gap: 6px 10px; padding: 12px; margin-bottom: 8px; background: var(--bg-2); border: 1px solid var(--border-soft); border-radius: var(--r-md); cursor: pointer; transition: background 0.15s, border-color 0.15s; } #tabRealtime tr.req-row:active { background: var(--bg-3); transform: scale(0.99); } #tabRealtime tr.req-row.expanded { border-color: var(--accent); background: var(--bg-2); } /* Cells: remove table styling, use grid areas */ #tabRealtime tr.req-row td { display: block; border: 0; padding: 0; background: transparent; font-size: 12px; } /* TD order in HTML: ID, TIME, MODEL, ENDPOINT, STATE, TOKENS, OUT, ELAPSED, STATUS */ #tabRealtime tr.req-row td:nth-child(1) { /* ID */ grid-area: id; min-width: 0; overflow: hidden; } #tabRealtime tr.req-row td:nth-child(1) code { font-size: 10px; color: var(--fg-subtle); word-break: break-all; display: inline-block; max-width: 100%; } #tabRealtime tr.req-row td:nth-child(2) { /* TIME */ grid-area: time; text-align: right; font-size: 11px; color: var(--fg-muted); } #tabRealtime tr.req-row td:nth-child(2) > div:first-child { font-size: 12px; color: var(--fg); font-weight: 500; } #tabRealtime tr.req-row td:nth-child(2) > .small { font-size: 10px; } #tabRealtime tr.req-row td:nth-child(3) { /* MODEL */ grid-area: model; overflow: hidden; min-width: 0; } #tabRealtime tr.req-row td:nth-child(3) code { font-size: 11.5px; color: var(--fg); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 100%; } /* ENDPOINT (4) — hide on mobile, redundant with detail panel */ #tabRealtime tr.req-row td:nth-child(4) { display: none; } #tabRealtime tr.req-row td:nth-child(5) { /* STATE pill */ grid-area: state; align-self: start; } #tabRealtime tr.req-row td:nth-child(5) .pill { font-size: 10.5px; padding: 3px 8px; } /* TOKENS (6), OUT (7) — hide on mobile, save row, info still in detail panel */ #tabRealtime tr.req-row td:nth-child(6), #tabRealtime tr.req-row td:nth-child(7) { display: none; } #tabRealtime tr.req-row td:nth-child(8) { /* ELAPSED */ grid-area: elapsed; text-align: right; font-family: var(--mono); font-size: 11px; color: var(--fg-muted); align-self: center; } /* HTTP STATUS (9) — render as small badge inline with elapsed */ #tabRealtime tr.req-row td:nth-child(9) { display: none; /* hidden, status info already in STATE pill */ } /* Detail row: full width */ #tabRealtime tr.detail-row { display: block; margin: -4px 0 8px; background: var(--bg-1); border: 1px solid var(--accent); border-top: 0; border-radius: 0 0 var(--r-md) var(--r-md); overflow: hidden; } #tabRealtime tr.detail-row td { display: block; padding: 0 !important; border: 0; width: 100%; } /* When card is expanded, remove its bottom border-radius so detail panel connects */ #tabRealtime tr.req-row.expanded { border-radius: var(--r-md) var(--r-md) 0 0; } /* Detail panel inner padding tighter */ #tabRealtime .dp-panel { padding: 10px; gap: 10px; } #tabRealtime .dp-section { padding: 10px; } #tabRealtime .dp-meta { flex-wrap: wrap; font-size: 10px; line-height: 1.6; } } /* ===================================================== API Keys: Detail panel — meta grid, stats, charts, bars ===================================================== */ .kd-meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 16px; background: var(--bg-2); border: 1px solid var(--border-soft); border-radius: var(--r-lg); padding: 12px 14px; margin: 12px 0; } .kd-meta-grid > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; word-break: break-word; } .kd-meta-grid code { background: var(--bg-0); border: 1px solid var(--border-soft); padding: 2px 6px; border-radius: var(--r-sm); font-size: 11.5px; word-break: break-all; } /* 24h / 7d / 30d / Total cards */ .kd-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 14px 0; } .kd-stat-card { background: var(--bg-2); border: 1px solid var(--border-soft); border-radius: var(--r-lg); padding: 12px 14px; transition: border-color .15s ease; } .kd-stat-card:hover { border-color: var(--bg-4); } .kd-stat-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--fg-muted); margin-bottom: 6px; } .kd-num { font-size: 22px; font-weight: 700; color: var(--fg); font-family: var(--mono); line-height: 1.2; } /* Top model bars */ .kd-bar { margin: 6px 0; } .kd-bar-label { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; } .kd-bar-label code { font-size: 11.5px; color: var(--fg); background: transparent; padding: 0; } .kd-bar-track { height: 8px; background: var(--bg-2); border-radius: var(--r-sm); overflow: hidden; } .kd-bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--purple)); transition: width .3s ease; } /* 7-day chart */ .kd-chart { display: flex; gap: 6px; align-items: flex-end; padding: 14px 8px 6px; background: var(--bg-2); border: 1px solid var(--border-soft); border-radius: var(--r-lg); min-height: 110px; } .kd-chart-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; } .kd-chart-fill { width: 100%; max-width: 28px; background: linear-gradient(180deg, var(--accent), rgba(56,139,253,0.4)); border-radius: var(--r-sm) var(--r-sm) 0 0; min-height: 2px; } .kd-chart-label { font-size: 10.5px; color: var(--fg-subtle); } .kd-chart-val { font-size: 10.5px; color: var(--fg-muted); font-family: var(--mono); } /* ===================================================== API Keys form — admin create panel ===================================================== */ #newKeyName, #newKeyTelegram, #newKeyTelegramId, #newKeyDays { width: 100%; } .row.spread { justify-content: space-between; } /* ===================================================== Tab Dokumentasi — config box & docs grid ===================================================== */ .docs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; margin: 14px 0; } .doc-box { background: var(--bg-2); border: 1px solid var(--border-soft); border-radius: var(--r-lg); padding: 14px; } .doc-title { font-size: 13px; font-weight: 600; color: var(--fg); margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border-soft); text-transform: uppercase; letter-spacing: 0.4px; } .doc-row { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; } .doc-row:last-child { margin-bottom: 0; } .doc-row code { display: inline-block; background: var(--bg-0); border: 1px solid var(--border-soft); padding: 6px 8px; border-radius: var(--r-sm); font-size: 11.5px; word-break: break-all; color: var(--fg); } .doc-list { margin: 0; padding-left: 18px; color: var(--fg-muted); } .doc-list li { margin-bottom: 6px; font-size: 13px; line-height: 1.55; } .doc-list li code { background: var(--bg-0); border: 1px solid var(--border-soft); padding: 1px 6px; border-radius: var(--r-sm); font-size: 11.5px; color: var(--fg); } .cfgbox { background: var(--bg-2); border: 1px solid var(--border-soft); border-radius: var(--r-lg); padding: 16px; margin-top: 16px; } .cfgtitle { font-size: 14px; font-weight: 600; color: var(--fg); margin: 0 0 4px; padding-bottom: 8px; border-bottom: 1px solid var(--border-soft); display: flex; align-items: center; gap: 8px; } .cfgtitle::before { content: ""; display: inline-block; width: 3px; height: 14px; background: var(--accent); border-radius: 2px; } .cfgbox p { margin: 6px 0 8px; } .cfgbox textarea { width: 100%; min-height: 110px; font-family: var(--mono); font-size: 11.5px; background: var(--bg-0); border: 1px solid var(--border-soft); color: var(--fg); padding: 10px 12px; border-radius: var(--r-md); resize: vertical; margin: 4px 0 8px; } .cfgbox .row { display: flex; gap: 10px; align-items: center; margin-top: 4px; } /* ===================================================== Detail toggle (small "show raw" / "Copy API Key" buttons) ===================================================== */ .detail-toggle { display: inline-flex; align-items: center; gap: 6px; background: var(--accent-bg); border: 1px solid var(--accent); color: var(--accent); padding: 5px 12px; border-radius: var(--r-sm); font-size: 12px; font-weight: 500; cursor: pointer; transition: all .15s ease; } .detail-toggle:hover { background: var(--accent); color: #fff; } .detail-toggle:disabled { opacity: 0.5; cursor: not-allowed; } /* ===================================================== Helpers — small layout fixes ===================================================== */ .admin-only[style*="grid"] input { background: var(--bg-0); border: 1px solid var(--border); color: var(--fg); padding: 8px 10px; border-radius: var(--r-md); font-size: 13px; } .admin-only[style*="grid"] input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-bg); } @media (max-width: 720px) { .admin-only[style*="grid"] { grid-template-columns: 1fr !important; } .kd-stats-grid { grid-template-columns: repeat(2, 1fr); } } /* ===================================================== API Keys: Card grid (lebih bagus dari tabel di banyak kolom) ===================================================== */ .key-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; } .key-card-empty { padding: 32px 24px; text-align: center; background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--r-md); } .key-card { background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 12px; cursor: pointer; transition: border-color 0.15s, background 0.15s; } .key-card:hover { border-color: var(--border-soft); background: var(--bg-2); } .key-card:active { background: var(--bg-3); } .key-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--border-soft); flex-wrap: wrap; } .key-card-name { font-weight: 600; font-size: 13.5px; color: var(--fg); word-break: break-word; letter-spacing: -0.01em; line-height: 1.4; flex: 1; min-width: 0; } .key-card-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; } .key-card-meta > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .kc-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-muted); font-weight: 600; } .key-card-meta code { background: var(--bg-0); border: 1px solid var(--border-soft); padding: 2px 7px; border-radius: var(--r-sm); font-size: 11px; word-break: break-all; display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .key-card-actions { display: flex; gap: 8px; justify-content: flex-end; padding-top: 8px; border-top: 1px solid var(--border-soft); } .key-card-actions button { font-size: 12px; padding: 6px 14px; } /* Source badges (di key card head) — match Belo soft-pill style */ .src-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 500; margin-left: 6px; white-space: nowrap; border: 1px solid transparent; letter-spacing: 0.005em; } .src-bonus { color: var(--green); background: var(--green-bg); border-color: rgba(34,197,94,0.30); } .src-weekly-7d { color: var(--orange); background: var(--orange-bg); border-color: rgba(245,158,11,0.30); } .src-zone { color: var(--accent); background: var(--accent-bg); border-color: rgba(59,130,246,0.30); } .src-trial { color: var(--purple); background: var(--purple-bg); border-color: rgba(168,85,247,0.30); } .src-manual { color: var(--fg-muted); background: var(--bg-3); border-color: var(--border); } .src-internal { color: var(--accent); background: var(--accent-bg); border-color: rgba(59,130,246,0.20); } .src-default { color: var(--fg-muted); background: var(--bg-3); border-color: var(--border); } @media (max-width: 480px) { .key-card-meta { grid-template-columns: 1fr; } }