/*
================================================================================
💎 SOLITE AGENCY UI: THE MASTER PROTOCOL (v5.0 - SOFT TOUCH)
================================================================================
 AUTHOR:    Solite Design Systems (Top 0.0001% UI/UX Division)
 CTXT:      Visual unification of the Solite Application Suite.
 PHILOSOPHY: "Soft Integration" & "Hybrid Synergy".

 🛑 INSTRUCTIONS FOR AI AGENTS & DEVELOPERS:
    You are tasked with standardizing diverse tools into this unified system.
    Do NOT blindly "nuke and pave". Follow this "Soft Application" method:

    1. THE HYBRID DOCTRINE (Structure vs. Soul)
       - TAILWIND is the SKELETON (Layout, Spacing, Sizing).
         >>> KEEP: flex, grid, p-4, w-full, gap-6, relative, absolute over
       - AGENCY UI is the SOUL (Surface, Depth, Branding, Interaction).
         >>> REPLACE: bg-gray-*, border-gray-*, shadow-*, rounded-* (if generic)

    2. THE "SOFT" STANDARDIZATION ALGORITHM
       - SCAN the tool. Identify components that map to Agency patterns.
       - DO NOT remove layout classes (e.g., <div class="flex flex-col p-4...">).
       - DO SWAP specific styling classes for Agency counterparts:
         [Target]                  [Action]                [Result]
         -----------------------------------------------------------------------
         App Header Bar      ->    ADD CLASS          ->   .agency-shell-header
         Card / Section      ->    ADD CLASS          ->   .agency-panel
         Inputs / Textareas  ->    SWAP CLASS         ->   .agency-input
         Primary Buttons     ->    SWAP CLASS         ->   .agency-btn .agency-btn-primary
         Sec. Buttons        ->    SWAP CLASS         ->   .agency-btn .agency-btn-secondary
         Toasts/Alerts       ->    SWAP CLASS         ->   .agency-toast
         Modals              ->    SWAP CLASS         ->   .agency-modal

    3. VISUAL SYNC REQUIREMENTS
       - **FULL WIDTH**: The main app interface must use `w-full` (100% width). 
         Avoid `max-w-7xl` or centered containers unless strictly necessary for reading.
       - **HEADER STRATEGY (SOFT TOUCH)**: 
         >> DO NOT replace the header HTML. 
         >> JUST ADD the class `.agency-shell-header` to the existing `<header>`.
       - Use .agency-app-header for internal subtitles/panel headers.
       - Ensure the "Scroll Wrapper" layout pattern (Sticky Footer) is active.

    4. PROTECTED ZONES (DO NOT MODIFY INTERNAL STRUCTURE)
       - **HEADER CONTENT**: Keep logo, nav links, and structure EXACTLY AS IS.
       - **PARTNER SIDEBAR**: Keep the `aside` content exactly as is.
       - **FOOTER**: Keep the footer links/copyright exactly as is.
       - **SEO BLOCKS**: Keep text content intact, just move into Scroll Wrapper.

    5. 🚀 AUTOMATION PROTOCOL (TRIGGER: "- SaaS Look -")
       If the user prompts "- SaaS Look -", execute the following LOOP:
       1. **READ**: Check `assets/css/standardized_tools_tracker.txt` for completed tools.
       2. **HUNT**: Scan `/solite/` root for random .html files NOT in that list.
       3. **EXECUTE**: Apply this Master Protocol (Soft Header + Full Width) to the tool.
       4. **LOG**: Append the filename to `standardized_tools_tracker.txt`.
       5. **REPEAT**: Report done and ask to continue or hunt again.

    Result: A platform that feels like ONE cohesive application. Execute with precision.
================================================================================
*/

/* 💎 SOLITE AGENCY UI: The "SaaS Look" Enforcer v3.0 (Unified System) */

/* 1. GLOBAL VARIABLES */
:root {
    /* Colors (Slate-950 base) */
    --app-bg: #020617;
    --panel-bg: #0f172a;
    --panel-border: #1e293b;
    --input-bg: #1e293b;

    /* Branding (white) */
    --brand-primary: #ffffff;
    --brand-hover: #ebebeb;
    --brand-light: rgba(79, 70, 229, 0.1);

    /* Text */
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --text-dim: #64748b;

    /* Glassmorphism */
    --glass-bg: rgba(15, 23, 42, 0.7);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-blur: 12px;

    /* Dimensions */
    --header-height: 64px;
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 16px;
}

/* 2. RESET & WEB DEFAULTS */
body {
    background-color: var(--app-bg);
    color: var(--text-main);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    margin: 0;
    line-height: 1.5;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--app-bg);
}

::-webkit-scrollbar-thumb {
    background: #334155;
    /* slate-700 */
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #475569;
    /* slate-600 */
}

html {
    scrollbar-color: #334155 var(--app-bg);
}

/* 6. FEEDBACK ELEMENTS */
.agency-toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(150%);
    background-color: var(--brand-primary);
    color: var(--app-bg);
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: 999px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    z-index: 50;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    opacity: 0;
    pointer-events: none;
}

.agency-toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

/* 3. LAYOUT COMPONENTS - REMOVED PER USER REQUEST */

/* 4. FORM ELEMENTS */

/* Text Inputs & Selects */
.agency-input,
.agency-select,
.agency-textarea {
    width: 100%;
    background-color: var(--input-bg);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-sm);
    color: var(--text-main);
    padding: 0.650rem 1rem;
    font-size: 0.875rem;
    transition: all 0.2s;
}

.agency-input:focus,
.agency-select:focus,
.agency-textarea:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px var(--brand-light);
}

/* Custom Select Dropdown - Pro Look */
.agency-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239ca3af'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3e%3c/svg%3e");
    background-position: right 0.8rem center;
    background-repeat: no-repeat;
    background-size: 1.25rem;
    padding-right: 2.75rem;
    /* Space for the arrow */
    cursor: pointer;
}

/* Label */
.agency-label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 0.15rem;
}

/* Panel Header Text */
.agency-header-text {
    font-size: 1.25rem;
    /* xl */
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 1rem;
}

/* Buttons */
.agency-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.525rem 1.25rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.875rem;
    transition: all 0.2s;
    cursor: pointer;
    border: none;
    gap: 0.5rem;
}

.agency-btn-primary {
    background-color: var(--brand-primary);
    color: var(--app-bg);
    /* Changed to app-bg for contrast against white brand */
}

.agency-btn-primary:hover {
    background-color: var(--brand-hover);
    transform: translateY(-1px);
}

.agency-btn-secondary {
    background-color: transparent;
    border: 1px solid #334155;
    color: var(--text-main);
}

.agency-btn-secondary:hover {
    border-color: #475569;
    background-color: rgba(255, 255, 255, 0.03);
}

/* Custom Toggle Switch */
.agency-toggle {
    appearance: none;
    -webkit-appearance: none;
    width: 2.75rem;
    height: 1.5rem;
    background-color: var(--input-bg);
    border-radius: 999px;
    position: relative;
    cursor: pointer;
    border: 1px solid var(--panel-border);
    transition: background 0.3s;
}

.agency-toggle::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 1.15rem;
    height: 1.15rem;
    background-color: var(--text-muted);
    border-radius: 50%;
    transition: transform 0.3s;
}

.agency-toggle:checked {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.agency-toggle:checked::after {
    transform: translateX(1.25rem);
    background-color: var(--app-bg);
}

/* Standard Checkbox */
.agency-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    background-color: var(--input-bg);
    border: 1px solid var(--panel-border);
    border-radius: 0.25rem;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    transition: all 0.2s;
}

.agency-checkbox:checked {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23020617' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}

.agency-checkbox:hover {
    border-color: var(--text-muted);
}

/* Range Slider - Pro Look */
.agency-range {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 4px;
    /* h-1 */
    background: var(--input-bg);
    border-radius: 999px;
    border: 1px solid var(--panel-border);
    outline: none;
}

.agency-range::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    background: var(--brand-primary);
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.1s;
    border: 2px solid var(--input-bg);
    /* Ring effect */
    box-shadow: 0 0 0 1px var(--panel-border);
}

.agency-range::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}

/* 5. UTILITIES (The "Glue" for consistency) */

/* Uniform Panels */
.agency-panel {
    background-color: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-md);
}

/* Glass Headers/Overlays */
.agency-glass {
    background-color: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border-color: var(--glass-border);
}

/* Badges (SEO tags, status indicators) */
.agency-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border: 1px solid var(--panel-border);
    background-color: rgba(30, 41, 59, 0.4);
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
    white-space: nowrap;
    transition: all 0.2s;
}

.agency-badge:hover {
    border-color: var(--text-dim);
    color: var(--text-main);
}

/* Standard Links */
.agency-link {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s;
}

.agency-link:hover {
    color: var(--brand-primary);
}

/* Button Variations */
.agency-btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
}

.agency-btn-lg {
    padding: 0.875rem 1.75rem;
    font-size: 1rem;
}

.agency-btn-icon-only {
    padding: 0.625rem;
    aspect-ratio: 1;
}

/* 6. DANGER / DESTRUCTIVE ACTIONS */
.agency-btn-danger {
    background-color: transparent;
    border: 1px solid #334155;
    color: var(--text-muted);
}

.agency-btn-danger:hover {
    border-color: #450a0a;
    /* Darker red (950) */
    color: #f87171;
    /* Soft red (400) */
    background-color: rgba(239, 68, 68, 0.1);
}

.agency-btn-danger,
.agency-btn-success {
    padding: 0.525rem 0.75rem;
    font-size: 0.875rem;
}

/* 7. SUCCESS / POSITIVE ACTIONS (New) */
.agency-btn-success {
    background-color: transparent;
    border: 1px solid #334155;
    color: var(--text-muted);
}

.agency-btn-success:hover {
    border-color: #052e16;
    /* Darker green (950) */
    color: #4ade80;
    /* Soft green (400) */
    background-color: rgba(34, 197, 94, 0.1);
}

/* Tool Buttons (Undo/Redo/Clear) */
.agency-btn-tool {
    background-color: transparent;
    padding: 0.525rem 0.65rem;
    font-size: 0.875rem;
    border: 1px solid #334155;
    color: var(--text-muted);
    transition: all 0.2s;
}

.agency-btn-tool:hover {
    /* "lights up the icon a little bit" - keeping bg/border same or subtle, increasing icon brightness */
    color: var(--brand-primary);
    background-color: rgba(255, 255, 255, 0.02);
    border-color: #334155;
    /* Keep border same as default per request "same border and color as clear btn" ?? or maybe user meant default state same, hover state different. User said "when hover it only lights up the icon a little bit" */
}

/* 8. UPLOAD / BLANK PANELS */
.agency-upload-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    /* rounded-xl */
    border: 2px dashed #374151;
    /* border-gray-700 */
    background-color: #111827;
    /* bg-gray-900 */
    transition: all 0.2s;
    cursor: pointer;
}

.agency-upload-panel:hover {
    background-color: #111827;
    /* bg-gray-800 */
    border-color: #4d5c71;
    /* border-gray-600 */
}

.agency-upload-icon {
    width: 6rem;
    /* w-24 */
    height: 6rem;
    /* h-24 */
    color: #4b5563;
    /* text-gray-600 */
    margin: 0 auto;
    stroke-width: 0.8px;
}

.agency-upload-text {
    margin-top: 0.5rem;
    font-size: 1.125rem;
    /* text-lg */
    font-weight: 500;
    color: #9ca3af;
    /* text-gray-400 */
}

.agency-upload-subtext {
    font-size: 0.875rem;
    /* text-sm */
    color: #6b7280;
    /* text-gray-500 */
}

/* 9. VIEW TABS (Segmented Control) */
.agency-view-toggle {
    display: inline-flex;
    align-items: center;
    background-color: transparent;
    border: 1px solid #334155;
    /* Reduced to 1px to match Contextual Actions */
    padding: 0.25rem;
    border-radius: 0.5rem;
    gap: 0.25rem;
}

.agency-view-btn {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    color: #d1d5db;
    border-radius: 0.375rem;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s;
}

.agency-view-btn:hover {
    color: #ffffff;
}

.agency-view-btn.active {
    background-color: #ffffff;
    color: #111827;
}

/* 10. TOOL BUTTONS (Undo/Redo) */
/* Same border/treatment as Contextual Actions */
.agency-btn-tool {
    background-color: transparent;
    border: 1px solid #334155;
    color: var(--text-muted);
}

.agency-btn-tool:hover {
    border-color: #475569;
    background-color: rgba(255, 255, 255, 0.03);
    color: var(--text-main);
}

/* 11. MAIN APP HEADER (Standardized) */
.agency-shell-header {
    width: 100%;
    /* w-full */
    padding: 0.75rem 1rem;
    /* p-3 sm:p-4 approx */
    flex-shrink: 0;
    position: sticky;
    top: 0;
    background-color: rgba(0, 0, 0, 0.8);
    /* bg-black/80 */
    backdrop-filter: blur(24px);
    /* backdrop-blur-xl */
    z-index: 30;
    border-bottom: 1px solid var(--panel-border);
    /* border-gray-800 */
}

@media (min-width: 640px) {
    .agency-shell-header {
        padding: 1rem;
    }
}

.agency-shell-header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.agency-nav-logo-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    /* space-y-1 */
    text-decoration: none;
}

@media (min-width: 1024px) {
    .agency-nav-logo-group {
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
        /* space-x-2 */
    }
}

.agency-nav-logo-container {
    width: 2rem;
    /* w-8 */
    height: 2rem;
    /* h-8 */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
}

.agency-nav-logo-icon {
    width: 1.75rem;
    /* h-7 */
    height: 1.75rem;
    /* w-7 */
}

/* Old utility-like structure supported via these classes now */

.agency-nav-logo-text {
    font-size: 1.5rem;
    /* text-2xl */
    font-weight: 600;
    color: var(--text-main);
    transition: color 0.2s;
}

.agency-nav-logo-text:hover {
    color: #d1d5db;
    /* text-gray-300 */
}

.agency-nav-divider {
    height: 1.5rem;
    /* h-6 */
    width: 1px;
    background-color: #374151;
    /* bg-gray-700 */
    display: none;
}

@media (min-width: 1024px) {
    .agency-nav-divider {
        display: block;
    }
}

.agency-nav-app-name {
    font-size: 1.125rem;
    /* text-lg */
    font-weight: 600;
    color: #4b5563;
    /* text-gray-600 */
    line-height: 1;
}

.agency-nav-app-name.dark-mode {
    color: #9ca3af;
    /* dark:text-gray-400 */
}

.agency-nav-links {
    display: flex;
    align-items: center;
    gap: 1rem;
    /* space-x-4 */
}

@media (min-width: 1024px) {
    .agency-nav-links {
        gap: 1.5rem;
        /* space-x-6 */
    }
}

.agency-nav-link {
    padding: 0.5rem 0.25rem;
    /* px-1 py-2 */
    font-size: 0.875rem;
    /* text-sm */
    font-weight: 500;
    color: #9ca3af;
    /* text-gray-400 */
    text-decoration: none;
    transition: color 0.2s;
}

.agency-nav-link:hover {
    color: var(--text-main);
}

.agency-nav-btn {
    background-color: #111827;
    /* bg-gray-900 */
    border: 1px solid #374151;
    /* border-gray-700 */
    color: #9ca3af;
    /* text-gray-400 */
    font-size: 0.875rem;
    /* text-sm */
    font-weight: 500;
    padding: 0.5rem 1rem;
    /* py-2 px-4 */
    border-radius: 0.5rem;
    /* rounded-lg */
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    text-decoration: none;
}

.agency-nav-btn:hover {
    border-color: #4b5563;
    /* hover:border-gray-600 */
    color: var(--text-main);
}

/* 12. COLOR PICKER PRESET */
.agency-color-preset {
    width: 2rem;
    /* w-8 */
    height: 2rem;
    /* h-8 */
    border-radius: 0.375rem;
    /* rounded-md */
    border: 1px solid var(--panel-border);
    cursor: pointer;
    transition: transform 0.1s;
}

.agency-color-preset:hover {
    transform: scale(1.1);
    box-shadow: 0 0 0 2px var(--brand-primary);
}

/* 11. MAIN APP HEADER */
.agency-app-header {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid var(--panel-border);
    /* border-gray-800 approx */
    background-color: #111827;
    /* bg-gray-900 */
    position: relative;
    z-index: 20;
}

.agency-app-header h2 {
    font-size: 1.25rem;
    /* text-xl */
    font-weight: 700;
    color: var(--brand-primary);
    margin: 0;
}

/* 12. DATA TABLES */
.agency-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.875rem;
    color: var(--text-main);
}

.agency-table th {
    background-color: rgba(30, 41, 59, 0.5);
    /* slate-800/50 */
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--panel-border);
}

.agency-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--panel-border);
    transition: background-color 0.2s;
}

.agency-table tr:last-child td {
    border-bottom: none;
}

.agency-table tr:hover td {
    background-color: rgba(255, 255, 255, 0.02);
}

/* 13. MODALS (Standardized) */
.agency-modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

.agency-modal-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.agency-modal {
    background-color: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    width: 100%;
    max-width: 32rem;
    /* max-w-lg */
    overflow: hidden;
    transform: scale(0.95);
    transition: transform 0.2s;
}

.agency-modal-overlay.open .agency-modal {
    transform: scale(1);
}

.agency-modal-header {
    padding: 1.25rem;
    border-bottom: 1px solid var(--panel-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.agency-modal-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-main);
}

.agency-modal-body {
    padding: 1.5rem;
}

.agency-modal-footer {
    padding: 1rem 1.5rem;
    background-color: rgba(0, 0, 0, 0.2);
    border-top: 1px solid var(--panel-border);
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

/* 14. PAGINATION */
.agency-pagination {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 0.25rem;
}

.agency-page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    color: var(--text-muted);
    text-decoration: none;
    transition: all 0.2s;
    cursor: pointer;
    border: 1px solid transparent;
}

.agency-page-link:hover {
    background-color: var(--input-bg);
    color: var(--text-main);
    border-color: var(--panel-border);
}

.agency-page-link.active {
    background-color: var(--brand-primary);
    color: var(--app-bg);
    font-weight: 600;
}

/* 15. ACCORDIONS (Details/Summary) */
.agency-accordion {
    background-color: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all 0.2s;
}

.agency-accordion[open] {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.agency-accordion summary {
    padding: 1.25rem;
    font-weight: 700;
    color: var(--text-main);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: transparent;
    transition: background-color 0.2s;
}

.agency-accordion summary:hover {
    background-color: rgba(255, 255, 255, 0.02);
}

.agency-accordion summary::-webkit-details-marker {
    display: none;
}

.agency-accordion[open] summary {
    border-bottom: 1px solid var(--panel-border);
}

.agency-accordion-content {
    padding: 1.5rem;
    color: var(--text-muted);
    line-height: 1.6;
}

/* 16. FORM GROUPS */
.agency-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.agency-form-group:last-child {
    margin-bottom: 0;
}

/* 17. BADGE VARIANTS */
.agency-badge-pill {
    border-radius: 999px;
}

.agency-badge-outline {
    background-color: transparent;
    border-color: var(--text-dim);
}

.agency-badge-success {
    background-color: rgba(34, 197, 94, 0.1);
    color: #4ade80;
    border-color: rgba(34, 197, 94, 0.2);
}

.agency-badge-warning {
    background-color: rgba(250, 204, 21, 0.1);
    color: #facc15;
    border-color: rgba(250, 204, 21, 0.2);
}

.agency-badge-error {
    background-color: rgba(239, 68, 68, 0.1);
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.2);
}

.agency-badge-neutral {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--text-dim);
    border-color: var(--panel-border);
}

/* 18. TOAST VARIANTS */
.agency-toast-success {
    background-color: #22c55e;
    color: #ffffff;
}

.agency-toast-error {
    background-color: #ef4444;
    color: #ffffff;
}

/* 19. SHELL COMPONENTS (Solite Standard) */
.agency-shell-header {
    padding: 0.75rem 1rem;
    width: 100%;
    position: sticky;
    top: 0;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(24px);
    z-index: 40;
    border-bottom: 1px solid #27272a;
    /* zinc-800 */
}

.agency-shell-sidebar {
    width: 14rem;
    display: flex;
    flex-direction: column;
    border-left: 1px solid #1f2937;
    /* gray-800 */
    padding: 1rem;
    background-color: transparent;
}

.agency-shell-footer {
    padding: 1rem;
    width: 100%;
    border-top: 1px solid #1f2937;
    /* gray-800 */
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(16px);
    margin-top: auto;
}