:root {
--color-text: #111;
--color-text-muted: #666;
--color-border: #e5e5e5;
--color-bg-page: #f8f8f8;
--color-bg-card: #fff;
--color-bg-input: #fff;
--color-bg-hover: #f8f8f8;
--color-success: #10a37f;
--color-error: #ef4444;
--color-warning: #f59e0b;
--spacing-1: 4px;
--spacing-2: 8px;
--spacing-3: 12px;
--spacing-4: 16px;
--spacing-5: 24px;
--spacing-6: 32px;
--spacing-7: 48px;
--radius-sm: 4px;
--radius-md: 6px;
--radius-lg: 8px;
--radius-xl: 12px;
--font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif;
--font-size-xs: 0.625rem;
--font-size-sm: 0.75rem;
--font-size-base: 0.8125rem;
--font-size-md: 0.875rem;
--font-size-lg: 1rem;
--font-size-xl: 1.125rem;
--font-size-2xl: 1.25rem;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--sidebar-width: 220px;
--topbar-height: 56px;
}
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--font-base);
font-size: var(--font-size-base);
line-height: 1.5;
color: var(--color-text);
background: var(--color-bg-page);
}
a {
color: var(--color-text);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
img {
max-width: 100%;
height: auto;
}
h1, h2, h3, h4, h5, h6 {
font-weight: var(--font-weight-semibold);
line-height: 1.25;
color: var(--color-text);
margin-bottom: 0.5em;
}
h1 { font-size: var(--font-size-2xl); }
h2 { font-size: var(--font-size-xl); }
h3 { font-size: var(--font-size-lg); }
code, pre, .mono {
font-family: var(--font-base);
}
.text-muted {
color: var(--color-text-muted);
font-weight: var(--font-weight-normal);
font-size: var(--font-size-base);
}
.text-success { color: var(--color-success); }
.text-error, .text-danger { color: var(--color-error); }
.text-warning { color: var(--color-warning); }
.text-info { color: var(--color-text-muted); }
.sidebar {
position: fixed;
top: 0;
left: 0;
width: var(--sidebar-width);
height: 100vh;
background: var(--color-bg-card);
color: var(--color-text);
overflow-y: auto;
z-index: 1000;
transition: transform 0.3s ease;
border-right: 1px solid var(--color-border);
display: flex;
flex-direction: column;
}
.sidebar-header {
padding: var(--spacing-4);
border-bottom: 1px solid var(--color-border);
}
.brand {
display: flex;
align-items: center;
gap: var(--spacing-3);
}
.brand-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background: var(--color-text);
color: var(--color-bg-card);
font-weight: 700;
font-size: var(--font-size-sm);
border-radius: var(--radius-lg);
flex-shrink: 0;
}
.brand-text {
font-size: var(--font-size-md);
font-weight: var(--font-weight-semibold);
color: var(--color-text);
}
.nav-links {
list-style: none;
padding: var(--spacing-3) 0;
flex: 1;
}
.nav-links li a {
display: flex;
align-items: center;
gap: var(--spacing-2);
padding: var(--spacing-2) var(--spacing-3);
margin: var(--spacing-1) var(--spacing-2);
color: var(--color-text-muted);
text-decoration: none;
transition: all 0.15s ease;
font-size: var(--font-size-base);
border-radius: var(--radius-md);
position: relative;
}
.nav-links li a:hover {
background: var(--color-bg-hover);
color: var(--color-text);
text-decoration: none;
}
.nav-links li a.active {
background: var(--color-bg-hover);
color: var(--color-text);
font-weight: var(--font-weight-medium);
}
.nav-links li a.active::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 2px;
background: var(--color-text);
border-radius: 0 2px 2px 0;
}
.nav-icon {
font-size: var(--font-size-lg);
width: 20px;
text-align: center;
color: inherit;
flex-shrink: 0;
}
.nav-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 var(--spacing-1);
margin-left: auto;
background: var(--color-error);
color: #fff;
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
border-radius: 9px;
flex-shrink: 0;
}
.nav-badge-warning {
background: var(--color-warning);
}
.sidebar-footer {
padding: var(--spacing-4);
border-top: 1px solid var(--color-border);
margin-top: auto;
}
.sidebar-user {
display: flex;
align-items: center;
gap: var(--spacing-3);
}
.sidebar-user-email {
flex: 1;
font-size: var(--font-size-sm);
color: var(--color-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sidebar-logout {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: var(--radius-md);
background: var(--color-bg-hover);
color: var(--color-text);
text-decoration: none;
flex-shrink: 0;
transition: background 0.15s ease;
}
.sidebar-logout:hover {
background: #e5e5e5;
text-decoration: none;
}
.main-content {
margin-left: var(--sidebar-width);
min-height: 100vh;
}
.content-area {
padding: var(--spacing-6);
}
.sidebar-toggle {
display: none;
position: fixed;
top: var(--spacing-4);
right: var(--spacing-4);
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
cursor: pointer;
color: var(--color-text);
padding: var(--spacing-2);
z-index: 1001;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.sidebar-backdrop {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
z-index: 999;
}
.sidebar-backdrop.active {
display: block;
}
.dashboard-page {
background: var(--color-bg-page);
}
.clients-filter-bar {
display: flex;
gap: var(--spacing-3);
align-items: center;
padding: var(--spacing-4);
}
.filter-search {
flex: 1;
min-width: 200px;
height: 36px;
padding: var(--spacing-2) var(--spacing-3);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
font-size: var(--font-size-base);
font-family: var(--font-base);
background: var(--color-bg-input);
transition: border-color 0.15s ease;
box-sizing: border-box;
}
.filter-search:focus {
outline: none;
border-color: var(--color-text-muted);
}
.filter-search::placeholder {
color: var(--color-text-muted);
}
.filter-select {
height: 36px;
padding: var(--spacing-2) var(--spacing-3);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
font-size: var(--font-size-base);
font-family: var(--font-base);
background: var(--color-bg-input);
transition: border-color 0.15s ease;
min-width: 140px;
box-sizing: border-box;
}
.filter-select:focus {
outline: none;
border-color: var(--color-text-muted);
}
.filter-bar-equal .filter-search,
.filter-bar-equal .filter-select {
flex: 1 1 0;
min-width: 0;
}
.risk-filter-bar .filter-search {
min-width: 160px;
}
.clients-table {
font-size: var(--font-size-base);
}
.clients-table th {
font-weight: var(--font-weight-medium);
text-transform: uppercase;
font-size: var(--font-size-sm);
letter-spacing: 0.05em;
color: var(--color-text-muted);
}
.clients-table .col-health {
width: 60px;
}
.clients-table .col-client {
min-width: 200px;
}
.clients-table .col-server {
width: 120px;
}
.clients-table .col-php {
width: 80px;
}
.clients-table .col-errors {
width: 80px;
}
.clients-table .col-sm-metrics {
width: 80px;
}
.clients-table .col-ssl {
width: 80px;
}
.clients-table .col-last-seen {
width: 120px;
}
.clients-table .col-digest {
width: 50px;
text-align: center;
}
.clients-table .col-digest .sort-arrow {
margin-right: -1.15em;
}
.clients-table .col-diagnosis,
.clients-table .diagnosis-cell {
text-align: center;
}
.clients-table th.sortable {
cursor: pointer;
user-select: none;
white-space: nowrap;
}
.clients-table th.sortable:hover {
color: var(--color-text);
}
.clients-table th.sortable:focus {
outline: 2px solid var(--color-success);
outline-offset: -2px;
}
.clients-table th.sortable.sort-active {
color: var(--color-text);
}
.clients-table th.sortable .sort-arrow {
display: inline-block;
width: 0.9em;
margin-left: 0.25em;
font-size: 0.85em;
opacity: 0.5;
}
.clients-table th.sortable.sort-active .sort-arrow {
opacity: 1;
}
.clients-table th.sortable:not(.sort-active):hover .sort-arrow::before {
content: "\2195";
opacity: 0.6;
}
.client-row {
cursor: pointer;
transition: background-color 0.15s ease;
border-left: 3px solid transparent;
}
.client-row:hover {
background: var(--color-bg-hover);
}
.client-row.row-error {
border-left-color: var(--color-error);
}
.client-row.row-warning {
border-left-color: var(--color-warning);
}
.client-row.row-healthy {
border-left-color: transparent;
}
.client-row.row-neutral {
border-left-color: transparent;
}
.health-indicator {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
margin: 0 auto;
}
.health-dot {
width: 12px;
height: 12px;
border-radius: 50%;
transition: background-color 0.15s ease;
}
.health-dot.health-healthy {
background: var(--color-success);
}
.health-dot.health-error {
background: var(--color-error);
}
.health-dot.health-warning {
background: var(--color-warning);
}
.client-domain {
font-weight: var(--font-weight-medium);
color: var(--color-text);
margin-right: 6px;
}
.client-project-name {
font-size: var(--font-size-sm);
color: var(--color-text-muted);
display: block;
}
.env-badge {
display: inline-flex;
align-items: center;
padding: 2px var(--spacing-2);
border-radius: var(--radius-sm);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
line-height: 1.4;
}
.env-badge.env-production {
background: #fef2f2;
color: var(--color-error);
}
.env-badge.env-staging {
background: #fffbeb;
color: #92400e;
}
.env-badge.env-development {
background: #ecfdf5;
color: #065f46;
}
.env-badge.env-other {
background: var(--color-bg-hover);
color: var(--color-text-muted);
}
.client-tag-badge {
display: inline-flex;
align-items: center;
margin-left: var(--spacing-1);
padding: 2px var(--spacing-2);
border-radius: var(--radius-sm);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
line-height: 1.4;
background: #eff6ff;
color: #1e40af;
}
.client-badges {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--spacing-1);
margin-top: var(--spacing-1);
}
.client-badges .env-badge,
.client-badges .client-tag-badge {
margin: 0;
}
.clients-table .server-name {
display: inline-block;
max-width: 110px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: middle;
}
.setup-step {
margin-bottom: var(--spacing-5);
}
.setup-step:last-child {
margin-bottom: 0;
}
.setup-step-title {
font-size: var(--font-size-md);
font-weight: var(--font-weight-semibold);
margin-bottom: var(--spacing-2);
color: var(--color-text);
}
.setup-step p {
margin-bottom: var(--spacing-3);
}
.setup-step .form-group > .flex {
align-items: flex-start;
}
.setup-step .form-group > .flex.setup-secret-row {
align-items: stretch;
}
.setup-step .form-group > .flex > span:last-child {
flex: 1;
min-width: 0;
overflow-wrap: anywhere;
word-break: break-word;
}
.setup-step .form-group > .flex > .setup-check-body {
flex: 1;
min-width: 0;
}
.setup-step .setup-check-body > span {
display: block;
overflow-wrap: anywhere;
word-break: break-word;
}
.setup-step .text-muted {
overflow-wrap: anywhere;
word-break: break-word;
}
.path-list {
overflow-wrap: anywhere;
word-break: break-word;
}
.setup-code-wrap {
position: relative;
margin-top: var(--spacing-3);
}
.setup-code-wrap .code-block {
margin-bottom: var(--spacing-2);
max-height: 320px;
overflow-y: auto;
}
.setup-code-label {
margin-top: var(--spacing-3);
margin-bottom: 0;
font-size: var(--font-size-sm);
}
.setup-code-label + .setup-code-wrap {
margin-top: var(--spacing-2);
}
.setup-code-wrap .btn {
margin-top: var(--spacing-2);
}
.setup-secret {
display: inline-block;
padding: var(--spacing-2) var(--spacing-3);
background: var(--color-bg-hover);
border-radius: var(--radius-md);
font-family: var(--font-base);
font-size: var(--font-size-sm);
color: var(--color-text);
user-select: all;
}
.auth-page {
background: var(--color-bg-page);
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
flex-direction: column;
}
.auth-container {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: var(--spacing-5);
width: 100%;
}
.auth-card {
background: var(--color-bg-card);
padding: 40px;
border-radius: var(--radius-xl);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
max-width: 400px;
width: 100%;
}
.auth-brand {
text-align: center;
margin-bottom: var(--spacing-5);
}
.auth-brand h1 {
font-size: var(--font-size-2xl);
margin-top: var(--spacing-3);
color: var(--color-text);
}
.auth-card h2 {
text-align: center;
font-size: var(--font-size-xl);
margin-bottom: var(--spacing-2);
}
.auth-subtitle {
text-align: center;
color: var(--color-text-muted);
font-size: var(--font-size-base);
margin-bottom: var(--spacing-5);
}
.auth-form {
margin-top: var(--spacing-5);
}
.auth-links {
display: flex;
justify-content: space-between;
margin-top: var(--spacing-5);
padding-top: var(--spacing-4);
border-top: 1px solid var(--color-border);
}
.inline-form {
display: inline;
}
.link-btn {
background: none;
border: none;
color: var(--color-text);
cursor: pointer;
font-size: var(--font-size-base);
padding: 0;
font-weight: var(--font-weight-medium);
}
.link-btn:hover {
text-decoration: underline;
}
.card {
background: var(--color-bg-card);
border-radius: var(--radius-lg);
border: 1px solid var(--color-border);
padding: var(--spacing-5);
margin-bottom: var(--spacing-5);
}
.card h2 {
margin-bottom: var(--spacing-4);
}
.form-group {
margin-bottom: var(--spacing-4);
}
#user-settings-step-code .form-group {
margin-top: var(--spacing-5);
}
#user-settings-step-main h4:not(:first-child) {
margin-top: var(--spacing-5);
}
.form-group label {
display: block;
font-weight: var(--font-weight-medium);
margin-bottom: var(--spacing-2);
font-size: var(--font-size-base);
color: var(--color-text);
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="number"],
.form-group input[type="url"],
.form-group input[type="date"],
.form-group select,
.mailbox-add-sender input[type="email"] {
display: block;
width: 100%;
height: 36px;
padding: var(--spacing-2) var(--spacing-3);
font-size: var(--font-size-base);
line-height: 1.5;
color: var(--color-text);
background: var(--color-bg-input);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
transition: border-color 0.15s, box-shadow 0.15s;
font-family: inherit;
box-sizing: border-box;
}
.log-filter {
max-width: 130px;
min-width: 0;
flex: 0 1 auto;
text-overflow: ellipsis;
}
.field-row > .btn,
.field-row > select {
height: 36px;
}
.form-group input[type="date"] {
display: flex;
align-items: center;
}
.form-group textarea {
display: block;
width: 100%;
padding: var(--spacing-2) var(--spacing-3);
font-size: var(--font-size-base);
line-height: 1.5;
color: var(--color-text);
background: var(--color-bg-input);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
transition: border-color 0.15s, box-shadow 0.15s;
font-family: inherit;
box-sizing: border-box;
}
select {
display: block;
width: 100%;
height: 36px;
padding: var(--spacing-2) var(--spacing-3);
font-size: var(--font-size-base);
line-height: 1.5;
color: var(--color-text);
background: var(--color-bg-input);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
font-family: inherit;
transition: border-color 0.15s, box-shadow 0.15s;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--spacing-3) center;
padding-right: var(--spacing-6);
cursor: pointer;
box-sizing: border-box;
}
select:focus {
outline: none;
border-color: var(--color-success);
box-shadow: 0 0 0 2px rgba(16, 163, 127, 0.1);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.mailbox-add-sender input[type="email"]:focus {
outline: none;
border-color: var(--color-success);
box-shadow: 0 0 0 2px rgba(16, 163, 127, 0.1);
}
.form-group-inline {
display: flex;
align-items: center;
}
.checkbox-label {
display: flex;
align-items: center;
gap: var(--spacing-2);
font-size: var(--font-size-base);
color: var(--color-text-muted);
cursor: pointer;
font-weight: var(--font-weight-normal);
}
.checkbox-label input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: var(--color-success);
}
.input-code {
font-family: var(--font-base);
font-size: var(--font-size-2xl) !important;
text-align: center;
letter-spacing: 0.2em;
padding: 14px !important;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--spacing-2) var(--spacing-4);
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
line-height: 1.5;
border: 1px solid transparent;
border-radius: var(--radius-md);
cursor: pointer;
text-decoration: none;
transition: all 0.15s ease;
font-family: inherit;
gap: var(--spacing-2);
white-space: nowrap;
}
.btn:hover {
text-decoration: none;
}
.btn:focus-visible {
outline: 2px solid var(--color-success);
outline-offset: 2px;
}
.btn-sm {
padding: var(--spacing-1) var(--spacing-3);
font-size: var(--font-size-base);
}
.btn-primary {
background: var(--color-text);
color: var(--color-bg-card);
border-color: var(--color-text);
}
.btn-primary:hover {
background: #2b2b2b;
border-color: #2b2b2b;
}
.btn-danger {
background: var(--color-error);
color: var(--color-bg-card);
border-color: var(--color-error);
}
.btn-danger:hover {
background: #dc2626;
border-color: #dc2626;
}
.btn-success {
background: var(--color-success);
color: var(--color-bg-card);
border-color: var(--color-success);
}
.btn-success:hover {
background: #0d8a6a;
border-color: #0d8a6a;
}
.btn-outline {
background: transparent;
color: var(--color-text-muted);
border-color: var(--color-border);
}
.btn-outline:hover {
background: var(--color-bg-hover);
color: var(--color-text);
border-color: #d1d1d1;
}
select.btn {
height: auto;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--spacing-2) center;
padding-right: var(--spacing-6);
}
.btn:disabled,
.btn[disabled] {
opacity: 0.35;
cursor: not-allowed;
pointer-events: none;
}
.btn-block {
display: block;
width: 100%;
}
.alert {
padding: var(--spacing-3) var(--spacing-4);
border-radius: var(--radius-md);
font-size: var(--font-size-base);
margin-bottom: var(--spacing-4);
}
.alert-error {
background: #fef2f2;
color: var(--color-error);
border: 1px solid #fecaca;
}
.alert-success {
background: #ecfdf5;
color: #065f46;
border: 1px solid #a7f3d0;
}
.alert-info {
background: var(--color-bg-hover);
color: var(--color-text-muted);
border: 1px solid var(--color-border);
}
.alert-warning {
background: #fffbeb;
color: #92400e;
border: 1px solid #fde68a;
}
.site-metrics-key-info-list {
padding-left: 1.2em;
}
.site-metrics-key-info-link {
margin-top: 6px;
}
#clientLimitNotice {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-4);
}
#clientLimitNotice .btn {
flex-shrink: 0;
}
.flash {
padding: var(--spacing-3) 40px var(--spacing-3) var(--spacing-4);
margin: var(--spacing-4) var(--spacing-6) 0;
border-radius: var(--radius-md);
font-size: var(--font-size-base);
position: relative;
}
.flash-success {
background: #ecfdf5;
color: #065f46;
border-bottom: 1px solid #a7f3d0;
}
.flash-error {
background: #fef2f2;
color: var(--color-error);
border-bottom: 1px solid #fecaca;
}
.flash-info {
background: var(--color-bg-hover);
color: var(--color-text-muted);
border-bottom: 1px solid var(--color-border);
}
.flash-warning {
background: #fffbeb;
color: #92400e;
border-bottom: 1px solid #fde68a;
}
.flash-centered {
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 2000;
min-width: 300px;
text-align: center;
border: 1px solid var(--color-border);
margin: 0;
}
.flash-close {
position: absolute;
right: var(--spacing-3);
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
font-size: var(--font-size-xl);
cursor: pointer;
color: inherit;
opacity: 0.5;
line-height: 1;
}
.flash-close:hover {
opacity: 1;
}
.table {
width: 100%;
border-collapse: collapse;
font-size: var(--font-size-base);
}
.table th,
.table td {
padding: var(--spacing-3) var(--spacing-4);
text-align: left;
border-bottom: 1px solid var(--color-border);
overflow-wrap: anywhere;
}
.table th {
font-weight: var(--font-weight-medium);
color: var(--color-text-muted);
font-size: var(--font-size-sm);
text-transform: uppercase;
letter-spacing: 0.05em;
background: transparent;
white-space: nowrap;
}
.nowrap {
white-space: nowrap;
}
.table tbody tr:hover {
background: var(--color-bg-hover);
}
.status-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
margin-right: var(--spacing-2);
}
.status-online { background: var(--color-success); }
.status-offline { background: var(--color-error); }
.status-error { background: var(--color-error); }
.status-warning { background: var(--color-warning); }
.client-meta-strip {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-1) var(--spacing-5);
margin-bottom: var(--spacing-4);
padding: var(--spacing-3) var(--spacing-4);
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
}
.client-meta-item {
display: flex;
align-items: baseline;
gap: var(--spacing-2);
}
.client-meta-label {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.03em;
white-space: nowrap;
}
.client-meta-value {
font-size: var(--font-size-base);
color: var(--color-text);
}
.tabs {
display: flex;
border-bottom: 1px solid var(--color-border);
margin-bottom: var(--spacing-5);
gap: 0;
}
.tab {
padding: var(--spacing-2) var(--spacing-4);
font-size: var(--font-size-base);
color: var(--color-text-muted);
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
transition: all 0.15s ease;
background: none;
border-top: none;
border-left: none;
border-right: none;
font-family: inherit;
}
.tab:hover {
color: var(--color-text);
}
.tab:focus-visible {
outline: 2px solid var(--color-success);
outline-offset: -2px;
}
.tab.active {
color: var(--color-text);
border-bottom-color: var(--color-text);
font-weight: var(--font-weight-medium);
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
pre, .code-block {
background: var(--color-text);
color: var(--color-border);
padding: var(--spacing-4);
border-radius: var(--radius-lg);
overflow-x: auto;
font-size: var(--font-size-base);
line-height: 1.6;
font-family: var(--font-base);
}
code {
background: var(--color-bg-hover);
padding: 2px var(--spacing-2);
border-radius: var(--radius-sm);
font-size: var(--font-size-base);
}
pre code {
background: none;
padding: 0;
}
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
z-index: 1500;
display: none;
align-items: center;
justify-content: center;
}
.modal-overlay.active {
display: flex;
}
.modal {
background: var(--color-bg-card);
border-radius: var(--radius-xl);
border: 1px solid var(--color-border);
max-width: 600px;
width: 90%;
max-height: 80vh;
overflow-y: auto;
}
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--spacing-4) var(--spacing-5);
border-bottom: 1px solid var(--color-border);
}
.modal-header h3 {
margin: 0;
}
.modal-close:not(.btn) {
background: none;
border: none;
font-size: var(--font-size-2xl);
cursor: pointer;
color: var(--color-text-muted);
line-height: 1;
}
.modal-close:not(.btn):hover {
color: var(--color-text);
}
.modal-close:not(.btn):focus-visible {
outline: 2px solid var(--color-success);
outline-offset: 2px;
}
.modal-body {
padding: var(--spacing-5);
}
.modal-footer {
padding: var(--spacing-4) var(--spacing-5);
border-top: 1px solid var(--color-border);
display: flex;
justify-content: flex-end;
gap: var(--spacing-3);
}
#toast-container {
position: fixed;
bottom: var(--spacing-5);
right: var(--spacing-5);
z-index: 2000;
display: flex;
flex-direction: column;
gap: var(--spacing-2);
}
.toast {
padding: var(--spacing-3) var(--spacing-4);
border-radius: var(--radius-lg);
font-size: var(--font-size-base);
border: 1px solid var(--color-border);
animation: toastIn 0.3s ease;
max-width: 400px;
color: var(--color-bg-card);
}
.toast-sticky {
display: flex;
align-items: center;
gap: var(--spacing-2);
}
.toast-sticky .spinner-inline {
flex-shrink: 0;
border-color: var(--color-border);
border-top-color: var(--color-bg-card);
}
@media (prefers-reduced-motion: reduce) {
.toast-sticky .spinner-inline { animation-duration: 2.4s; }
}
.toast-success { background: var(--color-success); border-color: var(--color-success); }
.toast-error { background: var(--color-error); border-color: var(--color-error); }
.toast-info { background: var(--color-text); border-color: var(--color-text); }
.toast-warning { background: var(--color-warning); border-color: var(--color-warning); color: var(--color-text); }
@keyframes toastIn {
from {
opacity: 0;
transform: translateY(var(--spacing-3));
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes toastOut {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(var(--spacing-3));
}
}
.spinner {
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid var(--color-border);
border-top-color: var(--color-text);
border-radius: 50%;
animation: spin 0.6s linear infinite;
}
.spinner-lg {
width: 40px;
height: 40px;
border-width: 3px;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.loading-center {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 12px;
padding: 40px;
text-align: center;
}
.spinner-inline {
display: inline-block;
width: 14px;
height: 14px;
border: 2px solid var(--color-border);
border-top-color: var(--color-text);
border-radius: 50%;
animation: spin 0.6s linear infinite;
vertical-align: middle;
}
.transfer-progress {
text-align: center;
padding: var(--spacing-4) 0;
}
.progress-bar-wrap {
width: 100%;
max-width: 300px;
height: 6px;
background: var(--color-border);
border-radius: 3px;
overflow: hidden;
margin: 0 auto var(--spacing-2);
}
.progress-bar-fill {
height: 100%;
background: var(--color-text);
border-radius: 3px;
transition: width 0.3s ease;
width: 0%;
}
.progress-text {
font-size: var(--font-size-sm);
margin: 0;
}
.progress-cancel-btn {
margin-top: var(--spacing-2);
}
.badge {
display: inline-block;
padding: 2px var(--spacing-2);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
border-radius: var(--radius-sm);
line-height: 1.5;
white-space: nowrap;
}
.php-version {
white-space: nowrap;
}
.badge-success {
background: #ecfdf5;
color: #065f46;
}
.badge-danger {
background: #fef2f2;
color: var(--color-error);
}
.badge-critical {
background: #b91c1c;
color: #fff;
}
.badge-warning {
background: #fffbeb;
color: #92400e;
}
.badge-info {
background: var(--color-bg-hover);
color: var(--color-text-muted);
}
.badge-muted {
background: var(--color-bg-hover);
color: var(--color-text-muted);
opacity: 0.7;
}
.badge-inflated-mark {
display: inline-block;
margin-left: 2px;
color: #92400e;
font-weight: 700;
cursor: help;
}
.dns-overview-link {
cursor: pointer;
}
.dns-overview-link:hover {
opacity: 0.7;
}
.hidden,
.d-none {
display: none !important;
}
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--spacing-2); }
.mb-2 { margin-bottom: var(--spacing-4); }
.mb-3 { margin-bottom: var(--spacing-5); }
.mb-4 { margin-bottom: var(--spacing-6); }
.mb-5 { margin-bottom: var(--spacing-7); }
.mt-1 { margin-top: var(--spacing-2); }
.mt-2 { margin-top: var(--spacing-4); }
.mt-3 { margin-top: var(--spacing-5); }
.text-center { text-align: center; }
.text-right { text-align: right; }
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.items-end { align-items: flex-end; }
.items-center { align-items: center; }
.self-end { align-self: flex-end; }
.gap-1 { gap: var(--spacing-2); }
.gap-2 { gap: var(--spacing-4); }
.filter-bar {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: var(--spacing-4);
}
.filter-bar .form-group {
flex: 1;
min-width: 140px;
margin-bottom: 0;
}
.filter-bar .form-group:first-child {
min-width: 200px;
}
.card-table {
padding: 0;
overflow-x: auto;
}
.table-responsive {
overflow-x: auto;
}
.empty-state {
padding: 40px var(--spacing-5);
text-align: center;
color: var(--color-text-muted);
}
.setup-step-title {
font-size: var(--font-size-md);
margin-bottom: var(--spacing-2);
}
.setup-code-wrap {
position: relative;
}
.setup-code-wrap .btn {
position: absolute;
top: var(--spacing-2);
right: var(--spacing-2);
background: var(--color-bg-card);
color: var(--color-text);
}
.setup-secret {
flex: 1;
background: var(--color-bg-hover);
padding: var(--spacing-2) var(--spacing-3);
border-radius: var(--radius-md);
border: 1px solid var(--color-border);
font-size: var(--font-size-base);
word-break: break-all;
}
.modal-lg {
max-width: 700px;
}
.col-compare-field { width: 25%; }
.col-compare-value { width: 35%; }
.col-compare-status { width: 5%; }
.compare-selectors {
display: flex;
align-items: flex-end;
gap: var(--spacing-4);
flex-wrap: wrap;
}
.compare-selector {
flex: 1;
min-width: 200px;
}
.compare-selector .form-group {
margin-bottom: 0;
}
.compare-vs {
font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold);
color: var(--color-text-muted);
padding-bottom: var(--spacing-2);
flex-shrink: 0;
}
.compare-action {
padding-bottom: 0;
flex-shrink: 0;
}
.diff-match td {
background: transparent;
}
.diff-mismatch td {
background: #fffbeb;
}
.diff-mismatch td:nth-child(2) {
background: #fef2f2;
}
.diff-mismatch td:nth-child(3) {
background: #ecfdf5;
}
.diff-status-icon {
text-align: center;
font-size: var(--font-size-lg);
}
.diff-item-unique {
background: #fef08a;
border-radius: 3px;
padding: 1px 4px;
}
.diff-item-changed {
background: #fed7aa;
border-radius: 3px;
}
.diff-ini-list {
font-size: var(--font-size-sm);
font-family: var(--font-base);
}
.diff-ini-row {
display: flex;
gap: var(--spacing-2);
padding: 2px 0;
border-bottom: 1px solid rgba(0,0,0,0.04);
}
.diff-ini-row:last-child {
border-bottom: none;
}
.diff-ini-row.diff-item-unique,
.diff-ini-row.diff-item-changed {
padding: 2px 4px;
margin: 0 -4px;
}
.diff-ini-key {
color: var(--color-text-muted);
flex-shrink: 0;
min-width: 180px;
}
.diff-ini-val {
word-break: break-all;
}
.user-actions {
display: flex;
gap: var(--spacing-2);
justify-content: flex-end;
}
.readonly-field {
background: var(--color-bg-hover);
padding: var(--spacing-2) var(--spacing-3);
border-radius: var(--radius-md);
border: 1px solid var(--color-border);
font-size: var(--font-size-base);
word-break: break-all;
}
#settings-secret {
white-space: nowrap;
overflow-x: auto;
word-break: normal;
}
.server-version-row {
display: flex;
gap: var(--spacing-2);
}
.server-version-row .readonly-field {
flex: 1;
}
.settings-info-actions {
display: flex;
gap: var(--spacing-2);
}
.settings-info-actions .btn {
padding-top: var(--spacing-2);
padding-bottom: var(--spacing-2);
}
.filter-bar.license-fields .form-group,
.filter-bar.license-fields .form-group:first-child {
flex: 1 1 0;
min-width: 0;
}
.license-fields .readonly-field {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
word-break: normal;
}
.rule-card {
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
margin-bottom: var(--spacing-3);
background: var(--color-bg-card);
transition: opacity 0.2s;
}
.rule-card.dragging {
opacity: 0.5;
}
.rule-card.drag-over {
border-top: 2px solid var(--color-success);
}
.rule-card-header {
display: flex;
align-items: center;
padding: var(--spacing-3) var(--spacing-4);
cursor: pointer;
gap: var(--spacing-2);
user-select: none;
border-bottom: 1px solid transparent;
}
.rule-card.expanded .rule-card-header {
border-bottom-color: var(--color-border);
}
.rule-card-drag {
cursor: grab;
color: #d1d1d1;
font-size: var(--font-size-xl);
padding: 2px var(--spacing-1);
line-height: 1;
}
.rule-card-drag:active {
cursor: grabbing;
}
.rule-card-chevron {
font-size: var(--font-size-xs);
color: var(--color-text-muted);
transition: transform 0.2s;
flex-shrink: 0;
}
.rule-card.expanded .rule-card-chevron {
transform: rotate(90deg);
}
.rule-card-title {
flex: 1;
font-weight: var(--font-weight-medium);
font-size: var(--font-size-base);
color: var(--color-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rule-card-title.empty {
color: #d1d1d1;
font-style: italic;
}
.rule-card-remove {
background: none;
border: none;
color: #d1d1d1;
font-size: var(--font-size-xl);
cursor: pointer;
padding: 2px var(--spacing-2);
line-height: 1;
border-radius: var(--radius-sm);
transition: color 0.15s, background 0.15s;
}
.rule-card-remove:hover {
color: var(--color-error);
background: #fef2f2;
}
.rule-card-body {
display: none;
padding: var(--spacing-4);
}
.rule-card.expanded .rule-card-body {
display: block;
}
.tag-input-wrap {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--spacing-2);
padding: var(--spacing-2) var(--spacing-2);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-bg-card);
min-height: 40px;
cursor: text;
transition: border-color 0.15s, box-shadow 0.15s;
}
.tag-input-wrap:focus-within {
border-color: var(--color-success);
box-shadow: 0 0 0 2px rgba(16, 163, 127, 0.1);
}
.tag-chip {
display: inline-flex;
align-items: center;
gap: var(--spacing-1);
background: var(--color-bg-hover);
color: var(--color-text);
padding: 2px var(--spacing-2);
border-radius: var(--radius-sm);
font-size: var(--font-size-base);
font-family: var(--font-base);
line-height: 1.5;
border: 1px solid var(--color-border);
}
.tag-chip-remove {
background: none;
border: none;
color: var(--color-text-muted);
cursor: pointer;
font-size: var(--font-size-md);
padding: 0 2px;
line-height: 1;
opacity: 0.5;
}
.tag-chip-remove:hover {
opacity: 1;
}
.tag-input-field {
border: none;
outline: none;
font-size: var(--font-size-base);
font-family: inherit;
min-width: 120px;
flex: 1;
padding: 2px 0;
background: transparent;
}
.expand-icon {
display: inline-block;
font-size: var(--font-size-sm);
transition: transform 0.2s;
cursor: pointer;
}
.client-row td {
cursor: pointer;
}
.client-project-name {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-normal);
color: var(--color-text-muted);
line-height: 1.4;
}
.error-file-line {
font-family: var(--font-base);
font-size: var(--font-size-base);
word-break: break-all;
}
.error-row:hover {
background: var(--color-bg-hover);
}
.error-detail-modal {
max-width: 900px;
width: 92%;
min-height: 60vh;
max-height: 85vh;
display: flex;
flex-direction: column;
}
.error-detail-modal .modal-header {
flex-shrink: 0;
}
.error-detail-modal .modal-body {
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
}
.error-detail-title {
display: flex;
align-items: center;
gap: var(--spacing-2);
min-width: 0;
flex: 1;
}
.error-detail-title .badge {
flex-shrink: 0;
}
.error-detail-title .error-detail-msg {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: var(--font-weight-semibold);
font-size: var(--font-size-md);
}
.error-detail-tabs {
margin-bottom: 0;
padding: 0 var(--spacing-5);
flex-shrink: 0;
flex-wrap: nowrap;
overflow-x: auto;
}
.error-detail-tabs .tab {
flex-shrink: 0;
white-space: nowrap;
margin-bottom: 0;
}
.error-detail-tabs .tab.active {
font-weight: var(--font-weight-semibold);
}
.error-detail-content {
padding: var(--spacing-4) var(--spacing-5);
overflow-y: auto;
flex: 1;
display: flex;
flex-direction: column;
}
.error-detail-content a {
color: var(--color-text);
text-decoration: none;
}
.error-detail-content a:hover {
text-decoration: underline;
}
.trace-raw-file-link {
color: inherit;
text-decoration: underline;
text-decoration-style: dotted;
cursor: pointer;
}
.trace-raw-file-link:hover {
text-decoration-style: solid;
}
.trace-level-badge {
flex: 0 0 auto;
font-family: var(--font-mono, monospace);
font-size: var(--font-size-xs);
color: var(--color-text-muted);
background: var(--color-bg-hover);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
padding: 1px 5px;
}
.error-detail-content .kv-table {
width: 100%;
border-collapse: collapse;
}
.error-detail-content .kv-table th {
text-align: left;
padding: var(--spacing-2) var(--spacing-3) var(--spacing-2) 0;
color: var(--color-text-muted);
font-weight: var(--font-weight-medium);
white-space: nowrap;
vertical-align: top;
width: 160px;
font-size: var(--font-size-sm);
border-bottom: 1px solid #f0f0f0;
}
.error-detail-content .kv-table td {
padding: var(--spacing-2) 0;
word-break: break-word;
border-bottom: 1px solid #f0f0f0;
font-size: var(--font-size-sm);
}
.error-detail-content .kv-table tr:last-child th,
.error-detail-content .kv-table tr:last-child td {
border-bottom: none;
}
.error-detail-content pre {
margin: 0;
font-size: var(--font-size-sm);
max-height: 400px;
overflow: auto;
}
.error-detail-content .detail-section {
margin-top: var(--spacing-4);
}
.error-detail-content #diagnosisTabBody {
flex: 1;
display: flex;
flex-direction: column;
}
.error-detail-content .diagnosis-report {
margin-top: 0;
flex: 1;
display: flex;
flex-direction: column;
}
.diagnosis-subtab-bar {
display: flex;
align-items: center;
gap: var(--spacing-2);
border-bottom: 1px solid var(--color-border);
margin-bottom: var(--spacing-5);
position: sticky;
top: 0;
z-index: 2;
background: var(--color-bg-card);
box-shadow: 0 calc(-1 * var(--spacing-4)) 0 var(--color-bg-card);
}
.diagnosis-subtabs {
display: flex;
flex: 1;
flex-wrap: wrap;
gap: var(--spacing-1);
}
.diagnosis-subtab {
background: transparent;
border: 0;
border-bottom: 2px solid transparent;
padding: var(--spacing-2) var(--spacing-3);
margin-bottom: -1px;
font-size: var(--font-size-sm);
color: var(--color-text-muted);
cursor: pointer;
white-space: nowrap;
}
.diagnosis-subtab:hover {
color: var(--color-text);
}
.diagnosis-subtab.active {
color: var(--color-text);
border-bottom-color: var(--color-text);
font-weight: 600;
}
.diagnosis-copy-btn,
.diagnosis-fullcopy-btn {
flex: 0 0 auto;
background: transparent;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
padding: 2px var(--spacing-2);
font-size: var(--font-size-sm);
color: var(--color-text-muted);
cursor: pointer;
}
.diagnosis-copy-btn:hover,
.diagnosis-fullcopy-btn:hover {
color: var(--color-text);
border-color: var(--color-text);
}
.diagnosis-clarify-btn,
.diagnosis-clarify-close {
flex: 0 0 auto;
background: var(--color-text);
border: 1px solid var(--color-text);
border-radius: var(--radius-sm);
padding: 2px var(--spacing-2);
font-size: var(--font-size-sm);
color: #fff;
cursor: pointer;
}
.diagnosis-clarify-btn:hover,
.diagnosis-clarify-close:hover {
background: #2b2b2b;
border-color: #2b2b2b;
}
.diagnosis-clarify {
display: flex;
flex-direction: column;
gap: var(--spacing-3);
flex: 1 1 auto;
min-height: 0;
}
.diagnosis-clarify-head {
margin-bottom: 0;
}
.diagnosis-clarify-tab {
cursor: default;
}
.diagnosis-chat-thread {
display: flex;
flex-direction: column;
gap: var(--spacing-3);
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
padding: var(--spacing-1);
}
.diagnosis-chat-msg {
display: flex;
flex-direction: column;
gap: 2px;
max-width: 92%;
}
.diagnosis-chat-user {
align-self: flex-end;
align-items: flex-end;
}
.diagnosis-chat-ai {
align-self: flex-start;
align-items: flex-start;
}
.diagnosis-chat-role {
font-size: var(--font-size-sm);
color: var(--color-text-muted);
}
.diagnosis-chat-bubble {
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--spacing-2) var(--spacing-3);
line-height: 1.55;
word-break: break-word;
}
.diagnosis-chat-bubble[data-copy-raw] {
cursor: pointer;
}
.diagnosis-chat-ai .diagnosis-chat-bubble {
background: var(--color-bg-card);
}
.diagnosis-chat-user .diagnosis-chat-bubble {
background: var(--color-text);
border-color: var(--color-text);
color: #fff;
}
.diagnosis-chat-bubble .md-p { margin: 0 0 var(--spacing-2); }
.diagnosis-chat-bubble .md-p:first-child { margin-top: 0; }
.diagnosis-chat-bubble .md-p:last-child { margin-bottom: 0; }
.diagnosis-chat-bubble .md-h {
margin: var(--spacing-3) 0 var(--spacing-1);
font-size: var(--font-size-md);
}
.diagnosis-chat-bubble .md-list {
margin: 0 0 var(--spacing-2);
padding-left: var(--spacing-5);
}
.diagnosis-chat-bubble .md-list:last-child { margin-bottom: 0; }
.diagnosis-chat-bubble .md-list li { margin-bottom: 2px; }
.diagnosis-chat-ai .diagnosis-chat-bubble code {
background: var(--color-bg-hover);
color: var(--color-text);
padding: 1px 4px;
border-radius: var(--radius-sm);
font-family: monospace;
font-size: 0.92em;
}
.diagnosis-chat-user .diagnosis-chat-bubble code {
background: rgba(255, 255, 255, 0.18);
color: #fff;
padding: 1px 4px;
border-radius: var(--radius-sm);
font-family: monospace;
font-size: 0.92em;
}
.diagnosis-chat-ai .diagnosis-chat-bubble .md-pre {
background: var(--color-bg-hover);
color: var(--color-text);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--spacing-2) var(--spacing-3);
overflow-x: auto;
margin: 0 0 var(--spacing-2);
cursor: pointer;
}
.diagnosis-chat-ai .diagnosis-chat-bubble .md-pre:last-child { margin-bottom: 0; }
.diagnosis-chat-ai .diagnosis-chat-bubble .md-pre code {
background: none;
padding: 0;
font-size: var(--font-size-sm);
}
.diagnosis-chat-bubble .md-pre code.hljs { background: none; padding: 0; }
.diagnosis-chat-bubble .md-table {
display: block;
width: fit-content;
max-width: 100%;
overflow-x: auto;
border-collapse: collapse;
margin: 0 0 var(--spacing-2);
font-size: var(--font-size-sm);
}
.diagnosis-chat-bubble .md-table:last-child { margin-bottom: 0; }
.diagnosis-chat-bubble .md-table th,
.diagnosis-chat-bubble .md-table td {
border: 1px solid var(--color-border);
padding: var(--spacing-1) var(--spacing-2);
text-align: left;
}
.diagnosis-chat-bubble .md-table thead th {
background: var(--color-bg-hover);
font-weight: 600;
}
.diagnosis-chat-bubble .md-quote {
margin: 0 0 var(--spacing-2);
padding: var(--spacing-1) var(--spacing-3);
border-left: 3px solid var(--color-border);
color: var(--color-text-muted);
}
.diagnosis-chat-bubble .md-quote:last-child { margin-bottom: 0; }
.diagnosis-chat-bubble .md-quote .md-p:last-child { margin-bottom: 0; }
.diagnosis-chat-bubble .md-hr {
border: none;
border-top: 1px solid var(--color-border);
margin: var(--spacing-3) 0;
}
#explainAbort, .diagnosis-clarify-abort { margin-right: var(--spacing-2); }
.explain-queued, .clarify-queued { opacity: 0.5; cursor: pointer; }
.explain-queued.queued-editing, .clarify-queued.queued-editing { opacity: 1; cursor: default; }
.queued-edit-input {
width: 100%;
box-sizing: border-box;
resize: none;
overflow: hidden;
display: block;
font: inherit;
color: inherit;
background: transparent;
border: none;
padding: 0;
outline: none;
}
.queued-edit-actions {
display: flex;
gap: var(--spacing-2);
margin-top: var(--spacing-2);
}
.queued-edit-save {
background: var(--color-bg-card);
color: var(--color-text);
border-color: var(--color-border);
}
.queued-edit-save:hover {
background: var(--color-bg-hover);
color: var(--color-text);
}
.explain-queued .diagnosis-chat-role::after,
.clarify-queued .diagnosis-chat-role::after {
content: ' · queued';
color: var(--color-text-muted);
font-weight: 400;
}
.diagnosis-chat-update {
display: flex;
align-items: center;
gap: var(--spacing-2);
margin-top: var(--spacing-2);
flex-wrap: wrap;
}
.diagnosis-chat-update-hint {
font-size: var(--font-size-sm);
}
.diagnosis-clarify-composer {
border-top: 1px solid var(--color-border);
margin-top: var(--spacing-4);
padding-top: var(--spacing-3);
display: flex;
flex-direction: column;
gap: var(--spacing-1);
}
.diagnosis-clarify-composer-head {
font-weight: 600;
}
.diagnosis-clarify-intro {
margin: 0 0 var(--spacing-2);
font-size: var(--font-size-sm);
}
.diagnosis-clarify-input {
width: 100%;
box-sizing: border-box;
resize: vertical;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--spacing-2);
font: inherit;
background: var(--color-bg-input);
color: var(--color-text);
}
.diagnosis-clarify-input:focus {
outline: none;
border-color: var(--color-text);
}
.diagnosis-clarify-actions {
display: flex;
justify-content: flex-end;
align-items: center;
margin-top: var(--spacing-2);
}
.explain-cost {
margin-right: auto;
font-size: var(--font-size-sm);
}
.explain-context-select {
max-width: 180px;
font-size: var(--font-size-base);
line-height: 1.5;
padding: var(--spacing-1) var(--spacing-2);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
color: var(--color-text);
background: var(--color-bg-input);
height: auto;
align-self: stretch;
margin-right: var(--spacing-2);
}
.explain-model {
max-width: 220px;
font-size: var(--font-size-base);
line-height: 1.5;
padding: var(--spacing-1) var(--spacing-3);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
height: auto;
align-self: stretch;
margin-right: var(--spacing-2);
}
.mermaid-diagram {
overflow-x: auto;
margin: var(--spacing-2) 0;
text-align: center;
}
.mermaid-diagram svg {
max-width: 100%;
height: auto;
cursor: pointer;
}
.explain-progress {
display: flex;
flex-direction: column;
gap: 4px;
}
.explain-progress-step {
display: flex;
align-items: center;
gap: 6px;
font-size: var(--font-size-sm);
color: var(--color-text-muted);
}
.explain-progress-step.active {
color: var(--color-text);
}
.explain-progress-tick {
color: var(--color-success);
font-weight: 600;
}
.explain-msg-usage {
font-size: var(--font-size-xs);
margin-top: 4px;
}
.explain-layout {
display: flex;
gap: var(--spacing-3);
align-items: stretch;
height: 70vh;
min-height: 420px;
}
.explain-page {
display: flex;
flex-direction: column;
height: calc(100vh - 2 * var(--spacing-6));
}
.explain-page .explain-layout {
flex: 1 1 auto;
height: auto;
min-height: 0;
}
.explain-history {
flex: 0 0 240px;
overflow-y: auto;
padding: var(--spacing-2);
}
.explain-main {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
padding: var(--spacing-3);
}
.explain-thread {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
padding: var(--spacing-1);
}
.explain-composer {
border-top: 1px solid var(--color-border);
padding-top: var(--spacing-3);
display: flex;
flex-direction: column;
gap: var(--spacing-1);
}
.explain-empty {
padding: var(--spacing-4);
line-height: 1.55;
}
.explain-history-head {
font-weight: 600;
padding: var(--spacing-2);
display: flex;
align-items: center;
justify-content: space-between;
}
.explain-history-new {
border: 1px solid var(--color-border);
background: transparent;
border-radius: var(--radius-sm);
padding: 2px var(--spacing-2);
font-size: var(--font-size-sm);
color: var(--color-text-muted);
cursor: pointer;
}
.explain-history-new:hover {
color: var(--color-text);
border-color: var(--color-text);
}
.explain-history-empty {
padding: var(--spacing-2);
font-size: var(--font-size-sm);
}
.explain-history-item {
position: relative;
padding: var(--spacing-2) 28px var(--spacing-2) var(--spacing-2);
border-radius: var(--radius-md);
cursor: pointer;
}
.explain-history-item:hover,
.explain-history-item.active {
background: var(--color-bg-hover);
}
.explain-history-title {
font-size: var(--font-size-sm);
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.explain-history-desc {
font-size: var(--font-size-xs);
line-height: 1.4;
margin-top: 2px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.explain-history-sub {
font-size: var(--font-size-sm);
margin-top: 4px;
}
.explain-history-clientline {
margin-top: 4px;
}
.explain-history-client {
display: inline-block;
max-width: 100%;
font-size: var(--font-size-xs);
padding: 0 6px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: bottom;
}
.explain-history-client-global {
color: var(--color-text-muted);
}
.explain-history-del {
position: absolute;
top: 4px;
right: 4px;
border: 0;
background: transparent;
color: var(--color-text-muted);
cursor: pointer;
font-size: var(--font-size-md);
line-height: 1;
padding: 2px 4px;
opacity: 0;
}
.explain-history-item:hover .explain-history-del {
opacity: 1;
}
.explain-history-del:hover {
color: var(--color-text);
}
.explain-info-btn {
border: 0;
background: transparent;
color: var(--color-text-muted);
cursor: pointer;
padding: 0;
margin-left: var(--spacing-2);
vertical-align: middle;
line-height: 0;
}
.explain-info-btn:hover {
color: var(--color-text);
}
.explain-info-btn:focus-visible {
outline: 2px solid var(--color-text);
outline-offset: 2px;
border-radius: 50%;
}
.explain-ctx-section {
margin-bottom: var(--spacing-4);
}
.explain-ctx-section:last-child {
margin-bottom: 0;
}
.explain-ctx-h {
font-weight: var(--font-weight-semibold);
font-size: var(--font-size-sm);
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--color-text-muted);
margin-bottom: var(--spacing-2);
}
.explain-artefacts {
list-style: none;
margin: 0;
padding: 0;
}
.explain-artefact {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--spacing-2);
padding: 4px 0;
border-bottom: 1px solid var(--color-border);
word-break: break-word;
}
.explain-artefact:last-child {
border-bottom: 0;
}
.explain-artefact-kind {
flex: 0 0 auto;
font-size: var(--font-size-xs);
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--color-text-muted);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
padding: 0 6px;
}
.explain-artefact-label {
font-family: var(--font-mono, monospace);
font-size: var(--font-size-sm);
}
.explain-artefact-detail {
font-size: var(--font-size-sm);
}
.explain-artefact-failed .explain-artefact-label {
text-decoration: line-through;
}
.diagnosis-pane {
word-break: break-word;
line-height: 1.55;
}
.diagnosis-pane .md-p {
margin: 0 0 var(--spacing-2);
}
.diagnosis-pane .md-p:last-child {
margin-bottom: 0;
}
.diagnosis-pane .md-h {
margin: var(--spacing-3) 0 var(--spacing-1);
font-size: var(--font-size-md);
color: var(--color-text);
}
.diagnosis-pane .md-list {
margin: 0 0 var(--spacing-2);
padding-left: var(--spacing-5);
}
.diagnosis-pane .md-list li {
margin-bottom: 2px;
}
.diagnosis-pane code {
background: var(--color-bg-hover);
color: var(--color-text);
padding: 1px 4px;
border-radius: var(--radius-sm);
font-family: monospace;
font-size: 0.92em;
}
.diagnosis-pane .md-pre {
background: var(--color-bg-hover);
color: var(--color-text);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--spacing-2) var(--spacing-3);
overflow-x: auto;
margin: 0 0 var(--spacing-2);
}
.diagnosis-pane .md-pre code {
background: none;
padding: 0;
font-size: var(--font-size-sm);
}
.diagnosis-meta {
margin-top: auto;
padding-top: var(--spacing-4);
font-size: var(--font-size-sm);
color: var(--color-text-muted);
display: flex;
align-items: center;
gap: var(--spacing-2);
}
.diagnosis-meta-info {
flex: 1;
min-width: 0;
}
.diagnosis-meta .btn {
flex: 0 0 auto;
font-size: var(--font-size-sm);
padding: 2px 8px;
}
.diagnosis-goto-connected {
text-decoration: underline;
cursor: pointer;
}
.diagnosis-goto-connected:hover {
color: var(--color-text);
}
.error-detail-content .connected-list {
margin-top: 0;
}
.connected-error-item {
padding: var(--spacing-2);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
margin-bottom: var(--spacing-2);
cursor: pointer;
font-size: var(--font-size-base);
}
.connected-error-item:hover {
background: var(--color-bg-hover);
border-color: var(--color-text-muted);
}
.error-detail-content .detail-section h4 {
font-size: var(--font-size-base);
margin-bottom: var(--spacing-2);
color: var(--color-text-muted);
}
.error-detail-content .analysis-card {
background: var(--color-bg-hover);
border-radius: var(--radius-lg);
padding: var(--spacing-3) var(--spacing-4);
margin-bottom: var(--spacing-2);
}
.error-detail-content .analysis-card h5 {
font-size: var(--font-size-sm);
color: var(--color-text-muted);
margin-bottom: var(--spacing-1);
font-weight: var(--font-weight-medium);
}
.error-detail-content .analysis-card p {
margin: 0;
font-size: var(--font-size-base);
}
.error-detail-content .occurrence-card {
background: var(--color-bg-hover);
border-radius: var(--radius-lg);
padding: var(--spacing-3) var(--spacing-4);
margin-bottom: var(--spacing-2);
}
.error-detail-content .occurrence-card .kv-table th {
width: 100px;
}
.schema-summary-bar {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-1) var(--spacing-5);
padding: var(--spacing-3) var(--spacing-4);
background: var(--color-bg-hover);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
margin-bottom: var(--spacing-3);
}
.schema-summary-item {
font-size: var(--font-size-base);
color: var(--color-text-muted);
white-space: nowrap;
}
.schema-summary-num {
font-weight: var(--font-weight-semibold);
color: var(--color-text);
font-size: var(--font-size-lg);
margin-right: var(--spacing-1);
}
.schema-expand-toggle {
display: flex;
justify-content: flex-end;
margin-bottom: var(--spacing-2);
}
.schema-list-table {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
table-layout: auto;
}
.schema-list-table thead th {
font-size: var(--font-size-xs);
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.03em;
font-weight: 600;
padding: var(--spacing-2);
border-bottom: 1px solid var(--color-border);
}
.schema-stat-header {
width: 60px;
text-align: center;
}
.schema-table-row {
cursor: pointer;
transition: background 0.15s;
}
.schema-table-row:hover {
background: var(--color-bg-hover);
}
.schema-table-name-cell {
font-weight: 500;
font-size: 0.8125rem;
font-family: var(--font-base);
padding: var(--spacing-2);
}
.schema-table-chevron {
display: inline-block;
font-size: 10px;
color: var(--color-text-muted);
transition: transform 0.2s;
width: 14px;
}
.schema-stat-cell {
text-align: center;
font-size: var(--font-size-sm);
color: var(--color-text-muted);
padding: var(--spacing-2);
font-variant-numeric: tabular-nums;
}
.schema-detail-cell {
padding: var(--spacing-3) var(--spacing-4) !important;
background: var(--color-bg-hover);
}
.schema-sub-table {
font-size: var(--font-size-sm);
margin-bottom: 0;
}
.schema-sub-table th {
font-size: var(--font-size-xs);
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.03em;
}
.schema-sub-table th,
.schema-sub-table td {
padding: var(--spacing-1) var(--spacing-2);
}
.schema-table-row.schema-added { background: rgba(34, 197, 94, 0.05); }
.schema-table-row.schema-removed { opacity: 0.7; }
.schema-table-row.schema-changed { background: rgba(245, 158, 11, 0.05); }
.subtabs {
display: flex;
align-items: center;
gap: var(--spacing-1);
padding: var(--spacing-1);
background: var(--color-bg-hover);
border-radius: var(--radius-lg);
margin-bottom: var(--spacing-4);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
}
.subtab {
padding: var(--spacing-2) var(--spacing-3);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text-muted);
cursor: pointer;
border: none;
background: transparent;
border-radius: var(--radius-md);
white-space: nowrap;
transition: color 0.15s, background 0.15s, box-shadow 0.15s;
font-family: inherit;
scroll-snap-align: start;
}
.subtab:hover {
color: var(--color-text);
}
.subtab:focus-visible {
outline: 2px solid var(--color-success);
outline-offset: -2px;
}
.subtab.active {
background: var(--color-bg-card);
color: var(--color-text);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.subtab-content {
display: none;
}
.subtab-content.active {
display: block;
}
.overview-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: var(--spacing-4);
}
.overview-card {
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--spacing-4);
animation: cardFadeIn 150ms ease both;
}
.overview-card.has-changes {
border-left: 3px solid var(--color-warning);
}
.overview-card.no-changes.dimmed {
opacity: 0.5;
transition: opacity 0.2s ease;
}
.hb-show-all-toggle {
display: inline-flex;
align-items: center;
gap: var(--spacing-1);
font-size: var(--font-size-base);
color: var(--color-text-muted);
cursor: pointer;
user-select: none;
margin-left: var(--spacing-2);
}
.hb-show-all-toggle input[type="checkbox"] {
margin: 0;
}
@keyframes cardFadeIn {
from {
opacity: 0;
transform: translateY(var(--spacing-1));
}
to {
opacity: 1;
transform: translateY(0);
}
}
.oc-header {
display: flex;
align-items: center;
gap: var(--spacing-2);
margin-bottom: var(--spacing-3);
padding-bottom: var(--spacing-3);
border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
.oc-icon {
width: 16px;
height: 16px;
flex-shrink: 0;
color: var(--color-text-muted);
}
.oc-title {
font-size: var(--font-size-xs);
font-weight: var(--font-weight-medium);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-muted);
flex: 1;
}
.sm-cwv-tag {
font-size: var(--font-size-xs);
font-weight: var(--font-weight-medium);
color: var(--color-text-muted);
background: var(--color-bg-subtle, rgba(0, 0, 0, 0.05));
border-radius: var(--radius-sm, 4px);
padding: 2px 6px;
white-space: nowrap;
flex-shrink: 0;
}
.sm-fixes-hint {
font-size: var(--font-size-xs);
color: var(--color-text-muted);
white-space: nowrap;
flex-shrink: 0;
}
.oc-title-link {
text-decoration: none;
color: inherit;
}
.oc-title-link:hover {
opacity: 0.7;
}
.oc-badge {
flex-shrink: 0;
}
.oc-hero {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
font-family: var(--font-base);
color: var(--color-text);
margin-bottom: var(--spacing-3);
line-height: 1.3;
}
.oc-details {
display: flex;
flex-direction: column;
gap: var(--spacing-1);
padding-top: var(--spacing-2);
}
.oc-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: var(--spacing-4);
font-size: var(--font-size-sm);
line-height: 1.5;
padding-bottom: var(--spacing-1);
border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}
.oc-row:last-child {
border-bottom: none;
padding-bottom: 0;
}
.oc-key {
color: var(--color-text-muted);
font-weight: var(--font-weight-normal);
flex-shrink: 0;
}
.oc-val {
color: var(--color-text);
font-family: var(--font-base);
font-size: var(--font-size-sm);
text-align: right;
word-break: break-word;
overflow-wrap: anywhere;
min-width: 0;
}
.disk-bar-wrap {
margin-top: var(--spacing-2);
}
.disk-bar-label {
display: flex;
justify-content: space-between;
font-size: var(--font-size-sm);
margin-bottom: var(--spacing-1);
}
.disk-bar-label-key {
color: var(--color-text-muted);
}
.disk-bar-label-val {
font-family: var(--font-base);
font-size: var(--font-size-base);
color: var(--color-text);
}
.disk-bar {
height: 6px;
background: var(--color-bg-hover);
border-radius: 3px;
overflow: hidden;
}
.disk-bar-fill {
height: 100%;
border-radius: 3px;
background: var(--color-success);
width: 0;
transition: width 300ms ease-out;
}
.disk-bar-fill.warn {
background: var(--color-warning);
}
.disk-bar-fill.critical {
background: var(--color-error);
}
.overview-card-wide {
grid-column: span 2;
}
@media (max-width: 640px) {
.overview-card-wide {
grid-column: span 1;
}
}
.req-summary {
font-size: var(--font-size-sm);
color: var(--color-text-muted);
margin-bottom: var(--spacing-2);
padding-bottom: var(--spacing-2);
border-bottom: 1px solid var(--color-border);
}
.req-list {
display: flex;
flex-direction: column;
gap: 1px;
}
.req-entry {
display: flex;
align-items: center;
gap: var(--spacing-2);
padding: var(--spacing-1) 0;
font-size: var(--font-size-sm);
font-family: var(--font-base);
border-bottom: 1px solid rgba(0,0,0,0.03);
}
.req-entry:last-child {
border-bottom: none;
}
.req-entry-error {
border-left: 2px solid var(--color-error);
padding-left: var(--spacing-2);
}
.req-time {
color: var(--color-text-muted);
flex-shrink: 0;
width: 60px;
font-size: var(--font-size-xs);
}
.req-method {
font-weight: var(--font-weight-semibold);
flex-shrink: 0;
width: 36px;
font-size: var(--font-size-xs);
text-transform: uppercase;
}
.req-url {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
color: var(--color-text);
}
a.req-url {
color: var(--color-text);
text-decoration: none;
}
a.req-url:hover {
text-decoration: underline;
}
.req-status {
flex-shrink: 0;
width: 28px;
text-align: right;
font-weight: var(--font-weight-semibold);
font-size: var(--font-size-xs);
}
.req-status-2xx {
color: var(--color-success);
}
.req-status-4xx {
color: var(--color-warning);
}
.req-status-5xx {
color: var(--color-error);
}
.req-errors {
color: var(--color-error);
font-size: var(--font-size-xs);
flex-shrink: 0;
width: 36px;
text-align: right;
}
.req-errors-link {
text-decoration: none;
cursor: pointer;
}
.req-errors-link:hover {
text-decoration: underline;
}
.dns-txt-value {
word-break: break-all;
font-size: var(--font-size-xs);
font-family: var(--font-base);
}
.phpinfo-section {
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
margin-bottom: var(--spacing-2);
overflow: hidden;
}
.phpinfo-section-header {
display: flex;
align-items: center;
gap: var(--spacing-2);
padding: var(--spacing-2) var(--spacing-4);
cursor: pointer;
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
color: var(--color-text);
background: var(--color-bg-hover);
border: none;
width: 100%;
text-align: left;
font-family: inherit;
}
.phpinfo-section-header:hover {
background: #ececec;
}
.phpinfo-section-header:focus-visible {
outline: 2px solid var(--color-success);
outline-offset: -2px;
}
.phpinfo-section-chevron {
font-size: var(--font-size-xs);
color: var(--color-text-muted);
transition: transform 0.2s;
}
.phpinfo-section.expanded .phpinfo-section-chevron {
transform: rotate(90deg);
}
.phpinfo-section-body {
display: none;
}
.phpinfo-section.expanded .phpinfo-section-body {
display: block;
}
.sitemap-tree-toggle {
cursor: pointer;
display: inline-block;
width: 16px;
text-align: center;
font-size: var(--font-size-xs);
color: var(--color-text-muted);
user-select: none;
}
.sitemap-tree-toggle:hover {
color: var(--color-text);
}
.sitemap-folder-row td:first-child {
font-weight: var(--font-weight-medium);
}
.table td.sitemap-tree-indent-0 { padding-left: var(--spacing-4); }
.table td.sitemap-tree-indent-1 { padding-left: 36px; }
.table td.sitemap-tree-indent-2 { padding-left: 56px; }
.table td.sitemap-tree-indent-3 { padding-left: 76px; }
.table td.sitemap-tree-indent-4 { padding-left: 96px; }
.table td.sitemap-tree-indent-5 { padding-left: 116px; }
.table td.sitemap-tree-indent-6 { padding-left: 136px; }
.table td.sitemap-tree-indent-7 { padding-left: 156px; }
.table td.sitemap-tree-indent-8 { padding-left: 176px; }
.table td.sitemap-tree-indent-9 { padding-left: 196px; }
tr[data-sm-depth="1"] > td:first-child { border-left: 2px solid rgba(0,0,0,0.06); }
tr[data-sm-depth="2"] > td:first-child { border-left: 2px solid rgba(0,0,0,0.10); }
tr[data-sm-depth="3"] > td:first-child { border-left: 2px solid rgba(0,0,0,0.14); }
tr[data-sm-depth="4"] > td:first-child { border-left: 2px solid rgba(0,0,0,0.18); }
tr[data-sm-depth="5"] > td:first-child { border-left: 2px solid rgba(0,0,0,0.22); }
tr[data-sm-depth="6"] > td:first-child { border-left: 2px solid rgba(0,0,0,0.25); }
tr[data-sm-depth="7"] > td:first-child { border-left: 2px solid rgba(0,0,0,0.28); }
tr[data-sm-depth="8"] > td:first-child { border-left: 2px solid rgba(0,0,0,0.30); }
tr[data-sm-depth="9"] > td:first-child { border-left: 2px solid rgba(0,0,0,0.32); }
.sitemap-row-click {
cursor: pointer;
}
.sitemap-row-click:hover {
background: rgba(0, 0, 0, 0.03) !important;
}
.sitemap-type-icon {
vertical-align: -3px;
flex-shrink: 0;
}
.sitemap-tree-table {
table-layout: fixed;
}
.sitemap-tree-table td:first-child {
word-break: break-all;
overflow-wrap: anywhere;
}
.sitemap-tree-table td:not(:first-child):not(:last-child) {
white-space: nowrap;
overflow: hidden;
}
.sitemap-tree-table td:last-child {
padding-right: 8px;
}
.sitemap-dl-btn svg {
vertical-align: -2px;
}
.sitemap-row-dl {
position: relative;
display: inline-flex;
align-items: center;
}
.sitemap-row-dl-btn {
background: none;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
cursor: pointer;
padding: 2px var(--spacing-2);
color: var(--color-text-muted);
display: inline-flex;
align-items: center;
justify-content: center;
transition: color 0.15s, border-color 0.15s;
line-height: 1;
}
.sitemap-row-dl-btn:hover {
color: var(--color-text);
border-color: #d1d1d1;
}
.sitemap-row-dl-btn .spinner {
width: 16px;
height: 16px;
border-width: 1.5px;
}
.sitemap-dl-dropdown {
display: none;
position: absolute;
right: 0;
left: auto;
top: 100%;
margin-top: var(--spacing-1);
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
z-index: 100;
min-width: 140px;
padding: var(--spacing-1) 0;
}
.sitemap-dl-dropdown.active {
display: block;
}
.sitemap-dl-dropdown-item {
display: block;
width: 100%;
padding: var(--spacing-2) var(--spacing-3);
font-size: var(--font-size-base);
color: var(--color-text);
background: none;
border: none;
cursor: pointer;
text-align: left;
white-space: nowrap;
font-family: inherit;
}
.sitemap-dl-dropdown-item:hover {
background: var(--color-bg-hover);
}
.sitemap-dl-progress-panel {
position: absolute;
right: 0;
top: 100%;
margin-top: 2px;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
z-index: 100;
white-space: nowrap;
padding: 3px var(--spacing-2);
font-size: var(--font-size-sm);
display: flex;
align-items: center;
gap: var(--spacing-2);
color: var(--color-text-muted);
}
.sitemap-dl-progress-panel .dl-cancel {
cursor: pointer;
text-decoration: underline;
}
.sitemap-dl-progress-panel .dl-cancel:hover {
color: var(--color-text);
}
.file-preview-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 2000;
display: flex;
align-items: center;
justify-content: center;
padding: var(--spacing-5);
}
.file-preview-panel {
background: var(--color-bg-card);
border-radius: var(--radius-xl);
border: 1px solid var(--color-border);
max-width: 90vw;
max-height: 90vh;
width: 900px;
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}
.file-preview-header {
display: flex;
align-items: center;
gap: var(--spacing-3);
padding: var(--spacing-3) var(--spacing-4);
border-bottom: 1px solid var(--color-border);
flex-shrink: 0;
}
.file-preview-header .file-preview-title {
flex: 1;
font-weight: var(--font-weight-medium);
font-size: var(--font-size-base);
color: var(--color-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-family: var(--font-base);
}
.file-preview-header .file-preview-dl-btn {
background: none;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
cursor: pointer;
padding: var(--spacing-1) var(--spacing-2);
color: var(--color-text-muted);
display: inline-flex;
align-items: center;
justify-content: center;
transition: color 0.15s, border-color 0.15s;
line-height: 1;
flex-shrink: 0;
}
.file-preview-header .file-preview-dl-btn:hover {
color: var(--color-text);
border-color: #d1d1d1;
}
.file-preview-close {
background: none;
border: none;
font-size: var(--font-size-2xl);
cursor: pointer;
color: var(--color-text-muted);
line-height: 1;
padding: var(--spacing-1);
flex-shrink: 0;
}
.file-preview-close:hover {
color: var(--color-text);
}
.file-preview-body {
flex: 1;
overflow: auto;
min-height: 0;
}
.file-preview-loading {
display: flex;
align-items: center;
justify-content: center;
padding: 60px;
}
.file-preview-error {
padding: 40px var(--spacing-5);
text-align: center;
color: var(--color-error);
font-size: var(--font-size-base);
}
.file-preview-unsupported {
padding: 40px var(--spacing-5);
text-align: center;
color: var(--color-text-muted);
font-size: var(--font-size-base);
}
.file-preview-search {
display: flex;
align-items: center;
gap: var(--spacing-2);
padding: var(--spacing-2) var(--spacing-4);
border-bottom: 1px solid var(--color-border);
background: var(--color-bg-hover);
flex-shrink: 0;
}
.file-preview-search input {
flex: 1;
padding: var(--spacing-1) var(--spacing-2);
font-size: var(--font-size-base);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
font-family: inherit;
outline: none;
}
.file-preview-search input:focus {
border-color: var(--color-success);
box-shadow: 0 0 0 2px rgba(16, 163, 127, 0.1);
}
.file-preview-search .search-count {
font-size: var(--font-size-sm);
color: var(--color-text-muted);
white-space: nowrap;
min-width: 60px;
text-align: center;
}
.file-preview-search button {
background: none;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
cursor: pointer;
padding: 3px var(--spacing-2);
font-size: var(--font-size-sm);
color: var(--color-text-muted);
line-height: 1;
}
.file-preview-search button:hover {
color: var(--color-text);
border-color: #d1d1d1;
}
.file-preview-search button:disabled {
opacity: 0.4;
cursor: default;
}
.file-preview-lines {
display: table;
width: 100%;
font-family: var(--font-base);
font-size: var(--font-size-sm);
line-height: 1.6;
}
.file-preview-line {
display: table-row;
}
.file-preview-line:hover {
background: var(--color-bg-hover);
}
.file-preview-line.preview-line-highlight,
.file-preview-line.preview-line-highlight .file-preview-gutter,
.file-preview-line.preview-line-highlight .file-preview-code {
background: #fff3bf;
}
.file-preview-line.preview-line-highlight .file-preview-gutter {
color: #92400e;
font-weight: 600;
}
.file-preview-gutter {
display: table-cell;
width: 1px;
white-space: nowrap;
padding: 0 var(--spacing-3);
text-align: right;
color: #d1d1d1;
user-select: none;
border-right: 1px solid var(--color-border);
background: #fafafa;
vertical-align: top;
}
.file-preview-code {
display: table-cell;
padding: 0 var(--spacing-4);
white-space: pre;
overflow-x: auto;
vertical-align: top;
}
.search-highlight {
background: #fef08a;
border-radius: 2px;
}
.search-highlight-current {
background: #fb923c;
color: var(--color-bg-card);
border-radius: 2px;
}
.file-preview-image {
display: flex;
align-items: center;
justify-content: center;
padding: var(--spacing-5);
}
.file-preview-image img {
max-width: 90vw;
max-height: 70vh;
object-fit: contain;
}
.sitemap-file-name {
cursor: pointer;
color: var(--color-text);
}
.sitemap-file-name:hover {
text-decoration: underline;
color: var(--color-success);
}
.sitemap-file-name.sitemap-file-empty {
cursor: default;
}
.sitemap-file-name.sitemap-file-empty:hover {
text-decoration: none;
color: var(--color-text);
}
.sitemap-view-toggle-wrap {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--spacing-2);
flex-wrap: wrap;
margin: var(--spacing-2) 0;
}
.sitemap-search {
position: relative;
display: flex;
align-items: center;
flex: 1 1 220px;
min-width: 0;
max-width: 360px;
}
.sitemap-search-input {
width: 100%;
padding: var(--spacing-1) var(--spacing-6) var(--spacing-1) var(--spacing-3);
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
color: var(--color-text);
font-family: inherit;
font-size: var(--font-size-base);
line-height: 1.5;
}
.sitemap-search-input::placeholder {
color: var(--color-text-muted);
}
.sitemap-search-input:focus {
outline: none;
border-color: var(--color-text);
}
.sitemap-search-input::-webkit-search-cancel-button,
.sitemap-search-input::-webkit-search-decoration {
-webkit-appearance: none;
appearance: none;
}
.sitemap-search-clear {
position: absolute;
right: var(--spacing-1);
top: 50%;
transform: translateY(-50%);
width: 22px;
height: 22px;
padding: 0;
border: 0;
background: transparent;
color: var(--color-text-muted);
font-size: 1.1rem;
line-height: 1;
cursor: pointer;
border-radius: var(--radius-md);
}
.sitemap-search-clear:hover {
background: var(--color-bg-hover);
color: var(--color-text);
}
.sitemap-search-clear[hidden] {
display: none;
}
.sitemap-view-toggle {
display: inline-flex;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
overflow: hidden;
}
.sitemap-view-btn {
background: transparent;
border: 0;
padding: var(--spacing-1) var(--spacing-3);
font-family: inherit;
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
line-height: 1.5;
color: var(--color-text-muted);
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease;
}
.sitemap-view-btn + .sitemap-view-btn {
border-left: 1px solid var(--color-border);
}
.sitemap-view-btn:hover {
background: var(--color-bg-hover);
color: var(--color-text);
}
.sitemap-view-btn.active,
.sitemap-view-btn.active:hover {
background: var(--color-text);
color: var(--color-bg-card);
}
.sitemap-flat-folder {
color: var(--color-text-muted);
text-decoration: none;
}
.sitemap-flat-folder:hover {
text-decoration: underline;
}
.sitemap-row-highlight > td {
animation: sitemap-row-highlight-pulse 1500ms ease-out;
}
@keyframes sitemap-row-highlight-pulse {
0%   { background-color: rgba(250, 204, 21, 0.45); }
100% { background-color: transparent; }
}
.health-stale {
font-weight: var(--font-weight-medium);
}
.digest-bell {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: var(--radius-md);
cursor: pointer;
transition: background 0.15s, color 0.15s, opacity 0.15s;
}
.digest-bell:hover {
background: #f0f0f2;
}
.digest-bell-svg {
width: 16px;
height: 16px;
}
.digest-bell-none {
color: #c5c5d2;
}
.digest-bell-daily {
color: var(--color-text);
}
.digest-bell-daily .digest-bell-svg {
fill: var(--color-text);
}
.digest-bell-weekly {
color: #c5c5d2;
}
.digest-bell-weekly .digest-bell-svg {
fill: currentColor;
}
.digest-bell-saving {
opacity: 0.5;
pointer-events: none;
}
.digest-cell {
text-align: center;
}
.clients-table .col-actions {
width: 36px;
}
.actions-cell {
text-align: center;
}
.btn-icon {
background: transparent;
border: none;
padding: 4px;
cursor: pointer;
color: var(--color-text-muted);
border-radius: 4px;
line-height: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
.btn-icon:hover {
background: var(--color-surface-hover, #f1f5f9);
}
.btn-icon-danger:hover {
color: #b91c1c;
background: #fee2e2;
}
.action-section {
margin-bottom: var(--spacing-4);
}
.action-section:last-child {
margin-bottom: 0;
}
.notif-table {
margin-bottom: 0;
table-layout: fixed;
}
.notif-table th,
.notif-table td {
padding: var(--spacing-2) var(--spacing-2);
}
.notif-table th:first-child,
.notif-table td:first-child {
width: 60%;
word-break: break-word;
}
.notif-table th:nth-child(3),
.notif-table td:nth-child(3) {
width: 52px;
text-align: right;
}
.notif-digest-select,
.notif-custom-digest-select,
#notifCustomFreqSelect {
height: 36px;
padding: var(--spacing-1) var(--spacing-2);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
font-size: var(--font-size-base);
background: var(--color-bg-card);
cursor: pointer;
box-sizing: border-box;
}
#notifCustomFreqSelect {
width: auto;
display: inline-block;
}
.notif-digest-select:disabled,
.notif-custom-digest-select:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.notif-custom-label {
font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold);
margin-bottom: var(--spacing-2);
}
.notif-custom-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--spacing-1) var(--spacing-2);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
margin-bottom: var(--spacing-1);
font-size: var(--font-size-md);
}
.notif-remove-btn {
padding: 2px var(--spacing-2);
font-size: var(--font-size-lg);
line-height: 1;
min-width: auto;
}
.notif-email-input {
flex: 1;
padding: var(--spacing-2) var(--spacing-2);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
font-size: var(--font-size-md);
}
.notif-add-row .flex {
max-width: 400px;
}
@media (max-width: 768px) {
.sidebar {
transform: translateX(-100%);
}
.sidebar.open {
transform: translateX(0);
}
.main-content {
margin-left: 0;
}
.sidebar-toggle {
display: block;
}
.content-area {
padding: var(--spacing-4);
}
.clients-filter-bar {
flex-direction: column;
align-items: stretch;
}
.filter-search,
.filter-select {
width: 100%;
}
.flash {
margin: 0 var(--spacing-4);
}
.auth-card {
padding: var(--spacing-5);
}
.table th,
.table td {
padding: var(--spacing-2) var(--spacing-2);
}
.compare-selectors {
flex-direction: column;
}
.compare-vs {
text-align: center;
padding: 0;
}
.tabs {
overflow-x: auto;
}
.client-meta-strip {
gap: var(--spacing-1) var(--spacing-4);
}
.subtabs {
gap: 2px;
padding: 3px;
}
.subtab {
padding: var(--spacing-1) var(--spacing-2);
font-size: var(--font-size-xs);
}
.overview-grid {
grid-template-columns: 1fr;
gap: var(--spacing-3);
}
.overview-card {
padding: var(--spacing-4);
}
.file-preview-overlay {
padding: var(--spacing-2);
}
.file-preview-panel {
max-width: 100vw;
max-height: 100vh;
width: 100%;
border-radius: var(--radius-lg);
}
.client-summary-card {
padding: var(--spacing-4);
}
.client-summary-grid {
grid-template-columns: 1fr 1fr;
gap: var(--spacing-4);
}
.page-header {
margin-bottom: var(--spacing-4);
}
}
.page-header {
margin-bottom: var(--spacing-6);
}
.back-link {
display: inline-block;
color: var(--color-text-muted);
font-size: var(--font-size-sm);
margin-bottom: var(--spacing-2);
transition: color 0.15s ease;
}
.back-link:hover {
color: var(--color-text);
text-decoration: none;
}
.back-link:focus-visible {
outline: 2px solid var(--color-text);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
.client-summary-card {
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--spacing-5);
margin-bottom: var(--spacing-5);
}
.client-summary-status {
display: flex;
align-items: center;
gap: var(--spacing-3);
margin-bottom: var(--spacing-4);
}
.client-summary-domain {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-semibold);
margin: 0;
}
.client-summary-link {
display: inline-flex;
align-items: center;
margin-left: var(--spacing-2);
color: var(--color-text-muted);
opacity: 0.5;
transition: opacity 0.15s;
vertical-align: middle;
}
.client-summary-link:hover {
opacity: 1;
color: var(--color-text);
}
.client-summary-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: var(--spacing-5);
}
.client-summary-item {
display: flex;
flex-direction: column;
gap: var(--spacing-1);
}
.client-summary-label {
font-size: var(--font-size-sm);
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.025em;
font-weight: var(--font-weight-medium);
}
.client-summary-value {
font-size: var(--font-size-base);
color: var(--color-text);
font-weight: var(--font-weight-medium);
}
.client-summary-item-link {
background: none;
border: none;
padding: 0;
margin: 0;
font: inherit;
text-align: left;
cursor: pointer;
}
.client-summary-item-link:hover .client-summary-value {
text-decoration: underline;
}
.client-summary-item-link:focus-visible {
outline: 2px solid var(--color-text);
outline-offset: 2px;
}
.conn-inline { display: inline-block; vertical-align: middle; }
.conn-inline .conn-status { display: inline-flex; }
.conn-card-rows { margin-top: 0; }
.conn-highlight { outline: 2px solid var(--color-warning); outline-offset: 2px; transition: outline-color 0.3s; }
.conn-status {
display: flex;
align-items: center;
gap: var(--spacing-2);
flex-wrap: wrap;
}
.conn-icon {
display: inline-block;
width: 1.1em;
text-align: center;
font-weight: var(--font-weight-semibold);
}
.conn-ok .conn-icon { color: var(--color-success); }
.conn-warn .conn-icon { color: var(--color-warning); }
.conn-bad .conn-icon { color: var(--color-error); }
.conn-pending .conn-icon, .conn-neutral .conn-icon, .conn-unknown .conn-icon { color: var(--color-text-muted); }
.conn-unknown .conn-text { color: var(--color-text-muted); }
.conn-current {
font-size: var(--font-size-xs, 0.75rem);
color: var(--color-text-muted);
}
.conn-detail {
margin-top: var(--spacing-1);
font-size: var(--font-size-sm);
color: var(--color-text-muted);
word-break: break-word;
}
.conn-details summary {
cursor: pointer;
font-size: var(--font-size-sm);
color: var(--color-text-muted);
}
.conn-details ul {
margin: var(--spacing-1) 0 0 var(--spacing-4);
font-size: var(--font-size-sm);
}
.conn-details pre {
margin: var(--spacing-2) 0 0;
padding: var(--spacing-2) var(--spacing-3);
background: var(--color-bg-hover);
border: 1px solid var(--color-border);
border-radius: var(--radius-md, 6px);
overflow-x: auto;
font-size: var(--font-size-sm);
}
.tab-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 var(--spacing-1);
background: var(--color-error);
color: white;
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
border-radius: 9px;
margin-left: var(--spacing-1);
}
.tab-badge-warning {
background: var(--color-warning);
}
.sm-metrics-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 var(--spacing-1);
background: var(--color-bg-hover);
color: var(--color-text);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
border-radius: 10px;
}
.sm-metrics-badge--up {
background: #fef2f2;
color: #b91c1c;
}
.sm-metrics-badge--down {
background: #ecfdf5;
color: #065f46;
}
.sm-metrics-badge--same {
background: var(--color-bg-hover);
color: var(--color-text);
}
.hb-subtabs {
display: flex;
flex-direction: column;
}
.hb-subtab-bar {
display: flex;
gap: var(--spacing-1);
border-bottom: 1px solid var(--color-border);
margin-bottom: var(--spacing-4);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.hb-subtab {
padding: var(--spacing-2) var(--spacing-3);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-normal);
color: var(--color-text-muted);
background: none;
border: none;
border-bottom: 2px solid transparent;
cursor: pointer;
transition: color 0.15s ease, border-color 0.15s ease;
white-space: nowrap;
}
.hb-subtab:hover {
color: var(--color-text);
}
.hb-subtab.active {
color: var(--color-text);
border-bottom-color: var(--color-text);
font-weight: var(--font-weight-semibold);
}
.hb-subtab:focus-visible {
outline: 2px solid var(--color-text);
outline-offset: 2px;
}
.hb-subtab-content {
padding-top: var(--spacing-4);
}
.sm-sections {
display: flex;
flex-direction: column;
}
.sm-section + .sm-section {
margin-top: var(--spacing-6);
padding-top: var(--spacing-6);
border-top: 1px solid var(--color-border);
}
.sm-override-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-2);
padding: var(--spacing-2) 0;
border-bottom: 1px solid var(--color-border);
}
.sm-override-row:last-child {
border-bottom: none;
}
.sm-kpi-grid {
margin-bottom: var(--spacing-4);
}
.sm-scores-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-4);
margin-bottom: var(--spacing-4);
}
@media (max-width: 768px) {
.sm-scores-grid {
grid-template-columns: repeat(2, 1fr);
}
}
.sm-kpi-card {
display: flex;
flex-direction: column;
border-left: 3px solid transparent;
}
.sm-kpi-card.sm-band-good { border-left-color: var(--color-success); }
.sm-kpi-card.sm-band-ni { border-left-color: var(--color-warning); }
.sm-kpi-card.sm-band-poor { border-left-color: var(--color-error); }
.sm-kpi-card.sm-band-neutral { border-left-color: var(--color-text-muted); }
.sm-kpi-card[data-sm-card] {
cursor: pointer;
}
.sm-kpi-card[data-sm-card]:focus-visible {
outline: 2px solid var(--color-success);
outline-offset: 2px;
}
.sm-kpi-card[data-sm-card]:focus:not(:focus-visible) {
outline: none;
}
.sm-status-label {
display: inline-flex;
align-items: center;
gap: var(--spacing-1);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text);
}
.sm-status-icon {
width: 14px;
height: 14px;
flex-shrink: 0;
}
.sm-scores-device .sm-status-label {
white-space: nowrap;
font-size: var(--font-size-xs);
}
.sm-status-label.sm-band-good .sm-status-icon-bg { fill: var(--color-success); }
.sm-status-label.sm-band-ni .sm-status-icon-bg { fill: var(--color-warning); }
.sm-status-label.sm-band-poor .sm-status-icon-bg { fill: var(--color-error); }
.sm-status-label.sm-band-neutral .sm-status-icon-bg { fill: var(--color-text-muted); }
.sm-gauge-wrap {
display: flex;
justify-content: center;
margin-bottom: var(--spacing-2);
}
.sm-gauge {
width: 96px;
height: 96px;
}
.sm-gauge-bg {
fill: none;
stroke: var(--color-border);
stroke-width: 2.8;
}
.sm-gauge-fill {
fill: none;
stroke-width: 2.8;
stroke-linecap: round;
transition: stroke-dasharray 300ms ease-out;
}
.sm-gauge.sm-band-good .sm-gauge-fill { stroke: var(--color-success); }
.sm-gauge.sm-band-ni .sm-gauge-fill { stroke: var(--color-warning); }
.sm-gauge.sm-band-poor .sm-gauge-fill { stroke: var(--color-error); }
.sm-gauge.sm-band-neutral .sm-gauge-fill { stroke: var(--color-text-muted); }
.sm-gauge-text {
font-size: 10px;
font-weight: var(--font-weight-semibold);
font-family: var(--font-base);
fill: var(--color-text);
text-anchor: middle;
}
.sm-combo-grid {
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
}
.sm-combo-row {
padding: var(--spacing-2) 0;
}
.sm-combo-row + .sm-combo-row {
border-top: 1px solid var(--color-border);
margin-top: var(--spacing-1);
}
.sm-combo-row-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-2);
margin-bottom: var(--spacing-1);
}
.sm-combo-row-device {
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-text-muted);
}
.sm-combo-row-value {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
color: var(--color-text);
line-height: 1.3;
}
.sm-combo-row-lab {
margin-top: 2px;
}
.sm-combo-legend {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-1) var(--spacing-4);
margin: 0 0 var(--spacing-3);
}
.sm-combo-legend-item {
display: inline-flex;
align-items: center;
gap: var(--spacing-1);
}
.sm-scale-marker-legend {
font-size: 11px;
line-height: 1;
color: var(--color-text);
}
.sm-combo-scale {
position: relative;
padding: 12px 0;
margin-top: var(--spacing-2);
}
.sm-scale-bar {
position: relative;
display: flex;
width: 100%;
height: 6px;
border-radius: 3px;
overflow: visible;
}
.sm-scale-seg {
height: 100%;
}
.sm-scale-seg:first-child {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.sm-scale-seg:last-child {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.sm-scale-seg-good { background: var(--color-success); }
.sm-scale-seg-ni { background: var(--color-warning); }
.sm-scale-seg-poor { background: var(--color-error); }
.sm-scale-marker {
position: absolute;
left: 0;
font-size: 11px;
line-height: 1;
color: var(--color-text);
transform: translateX(-50%);
pointer-events: none;
}
.sm-scale-marker-real {
top: -13px;
}
.sm-scale-marker-lab {
bottom: -13px;
}
.sm-scale-marker-clamped {
font-size: 15px;
font-weight: var(--font-weight-semibold);
}
.sm-scores-pair {
display: flex;
gap: var(--spacing-4);
}
.sm-scores-device {
flex: 1;
min-width: 0;
text-align: center;
}
.sm-scores-device-label {
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-text-muted);
margin-bottom: var(--spacing-1);
}
.sm-scores-opportunities {
margin-top: var(--spacing-2);
}
.sm-scores-opportunities + .sm-scores-opportunities {
margin-top: var(--spacing-3);
}
.sm-security-summary {
text-align: center;
margin: var(--spacing-1) 0 0;
}
.sm-align-spacer {
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: var(--spacing-1);
visibility: hidden;
}
.sm-scores-align-box {
height: 96px;
margin-bottom: var(--spacing-2);
display: flex;
align-items: center;
justify-content: center;
}
.sm-scores-align-box .oc-hero {
margin-bottom: 0;
text-align: center;
}
.sm-security-card .sm-status-label,
.sm-margin-card .sm-status-label {
justify-content: center;
}
.sm-wrap-anywhere {
overflow-wrap: anywhere;
word-break: break-word;
}
.form-group input[type="number"].sm-days-input {
width: 80px;
}
.form-group input[type="password"].sm-key-input {
flex: 1;
max-width: 420px;
}
.sm-section-title {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
margin: var(--spacing-4) 0 var(--spacing-2);
}
.sm-section-title:first-child {
margin-top: 0;
}
.sm-section-intro {
margin: 0 0 var(--spacing-3);
}
#smCardDetailModal .modal {
display: flex;
flex-direction: column;
}
#smCardDetailModal .modal-header {
position: sticky;
top: 0;
z-index: 1;
background: var(--color-bg-card);
flex-shrink: 0;
align-items: flex-start;
}
#smCardDetailModal .modal-body {
overflow-y: auto;
}
.sm-overlay-header-text {
min-width: 0;
}
.sm-overlay-subtitle {
margin: var(--spacing-1) 0 0;
font-size: var(--font-size-sm);
}
.sm-measured-url {
font-size: var(--font-size-xs);
margin: var(--spacing-1) 0 0;
}
#smCardDetailModal .sm-measured-url + :not(.sm-measured-url) {
margin-top: 1em;
}
#smCardDetailModal .sm-overlay-summary:has(+ .sm-measured-url) {
margin-bottom: 6px;
}
.sm-overlay-summary {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-4);
margin-bottom: var(--spacing-4);
padding-bottom: var(--spacing-4);
border-bottom: 1px solid var(--color-border);
}
@media (max-width: 768px) {
.sm-overlay-summary {
grid-template-columns: 1fr;
}
}
.sm-overlay-summary-col {
min-width: 0;
}
.sm-distribution-bar {
display: flex;
width: 100%;
height: 6px;
border-radius: 3px;
overflow: hidden;
margin-top: var(--spacing-2);
}
.sm-history-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-4);
}
@media (max-width: 768px) {
.sm-history-grid {
grid-template-columns: 1fr;
}
}
.sm-history-chart-title {
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-text-muted);
margin-bottom: var(--spacing-2);
}
.sm-audit-entry {
padding: var(--spacing-2) 0;
border-bottom: 1px solid var(--color-border);
}
.sm-audit-entry:last-child {
border-bottom: none;
}
.sm-audit-entry summary {
cursor: pointer;
}
.sm-audit-entry summary:focus-visible {
outline: 2px solid var(--color-success);
outline-offset: 2px;
}
.sm-audit-entry summary.sm-audit-row-head {
list-style: none;
}
.sm-audit-entry summary.sm-audit-row-head::-webkit-details-marker {
display: none;
}
.sm-audit-entry summary.sm-audit-row-head::before {
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 4px 0 4px 6px;
border-color: transparent transparent transparent var(--color-text-muted);
flex-shrink: 0;
align-self: center;
}
.sm-audit-entry[open] > summary.sm-audit-row-head::before {
border-width: 6px 4px 0 4px;
border-color: var(--color-text-muted) transparent transparent transparent;
}
.sm-audit-entry-body {
margin-top: var(--spacing-2);
padding-left: var(--spacing-3);
}
.sm-audit-row-head {
display: flex;
align-items: baseline;
gap: var(--spacing-2);
}
.sm-savings-badges {
margin-left: auto;
flex-shrink: 0;
white-space: nowrap;
}
.sm-audit-items {
list-style: none;
margin: var(--spacing-2) 0 0;
padding: 0;
}
.sm-audit-items li {
padding: var(--spacing-1) 0;
margin: 0;
}
.sm-audit-items li + li {
border-top: 1px solid var(--color-border);
}
#smCardDetailModal .text-sm-tight {
line-height: inherit;
white-space: normal;
}
#smCardDetailModal .modal-body p + p {
margin-top: var(--spacing-1);
}
#smCardDetailModal code {
overflow-wrap: anywhere;
word-break: break-word;
}
.sm-psi-failed {
font-style: italic;
}
.settings-saved-indicator {
color: var(--color-success);
font-size: var(--font-size-sm);
transition: opacity 0.4s ease;
}
.settings-inline-error {
color: var(--color-error);
font-size: var(--font-size-sm);
margin-top: var(--spacing-1);
}
.error-types-group-header {
display: block;
font-weight: var(--font-weight-semibold);
margin-bottom: var(--spacing-1);
}
.error-types-members {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-1) var(--spacing-4);
margin-left: var(--spacing-5);
}
.error-types-member {
display: inline-flex;
align-items: center;
gap: var(--spacing-1);
font-family: var(--font-mono, monospace);
font-size: var(--font-size-sm);
}
.settings-section {
margin-bottom: var(--spacing-4);
}
.settings-section:last-child {
margin-bottom: 0;
}
.settings-section-title {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
margin-bottom: var(--spacing-3);
}
.ai-spend-table {
width: 100%;
margin-top: var(--spacing-2);
border-collapse: collapse;
font-size: var(--font-size-sm);
}
.ai-spend-table th,
.ai-spend-table td {
padding: var(--spacing-1) 0;
text-align: right;
}
.ai-spend-table th:first-child,
.ai-spend-table td:first-child {
text-align: left;
font-weight: var(--font-weight-normal);
}
.ai-spend-head th {
font-weight: var(--font-weight-medium);
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
white-space: nowrap;
border-bottom: 1px solid var(--color-border);
}
.ai-spend-ranges {
display: flex;
gap: var(--spacing-1);
margin-top: var(--spacing-4);
border-bottom: 1px solid var(--color-border);
}
.ai-spend-range {
padding: var(--spacing-2) var(--spacing-3);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-normal);
color: var(--color-text-muted);
background: none;
border: none;
border-bottom: 2px solid transparent;
cursor: pointer;
transition: color 0.15s ease, border-color 0.15s ease;
white-space: nowrap;
}
.ai-spend-range:hover {
color: var(--color-text);
}
.ai-spend-range.active {
color: var(--color-text);
border-bottom-color: var(--color-text);
font-weight: var(--font-weight-semibold);
}
.ai-spend-range:focus-visible {
outline: 2px solid var(--color-text);
outline-offset: 2px;
}
.ai-spend-sum th,
.ai-spend-sum td,
.ai-spend-sum th:first-child {
border-top: 1px solid var(--color-border);
font-weight: var(--font-weight-semibold);
}
.m-0 { margin: 0; }
.p-0 { padding: 0; }
.relative { position: relative; }
.text-xs { font-size: var(--font-size-sm); }
.text-sm-tight { font-size: var(--font-size-base); white-space: nowrap; line-height: 1; }
.col-error-date { width: 140px; }
.col-error-level { width: 80px; }
.col-error-count { width: 50px; }
.req-error-type { margin: 0 4px 2px 0; }
.col-error-client { width: 180px; }
.col-error-actions { width: 40px; text-align: center; }
.icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
padding: 0;
border: 1px solid transparent;
border-radius: var(--radius-md);
background: transparent;
color: var(--color-text-muted);
cursor: pointer;
transition: all 0.15s ease;
}
.icon-btn:hover { background: var(--color-bg-hover); }
.error-hide-btn:hover { color: var(--color-error); }
.error-recover-btn { color: var(--color-success, #10a37f); }
.error-recover-btn:hover { color: var(--color-success, #10a37f); background: var(--color-bg-hover); }
.error-row-hidden > td { opacity: 0.5; }
.error-row-hidden > td.col-error-actions { opacity: 1; }
.all-error-client-link { color: inherit; text-decoration: none; }
.all-error-client-link:hover { text-decoration: underline; }
.all-errors-cap-notice {
padding: 8px 12px;
margin-bottom: 12px;
background: #fffbeb;
color: #92400e;
border: 1px solid #fde68a;
border-radius: var(--radius-sm);
font-size: 0.8125rem;
}
.all-errors-skipped-notice {
padding: 8px 12px;
margin-bottom: 12px;
background: #fef2f2;
color: #991b1b;
border: 1px solid #fecaca;
border-radius: var(--radius-sm);
font-size: 0.8125rem;
}
.errors-partial-fold-notice,
.all-errors-partial-fold-notice {
padding: 8px 12px;
margin-bottom: 12px;
background: #fffbeb;
color: #92400e;
border: 1px solid #fde68a;
border-radius: var(--radius-sm);
font-size: 0.8125rem;
}
.db-conn-select { width: auto; min-width: 220px; max-width: 320px; padding-right: 28px; height: 36px; box-sizing: border-box; }
#dbSettingsBtn { height: 36px; width: 36px; padding: 0; }
#tab-db .flex-between { row-gap: var(--spacing-2); }
@media (max-width: 640px) {
#tab-db .flex-between { flex-wrap: wrap; }
}
.db-conn-delete-btn {
position: absolute;
right: 2px;
top: 50%;
transform: translateY(-50%);
padding: 0 4px;
background: none;
border: none;
color: var(--color-error);
font-size: var(--font-size-xl);
line-height: 1;
}
.db-remember-label {
display: flex;
align-items: center;
gap: 4px;
white-space: nowrap;
margin: 0;
font-weight: normal;
}
.db-form-actions { display: flex; gap: 4px; flex-wrap: wrap; }
#dbConnFields .db-form-actions { min-width: auto; }
.db-form-group { display: flex; gap: 8px; align-items: center; }
.settings-ref-hint {
font-size: var(--font-size-sm);
display: none;
}
.settings-active-endpoint {
display: flex;
flex-direction: column;
gap: var(--spacing-1);
padding: var(--spacing-3);
background: var(--color-bg-page);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
}
.settings-active-endpoint-row {
display: flex;
align-items: baseline;
gap: var(--spacing-2);
flex-wrap: wrap;
}
.settings-active-endpoint-label {
font-size: var(--font-size-sm);
white-space: nowrap;
}
.settings-active-endpoint-url {
font-size: var(--font-size-sm);
word-break: break-all;
}
.settings-active-endpoint-value {
font-size: var(--font-size-sm);
word-break: break-all;
}
.notif-section-mt { margin-top: var(--spacing-3); }
.notif-error-hint { font-size: var(--font-size-base); margin-top: var(--spacing-1); }
.chart-wrap {
margin-top: var(--spacing-3);
margin-bottom: var(--spacing-3);
overflow: hidden;
border-radius: var(--radius-sm);
}
.chart-container {
position: relative;
width: 100%;
height: 160px;
margin-bottom: var(--spacing-2);
}
.chart-container-lg {
height: 200px;
}
#fileCountChartCard {
display: flex;
flex-direction: column;
}
#fileCountChartCard .chart-container {
flex: 1;
height: auto;
min-height: 250px;
}
#fileCountCanvas svg {
min-height: 180px;
}
.chart-empty {
display: flex;
align-items: center;
justify-content: center;
height: 160px;
color: var(--color-text-muted);
font-size: var(--font-size-sm);
}
.charts-row {
display: flex;
gap: var(--spacing-3);
margin-bottom: var(--spacing-3);
}
.charts-row > div {
flex: 1;
min-width: 0;
}
.css-bar-chart {
width: 100%;
}
.css-bar-chart-bars {
display: flex;
align-items: flex-end;
gap: 2px;
height: 120px;
}
.css-bar-col {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
min-width: 0;
height: 100%;
}
.css-bar-stack {
flex: 1;
width: 100%;
display: flex;
flex-direction: column-reverse;
align-items: stretch;
cursor: default;
}
.css-bar-segment {
width: 100%;
min-height: 1px;
transition: opacity 0.1s;
}
.css-bar-segment:hover {
opacity: 0.8;
}
.css-bar-label {
font-size: 10px;
color: var(--color-text-muted);
margin-top: 3px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
text-align: center;
}
.css-bar-legend {
display: flex;
gap: var(--spacing-3);
margin-top: var(--spacing-2);
flex-wrap: wrap;
}
.css-bar-legend-item {
display: flex;
align-items: center;
gap: 4px;
font-size: 11px;
color: var(--color-text-muted);
}
.css-bar-legend-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.fleet-health-bar {
margin-bottom: var(--spacing-2);
}
.fleet-health-bar-wrap {
display: flex;
align-items: center;
gap: var(--spacing-2);
padding: var(--spacing-2);
background: var(--color-bg-card);
border-radius: var(--radius-md);
}
.fleet-health-bar-label {
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--color-text);
min-width: 80px;
}
.fleet-health-bar-container {
flex: 1;
height: 8px;
background: var(--color-border);
border-radius: 4px;
overflow: hidden;
display: flex;
}
.fleet-health-segment {
height: 100%;
transition: width 0.3s ease;
}
.fleet-health-segment.healthy {
background: var(--color-success);
}
.fleet-health-segment.warning {
background: var(--color-warning);
}
.fleet-health-segment.error {
background: var(--color-error);
}
.fleet-health-legend {
display: flex;
gap: var(--spacing-3);
align-items: center;
font-size: var(--font-size-sm);
}
.fleet-health-legend-item {
display: flex;
align-items: center;
gap: var(--spacing-1);
}
.fleet-health-legend-dot {
width: 8px;
height: 8px;
border-radius: 50%;
}
.fleet-health-legend-dot.healthy {
background: var(--color-success);
}
.fleet-health-legend-dot.warning {
background: var(--color-warning);
}
.fleet-health-legend-dot.error {
background: var(--color-error);
}
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.overview-card {
animation: none;
}
.disk-bar-fill {
transition: none;
}
}
#requestsTable .row-error {
background: rgba(239, 68, 68, 0.05);
}
#requestsTable .row-error:hover {
background: rgba(239, 68, 68, 0.1);
}
.cron-jobs-list {
display: flex;
flex-direction: column;
gap: var(--spacing-4);
}
.cron-job-row {
display: flex;
flex-direction: column;
gap: var(--spacing-2);
padding: var(--spacing-3) 0;
border-top: 1px solid var(--color-border);
}
.cron-job-row:first-child {
border-top: 0;
padding-top: 0;
}
.cron-job-header {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--spacing-3);
flex-wrap: wrap;
}
.cron-job-title {
display: flex;
align-items: center;
gap: var(--spacing-2);
}
.cron-job-label {
font-weight: var(--font-weight-medium);
}
.cron-job-status {
font-size: var(--font-size-sm);
}
.cron-job-meta {
font-size: var(--font-size-sm);
cursor: help;
}
.cron-job-description {
font-size: var(--font-size-sm);
}
.cron-job-command-row {
display: flex;
align-items: stretch;
gap: var(--spacing-2);
}
.cron-job-command {
flex: 1;
min-width: 0;
}
.cron-job-error {
font-size: var(--font-size-sm);
}
body.no-file-preview .preview-single-file,
body.no-file-preview .download-single-file,
body.no-file-preview .preview-trace-file,
body.no-file-preview .download-trace-file,
body.no-file-preview .download-all-included-files,
body.no-file-preview .sitemap-dl-btn,
body.no-file-preview .sitemap-row-dl,
body.no-file-preview .sitemap-row-dl-btn,
body.no-file-preview #filePreviewDownload,
body.no-file-preview #errorPreviewFile,
body.no-file-preview #errorDownloadFiles {
display: none !important;
}
.risk-badge {
display: inline-block;
padding: 1px 8px;
border-radius: 10px;
font-size: var(--font-size-xs, 0.75rem);
font-weight: var(--font-weight-semibold, 600);
text-transform: capitalize;
}
.risk-sev-critical { background: rgba(198, 40, 40, 0.14); color: var(--color-danger, #c62828); }
.risk-sev-high     { background: rgba(230, 126, 0, 0.15); color: #b45309; }
.risk-sev-medium   { background: var(--color-bg-hover, #f1f1f1); color: var(--color-text, #222); }
.risk-sev-low,
.risk-sev-info     { background: var(--color-bg-hover, #f1f1f1); color: var(--color-text-muted, #666); }
.risk-when, .risk-actions { white-space: nowrap; }
.risk-title { cursor: pointer; }
.risk-title:hover { text-decoration: underline; }
.risk-status {
display: inline-block;
margin-left: 6px;
padding: 0 6px;
border-radius: 8px;
font-size: var(--font-size-xs, 0.7rem);
border: 1px solid var(--color-border, #ddd);
color: var(--color-text-muted, #666);
text-transform: capitalize;
}
.risk-ai { margin-left: 6px; font-size: var(--font-size-xs, 0.7rem); color: var(--color-text-muted, #666); }
.risk-diag-cell { white-space: nowrap; }
.risk-diag {
display: inline-block;
padding: 1px 8px;
border-radius: 10px;
font-size: var(--font-size-xs, 0.75rem);
font-weight: var(--font-weight-semibold, 600);
white-space: nowrap;
}
.risk-diag-done    { background: rgba(16, 163, 127, 0.14); color: #2e7d32; }
.risk-diag-pending { background: var(--color-bg-hover, #f1f1f1); color: var(--color-text-muted, #666); }
.risk-detail-head  { margin-bottom: 8px; }
.risk-detail-label { font-weight: var(--font-weight-semibold, 600); font-size: var(--font-size-sm, 0.875rem); margin: 10px 0 2px; }
.risk-match-table { margin: 4px 0 6px; }
.risk-match-table th, .risk-match-table td { vertical-align: top; }
.risk-match-fn { font-size: var(--font-size-xs, 0.75rem); background: var(--color-bg-card, #fff); border: 1px solid var(--color-border, #e5e5e5); }
.risk-row-dismissed > td { opacity: 0.5; }
.risk-detail-row > td { background: var(--color-bg-subtle, #fafafa); }
.risk-evidence { margin: 4px 0 6px; padding-left: 18px; font-size: var(--font-size-sm, 0.875rem); }
.risk-evidence li { margin-bottom: 2px; }
.risk-evidence a {
color: var(--color-success);
text-decoration: underline;
}
.risk-evidence a:hover {
text-decoration: none;
}
.risk-match-dir { color: var(--color-text-muted); }
.risk-fix { margin-top: 8px; font-size: var(--font-size-sm, 0.875rem); }
.risk-fix .md-p { margin: 0 0 6px; }
.risk-fix .md-p:last-child { margin-bottom: 0; }
.risk-fix .md-list { margin: 4px 0 6px; padding-left: 18px; }
.risk-fix .md-list li { margin-bottom: 2px; }
.risk-fix code { background: var(--color-bg-card, #fff); border: 1px solid var(--color-border, #e5e5e5); }
.risk-fix pre code { background: none; border: 0; }
.risk-fix-label { font-weight: var(--font-weight-semibold, 600); font-size: var(--font-size-sm, 0.875rem); margin-bottom: 2px; }
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-4);
}
@media (max-width: 640px) {
.form-row { grid-template-columns: 1fr; }
}
.text-sm {
font-size: var(--font-size-sm);
}
.agent-card {
cursor: pointer;
transition: border-color 120ms ease, transform 120ms ease;
position: relative;
}
.agent-card-grip {
position: absolute;
bottom: var(--spacing-2);
right: var(--spacing-2);
cursor: grab;
color: var(--color-text-muted);
opacity: 0.35;
line-height: 1;
letter-spacing: -0.18em;
padding: 2px 4px;
border-radius: var(--radius-sm);
transition: opacity 120ms ease;
}
.agent-card:hover .agent-card-grip,
.agent-card-grip:hover,
.agent-card-grip:focus-visible {
opacity: 1;
}
.agent-card-grip:active {
cursor: grabbing;
}
.agent-card-dragging {
display: none;
}
.agent-card-placeholder {
border: 1px dashed var(--color-text-muted);
border-radius: var(--radius-lg);
background: var(--color-bg-hover);
opacity: 0.7;
}
body.agent-dragging .agent-card:hover {
transform: none;
}
.agent-card:hover,
.agent-card:focus-visible {
border-color: var(--color-text-muted);
transform: translateY(-1px);
}
.agent-card-off .agent-card-name {
color: var(--color-text-muted);
}
.agent-card-off .agent-card-role,
.agent-card-off .agent-card-address,
.agent-card-off .agent-card-desc {
opacity: 0.75;
}
.agent-card-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--spacing-2);
}
.agent-card-name {
margin: 0;
font-size: var(--font-size-lg);
}
.agent-card-model {
flex-shrink: 0;
max-width: 45%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.agent-card-address {
display: block;
margin: var(--spacing-1) 0 var(--spacing-2);
font-size: var(--font-size-sm);
color: var(--color-text-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.agent-card-desc {
margin: 0 0 var(--spacing-2);
color: var(--color-text-muted);
font-size: var(--font-size-sm);
}
.agent-card-tags {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-1);
}
.agent-tool-groups {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: var(--spacing-3);
}
.agent-tool-group strong {
display: block;
margin-bottom: var(--spacing-1);
font-size: var(--font-size-sm);
color: var(--color-text-muted);
}
.agent-client-list {
max-height: 200px;
overflow-y: auto;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--spacing-2);
}
.adv-section {
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
overflow: hidden;
}
.adv-section-header {
display: flex;
align-items: center;
gap: var(--spacing-2);
width: 100%;
padding: var(--spacing-2) var(--spacing-4);
border: none;
text-align: left;
font-family: inherit;
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
color: var(--color-text);
background: var(--color-bg-hover);
cursor: pointer;
}
.adv-section-header:hover {
background: var(--color-border);
}
.adv-section-header:focus-visible {
outline: 2px solid var(--color-success);
outline-offset: -2px;
}
.adv-section-chevron {
font-size: var(--font-size-xs);
color: var(--color-text-muted);
transition: transform 0.2s;
}
.adv-section.expanded .adv-section-chevron {
transform: rotate(90deg);
}
.adv-section-body {
display: none;
padding: var(--spacing-4);
border-top: 1px solid var(--color-border);
}
.adv-section.expanded .adv-section-body {
display: block;
}
.mailbox-add-sender {
margin-bottom: var(--spacing-5);
}
.mailbox-add-sender label {
display: block;
margin-bottom: var(--spacing-2);
font-size: var(--font-size-sm);
color: var(--color-text-muted);
}
.mailbox-add-sender .form-control {
flex: 1;
min-width: 0;
}
.agent-sender-toggle {
border: none;
font-family: inherit;
cursor: pointer;
}
.agent-sender-toggle:hover {
filter: brightness(0.92);
}
.agent-sender-toggle:focus-visible {
outline: 2px solid var(--color-success);
outline-offset: 1px;
}
.agent-sender-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-3);
padding: var(--spacing-2) 0;
border-bottom: 1px solid var(--color-border);
}
.agent-sender-row:last-child {
border-bottom: none;
}
.agent-card-general {
border-left: 3px solid var(--color-success);
}
#agentsDefaultsNote {
margin: 0 0 var(--spacing-5);
max-width: 70ch;
}
#agentsGrid {
margin-top: var(--spacing-4);
}
.agent-queue-modal {
max-width: 1100px;
width: 95vw;
}
.agent-queue-modal .table-wrap {
overflow-x: auto;
max-height: 55vh;
overflow-y: auto;
}
.agent-queue-modal th[data-sort] {
cursor: pointer;
white-space: nowrap;
}
.agent-queue-modal th[data-sort]:hover {
color: var(--color-text);
}
#agentsQueueBtn .nav-badge,
#agentsMailboxBtn .nav-badge {
position: static;
margin-left: 4px;
}
.agent-queue-filters {
margin: var(--spacing-4) 0;
padding: 0;
border: none;
background: none;
}
.agent-queue-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-3);
margin-top: var(--spacing-3);
flex-wrap: wrap;
}
.agent-queue-foot p {
margin: 0;
}
.mailbox-intro {
margin: 0 0 var(--spacing-4);
}
.mailbox-spaced {
margin-bottom: var(--spacing-5);
}
.mailbox-actions {
margin: var(--spacing-2) 0 0;
padding-left: var(--spacing-5);
list-style: disc outside;
}
.mailbox-actions li {
margin-bottom: var(--spacing-2);
line-height: 1.5;
}
.agent-card-address-pending {
opacity: 0.65;
font-style: italic;
}
.modal-footer-slot {
min-height: 1px;
}
.mailbox-footer .modal-footer-slot {
flex: 1;
min-width: 0;
align-items: center;
}
.mailbox-footer-note {
min-width: 0;
font-size: var(--font-size-sm);
}
.form-hint-spaced {
display: block;
margin-top: var(--spacing-3);
}
.input-affix {
display: flex;
align-items: center;
gap: 0;
}
.input-affix .form-control {
flex: 1;
min-width: 0;
border-radius: 0;
}
.input-affix .form-control:first-child {
border-top-left-radius: var(--radius-md);
border-bottom-left-radius: var(--radius-md);
}
.input-affix .form-control:last-child {
border-top-right-radius: var(--radius-md);
border-bottom-right-radius: var(--radius-md);
}
.input-affix-part {
padding: var(--spacing-2) var(--spacing-3);
background: var(--color-bg-hover);
border: 1px solid var(--color-border);
color: var(--color-text-muted);
white-space: nowrap;
font-size: var(--font-size-sm);
}
.input-affix-part:first-child {
border-right: none;
border-radius: var(--radius-md) 0 0 var(--radius-md);
}
.input-affix-part:last-child {
border-left: none;
border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.field-hint-above {
display: block;
margin: 0 0 var(--spacing-2);
}
.agent-card-role {
display: block;
font-size: var(--font-size-sm);
color: var(--color-text-muted);
margin-top: 2px;
}
.agent-card-titles {
min-width: 0;
}
.mailbox-actions-title {
margin-top: var(--spacing-5);
}
.task-steps td,
.task-steps th {
white-space: nowrap;
}
.task-steps .num {
text-align: right;
font-variant-numeric: tabular-nums;
}
.task-step-who,
.task-step-used {
white-space: nowrap;
}
.task-steps .task-step-row {
cursor: pointer;
}
.task-steps .task-step-row:hover > td {
background: var(--color-bg-subtle, #fafafa);
}
.task-steps .task-step-row:focus-visible {
outline: 2px solid var(--color-success);
outline-offset: -2px;
}
.task-step-more {
color: var(--color-text-muted);
font-size: 0.75em;
}
.task-steps .task-step-detail > td {
background: var(--color-bg-subtle, #fafafa);
white-space: normal;
}
.task-step-field {
display: flex;
gap: var(--spacing-3);
margin-bottom: var(--spacing-1);
}
.task-step-field:last-child {
margin-bottom: 0;
}
.task-step-key {
flex: 0 0 8.5rem;
color: var(--color-text-muted);
}
.task-step-val {
min-width: 0;
word-break: break-word;
}
.task-step-args {
min-width: 0;
}
.task-step-args code {
margin-right: var(--spacing-2);
}
.task-step-args > div {
word-break: break-word;
}
.task-steps-pager {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-3);
margin-top: var(--spacing-2);
font-size: var(--font-size-sm);
}
.agent-card-address {
cursor: copy;
}
.agent-card-address:hover {
color: var(--color-text);
}
.agent-card-address-pending {
cursor: pointer;
}
.queue-row {
cursor: pointer;
}
.queue-row:hover,
.queue-row:focus-visible {
background: var(--color-bg-hover);
}
.queue-sub,
.task-step-what {
color: var(--color-text-muted);
font-size: var(--font-size-xs);
white-space: normal;
}
.queue-sub:empty::after,
.task-step-what:empty::after {
content: '\00a0';
}
.queue-cost {
white-space: nowrap;
}
#queueTable thead [data-sort] {
cursor: pointer;
}
#queueTable thead span[data-sort] {
display: block;
}
.sec-tier-badge-alert  { background: rgba(198, 40, 40, 0.14); color: var(--color-error); }
.sec-tier-badge-review { background: rgba(230, 126, 0, 0.15); color: #b45309; }
.sec-tier-badge-info   { background: var(--color-bg-hover); color: var(--color-text-muted); }
.sec-fleet-row.sec-tier-alert > td { background: rgba(198, 40, 40, 0.06); }
.sec-fleet-row.sec-tier-alert > td:first-child { box-shadow: inset 3px 0 0 var(--color-error); }
.sec-detail { margin-top: 8px; }
.sec-meta { margin-bottom: 4px; }
.sec-conflict { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: var(--font-size-sm); background: rgba(230, 126, 0, 0.15); color: #b45309; }
.sec-text { font-size: var(--font-size-base); white-space: pre-wrap; overflow-wrap: anywhere; }
.sec-loc { font-family: monospace; }
.sec-snippet { margin: 4px 0; padding: 6px 8px; max-height: 240px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; border: 1px solid var(--color-border); border-radius: 4px; background: var(--color-bg-card); color: var(--color-text); font-family: var(--font-mono, monospace); font-size: var(--font-size-sm); }
#clientSecurityRoot { container-type: inline-size; }
.sec-boxes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-2); margin-bottom: var(--spacing-4); }
@container (min-width: 1200px) { .sec-boxes { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } }
@container (max-width: 520px) { .sec-boxes { grid-template-columns: minmax(0, 1fr); } }
.sec-box { padding: var(--spacing-3); min-width: 0; }
.sec-box .oc-hero { font-size: var(--font-size-lg); overflow-wrap: anywhere; min-height: calc(var(--font-size-lg) * 1.3); display: flex; align-items: center; gap: var(--spacing-2); }
.sec-box .oc-hero .spinner-inline { flex: none; vertical-align: baseline; }
.sec-box .oc-row { flex-wrap: wrap; gap: 0 var(--spacing-2); }
.sec-box-note { display: block; color: var(--color-text-muted); font-size: var(--font-size-sm); overflow-wrap: anywhere; }
.sec-box-link { background: none; border: 0; padding: 0; font: inherit; color: var(--color-text); text-decoration: underline; cursor: pointer; }
.sec-box-link:hover { text-decoration: none; }
.sec-box-link:focus-visible { outline: 2px solid var(--color-success); outline-offset: 2px; border-radius: var(--radius-sm); }
.sec-box .oc-header { flex-wrap: wrap; gap: var(--spacing-1) var(--spacing-2); }
.sec-box-when { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.sec-box-btn { margin-top: var(--spacing-3); }
.sec-box[data-sec-toggle] { cursor: pointer; }
.sec-box[data-sec-toggle]:focus-visible { outline: 2px solid var(--color-success); outline-offset: 2px; }
.sec-tl-bar { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--spacing-2); width: 100%; margin-bottom: var(--spacing-2); }
.sec-tl-bar .sec-host-search { margin-bottom: 0; flex: 1 1 220px; max-width: none; min-width: 0; }
.sec-tl-bar .sitemap-search-input,
.sec-tl-bar .filter-select {
box-sizing: border-box;
height: 36px;
margin: 0;
padding-top: 0;
padding-bottom: 0;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
font-size: var(--font-size-base);
line-height: 1.5;
}
.sec-tl-bar .sitemap-search-input { -webkit-appearance: none; appearance: none; }
.sec-tl-bar .filter-select { flex: 0 0 auto; width: auto; min-width: 160px; }
@media (max-width: 600px) {
.sec-tl-bar .sec-host-search,
.sec-tl-bar .filter-select { flex: 1 1 100%; width: 100%; }
}
.table td.sec-tl-when { white-space: nowrap; }
.table th.sec-host-files,
.table td.sec-host-files { max-width: 320px; text-align: right; }
.sec-host-file {
display: block;
width: 100%;
max-width: 100%;
margin: 0;
padding: var(--spacing-1) 0;
border: 0;
background: none;
font: inherit;
font-size: var(--font-size-sm);
color: var(--color-text-muted);
text-align: right;
direction: rtl;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
cursor: pointer;
}
.sec-host-file bdi { unicode-bidi: isolate; }
.sec-host-file:hover { color: var(--color-success); text-decoration: underline; }
.sec-host-file:focus-visible {
outline: 2px solid var(--color-success);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
.sec-host-search { margin-bottom: var(--spacing-2); }
.sec-host-count { margin: 0 0 var(--spacing-2); font-size: var(--font-size-sm); }
.sec-host-hit { background: #fff3bf; color: var(--color-text); border-radius: 2px; }
.sec-host-search .sitemap-search-input:focus-visible { outline: 2px solid var(--color-success); outline-offset: 1px; }