:root {
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, SFMono, Consolas, "Liberation Mono", monospace;

    --surface-canvas: #f6f8fa;
    --surface-panel: #ffffff;
    --surface-subtle: #f1f5f9;
    --surface-muted: #eef2f7;
    --surface-hover: #eaf0f7;
    --surface-raised: var(--surface-panel);
    --surface-overlay: rgba(15, 23, 42, 0.28);
    --surface-overlay-soft: rgba(15, 23, 42, 0.18);
    --surface-glass: rgba(255, 255, 255, 0.92);
    --surface-tint: rgba(246, 248, 250, 0.72);
    --auth-space-bg: #000000;

    --border-muted: #d8dee4;
    --border-default: #c9d2df;
    --border-strong: #aeb8c6;

    --text-primary: #24292f;
    --text-secondary: #4b5563;
    --text-muted: #6b7280;
    --text-inverse: #ffffff;

    --accent: #0969da;
    --accent-hover: #0550ae;
    --accent-muted: #dbeafe;
    --accent-subtle: #eff6ff;
    --accent-border: #bfdbfe;

    --state-success: #1a7f37;
    --state-success-strong: #116329;
    --state-success-bg: #dcfce7;
    --state-success-border: #86efac;

    --state-warning: #9a6700;
    --state-warning-strong: #7d4e00;
    --state-warning-bg: #fef3c7;
    --state-warning-border: #facc15;

    --state-danger: #cf222e;
    --state-danger-strong: #a40e26;
    --state-danger-bg: #fee2e2;
    --state-danger-border: #fecaca;

    --state-info: #0969da;
    --state-info-bg: #eff6ff;
    --state-info-border: #bfdbfe;

    --code-bg: #0d1117;
    --code-border: #30363d;
    --code-text: #c9d1d9;
    --code-muted: #8b949e;
    --code-command: #d2a8ff;
    --code-flag: #79c0ff;
    --code-string: #a5d6ff;
    --code-key: #7ee787;
    --code-number: #ffa657;
    --code-null: #ff7b72;

    --radius-xs: 4px;
    --radius-sm: 5px;
    --radius-md: 6px;
    --space-1: 4px;
    --space-2: 6px;
    --space-3: 8px;
    --space-4: 10px;
    --space-5: 12px;
    --space-6: 14px;
    --space-7: 16px;
    --shadow-popover: 0 10px 24px rgba(15, 23, 42, 0.12);
    --focus-ring: rgba(9, 105, 218, 0.22);
    --control-border-alpha: rgba(15, 23, 42, 0.2);

    --bg: var(--surface-canvas);
    --panel: var(--surface-panel);
    --line: var(--border-muted);
    --line-strong: var(--border-strong);
    --text: var(--text-primary);
    --muted: var(--text-secondary);
    --subtle: var(--text-muted);
    --brand: var(--accent);
    --brand-dark: var(--accent-hover);
    --danger: var(--state-danger);
    --danger-dark: var(--state-danger-strong);
    --success-bg: var(--state-success-bg);
    --success-text: var(--state-success-strong);
    --error-bg: var(--state-danger-bg);
    --error-text: var(--state-danger-strong);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 13px;
}

body.modal-open {
    overflow: hidden;
}

.app-shell {
    display: grid;
    grid-template-columns: 216px minmax(0, 1fr);
    min-height: 100vh;
}

.sidebar {
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    overflow-y: auto;
    background: var(--surface-panel);
    border-right: 1px solid var(--line);
    padding: var(--space-6) var(--space-4);
}

.brand {
    height: 32px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    font-weight: 700;
    letter-spacing: 0;
}

.nav-section {
    margin: var(--space-6) var(--space-4) var(--space-2);
    color: var(--subtle);
    font-size: 11px;
    font-weight: 650;
    text-transform: uppercase;
}

.nav-section:first-of-type {
    margin-top: 12px;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    height: 32px;
    padding: 0 var(--space-4);
    color: var(--muted);
    text-decoration: none;
    border-radius: var(--radius-md);
    margin-top: var(--space-1);
    font: inherit;
    cursor: pointer;
}

.nav-link:hover,
.nav-link.active {
    background: var(--surface-hover);
    color: var(--text);
}

.nav-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    background: currentColor;
    -webkit-mask: var(--icon-url) center / contain no-repeat;
    mask: var(--icon-url) center / contain no-repeat;
}

.nav-link span,
.nav-sublink span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-group {
    margin-top: 4px;
}

.nav-group summary {
    list-style: none;
}

.nav-group summary::-webkit-details-marker {
    display: none;
}

.nav-group summary .nav-icon:last-child {
    margin-left: auto;
    width: 14px;
    height: 14px;
    transition: transform 0.14s ease;
}

.nav-group[open] summary .nav-icon:last-child {
    transform: rotate(180deg);
}

.sidebar-logout {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
}

.sidebar-logout .nav-link {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
}

.nav-submenu {
    margin: var(--space-1) 0 0 24px;
    padding-left: var(--space-3);
    border-left: 1px solid var(--line);
}

.nav-sublink {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    height: 30px;
    padding: 0 var(--space-3);
    color: var(--muted);
    text-decoration: none;
    border-radius: var(--radius-md);
}

.nav-sublink:hover,
.nav-sublink.active {
    background: var(--surface-hover);
    color: var(--text);
}

.main {
    padding: var(--space-7) var(--space-7) 0;
    height: 100vh;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.topbar,
.topbar-actions,
.panel-head,
.split,
.upload-row,
.search,
.metrics {
    display: flex;
    align-items: center;
}

.topbar {
    justify-content: space-between;
    gap: var(--space-5);
    margin-bottom: var(--space-5);
}

.topbar-actions {
    gap: 8px;
    justify-content: flex-end;
}

h1,
h2,
p {
    margin: 0;
}

h1 {
    font-size: 20px;
    line-height: 1.25;
    font-weight: 650;
}

h2 {
    font-size: 14px;
    line-height: 1.35;
    font-weight: 650;
}

p {
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
}

.muted-line {
    color: var(--subtle);
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.metrics {
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.metric {
    flex: 1;
    min-width: 0;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
}

.metric span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    margin-bottom: 4px;
}

.metric strong {
    display: block;
    font-size: 18px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-5);
}

.data-panel {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
}

.panel-head {
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--line);
}

.upload-row {
    gap: 8px;
    padding: 12px;
}

.search {
    gap: 8px;
}

input[type="search"],
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="url"],
input[type="file"],
select {
    min-height: 32px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    color: var(--text);
    padding: 5px var(--space-3);
    font: inherit;
}

input:disabled,
select:disabled,
textarea:disabled {
    background: var(--surface-canvas);
    color: var(--muted);
    cursor: not-allowed;
}

.form-grid {
    display: grid;
    gap: 10px;
}

.form-grid.two-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-grid.three-cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

textarea {
    width: 100%;
    min-height: 32px;
    resize: vertical;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    color: var(--text);
    padding: 6px 8px;
    font: inherit;
}

input[type="search"] {
    width: 260px;
}

input:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
    outline: 2px solid var(--focus-ring);
    border-color: var(--accent);
}

.small-select {
    min-height: 26px;
    padding: 3px 8px;
    font-size: 12px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 32px;
    padding: 5px var(--space-4);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    color: var(--text);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.btn:hover {
    background: var(--surface-hover);
}

.btn.primary {
    border-color: var(--accent-hover);
    background: var(--accent);
    color: var(--text-inverse);
}

.btn.primary:hover {
    background: var(--accent-hover);
}

.btn.danger {
    border-color: var(--state-danger-strong);
    background: var(--state-danger);
    color: var(--text-inverse);
}

.btn.danger:hover {
    background: var(--state-danger-strong);
}

.btn.small {
    min-height: 26px;
    padding: 3px 8px;
    font-size: 12px;
}

.btn-icon {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    display: inline-block;
    background: currentColor;
    -webkit-mask: var(--icon-url) center / contain no-repeat;
    mask: var(--icon-url) center / contain no-repeat;
}

.toast {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 60;
    max-width: min(420px, calc(100vw - 32px));
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 9px var(--space-5);
    cursor: pointer;
    animation: toast-in 0.16s ease-out;
}

.toast.success {
    background: var(--state-success-bg);
    color: var(--state-success-strong);
    border-color: var(--state-success-border);
}

.toast.error {
    background: var(--state-danger-bg);
    color: var(--state-danger-strong);
    border-color: var(--state-danger-border);
}

.toast.is-hiding {
    opacity: 0;
    transform: translate(-50%, -6px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

@keyframes toast-in {
    from {
        opacity: 0;
        transform: translate(-50%, -6px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

.table-wrap {
    width: 100%;
    flex: 1;
    min-height: 0;
    overflow: auto;
}

table {
    width: 100%;
    min-width: 980px;
    border-collapse: collapse;
}

th,
td {
    padding: 7px var(--space-4);
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
    white-space: nowrap;
}

th {
    background: var(--surface-subtle);
    color: var(--muted);
    font-size: 12px;
    font-weight: 650;
}

td.wide {
    white-space: normal;
    min-width: 320px;
}

code {
    font-family: var(--font-mono);
    font-size: 12px;
    background: var(--surface-subtle);
    border: 1px solid var(--line);
    border-radius: var(--radius-xs);
    padding: 1px 4px;
}

.plain-mono {
    font-family: var(--font-mono);
    font-size: 12px;
}

.badge {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 1px 7px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface-subtle);
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}

.badge.success {
    border-color: var(--state-success-border);
    background: var(--state-success-bg);
    color: var(--state-success-strong);
}

.badge.warning {
    border-color: var(--state-warning-border);
    background: var(--state-warning-bg);
    color: var(--state-warning-strong);
}

.badge.danger {
    border-color: var(--state-danger-border);
    background: var(--state-danger-bg);
    color: var(--state-danger-strong);
}

.empty {
    color: var(--subtle);
    text-align: center;
    padding: 18px;
}

.credential-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: stretch;
    padding: 12px;
}

.credential-form label {
    display: grid;
    gap: 5px;
}

.credential-form label span,
.scope-field legend {
    color: var(--muted);
    font-size: 12px;
    font-weight: 650;
}

.scope-field {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 10px;
    margin: 0;
    padding: 0;
    border: 0;
}

.scope-field legend {
    grid-column: 1 / -1;
    padding: 0;
}

.scope-field label {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 24px;
}

.scope-field input {
    margin: 0;
}

.scope-field.compact {
    grid-template-columns: repeat(2, minmax(92px, 1fr));
}

.scope-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-width: 180px;
}

.credential-table-wrap {
    max-height: none;
    min-height: 0;
}

.table-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.name-with-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.name-with-action > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.status-with-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.status-toggle-btn.disable {
    color: var(--danger);
}

.status-toggle-btn.enable {
    color: var(--state-success);
}

.status-toggle-btn.disable:hover {
    color: var(--danger-dark);
}

.status-toggle-btn.enable:hover {
    color: var(--state-success-strong);
}

.key-copy {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 280px;
}

.key-copy code {
    max-width: 360px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-cell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.file-cell > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-cell .row-meta {
    margin-left: 6px;
}

.icon-btn.copy-btn {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    min-height: 26px;
    border: 0;
    background: transparent;
    color: var(--muted);
    padding: 0;
}

.icon-btn.copy-btn:hover {
    background: transparent;
    color: var(--text);
}

.icon-btn.danger-icon {
    color: var(--danger);
}

.icon-btn.danger-icon:hover {
    color: var(--danger-dark);
}

.icon-btn.muted-icon {
    color: var(--subtle);
    cursor: default;
    opacity: 0.72;
}

.icon-btn.muted-icon:hover {
    color: var(--subtle);
}

.copy-icon {
    width: 15px;
    height: 15px;
    display: inline-block;
    background: currentColor;
    -webkit-mask: var(--icon-url) center / contain no-repeat;
    mask: var(--icon-url) center / contain no-repeat;
}

.credential-popover {
    display: flex;
    flex-direction: column;
    width: 720px;
    height: min(560px, calc(100vh - 48px));
    overflow: hidden;
}

.credential-detail-popover .key-copy {
    min-width: 0;
}

.credential-detail-popover .key-copy code {
    max-width: none;
    white-space: normal;
    overflow-wrap: anywhere;
}

.analytics-source-table table {
    min-width: 740px;
}

.analytics-periods {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface-canvas);
}

.analytics-periods a {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 9px;
    border-radius: var(--radius-sm);
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.analytics-periods a:hover {
    color: var(--text);
    background: var(--surface-panel);
}

.analytics-periods a.active {
    color: var(--text);
    background: var(--surface-panel);
}

.analytics-source-table th:nth-child(1),
.analytics-source-table td:nth-child(1) {
    width: 56px;
}

.analytics-source-table th:nth-child(3),
.analytics-source-table td:nth-child(3) {
    width: 120px;
}

.analytics-source-table th:nth-child(4),
.analytics-source-table td:nth-child(4) {
    width: 110px;
    text-align: center;
}

.analytics-source-table th:nth-child(5),
.analytics-source-table td:nth-child(5) {
    width: 190px;
}

.analytics-source-table th:nth-child(6),
.analytics-source-table td:nth-child(6) {
    width: 90px;
    text-align: center;
}

.trend-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    min-height: 22px;
    padding: 2px 7px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-canvas);
    color: var(--muted);
    font-size: 12px;
    font-weight: 750;
}

.trend-badge.up,
.trend-value.up {
    color: var(--state-success-strong);
}

.trend-badge.up {
    border-color: var(--state-success);
    background: var(--state-success-bg);
}

.trend-badge.down,
.trend-value.down {
    color: var(--state-danger);
}

.trend-badge.down {
    border-color: var(--state-danger-strong);
    background: var(--state-danger-bg);
}

.analytics-sparkline,
.analytics-line-chart {
    display: block;
    width: 100%;
    color: var(--brand);
}

.analytics-sparkline.up,
.analytics-line-chart.up {
    color: var(--state-success);
}

.analytics-sparkline.down,
.analytics-line-chart.down {
    color: var(--state-danger);
}

.analytics-sparkline.flat,
.analytics-line-chart.flat {
    color: var(--muted);
}

.analytics-sparkline {
    height: 34px;
}

.analytics-sparkline polygon,
.analytics-line-chart polygon {
    fill: currentColor;
    opacity: 0.11;
}

.analytics-sparkline polyline,
.analytics-line-chart polyline {
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.analytics-chart-panel {
    display: grid;
    gap: 6px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface-canvas);
}

.analytics-chart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.analytics-chart-head span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 650;
}

.analytics-chart-head strong {
    color: var(--text);
    font-size: 13px;
}

.analytics-line-chart {
    height: 96px;
}

.analytics-line-chart polyline {
    stroke-width: 2.4;
}

.analytics-chart-labels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(34px, 1fr));
    gap: 2px;
}

.analytics-chart-labels span {
    min-height: 13px;
    min-width: 0;
    color: var(--muted);
    font-size: 10px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.analytics-chart-labels span.is-muted {
    color: transparent;
}

.analytics-share {
    display: grid;
    grid-template-columns: 44px minmax(80px, 1fr);
    align-items: center;
    gap: 8px;
}

.analytics-share span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 650;
}

.analytics-share b,
.analytics-percent-row b {
    position: relative;
    display: block;
    height: 6px;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--surface-canvas);
}

.analytics-share b::before,
.analytics-percent-row b::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--value);
    background: var(--brand);
}

.analytics-percent-row.trend-row.up b::before {
    background: var(--state-success);
}

.analytics-percent-row.trend-row.down b::before {
    background: var(--state-danger);
}

.analytics-detail-popover {
    width: 720px;
    height: min(560px, calc(100vh - 48px));
}

.analytics-percent-list {
    display: grid;
    gap: 8px;
}

.analytics-insights {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.analytics-insight-card {
    min-width: 0;
    padding: 8px 9px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface-canvas);
}

.analytics-insight-card span,
.analytics-rank-list h3 {
    display: block;
    margin: 0 0 5px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 650;
}

.analytics-insight-card strong {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: var(--text);
    font-size: 14px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.analytics-insight-card p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
}

.analytics-insight-card em,
.analytics-rank-row em {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.analytics-insight-card em {
    margin-top: 2px;
}

.analytics-rank-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.analytics-rank-list > div {
    min-width: 0;
    padding: 8px 9px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface-panel);
}

.analytics-rank-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 118px;
    align-items: center;
    gap: 7px;
    padding: 6px 0;
    border-top: 1px solid var(--line);
}

.analytics-rank-row:first-of-type {
    border-top: 0;
}

.analytics-rank-row span {
    min-width: 0;
    overflow: hidden;
    color: var(--text);
    font-size: 12px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.analytics-rank-row span strong {
    display: block;
    overflow: hidden;
    color: var(--text);
    font-size: 12px;
    font-weight: 650;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.analytics-rank-row strong {
    color: var(--muted);
    font-size: 12px;
    text-align: right;
}

.analytics-rank-row b {
    grid-column: 1 / -1;
    position: relative;
    display: block;
    height: 5px;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--surface-canvas);
}

.analytics-rank-row b::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--value);
    background: var(--brand);
}

.analytics-percent-row {
    display: grid;
    grid-template-columns: minmax(90px, 1fr) 54px minmax(160px, 2fr);
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface-canvas);
}

.analytics-percent-row span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 650;
}

.analytics-percent-row strong {
    color: var(--text);
    font-size: 13px;
}

.analytics-detail-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.analytics-setup {
    display: grid;
    align-content: center;
    gap: 14px;
    min-height: 360px;
    max-width: 560px;
    width: 100%;
    margin: 0 auto;
}

.webhook-setup {
    display: grid;
    align-content: center;
    gap: 14px;
    min-height: 360px;
    max-width: 560px;
    width: 100%;
    margin: 0 auto;
}

.setup-icon {
    display: block;
    justify-self: center;
    width: 42px;
    height: 42px;
    background: var(--brand);
    -webkit-mask: var(--icon-url) center / contain no-repeat;
    mask: var(--icon-url) center / contain no-repeat;
}

.webhook-inline-step {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: end;
}

.webhook-inline-step > b {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    margin-bottom: 5px;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    background: var(--surface-panel);
    color: var(--muted);
    font-size: 12px;
    line-height: 1;
}

.webhook-inline-step strong {
    display: block;
    margin-bottom: 5px;
    font-size: 13px;
}

.webhook-inline-step input[type="url"] {
    width: 100%;
}

.webhook-inline-step .btn.small {
    min-height: 32px;
    margin-bottom: 0;
}

.credential-overview > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 8px;
}

.credential-overview > div > span {
    grid-column: 1 / -1;
}

.credential-overview > div > strong {
    min-width: 0;
}

.credential-overview .btn.small {
    min-height: 26px;
    padding: 4px 8px;
}

.setup-steps {
    display: grid;
    gap: 8px;
}

.setup-step {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
}

.setup-step > b {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    background: var(--surface-panel);
    color: var(--muted);
    font-size: 12px;
    line-height: 1;
}

.setup-step strong {
    display: block;
    margin-bottom: 5px;
    font-size: 13px;
}

.setup-step p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
}

.setup-step input[type="url"] {
    width: 100%;
}

.setup-copy {
    padding: 7px 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface-panel);
}

.tracking-check-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.tracking-check-input {
    min-width: 0;
    flex: 1 1 220px;
    height: 30px;
    padding: 5px 8px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    background: var(--surface-panel);
    color: var(--text);
    font: inherit;
}

.tracking-check-row .btn.small {
    min-height: 30px;
    padding: 5px 9px;
    white-space: nowrap;
}

.tracking-check-row .badge {
    margin: 0;
}

.credential-detail-popover .detail-hero p {
    overflow-wrap: anywhere;
}

.address-popover {
    display: flex;
    flex-direction: column;
    width: 720px;
    max-height: min(560px, calc(100vh - 48px));
    overflow: hidden;
}

.address-form {
    display: flex;
    flex: 0 1 auto;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
}

.address-form-body {
    display: grid;
    gap: 10px;
    align-content: start;
    max-height: calc(100vh - 150px);
    padding: 12px 14px;
    overflow: auto;
}

.address-form-section {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
}

.address-form-section .section-title,
.address-form-section .full-row {
    grid-column: 1 / -1;
}

.address-form-section .section-title {
    padding-bottom: 2px;
}

.address-form label {
    display: grid;
    gap: 5px;
}

.address-form textarea {
    min-height: 64px;
    resize: vertical;
}

.suggest-menu.address-destination-results {
    position: fixed;
    left: 0;
    right: auto;
    top: 0;
    z-index: 90;
    max-height: 206px;
}

.suggest-menu.address-destination-results button {
    gap: 1px;
    padding: 7px 10px;
}

.suggest-menu.awb-floating-suggest {
    position: fixed;
    left: 0;
    right: auto;
    top: 0;
    z-index: 90;
    max-height: 220px;
}

.address-form label span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 650;
}

.address-form .popover-actions {
    flex: 0 0 auto;
    padding: 12px 14px;
    border-top: 1px solid var(--line);
    background: var(--surface-panel);
}

.address-table {
    min-width: 1080px;
    table-layout: fixed;
}

.address-table .col-no { width: 52px; }
.address-table .col-name { width: 15%; }
.address-table .col-phone { width: 124px; }
.address-table .col-street { width: 24%; }
.address-table .col-address { width: 28%; }
.address-table .col-code { width: 104px; }
.address-table .col-zip { width: 76px; }
.address-table .col-action { width: 76px; }

.address-table th,
.address-table td {
    overflow: hidden;
    text-overflow: ellipsis;
}

.address-table td {
    max-width: 1px;
}

.address-table td.wide {
    min-width: 0;
    max-width: none;
    white-space: normal;
    word-break: break-word;
    line-height: 1.35;
}

.address-table td:nth-child(2) {
    white-space: normal;
    word-break: break-word;
}

.address-table td:nth-child(3) code,
.address-table td:nth-child(6) code {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
}

.address-table .table-actions {
    justify-content: center;
    white-space: nowrap;
}

.awb-metrics {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.awb-filter select {
    width: 132px;
}

.awb-table {
    min-width: 1080px;
    table-layout: fixed;
}

.awb-table .col-check { width: 40px; }
.awb-table .col-receiver { width: 26%; }
.awb-table .col-awb { width: 172px; }
.awb-table .col-service { width: 72px; }
.awb-table .col-source { width: 104px; }
.awb-table .col-status { width: 104px; }
.awb-table .col-price { width: 92px; }
.awb-table .col-created { width: 136px; }
.awb-table .col-action { width: 84px; }

.awb-table th,
.awb-table td {
    overflow: hidden;
    text-overflow: ellipsis;
}

.awb-table td.wide {
    min-width: 0;
}

.awb-table .table-actions {
    justify-content: center;
}

.awb-popover {
    display: flex;
    flex-direction: column;
    width: 720px;
    height: min(560px, calc(100vh - 48px));
    overflow: hidden;
}

.track-popover {
    display: flex;
    flex-direction: column;
    width: 720px;
    height: min(560px, calc(100vh - 48px));
    overflow: hidden;
}

.awb-code-cell {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    gap: 6px;
}

.awb-code-cell .plain-mono {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.track-btn,
.detail-btn {
    color: var(--brand);
}

.detail-popover {
    display: flex;
    flex-direction: column;
    width: 720px;
    height: min(560px, calc(100vh - 48px));
    overflow: hidden;
}

.detail-body {
    display: grid;
    gap: 10px;
    padding: 12px;
    overflow: auto;
}

.detail-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--state-info-border);
    border-radius: var(--radius-md);
    background: var(--state-info-bg);
}

.detail-hero span,
.detail-hero small,
.detail-summary span,
.detail-block span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 650;
}

.detail-hero strong {
    display: block;
    margin-top: 3px;
    color: var(--text);
    font-size: 18px;
    line-height: 1.25;
}

.detail-hero p {
    margin-top: 5px;
    color: var(--muted);
    line-height: 1.4;
}

.detail-hero small {
    grid-column: 1 / -1;
    margin-top: -4px;
}

.detail-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.detail-meta > div {
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface-panel);
}

.detail-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.detail-summary > div,
.detail-block {
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface-canvas);
}

.detail-summary span,
.detail-meta span,
.detail-block span {
    margin-bottom: 3px;
}

.detail-summary strong,
.detail-meta strong,
.detail-block p {
    display: block;
    min-width: 0;
    color: var(--text);
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.detail-block p {
    margin: 0;
}

.track-body {
    display: grid;
    gap: 10px;
    padding: 12px;
    overflow: auto;
}

.track-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--state-info-border);
    border-radius: var(--radius-md);
    background: var(--state-info-bg);
}

.track-hero span,
.track-hero small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 650;
}

.track-hero strong {
    display: block;
    margin-top: 3px;
    color: var(--text);
    font-size: 18px;
    line-height: 1.25;
}

.track-hero p {
    margin-top: 5px;
    color: var(--muted);
    line-height: 1.4;
}

.track-hero small {
    grid-column: 1 / -1;
    margin-top: -4px;
}

.track-route {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
}

.track-route b {
    position: relative;
    height: 2px;
    background: var(--brand);
}

.track-route b::after {
    content: "";
    position: absolute;
    right: -1px;
    top: -4px;
    width: 0;
    height: 0;
    border-left: 7px solid var(--brand);
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}

.track-route span {
    min-width: 0;
    padding: 5px 7px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface-panel);
    color: var(--text);
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
}

.track-state {
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface-canvas);
    color: var(--muted);
    text-align: center;
}

.track-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.track-summary > div {
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface-canvas);
}

.track-summary span,
.track-item span,
.track-step-content span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    margin-bottom: 3px;
}

.track-summary strong,
.track-item strong,
.track-step-content strong {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 13px;
    line-height: 1.35;
}

.track-current {
    padding: 10px;
    border: 1px solid var(--state-info-border);
    border-radius: var(--radius-md);
    background: var(--state-info-bg);
}

.track-current span {
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 650;
}

.track-current strong {
    display: block;
    line-height: 1.4;
}

.track-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.proof-action {
    min-width: 116px;
}

.proof-popover {
    position: absolute;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: 24px;
    background: var(--surface-overlay);
}

.proof-popover[hidden] {
    display: none;
}

.proof-body {
    width: min(760px, calc(100vw - 48px));
}

.proof-body {
    position: relative;
    max-height: calc(100vh - 150px);
    overflow: auto;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    background: var(--surface-canvas);
}

.proof-body img {
    display: block;
    width: 100%;
    height: auto;
    max-height: calc(100vh - 170px);
    object-fit: contain;
    background: var(--surface-canvas);
}

.proof-error {
    padding: 40px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 650;
    text-align: center;
}

.proof-close {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1;
    border-color: var(--control-border-alpha);
    background: var(--surface-glass);
}

.track-progress {
    position: relative;
    display: grid;
    gap: 0;
    padding: 2px 0;
}

.track-progress::before {
    content: "";
    position: absolute;
    top: 13px;
    bottom: 13px;
    left: 9px;
    width: 2px;
    background: var(--line);
}

.track-step {
    position: relative;
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 10px;
    padding-bottom: 10px;
}

.track-step:last-child {
    padding-bottom: 0;
}

.track-dot {
    position: relative;
    z-index: 1;
    width: 20px;
    height: 20px;
    border: 2px solid var(--line-strong);
    border-radius: 50%;
    background: var(--surface-panel);
}

.track-step:last-child .track-dot {
    border-color: var(--brand);
    background: var(--brand);
}

.track-step-content {
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface-panel);
}

.track-step:last-child .track-step-content {
    border-color: var(--state-info-border);
    background: var(--state-info-bg);
}

.track-step-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.track-step-content em {
    display: inline-flex;
    min-height: 20px;
    align-items: center;
    padding: 1px 6px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface-canvas);
    color: var(--muted);
    font-style: normal;
    font-size: 11px;
    font-weight: 650;
}

.awb-form {
    display: flex;
    flex: 1;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
}

.awb-form label {
    display: grid;
    gap: 5px;
}

.awb-form label span,
.section-title {
    color: var(--muted);
    font-size: 12px;
    font-weight: 650;
}

.awb-form-body {
    display: grid;
    gap: 10px;
    padding: 12px 14px;
    overflow: auto;
}

.awb-form-section {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}

.awb-form-section.compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-bottom: 0;
    border-bottom: 0;
}

.awb-form-section .section-title {
    grid-column: 1 / -1;
    padding-bottom: 2px;
}

.awb-form-section .full-row {
    grid-column: 1 / -1;
}

.awb-form .popover-actions {
    flex: 0 0 auto;
    padding: 12px 14px;
    border-top: 1px solid var(--line);
    background: var(--surface-panel);
}

.rate-status {
    margin: -2px 0 0;
    color: var(--muted);
    font-size: 12px;
}

#awb-price-display[readonly] {
    background: var(--surface-canvas);
    color: var(--muted);
}

.cod-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 32px;
    padding: 5px 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface-canvas);
}

.check-label {
    display: inline-flex !important;
    grid-template-columns: none !important;
    align-items: center;
    gap: 6px;
}

.check-label input {
    margin: 0;
}

.cod-row > span {
    color: var(--muted);
    font-size: 12px;
}

.suggest-field {
    position: relative;
}

.suggest-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    z-index: 5;
    max-height: 260px;
    overflow: auto;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    background: var(--surface-panel);
}

.suggest-menu button {
    display: grid;
    gap: 2px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: transparent;
    color: var(--text);
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.suggest-menu button:hover {
    background: var(--surface-canvas);
}

.suggest-menu button span {
    color: var(--muted);
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.credential-popover .credential-form {
    flex: 1 1 auto;
    min-height: 0;
    grid-template-columns: 1fr;
    align-items: stretch;
    padding: 14px;
    overflow: auto;
}

.credential-popover .scope-field {
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
}

.settings-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.settings-panel {
    overflow: hidden;
}

.settings-form {
    display: grid;
    gap: 12px;
    padding: 12px;
    overflow: auto;
}

.settings-section {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface-panel);
}

.settings-section h2 {
    padding-bottom: 2px;
}

.settings-section label {
    display: grid;
    gap: 5px;
}

.settings-section label span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 650;
}

.settings-actions {
    display: flex;
    justify-content: flex-end;
    position: sticky;
    bottom: 0;
    padding: 10px 0 0;
    background: var(--surface-panel);
}

.popover-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 4px;
}

.table-load-state {
    display: none;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 50%;
    bottom: 12px;
    z-index: 2;
    width: 30px;
    height: 30px;
    transform: translateX(-50%);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface-panel);
}

.table-load-state.is-loading {
    display: flex;
}

html:has(body.auth-body) {
    background: var(--auth-space-bg);
}

body.auth-body {
    min-height: 100vh;
    overflow: hidden;
    background: var(--auth-space-bg) !important;
    background-image: none;
    color: var(--text-inverse);
}

.auth-shell {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 16px;
    background-color: var(--auth-space-bg);
    background-image: none;
}

.auth-shell::before {
    content: none;
}

.auth-network-canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.auth-panel {
    width: min(380px, 100%);
    position: relative;
    z-index: 1;
    background: rgb(8 8 8 / 23%);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: blur(5px);
}

.auth-head {
    padding: 14px 16px 12px;
    border-bottom: 0;
}

.auth-head h1 {
    color: #ffffff;
}

.auth-head p {
    color: rgba(255, 255, 255, 0.68);
}

.typewrite-cursor {
    display: inline-block;
    margin-left: 2px;
    color: currentColor;
    animation: typewrite-cursor-blink 0.8s steps(1, end) infinite;
}

@keyframes typewrite-cursor-blink {
    0%,
    48% {
        opacity: 1;
    }

    49%,
    100% {
        opacity: 0;
    }
}

.auth-form,
.access-form {
    display: grid;
    gap: 10px;
}

.auth-form {
    padding: 14px 16px 16px;
}

.auth-form label,
.access-form label {
    display: grid;
    gap: 5px;
}

.auth-form label span,
.access-form label span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 650;
}

.auth-form label span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.auth-form input,
.access-form input:not([type="checkbox"]) {
    width: 100%;
}

.auth-form input {
    height: 34px;
    padding: 6px 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 0;
    color: #ffffff;
}

.auth-form input::placeholder {
    color: rgba(255, 255, 255, 0.52);
}

.auth-form input:focus {
    background: transparent;
    outline: none;
    border-bottom-color: #ffffff;
    box-shadow: none;
}

.auth-form input:-webkit-autofill,
.auth-form input:-webkit-autofill:hover,
.auth-form input:-webkit-autofill:focus,
.auth-form input:-webkit-autofill:active {
    -webkit-text-fill-color: #ffffff;
    caret-color: #ffffff;
    border-bottom-color: rgba(255, 255, 255, 0.42);
    box-shadow: 0 0 0 1000px rgba(8, 8, 8, 0.01) inset;
    transition: background-color 9999s ease-out;
}

.auth-form .btn.primary {
    border-color: rgba(255, 255, 255, 0.18);
}

.access-form {
    padding: 12px;
}

.access-popover {
    width: min(560px, calc(100vw - 32px));
    max-height: min(620px, calc(100vh - 40px));
}

.table-load-state.is-loading::before {
    content: "";
    width: 16px;
    height: 16px;
    border: 2px solid var(--line);
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.action-popovers {
    pointer-events: none;
    position: fixed;
    inset: 0;
    z-index: 30;
}

.action-popovers.is-open {
    pointer-events: auto;
}

.action-popovers.is-open::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--surface-overlay-soft);
}

.action-popover {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 360px;
    max-width: calc(100vw - 32px);
    background: var(--panel);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-popover);
    overflow: hidden;
}

.action-popover[hidden] {
    display: none;
}

.wide-popover {
    width: 620px;
}

.tools-popover {
    display: flex;
    flex-direction: column;
    width: 720px;
    height: min(560px, calc(100vh - 48px));
    overflow: hidden;
}

.address-popover,
.credential-popover,
.track-popover,
.detail-popover,
.awb-popover {
    display: flex;
    flex-direction: column;
    width: 720px;
    height: min(560px, calc(100vh - 48px));
    overflow: hidden;
}

.popover-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--line);
    background: var(--surface-panel);
}

.popover-body {
    padding: 12px;
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface-panel);
    color: var(--muted);
    font: inherit;
    font-weight: 650;
    cursor: pointer;
}

.icon-btn:hover {
    background: var(--surface-canvas);
    color: var(--text);
}

.float-form {
    display: grid;
    gap: 8px;
}

.float-form input[type="file"] {
    width: 100%;
}

.float-table-wrap {
    height: 100%;
    overflow: auto;
}

.compact-table {
    min-width: 0;
}

.compact-table th,
.compact-table td {
    padding: 8px 12px;
}

.docs-layout {
    display: flex;
    flex: 1;
    min-height: 0;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 16px;
    overflow: auto;
}

.docs-panel {
    margin-bottom: 0;
}

.docs-body {
    padding: 12px;
}

.docs-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.docs-summary > div,
.docs-box {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface-canvas);
    padding: 10px;
}

.docs-summary span {
    display: block;
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 650;
}

.docs-summary code {
    word-break: break-word;
}

.docs-endpoints {
    display: grid;
    gap: 6px;
}

.endpoint-row {
    display: grid;
    grid-template-columns: 64px minmax(180px, 1.2fr) 120px minmax(220px, 1fr);
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface-panel);
}

.endpoint-row p {
    margin-top: 0;
}

.method-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    min-height: 22px;
    border: 1px solid var(--state-success);
    border-radius: var(--radius-md);
    background: var(--state-success-bg);
    color: var(--state-success-strong);
    font-size: 12px;
    font-weight: 700;
}

.docs-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.docs-grid h3 {
    margin: 0 0 8px;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 650;
}

.docs-table {
    min-width: 0;
}

.docs-table th {
    width: 132px;
}

.docs-table td {
    white-space: normal;
}

.docs-table code {
    white-space: normal;
    word-break: break-word;
}

.docs-table-wrap {
    max-height: 280px;
}

.docs-code-list {
    display: grid;
    gap: 8px;
}

.awb-doc-layout {
    display: flex;
    flex: 1;
    min-height: 0;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 16px;
    overflow: auto;
}

.awb-doc-layout .metrics {
    margin-bottom: 0;
}

.awb-panel {
    margin-bottom: 0;
}

.awb-steps {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    padding: 12px;
}

.awb-step {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 8px;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface-canvas);
    padding: 10px;
}

.awb-step > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    background: var(--surface-panel);
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.awb-step h3 {
    margin: 0;
    font-size: 13px;
    line-height: 1.3;
    font-weight: 650;
}

.awb-table-wrap {
    max-height: 360px;
}

.code-block {
    overflow: hidden;
    border: 1px solid var(--code-border);
    border-radius: var(--radius-md);
    background: var(--code-bg);
}

.code-title {
    padding: 8px 12px;
    border-bottom: 1px solid var(--code-border);
    color: var(--code-muted);
    font-size: 12px;
    font-weight: 650;
}

pre {
    margin: 0;
    overflow: auto;
    border: 0;
    border-radius: 0;
    background: var(--code-bg);
    color: var(--code-text);
    padding: 12px;
}

pre code {
    display: block;
    border: 0;
    padding: 0;
    background: transparent;
    white-space: pre;
    color: inherit;
    line-height: 1.55;
}

.hl-command { color: var(--code-command); }
.hl-flag { color: var(--code-flag); }
.hl-string { color: var(--code-string); }
.hl-key { color: var(--code-key); }
.hl-number { color: var(--code-number); }
.hl-null { color: var(--code-null); }
.hl-comment { color: #8b949e; }

.tool-tabs {
    display: flex;
    gap: 6px;
    padding: 10px 16px 0;
    border-bottom: 1px solid var(--line);
    background: var(--surface-panel);
}

.tool-tab {
    min-height: 32px;
    padding: 6px 12px;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-weight: 650;
    cursor: pointer;
}

.tool-tab:hover {
    color: var(--text);
    background: var(--surface-canvas);
}

.tool-tab.active {
    margin-bottom: -1px;
    border-color: var(--line);
    background: var(--surface-canvas);
    color: var(--text);
}

.tool-tab-panel {
    display: none;
}

.tool-tab-panel.active {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
}

.inline-upload {
    display: flex;
    gap: 8px;
    align-items: center;
    min-width: 0;
}

.inline-upload input[type="file"] {
    width: 220px;
    min-height: 28px;
    padding: 3px 6px;
}

.tool-section,
.tool-tab-panel {
    margin: 0;
    overflow: hidden;
}

.tool-section + .tool-section {
    border-top: 1px solid var(--line);
}

.tool-block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--line);
    background: var(--surface-canvas);
}

.row-meta {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
}

.muted {
    color: var(--muted);
}

.loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: grid;
    place-items: center;
    background: var(--surface-tint);
}

.loading-overlay[hidden] {
    display: none;
}

.loading-box {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 180px;
    padding: 12px 14px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    background: var(--surface-panel);
    color: var(--text);
}

.loader {
    width: 16px;
    height: 16px;
    border: 2px solid var(--line);
    border-top-color: var(--brand);
    border-radius: var(--radius-md);
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@media (max-width: 860px) {
    .app-shell {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: static;
        height: auto;
        overflow: visible;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .metrics,
    .topbar,
    .panel-head,
    .upload-row,
    .search {
        align-items: stretch;
        flex-direction: column;
    }

    input[type="search"] {
        width: 100%;
    }

    .action-popover,
    .wide-popover,
    .tools-popover,
    .address-popover,
    .credential-popover,
    .track-popover,
    .detail-popover,
    .awb-popover {
        width: calc(100vw - 20px);
    }

    .tools-popover,
    .credential-popover,
    .track-popover,
    .detail-popover,
    .awb-popover {
        height: min(560px, calc(100vh - 20px));
    }

    .awb-form-section,
    .awb-form-section.compact,
    .address-form-section,
    .detail-hero,
    .detail-meta,
    .detail-summary,
    .analytics-insights,
    .analytics-rank-list,
    .form-grid.two-cols,
    .form-grid.three-cols,
    .settings-metrics {
        grid-template-columns: 1fr;
    }

    .tool-block-head,
    .inline-upload {
        align-items: stretch;
        flex-direction: column;
    }

    .credential-form {
        grid-template-columns: 1fr;
    }

    .inline-upload input[type="file"] {
        width: 100%;
    }

    .docs-grid {
        grid-template-columns: 1fr;
    }

    .docs-summary {
        grid-template-columns: 1fr;
    }

    .endpoint-row {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .awb-steps {
        grid-template-columns: 1fr;
    }

    .track-summary {
        grid-template-columns: 1fr;
    }

    .track-hero {
        grid-template-columns: 1fr;
    }

    .track-route {
        grid-template-columns: minmax(0, 1fr);
    }

    .track-route b {
        width: 2px;
        height: 22px;
        justify-self: center;
    }

    .track-route b::after {
        right: -4px;
        top: auto;
        bottom: -1px;
        border-top: 7px solid var(--brand);
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 0;
    }

}