| .tokens-hero-card { |
| padding: var(--space-6); |
| } |
| .tokens-hero-bar { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 16px; |
| flex-wrap: wrap; |
| } |
| .tokens-page-subtitle { |
| margin: 0; |
| } |
| .tokens-create-btn { |
| padding: 8px 16px; |
| } |
| .tokens-empty-state { |
| display: none; |
| padding: 60px 20px; |
| text-align: center; |
| } |
| .tokens-empty-icon { |
| margin-bottom: 16px; |
| color: var(--primary-500); |
| } |
| .tokens-empty-title { |
| margin-bottom: 8px; |
| color: var(--neutral-900); |
| font-weight: 600; |
| } |
| .tokens-empty-desc { |
| margin-bottom: 24px; |
| color: var(--neutral-700); |
| font-size: 15px; |
| } |
| .token-custom-expiry { |
| display: none; |
| } |
| .token-table { |
| width: 100%; |
| background: white; |
| border-radius: 12px; |
| overflow: hidden; |
| overflow-x: auto; |
| box-shadow: 0 1px 3px rgba(0,0,0,0.1); |
| } |
| .token-table table { |
| width: 100%; |
| border-collapse: collapse; |
| } |
| .token-table thead { |
| background: var(--neutral-100); |
| } |
| .token-table th { |
| padding: 12px 16px; |
| text-align: left; |
| font-size: 13px; |
| font-weight: 600; |
| color: var(--neutral-700); |
| border-bottom: 1px solid var(--neutral-200); |
| } |
| .token-table td { |
| padding: 12px 16px; |
| border-bottom: 1px solid var(--neutral-100); |
| font-size: 14px; |
| } |
| .tokens-table-head-center { |
| text-align: center !important; |
| } |
| .token-table tbody tr:hover { |
| background: var(--neutral-50); |
| } |
| .token-table tbody tr:last-child td { |
| border-bottom: none; |
| } |
| .tokens-hero-card { |
| padding: var(--space-6); |
| } |
| .tokens-hero-bar { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 16px; |
| flex-wrap: wrap; |
| } |
| .tokens-page-subtitle { |
| margin: 0; |
| } |
| .tokens-create-btn { |
| padding: 8px 16px; |
| } |
| .tokens-empty-state { |
| display: none; |
| padding: 60px 20px; |
| text-align: center; |
| } |
| .tokens-empty-icon { |
| margin-bottom: 16px; |
| color: var(--primary-500); |
| } |
| .tokens-empty-title { |
| margin-bottom: 8px; |
| color: var(--neutral-900); |
| font-weight: 600; |
| } |
| .tokens-empty-desc { |
| margin-bottom: 24px; |
| color: var(--neutral-700); |
| font-size: 15px; |
| } |
| .token-custom-expiry { |
| display: none; |
| } |
| .token-cost-prefix { |
| color: var(--neutral-500); |
| } |
| .token-limit-control { |
| display: flex; |
| flex-direction: column; |
| flex: 1 1 auto; |
| gap: 5px; |
| min-width: 0; |
| width: 100%; |
| } |
| .form-row-inline:has(> .token-limit-control) { |
| align-items: flex-start; |
| } |
| .form-row-inline:has(> .token-limit-control) > .form-row-inline__label { |
| display: flex; |
| align-items: center; |
| min-height: 36px; |
| } |
| .token-limit-input-line { |
| display: grid; |
| grid-template-columns: 14px minmax(0, 1fr) max-content; |
| align-items: center; |
| gap: 8px; |
| min-width: 0; |
| width: 100%; |
| } |
| .token-limit-input-line .field-grow { |
| flex: 1 1 auto; |
| min-width: 0; |
| width: 100%; |
| } |
| .token-limit-prefix-slot { |
| flex: 0 0 14px; |
| width: 14px; |
| color: var(--neutral-500); |
| font-weight: 600; |
| text-align: center; |
| line-height: 1; |
| } |
| .token-limit-prefix-slot--empty { |
| visibility: hidden; |
| } |
| .token-limit-meta { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 8px 12px; |
| min-width: 0; |
| flex-wrap: wrap; |
| } |
| .token-active-label { |
| display: inline-flex; |
| align-items: center; |
| gap: 8px; |
| cursor: pointer; |
| } |
| .token-row-actions { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| gap: 4px; |
| flex-wrap: nowrap; |
| } |
| .tokens-col-description { |
| font-weight: 500; |
| } |
| .token-row-meta { |
| margin-top: 4px; |
| color: var(--neutral-500); |
| font-size: 12px; |
| } |
| .tokens-col-calls, |
| .tokens-col-success-rate, |
| .tokens-col-rpm, |
| .tokens-col-token-usage, |
| .tokens-col-cost, |
| .tokens-col-concurrency, |
| .tokens-col-stream, |
| .tokens-col-non-stream { |
| text-align: center; |
| } |
| .token-limit-hint { |
| flex: 0 0 auto; |
| color: var(--neutral-500); |
| font-size: 12px; |
| font-weight: 600; |
| line-height: 1.3; |
| white-space: nowrap; |
| } |
| .token-limit-hint--inline { |
| flex: 0 0 auto; |
| } |
| .tokens-col-last-used { |
| color: var(--neutral-600); |
| } |
| .tokens-col-actions { |
| white-space: nowrap; |
| } |
| .token-row-action-btn { |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| width: 28px; |
| height: 28px; |
| padding: 0; |
| line-height: 0; |
| white-space: nowrap; |
| flex: 0 0 auto; |
| } |
| .token-row-action-btn.btn-danger { |
| color: var(--error-600); |
| } |
| .token-row-action-btn.btn-danger:hover { |
| color: var(--error-700); |
| border-color: var(--error-400); |
| background: var(--error-50); |
| } |
| .token-display { |
| font-family: monospace; |
| background: var(--neutral-100); |
| padding: 4px 8px; |
| border-radius: 4px; |
| font-size: 13px; |
| display: inline-block; |
| } |
| |
| .token-display-active { |
| background: var(--success-50); |
| color: var(--success-800); |
| border: 1px solid var(--success-300); |
| } |
| .token-display-inactive { |
| background: var(--neutral-100); |
| color: var(--neutral-600); |
| border: 1px solid var(--neutral-300); |
| } |
| .token-display-expired { |
| background: var(--error-50); |
| color: var(--error-800); |
| border: 1px solid var(--error-300); |
| } |
| .token-result-warning { |
| margin-bottom: 16px; |
| padding: 16px; |
| background: var(--warning-50); |
| border: 1px solid var(--warning-200); |
| border-radius: 8px; |
| } |
| .token-result-warning-title { |
| margin-bottom: 8px; |
| color: var(--warning-700); |
| font-weight: 600; |
| } |
| .token-result-warning-desc { |
| color: var(--warning-800); |
| font-size: 14px; |
| } |
| .token-result-value-wrap { |
| position: relative; |
| } |
| .token-result-value { |
| height: 80px; |
| resize: none; |
| font-family: monospace; |
| font-size: 13px; |
| } |
| .token-result-copy-btn { |
| position: absolute; |
| top: 8px; |
| right: 8px; |
| padding: 4px 12px; |
| font-size: 13px; |
| } |
| .status-badge { |
| display: inline-block; |
| padding: 4px 12px; |
| border-radius: 12px; |
| font-size: 12px; |
| font-weight: 600; |
| } |
| .status-active { |
| background: var(--success-100); |
| color: var(--success-700); |
| } |
| .status-inactive { |
| background: var(--neutral-200); |
| color: var(--neutral-700); |
| } |
| .status-expired { |
| background: var(--error-100); |
| color: var(--error-700); |
| } |
| .stats-badge { |
| display: inline-block; |
| padding: 2px 8px; |
| border-radius: 4px; |
| font-size: 12px; |
| font-weight: 600; |
| background: var(--neutral-100); |
| color: var(--neutral-700); |
| } |
| .success-rate-high { |
| background: var(--success-100); |
| color: var(--success-700); |
| } |
| .success-rate-medium { |
| background: var(--warning-100); |
| color: var(--warning-700); |
| } |
| .success-rate-low { |
| background: var(--error-100); |
| color: var(--error-700); |
| } |
| .metric-value { |
| font-weight: 600; |
| color: var(--neutral-900); |
| } |
| .metric-label { |
| font-size: 11px; |
| color: var(--neutral-600); |
| margin-top: 2px; |
| } |
| .token-value-muted { |
| color: var(--neutral-500); |
| font-size: 13px; |
| } |
| .token-call-stats { |
| display: inline-flex; |
| align-items: center; |
| justify-content: flex-end; |
| gap: 4px; |
| flex-wrap: wrap; |
| } |
| .token-call-badge { |
| display: inline-flex; |
| align-items: center; |
| gap: 4px; |
| padding: 0; |
| border-radius: 0; |
| background: transparent; |
| } |
| .token-call-badge--success { |
| color: var(--success-700); |
| } |
| .token-call-badge--failure { |
| color: var(--error-700); |
| } |
| .token-call-icon { |
| font-size: 14px; |
| font-weight: 700; |
| line-height: 1; |
| } |
| .token-call-icon--success { |
| color: var(--success-600); |
| } |
| .token-call-icon--failure { |
| color: var(--error-600); |
| } |
| .token-rpm { |
| font-weight: 500; |
| } |
| .token-rpm--low { |
| color: var(--success-600); |
| } |
| .token-rpm--medium { |
| color: var(--warning-600); |
| } |
| .token-rpm--high { |
| color: var(--error-600); |
| } |
| .token-cost { |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| gap: 2px; |
| } |
| .token-cost .cost-stack { |
| align-items: center; |
| text-align: center; |
| font-size: 15px; |
| font-weight: 700; |
| } |
| |
| .response-fast { |
| color: var(--success-700); |
| font-weight: 600; |
| } |
| .response-medium { |
| color: var(--warning-700); |
| font-weight: 600; |
| } |
| .response-slow { |
| color: var(--error-700); |
| font-weight: 600; |
| } |
| .token-usage-metrics { |
| display: grid; |
| grid-template-columns: repeat(2, minmax(0, max-content)); |
| gap: 4px; |
| justify-content: center; |
| } |
| .token-usage-item { |
| display: inline-flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 6px; |
| min-width: 0; |
| padding: 0; |
| border-radius: 0; |
| font-size: 12px; |
| font-weight: 600; |
| white-space: nowrap; |
| background: transparent; |
| } |
| .token-usage-label { |
| color: inherit; |
| } |
| .token-usage-value { |
| color: var(--neutral-900); |
| font-variant-numeric: tabular-nums; |
| font-feature-settings: "tnum"; |
| } |
| .token-usage-item--input { |
| color: var(--primary-700); |
| } |
| .token-usage-item--output { |
| color: var(--secondary-700); |
| } |
| .token-usage-item--cache-read { |
| color: var(--success-700); |
| } |
| .token-usage-item--cache-create { |
| color: var(--warning-700); |
| } |
| .modal { |
| display: none; |
| position: fixed; |
| z-index: 1000; |
| left: 0; |
| top: 0; |
| width: 100%; |
| height: 100%; |
| background-color: rgba(0,0,0,0.5); |
| animation: fadeIn 0.2s; |
| } |
| .modal-content { |
| background-color: white; |
| margin: 5% auto; |
| padding: 0; |
| border-radius: 12px; |
| max-width: 600px; |
| box-shadow: 0 10px 40px rgba(0,0,0,0.2); |
| animation: slideUp 0.3s; |
| } |
| .modal-content--sm { |
| max-width: 500px; |
| } |
| .modal-content--md { |
| max-width: 600px; |
| } |
| .modal-content--wide { |
| width: 90%; |
| max-width: none; |
| } |
| .token-edit-modal { |
| display: flex; |
| flex-direction: column; |
| min-height: min(680px, calc(100vh - 32px)); |
| } |
| .token-edit-body { |
| padding-top: 12px; |
| padding-bottom: 12px; |
| display: flex; |
| flex: 1 1 auto; |
| flex-direction: column; |
| gap: 12px; |
| overflow: hidden; |
| } |
| .token-edit-layout { |
| display: grid; |
| grid-template-columns: 320px minmax(0, 1fr); |
| align-items: stretch; |
| gap: 12px; |
| } |
| .token-edit-sidebar { |
| display: flex; |
| flex-direction: column; |
| gap: 12px; |
| min-width: 0; |
| min-height: 0; |
| } |
| .token-edit-main { |
| display: grid; |
| grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); |
| align-items: stretch; |
| gap: 12px; |
| min-width: 0; |
| min-height: 0; |
| } |
| .token-edit-section { |
| display: flex; |
| flex-direction: column; |
| gap: 12px; |
| padding: 14px 16px; |
| border: 1px solid var(--neutral-200); |
| border-radius: 10px; |
| background: var(--neutral-50); |
| } |
| .token-edit-section--models { |
| flex: 1 1 auto; |
| min-height: 0; |
| min-width: 0; |
| background: white; |
| } |
| .token-edit-section--channels { |
| flex: 1 1 auto; |
| min-height: 0; |
| min-width: 0; |
| background: white; |
| } |
| .token-edit-section-header { |
| display: flex; |
| align-items: flex-start; |
| justify-content: space-between; |
| gap: 8px 12px; |
| flex-wrap: wrap; |
| margin-bottom: 8px; |
| } |
| .token-edit-section-title { |
| margin: 0; |
| color: var(--neutral-600); |
| font-size: 13px; |
| font-weight: 700; |
| letter-spacing: 0.04em; |
| text-transform: uppercase; |
| } |
| .token-edit-custom-expiry { |
| display: none; |
| margin-bottom: 0; |
| } |
| .token-edit-field { |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| } |
| .token-edit-field .form-label { |
| margin-bottom: 0; |
| flex: 0 0 60px; |
| min-width: 60px; |
| white-space: nowrap; |
| } |
| .token-edit-field .form-row-inline__content, |
| .token-edit-field .field-grow { |
| flex: 1 1 auto; |
| min-width: 0; |
| } |
| .token-edit-token-value { |
| font-family: 'Monaco', 'Menlo', 'Courier New', monospace; |
| font-size: 13px; |
| } |
| .token-edit-token-value[readonly] { |
| background: white; |
| color: var(--neutral-700); |
| } |
| .token-edit-cost-prefix { |
| color: var(--neutral-500); |
| } |
| .token-edit-cost-meta { |
| display: grid; |
| grid-template-columns: 14px minmax(0, 1fr) max-content; |
| align-items: center; |
| gap: 8px; |
| width: 100%; |
| } |
| .token-edit-cost-used { |
| grid-column: 2; |
| color: var(--neutral-600); |
| font-size: 13px; |
| min-width: 0; |
| white-space: nowrap; |
| } |
| .token-edit-cost-used:empty { |
| display: none; |
| } |
| .token-edit-active-label { |
| margin: 0; |
| display: inline-flex; |
| align-items: center; |
| gap: 8px; |
| cursor: pointer; |
| } |
| .token-edit-active-row { |
| margin-bottom: 0; |
| } |
| .token-edit-models-section { |
| min-height: 0; |
| } |
| .token-edit-channels-section { |
| min-height: 0; |
| } |
| .token-edit-channels-header { |
| margin-bottom: 8px; |
| } |
| .token-edit-channels-title { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| min-width: 0; |
| flex-wrap: wrap; |
| } |
| .token-edit-channels-meta { |
| color: var(--neutral-500); |
| font-size: 12px; |
| white-space: nowrap; |
| } |
| .token-edit-channels-actions { |
| display: flex; |
| align-items: center; |
| gap: 6px; |
| flex-wrap: wrap; |
| min-width: 0; |
| } |
| .token-edit-channels-btn { |
| padding: 5px 10px; |
| font-size: 12px; |
| } |
| .token-edit-channels-btn--batch:disabled { |
| opacity: 0.5; |
| } |
| .token-edit-channels-actions .btn { |
| white-space: nowrap; |
| } |
| .token-edit-channels-table { |
| flex: 1 1 auto; |
| min-height: 0; |
| overflow-y: auto; |
| border: 1px solid var(--neutral-200); |
| border-radius: 6px; |
| } |
| .token-edit-models-header { |
| margin-bottom: 8px; |
| } |
| .token-edit-models-title { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| min-width: 0; |
| flex-wrap: wrap; |
| } |
| .token-edit-models-meta { |
| color: var(--neutral-500); |
| font-size: 12px; |
| white-space: nowrap; |
| } |
| .token-edit-models-actions { |
| display: flex; |
| align-items: center; |
| gap: 6px; |
| flex-wrap: wrap; |
| min-width: 0; |
| } |
| .token-edit-models-btn { |
| padding: 5px 10px; |
| font-size: 12px; |
| } |
| .token-edit-models-btn--batch:disabled { |
| opacity: 0.5; |
| } |
| .token-edit-models-actions .btn { |
| white-space: nowrap; |
| } |
| .token-edit-models-table { |
| flex: 1 1 auto; |
| min-height: 0; |
| overflow-y: auto; |
| border: 1px solid var(--neutral-200); |
| border-radius: 6px; |
| } |
| .allowed-models-table-head { |
| background: var(--neutral-100); |
| } |
| .allowed-model-col-select-head, |
| .allowed-model-col-name-head, |
| .allowed-model-col-actions-head { |
| padding: 8px; |
| } |
| .allowed-channels-table-head { |
| background: var(--neutral-100); |
| } |
| .allowed-channel-col-select-head, |
| .allowed-channel-col-name-head, |
| .allowed-channel-col-type-head, |
| .allowed-channel-col-actions-head { |
| padding: 8px; |
| } |
| .allowed-channel-col-select-head { |
| width: 40px; |
| text-align: center; |
| } |
| .allowed-channel-col-name-head, |
| .allowed-channel-col-type-head { |
| text-align: left; |
| } |
| .allowed-channel-col-actions-head { |
| width: 60px; |
| } |
| .allowed-channels-empty-cell { |
| padding: 16px; |
| text-align: center; |
| color: var(--neutral-500); |
| } |
| .allowed-channel-col-select, |
| .allowed-channel-col-type, |
| .allowed-channel-col-actions { |
| padding: 8px; |
| text-align: center; |
| } |
| .allowed-channel-col-name { |
| padding: 8px; |
| font-weight: 500; |
| } |
| .allowed-channel-col-type { |
| color: var(--neutral-600); |
| font-size: 13px; |
| } |
| .allowed-channel-remove-btn { |
| padding: 2px 8px; |
| font-size: 12px; |
| } |
| .allowed-model-col-select-head { |
| width: 40px; |
| text-align: center; |
| } |
| .allowed-model-col-name-head { |
| text-align: left; |
| } |
| .allowed-model-col-actions-head { |
| width: 60px; |
| } |
| .allowed-models-empty-cell { |
| padding: 16px; |
| text-align: center; |
| color: var(--neutral-500); |
| } |
| .allowed-model-col-select, |
| .allowed-model-col-actions { |
| padding: 8px; |
| text-align: center; |
| } |
| .allowed-model-col-name { |
| padding: 8px; |
| font-family: monospace; |
| font-size: 13px; |
| } |
| .allowed-model-remove-btn { |
| padding: 2px 8px; |
| font-size: 12px; |
| } |
| .token-result-warning { |
| margin-bottom: 16px; |
| padding: 16px; |
| background: var(--warning-50); |
| border: 1px solid var(--warning-200); |
| border-radius: 8px; |
| } |
| .token-result-warning-title { |
| margin-bottom: 8px; |
| color: var(--warning-700); |
| font-weight: 600; |
| } |
| .token-result-warning-desc { |
| color: var(--warning-800); |
| font-size: 14px; |
| } |
| .token-result-value-wrap { |
| position: relative; |
| } |
| .token-result-value { |
| height: 80px; |
| resize: none; |
| font-family: monospace; |
| font-size: 13px; |
| } |
| .token-result-copy-btn { |
| position: absolute; |
| top: 8px; |
| right: 8px; |
| } |
| .modal-header { |
| padding: 20px 24px; |
| border-bottom: 1px solid var(--neutral-200); |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| } |
| .modal-body { |
| padding: 24px; |
| } |
| .modal-footer { |
| padding: 16px 24px; |
| border-top: 1px solid var(--neutral-200); |
| display: flex; |
| justify-content: flex-end; |
| gap: 12px; |
| } |
| #selectAllContainer { |
| display: none; |
| padding: 8px 12px; |
| border: 1px solid var(--neutral-200); |
| border-bottom: none; |
| border-radius: 6px 6px 0 0; |
| background: var(--neutral-50); |
| } |
| #selectAllChannelsContainer { |
| display: none; |
| padding: 8px 12px; |
| border: 1px solid var(--neutral-200); |
| border-bottom: none; |
| border-radius: 6px 6px 0 0; |
| background: var(--neutral-50); |
| } |
| .model-select-all-label { |
| display: flex; |
| align-items: center; |
| cursor: pointer; |
| font-size: 13px; |
| } |
| .channel-select-all-label { |
| display: flex; |
| align-items: center; |
| cursor: pointer; |
| font-size: 13px; |
| } |
| .model-select-all-checkbox { |
| margin-right: 8px; |
| } |
| .channel-select-all-checkbox { |
| margin-right: 8px; |
| } |
| .channel-select-filter-row { |
| display: grid; |
| grid-template-columns: minmax(0, 1fr) 150px; |
| gap: 8px; |
| } |
| .channel-type-filter-select { |
| min-width: 0; |
| width: 100%; |
| } |
| #visibleModelsCount { |
| margin-left: 8px; |
| color: var(--neutral-500); |
| } |
| #visibleChannelsCount { |
| margin-left: 8px; |
| color: var(--neutral-500); |
| } |
| .model-select-summary { |
| margin-top: 8px; |
| color: var(--neutral-500); |
| font-size: 12px; |
| } |
| .channel-select-summary { |
| margin-top: 8px; |
| color: var(--neutral-500); |
| font-size: 12px; |
| } |
| #availableModelsContainer.available-models-container--standalone { |
| border-radius: 6px; |
| } |
| #availableModelsContainer.available-models-container--stacked { |
| border-radius: 0 0 6px 6px; |
| } |
| .available-models-empty { |
| padding: 24px; |
| text-align: center; |
| color: var(--neutral-500); |
| } |
| #availableChannelsContainer.available-channels-container--standalone { |
| border-radius: 6px; |
| } |
| #availableChannelsContainer.available-channels-container--stacked { |
| border-radius: 0 0 6px 6px; |
| } |
| .available-channels-empty { |
| padding: 24px; |
| text-align: center; |
| color: var(--neutral-500); |
| } |
| .channel-type-group { |
| border-bottom: 1px solid var(--neutral-200); |
| } |
| .channel-type-group:last-child { |
| border-bottom: none; |
| } |
| .channel-type-group-header { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 12px; |
| padding: 9px 12px; |
| background: var(--neutral-50); |
| border-bottom: 1px solid var(--neutral-100); |
| } |
| .channel-type-group-title { |
| display: inline-flex; |
| align-items: center; |
| gap: 6px; |
| min-width: 0; |
| color: var(--neutral-800); |
| font-size: 13px; |
| font-weight: 700; |
| } |
| .channel-type-group-name { |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
| .channel-type-group-count { |
| color: var(--neutral-500); |
| font-size: 12px; |
| font-weight: 500; |
| white-space: nowrap; |
| } |
| .channel-type-group-list { |
| background: #fff; |
| } |
| .model-option-item { |
| display: flex; |
| align-items: center; |
| padding: 8px 12px; |
| cursor: pointer; |
| border-bottom: 1px solid var(--neutral-100); |
| } |
| .model-option-checkbox { |
| margin-right: 8px; |
| } |
| .model-option-label { |
| font-family: monospace; |
| font-size: 13px; |
| } |
| .model-option-item:hover { |
| background: var(--neutral-50); |
| } |
| .channel-option-item { |
| display: grid; |
| grid-template-columns: auto minmax(0, 1fr) auto; |
| align-items: center; |
| gap: 8px; |
| padding: 8px 12px; |
| cursor: pointer; |
| border-bottom: 1px solid var(--neutral-100); |
| } |
| .channel-option-checkbox { |
| margin: 0; |
| } |
| .channel-option-label { |
| min-width: 0; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| font-size: 13px; |
| font-weight: 500; |
| } |
| .channel-option-meta { |
| color: var(--neutral-500); |
| font-size: 12px; |
| white-space: nowrap; |
| } |
| .channel-option-item:hover { |
| background: var(--neutral-50); |
| } |
| .token-model-import-body { |
| display: flex; |
| flex-direction: column; |
| gap: 12px; |
| } |
| .model-import-group { |
| margin-bottom: 0; |
| } |
| .model-import-label { |
| margin-bottom: 8px; |
| } |
| .model-import-hint { |
| color: var(--neutral-500); |
| font-size: 13px; |
| font-weight: 400; |
| } |
| .model-import-textarea { |
| min-height: 160px; |
| resize: vertical; |
| font-family: 'Monaco', 'Menlo', 'Courier New', monospace; |
| font-size: 13px; |
| } |
| .token-model-import-tip { |
| margin-bottom: 0; |
| padding: 10px 12px; |
| color: var(--neutral-700); |
| font-size: 12px; |
| background: var(--info-50); |
| border: 1px solid var(--info-200); |
| border-radius: 6px; |
| } |
| .token-model-import-code { |
| padding: 2px 4px; |
| background: rgba(0, 0, 0, 0.05); |
| border-radius: 3px; |
| } |
| .token-model-import-preview { |
| display: none; |
| padding: 10px 12px; |
| color: var(--success-700); |
| font-size: 13px; |
| background: var(--success-50); |
| border: 1px solid var(--success-200); |
| border-radius: 6px; |
| } |
| @keyframes fadeIn { |
| from { opacity: 0; } |
| to { opacity: 1; } |
| } |
| @keyframes slideUp { |
| from { transform: translateY(50px); opacity: 0; } |
| to { transform: translateY(0); opacity: 1; } |
| } |
| .tokens-actions-col { |
| width: 260px; |
| } |
| @media (max-width: 768px) { |
| .token-table { |
| overflow: visible; |
| background: transparent; |
| box-shadow: none; |
| border-radius: 0; |
| } |
| .tokens-hero-bar { |
| align-items: stretch; |
| } |
| .tokens-create-btn { |
| width: 100%; |
| } |
| .tokens-table .tokens-col-description, |
| .tokens-table .tokens-col-token, |
| .tokens-table .tokens-col-token-usage, |
| .tokens-table .tokens-col-last-used, |
| .tokens-table .tokens-col-actions { |
| grid-column: 1 / -1; |
| } |
| .tokens-table .tokens-col-description { |
| order: 1; |
| } |
| .tokens-table .tokens-col-token { |
| order: 2; |
| } |
| .tokens-table .tokens-col-calls { |
| order: 10; |
| } |
| .tokens-table .tokens-col-success-rate { |
| order: 11; |
| } |
| .tokens-table .tokens-col-rpm { |
| order: 12; |
| } |
| .tokens-table .tokens-col-token-usage { |
| order: 20; |
| } |
| .tokens-table .tokens-col-cost { |
| order: 21; |
| } |
| .tokens-table .tokens-col-concurrency { |
| order: 22; |
| } |
| .tokens-table .tokens-col-stream { |
| order: 23; |
| } |
| .tokens-table .tokens-col-non-stream { |
| order: 24; |
| } |
| .tokens-table .tokens-col-last-used { |
| order: 25; |
| } |
| .tokens-table .tokens-col-actions { |
| order: 30; |
| } |
| .tokens-table .tokens-col-description, |
| .tokens-table .tokens-col-token { |
| display: flex !important; |
| align-items: center; |
| gap: 8px 12px; |
| } |
| .tokens-table .tokens-col-description::before, |
| .tokens-table .tokens-col-token::before { |
| width: auto !important; |
| margin-bottom: 0 !important; |
| flex: 0 0 auto; |
| white-space: nowrap; |
| } |
| .tokens-table .tokens-col-token { |
| flex-wrap: wrap; |
| } |
| .tokens-table .tokens-col-token > div:first-of-type { |
| flex: 0 0 auto; |
| min-width: 0; |
| } |
| .tokens-table .tokens-col-token > div:last-of-type { |
| flex: 0 0 100%; |
| margin-top: 0 !important; |
| } |
| .tokens-table .tokens-col-calls, |
| .tokens-table .tokens-col-success-rate, |
| .tokens-table .tokens-col-rpm, |
| .tokens-table .tokens-col-token-usage, |
| .tokens-table .tokens-col-cost, |
| .tokens-table .tokens-col-concurrency, |
| .tokens-table .tokens-col-stream, |
| .tokens-table .tokens-col-non-stream, |
| .tokens-table .tokens-col-last-used { |
| display: flex !important; |
| align-items: center; |
| justify-content: space-between; |
| gap: 12px; |
| } |
| .tokens-table .tokens-col-calls::before, |
| .tokens-table .tokens-col-success-rate::before, |
| .tokens-table .tokens-col-rpm::before, |
| .tokens-table .tokens-col-token-usage::before, |
| .tokens-table .tokens-col-cost::before, |
| .tokens-table .tokens-col-concurrency::before, |
| .tokens-table .tokens-col-stream::before, |
| .tokens-table .tokens-col-non-stream::before, |
| .tokens-table .tokens-col-last-used::before { |
| width: auto !important; |
| margin-bottom: 0 !important; |
| flex: 0 0 auto; |
| white-space: nowrap; |
| } |
| .tokens-table .tokens-col-calls > div, |
| .tokens-table .tokens-col-cost > div { |
| align-items: flex-end !important; |
| text-align: right; |
| } |
| .tokens-table .tokens-col-token-usage > .token-usage-metrics { |
| justify-content: flex-end; |
| grid-template-columns: repeat(2, minmax(0, max-content)); |
| } |
| .tokens-table .tokens-col-token-usage > .token-usage-metrics .token-usage-item { |
| justify-content: space-between; |
| flex-wrap: nowrap; |
| } |
| .tokens-table .token-row-actions { |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| gap: 8px; |
| flex-wrap: nowrap; |
| overflow-x: auto; |
| max-width: 100%; |
| } |
| .tokens-table .tokens-col-actions .btn { |
| margin-right: 0 !important; |
| flex: 0 0 auto; |
| } |
| .tokens-table .tokens-col-token .token-display { |
| word-break: break-all; |
| } |
| .token-row-actions { |
| justify-content: center; |
| flex-wrap: nowrap; |
| overflow-x: auto; |
| max-width: 100%; |
| } |
| .token-row-actions::-webkit-scrollbar { |
| display: none; |
| } |
| .allowed-models-table tbody .mobile-inline-row { |
| grid-template-columns: auto minmax(0, 1fr) auto; |
| align-items: center; |
| gap: 8px 12px; |
| } |
| .allowed-channels-table tbody .mobile-inline-row { |
| grid-template-columns: auto minmax(0, 1fr) auto; |
| align-items: center; |
| gap: 8px 12px; |
| } |
| .allowed-models-table tbody .mobile-inline-row .allowed-model-col-select, |
| .allowed-models-table tbody .mobile-inline-row .allowed-model-col-name, |
| .allowed-models-table tbody .mobile-inline-row .allowed-model-col-actions { |
| grid-column: auto; |
| } |
| .allowed-channels-table tbody .mobile-inline-row .allowed-channel-col-select, |
| .allowed-channels-table tbody .mobile-inline-row .allowed-channel-col-name, |
| .allowed-channels-table tbody .mobile-inline-row .allowed-channel-col-type, |
| .allowed-channels-table tbody .mobile-inline-row .allowed-channel-col-actions { |
| grid-column: auto; |
| } |
| .allowed-models-table tbody .mobile-inline-row td.allowed-model-col-select { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
| .allowed-channels-table tbody .mobile-inline-row td.allowed-channel-col-select { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
| .allowed-models-table tbody .mobile-inline-row td.allowed-model-col-name { |
| grid-column: auto; |
| display: flex; |
| align-items: center; |
| min-width: 0; |
| white-space: nowrap; |
| overflow-x: auto; |
| overflow-y: hidden; |
| scrollbar-width: none; |
| } |
| .allowed-models-table tbody .mobile-inline-row td.allowed-model-col-name::-webkit-scrollbar { |
| display: none; |
| } |
| .allowed-channels-table tbody .mobile-inline-row td.allowed-channel-col-name { |
| grid-column: auto; |
| display: flex; |
| align-items: center; |
| min-width: 0; |
| white-space: nowrap; |
| overflow-x: auto; |
| overflow-y: hidden; |
| scrollbar-width: none; |
| } |
| .allowed-channels-table tbody .mobile-inline-row td.allowed-channel-col-name::-webkit-scrollbar { |
| display: none; |
| } |
| .allowed-channels-table tbody .mobile-inline-row td.allowed-channel-col-type { |
| display: none; |
| } |
| .allowed-models-table tbody .mobile-inline-row td.allowed-model-col-actions { |
| grid-column: auto; |
| display: flex; |
| align-items: center; |
| justify-content: flex-end; |
| } |
| .allowed-models-table .mobile-inline-row .allowed-model-col-actions { |
| display: flex; |
| align-items: center; |
| justify-content: flex-end; |
| padding-top: 0; |
| border-top: none; |
| text-align: right !important; |
| } |
| .allowed-channels-table tbody .mobile-inline-row td.allowed-channel-col-actions { |
| grid-column: auto; |
| display: flex; |
| align-items: center; |
| justify-content: flex-end; |
| } |
| .allowed-channels-table .mobile-inline-row .allowed-channel-col-actions { |
| display: flex; |
| align-items: center; |
| justify-content: flex-end; |
| padding-top: 0; |
| border-top: none; |
| text-align: right !important; |
| } |
| .allowed-models-table tbody .mobile-inline-row td.allowed-model-col-name::before, |
| .allowed-models-table tbody .mobile-inline-row td.allowed-model-col-actions::before { |
| content: none; |
| display: none; |
| } |
| .allowed-channels-table tbody .mobile-inline-row td.allowed-channel-col-name::before, |
| .allowed-channels-table tbody .mobile-inline-row td.allowed-channel-col-type::before, |
| .allowed-channels-table tbody .mobile-inline-row td.allowed-channel-col-actions::before { |
| content: none; |
| display: none; |
| } |
| .modal { |
| padding: 12px; |
| } |
| .modal-content { |
| width: min(720px, calc(100vw - 24px)); |
| max-width: none; |
| margin: 0 auto; |
| } |
| .modal-content--wide { |
| width: min(720px, calc(100vw - 24px)); |
| } |
| .token-edit-modal { |
| min-height: auto; |
| } |
| .token-edit-body { |
| gap: 12px; |
| } |
| .token-edit-layout { |
| display: flex; |
| flex-direction: column; |
| } |
| .token-edit-main { |
| display: flex; |
| flex-direction: column; |
| } |
| .token-edit-field { |
| flex-direction: row; |
| align-items: center; |
| gap: 8px; |
| } |
| .token-edit-field .form-label { |
| flex: 0 0 60px; |
| min-width: 60px; |
| white-space: nowrap; |
| } |
| .token-edit-field .form-row-inline__content, |
| .token-edit-field .field-grow { |
| width: auto; |
| } |
| .token-edit-field .form-label, |
| .token-edit-active-row label, |
| .token-edit-models-title { |
| margin-bottom: 0; |
| } |
| .token-edit-channels-actions, |
| .token-edit-models-actions { |
| display: flex; |
| align-items: center; |
| flex-wrap: nowrap; |
| overflow-x: auto; |
| scrollbar-width: none; |
| } |
| .token-edit-channels-actions::-webkit-scrollbar, |
| .token-edit-models-actions::-webkit-scrollbar { |
| display: none; |
| } |
| .token-limit-input-line .field-grow { |
| min-width: 120px; |
| width: 100%; |
| } |
| .channel-select-filter-row { |
| grid-template-columns: 1fr; |
| } |
| .token-edit-models-header { |
| align-items: flex-start; |
| } |
| .token-edit-channels-actions, |
| .token-edit-models-actions { |
| width: 100%; |
| gap: 8px; |
| } |
| .token-edit-channels-actions .btn, |
| .token-edit-models-actions .btn { |
| flex: 0 0 auto; |
| } |
| .modal-header, |
| .modal-body, |
| .modal-footer { |
| padding-left: 16px; |
| padding-right: 16px; |
| } |
| .modal-footer { |
| flex-wrap: wrap; |
| } |
| .modal-footer .btn { |
| flex: 1 1 140px; |
| } |
| } |
|
|
