/*
 * app.css — Asset Manager Design System
 *
 * Design: Maison Luxury — True Fashion House Digital
 * Philosophy: "Quiet Luxury, Absolute Refinement"
 * Palette: Deep warm blacks + champagne gold accent
 * Typography: Refined weight, generous tracking, couture hierarchy
 * References: Louis Vuitton digital, Hermes.com, Bottega Veneta
 *
 * Copyright (c) 2026 Charles Kwon / MEDiThings Inc.
 */

/* ── Reset ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body { overscroll-behavior: none; }

/* ── Root Variables ── */
:root {
   /*
    * Design Philosophy: "Quiet Luxury, Absolute Refinement"
    *
    * - Warm darkness as sanctuary — never cold, never clinical
    * - Gold as earned distinction — singular, deliberate
    * - Typography breathes like a fashion editorial
    * - Movement is felt, never performed
    * - Inspired by: Hermès noir, Bottega Veneta, Louis Vuitton digital
    */

   /* Surface layers — warm progressive elevation */
   --bg-primary: #080808;
   --bg-secondary: #121210;
   --bg-tertiary: #1c1a18;
   --bg-hover: rgba(255, 248, 240, 0.025);
   --bg-active: rgba(201, 169, 110, 0.06);

   /* Typography — warm refined contrast */
   --text-primary: #e8e4df;
   --text-secondary: #8a8580;
   --text-tertiary: #5a5550;
   --text-inverse: #080808;

   /* Accent — champagne gold, singular luxury tone */
   --accent: #c9a96e;
   --accent-hover: #d4b87a;
   --accent-light: rgba(201, 169, 110, 0.08);

   /* Borders — warm, barely perceptible */
   --border: rgba(255, 248, 240, 0.06);
   --border-light: rgba(255, 248, 240, 0.04);
   --divider: rgba(255, 248, 240, 0.03);

   /* Status — ultra-muted, whispered tints (5% bg, 50% text) */
   --status-active: #22c55e;
   --status-active-bg: rgba(34, 197, 94, 0.05);
   --status-active-text: rgba(34, 197, 94, 0.5);
   --status-stored: #eab308;
   --status-stored-bg: rgba(234, 179, 8, 0.05);
   --status-stored-text: rgba(234, 179, 8, 0.5);
   --status-repair: #ef4444;
   --status-repair-bg: rgba(239, 68, 68, 0.05);
   --status-repair-text: rgba(239, 68, 68, 0.5);
   --status-disposed: #71717a;
   --status-disposed-bg: rgba(113, 113, 122, 0.05);
   --status-disposed-text: rgba(113, 113, 122, 0.5);

   /* Shadows — barely there, depth through warmth */
   --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.12);
   --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.18);
   --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.22);
   --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.35);

   /* Spacing (4px grid, generous) */
   --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;  --sp-4: 16px;
   --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;  --sp-10: 40px;

   /* Radius — refined, slightly tighter */
   --r-sm: 8px;  --r-md: 12px; --r-lg: 12px;  --r-xl: 16px; --r-full: 100px;

   /* Transitions — imperceptible smoothness */
   --ease: cubic-bezier(0.16, 1, 0.3, 1);
   --duration: 0.2s;
}

/* ── Body ── */
body {
   background: var(--bg-primary);
   color: var(--text-primary);
   font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Segoe UI', system-ui, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   font-weight: 300;
   line-height: 1.5;
   letter-spacing: 0.01em;
}

/* ── Scrollbars — thin, golden tint ── */
::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(201, 169, 110, 0.15); border-radius: var(--r-full); }
::-webkit-scrollbar-thumb:hover { background: rgba(201, 169, 110, 0.25); }

/* ── Typography ── */
h1 { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; }
h2 { font-size: 17px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.3; }
h3 { font-size: 11px; font-weight: 400; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.12em; }

/* ── Header ── */
.header {
   background: rgba(8, 8, 8, 0.5);
   backdrop-filter: saturate(120%) blur(30px);
   -webkit-backdrop-filter: saturate(120%) blur(30px);
   border-bottom: 1px solid transparent;
   padding: 0 var(--sp-6);
   padding-top: env(safe-area-inset-top);
   padding-left: calc(var(--sp-6) + env(safe-area-inset-left));
   padding-right: calc(var(--sp-6) + env(safe-area-inset-right));
   display: flex; align-items: center; gap: var(--sp-3);
   position: sticky; top: 0; z-index: 20;
   min-height: 52px; flex-wrap: nowrap;
}
.header h1 { white-space: nowrap; font-weight: 500; letter-spacing: -0.02em; }
.header-brand { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; color: inherit; }
.header-brand:hover, .header-brand:visited, .header-brand:active { text-decoration: none; color: inherit; }
.sidebar-logo { text-decoration: none; }
.header .company { font-size: 10px; color: var(--accent); font-weight: 400; margin-top: -1px; letter-spacing: 0.04em; }
.header-spacer { flex: 1; }

/* ── Search ── */
.search-box {
   display: flex; align-items: center;
   background: rgba(255, 255, 255, 0.02); border-radius: var(--r-sm);
   padding: 8px var(--sp-4); max-width: 280px; flex: 1;
   border: 1px solid rgba(255, 248, 240, 0.08);
   transition: all var(--duration) var(--ease);
}
.search-box:focus-within {
   background: var(--bg-secondary);
   border-color: rgba(201, 169, 110, 0.2);
   box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.06);
}
.search-box input {
   border: none; background: none; font-size: 16px; width: 100%; outline: none;
   color: var(--text-primary); font-weight: 300; letter-spacing: 0.01em;
   caret-color: var(--accent);
}
.search-box input::placeholder { color: var(--text-tertiary); font-weight: 300; }

/* ── Buttons ── */
.btn {
   display: inline-flex; align-items: center; justify-content: center; gap: 6px;
   padding: 0 var(--sp-5); height: 34px; border: none; border-radius: var(--r-sm);
   font-size: 13px; font-weight: 400; cursor: pointer;
   letter-spacing: 0.01em;
   transition: all var(--duration) var(--ease);
   white-space: nowrap;
}
.btn-primary {
   background: var(--accent); color: var(--text-inverse);
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active { opacity: 0.85; }
.btn-ghost { background: none; color: var(--accent); border: none; }
.btn-ghost:hover { color: var(--accent-hover); }
.btn-danger { background: none; color: var(--status-repair-text); border: none; }
.btn-danger:hover { color: var(--status-repair); }
.btn-sm { padding: 0 var(--sp-4); font-size: 12px; height: 32px; }
.btn-icon {
   padding: 0 10px; height: 32px; background: none; border: 1px solid var(--border);
   border-radius: var(--r-sm); cursor: pointer; color: var(--text-secondary);
   transition: all var(--duration) var(--ease);
   display: inline-flex; align-items: center; justify-content: center;
}
.btn-icon:hover { border-color: rgba(201, 169, 110, 0.15); color: var(--text-primary); }
.btn-icon.active { background: var(--accent); color: var(--text-inverse); border-color: var(--accent); }

/* ── Cards (Container) ── */
.card {
   background: var(--bg-secondary); border-radius: var(--r-lg);
   overflow: hidden;
   transition: background var(--duration) var(--ease);
}
.card-padded { padding: var(--sp-8); }

/* ── Asset Cards (Pinterest) ── */
.cards { column-count: 4; column-gap: var(--sp-4); }
.asset-card {
   break-inside: avoid; background: var(--bg-secondary); border-radius: 12px;
   overflow: hidden; margin-bottom: var(--sp-4); cursor: pointer;
   transition: background var(--duration) var(--ease);
}
.asset-card:hover { background: var(--bg-tertiary); }

.card-photo {
   width: 100%; aspect-ratio: 4/3; background: var(--bg-tertiary);
   display: flex; align-items: center; justify-content: center;
   color: var(--text-tertiary); overflow: hidden;
   position: relative;
}
.card-photo img { width: 100%; height: 100%; object-fit: cover; }
.card-body { padding: 18px; }
.card-name { font-size: 16px; font-weight: 500; line-height: 1.4; margin-bottom: 4px; color: var(--text-primary); }
.card-category { font-size: 12px; color: var(--text-secondary); font-weight: 300; letter-spacing: 0.02em; }

/* ── Badge ── */
.badge {
   display: inline-flex; align-items: center; gap: 4px;
   padding: 4px 12px; border-radius: var(--r-full);
   font-size: 12px; font-weight: 400;
   letter-spacing: 0.04em; white-space: nowrap;
}
.badge-in_use { background: var(--status-active-bg); color: var(--status-active-text); }
.badge-stored { background: var(--status-stored-bg); color: var(--status-stored-text); }
.badge-repair { background: var(--status-repair-bg); color: var(--status-repair-text); }
.badge-disposed { background: var(--status-disposed-bg); color: var(--status-disposed-text); }

/* ── Layout ── */
.layout { display: flex; min-height: calc(100vh - 52px); min-height: calc(100dvh - 52px); }

/* ── Sidebar ── */
.sidebar {
   width: 240px; background: var(--bg-secondary);
   overflow-y: auto; flex-shrink: 0;
   padding-bottom: var(--sp-10);
   border-right: none;
}
.sidebar-logo { padding: var(--sp-4) var(--sp-5); text-align: center; border-bottom: 1px solid var(--border); }
.sidebar-logo img { max-width: 100px; max-height: 36px; object-fit: contain; }
.header-logo { display: none; max-height: 24px; max-width: 80px; object-fit: contain; flex-shrink: 0; }
.sidebar h3 { padding: var(--sp-5) var(--sp-5) var(--sp-2); }
.cat-item {
   display: flex; align-items: center; padding: 9px var(--sp-5);
   cursor: pointer; font-size: 13px; gap: var(--sp-2);
   transition: all var(--duration) var(--ease); border-radius: 0;
   color: var(--text-primary); font-weight: 300;
}
.cat-item:hover { background: var(--bg-hover); }
.cat-item.active { background: var(--accent-light); color: var(--accent); font-weight: 400; }
.cat-item .count {
   margin-left: auto; font-size: 11px; color: var(--text-tertiary);
   background: rgba(255, 248, 240, 0.03); padding: 2px 8px; border-radius: var(--r-full);
   font-weight: 300;
}
.cat-item.active .count { background: rgba(201, 169, 110, 0.1); color: var(--accent); }
.cat-item.depth-1 { font-weight: 600; color: var(--text-primary); }
.cat-item.depth-1.active { color: var(--accent); }
.cat-item.depth-2 { padding-left: var(--sp-8); font-size: 13px; }
.cat-item.depth-3 { padding-left: 48px; font-size: 12px; color: var(--text-secondary); }

/* ── Status Chips ── */
.status-bar { display: flex; gap: 8px; padding: var(--sp-4) var(--sp-5); flex-wrap: wrap; }
.status-chip {
   padding: 5px 14px; border-radius: var(--r-full); font-size: 12px; font-weight: 400;
   cursor: pointer; border: 1px solid var(--border); background: transparent;
   transition: all var(--duration) var(--ease);
   letter-spacing: 0.02em;
}
.status-chip:hover { border-color: rgba(255, 248, 240, 0.1); }
.status-chip.active { border-color: transparent; }
.status-chip[data-status="all"].active { background: var(--bg-tertiary); color: var(--text-primary); }
.status-chip[data-status="in_use"].active { background: var(--status-active-bg); color: var(--status-active-text); }
.status-chip[data-status="stored"].active { background: var(--status-stored-bg); color: var(--status-stored-text); }
.status-chip[data-status="repair"].active { background: var(--status-repair-bg); color: var(--status-repair-text); }
.status-chip[data-status="disposed"].active { background: var(--status-disposed-bg); color: var(--status-disposed-text); }

/* ── Container ── */
.container { max-width: 800px; margin: var(--sp-6) auto; padding: 0 var(--sp-5); }
.container-sm { max-width: 700px; margin: var(--sp-6) auto; padding: 0 var(--sp-5); }

/* ── Card Sections ── */
.card-padded h2 {
   font-size: 13px; color: var(--accent); margin-bottom: var(--sp-5); font-weight: 600;
   letter-spacing: 0.04em;
   padding-bottom: var(--sp-3); border-bottom: 1px solid rgba(201, 169, 110, 0.6);
}
.card + .card { margin-top: var(--sp-4); }

/* ── Header Actions ── */
.header-right { display: flex; gap: var(--sp-3); align-items: center; flex-shrink: 0; }
.header-actions { display: flex; gap: var(--sp-3); align-items: center; flex-shrink: 0; }
.view-toggle-mobile { display: none; gap: var(--sp-2); }
.mobile-list-header { display: none; }

/* ── Content ── */
.content { flex: 1; padding: var(--sp-5); overflow-y: auto; }
.content-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); }
.content-header .total { font-size: 13px; color: var(--text-secondary); font-weight: 300; }

/* ── List Table ── */
.list-table {
   display: none; width: 100%; border-collapse: separate; border-spacing: 0;
   background: var(--bg-secondary); border-radius: var(--r-lg); overflow: hidden;
}
.list-table th {
   padding: var(--sp-3) var(--sp-5); text-align: left;
   font-size: 10px; font-weight: 400; color: var(--accent);
   text-transform: uppercase; letter-spacing: 0.12em;
   background: var(--bg-tertiary); cursor: pointer;
   white-space: nowrap; user-select: none;
}
.list-table th:hover { color: var(--accent); }
.list-table td {
   padding: var(--sp-3) var(--sp-5); font-size: 13px;
   font-weight: 300;
}
.list-table tr:last-child td { border-bottom: none; }
.list-table tbody tr { transition: background var(--duration) var(--ease); cursor: pointer; }
.list-table tbody tr:hover td { background: var(--bg-hover); }

/* ── Pagination ── */
.pagination { display: flex; justify-content: center; gap: 6px; padding: var(--sp-8) 0; }
.pagination button {
   padding: 6px 13px; border: 1px solid rgba(255, 248, 240, 0.04); border-radius: var(--r-sm);
   background: transparent; cursor: pointer; font-size: 12px; font-weight: 300;
   color: var(--text-tertiary);
   transition: all var(--duration) var(--ease);
}
.pagination button:hover:not(:disabled) { color: var(--text-secondary); border-color: rgba(255, 248, 240, 0.08); }
.pagination button.active { background: var(--accent); color: var(--text-inverse); border-color: var(--accent); }
.pagination button:disabled { opacity: 0.15; cursor: default; }

/* ── Modal ── */
.modal-overlay {
   position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55);
   backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
   display: none; align-items: center; justify-content: center; z-index: 100;
}
.modal-overlay.show { display: flex; }
.modal {
   background: var(--bg-secondary); border-radius: var(--r-xl);
   padding: var(--sp-8); width: 90%; max-width: 440px;
   box-shadow: var(--shadow-xl);
   border: 1px solid rgba(201, 169, 110, 0.1);
   animation: modalIn 0.2s var(--ease);
}
@keyframes modalIn { from { opacity: 0; transform: translateY(12px); } }
.modal h2 {
   font-size: 13px; color: var(--accent); margin-bottom: var(--sp-6); font-weight: 600;
   letter-spacing: 0.04em;
   padding-bottom: var(--sp-3); border-bottom: 1px solid rgba(201, 169, 110, 0.6);
}
.modal-footer { display: flex; gap: var(--sp-3); justify-content: flex-end; margin-top: var(--sp-6); }

/* ── Form ── */
.form-group { margin-bottom: var(--sp-5); flex: 1; min-width: 0; }
.form-group label {
   display: block; font-size: 13px; font-weight: 500;
   color: var(--accent); margin-bottom: 6px;
   letter-spacing: 0.02em;
}
.form-group label.required::after { content: ' *'; color: var(--status-repair-text); }
.form-group input, .form-group select, .form-group textarea {
   width: 100%; padding: 14px var(--sp-4);
   border: 1px solid rgba(255, 248, 240, 0.08); border-radius: var(--r-sm);
   font-size: 16px; font-family: inherit; font-weight: 300;
   transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
   -webkit-appearance: none; appearance: none;
   background: rgba(255, 255, 255, 0.02);
   color: var(--text-primary);
   color-scheme: dark;
   caret-color: var(--accent);
   letter-spacing: 0.01em;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
   outline: none; border-color: rgba(201, 169, 110, 0.2);
   box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.06);
}
.form-group textarea { resize: vertical; min-height: 80px; }
.form-group select option { background: var(--bg-secondary); color: var(--text-primary); }
.form-row { display: flex; gap: var(--sp-4); }

/* ── User Avatar ── */
.user-menu { position: relative; }
.user-avatar {
   width: 32px; height: 32px; border-radius: var(--r-full);
   background: var(--accent);
   color: var(--text-inverse);
   display: flex; align-items: center; justify-content: center;
   font-size: 13px; font-weight: 400; cursor: pointer;
   transition: opacity var(--duration) var(--ease);
}
.user-avatar:hover { opacity: 0.85; }

/* ── Dropdown ── */
.dropdown {
   position: absolute; right: 0; top: 44px;
   background: var(--bg-secondary); border-radius: var(--r-md);
   box-shadow: var(--shadow-xl); min-width: 210px;
   display: none; overflow: hidden; z-index: 30;
   border: 1px solid rgba(201, 169, 110, 0.08);
   animation: dropIn 0.2s var(--ease);
}
@keyframes dropIn { from { opacity: 0; transform: translateY(-6px); } }
.dropdown.show { display: block; }
.dropdown a {
   display: flex; align-items: center; padding: 11px var(--sp-5);
   color: var(--text-primary); text-decoration: none; font-size: 13px; font-weight: 300;
   transition: background var(--duration) var(--ease);
}
.dropdown a:hover { background: var(--bg-hover); }
.dropdown hr { border: none; border-top: 1px solid var(--border); margin: var(--sp-1) 0; }

/* ── Tree (Categories) ── */
.tree-item {
   display: flex; align-items: center; padding: 11px var(--sp-5);
   cursor: pointer;
   transition: background var(--duration) var(--ease);
}
.tree-item:hover { background: var(--bg-hover); }
.tree-item:last-child { border-bottom: none; }
.tree-item.depth-1 { padding-left: var(--sp-5); font-weight: 400; }
.tree-item.depth-2 { padding-left: 44px; }
.tree-item.depth-3 { padding-left: 68px; font-size: 13px; color: var(--text-secondary); }
.tree-icon { width: 24px; text-align: center; margin-right: var(--sp-2); }
.tree-name { flex: 1; font-weight: 300; }
.tree-name-en { font-size: 11px; color: var(--text-tertiary); margin-left: var(--sp-2); font-weight: 300; }
.tree-code { font-size: 11px; color: var(--text-tertiary); margin-right: var(--sp-3); font-family: monospace; min-width: 56px; font-weight: 300; }
.tree-actions { display: flex; gap: 6px; opacity: 0; transition: opacity var(--duration) var(--ease); }
.tree-item:hover .tree-actions { opacity: 1; }
.tree-actions button {
   background: none; border: 1px solid var(--border); border-radius: var(--r-sm);
   padding: 4px 8px; cursor: pointer; color: var(--text-secondary);
   transition: all var(--duration) var(--ease);
}
.tree-actions button:hover { border-color: rgba(201, 169, 110, 0.2); color: var(--accent); }
.tree-actions button.del:hover { border-color: rgba(239, 68, 68, 0.2); color: var(--status-repair-text); }

/* ── Language Toggle ── */
#langToggle { display: inline-flex; align-items: center; }
.lang-toggle {
   display: inline-flex; align-items: center; border: 1px solid var(--border);
   border-radius: 5px; overflow: hidden; font-size: 11px; font-weight: 300;
   height: 32px; vertical-align: middle;
}
.lang-toggle button {
   padding: 0 10px; border: none; background: none; cursor: pointer;
   color: var(--text-secondary); transition: all var(--duration) var(--ease);
   font-size: 11px; font-weight: 400; height: 100%;
}
.lang-toggle button.active { background: var(--accent); color: var(--text-inverse) !important; }
.lang-toggle button:not(.active) { background: var(--bg-tertiary); color: var(--text-secondary) !important; }
.lang-toggle button:not(.active):hover { color: var(--text-primary) !important; }

/* ── Checkbox — Gold Luxury ── */
input[type="checkbox"] {
   -webkit-appearance: none; appearance: none;
   width: 16px; height: 16px; border: 1px solid rgba(255, 248, 240, 0.15);
   border-radius: 4px; background: transparent; cursor: pointer;
   position: relative; vertical-align: middle; flex-shrink: 0;
   transition: all var(--duration) var(--ease);
}
input[type="checkbox"]:checked {
   background: var(--accent); border-color: var(--accent);
}
input[type="checkbox"]:checked::after {
   content: '';
   position: absolute; top: 50%; left: 50%;
   width: 4px; height: 8px;
   border: solid #ffffff; border-width: 0 1.5px 1.5px 0;
   transform: translate(-50%, -60%) rotate(45deg);
}
input[type="checkbox"]:hover { border-color: rgba(201, 169, 110, 0.3); }

/* ── Status Radio Group ── */
.status-group { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.status-option { display: flex; align-items: center; gap: 6px; }
.status-option input[type="radio"] { width: 16px; height: 16px; accent-color: var(--accent); }
.status-option label { font-size: 14px; cursor: pointer; font-weight: 300; }

/* ── No Data ── */
.no-data { text-align: center; padding: 80px var(--sp-6); color: var(--text-tertiary); }
.no-data .icon { font-size: 48px; margin-bottom: var(--sp-4); opacity: 0.3; }

/* ── Back Link ── */
.back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); text-decoration: none; font-size: 13px; font-weight: 300; }

/* ── Mobile Overlay ── */
/* ── Mobile Bottom Toolbar ── */
.mobile-toolbar {
   display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 20;
   background: var(--bg-secondary); border-top: 1px solid var(--border);
   height: 56px; padding-bottom: env(safe-area-inset-bottom);
   justify-content: space-around; align-items: center;
}
.mobile-toolbar a {
   display: flex; flex-direction: column; align-items: center; gap: 2px;
   color: var(--text-secondary); text-decoration: none; font-size: 10px;
   padding: 6px 12px; transition: color var(--duration) var(--ease);
}
.mobile-toolbar a:hover, .mobile-toolbar a:active { color: var(--accent); }
.mobile-toolbar a i { width: 22px; height: 22px; }
.mobile-toolbar a:first-child { color: var(--accent); font-weight: 600; }

.overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 14; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.overlay.show { display: block; }
.sidebar.mobile-show {
   display: block; position: fixed; top: 52px; left: 0; bottom: 0; z-index: 15;
   box-shadow: var(--shadow-xl);
}

/* ── Responsive ── */
@media (max-width: 1024px) { .cards { column-count: 3; } }
@media (max-width: 768px) {
   .sidebar { display: none; }
   .cards { column-count: 2; }
   .header-spacer { display: none; }
   .search-box { flex: 1; max-width: none; }
   .header .company { display: none; }
   .header h1 { font-size: 17px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
   .hide-mobile { display: none !important; }
   .list-table thead { display: none; }
   .mobile-list-header.show {
      display: block;
      padding: var(--sp-3) var(--sp-4); font-size: 11px; color: var(--accent);
      background: var(--bg-tertiary); border-radius: var(--r-lg) var(--r-lg) 0 0;
      letter-spacing: 0.04em; font-weight: 500;
   }
   .mobile-list-hrow1 { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: 2px; }
   .mobile-list-hrow1 .ml-auto { margin-left: auto; }
   .mobile-list-hrow2 { display: flex; font-size: 11px; color: var(--accent); }
   .mobile-list-hrow2 span { flex: 1; }
   .mobile-list-row2 span { flex: 1; }
   .mobile-list-cell { padding: var(--sp-3) var(--sp-4) !important; display: block !important; }
   .mobile-list-row1 { display: flex !important; align-items: center; gap: var(--sp-2); margin-bottom: 4px; font-size: 14px; }
   .mobile-list-row1 strong { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
   .mobile-list-price { color: var(--accent); font-size: 13px; white-space: nowrap; }
   .mobile-list-row2 { display: flex !important; gap: var(--sp-3); font-size: 12px; color: var(--text-secondary); }
   .mobile-list-row2 span { white-space: nowrap; }
   .view-toggle-mobile { display: flex; }
   .header-logo { display: none; }
   .sidebar-logo { display: none; }
   .mobile-toolbar { display: flex; }
   body { padding-bottom: 60px; }
   .lang-toggle button { padding: 3px 7px; font-size: 10px; }
   .tree-actions { opacity: 1; }
   .tree-name-en { display: none; }
}
@media (max-width: 480px) {
   .cards { column-count: 1; }
   .form-row { flex-direction: column; gap: 0; }
   .header h1 { font-size: 15px; }
   .header { padding: 0 var(--sp-4); gap: var(--sp-2); }
   .search-box { flex: 1; max-width: none; padding: 6px 10px; }
   .search-box input { font-size: 16px; }
   .btn { min-height: 44px; }
   .btn-icon { min-height: 44px; min-width: 44px; }
   .btn-sm { padding: 5px 10px; font-size: 11px; min-height: 44px; }
   .cat-item { min-height: 44px; display: flex; align-items: center; }
   .status-chip { min-height: 36px; padding: 0 14px; display: inline-flex; align-items: center; }
   .pagination button { min-height: 44px; padding: 0 13px; }
   .user-avatar { width: 40px; height: 40px; }
}

/* ── Login Page ── */
.login-bg {
   background: #000000;
   min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center;
   padding: var(--sp-6);
}
.login-card {
   background: var(--bg-secondary); border-radius: var(--r-xl);
   padding: 48px; width: 100%; max-width: 400px;
   box-shadow: var(--shadow-xl);
   border: 1px solid rgba(201, 169, 110, 0.15);
}
.login-card .logo { text-align: center; margin-bottom: var(--sp-10); }
.login-logo { max-width: 120px; max-height: 60px; object-fit: contain; margin-bottom: var(--sp-4); }
.login-card .logo h1 { font-size: 24px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; }
.login-card .logo p { font-size: 11px; color: var(--text-tertiary); margin-top: var(--sp-2); font-weight: 300; letter-spacing: 0.04em; }
.login-card .btn-login {
   width: 100%; padding: 14px; border: none; border-radius: var(--r-sm);
   background: var(--accent); color: var(--text-inverse);
   font-size: 14px; font-weight: 400; cursor: pointer; letter-spacing: 0.06em;
   transition: all var(--duration) var(--ease);
}
.login-card .btn-login:hover { background: var(--accent-hover); }
.login-card .btn-login:active { opacity: 0.85; }
.login-card .btn-login:disabled { opacity: 0.3; cursor: not-allowed; }
.error-msg {
   background: rgba(239, 68, 68, 0.05); color: var(--status-repair-text);
   border-radius: var(--r-sm); padding: 12px var(--sp-5); font-size: 13px; font-weight: 300;
   margin-bottom: var(--sp-5); display: none; text-align: center;
}
.error-msg.show { display: block; }
.remember-row {
   display: flex; align-items: center; justify-content: space-between;
   margin-bottom: var(--sp-8);
}
.remember-row label { display: flex; align-items: center; gap: var(--sp-2); font-size: 13px; cursor: pointer; color: var(--text-secondary); font-weight: 300; }
.remember-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); }
.login-lang { text-align: center; margin-top: var(--sp-6); }

@media (max-width: 480px) {
   .login-card { padding: var(--sp-8) var(--sp-6); border-radius: var(--r-lg); }
}

/* ── Utility Classes ── */
.hidden { display: none; }
.flex-row { display: flex; align-items: center; gap: var(--sp-2); }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-meta { font-size: 13px; color: var(--text-secondary); }
.text-hint { font-size: 12px; color: var(--text-tertiary); font-weight: 300; }
.text-label { font-size: 10px; color: var(--text-tertiary); letter-spacing: 0.08em; text-transform: uppercase; }
.text-accent { color: var(--accent); text-decoration: none; }
.text-warn { color: var(--status-repair); }
.icon-xs { width: 12px; height: 12px; }
.icon-sm { width: 14px; height: 14px; }
.icon-md { width: 16px; height: 16px; }
.icon-lg { width: 20px; height: 20px; }
.icon-xl { width: 32px; height: 32px; }
.icon-xxl { width: 48px; height: 48px; }
.icon-dim { opacity: 0.3; }
.icon-sub { color: var(--text-tertiary); }
.pointer { cursor: pointer; }
.container-sm { max-width: 400px; }
.container-md { max-width: 600px; }
.container-lg { max-width: 900px; }
.overflow-x { overflow-x: auto; }
.mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }

/* ── Print ── */
@media print {
   .header, .sidebar, .pagination, .search-box, .btn, .tree-actions { display: none !important; }
   .content { padding: 0; }
   .cards { column-count: 2; }
   .card, .asset-card { box-shadow: none; border: 1px solid #ddd; }
}