:root {
    --bg-primary: #ffffff;
    --bg-secondary: #f8f8f8;
    --text-primary: #1a1a1a;
    --text-secondary: #333333;
    --text-tertiary: #555555;
    --color-primary: #2563eb;
    --color-primary-dark: #1d4ed8;
    --border-color: #d1d5db;
    --border-light: #e5e7eb;
    --hover-bg: #eff6ff;
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    --accent-success: #059669;
    --accent-warning: #d97706;
    --accent-danger: #dc2626;
    --accent-info: #0284c7;
    --button-text: #ffffff;
    --button-text-light: #1a1a1a;
    --tooltip-bg: rgba(0, 0, 0, 0.95);
    --tooltip-text: #ffffff;
    --overlay-bg: rgba(0, 0, 0, 0.5);
    /* Role-specific colors */
    --role-keyholder: #3b82f6;
    --role-keyholder-bg: #dbeafe;
    --role-lockee: #dc2626;
    --role-lockee-bg: #fee2e2;
    --role-assist-keyholder: #059669;
    --role-assist-keyholder-bg: #dcfce7;
    --role-assist-lockee: #f97316;
    --role-assist-lockee-bg: #ffedd5;
    --role-default: #6b7280;
    --role-default-bg: #f3f4f6;
}

html[data-theme="dark"] {
    --bg-primary: #111827;
    --bg-secondary: #1f2937;
    --text-primary: #f3f4f6;
    --text-secondary: #e5e7eb;
    --text-tertiary: #d1d5db;
    --color-primary: #60a5fa;
    --color-primary-dark: #3b82f6;
    --border-color: #374151;
    --border-light: #4b5563;
    --hover-bg: #111f3a;
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    --accent-success: #34d399;
    --accent-warning: #fbbf24;
    --accent-danger: #f87171;
    --accent-info: #38bdf8;
    --button-text: #ffffff;
    --button-text-light: #1a1a1a;
    --tooltip-bg: rgba(15, 23, 42, 0.95);
    --tooltip-text: #f1f5f9;
    --overlay-bg: rgba(0, 0, 0, 0.7);
    /* Role-specific colors */
    --role-keyholder: #60a5fa;
    --role-keyholder-bg: rgba(96, 165, 250, 0.1);
    --role-lockee: #f87171;
    --role-lockee-bg: rgba(248, 113, 113, 0.1);
    --role-assist-keyholder: #34d399;
    --role-assist-keyholder-bg: rgba(52, 211, 153, 0.1);
    --role-assist-lockee: #fbbf24;
    --role-assist-lockee-bg: rgba(251, 191, 36, 0.1);
    --role-default: #9ca3af;
    --role-default-bg: rgba(156, 163, 175, 0.1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: var(--bg-primary); color: var(--text-primary); transition: background 0.3s, color 0.3s; }

/* ===== UTILITY CLASSES ===== */

/* Display & Layout */
.u-flex { display: flex; }
.u-flex-center { display: flex; align-items: center; justify-content: center; }
.u-flex-between { display: flex; justify-content: space-between; align-items: center; }
.u-flex-col { display: flex; flex-direction: column; }
.u-flex-wrap { display: flex; flex-wrap: wrap; }
.u-grid { display: grid; }

/* Spacing Utilities */
.u-gap-2 { gap: 8px; }
.u-gap-3 { gap: 10px; }
.u-gap-4 { gap: 12px; }
.u-gap-5 { gap: 15px; }
.u-gap-6 { gap: 20px; }

.u-p-2 { padding: 8px; }
.u-p-3 { padding: 12px; }
.u-p-4 { padding: 15px; }
.u-p-5 { padding: 20px; }

.u-px-1 { padding-left: 2px; padding-right: 2px; }
.u-px-2 { padding-left: 8px; padding-right: 8px; }
.u-px-3 { padding-left: 12px; padding-right: 12px; }
.u-py-1 { padding-top: 4px; padding-bottom: 4px; }
.u-py-2 { padding-top: 8px; padding-bottom: 8px; }
.u-py-3 { padding-top: 12px; padding-bottom: 12px; }

.u-m-0 { margin: 0; }
.u-m-1 { margin: 4px; }
.u-m-2 { margin: 8px; }
.u-m-3 { margin: 12px; }
.u-mt-1 { margin-top: 3px; }
.u-mt-2 { margin-top: 5px; }
.u-mt-3 { margin-top: 12px; }
.u-mt-4 { margin-top: 15px; }
.u-mt-5 { margin-top: 20px; }
.u-mt-6 { margin-top: 25px; }
.u-mt-7 { margin-top: 30px; }
.u-mb-1 { margin-bottom: 3px; }
.u-mb-2 { margin-bottom: 8px; }
.u-mb-3 { margin-bottom: 12px; }
.u-mb-4 { margin-bottom: 15px; }
.u-mb-5 { margin-bottom: 20px; }
.u-mb-8 { margin-bottom: 30px; }
.u-ml-auto { margin-left: auto; }
.u-ml-6 { margin-left: 25px; }
.u-mr-2 { margin-right: 8px; }
.u-my-4 { margin-top: 15px; margin-bottom: 15px; }
.u-pb-5 { padding-bottom: 20px; }
.u-p-10 { padding: 40px; }

/* Alignment */
.u-text-center { text-align: center; }
.u-text-left { text-align: left; }
.u-items-center { align-items: center; }
.u-items-start { align-items: flex-start; }
.u-justify-center { justify-content: center; }
.u-justify-between { justify-content: space-between; }
.u-rounded { border-radius: 6px; }

/* Width & Height */
.u-w-full { width: 100%; }
.u-flex-1 { flex: 1; }
.u-h-full { height: 100%; }
.u-max-w-sm { max-width: 400px; }
.u-max-w-md { max-width: 500px; }

/* Typography */
.u-text-sm { font-size: 0.85em; }
.u-text-base { font-size: 1em; }
.u-text-lg { font-size: 1.1em; }
.u-text-xl { font-size: 1.2em; }
.u-text-2xl { font-size: 1.8em; }
.u-text-3xl { font-size: 3em; }
.u-text-4xl { font-size: 4em; }
.u-font-500 { font-weight: 500; }
.u-font-600, .u-font-semibold { font-weight: 600; }
.u-font-700, .u-font-bold { font-weight: 700; }

.u-text-primary { color: var(--text-primary); }
.u-text-secondary { color: var(--text-secondary); }
.u-text-tertiary { color: var(--text-tertiary); }

/* Line Height */
.u-leading-tight { line-height: 1.25; }
.u-leading-normal { line-height: 1.5; }
.u-leading-relaxed { line-height: 1.75; }

/* Display & Visibility */
.u-hidden,
.metric-card.hidden,
.chart-container.hidden,
.tab-content,
.settings-panel { display: none; }

.u-block,
.tab-content.active,
.modal.show,
.modal.active,
.settings-panel.active { display: block; }

/* Borders */
.u-border-t, .u-border-top { border-top: 1px solid var(--border-color); }
.u-border-b, .u-border-bottom { border-bottom: 1px solid var(--border-color); }
.u-border, .card-bordered { border: 1px solid var(--border-color); }
.u-border-2 { border: 2px solid; }
.u-border-left-4, .card-bordered-left { border-left: 4px solid; }

/* Input & Select styles */
.input-full { width: 100%; }
select { padding: 6px 10px; border: 1px solid var(--border-color); background: var(--bg-secondary); color: var(--text-primary); border-radius: 4px; width: 100%; }
input[type="text"],
input[type="password"],
input[type="number"] { padding: 8px 12px; border: 1px solid var(--border-color); background: var(--bg-secondary); color: var(--text-primary); border-radius: 4px; width: 100%; }

/* Border Radius */
.u-rounded-sm { border-radius: 3px; }
.u-rounded-md { border-radius: 5px; }

/* Grid utilities */
.u-grid-cols-2, .modal-detail-grid-two { grid-template-columns: 1fr 1fr; }
.u-grid-auto { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.u-grid-auto-lg { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.u-col-span-full { grid-column: 1 / -1; }

/* Overflow */
.u-overflow-y-auto { overflow-y: auto; }
.u-max-h-200 { max-height: 200px; }
.u-max-h-180 { max-height: 180px; }

/* Button and form utilities */
.role-btn { padding: 15px 20px; border: 2px solid transparent; background: transparent; border-radius: 8px; cursor: pointer; font-size: 1em; font-weight: bold; }
.role-btn.selected { border-color: var(--color-primary) !important; background: var(--color-primary) !important; color: var(--button-text) !important; }
.btn-primary-full { display: block; width: 100%; padding: 8px 12px; background: var(--color-primary); color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 0.9em; font-weight: 600; margin-top: 8px; }
.btn-warning-sm { margin-top: 8px; padding: 6px 12px; background: var(--accent-warning); color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 0.9em; }

/* Label and form utilities */
.label-block { display: block; margin-bottom: 8px; }
.label-form { display: block; font-size: 0.9em; font-weight: 600; color: var(--text-secondary); margin-bottom: 8px; }
.label-flex { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.label-flex-sm { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }

/* Top/bottom padding */
.u-pt-4 { padding-top: 15px; }
.u-pb-4 { padding-bottom: 15px; }
.u-py-4 { padding-top: 15px; padding-bottom: 15px; }

/* Text alignment */
.u-text-right { text-align: right; }

/* Min/Max width */
.u-min-w-20 { min-width: 80px; }

/* Field containers */
.export-fields-container { background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 5px; padding: 10px; max-height: 200px; overflow-y: auto; }
.export-field-label { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 0.85em; }
.export-field-label input { cursor: pointer; }

/* Card & Container Styles */
.card { background: var(--bg-secondary); padding: 15px; border-radius: 8px; }
.card-primary { background: var(--bg-primary); padding: 15px; border-radius: 8px; }
.card-hover { background: var(--hover-bg); padding: 15px; border-radius: 8px; }
.card-lg { background: var(--bg-secondary); padding: 20px; border-radius: 12px; }
.card-sm { background: var(--bg-primary); padding: 10px; border-radius: 6px; }


/* Modal & Dialog */
.modal-box { width: 90%; max-width: 400px; }
.modal-lg { width: 90%; max-width: 700px; }
.modal-section { padding: 20px; }
.modal-sm { width: 90%; max-width: 300px; }

/* Button Styles */
.btn-flex { width: 100%; padding: 8px 12px; font-size: 0.9em; }
.btn-flex-lg { width: 100%; padding: 10px 15px; font-size: 0.95em; }
.btn-primary { background: var(--color-primary); color: var(--button-text); }
.btn-success { background: var(--accent-success); color: var(--button-text); }
.btn-warning { background: var(--accent-warning); color: #1a1a1a; }
.btn-danger { background: var(--accent-danger); color: var(--button-text); }
.btn-info { background: var(--accent-info); color: var(--button-text); }
.btn-secondary { background: var(--bg-secondary); color: var(--text-primary); }

/* ===== Wearer Session Editor ===== */
.wearer-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at 10% 20%, rgba(37, 99, 235, 0.12), transparent 38%),
        radial-gradient(circle at 90% 0%, rgba(2, 132, 199, 0.10), transparent 42%),
        linear-gradient(180deg, var(--bg-secondary), var(--bg-primary));
}

.wearer-shell {
    max-width: 1320px;
    margin: 0 auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.wearer-hero {
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow);
}

.wearer-title {
    font-size: 2rem;
    line-height: 1.2;
    margin-bottom: 8px;
}

.wearer-subtitle {
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 8px;
}

.wearer-hint {
    color: var(--text-tertiary);
    font-size: 0.92rem;
}

.wearer-hint code,
.wearer-help code {
    background: var(--hover-bg);
    color: var(--text-primary);
    padding: 1px 5px;
    border-radius: 4px;
}

.wearer-login,
.wearer-context,
.wearer-session-card,
.wearer-metadata-card {
    border: 1px solid var(--border-color);
}

.wearer-section-title {
    margin-bottom: 10px;
    font-size: 1.1rem;
}

.wearer-grid-two {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 10px 12px;
    align-items: center;
}

.wearer-actions {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.wearer-btn {
    border: none;
    border-radius: 6px;
    padding: 9px 14px;
    cursor: pointer;
    font-weight: 600;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.wearer-btn:hover {
    transform: translateY(-1px);
    opacity: 0.92;
}

.wearer-status,
.wearer-save-message {
    margin-top: 10px;
    color: var(--text-secondary);
    font-weight: 500;
}

.wearer-status.is-ok,
.wearer-save-message.is-ok {
    color: var(--accent-success);
}

.wearer-status.is-warn,
.wearer-save-message.is-warn {
    color: var(--accent-warning);
}

.wearer-status.is-error,
.wearer-save-message.is-error {
    color: var(--accent-danger);
}

.wearer-grid-context {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    margin-bottom: 14px;
}

.wearer-metric {
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: var(--bg-primary);
    padding: 12px;
}

.wearer-metric-title {
    font-size: 0.8rem;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: 6px;
}

.wearer-metric-value {
    font-weight: 700;
    font-size: 0.98rem;
    word-break: break-all;
}

.wearer-selector-row {
    display: grid;
    grid-template-columns: 160px 1fr auto;
    gap: 10px;
    align-items: center;
}

.wearer-select {
    width: 100%;
}

.wearer-main-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
}

.wearer-help {
    color: var(--text-tertiary);
    margin-bottom: 10px;
    line-height: 1.45;
}

.wearer-view-switch {
    display: inline-flex;
    gap: 6px;
    margin-bottom: 12px;
    padding: 4px;
    border: 1px solid var(--border-light);
    border-radius: 10px;
    background: var(--bg-primary);
}

.wearer-tab {
    border: 0;
    border-radius: 8px;
    padding: 7px 12px;
    cursor: pointer;
    background: transparent;
    color: var(--text-secondary);
    font-weight: 600;
}

.wearer-tab.is-active {
    background: var(--color-primary);
    color: var(--button-text);
}

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

.wearer-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wearer-field-full {
    grid-column: 1 / -1;
}

.wearer-field-label {
    font-size: 0.84rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.wearer-input {
    width: 100%;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-primary);
    border-radius: 6px;
    padding: 8px 10px;
}

.wearer-input-area {
    min-height: 90px;
    resize: vertical;
}

.wearer-input[readonly],
.wearer-input:disabled {
    opacity: 0.75;
    cursor: not-allowed;
}

.wearer-json {
    width: 100%;
    min-height: 480px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-primary);
    color: var(--text-primary);
    padding: 12px;
    font: 500 0.88rem/1.45 Consolas, Monaco, 'Courier New', monospace;
    resize: vertical;
}

.wearer-details {
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: var(--bg-primary);
    margin-bottom: 10px;
    overflow: hidden;
}

.wearer-details summary {
    cursor: pointer;
    padding: 9px 12px;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-light);
}

.wearer-pre {
    margin: 0;
    padding: 10px 12px;
    max-height: 280px;
    overflow: auto;
    font: 500 0.78rem/1.45 Consolas, Monaco, 'Courier New', monospace;
    color: var(--text-primary);
    background: var(--bg-secondary);
}

@media (max-width: 1020px) {
    .wearer-main-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .wearer-shell {
        padding: 14px;
    }

    .wearer-title {
        font-size: 1.55rem;
    }

    .wearer-grid-two,
    .wearer-selector-row {
        grid-template-columns: 1fr;
    }

    .wearer-grid-context {
        grid-template-columns: 1fr;
    }

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

    .wearer-json {
        min-height: 360px;
    }
}

/* Borders & Dividers */
.u-border-light { border: 1px solid var(--border-light); }
.u-rounded-lg { border-radius: 8px; }
.u-rounded-xl { border-radius: 12px; }

/* Cursor & Interaction */
.u-cursor-pointer { cursor: pointer; }
.u-select-none { user-select: none; }

/* Font Weight */

/* Transitions */
.u-transition { transition: all 0.2s ease; }
.u-transition-smooth { transition: all 0.3s ease; }

/* Visibility & Overflow */
.u-overflow-auto { overflow: auto; }
.u-overflow-hidden { overflow: hidden; }
.u-max-h-300 { max-height: 300px; }
.u-max-h-600 { max-height: 600px; }

/* Word Break & Wrapping */
.u-word-break { word-break: break-word; }
.u-max-w-200 { max-width: 200px; }
.u-whitespace-nowrap, .st-nowrap { white-space: nowrap; }

.container { max-width: 1400px; margin: 0 auto; padding: 20px; }
header { background: var(--bg-secondary); border-radius: 12px; padding: 30px; margin-bottom: 30px; box-shadow: var(--shadow); display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 20px; }
.header-content { grid-column: 1; grid-row: 1 / 3; }
header h1 { font-size: 2.5em; color: var(--color-primary); margin-bottom: 5px; }
header p { color: var(--text-secondary); font-size: 1.1em; }
.header-controls { grid-column: 2; grid-row: 1; display: flex; gap: 10px; flex-wrap: wrap; align-content: flex-start; justify-self: end; }
.header-btn { background: var(--color-primary); color: var(--button-text); border: none; padding: 12px 20px; border-radius: 8px; cursor: pointer; font-size: 1em; font-weight: 600; }
.header-btn:hover { background: var(--color-primary-dark); }
.status-badge { padding: 6px 12px; border-radius: 6px; font-size: 0.85em; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; color: white; }
.status-badge.api { background: var(--accent-success); }
.status-badge.file { background: var(--accent-warning); color: #1a1a1a; }
.status-badge.loading { background: var(--color-primary); }
.status-badge.error { background: var(--accent-danger); }

/* Lockee Selector Styles */
.lockee-selector {
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.95em;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 200px;
}
.lockee-selector:hover {
    border-color: var(--color-primary);
    background: var(--hover-bg);
}
.lockee-selector:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.permission-banner {
    background: rgba(251, 146, 60, 0.1);
    border-left: 4px solid #fb923c;
    color: var(--text-primary);
}

.permission-banner-title {
    color: #fb923c;
}

.onboarding-info-box {
    background: rgba(59, 130, 246, 0.1);
    border-left: 3px solid #3b82f6;
}

.onboarding-warning-box {
    background: rgba(251, 146, 60, 0.1);
    border-left: 3px solid #fb923c;
}

.btn-subtle {
    background: var(--hover-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.settings-data-source-box {
    background: var(--hover-bg);
    padding: 12px;
    border-radius: 6px;
    margin-top: 15px;
    font-size: 0.9em;
}

.section-title-primary {
    color: var(--color-primary);
}

.api-about-box {
    background: var(--hover-bg);
}

.trend-action-picker {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 5px;
}

.trend-actions-loading {
    grid-column: 1 / -1;
    color: var(--text-tertiary);
}

.chart-settings-phase-title {
    margin-bottom: 10px;
    color: var(--color-primary);
    font-size: 0.95em;
}

.settings-divider {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 15px 0;
}

.settings-divider-light {
    border-top-color: var(--border-light);
    margin: 20px 0;
}

.settings-subpanel {
    background: var(--bg-secondary);
}

.settings-inline-label {
    font-size: 0.9em;
}

.section-title-primary-compact {
    margin-top: 0;
    margin-bottom: 15px;
}

.help-header-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.help-title {
    color: var(--color-primary);
    margin: 0;
}

.help-content {
    color: var(--text-primary);
}

.help-section-title {
    color: var(--color-primary);
    margin: 15px 0 8px 0;
}

.help-list {
    margin-left: 20px;
}

.error-message-text {
    margin-bottom: 20px;
    color: var(--text-secondary);
}

.button-row-wrap {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.modal-content-link-test {
    max-width: 600px;
}

.modal-body-padding {
    padding: 20px;
}

.link-user-row {
    margin-bottom: 15px;
}

.link-loading {
    text-align: center;
    padding: 30px;
}

.spinner-inline-block {
    display: inline-block;
}

.link-test-result {
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
}

.link-test-content {
    border-top: 1px solid var(--border-color);
    padding-top: 15px;
}

.link-test-footer {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
    text-align: right;
}

.modal-content-iframe {
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.iframe-body-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.iframe-loading-wrap {
    text-align: center;
    padding: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100%;
}

.iframe-view {
    flex: 1;
    border: none;
    border-radius: 8px;
}

.iframe-footer {
    padding: 15px;
    border-top: 1px solid var(--border-color);
    text-align: right;
}

.modal-btn-filter {
    background: var(--accent-success);
}

.modal-btn-close {
    background: var(--color-secondary);
}

.modal-error-title {
    color: var(--color-error);
}

.modal-btn-primary {
    background: var(--color-primary);
    color: #ffffff;
}

.modal-action-row {
    background: var(--bg-tertiary);
}


.api-test-result--error {
    background: #fee2e2;
    color: #991b1b;
    border-left: 4px solid #dc2626;
}

.api-test-result--success {
    background: #ecfdf5;
    color: #065f46;
    border-left: 4px solid #10b981;
}

.api-test-result--loading {
    background: #eff6ff;
    color: #1e40af;
    border-left: 4px solid #3b82f6;
}

.st-row-divider {
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
}

.st-text-sm-muted-mb5 {
    font-size: 0.85em;
    color: var(--text-secondary);
    margin-bottom: 5px;
}

.st-text-xs-tertiary {
    color: var(--text-tertiary);
    font-size: 0.8em;
}

.st-text-xs-tertiary-mb3 {
    color: var(--text-tertiary);
    font-size: 0.8em;
    margin-bottom: 3px;
}

.st-title-primary-tight {
    margin-top: 0;
    color: var(--color-primary);
    font-size: 1em;
}

.st-uppercase {
    text-transform: uppercase;
}

.st-stat-primary {
    font-size: 1.1em;
    font-weight: bold;
    color: var(--color-primary);
}

.st-note-box {
    padding: 10px;
    background: var(--bg-secondary);
    border-radius: 6px;
    margin-bottom: 10px;
    font-size: 0.9em;
}

.st-grid-200 {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.st-label-tertiary-caps {
    color: var(--text-tertiary);
    font-size: 0.75em;
    text-transform: uppercase;
    margin-bottom: 10px;
    font-weight: bold;
}

.st-text-success {
    color: var(--accent-success);
}

.st-panel-hover {
    background: var(--hover-bg);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.st-text-85-muted-mb4 {
    color: var(--text-secondary);
    font-size: 0.85em;
    margin-bottom: 4px;
}

.st-text-75-muted {
    color: var(--text-secondary);
    font-size: 0.75em;
}

.st-bg-primary-white {
    background: var(--color-primary);
    color: white;
}

.st-mb-15 {
    margin-bottom: 15px;
}

.st-block-text-85-muted-mb5 {
    display: block;
    font-size: 0.85em;
    color: var(--text-secondary);
    margin-bottom: 5px;
}


.st-text-90-muted-mb10 {
    color: var(--text-secondary);
    font-size: 0.9em;
    margin-bottom: 10px;
}

.st-w-full {
    width: 100%;
}

.st-pt10-top-border {
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
}

.st-stat-18-primary {
    font-size: 1.8em;
    font-weight: bold;
    color: var(--color-primary);
}

.st-text-90-muted {
    font-size: 0.9em;
    color: var(--text-secondary);
}

.metadata-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-bottom: 30px; }
.metric-card { background: var(--bg-secondary); border-radius: 12px; padding: 25px; box-shadow: var(--shadow); text-align: center; }
.metric-card h3 { color: var(--color-primary); font-size: 0.9em; text-transform: uppercase; }
.metric-card .value { font-size: 2.5em; font-weight: bold; color: var(--color-primary); cursor: pointer; }
.metric-card .value:hover::after { content: " ⎘"; }
.metric-card .subtext { font-size: 0.85em; color: var(--text-tertiary); }

.charts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); gap: 30px; margin-bottom: 30px; }
.chart-container { background: var(--bg-secondary); border-radius: 12px; padding: 30px; box-shadow: var(--shadow); }
.chart-container h2 { color: var(--color-primary); margin-bottom: 20px; border-bottom: 2px solid var(--color-primary); padding-bottom: 10px; }
.canvas-wrapper { position: relative; height: 300px; }

.tab-navigation { display: flex; gap: 10px; margin-bottom: 30px; border-bottom: 2px solid var(--border-color); flex-wrap: wrap; }
.tab-button { padding: 12px 25px; border: none; background: transparent; color: var(--color-primary); font-size: 1em; font-weight: bold; cursor: pointer; border-bottom: 3px solid transparent; }
.tab-button.active { color: var(--color-primary-dark); border-bottom-color: var(--color-primary-dark); }

.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: var(--overlay-bg); }
.modal-content { background: var(--bg-secondary); margin: 5% auto; padding: 30px; border-radius: 12px; width: 90%; max-width: 700px; max-height: 90vh; overflow-y: auto; }
.close-btn { background: none; border: none; font-size: 2em; cursor: pointer; color: var(--text-secondary); }
.settings-tabs { display: flex; gap: 10px; margin-bottom: 20px; border-bottom: 1px solid var(--border-light); flex-wrap: wrap; }
.settings-tab { padding: 10px 15px; border: none; background: transparent; cursor: pointer; border-bottom: 3px solid transparent; }
.settings-tab.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.settings-group { margin-bottom: 20px; }
.settings-group label { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.settings-group input[type="text"], .settings-group input[type="password"], .settings-group select { padding: 8px 12px; border: 1px solid var(--border-color); background: var(--bg-primary); color: var(--text-primary); border-radius: 5px; font-size: 0.9em; }
.settings-group input[type="text"]:focus, .settings-group input[type="password"]:focus, .settings-group select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1); }
.export-btn { background: var(--color-primary); color: var(--button-text); border: none; padding: 10px 15px; border-radius: 6px; cursor: pointer; font-weight: 500; }
.filter-section { background: var(--bg-secondary); border-radius: 8px; padding: 15px; margin-bottom: 20px; border: 1px solid var(--border-color); }
.filter-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.filter-input, .filter-select { padding: 8px 12px; border: 1px solid var(--border-color); background: var(--bg-primary); color: var(--text-primary); border-radius: 5px; font-size: 0.9em; }
.filter-input:focus, .filter-select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1); }
.search-box { width: 100%; padding: 12px 16px; border: 2px solid var(--border-light); background: var(--bg-primary); color: var(--text-primary); border-radius: 8px; font-size: 1em; margin-bottom: 15px; }
.search-box:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); }
.data-table th { cursor: pointer; user-select: none; transition: background 0.2s; }
.data-table th.sortable::after { content: ' ↕'; opacity: 0.6; font-size: 0.8em; }
.data-table th.sorted-asc::after { content: ' ↑'; opacity: 1; }
.data-table th.sorted-desc::after { content: ' ↓'; opacity: 1; }

/* Top Users Styles */
.top-users-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 15px; margin-bottom: 30px; }
.user-card { background: var(--bg-secondary); border-radius: 10px; padding: 18px; box-shadow: var(--shadow); border-left: 4px solid var(--color-primary); cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; }
.user-card:hover { transform: translateY(-2px); box-shadow: 0 8px 16px rgba(0,0,0,0.15); }
.user-rank { display: inline-block; background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); color: var(--button-text); width: 32px; height: 32px; border-radius: 50%; text-align: center; line-height: 32px; font-weight: bold; font-size: 0.9em; margin-right: 10px; }
.user-name { font-weight: 600; font-size: 1.05em; color: var(--text-primary); margin: 8px 0; }
.user-stats { font-size: 0.85em; color: var(--text-tertiary); line-height: 1.6; }
.user-stats strong { color: var(--color-primary); }

/* Period Comparison Styles */
.comparison-container { background: var(--bg-secondary); border-radius: 12px; padding: 25px; margin-bottom: 30px; box-shadow: var(--shadow); }
.comparison-header { display: flex; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; }
.comparison-period { flex: 1; min-width: 200px; }
.comparison-period label { display: block; font-size: 0.85em; font-weight: 600; color: var(--text-secondary); margin-bottom: 8px; }
.comparison-period input { width: 100%; padding: 8px 12px; border: 1px solid var(--border-color); border-radius: 5px; background: var(--bg-primary); color: var(--text-primary); }
.comparison-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 15px; }
.comparison-item { background: var(--bg-primary); padding: 15px; border-radius: 8px; border-top: 3px solid var(--color-primary); }
.comparison-item h4 { font-size: 0.8em; color: var(--text-tertiary); text-transform: uppercase; margin-bottom: 8px; }
.comparison-values { display: flex; gap: 10px; align-items: center; }
.comparison-value { font-size: 1.3em; font-weight: bold; color: var(--color-primary); }
.comparison-delta { font-size: 0.85em; padding: 4px 8px; border-radius: 4px; }
.comparison-delta.positive { background: rgba(5, 150, 105, 0.15); color: var(--accent-success); }
.comparison-delta.negative { background: rgba(220, 38, 38, 0.15); color: var(--accent-danger); }

/* Date Picker Enhancement */
.date-range-picker { background: var(--hover-bg); border-radius: 8px; padding: 15px; margin-bottom: 15px; }
.date-inputs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: flex-end; }
.date-inputs label { font-size: 0.8em; font-weight: 600; color: var(--text-secondary); }
.date-preset-btn { background: var(--color-primary); color: var(--button-text); border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-size: 0.8em; font-weight: 500; }
.date-preset-btn:hover { background: var(--color-primary-dark); }
.date-preset-btn.active { background: var(--color-primary-dark); color: var(--button-text); }

/* Collapsible Section */
.section-header { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; padding: 12px 0; }
.section-header .toggle-icon { display: inline-block; width: 20px; text-align: center; transition: transform 0.2s; }
.section-header.collapsed .toggle-icon { transform: rotate(-90deg); }
.collapsible-content { max-height: 1000px; overflow: hidden; transition: max-height 0.3s ease; }
.collapsible-content.collapsed { max-height: 0; }

/* Chart Drill-down */
.chart-container.drillable { cursor: pointer; }
.chart-container.drillable h2 { position: relative; }
.chart-container.drillable h2::after { content: ' (click to filter)'; font-size: 0.7em; opacity: 0.6; }
.drill-breadcrumb { background: var(--hover-bg); padding: 10px 15px; border-radius: 6px; margin-bottom: 15px; font-size: 0.9em; }
.drill-breadcrumb button { background: none; border: none; color: var(--color-primary); cursor: pointer; text-decoration: underline; font-weight: 600; }

/* Filter Buttons */
.filter-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-light); }
.filter-button { padding: 6px 12px; border: 1px solid var(--color-primary); background: var(--bg-primary); color: var(--color-primary); border-radius: 20px; cursor: pointer; font-size: 0.85em; transition: all 0.2s; font-weight: 500; }
.filter-button:hover { background: var(--color-primary); color: var(--button-text); transform: scale(1.05); }
.filter-button:active { transform: scale(0.98); }

/* Virtual Scroll */
.virtual-table-wrapper { max-height: 600px; overflow-y: auto; }
.virtual-table-spacer { height: 0; }

/* User Detail Modal */
.user-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
.user-detail-section { background: var(--hover-bg); padding: 15px; border-radius: 8px; }
.user-detail-section h3 { color: var(--color-primary); font-size: 0.9em; text-transform: uppercase; margin-bottom: 12px; }
.user-detail-stat { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border-light); }
.user-detail-stat:last-child { border-bottom: none; }
.user-detail-label { color: var(--text-tertiary); }
.user-detail-value { font-weight: 600; color: var(--color-primary); }

/* User Performance Scorecards */
.user-performance-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; margin-bottom: 30px; }
.user-scorecard { background: var(--bg-secondary); border-radius: 12px; padding: 20px; box-shadow: var(--shadow); border-left: 4px solid var(--color-primary); transition: transform 0.2s, box-shadow 0.2s; }
.user-scorecard:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); }
.user-scorecard.top-performer { border-left-color: #fbbf24; background: linear-gradient(135deg, var(--bg-secondary), rgba(251, 191, 36, 0.05)); }
.user-scorecard-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 15px; border-bottom: 1px solid var(--border-light); padding-bottom: 10px; }
.user-scorecard-name { font-size: 1.1em; font-weight: 700; color: var(--text-primary); }
.user-scorecard-rank { font-size: 0.8em; font-weight: 600; background: var(--color-primary); color: var(--button-text); padding: 3px 8px; border-radius: 12px; }
.user-scorecard-rank.gold { background: #fbbf24; color: #1a1a1a; }
.user-scorecard-rank.silver { background: #a8a9ad; color: #1a1a1a; }
.user-scorecard-rank.bronze { background: #cd7f32; color: white; }
.user-scorecard-metric { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; font-size: 0.95em; }
.user-scorecard-metric-label { color: var(--text-tertiary); border-bottom: 1px dotted var(--color-primary); display: inline-block; }
.user-scorecard-metric-value { font-weight: 600; color: var(--color-primary); font-size: 1.1em; }
.user-scorecard-bar { width: 100%; height: 4px; background: var(--border-light); border-radius: 2px; margin-top: 3px; overflow: hidden; }
.user-scorecard-bar-fill { height: 100%; background: linear-gradient(90deg, var(--color-primary), var(--accent-info)); border-radius: 2px; transition: width 0.3s ease; }
.user-scorecard-trend { display: flex; align-items: center; gap: 5px; padding: 6px 0; margin-top: 10px; font-size: 0.9em; }
.user-scorecard-trend.positive { color: var(--accent-success); }
.user-scorecard-trend.negative { color: var(--accent-danger); }
.user-scorecard-footer { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border-light); font-size: 0.85em; color: var(--text-tertiary); text-align: center; }
.user-performance-controls { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; align-items: center; }
.sort-button { padding: 8px 14px; border: 1px solid var(--color-primary); border-bottom: 1px dotted var(--border-color); background: var(--bg-primary); color: var(--color-primary); border-radius: 6px; cursor: pointer; font-size: 0.9em; transition: all 0.2s; font-weight: 500; }
.sort-button:hover { background: var(--color-primary); color: var(--button-text); border-bottom: 1px dotted transparent; }
.sort-button.active { background: var(--color-primary-dark); color: var(--button-text); }
.user-performance-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 25px; }
.user-performance-stat-box { background: var(--hover-bg); padding: 15px; border-radius: 8px; border-left: 3px solid var(--color-primary); }
.user-performance-stat-box h3 { font-size: 0.85em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 8px; }
.user-performance-stat-box .value { font-size: 1.8em; font-weight: bold; color: var(--color-primary); }

/* Draggable Card */
.metric-card.draggable { cursor: grab; }
.metric-card.draggable:active { cursor: grabbing; opacity: 0.8; }
.metric-card.drag-over { background: var(--hover-bg); }

.footer { text-align: center; color: var(--text-secondary); padding: 20px; }

.loading-spinner { display: inline-block; width: 20px; height: 20px; border: 3px solid var(--border-color); border-top-color: var(--color-primary); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.api-section { background: var(--hover-bg); border-left: 4px solid var(--color-primary); padding: 15px; margin-bottom: 15px; border-radius: 4px; }
.input-group { margin-bottom: 12px; }
.input-group label { display: block; margin-bottom: 5px; font-weight: 600; font-size: 0.9em; color: var(--text-secondary); }
/* Universal input styling to ensure theme consistency */
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
textarea,
select {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1) !important;
}

.input-group input { width: 100%; padding: 10px; border: 1px solid var(--border-color); border-radius: 5px; background: var(--bg-primary); color: var(--text-primary); }
.input-group input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1); }
.input-group small { display: block; margin-top: 4px; color: var(--text-tertiary); font-size: 0.85em; }

.data-table th:hover { opacity: 0.9; }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.modal-header h2 { color: var(--color-primary); margin: 0; }

/* Tooltip Styles */
[title], [data-tooltip] { cursor: help; position: relative; }
[title]::after { content: attr(title); position: absolute; bottom: 125%; left: 50%; transform: translateX(-50%); padding: 8px 12px; background: var(--tooltip-bg); color: var(--tooltip-text); border-radius: 6px; font-size: 0.85em; white-space: nowrap; z-index: 1000; pointer-events: none; opacity: 0; transition: opacity 0.2s; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); }
[title]:hover::after { opacity: 1; }
[title]::before { content: ''; position: absolute; bottom: 117%; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid var(--tooltip-bg); opacity: 0; transition: opacity 0.2s; z-index: 1000; }
[title]:hover::before { opacity: 1; }

/* Credential Onboarding Modal */
.role-btn { transition: all 0.3s ease; }
.role-btn:hover { opacity: 0.8; }

/* Export button styling (reused for credential modal) */
.export-btn { 
    padding: 10px 16px;
    border: 1px solid var(--color-primary);
    background: var(--color-primary);
    color: var(--button-text);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.95em;
    font-weight: 600;
    transition: all 0.2s;
}
.export-btn:hover {
    background: var(--color-primary-dark);
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.export-btn.danger {
    background: var(--accent-danger);
    border-color: var(--accent-danger);
    color: white;
}
.export-btn.danger:hover {
    background: #dc2626;
}

/* Users tab action buttons */
.users-card-btn {
    border: none;
    color: var(--button-text);
    cursor: pointer;
}

.users-card-btn:hover {
    opacity: 0.85;
}

.users-card-btn-profile {
    background: #8b5cf6;
}

.users-card-btn-keyholder {
    background: var(--role-keyholder);
}

.users-card-btn-lockee {
    background: var(--role-lockee);
}

.users-card-btn-assist-keyholder {
    background: var(--role-assist-keyholder);
}

.users-card-btn-assist-lockee {
    background: var(--role-assist-lockee);
}

.users-card-btn-default {
    background: var(--role-default);
}

/* Extended profile modal */
.profile-modal-loading {
    color: var(--text-secondary);
    text-align: center;
    padding: 20px;
}

.profile-modal-title-wrap {
    display: flex;
    align-items: center;
    gap: 15px;
}

.profile-modal-title-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #8b5cf6;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--button-text);
    font-weight: 700;
    font-size: 1.8em;
}

.profile-modal-title-text {
    font-size: 1.5em;
    font-weight: 700;
    color: var(--color-primary);
}

.profile-modal-title-badge {
    font-size: 0.85em;
    background: rgba(139, 92, 246, 0.27);
    color: #8b5cf6;
    padding: 4px 10px;
    border-radius: 4px;
    font-weight: 500;
    display: inline-block;
    margin-top: 4px;
}

.profile-modal-card {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.profile-modal-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.profile-modal-header-icon {
    font-size: 3em;
}

.profile-modal-name {
    margin: 0;
    color: var(--color-primary);
}

.profile-modal-role {
    margin: 5px 0 0;
    color: var(--text-secondary);
}

.profile-modal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    font-size: 0.9em;
    margin-bottom: 20px;
}

.profile-modal-field {
    min-width: 0;
}

.profile-modal-label {
    color: var(--text-tertiary);
    font-size: 0.8em;
}

.profile-modal-userid {
    color: var(--color-primary);
    font-weight: 700;
    word-break: break-all;
}

.profile-modal-stats-card {
    background: var(--hover-bg);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
}

.profile-modal-stats-title {
    font-size: 0.85em;
    color: var(--text-tertiary);
    margin-bottom: 10px;
    font-weight: 500;
}

.profile-modal-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
}

.profile-modal-stat-label {
    color: var(--text-secondary);
    font-size: 0.8em;
}

.profile-modal-stat-value {
    color: var(--color-primary);
    font-size: 1.3em;
    font-weight: 700;
}

.profile-modal-stat-value-small {
    color: var(--text-primary);
    font-size: 1.05em;
    font-weight: 600;
}

.profile-modal-stats-list {
    display: grid;
    gap: 8px;
}

.profile-modal-rating-line {
    font-size: 1.1em;
    color: var(--color-primary);
}

.profile-modal-rating-score {
    margin-left: 8px;
    color: var(--text-secondary);
    font-size: 0.9em;
    font-weight: 600;
}

.profile-modal-rating-muted {
    color: var(--text-tertiary);
}

.profile-modal-metadata-note {
    margin: 0 0 20px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.9em;
}

.profile-modal-metadata-ready {
    color: var(--accent-success);
    background: rgba(5, 150, 105, 0.1);
    border: 1px solid rgba(5, 150, 105, 0.25);
}

.profile-modal-metadata-missing {
    color: var(--accent-warning);
    background: rgba(217, 119, 6, 0.1);
    border: 1px solid rgba(217, 119, 6, 0.25);
}

.profile-modal-age-ok {
    color: var(--accent-success);
    font-size: 1.1em;
}

.profile-modal-age-pending {
    color: var(--role-default);
    font-size: 1.1em;
}

.profile-modal-description-card {
    background: var(--hover-bg);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.profile-modal-description-title {
    margin-top: 0;
    color: var(--color-primary);
    font-size: 1em;
}

.profile-modal-description-text {
    color: var(--text-primary);
    line-height: 1.6;
    overflow-wrap: break-word;
    word-break: break-word;
}

.profile-modal-close {
    width: 100%;
    padding: 12px 15px;
    font-size: 0.95em;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-weight: 500;
}

.profile-modal-close:hover {
    background: var(--bg-primary);
}

.profile-modal-error-card {
    background: #fee2e2;
    border: 2px solid #ef4444;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.profile-modal-error-title {
    color: #7f1d1d;
    font-weight: 600;
    margin-bottom: 10px;
}

.profile-modal-error-body {
    font-size: 0.9em;
    line-height: 1.5;
}

.profile-modal-error-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

.profile-modal-error-message {
    margin-bottom: 0;
    color: #7f1d1d;
}

.profile-modal-error-help {
    color: var(--text-secondary);
}

.profile-modal-error-help-title {
    margin-bottom: 20px;
}

.profile-modal-error-help-list {
    margin-bottom: 20px;
    margin-left: 20px;
}

@media (max-width: 640px) {
    .profile-modal-grid {
        grid-template-columns: 1fr;
    }
}

/* AUTO_GENERATED_INLINE_STYLE_CLASSES_START */
.auto-st-001 { background: var(--accent-success); }
.auto-st-002 { background: var(--accent-warning); }
.auto-st-003 { background: var(--color-secondary); }
.auto-st-004 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; }
.auto-st-005 { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.auto-st-006 { grid-template-columns: repeat(2, 1fr); }
.auto-st-007 { color: var(--accent-danger); }
.auto-st-008 { background: var(--accent-info); }
.auto-st-009 { border: 2px solid transparent; }
.auto-st-010 { min-width: 80px; }
.auto-st-011 { font-size: 1.5em; opacity: 0.6; }
.auto-st-012 { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; margin-bottom: 20px; }
.auto-st-013 { background: var(--bg-primary); padding: 15px; border-radius: 8px; margin-bottom: 20px; }
.auto-st-014 { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; }
.auto-st-015 { font-size: 1.2em; font-weight: bold; color: #10b981; }
.auto-st-016 { font-size: 1.2em; font-weight: bold; color: #ef4444; }
.auto-st-017 { margin-top: 20px; }
.auto-st-018 { width: 100%; padding: 10px 15px; font-size: 0.95em; background: var(--accent-info); margin-bottom: 10px; }
.auto-st-019 { width: 100%; padding: 10px 15px; font-size: 0.95em; background: var(--bg-secondary); }
.auto-st-020 { text-align: center; padding: 40px; background: var(--hover-bg); border-radius: 8px; }
.auto-st-021 { font-size: 1.1em; margin-bottom: 20px; }
.auto-st-022 { margin-bottom: 20px; color: var(--text-secondary); }
.auto-st-023 { background: var(--color-primary); }
.auto-st-024 { text-align: center; padding: 20px; }
.auto-st-025 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 30px; }
.auto-st-026 { background: var(--hover-bg); border-radius: 12px; padding: 20px; border-left: 4px solid var(--color-primary); }
.auto-st-027 { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; }
.auto-st-028 { font-size: 3em; }
.auto-st-029 { margin: 0; color: var(--color-primary); }
.auto-st-030 { margin: 5px 0 0 0; color: var(--text-secondary); }
.auto-st-031 { background: var(--hover-bg); border-radius: 12px; padding: 20px; border-left: 4px solid var(--accent-info); }
.auto-st-032 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; }
.auto-st-033 { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; font-size: 0.9em; }
.auto-st-034 { color: var(--text-primary); line-height: 1.6; overflow-wrap: break-word; word-break: break-word; }
.auto-st-035 { background: var(--hover-bg); border-radius: 12px; padding: 20px; margin-bottom: 20px; border-left: 4px solid var(--accent-warning); }
.auto-st-036 { margin-bottom: 20px; }
.auto-st-037 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; font-size: 0.9em; }
.auto-st-038 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.auto-st-039 { margin-bottom: 15px; }
.auto-st-040 { color: var(--text-primary); line-height: 1.6; padding: 12px; background: rgba(0,0,0,0.1); border-radius: 6px; overflow-wrap: break-word; word-break: break-word; font-size: 0.9em; }
.auto-st-041 { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 10px; font-size: 0.85em; }
.auto-st-042 { margin-top: 5px; font-size: 0.8em; opacity: 0.9; }
.auto-st-043 { color: var(--text-secondary); text-align: center; padding: 20px; }
.auto-st-044 { background: var(--bg-primary); border-radius: 8px; margin-bottom: 15px; border-left: 4px solid #6366f1; overflow: hidden; }
.auto-st-045 { padding: 15px; cursor: pointer; display: flex; align-items: center; gap: 10px; font-weight: 600; background: var(--bg-secondary); }
.auto-st-046 { font-size: 0.9em; }
.auto-st-047 { padding: 15px; display: block; border-top: 1px solid var(--border-color); }
.auto-st-048 { color: var(--text-secondary); font-weight: 500; }
.auto-st-049 { color: var(--color-primary); word-break: break-all; font-family: monospace; font-size: 0.9em; }
.auto-st-050 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 20px; }
.auto-st-051 { font-size: 0.75em; color: var(--text-secondary); margin-bottom: 5px; font-weight: 600; }
.auto-st-052 { font-size: 0.95em; font-weight: 500; color: var(--color-primary); }
.auto-st-053 { padding: 10px; background: var(--bg-secondary); border-radius: 6px; margin-top: 10px; font-size: 0.9em; }
.auto-st-054 { margin-top: 20px; padding-top: 15px; border-top: 1px solid var(--border-color); }
.auto-st-055 { width: 100%; padding: 12px 15px; font-size: 0.95em; background: var(--bg-secondary); cursor: pointer; border: 1px solid var(--border-color); border-radius: 6px; color: var(--text-primary); font-weight: 500; transition: all 0.2s ease; }
.auto-st-056 { background: #fee2e2; border: 1px solid #fca5a5; color: #991b1b; padding: 15px; border-radius: 8px; margin-bottom: 20px; }
.auto-st-057 { font-weight: bold; margin-bottom: 8px; }
.auto-st-058 { font-size: 0.9em; line-height: 1.5; }
.auto-st-059 { margin-bottom: 0; color: #7f1d1d; }
.auto-st-060 { color: var(--text-secondary); margin-bottom: 20px; }
.auto-st-061 { color: var(--text-secondary); margin-bottom: 20px; margin-left: 20px; }
.auto-st-062 { width: 100%; padding: 12px 15px; font-size: 0.95em; background: var(--bg-secondary); cursor: pointer; border: 1px solid var(--border-color); border-radius: 6px; color: var(--text-primary); font-weight: 500; }
.auto-st-063 { background: var(--accent-warning); padding: 10px 16px; font-size: 0.95em; white-space: nowrap; }
.auto-st-064 { background: #ef4444; padding: 10px 16px; font-size: 0.95em; }
.auto-st-065 { width: 16px; height: 16px; cursor: pointer; }
.auto-st-066 { background: #ef4444; }
.auto-st-067 { background: var(--accent-warning); padding: 8px 12px; font-size: 0.9em; }
.auto-st-068 { font-size: 0.8em; margin-top: 8px; color: var(--text-tertiary); }
.auto-st-069 { font-size: 1.4em; }
.auto-st-070 { color: var(--text-secondary); font-size: 0.9em; }
.auto-st-071 { color: var(--text-tertiary); margin: 5px 0; font-size: 0.8em; }
.auto-st-072 { font-size: 1.1em; color: var(--color-primary); }
.auto-st-073 { background: var(--bg-secondary); border-radius: 12px; padding: 20px; margin-bottom: 30px; }
.auto-st-074 { color: var(--color-primary); margin-top: 0; margin-bottom: 15px; display: flex; align-items: center; }
.auto-st-075 { font-size: 1.3em; margin-right: 10px; }
.auto-st-076 { display: flex; align-items: center; margin-bottom: 10px; }
.auto-st-077 { background: var(--bg-primary); border-radius: 8px; padding: 15px; margin-bottom: 20px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.auto-st-078 { flex: 1; min-width: 250px; padding: 8px 12px; border: 1px solid var(--border-color); border-radius: 4px; background: var(--bg-secondary); color: var(--text-primary); }
.auto-st-079 { padding: 8px 12px; border: 1px solid var(--border-color); border-radius: 4px; background: var(--bg-secondary); color: var(--text-primary); }
.auto-st-080 { background: var(--hover-bg); color: var(--text-primary); border: 1px solid var(--border-color); }
.auto-st-081 { min-width: 150px; text-align: center; }
.auto-st-082 { width: 100%; height: 400px; background: var(--bg-primary); border-radius: 8px; padding: 15px; overflow-x: auto; }
.auto-st-083 { color: var(--text-tertiary); font-size: 0.85em; margin-bottom: 15px; }
.auto-st-084 { color: var(--accent-success); font-weight: 500; }
.auto-st-085 { color: var(--text-secondary); font-size: 0.9em; margin-bottom: 20px; }
.auto-st-086 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.auto-st-087 { background: var(--bg-secondary); padding: 20px; border-radius: 8px; border-top: 3px solid #10b981; }
.auto-st-088 { color: #10b981; font-size: 1.1em; font-weight: bold; margin-bottom: 15px; }
.auto-st-089 { font-size: 1.5em; font-weight: bold; color: #10b981; }
.auto-st-090 { font-size: 1.3em; font-weight: bold; color: #10b981; }
.auto-st-091 { background: var(--bg-secondary); padding: 20px; border-radius: 8px; border-top: 3px solid #f59e0b; }
.auto-st-092 { color: #f59e0b; font-size: 1.1em; font-weight: bold; margin-bottom: 15px; }
.auto-st-093 { font-size: 1.5em; font-weight: bold; color: #f59e0b; }
.auto-st-094 { font-size: 1.3em; font-weight: bold; color: #f59e0b; }
.auto-st-095 { font-size: 1.2em; font-weight: bold; color: #f59e0b; }
.auto-st-096 { background: var(--bg-secondary); padding: 20px; border-radius: 8px; border-top: 3px solid #ef4444; }
.auto-st-097 { color: #ef4444; font-size: 1.1em; font-weight: bold; margin-bottom: 15px; }
.auto-st-098 { font-size: 1.5em; font-weight: bold; color: #ef4444; }
.auto-st-099 { font-size: 1.3em; font-weight: bold; color: #ef4444; }
.auto-st-100 { margin-top: 20px; padding: 15px; background: var(--bg-primary); border-radius: 8px; }
.auto-st-101 { color: var(--text-secondary); font-size: 0.85em; }
.auto-st-102 { color: var(--text-secondary); }
.auto-st-103 { color: var(--color-primary); margin-bottom: 15px; font-size: 0.95em; }
.auto-st-104 { width: 100%; padding: 8px 10px; border: 1px solid var(--border-color); background: var(--bg-primary); color: var(--text-primary); border-radius: 5px; cursor: pointer; min-height: 50px; }
.auto-st-105 { background: var(--bg-secondary); border-radius: 8px; padding: 15px; margin: 20px 0; border: 1px solid var(--border-color); }
.auto-st-106 { color: var(--color-primary); margin-top: 0; margin-bottom: 12px; font-size: 0.95em; }
.auto-st-107 { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.auto-st-108 { width: 100%; border-collapse: collapse; margin-top: 15px; font-size: 0.85em; }
.auto-st-109 { background: var(--color-primary); color: white; padding: 12px; text-align: left; cursor: pointer; }
.auto-st-110 { background: var(--hover-bg); }
.auto-st-111 { border: 1px solid var(--border-color); background: var(--bg-secondary); color: var(--color-primary); }
.auto-st-112 { min-width: 50px; }
.auto-st-113 { display: none; }
.auto-st-114 { color: #888; }
/* AUTO_GENERATED_INLINE_STYLE_CLASSES_END */

/* ===== PILLORY TAB STYLES ===== */

.pillory-controls {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    align-items: center;
}

.pillory-page-select {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.9em;
    cursor: pointer;
}

.pillory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.pillory-user-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
    transition: all 0.2s ease;
}

.pillory-user-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.pillory-user-header {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
    align-items: center;
}

.pillory-user-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg-primary);
    border: 2px solid var(--border-color);
}

.pillory-user-info {
    flex: 1;
}

.pillory-user-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.95em;
    word-break: break-word;
}

.pillory-user-id {
    font-size: 0.8em;
    color: var(--text-tertiary);
    font-family: monospace;
    margin-top: 2px;
}

.pillory-session-info {
    font-size: 0.85em;
    color: var(--text-secondary);
    background: var(--bg-primary);
    padding: 8px;
    border-radius: 4px;
    margin-bottom: 12px;
    border-left: 3px solid var(--color-primary);
}

.pillory-details {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
    padding: 8px;
    background: var(--bg-primary);
    border-radius: 4px;
    border-left: 3px solid var(--accent-info);
}

.pillory-detail {
    font-size: 0.8em;
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.pillory-vote-buttons {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.pillory-vote-btn {
    flex: 1;
    padding: 10px 8px;
    border: none;
    border-radius: 4px;
    font-size: 0.85em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pillory-vote-btn.add {
    background: #10b981;
    color: white;
}

.pillory-vote-btn.add:hover {
    background: #059669;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.pillory-vote-btn.add:active {
    transform: scale(0.98);
}

.pillory-vote-btn.subtract {
    background: #ef4444;
    color: white;
}

.pillory-vote-btn.subtract:hover {
    background: #dc2626;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

.pillory-vote-btn.subtract:active {
    transform: scale(0.98);
}

.pillory-vote-btn.random {
    background: #f59e0b;
    color: white;
}

.pillory-vote-btn.random:hover {
    background: #d97706;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.pillory-vote-btn.random:active {
    transform: scale(0.98);
}

.pillory-vote-status {
    font-size: 0.85em;
    padding: 8px;
    border-radius: 4px;
    text-align: center;
    min-height: 1.5em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pillory-vote-status.loading {
    color: var(--color-primary);
    background: rgba(59, 130, 246, 0.1);
}

.pillory-vote-status.success {
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
}

.pillory-vote-status.error {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.pillory-vote-status.warning {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
}

.pillory-loading,
.pillory-empty,
.pillory-error {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-secondary);
    font-size: 1.1em;
}

.pillory-empty {
    color: var(--text-tertiary);
}

.pillory-error {
    color: #ef4444;
}

.pillory-pagination {
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: 20px;
}