/* ==========================================================================
           1. MODERN ULTRA-SAAS DESIGN SYSTEM (VARIABLES)
           ========================================================================== */
        :root[data-theme="dark"] {
            --bg-main: #080c14;
            --bg-sidebar: #04070d;
            --bg-surface: #0e1726;
            --bg-surface-hover: #142034;
            --bg-element: #16233b;
            --border-color: rgba(255, 255, 255, 0.07);
            --border-highlight: rgba(59, 130, 246, 0.3);

            --sidebar-bg: linear-gradient(180deg, #070c16 0%, #050912 100%);
            --sidebar-border: rgba(148, 163, 184, 0.14);
            --sidebar-title: #f8fbff;
            --sidebar-subtitle: #6f86ab;
            --sidebar-link: #a8bddb;
            --sidebar-link-icon: #9ab2d4;
            --sidebar-hover-bg: rgba(59, 130, 246, 0.14);
            --sidebar-hover-text: #e5edfa;
            --sidebar-active-bg: linear-gradient(135deg, #2f65e8, #4f55ec);
            --sidebar-active-shadow: 0 8px 20px rgba(37, 99, 235, 0.34);
            --sidebar-chip-bg: rgba(255, 255, 255, 0.2);
            --sidebar-chip-border: rgba(255, 255, 255, 0.24);
            --sidebar-chip-text: #f2f7ff;

            --panel-header-bg: #070d18;
            --panel-header-border: rgba(148, 163, 184, 0.14);
            
            --text-heading: #ffffff;
            --text-body: #94a3b8;
            --text-muted: #64748b;
            
            --brand-primary: #3b82f6;
            --brand-gradient: linear-gradient(135deg, #2563eb, #4f46e5);
            --btn-radius: 7px;
            
            --status-progress-bg: rgba(59, 130, 246, 0.12);
            --status-progress: #60a5fa;
            --status-waiting-bg: rgba(245, 158, 11, 0.12);
            --status-waiting: #fbbf24;
            --status-ready-bg: rgba(16, 185, 129, 0.12);
            --status-ready: #34d399;
            --status-danger-bg: rgba(244, 63, 94, 0.12);
            --status-danger: #f43f5e;
            
            --shadow-subtle: 0 10px 30px -10px rgba(0,0,0,0.5);
            --plate-bg: #ffffff;
            --plate-text: #000000;
        }

        :root[data-theme="light"] {
            --bg-main: #f1f5f9;
            --bg-sidebar: #ffffff;
            --bg-surface: #ffffff;
            --bg-surface-hover: #f8fafc;
            --bg-element: #e2e8f0;
            --border-color: #e2e8f0;
            --border-highlight: rgba(37, 99, 235, 0.4);

            --sidebar-bg: linear-gradient(180deg, #ffffff 0%, #f6f9ff 100%);
            --sidebar-border: #dbe4f2;
            --sidebar-title: #0f172a;
            --sidebar-subtitle: #6f86ab;
            --sidebar-link: #445a79;
            --sidebar-link-icon: #4f6990;
            --sidebar-hover-bg: rgba(37, 99, 235, 0.1);
            --sidebar-hover-text: #11335e;
            --sidebar-active-bg: linear-gradient(135deg, #2f65e8, #4f55ec);
            --sidebar-active-shadow: 0 8px 20px rgba(37, 99, 235, 0.22);
            --sidebar-chip-bg: rgba(255, 255, 255, 0.25);
            --sidebar-chip-border: rgba(255, 255, 255, 0.28);
            --sidebar-chip-text: #f8fbff;

            --panel-header-bg: #ffffff;
            --panel-header-border: #e2e8f0;
            
            --text-heading: #0f172a;
            --text-body: #334155;
            --text-muted: #64748b;
            
            --brand-primary: #2563eb;
            --brand-gradient: linear-gradient(135deg, #1d4ed8, #4338ca);
            --btn-radius: 7px;
            
            --status-progress-bg: rgba(37, 99, 235, 0.1);
            --status-progress: #1d4ed8;
            --status-waiting-bg: rgba(217, 119, 6, 0.1);
            --status-waiting: #b45309;
            --status-ready-bg: rgba(5, 150, 105, 0.1);
            --status-ready: #047857;
            --status-danger-bg: rgba(225, 29, 72, 0.1);
            --status-danger: #e11d48;
            
            --shadow-subtle: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
            --plate-bg: #f8fafc;
            --plate-text: #0f172a;
        }

        /* ==========================================================================
           2. BASE RESET & LAYOUT
           ========================================================================== */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Plus Jakarta Sans', sans-serif;
            transition: background 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s, color 0.2s;
        }

        body {
            background-color: var(--bg-main);
            color: var(--text-body);
            display: flex;
            min-height: 100vh;
            overflow-x: hidden;
        }

        /* Sidebar */
        aside.sidebar {
            width: 280px;
            background: var(--sidebar-bg);
            border-right: 1px solid var(--sidebar-border);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: sticky;
            top: 0;
            height: 100vh;
            z-index: 50;
        }

        .brand-header {
            padding: 1.35rem 1rem;
            display: flex;
            align-items: center;
            gap: 0.75rem;
            border-bottom: 1px solid var(--sidebar-border);
        }

        .sidebar-brand-title {
            font-size: 1.06rem;
            font-weight: 800;
            color: var(--sidebar-title);
            line-height: 1.12;
            letter-spacing: 0.3px;
        }

        .sidebar-brand-subtitle {
            margin-top: 0.25rem;
            display: block;
            font-size: 0.62rem;
            color: var(--sidebar-subtitle);
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.7px;
            line-height: 1.15;
        }

        .brand-logo-icon {
            width: 42px;
            height: 42px;
            background: var(--brand-gradient);
            color: #fff;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.25rem;
            box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
        }

        .nav-list {
            padding: 1rem 0.55rem;
            display: flex;
            flex-direction: column;
            gap: 0.16rem;
        }

        .nav-link {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.72rem 0.8rem;
            color: var(--sidebar-link);
            text-decoration: none;
            font-size: 0.82rem;
            font-weight: 700;
            border-radius: 13px;
            letter-spacing: 0.1px;
        }

        .nav-link-label {
            display: inline-flex;
            align-items: center;
            gap: 0.65rem;
        }

        .nav-link-label i {
            width: 14px;
            text-align: center;
            color: var(--sidebar-link-icon);
            font-size: 0.8rem;
        }

        .nav-link:hover {
            background-color: var(--sidebar-hover-bg);
            color: var(--sidebar-hover-text);
        }

        .nav-link:hover .nav-link-label i {
            color: var(--sidebar-hover-text);
        }

        .nav-link.active {
            background: var(--sidebar-active-bg);
            color: #ffffff;
            box-shadow: var(--sidebar-active-shadow);
        }

        .nav-link.active .nav-link-label i {
            color: #ffffff;
        }

        .nav-link-passive {
            opacity: 0.8;
        }

        .nav-link-passive:hover {
            opacity: 1;
        }

        .nav-chip {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 22px;
            height: 22px;
            padding: 0 0.45rem;
            font-size: 0.68rem;
            font-weight: 800;
            border-radius: 999px;
            background-color: var(--sidebar-chip-bg);
            color: var(--sidebar-chip-text);
            border: 1px solid var(--sidebar-chip-border);
        }

        .nav-chip-passive {
            background-color: var(--bg-main);
            color: var(--text-muted);
            border: 1px solid var(--border-color);
        }

        .nav-section-title {
            font-size: 0.74rem;
            font-weight: 800;
            color: var(--sidebar-subtitle);
            text-transform: uppercase;
            letter-spacing: 1.35px;
            padding: 1.1rem 0.8rem 0.32rem;
        }

        .sidebar-footer {
            padding: 1rem 0.75rem;
            border-top: 1px solid var(--sidebar-border);
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .sidebar-close-btn {
            margin-left: auto;
            width: 34px;
            height: 34px;
            border-radius: var(--btn-radius);
            border: 1px solid var(--sidebar-border);
            background: transparent;
            color: var(--sidebar-link);
            display: none;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

        .sidebar-backdrop {
            display: none;
        }

        .sidebar-user-name {
            font-size: 0.92rem;
            font-weight: 800;
            color: var(--sidebar-title);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .sidebar-user-name-link {
            display: block;
            font-size: 0.92rem;
            font-weight: 800;
            color: var(--sidebar-title);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            text-decoration: none;
        }

        .sidebar-user-role {
            font-size: 0.76rem;
            color: var(--sidebar-subtitle);
        }

        .sidebar-profile-link { display: none; }
        .sidebar-settings-btn { display: none; }

        /* Workspace */
        main.workspace {
            flex: 1;
            display: flex;
            flex-direction: column;
            min-width: 0;
        }

        header.navbar {
            height: 80px;
            background-color: var(--panel-header-bg);
            border-bottom: 1px solid var(--panel-header-border);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 2.5rem;
            position: sticky;
            top: 0;
            z-index: 40;
        }

        .navbar-left-cluster {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            min-width: 0;
            flex: 1;
        }

        .navbar-actions {
            display: flex;
            gap: 0.65rem;
            align-items: center;
            flex-wrap: wrap;
            justify-content: flex-end;
        }

        .mobile-menu-toggle {
            width: 38px;
            height: 38px;
            border-radius: var(--btn-radius);
            border: 1px solid var(--border-color);
            background-color: var(--bg-main);
            color: var(--text-heading);
            display: none;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 0.9rem;
            flex: 0 0 auto;
        }

        .content-area {
            padding: 2.5rem;
            display: flex;
            flex-direction: column;
            gap: 2rem;
        }

        /* Controls */
        .search-wrapper {
            position: relative;
            width: 420px;
        }

        .search-wrapper i {
            position: absolute;
            left: 16px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-muted);
            font-size: 0.9rem;
        }

        .search-wrapper input {
            width: 100%;
            background-color: var(--bg-main);
            border: 1px solid var(--border-color);
            padding: 0.75rem 1rem 0.75rem 2.75rem;
            border-radius: 14px;
            color: var(--text-heading);
            font-size: 0.85rem;
            outline: none;
            font-weight: 500;
        }

        .search-wrapper input:focus {
            border-color: var(--brand-primary);
        }

        .action-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.6rem;
            padding: 0.75rem 1.4rem;
            font-size: 0.85rem;
            font-weight: 700;
            border-radius: var(--btn-radius);
            border: none;
            cursor: pointer;
            text-decoration: none;
        }

        .action-btn-primary {
            background: var(--brand-gradient);
            color: #ffffff;
            box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
        }

        .theme-toggle-btn {
            background-color: var(--bg-main);
            border: 1px solid var(--border-color);
            color: var(--text-heading);
            width: 42px;
            height: 42px;
            border-radius: var(--btn-radius);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 1rem;
        }

        /* ==========================================================================
           3. DASHBOARD METRICS & GRID
           ========================================================================== */
        .metrics-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 1.25rem;
        }

        .metric-card {
            background-color: var(--bg-surface);
            border: 1px solid var(--border-color);
            border-radius: 20px;
            padding: 1.5rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            box-shadow: var(--shadow-subtle);
            position: relative;
            overflow: hidden;
        }

        .metric-card:hover {
            border-color: var(--border-highlight);
        }

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

        .metric-icon-box {
            width: 44px;
            height: 44px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
        }

        .dashboard-grid-2col {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 1.5rem;
        }

        @media (max-width: 1200px) {
            .dashboard-grid-2col {
                grid-template-columns: 1fr;
            }
        }

        .section-card {
            background-color: var(--bg-surface);
            border: 1px solid var(--border-color);
            border-radius: 20px;
            padding: 1.5rem;
            box-shadow: var(--shadow-subtle);
            display: flex;
            flex-direction: column;
            gap: 1.25rem;
        }

        /* Custom Table Reset */
        table.enterprise-table {
            width: 100%;
            border-collapse: collapse;
            text-align: left;
            font-size: 0.825rem;
        }

        table.enterprise-table th {
            background-color: var(--bg-sidebar);
            color: var(--text-muted);
            text-transform: uppercase;
            font-size: 0.675rem;
            font-weight: 800;
            letter-spacing: 0.8px;
            padding: 1rem;
            border-bottom: 1px solid var(--border-color);
        }

        table.enterprise-table td {
            padding: 1rem;
            border-bottom: 1px solid var(--border-color);
            color: var(--text-body);
            vertical-align: middle;
        }

        /* License Plate */
        .license-plate {
            background-color: var(--plate-bg);
            color: var(--plate-text);
            border: 1.5px solid #94a3b8;
            padding: 0.2rem 0.5rem;
            border-radius: 6px;
            font-weight: 800;
            font-size: 0.775rem;
            display: inline-flex;
            align-items: center;
            gap: 0.3rem;
        }

        .license-plate .tr-code {
            background-color: #1d4ed8;
            color: #ffffff;
            font-size: 0.55rem;
            font-weight: 900;
            padding: 0.1rem 0.2rem;
            border-radius: 2px;
        }

        .state-tag {
            padding: 0.35rem 0.75rem;
            border-radius: 30px;
            font-size: 0.725rem;
            font-weight: 800;
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
        }

        .state-tag.in-progress { background-color: var(--status-progress-bg); color: var(--status-progress); }
        .state-tag.waiting { background-color: var(--status-waiting-bg); color: var(--status-waiting); }
        .state-tag.ready { background-color: var(--status-ready-bg); color: var(--status-ready); }
        .state-tag.danger { background-color: var(--status-danger-bg); color: var(--status-danger); }

        .mechanic-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: linear-gradient(135deg, #2f65e8, #5b5bf0);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.78rem;
            font-weight: 800;
        }

        .state-tag.received {
            background-color: rgba(100, 116, 139, 0.12);
            color: #94a3b8;
        }

        .service-page-head {
            display: flex;
            flex-direction: column;
            gap: 0.35rem;
            margin: 0;
        }

        .service-top-stack {
            display: flex;
            flex-direction: column;
            gap: 7px;
            margin-bottom: 1rem;
        }

        .service-title {
            font-size: 1.65rem;
            font-weight: 800;
            color: var(--text-heading);
            letter-spacing: -0.02em;
        }

        .service-subtitle {
            color: var(--text-muted);
            font-size: 0.88rem;
        }

        .service-filter-form-wrap {
            background-color: var(--bg-surface);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            padding: 0.9rem;
            margin: 0;
            box-shadow: var(--shadow-subtle);
            display: flex;
            flex-direction: column;
            gap: 0.8rem;
        }

        .service-create-action-row {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            margin: 0;
            padding: 0;
        }

        .service-create-btn {
            width: auto;
            margin: 0;
        }

        .service-filter-form {
            display: grid;
            grid-template-columns: repeat(3, minmax(180px, 1fr)) auto;
            gap: 0.7rem;
            align-items: end;
        }

        .service-filter-actions {
            display: flex;
            gap: 0.55rem;
            align-items: end;
        }

        .service-filter-note {
            color: var(--text-muted);
            font-size: 0.8rem;
            font-weight: 700;
        }

        .service-mobile-hint {
            display: none;
            color: var(--text-muted);
            font-size: 0.76rem;
            font-weight: 700;
            align-items: center;
            gap: 0.4rem;
        }

        .service-filters {
            display: flex;
            align-items: center;
            gap: 0.65rem;
            overflow-x: auto;
            padding: 0.3rem;
            margin-bottom: 1rem;
            border: 1px solid var(--border-color);
            border-radius: 16px;
            background-color: var(--bg-surface);
            scrollbar-width: none;
            -ms-overflow-style: none;
        }

        .service-filters::-webkit-scrollbar {
            display: none;
        }

        .service-filters-wrap {
            position: relative;
            margin-bottom: 0.1rem;
        }

        .service-filters-wrap::before,
        .service-filters-wrap::after {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            width: 28px;
            pointer-events: none;
            z-index: 2;
        }

        .service-filters-wrap::before {
            left: 0;
            background: linear-gradient(90deg, var(--bg-main), rgba(0, 0, 0, 0));
        }

        .service-filters-wrap::after {
            right: 0;
            background: linear-gradient(270deg, var(--bg-main), rgba(0, 0, 0, 0));
        }

        .service-filter-chip {
            flex: 0 0 auto;
            display: inline-flex;
            align-items: center;
            gap: 0.65rem;
            text-decoration: none;
            color: var(--text-body);
            background-color: var(--bg-surface);
            border: 1px solid var(--border-color);
            border-radius: 14px;
            padding: 0.74rem 0.95rem;
            font-size: 0.84rem;
            font-weight: 800;
            white-space: nowrap;
            box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
        }

        .service-filter-chip:hover {
            border-color: var(--border-highlight);
            color: var(--text-heading);
        }

        .service-filter-chip.active {
            background: var(--brand-gradient);
            color: #ffffff;
            border-color: transparent;
            box-shadow: 0 8px 20px rgba(37, 99, 235, 0.28);
        }

        .service-filter-count {
            min-width: 22px;
            height: 22px;
            padding: 0 0.42rem;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 0.72rem;
            font-weight: 800;
            background-color: rgba(37, 99, 235, 0.16);
            color: var(--brand-primary);
        }

        .service-filter-chip.active .service-filter-count {
            background-color: rgba(255, 255, 255, 0.24);
            color: #ffffff;
        }

        .service-board {
            background-color: var(--bg-surface);
            border: 1px solid var(--border-color);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: var(--shadow-subtle);
        }

        .service-board-scroll {
            overflow-x: auto;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: thin;
            scrollbar-color: rgba(100, 116, 139, 0.55) transparent;
        }

        .service-board-scroll::-webkit-scrollbar {
            height: 8px;
        }

        .service-board-scroll::-webkit-scrollbar-thumb {
            background-color: rgba(100, 116, 139, 0.5);
            border-radius: 999px;
        }

        .service-board-scroll::-webkit-scrollbar-track {
            background: transparent;
        }

        .service-table {
            width: 100%;
            border-collapse: collapse;
            min-width: 1200px;
        }

        .service-table th {
            padding: 1rem 1.2rem;
            border-bottom: 1px solid var(--border-color);
            background-color: var(--bg-main);
            color: var(--text-muted);
            text-transform: uppercase;
            font-size: 0.72rem;
            letter-spacing: 0.8px;
            font-weight: 800;
            text-align: left;
        }

        .service-table td {
            padding: 1rem 1.2rem;
            border-bottom: 1px solid var(--border-color);
            vertical-align: top;
            color: var(--text-body);
            font-size: 0.9rem;
        }

        .service-table tr:last-child td {
            border-bottom: 0;
        }

        .service-code {
            color: #f59e0b;
            text-decoration: none;
            font-weight: 800;
            letter-spacing: 0.2px;
        }

        .service-code:hover {
            text-decoration: underline;
        }

        .service-strong {
            color: var(--text-heading);
            font-weight: 800;
        }

        .service-muted {
            color: var(--text-muted);
            font-size: 0.82rem;
        }

        .service-user-pill {
            display: inline-flex;
            align-items: center;
            gap: 0.6rem;
        }

        .service-user-dot {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: var(--brand-gradient);
            color: #ffffff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 0.74rem;
            font-weight: 800;
        }

        .service-total {
            color: var(--status-ready);
            font-size: 1.5rem;
            font-weight: 800;
            letter-spacing: -0.02em;
            white-space: nowrap;
        }

        .service-actions {
            display: flex;
            align-items: center;
            gap: 0.45rem;
            flex-wrap: wrap;
            justify-content: flex-end;
        }

        .service-icon-btn {
            width: 34px;
            height: 34px;
            border-radius: var(--btn-radius);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            color: var(--text-heading);
            background-color: var(--bg-main);
            border: 1px solid var(--border-color);
        }

        .service-icon-btn:hover {
            border-color: var(--brand-primary);
            color: var(--brand-primary);
        }

        .service-pill-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            border-radius: 999px;
            padding: 0.55rem 0.9rem;
            font-size: 0.78rem;
            font-weight: 800;
            border: 1px solid rgba(37, 99, 235, 0.3);
            color: #ffffff;
            background: var(--brand-gradient);
            white-space: nowrap;
        }

        .service-pill-btn.ready {
            background: linear-gradient(135deg, #10b981, #34d399);
            border-color: rgba(16, 185, 129, 0.35);
            color: #052e2b;
        }

        .service-board-footer {
            border-top: 1px solid var(--border-color);
            padding: 1rem 1.2rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.75rem;
            flex-wrap: wrap;
        }

        .service-pagination {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
        }

        .service-page-btn {
            min-width: 34px;
            height: 34px;
            border-radius: var(--btn-radius);
            border: 1px solid var(--border-color);
            background-color: var(--bg-main);
            color: var(--text-heading);
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 0.78rem;
            font-weight: 700;
            padding: 0 0.65rem;
        }

        .service-page-btn.active {
            background: var(--brand-gradient);
            border-color: transparent;
            color: #ffffff;
        }

        .service-page-btn.muted {
            opacity: 0.55;
            pointer-events: none;
        }

        .service-detail-shell {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .service-detail-topbar {
            border: 1px solid var(--border-color);
            background-color: var(--bg-surface);
            border-radius: 16px;
            padding: 0.9rem 1rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1rem;
            flex-wrap: wrap;
            box-shadow: var(--shadow-subtle);
        }

        .service-detail-topbar-main {
            display: flex;
            align-items: center;
            gap: 0.9rem;
            flex-wrap: wrap;
        }

        .service-detail-topbar-main h2 {
            margin: 0;
            color: var(--text-heading);
            font-size: 1.38rem;
            line-height: 1.1;
            letter-spacing: -0.01em;
        }

        .service-detail-topbar-main p {
            margin: 0.25rem 0 0;
            color: var(--text-muted);
            font-size: 0.84rem;
            display: flex;
            align-items: center;
            gap: 0.45rem;
            flex-wrap: wrap;
        }

        .service-detail-topbar-main p strong {
            color: var(--text-heading);
        }

        .service-detail-topbar-main .license-plate {
            text-decoration: none;
            color: var(--plate-text);
        }

        .service-detail-topbar-main .license-plate:hover {
            text-decoration: none;
            color: var(--plate-text);
        }

        .service-topbar-link {
            color: var(--text-heading);
            font-weight: 800;
            text-decoration: none;
        }

        .service-topbar-link:hover {
            color: var(--text-heading);
            text-decoration: none;
        }

        .service-detail-topbar-side {
            display: flex;
            gap: 1.6rem;
            align-items: center;
            flex-wrap: wrap;
        }

        .service-detail-topbar-side span {
            display: block;
            color: var(--text-muted);
            font-size: 0.74rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }

        .service-detail-topbar-side strong {
            color: var(--text-heading);
            font-size: 1rem;
            font-weight: 800;
        }

        .service-detail-layout {
            display: grid;
            grid-template-columns: minmax(0, 2fr) minmax(310px, 0.85fr);
            gap: 1rem;
            align-items: start;
        }

        .service-detail-main {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .service-detail-block,
        .service-detail-summary {
            border: 1px solid var(--border-color);
            border-radius: 16px;
            background-color: var(--bg-surface);
            padding: 1rem;
            box-shadow: var(--shadow-subtle);
        }

        .service-detail-block-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.75rem;
            margin-bottom: 0.8rem;
            padding-bottom: 0.7rem;
            border-bottom: 1px solid var(--border-color);
            flex-wrap: wrap;
        }

        .service-detail-block-head h3,
        .service-detail-summary h3 {
            margin: 0;
            font-size: 1.16rem;
            color: var(--text-heading);
            font-weight: 800;
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
        }

        .service-detail-inline-form {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap: 0.6rem;
            align-items: center;
            margin-bottom: 0.75rem;
        }

        .service-detail-inline-form-iscilik {
            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        }

        .service-input-wide {
            grid-column: span 2;
        }

        .service-detail-inline-form .form-select,
        .service-detail-inline-form .form-input {
            margin: 0;
        }

        .service-kalem-edit-input {
            min-width: 92px;
        }

        .service-detail-discount-form {
            grid-template-columns: minmax(120px, 1fr) auto;
            margin-bottom: 0;
        }

        .service-detail-not-form {
            display: grid;
            gap: 0.65rem;
            margin-bottom: 0.85rem;
        }

        .service-notes-list {
            display: flex;
            flex-direction: column;
            gap: 0.65rem;
        }

        .service-note-item {
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 0.7rem 0.8rem;
            background-color: var(--bg-main);
        }

        .service-note-meta {
            display: flex;
            justify-content: space-between;
            gap: 0.5rem;
            color: var(--text-muted);
            font-size: 0.8rem;
            margin-bottom: 0.35rem;
        }

        .service-note-item p {
            margin: 0;
            color: var(--text-heading);
            white-space: pre-wrap;
        }

        @media (max-width: 1400px) {
            .service-input-wide {
                grid-column: auto;
            }

            .service-detail-discount-form {
                grid-template-columns: 1fr;
            }
        }

        .service-detail-summary {
            position: sticky;
            top: 84px;
            display: flex;
            flex-direction: column;
            gap: 0.9rem;
        }

        .service-detail-summary-rows {
            border-top: 1px solid var(--border-color);
            border-bottom: 1px solid var(--border-color);
            padding: 0.85rem 0;
            display: flex;
            flex-direction: column;
            gap: 0.55rem;
        }

        .service-detail-summary-rows div {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.75rem;
            font-size: 0.88rem;
            color: var(--text-muted);
        }

        .service-detail-summary-rows strong {
            color: var(--text-heading);
            font-weight: 800;
        }

        .service-detail-grand-total {
            border: 1px solid var(--border-color);
            background-color: var(--bg-main);
            border-radius: 12px;
            padding: 0.8rem 0.9rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.8rem;
            color: var(--text-heading);
            font-weight: 800;
        }

        .service-detail-grand-total strong {
            color: var(--brand-primary);
            font-size: 1.9rem;
            line-height: 1;
            letter-spacing: -0.02em;
        }

        .service-detail-actions {
            display: flex;
            flex-direction: column;
            gap: 0.55rem;
        }

        .service-detail-actions .btn {
            width: 100%;
            justify-content: center;
        }

        @media (max-width: 1200px) {
            .service-detail-topbar {
                align-items: flex-start;
            }

            .service-detail-topbar-main,
            .service-detail-topbar-side {
                width: 100%;
            }

            .service-detail-topbar-side {
                justify-content: flex-start;
                gap: 1rem;
            }

            .service-detail-layout {
                grid-template-columns: 1fr;
            }

            .service-detail-summary {
                position: static;
            }

            .service-detail-inline-form,
            .service-detail-inline-form-iscilik {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .service-input-wide {
                grid-column: 1 / -1;
            }

            .service-input-wide {
                grid-column: auto;
            }
        }

        .customer-table {
            min-width: 1450px;
        }

        .customer-plate-list {
            display: flex;
            align-items: center;
            gap: 0.45rem;
            flex-wrap: wrap;
        }

        .customer-type-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 999px;
            padding: 0.32rem 0.6rem;
            font-size: 0.75rem;
            font-weight: 800;
            line-height: 1;
            border: 1px solid transparent;
            opacity: 1;
        }

        .customer-type-badge.bireysel {
            background-color: rgba(59, 130, 246, 0.14);
            color: #93c5fd;
            border-color: rgba(59, 130, 246, 0.35);
        }

        .customer-type-badge.kurumsal {
            background-color: rgba(37, 99, 235, 0.2);
            color: #bfdbfe;
            border-color: rgba(37, 99, 235, 0.4);
        }

        :root[data-theme="light"] .customer-type-badge.bireysel {
            background-color: #dbeafe;
            color: #1d4ed8;
            border-color: #93c5fd;
        }

        :root[data-theme="light"] .customer-type-badge.kurumsal {
            background-color: #e0e7ff;
            color: #3730a3;
            border-color: #a5b4fc;
        }

        .customer-service-count {
            color: var(--text-heading);
            font-weight: 800;
            white-space: nowrap;
        }

        .customer-balance-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 999px;
            padding: 0.38rem 0.72rem;
            font-size: 0.79rem;
            font-weight: 800;
            line-height: 1;
            white-space: nowrap;
            opacity: 1;
        }

        .customer-balance-badge.borc {
            color: #fca5a5;
            background-color: rgba(127, 29, 29, 0.25);
            border: 1px solid rgba(239, 68, 68, 0.25);
        }

        .customer-balance-badge.alacak {
            color: #86efac;
            background-color: rgba(20, 83, 45, 0.3);
            border: 1px solid rgba(34, 197, 94, 0.3);
        }

        .customer-balance-badge.kapali {
            color: #34d399;
            background-color: rgba(6, 78, 59, 0.28);
            border: 1px solid rgba(16, 185, 129, 0.3);
        }

        :root[data-theme="light"] .customer-balance-badge.borc {
            color: #b91c1c;
            background-color: #fee2e2;
            border: 1px solid #fca5a5;
        }

        :root[data-theme="light"] .customer-balance-badge.alacak {
            color: #065f46;
            background-color: #d1fae5;
            border: 1px solid #6ee7b7;
        }

        :root[data-theme="light"] .customer-balance-badge.kapali {
            color: #047857;
            background-color: #d1fae5;
            border: 1px solid #6ee7b7;
        }

        .customer-summary-card {
            border: 1px solid var(--border-color);
            background-color: var(--bg-surface);
            border-radius: 16px;
            padding: 1.2rem 1.25rem;
            display: flex;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .customer-summary-main {
            display: flex;
            align-items: center;
            gap: 1rem;
            min-width: 300px;
        }

        .customer-avatar {
            width: 64px;
            height: 64px;
            border-radius: 16px;
            background: var(--brand-gradient);
            color: #ffffff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1.45rem;
            font-weight: 800;
            letter-spacing: 0.02em;
            flex: 0 0 auto;
        }

        .customer-summary-name {
            color: var(--text-heading);
            font-size: 1.85rem;
            line-height: 1.15;
            margin-bottom: 0.3rem;
        }

        .customer-summary-meta {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            flex-wrap: wrap;
            color: var(--text-muted);
            font-size: 0.86rem;
        }

        .customer-summary-meta span {
            display: inline-flex;
            align-items: center;
            gap: 0.3rem;
        }

        .customer-summary-extra {
            display: grid;
            grid-template-columns: repeat(2, minmax(220px, 1fr));
            gap: 0.45rem 0.9rem;
            margin-top: 0.55rem;
            color: var(--text-muted);
            font-size: 0.83rem;
        }

        .customer-summary-extra span {
            display: inline-flex;
            align-items: flex-start;
            gap: 0.38rem;
            line-height: 1.25;
        }

        .customer-summary-stats {
            display: grid;
            grid-template-columns: repeat(3, minmax(150px, 1fr));
            gap: 1rem;
            align-items: center;
            min-width: 360px;
        }

        .customer-stat-label {
            display: block;
            color: var(--text-muted);
            font-size: 0.75rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 0.3rem;
        }

        .customer-stat-value {
            color: var(--text-heading);
            font-size: 2rem;
            font-weight: 800;
            letter-spacing: -0.02em;
            line-height: 1;
        }

        .customer-stat-value.positive {
            color: #34d399;
        }

        .customer-stat-value.negative {
            color: #f87171;
        }

        .customer-tabs-row {
            margin-top: 1rem;
            display: flex;
            align-items: center;
            gap: 0.65rem;
            flex-wrap: wrap;
        }

        .customer-tab-btn {
            text-decoration: none;
            color: var(--text-muted);
            border: 1px solid var(--border-color);
            background-color: var(--bg-surface);
            border-radius: 10px;
            padding: 0.7rem 1rem;
            font-size: 0.95rem;
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

        .customer-tab-btn.active {
            color: #60a5fa;
            border-color: rgba(96, 165, 250, 0.35);
            background-color: rgba(37, 99, 235, 0.1);
        }

        .customer-tab-btn.customer-tab-btn-cta {
            border-color: rgba(37, 99, 235, 0.25);
            background: var(--brand-gradient);
            color: #ffffff;
            box-shadow: 0 8px 20px rgba(37, 99, 235, 0.2);
        }

        .customer-tab-btn.customer-tab-btn-cta:hover {
            filter: brightness(1.05);
            border-color: transparent;
        }

        .customer-detail-filter-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 0.75rem;
            padding: 1rem 1.2rem;
            border-bottom: 1px solid var(--border-color);
            flex-wrap: wrap;
        }

        .customer-detail-filter-form {
            display: inline-flex;
            align-items: center;
            gap: 0.65rem;
            flex-wrap: wrap;
        }

        .customer-detail-filter-form .form-select {
            min-width: 200px;
        }

        .customer-ledger-table {
            min-width: 1300px;
        }

        .customer-garage-table {
            min-width: 1200px;
        }

        .text-negative {
            color: #f87171;
            font-weight: 800;
            white-space: nowrap;
        }

        .text-positive {
            color: #34d399;
            font-weight: 800;
            white-space: nowrap;
        }

        @media (max-width: 992px) {
            body {
                display: block;
            }

            body.menu-open {
                overflow: hidden;
            }

            aside.sidebar {
                position: fixed;
                left: 0;
                top: 0;
                width: min(86vw, 320px);
                height: 100dvh;
                border-left: 0;
                border-right: 1px solid var(--sidebar-border);
                transform: translateX(-100%);
                transition: transform 0.26s ease;
                z-index: 80;
                box-shadow: 10px 0 30px rgba(2, 6, 23, 0.2);
            }

            body.menu-open aside.sidebar {
                transform: translateX(0);
            }

            .sidebar-close-btn {
                display: inline-flex;
            }

            .sidebar-backdrop {
                position: fixed;
                inset: 0;
                background: rgba(2, 6, 23, 0.5);
                border: 0;
                opacity: 0;
                pointer-events: none;
                z-index: 70;
                display: block;
                transition: opacity 0.2s ease;
            }

            body.menu-open .sidebar-backdrop {
                opacity: 1;
                pointer-events: auto;
            }

            header.navbar {
                height: auto;
                min-height: 72px;
                padding: 0.75rem 1rem;
                flex-wrap: nowrap;
                gap: 0.75rem;
            }

            .mobile-menu-toggle {
                display: inline-flex;
            }

            .navbar-left-cluster {
                min-width: 0;
            }

            .navbar-actions .action-btn {
                width: 34px;
                height: 34px;
                padding: 0;
                border-radius: var(--btn-radius);
                justify-content: center;
                font-size: 0;
                gap: 0;
            }

            .navbar-actions .action-btn i {
                margin: 0;
                font-size: 0.8rem;
            }

            .navbar-actions .action-btn span {
                display: none;
            }

            .navbar-actions {
                flex-wrap: nowrap;
                gap: 0.35rem;
            }

            .theme-toggle-btn {
                width: 34px;
                height: 34px;
                border-radius: var(--btn-radius);
                font-size: 0.8rem;
            }

            .navbar-title-block {
                display: none;
            }

            .intake-layout {
                grid-template-columns: 1fr;
            }

            .service-detail-layout {
                grid-template-columns: 1fr;
            }

            .service-detail-summary {
                position: static;
            }

            .service-detail-inline-form,
            .service-detail-inline-form-iscilik {
                grid-template-columns: 1fr;
            }

            .service-detail-grand-total strong {
                font-size: 1.45rem;
            }

            .vehicle-content-grid {
                grid-template-columns: 1fr;
            }

            .vehicle-tech-grid {
                grid-template-columns: 1fr;
            }

            .vehicle-hero-left h2 {
                font-size: 1.35rem;
            }

            .vehicle-hero-card {
                padding: 0.85rem 0.95rem;
            }

            .vehicle-hero-stats {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                width: 100%;
            }

            .vehicle-hero-stat {
                min-width: 0;
            }

            .vehicle-timeline-toolbar {
                flex-direction: column;
                align-items: stretch;
            }

            .vehicle-timeline-toolbar .form-input {
                min-width: 0;
                width: 100%;
            }

            .vehicle-timeline-filter {
                justify-content: space-between;
                width: 100%;
            }

            .vehicle-timeline-filter .form-select {
                min-width: 0;
                width: 55%;
            }

            .vehicle-panel {
                padding: 0.85rem;
            }

            .vehicle-owner-meta {
                font-size: 0.8rem;
            }

            .intake-fuel-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .content-area {
                padding: 1rem;
                gap: 1.25rem;
            }

            .search-wrapper {
                width: 100%;
            }

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

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

            .service-title {
                font-size: 1.35rem;
            }


        @media (max-width: 640px) {
            .vehicle-hero-stats {
                grid-template-columns: 1fr;
            }

            .vehicle-hero-actions {
                width: 100%;
            }

            .vehicle-hero-timeline,
            .vehicle-hero-open-order {
                width: 100%;
                justify-content: center;
            }
        }
            .customer-summary-stats {
                grid-template-columns: 1fr;
                min-width: 0;
            }

            .customer-stat-value {
                font-size: 1.35rem;
            }

            .service-filter-form {
                grid-template-columns: 1fr;
                gap: 0.55rem;
            }

            .service-filter-actions {
                gap: 0.5rem;
            }

            .service-filter-actions .btn {
                flex: 1;
            }

            .service-mobile-hint {
                display: inline-flex;
            }

            .service-table {
                min-width: 980px;
            }

            .service-filters {
                padding: 0.2rem;
                gap: 0.5rem;
            }

            .service-filter-chip {
                padding: 0.62rem 0.8rem;
                font-size: 0.8rem;
            }

            .service-filters-wrap::before,
            .service-filters-wrap::after {
                width: 20px;
            }
        }

        @media (max-width: 768px) {
            .brand-header {
                padding: 1rem;
            }

            .nav-list {
                padding: 0.7rem 0.5rem;
            }

            .section-card,
            .metric-card {
                border-radius: 14px;
                padding: 1rem;
            }

            .data-card-container {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
            }

            table.enterprise-table {
                min-width: 860px;
            }
        }

        @media (max-width: 480px) {
            .theme-toggle-btn {
                width: 38px;
                height: 38px;
            }

            .brand-logo-icon {
                width: 36px;
                height: 36px;
                border-radius: 10px;
                font-size: 1rem;
            }

            .action-btn {
                width: 100%;
                justify-content: center;
            }
        }

        .page-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .page-actions {
            display: flex;
            gap: 0.75rem;
            flex-wrap: wrap;
        }

        .navbar-title-actions {
            display: flex;
            gap: 0.6rem;
            margin-top: 0.65rem;
            flex-wrap: wrap;
        }

        .navbar-title-actions .action-btn {
            padding: 0.6rem 1rem;
            font-size: 0.8rem;
        }

        .page-kicker {
            font-size: 0.75rem;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--brand-primary);
        }

        .stat-strip {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 1rem;
        }

        .mini-stat {
            background-color: var(--bg-surface);
            border: 1px solid var(--border-color);
            border-radius: 18px;
            padding: 1rem 1.1rem;
            box-shadow: var(--shadow-subtle);
        }

        .mini-stat-label {
            display: block;
            font-size: 0.72rem;
            font-weight: 800;
            color: var(--text-muted);
            text-transform: uppercase;
            margin-bottom: 0.35rem;
        }

        .mini-stat-value {
            font-size: 1.35rem;
            font-weight: 800;
            color: var(--text-heading);
        }

        .surface-card {
            background-color: var(--bg-surface);
            border: 1px solid var(--border-color);
            border-radius: 20px;
            padding: 1.5rem;
            box-shadow: var(--shadow-subtle);
        }

        .surface-card h2,
        .surface-card h3,
        .surface-card h4 {
            color: var(--text-heading);
        }

        .intake-layout {
            display: grid;
            grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
            gap: 1rem;
            align-items: start;
        }

        .intake-left-col,
        .intake-right-col {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .intake-card {
            display: flex;
            flex-direction: column;
            gap: 0.9rem;
            border-radius: 18px;
        }

        .intake-card-head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 0.8rem;
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 0.7rem;
        }

        .intake-card-head h3 {
            font-size: 1.05rem;
            font-weight: 800;
        }

        .intake-selected-box {
            border: 1px solid var(--border-highlight);
            border-radius: 14px;
            padding: 0.9rem;
            background-color: var(--bg-main);
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 0.8rem;
            flex-wrap: wrap;
        }

        .intake-fuel-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 0.6rem;
        }

        .intake-fuel-grid .option-card-label {
            justify-content: center;
            font-size: 0.76rem;
            padding: 0.65rem 0.55rem;
        }

        .intake-upload-box {
            border: 1px dashed var(--border-color);
            border-radius: 14px;
            background-color: var(--bg-main);
            padding: 1.2rem;
            min-height: 180px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            gap: 0.4rem;
            cursor: pointer;
            text-decoration: none;
            color: var(--text-body);
        }

        .intake-upload-box i {
            font-size: 1.6rem;
            color: var(--brand-primary);
        }

        .intake-upload-box strong {
            color: var(--text-heading);
            font-size: 0.95rem;
        }

        .intake-upload-box span {
            font-size: 0.8rem;
            color: var(--text-muted);
        }

        .intake-total-box {
            border: 1px solid var(--border-color);
            border-radius: 12px;
            background-color: var(--bg-main);
            padding: 0.8rem 0.9rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 0.6rem;
            font-weight: 800;
            color: var(--text-heading);
        }

        .intake-total-box strong {
            color: var(--brand-primary);
            font-size: 1.3rem;
            letter-spacing: -0.02em;
        }

        .field-stack {
            display: flex;
            flex-direction: column;
            gap: 0.4rem;
        }

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

        .field-grid-3 {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 1rem;
        }

        .detail-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 1rem;
        }

        .detail-item {
            padding: 1rem;
            border: 1px solid var(--border-color);
            border-radius: 16px;
            background-color: var(--bg-main);
        }

        .detail-item-label {
            display: block;
            font-size: 0.72rem;
            font-weight: 800;
            text-transform: uppercase;
            color: var(--text-muted);
            margin-bottom: 0.35rem;
        }

        .detail-item-value {
            color: var(--text-heading);
            font-weight: 700;
        }

        .vehicle-detail-page {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .vehicle-hero-card {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
            border: 1px solid var(--border-color);
            background-color: var(--bg-surface);
            border-radius: 16px;
            padding: 1rem 1.2rem;
            box-shadow: var(--shadow-subtle);
        }

        .vehicle-hero-left {
            display: flex;
            align-items: center;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .vehicle-hero-left h2 {
            margin: 0;
            font-size: 1.9rem;
            color: var(--text-heading);
            line-height: 1.08;
            letter-spacing: -0.02em;
        }

        .vehicle-hero-meta {
            margin-top: 0.3rem;
            display: flex;
            align-items: center;
            gap: 0.45rem;
            flex-wrap: wrap;
            font-size: 0.86rem;
            color: var(--text-muted);
        }

        .vehicle-hero-timeline {
            text-decoration: none;
            border: 1px solid var(--border-color);
            border-radius: 12px;
            background-color: var(--bg-main);
            color: var(--text-heading);
            font-weight: 800;
            font-size: 0.86rem;
            display: inline-flex;
            align-items: center;
            gap: 0.55rem;
            padding: 0.68rem 1rem;
        }

        .vehicle-hero-actions {
            display: inline-flex;
            align-items: center;
            gap: 0.55rem;
            flex-wrap: wrap;
            justify-content: flex-end;
        }

        .vehicle-hero-stats {
            display: inline-grid;
            grid-template-columns: repeat(3, minmax(150px, 1fr));
            gap: 0.55rem;
        }

        .vehicle-hero-stat {
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 0.55rem 0.65rem;
            background-color: var(--bg-main);
            min-width: 158px;
        }

        .vehicle-hero-stat span {
            display: block;
            color: var(--text-muted);
            font-size: 0.72rem;
            font-weight: 800;
            text-transform: uppercase;
            margin-bottom: 0.2rem;
        }

        .vehicle-hero-stat strong {
            color: var(--text-heading);
            font-size: 1.35rem;
            line-height: 1;
            font-weight: 800;
        }

        .vehicle-hero-open-order {
            text-decoration: none;
            border: 1px solid rgba(37, 99, 235, 0.36);
            border-radius: 12px;
            background: var(--brand-gradient);
            color: #ffffff;
            font-weight: 800;
            font-size: 0.86rem;
            display: inline-flex;
            align-items: center;
            gap: 0.55rem;
            padding: 0.68rem 1rem;
            box-shadow: 0 8px 20px rgba(37, 99, 235, 0.28);
        }

        .vehicle-hero-open-order:hover {
            filter: brightness(1.05);
        }

        .vehicle-hero-timeline:hover {
            color: var(--brand-primary);
            border-color: var(--border-highlight);
        }

        .vehicle-content-grid {
            display: grid;
            grid-template-columns: minmax(290px, 0.95fr) minmax(540px, 1.55fr);
            gap: 1rem;
            align-items: start;
        }

        .vehicle-left-column,
        .vehicle-right-column {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .vehicle-panel {
            border: 1px solid var(--border-color);
            background-color: var(--bg-surface);
            border-radius: 16px;
            padding: 1rem;
            box-shadow: var(--shadow-subtle);
            display: flex;
            flex-direction: column;
            gap: 0.95rem;
        }

        .vehicle-panel-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.75rem;
            padding-bottom: 0.75rem;
            border-bottom: 1px solid var(--border-color);
            flex-wrap: wrap;
        }

        .vehicle-panel-head h3 {
            margin: 0;
            font-size: 1.14rem;
            color: var(--text-heading);
            display: inline-flex;
            align-items: center;
            gap: 0.55rem;
        }

        .vehicle-panel-head a {
            color: var(--brand-primary);
            text-decoration: none;
            font-size: 0.83rem;
            font-weight: 800;
        }

        .vehicle-owner-box {
            display: flex;
            align-items: center;
            gap: 0.85rem;
            border: 1px solid var(--border-color);
            background-color: var(--bg-main);
            border-radius: 12px;
            padding: 0.85rem;
        }

        .vehicle-owner-avatar {
            width: 44px;
            height: 44px;
            border-radius: 12px;
            background: var(--brand-gradient);
            color: #ffffff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            font-weight: 800;
            flex: 0 0 auto;
        }

        .vehicle-owner-name {
            color: var(--text-heading);
            font-size: 1.12rem;
            font-weight: 800;
            line-height: 1.15;
            margin-bottom: 0.22rem;
        }

        .vehicle-owner-meta {
            color: var(--text-muted);
            font-size: 0.83rem;
        }

        .vehicle-balance-row {
            border: 1px solid var(--border-color);
            background-color: var(--bg-main);
            border-radius: 12px;
            padding: 0.75rem 0.9rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.6rem;
            flex-wrap: wrap;
            color: var(--text-muted);
            font-size: 0.85rem;
            font-weight: 700;
        }

        .vehicle-balance-row .negative {
            color: #f87171;
            font-weight: 800;
        }

        .vehicle-balance-row .positive {
            color: #34d399;
            font-weight: 800;
        }

        .vehicle-reminder-item {
            border: 1px solid var(--border-color);
            background-color: var(--bg-main);
            border-radius: 12px;
            padding: 0.75rem 0.85rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.7rem;
            flex-wrap: wrap;
        }

        .vehicle-reminder-item span {
            color: var(--text-muted);
            font-size: 0.81rem;
            font-weight: 700;
            display: block;
            margin-bottom: 0.2rem;
        }

        .vehicle-reminder-item strong {
            color: var(--text-heading);
            font-size: 1rem;
            line-height: 1.1;
            font-weight: 800;
        }

        .vehicle-reminder-item em {
            font-style: normal;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 999px;
            padding: 0.35rem 0.62rem;
            font-size: 0.77rem;
            font-weight: 800;
            white-space: nowrap;
        }

        .vehicle-reminder-item em.safe {
            color: #22c55e;
            background-color: rgba(22, 163, 74, 0.16);
        }

        .vehicle-reminder-item em.warn {
            color: #f59e0b;
            background-color: rgba(245, 158, 11, 0.16);
        }

        .vehicle-reminder-item em.danger {
            color: #f87171;
            background-color: rgba(190, 24, 93, 0.18);
        }

        .vehicle-tech-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0.72rem;
        }

        .vehicle-tech-item {
            border: 1px solid var(--border-color);
            background-color: var(--bg-main);
            border-radius: 12px;
            padding: 0.75rem 0.85rem;
        }

        .vehicle-tech-item span {
            display: block;
            text-transform: uppercase;
            letter-spacing: 0.4px;
            font-size: 0.7rem;
            color: var(--text-muted);
            font-weight: 800;
            margin-bottom: 0.3rem;
        }

        .vehicle-tech-item strong {
            color: var(--text-heading);
            font-size: 1.18rem;
            line-height: 1.1;
            font-weight: 800;
        }

        .vehicle-history-table {
            min-width: 940px;
        }

        .vehicle-history-table td .service-total {
            font-size: 1.02rem;
        }

        .vehicle-history-footnote {
            border-top: 1px solid var(--border-color);
            padding-top: 0.75rem;
            color: var(--text-muted);
            font-size: 0.82rem;
            font-weight: 700;
        }

        .vehicle-single-history-row {
            border: 1px solid var(--border-color);
            background-color: var(--bg-main);
            border-radius: 12px;
            padding: 0.75rem 0.9rem;
            display: flex;
            align-items: center;
            gap: 0.8rem;
            flex-wrap: wrap;
            color: var(--text-body);
            font-size: 0.86rem;
        }

        .vehicle-single-history-row strong {
            color: var(--text-muted);
            font-size: 0.77rem;
            text-transform: uppercase;
            letter-spacing: 0.4px;
            margin-right: 0.25rem;
        }

        .vehicle-history-cta-row {
            display: flex;
            justify-content: flex-end;
            margin-top: 0.1rem;
        }

        .vehicle-timeline-toolbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.8rem;
            padding: 0.2rem 0;
            flex-wrap: wrap;
        }

        .vehicle-timeline-toolbar .form-input {
            min-width: 280px;
            flex: 1;
        }

        .vehicle-timeline-filter {
            display: inline-flex;
            align-items: center;
            gap: 0.55rem;
        }

        .vehicle-timeline-filter span {
            color: var(--text-muted);
            font-size: 0.82rem;
            font-weight: 700;
            white-space: nowrap;
        }

        .vehicle-timeline-filter .form-select {
            min-width: 170px;
        }

        .vehicle-timeline-table {
            min-width: 1260px;
        }

        .vehicle-timeline-table th:first-child,
        .vehicle-timeline-table td:first-child {
            width: 52px;
            text-align: center;
            padding-left: 0.8rem;
            padding-right: 0.8rem;
        }

        .timeline-toggle-btn {
            width: 26px;
            height: 26px;
            border-radius: 8px;
            border: 1px solid var(--border-color);
            background-color: var(--bg-main);
            color: var(--brand-primary);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

        .timeline-toggle-btn:hover {
            border-color: var(--border-highlight);
        }

        .vehicle-kalem-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 999px;
            padding: 0.35rem 0.62rem;
            font-size: 0.76rem;
            font-weight: 800;
            color: #93c5fd;
            background-color: rgba(37, 99, 235, 0.16);
            border: 1px solid rgba(96, 165, 250, 0.25);
            white-space: nowrap;
        }

        .timeline-detail-row {
            display: none;
        }

        .timeline-detail-row.is-open {
            display: table-row;
        }

        .timeline-detail-row > td {
            background-color: rgba(15, 23, 42, 0.35);
            border-bottom: 1px solid var(--border-color);
            padding-top: 0.85rem;
            padding-bottom: 0.9rem;
        }

        .timeline-detail-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.65rem;
            margin-bottom: 0.7rem;
            color: var(--text-heading);
            font-size: 0.92rem;
            flex-wrap: wrap;
        }

        .timeline-detail-head span {
            color: var(--text-muted);
            font-size: 0.8rem;
            font-weight: 700;
        }

        .timeline-inner-scroll {
            border: 1px solid var(--border-color);
            border-radius: 12px;
            overflow: hidden;
        }

        .timeline-inner-table {
            min-width: 760px;
        }

        .timeline-inner-table th,
        .timeline-inner-table td {
            padding-top: 0.75rem;
            padding-bottom: 0.75rem;
        }

        :root[data-theme="light"] .vehicle-reminder-item em.safe {
            color: #047857;
            background-color: #d1fae5;
        }

        :root[data-theme="light"] .vehicle-reminder-item em.warn {
            color: #b45309;
            background-color: #fef3c7;
        }

        :root[data-theme="light"] .vehicle-reminder-item em.danger {
            color: #b91c1c;
            background-color: #fee2e2;
        }

        :root[data-theme="light"] .timeline-detail-row > td {
            background-color: #f8fafc;
        }

        :root[data-theme="light"] .vehicle-kalem-pill {
            color: #1d4ed8;
            background-color: #dbeafe;
            border-color: #bfdbfe;
        }

        .stock-page-shell {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .stock-page-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.8rem;
            flex-wrap: wrap;
        }

        .stock-page-head h2 {
            margin: 0;
            color: var(--text-heading);
            font-size: 1.7rem;
            line-height: 1.1;
        }

        .stock-page-head p {
            margin: 0.25rem 0 0;
            color: var(--text-muted);
            font-size: 0.88rem;
        }

        .stock-add-btn {
            min-width: 120px;
            justify-content: center;
        }

        .stock-filter-chips {
            display: grid;
            grid-template-columns: repeat(4, minmax(170px, 1fr));
            gap: 0.6rem;
        }

        .stock-chip {
            display: inline-flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.5rem;
            text-decoration: none;
            border: 1px solid var(--border-color);
            background-color: var(--bg-surface);
            color: var(--text-body);
            border-radius: 14px;
            padding: 0.8rem 0.9rem;
            font-size: 0.86rem;
            font-weight: 700;
        }

        .stock-chip strong {
            min-width: 28px;
            height: 28px;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 0.75rem;
            background-color: rgba(37, 99, 235, 0.14);
            color: var(--brand-primary);
        }

        .stock-chip.active {
            background: var(--brand-gradient);
            color: #ffffff;
            border-color: transparent;
            box-shadow: 0 8px 20px rgba(37, 99, 235, 0.3);
        }

        .stock-chip.active strong {
            background-color: rgba(255, 255, 255, 0.28);
            color: #ffffff;
        }

        .stock-board {
            border: 1px solid var(--border-color);
            border-radius: 20px;
            background-color: var(--bg-surface);
            box-shadow: var(--shadow-subtle);
            overflow: hidden;
        }

        .stock-board-toolbar {
            padding: 0.85rem 1rem;
            border-bottom: 1px solid var(--border-color);
        }

        .stock-search-form {
            display: flex;
            gap: 0.55rem;
            align-items: center;
            flex-wrap: wrap;
        }

        .stock-search-form .form-input {
            flex: 1;
            min-width: 260px;
        }

        .stock-table {
            min-width: 1080px;
        }

        .stock-status-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 999px;
            padding: 0.25rem 0.55rem;
            margin-left: 0.6rem;
            font-size: 0.73rem;
            font-weight: 800;
            white-space: nowrap;
        }

        .stock-status-pill.ok {
            color: #047857;
            background-color: rgba(16, 185, 129, 0.26);
        }

        .stock-status-pill.warn {
            color: #991b1b;
            background-color: rgba(239, 68, 68, 0.24);
        }

        .stock-status-pill.danger {
            color: #991b1b;
            background-color: rgba(239, 68, 68, 0.24);
        }

        .stock-status-dot {
            width: 18px;
            height: 18px;
            border-radius: 999px;
            display: inline-block;
            margin-left: 0.6rem;
            border: 2px solid transparent;
            vertical-align: middle;
        }

        .stock-status-dot.ok {
            background-color: #22c55e;
            border-color: #16a34a;
            box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
        }

        .stock-status-dot.danger {
            background-color: #ef4444;
            border-color: #dc2626;
            box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
        }

        .stock-sell-price {
            color: #34d399;
            font-weight: 800;
        }

        .stock-board-footer {
            border-top: 1px solid var(--border-color);
            padding: 0.85rem 1rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.75rem;
            flex-wrap: wrap;
            color: var(--text-muted);
            font-size: 0.83rem;
            font-weight: 700;
        }

        .stock-pagination {
            margin-left: auto;
        }

        @media (max-width: 1200px) {
            .stock-filter-chips {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (max-width: 768px) {
            .stock-page-head h2 {
                font-size: 1.35rem;
            }

            .stock-add-btn {
                width: 100%;
            }

            .stock-filter-chips {
                grid-template-columns: 1fr;
            }

            .stock-search-form .form-input {
                min-width: 0;
                width: 100%;
            }

            .stock-search-form .btn {
                width: 100%;
                justify-content: center;
            }

            .stock-pagination {
                margin-left: 0;
            }
        }

        .stock-form-shell {
            border: 1px solid var(--border-color);
            border-radius: 18px;
            background-color: var(--bg-surface);
            box-shadow: var(--shadow-subtle);
            padding: 1rem;
            display: flex;
            flex-direction: column;
            gap: 0.9rem;
        }

        .stock-form-head h2 {
            margin: 0;
            color: var(--text-heading);
            font-size: 1.55rem;
            line-height: 1.1;
        }

        .stock-form-head p {
            margin: 0.3rem 0 0;
            color: var(--text-muted);
            font-size: 0.86rem;
        }

        .stock-part-form {
            display: flex;
            flex-direction: column;
            gap: 0.85rem;
        }

        .stock-form-section {
            border: 1px solid var(--border-color);
            border-radius: 14px;
            background-color: var(--bg-main);
            padding: 0.9rem;
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }

        .stock-form-section h3 {
            margin: 0;
            padding-bottom: 0.65rem;
            border-bottom: 1px solid var(--border-color);
            color: var(--text-heading);
            font-size: 1.02rem;
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
        }

        .stock-profit-box {
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 0.7rem 0.8rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.75rem;
            flex-wrap: wrap;
            background-color: rgba(15, 23, 42, 0.35);
        }

        :root[data-theme="light"] .stock-profit-box {
            background-color: #eef4ff;
            border-color: #cfe0ff;
        }

        .stock-profit-box span {
            display: block;
            color: var(--text-muted);
            font-size: 0.76rem;
            margin-bottom: 0.2rem;
            font-weight: 700;
        }

        .stock-profit-box strong {
            font-size: 1.14rem;
            color: #34d399;
            font-weight: 800;
        }

        .stok-gorsel-onizleme {
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 0.7rem;
            background-color: var(--bg-surface);
            max-width: 280px;
        }

        .stok-gorsel-onizleme img {
            width: 100%;
            height: 170px;
            object-fit: cover;
            border-radius: 10px;
            display: block;
        }

        .stok-detay-sayfasi {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .stok-detay-hero {
            border: 1px solid var(--border-color);
            border-radius: 18px;
            background-color: var(--bg-surface);
            box-shadow: var(--shadow-subtle);
            padding: 1rem;
            display: grid;
            grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
            gap: 1rem;
            align-items: center;
        }

        .stok-detay-gorsel {
            width: 100%;
            border-radius: 14px;
            overflow: hidden;
            border: 1px solid var(--border-color);
            background-color: var(--bg-main);
            min-height: 220px;
        }

        .stok-detay-gorsel img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            min-height: 220px;
        }

        .stok-detay-gorsel-bos {
            min-height: 220px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 0.6rem;
            color: var(--text-muted);
            font-weight: 700;
        }

        .stok-detay-gorsel-bos i {
            font-size: 1.35rem;
        }

        .stok-detay-hero-icerik h2 {
            margin: 0;
            font-size: 1.8rem;
            color: var(--text-heading);
            letter-spacing: -0.03em;
            line-height: 1.08;
        }

        .stok-detay-oem {
            margin-top: 0.35rem;
            color: var(--brand-primary);
            font-weight: 800;
        }

        .stok-detay-hero-icerik p {
            margin: 0.7rem 0 0;
            color: var(--text-muted);
            line-height: 1.45;
        }

        .stok-detay-etiketler {
            margin-top: 0.65rem;
            display: flex;
            align-items: center;
            gap: 0.45rem;
            flex-wrap: wrap;
        }

        .stok-etiket {
            display: inline-flex;
            align-items: center;
            border-radius: 999px;
            border: 1px solid var(--border-color);
            background-color: var(--bg-main);
            color: var(--text-body);
            padding: 0.28rem 0.62rem;
            font-size: 0.75rem;
            font-weight: 800;
        }

        .stok-etiket-ok {
            color: #15803d;
            border-color: rgba(34, 197, 94, 0.35);
            background-color: rgba(34, 197, 94, 0.13);
        }

        .stok-etiket-danger {
            color: #b91c1c;
            border-color: rgba(239, 68, 68, 0.35);
            background-color: rgba(239, 68, 68, 0.14);
        }

        .stok-detay-metrikler .detail-item {
            background-color: var(--bg-surface);
        }

        .stok-detay-tedarik-paneli {
            border: 1px solid var(--border-color);
            border-radius: 16px;
            background-color: var(--bg-surface);
            box-shadow: var(--shadow-subtle);
            overflow: hidden;
        }

        .stok-detay-tedarik-baslik {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.6rem;
            padding: 0.85rem 1rem;
            border-bottom: 1px solid var(--border-color);
        }

        .stok-detay-tedarik-baslik h3 {
            margin: 0;
            color: var(--text-heading);
            font-size: 1.03rem;
        }

        .stok-detay-tedarik-baslik span {
            font-size: 0.8rem;
            font-weight: 800;
            color: var(--text-muted);
        }

        .stok-temin-tablosu {
            min-width: 760px;
        }

        .servis-emri-gorsel-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 0.85rem;
        }

        .servis-emri-gorsel-karti {
            display: flex;
            flex-direction: column;
            gap: 0.55rem;
            border: 1px solid var(--border-color);
            border-radius: 14px;
            background-color: var(--bg-main);
            padding: 0.55rem;
            box-shadow: var(--shadow-subtle);
        }

        .servis-emri-gorsel-link {
            display: block;
            text-decoration: none;
        }

        .servis-emri-gorsel-karti img {
            width: 100%;
            height: 170px;
            object-fit: cover;
            border-radius: 10px;
            display: block;
        }

        .servis-emri-gorsel-alt {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.5rem;
        }

        .servis-emri-gorsel-karti span {
            color: var(--text-muted);
            font-size: 0.78rem;
            font-weight: 700;
        }

        @media (max-width: 900px) {
            .stok-detay-hero {
                grid-template-columns: 1fr;
            }

            .stok-detay-gorsel,
            .stok-detay-gorsel img,
            .stok-detay-gorsel-bos {
                min-height: 190px;
            }

            .stok-gorsel-onizleme {
                max-width: 100%;
            }
        }

        :root[data-theme="light"] .stock-profit-box strong {
            color: #059669;
        }

        .stock-form-actions {
            display: flex;
            justify-content: flex-end;
            gap: 0.6rem;
            padding-top: 0.2rem;
            flex-wrap: wrap;
        }

        .finance-shell {
            display: flex;
            flex-direction: column;
            gap: 0.95rem;
        }

        .finance-action-row {
            display: flex;
            gap: 0.55rem;
            flex-wrap: wrap;
        }

        .finance-action-btn {
            border-radius: 12px;
            font-weight: 800;
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
        }

        .finance-metric-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 0.8rem;
        }

        .finance-metric-card {
            border: 1px solid var(--border-color);
            border-radius: 16px;
            background-color: var(--bg-surface);
            padding: 0.9rem;
            display: flex;
            flex-direction: column;
            gap: 0.35rem;
        }

        .finance-metric-card header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.6rem;
        }

        .finance-metric-card h3 {
            margin: 0;
            color: var(--text-muted);
            font-size: 0.78rem;
            letter-spacing: 0.2px;
            text-transform: uppercase;
        }

        .finance-metric-card header i {
            width: 28px;
            height: 28px;
            border-radius: 8px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background-color: rgba(59, 130, 246, 0.15);
            color: #60a5fa;
            font-size: 0.85rem;
        }

        .finance-metric-card strong {
            color: var(--text-heading);
            font-size: 2rem;
            line-height: 1;
            font-weight: 800;
            letter-spacing: -0.05em;
        }

        .finance-metric-card p {
            margin: 0;
            color: var(--text-muted);
            font-size: 0.78rem;
            font-weight: 700;
        }

        .finance-inline-link {
            color: inherit;
            text-decoration: none;
            font-weight: 800;
        }

        .finance-inline-link:visited,
        .finance-inline-link:hover,
        .finance-inline-link:active,
        .finance-inline-link:focus {
            color: inherit;
            text-decoration: none;
        }

        .finance-metric-card.danger strong,
        .finance-metric-card.danger p {
            color: #ef4444;
        }

        .finance-metric-card.danger header i {
            background-color: rgba(239, 68, 68, 0.14);
            color: #f87171;
        }

        .finance-metric-card.warn strong,
        .finance-metric-card.warn p {
            color: #f59e0b;
        }

        .finance-metric-card.warn header i {
            background-color: rgba(245, 158, 11, 0.16);
            color: #fbbf24;
        }

        .finance-accounts-board {
            border: 1px solid var(--border-color);
            border-radius: 16px;
            background-color: var(--bg-surface);
            padding: 0.8rem;
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }

        .finance-accounts-board h4 {
            margin: 0;
            color: var(--text-heading);
            font-size: 0.95rem;
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
        }

        .finance-account-list {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 0.7rem;
        }

        .finance-account-card {
            border: 1px solid var(--border-color);
            border-radius: 14px;
            padding: 0.75rem;
            background-color: rgba(15, 23, 42, 0.2);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.75rem;
        }

        .finance-account-card span {
            display: block;
            color: var(--text-muted);
            font-size: 0.72rem;
            font-weight: 700;
            margin-bottom: 0.2rem;
        }

        .finance-account-card strong {
            color: var(--text-heading);
            font-size: 1.35rem;
            line-height: 1;
            font-weight: 800;
            letter-spacing: -0.03em;
        }

        .finance-account-card b {
            color: #3b82f6;
            font-size: 1.95rem;
            line-height: 1;
            font-weight: 800;
            letter-spacing: -0.05em;
        }

        .finance-movement-board {
            border: 1px solid var(--border-color);
            border-radius: 16px;
            background-color: var(--bg-surface);
            overflow: hidden;
        }

        .finance-movement-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.75rem;
            padding: 0.85rem 0.95rem;
            border-bottom: 1px solid var(--border-color);
            flex-wrap: wrap;
        }

        .finance-movement-head h4 {
            margin: 0;
            color: var(--text-heading);
            font-size: 1rem;
        }

        .finance-movement-head p {
            margin: 0.2rem 0 0;
            color: var(--text-muted);
            font-size: 0.75rem;
            font-weight: 700;
        }

        .finance-movement-search {
            min-width: 220px;
        }

        .finance-movement-table .service-strong {
            font-size: 0.82rem;
        }

        .finance-move-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 999px;
            padding: 0.26rem 0.55rem;
            font-size: 0.72rem;
            font-weight: 800;
            white-space: nowrap;
        }

        .finance-move-pill.income {
            color: #10b981;
            background-color: rgba(16, 185, 129, 0.16);
        }

        .finance-move-pill.expense {
            color: #ef4444;
            background-color: rgba(239, 68, 68, 0.16);
        }

        :root[data-theme="light"] .finance-account-card {
            background-color: #f8fbff;
        }

        @media (max-width: 1200px) {
            .finance-metric-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .finance-account-list {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (max-width: 768px) {
            .finance-metric-grid,
            .finance-account-list {
                grid-template-columns: 1fr;
            }

            .finance-action-row .btn {
                width: 100%;
                justify-content: center;
            }

            .finance-movement-search {
                min-width: 0;
                width: 100%;
            }
        }

        @media (max-width: 768px) {
            .stock-form-shell {
                padding: 0.8rem;
            }

            .stock-form-head h2 {
                font-size: 1.28rem;
            }

            .stock-form-section {
                padding: 0.75rem;
            }

            .stock-form-actions .btn {
                width: 100%;
                justify-content: center;
            }
        }

        .status-note {
            padding: 0.9rem 1rem;
            border-radius: 14px;
            background-color: var(--status-progress-bg);
            border: 1px solid rgba(59, 130, 246, 0.15);
            color: var(--status-progress);
            font-weight: 700;
        }

        .error-note {
            padding: 0.9rem 1rem;
            border-radius: 14px;
            background-color: var(--status-danger-bg);
            border: 1px solid rgba(244, 63, 94, 0.18);
            color: var(--status-danger);
            font-weight: 700;
        }

        .auth-shell {
            min-height: 100vh;
            display: grid;
            place-items: center;
            padding: 2rem;
            background:
                radial-gradient(circle at top left, rgba(37, 99, 235, 0.18), transparent 32%),
                radial-gradient(circle at bottom right, rgba(79, 70, 229, 0.12), transparent 30%),
                var(--bg-main);
        }

        .auth-grid {
            width: min(100%, 1040px);
            display: grid;
            grid-template-columns: 1.05fr 0.95fr;
            gap: 1.5rem;
            align-items: stretch;
        }

        .auth-showcase {
            background:
                linear-gradient(160deg, rgba(30, 64, 175, 0.82), rgba(67, 56, 202, 0.88)),
                radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.18), transparent 35%);
            color: #e2e8f0;
            border: 1px solid rgba(148, 163, 184, 0.25);
            border-radius: 24px;
            padding: 2rem;
            box-shadow: var(--shadow-subtle);
            display: flex;
            flex-direction: column;
            gap: 1rem;
            justify-content: center;
        }

        .auth-showcase-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            width: fit-content;
            border-radius: 999px;
            padding: 0.35rem 0.8rem;
            font-size: 0.72rem;
            font-weight: 800;
            letter-spacing: 0.3px;
            background-color: rgba(255, 255, 255, 0.16);
            border: 1px solid rgba(255, 255, 255, 0.25);
        }

        .auth-showcase-title {
            font-size: clamp(1.35rem, 2.2vw, 2rem);
            font-weight: 800;
            color: #ffffff;
            line-height: 1.25;
            letter-spacing: -0.02em;
        }

        .auth-showcase-text {
            font-size: 0.9rem;
            line-height: 1.7;
            color: rgba(226, 232, 240, 0.92);
            max-width: 48ch;
        }

        .auth-showcase-list {
            display: flex;
            flex-direction: column;
            gap: 0.6rem;
            margin-top: 0.35rem;
        }

        .auth-showcase-item {
            display: flex;
            align-items: center;
            gap: 0.55rem;
            font-size: 0.82rem;
            font-weight: 700;
            color: rgba(241, 245, 249, 0.95);
        }

        .auth-showcase-item i {
            width: 20px;
            text-align: center;
            color: #bfdbfe;
        }

        .auth-card {
            width: min(100%, 460px);
            background-color: var(--bg-surface);
            border: 1px solid var(--border-color);
            border-radius: 24px;
            padding: 2rem;
            box-shadow: var(--shadow-subtle);
            display: flex;
            flex-direction: column;
            gap: 1.25rem;
        }

        .auth-brand {
            display: flex;
            align-items: center;
            gap: 0.85rem;
        }

        .auth-form {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .auth-switch {
            color: var(--text-body);
            font-size: 0.85rem;
        }

        .auth-meta-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.75rem;
            flex-wrap: wrap;
            color: var(--text-body);
            font-size: 0.84rem;
            padding-top: 0.25rem;
        }

        .auth-switch a,
        .inline-link {
            color: var(--brand-primary);
            text-decoration: none;
            font-weight: 700;
        }

        .dashboard-hero {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .dashboard-date-pill {
            background-color: var(--bg-surface);
            border: 1px solid var(--border-color);
            border-radius: 14px;
            padding: 0.8rem 1rem;
            color: var(--text-heading);
            font-size: 0.85rem;
            font-weight: 800;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

        .metric-card-soft {
            min-height: 150px;
        }

        .metric-line {
            display: flex;
            align-items: baseline;
            gap: 0.45rem;
            flex-wrap: wrap;
        }

        .metric-line strong {
            font-size: 2rem;
            font-weight: 800;
            color: var(--text-heading);
            letter-spacing: -0.04em;
        }

        .metric-line span {
            font-size: 0.95rem;
            color: var(--text-body);
        }

        .metric-accent {
            color: var(--status-ready);
            font-weight: 800;
        }

        .metric-danger {
            color: var(--status-danger);
        }

        .metric-meta-row {
            display: flex;
            justify-content: space-between;
            gap: 0.75rem;
            flex-wrap: wrap;
            font-size: 0.82rem;
        }

        .metric-meta-row strong {
            color: var(--text-heading);
        }

        .metric-meta-muted {
            color: var(--text-muted);
        }

        .list-compact {
            display: flex;
            flex-direction: column;
            gap: 0.9rem;
        }

        .risk-card {
            background-color: rgba(2, 6, 23, 0.5);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            padding: 1rem;
            display: flex;
            flex-direction: column;
            gap: 0.35rem;
        }

        .risk-card-top {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 0.75rem;
        }

        .risk-card-name {
            color: var(--text-heading);
            font-weight: 800;
        }

        .risk-card-amount {
            color: var(--status-danger);
            font-weight: 800;
        }

        .risk-card-meta {
            font-size: 0.75rem;
            color: var(--text-muted);
            display: flex;
            gap: 0.75rem;
            flex-wrap: wrap;
        }

        :root[data-theme="light"] .risk-card {
            background-color: #f8fafc;
            border-color: #dbe4f2;
        }

        :root[data-theme="light"] .risk-card-name {
            color: #0f172a;
        }

        :root[data-theme="light"] .risk-card-meta {
            color: #475569;
        }

        .dashboard-link {
            color: var(--brand-primary);
            text-decoration: none;
            font-size: 0.8rem;
            font-weight: 800;
        }

        .table-subtle {
            font-size: 0.74rem;
            color: var(--text-muted);
            margin-top: 0.2rem;
        }

        .empty-state {
            padding: 1rem;
            border-radius: 16px;
            border: 1px dashed var(--border-color);
            color: var(--text-muted);
            text-align: center;
        }

        @media (max-width: 980px) {
            .auth-grid {
                grid-template-columns: 1fr;
            }

            .auth-showcase {
                order: 2;
                padding: 1.35rem;
                border-radius: 18px;
            }

            .auth-card {
                order: 1;
            }
        }

        @media (max-width: 768px) {
            .field-grid-2,
            .field-grid-3 {
                grid-template-columns: 1fr;
            }

            .dashboard-hero {
                align-items: stretch;
            }
        }