* {
                box-sizing: border-box;
                margin: 0;
                padding: 0;
            }

            body {
                font-family: "Plus Jakarta Sans", system-ui, sans-serif;
                background: #f8fafc;
                min-height: 100vh;
            }

            .container {
                max-width: 1200px;
                margin: 0 auto;
                padding: 0 24px;
            }

            .nav {
                background: white;
                border-bottom: 1px solid #e2e8f0;
                padding: 16px 0;
                position: sticky;
                top: 0;
                z-index: 100;
            }

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

            .logo {
                font-size: 1.5rem;
                font-weight: 700;
                color: #2563eb;
                text-decoration: none;
                display: flex;
                align-items: center;
                gap: 10px;
            }

            .logo img {
                width: 32px;
                height: 32px;
                object-fit: contain;
                border-radius: 8px;
                background: transparent;
            }

            .nav-left {
                display: flex;
                align-items: center;
                gap: 16px;
            }

            .btn-dashboard {
                background: #eff6ff;
                color: #2563eb;
                border: 1px solid #bfdbfe;
                padding: 8px 16px;
                border-radius: 8px;
                font-size: 0.875rem;
                font-weight: 600;
                text-decoration: none;
                transition: background 0.2s;
            }

            .btn-dashboard:hover {
                background: #dbeafe;
            }

            .nav-right {
                display: flex;
                align-items: center;
                gap: 16px;
            }

            .workspace-switcher {
                position: relative;
                display: inline-block;
            }

            .workspace-dropdown-btn {
                background: #f1f5f9;
                border: 1px solid #e2e8f0;
                padding: 8px 16px;
                border-radius: 8px;
                font-size: 0.875rem;
                font-weight: 500;
                cursor: pointer;
                display: flex;
                align-items: center;
                gap: 8px;
                font-family: inherit;
                color: #0f172a;
                transition:
                    background 0.2s,
                    border-color 0.2s;
            }

            .workspace-dropdown-btn:hover {
                background: #e2e8f0;
                border-color: #cbd5e1;
            }

            .workspace-dropdown-btn::after {
                content: "▼";
                font-size: 0.625rem;
                margin-left: 4px;
                transition: transform 0.2s;
            }

            .workspace-dropdown-btn.active::after {
                transform: rotate(180deg);
            }

            .workspace-dropdown-menu {
                position: absolute;
                top: 100%;
                right: 0;
                margin-top: 4px;
                background: white;
                border: 1px solid #e2e8f0;
                border-radius: 8px;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
                min-width: 240px;
                max-height: 300px;
                overflow-y: auto;
                z-index: 200;
                display: none;
            }

            .workspace-dropdown-menu.show {
                display: block;
            }

            .workspace-dropdown-item {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 12px 16px;
                cursor: pointer;
                transition: background 0.15s;
                text-decoration: none;
                color: #0f172a;
            }

            .workspace-dropdown-item:hover {
                background: #f8fafc;
            }

            .workspace-dropdown-item.active {
                background: #eff6ff;
            }

            .workspace-dropdown-item:first-child {
                border-radius: 8px 8px 0 0;
            }

            .workspace-dropdown-item:last-child {
                border-radius: 0 0 8px 8px;
            }

            .workspace-dropdown-item-name {
                font-size: 0.875rem;
                font-weight: 500;
            }

            .workspace-dropdown-item-badge {
                font-size: 0.625rem;
                padding: 2px 6px;
                border-radius: 4px;
                background: #2563eb;
                color: white;
                font-weight: 600;
            }

            .workspace-dropdown-divider {
                height: 1px;
                background: #e2e8f0;
                margin: 4px 0;
            }

            .workspace-dropdown-footer {
                padding: 8px 16px;
                border-top: 1px solid #e2e8f0;
            }

            .workspace-dropdown-footer a {
                font-size: 0.75rem;
                color: #64748b;
                text-decoration: none;
            }

            .workspace-dropdown-footer a:hover {
                color: #2563eb;
            }

            .btn-logout {
                background: none;
                border: none;
                color: #dc2626;
                font-size: 0.875rem;
                cursor: pointer;
                font-weight: 500;
                font-family: inherit;
            }

            .btn-logout:hover {
                text-decoration: underline;
            }

            .main {
                padding: 32px 0;
            }

            .header {
                display: flex;
                justify-content: center;
                align-items: center;
                text-align: center;
                margin-bottom: 32px;
            }

            .header h1 {
                font-size: 1.875rem;
                font-weight: 700;
                color: #0f172a;
            }

            .btn-secondary {
                background: white;
                color: #374151;
                border: 1px solid #d1d5db;
                padding: 10px 20px;
                border-radius: 8px;
                font-size: 0.875rem;
                font-weight: 500;
                cursor: pointer;
                text-decoration: none;
                transition: background 0.2s;
            }

            .btn-secondary:hover {
                background: #f9fafb;
            }

            .card {
                background: white;
                border-radius: 12px;
                padding: 32px;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
                margin-bottom: 24px;
            }

            .card-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 24px;
            }

            .card-title {
                font-size: 1.5rem;
                font-weight: 700;
                color: #0f172a;
            }

            .badge {
                padding: 6px 12px;
                border-radius: 9999px;
                font-size: 0.75rem;
                font-weight: 600;
            }

            .badge-active {
                background: #dcfce7;
                color: #16a34a;
            }

            .badge-inactive {
                background: #f1f5f9;
                color: #64748b;
            }

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

            .info-item {
                padding: 16px;
                background: #f8fafc;
                border-radius: 8px;
                text-align: center;
            }

            .info-label {
                font-size: 0.75rem;
                color: #64748b;
                text-transform: uppercase;
                letter-spacing: 0.05em;
                margin-bottom: 4px;
            }

            .info-value {
                font-size: 1rem;
                font-weight: 600;
                color: #0f172a;
            }

            .section {
                margin-top: 32px;
            }

            .section-title {
                font-size: 1.25rem;
                font-weight: 600;
                color: #0f172a;
                margin-bottom: 16px;
            }

            .btn-primary {
                background: #2563eb;
                color: white;
                border: none;
                padding: 12px 24px;
                border-radius: 8px;
                font-size: 0.875rem;
                font-weight: 600;
                cursor: pointer;
                display: inline-flex;
                align-items: center;
                gap: 8px;
            }

            .btn-primary:hover {
                background: #1d4ed8;
            }

            .loading {
                display: flex;
                justify-content: center;
                align-items: center;
                min-height: 60vh;
            }

            .spinner {
                width: 40px;
                height: 40px;
                border: 3px solid #e2e8f0;
                border-top-color: #2563eb;
                border-radius: 50%;
                animation: spin 1s linear infinite;
            }

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

            .workspace-list {
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
                gap: 24px;
            }

            .workspace-card {
                background: white;
                border-radius: 12px;
                padding: 24px;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
                cursor: pointer;
                transition:
                    box-shadow 0.2s,
                    transform 0.2s;
            }

            .workspace-card:hover {
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
                transform: translateY(-2px);
            }

            .workspace-card h3 {
                font-size: 1.125rem;
                font-weight: 600;
                color: #0f172a;
                margin-bottom: 8px;
            }

            .workspace-card p {
                font-size: 0.875rem;
                color: #64748b;
                margin-bottom: 4px;
            }

            .empty-state {
                text-align: center;
                padding: 64px 24px;
                background: white;
                border-radius: 12px;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            }

            .empty-state p {
                color: #64748b;
                margin-bottom: 16px;
            }

            .section-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 16px;
            }

            .section-header .section-title {
                margin-bottom: 0;
            }

            .btn-sm {
                padding: 6px 14px;
                font-size: 0.8125rem;
                border-radius: 6px;
            }

            .btn-danger {
                background: #dc2626;
                color: white;
                border: 1px solid #dc2626;
                padding: 6px 14px;
                border-radius: 6px;
                font-size: 0.8125rem;
                font-weight: 600;
                cursor: pointer;
                font-family: inherit;
            }

            .btn-danger:hover {
                background: #b91c1c;
                border-color: #b91c1c;
            }

            .dep-group-list {
                display: flex;
                flex-direction: column;
                gap: 8px;
                margin-bottom: 16px;
            }

            .dep-group-row {
                display: flex;
                justify-content: space-between;
                align-items: center;
                gap: 12px;
                padding: 12px 16px;
                background: white;
                border: 1px solid #e2e8f0;
                border-radius: 8px;
            }

            .dep-group-info {
                display: flex;
                align-items: center;
                gap: 8px;
                flex-wrap: wrap;
            }

            .dep-group-actions {
                display: flex;
                gap: 8px;
                flex-shrink: 0;
            }

            .dep-tag {
                display: inline-block;
                padding: 2px 8px;
                border-radius: 9999px;
                font-size: 0.75rem;
                font-weight: 600;
                background: #eff6ff;
                color: #2563eb;
            }

            .dep-empty {
                color: #64748b;
                font-size: 0.875rem;
                padding: 16px;
                background: white;
                border: 1px dashed #cbd5e1;
                border-radius: 8px;
                margin-bottom: 16px;
            }

            .dep-editor {
                padding: 16px;
                background: #f8fafc;
                border: 1px solid #e2e8f0;
                border-radius: 8px;
            }

            .dep-editor-title {
                font-size: 1rem;
                font-weight: 600;
                color: #0f172a;
                margin-bottom: 12px;
            }

            .dep-form {
                display: flex;
                gap: 10px;
                flex-wrap: wrap;
            }

            .dep-form input {
                flex: 1 1 180px;
                padding: 10px 12px;
                border: 1px solid #d1d5db;
                border-radius: 8px;
                font-size: 0.875rem;
                font-family: inherit;
            }

            .dep-form input:focus {
                outline: none;
                border-color: #2563eb;
                box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
            }

            .dep-asset-table-wrap {
                overflow-x: auto;
                margin-bottom: 16px;
                background: white;
                border: 1px solid #e2e8f0;
                border-radius: 8px;
            }

            .dep-asset-table {
                width: 100%;
                border-collapse: collapse;
                font-size: 0.875rem;
            }

            .dep-asset-table th {
                text-align: left;
                padding: 10px 14px;
                background: #f8fafc;
                color: #64748b;
                font-weight: 600;
                border-bottom: 1px solid #e2e8f0;
            }

            .dep-asset-table td {
                padding: 10px 14px;
                border-bottom: 1px solid #f1f5f9;
                color: #0f172a;
            }

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