:root {
  color-scheme: light;
  --bg: #f5f7fb;
  --surface: #ffffff;
  --surface-muted: #f8f9fc;
  --surface-hover: #f2f5fa;
  --border: #e6eaf1;
  --text: #172033;
  --text-muted: #7d879c;
  --text-soft: #a0a8b8;
  --primary: #5266e9;
  --primary-dark: #3f51cf;
  --primary-soft: #eef0ff;
  --green: #34b887;
  --green-soft: #e9f9f2;
  --amber: #f0a63e;
  --amber-soft: #fff5e5;
  --shadow: 0 8px 30px rgba(38, 53, 92, .055);
  --sidebar: 250px;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #151922;
  --surface: #1e2430;
  --surface-muted: #1a202b;
  --surface-hover: #272f3e;
  --border: #303949;
  --text: #edf1fa;
  --text-muted: #9ba6bb;
  --text-soft: #6f7b91;
  --primary: #7b8aff;
  --primary-dark: #6978f1;
  --primary-soft: #2b3155;
  --green: #50d4a0;
  --green-soft: #17382e;
  --amber: #f7b95e;
  --amber-soft: #3b2e1c;
  --shadow: 0 8px 30px rgba(0, 0, 0, .2);
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased; transition: background .2s ease, color .2s ease; }
button, input, select { font: inherit; }
button { color: inherit; cursor: pointer; }
.app-shell { display: flex; min-height: 100vh; }
.sidebar { width: var(--sidebar); flex: 0 0 var(--sidebar); background: var(--surface); border-right: 1px solid var(--border); padding: 27px 16px 20px; display: flex; flex-direction: column; min-height: 100vh; }
.brand-row { display: flex; align-items: center; gap: 10px; padding: 0 10px 32px; }
.brand-mark { width: 31px; height: 31px; border-radius: 10px; background: var(--primary); color: white; display: grid; place-items: center; font-size: 19px; font-weight: 800; box-shadow: 0 5px 12px rgba(82, 102, 233, .25); }
.brand-name { font-weight: 800; letter-spacing: -.3px; font-size: 16px; }.brand-subtitle { color: var(--text-soft); font-size: 10px; letter-spacing: .8px; text-transform: uppercase; margin-top: 2px; }
.eyebrow { color: var(--text-soft); font-size: 10px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase; margin: 0 0 8px; }.company-switcher { padding: 0 8px 28px; border-bottom: 1px solid var(--border); }.company-button { border: 0; background: transparent; display: flex; align-items: center; gap: 9px; width: 100%; padding: 4px 0; font-weight: 650; font-size: 12px; text-align: left; }.company-avatar { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: #edf0ff; color: var(--primary); font-size: 9px; font-weight: 800; }.company-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.chevron { color: var(--text-soft); font-size: 16px; }
.main-nav { padding-top: 27px; }.nav-label { display: block; padding: 0 12px 10px; color: var(--text-soft); font-size: 10px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase; }.nav-label-spaced { margin-top: 28px; }.nav-item { position: relative; border: 0; background: transparent; color: var(--text-muted); width: 100%; padding: 11px 12px; border-radius: 9px; display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 12px; text-align: left; transition: .15s ease; }.nav-item:hover { background: var(--surface-hover); color: var(--text); }.nav-item.active { color: var(--primary); background: var(--primary-soft); }.nav-icon { width: 15px; font-size: 17px; line-height: 1; text-align: center; }.nav-badge { margin-left: auto; border-radius: 5px; padding: 3px 6px; background: var(--amber-soft); color: var(--amber); font-size: 10px; }
.sidebar-bottom { margin-top: auto; }.connection-card { background: var(--surface-muted); border: 1px solid var(--border); padding: 11px 10px; border-radius: 9px; display: flex; align-items: center; gap: 9px; margin: 0 0 19px; }.connection-card strong, .connection-card small { display: block; }.connection-card strong { font-size: 11px; }.connection-card small { font-size: 10px; color: var(--text-muted); margin-top: 2px; }.status-dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }.profile-row { display: flex; align-items: center; gap: 9px; padding: 0 8px; }.profile-avatar, .topbar-avatar { width: 30px; height: 30px; border-radius: 50%; background: #dfe4ff; color: #5364d9; display: grid; place-items: center; font-size: 10px; font-weight: 800; }.profile-copy { flex: 1; min-width: 0; cursor: pointer; }.profile-copy:hover strong { color: var(--primary); }.profile-copy strong, .profile-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.profile-copy strong { font-size: 11px; }.profile-copy small { color: var(--text-muted); font-size: 10px; margin-top: 2px; }
.main-content { flex: 1; min-width: 0; }.topbar { height: 75px; border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 43px; justify-content: space-between; background: var(--surface); }.breadcrumb { display: flex; gap: 12px; align-items: center; color: var(--text-muted); font-size: 12px; }.breadcrumb strong { color: var(--text); }.breadcrumb-separator { color: var(--text-soft); }.topbar-actions { display: flex; gap: 22px; align-items: center; }.icon-button { border: 0; padding: 3px; background: transparent; color: var(--text-muted); font-size: 19px; line-height: 1; }.icon-button:hover { color: var(--text); }.notification-button { position: relative; }.notification-button i { position: absolute; width: 5px; height: 5px; background: #f26464; border: 1px solid var(--surface); border-radius: 50%; top: 1px; right: 0; }.theme-toggle { border: 0; display: inline-flex; align-items: center; gap: 5px; background: transparent; padding: 0; color: var(--text-soft); font-size: 15px; }.theme-track { display: block; width: 30px; height: 16px; padding: 2px; border-radius: 12px; background: var(--primary); }.theme-thumb { display: block; width: 12px; height: 12px; border-radius: 50%; background: white; transform: translateX(0); transition: transform .2s ease; }.dark .theme-thumb, html[data-theme="dark"] .theme-thumb { transform: translateX(14px); }.menu-button, .mobile-close { display: none; }
.page-wrap { max-width: 1440px; margin: 0 auto; padding: 38px 43px 70px; }.page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 31px; }.page-heading h1 { font-size: 27px; line-height: 1.2; letter-spacing: -.9px; margin: 0; }.heading-subtitle { color: var(--text-muted); margin: 7px 0 0; font-size: 12px; }.primary-button, .secondary-button, .filter-button { border: 0; border-radius: 8px; padding: 12px 17px; font-weight: 700; font-size: 12px; transition: transform .15s ease, background .15s ease; }.primary-button { background: var(--primary); color: white; box-shadow: 0 7px 16px rgba(82, 102, 233, .18); }.primary-button:hover { background: var(--primary-dark); transform: translateY(-1px); }.secondary-button, .filter-button { background: var(--surface); border: 1px solid var(--border); color: var(--text-muted); }.secondary-button:hover, .filter-button:hover { background: var(--surface-hover); }.view { display: none; }.view.active-view { display: block; }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 17px; margin-bottom: 25px; }.stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 19px 17px; display: flex; align-items: flex-start; gap: 13px; box-shadow: var(--shadow); }.stat-icon { width: 33px; height: 33px; border-radius: 8px; display: grid; place-items: center; font-size: 17px; }.stat-icon.blue { background: #e8edff; color: #5266e9; }.stat-icon.violet { background: #f0eaff; color: #9067e8; }.stat-icon.amber { background: var(--amber-soft); color: var(--amber); }.stat-icon.green { background: var(--green-soft); color: var(--green); }.stat-card span, .stat-card small { display: block; color: var(--text-muted); font-size: 10px; }.stat-card strong { display: block; font-size: 23px; letter-spacing: -.7px; margin: 5px 0 3px; }.stat-card small em { color: var(--green); font-style: normal; font-weight: 700; }.stat-card small em.neutral { color: var(--text-muted); font-weight: 500; }
.content-grid { display: grid; grid-template-columns: minmax(0, 1.48fr) minmax(300px, .82fr); gap: 18px; }.panel { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); }.panel-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 15px; padding: 22px 22px 17px; }.panel h2 { font-size: 14px; margin: 0; letter-spacing: -.2px; }.panel-header p, .settings-content > p { color: var(--text-muted); font-size: 11px; margin: 6px 0 0; }.text-button { border: 0; background: transparent; color: var(--primary); font-size: 11px; font-weight: 700; padding: 2px 0; }.text-button span { margin-left: 6px; font-size: 16px; }.photo-table, .user-table { padding: 0 22px 12px; }.table-head, .photo-row, .user-row { display: grid; grid-template-columns: 1.5fr 2.3fr 1.05fr .85fr; align-items: center; column-gap: 15px; }.table-head { color: var(--text-soft); font-size: 10px; padding: 11px 0 10px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }.photo-row { min-height: 66px; border-bottom: 1px solid var(--border); font-size: 10px; }.photo-row:last-child, .user-row:last-child { border-bottom: 0; }.photo-thumb, .queue-preview { width: 59px; height: 41px; border-radius: 6px; background: #cad0dd; position: relative; overflow: hidden; display: grid; place-items: center; color: rgba(255,255,255,.8); }.photo-thumb span { position: relative; z-index: 2; font-size: 20px; }.thumb-bath { background: linear-gradient(135deg, #88a9b5, #ebdbc9 50%, #75939b); }.thumb-kitchen { background: linear-gradient(150deg, #a8afa5 0 30%, #5f736f 31% 55%, #d6b999 56% 100%); }.thumb-hall { background: linear-gradient(160deg, #c6a778, #735d53 48%, #b8c0bb 49%); }.thumb-detail { background: linear-gradient(135deg, #c1b19a, #e8ddc2 45%, #8c7b6e 46%, #a99a89); }.thumb-living { background: linear-gradient(135deg, #d7c2ab, #768c8c 45%, #d0a679 46%); }.thumb-sauna { background: linear-gradient(135deg, #855a41, #d59e63 55%, #603b2d 56%); }.location-copy strong, .location-copy small { display: block; }.location-copy strong { font-size: 11px; }.location-copy small, .muted { color: var(--text-muted); margin-top: 4px; }.pill { display: inline-flex; width: max-content; align-items: center; border-radius: 5px; padding: 5px 8px; font-size: 9px; font-weight: 700; }.pill.success { background: var(--green-soft); color: var(--green); }.pill.warning { background: var(--amber-soft); color: var(--amber); }.neutral-pill { background: var(--surface-muted); color: var(--text-muted); }.activity-panel { min-height: 100%; }.activity-list { padding: 2px 22px 18px; }.activity-item { display: flex; gap: 11px; padding: 14px 0; border-bottom: 1px solid var(--border); }.activity-item:last-child { border: 0; }.activity-avatar { width: 27px; height: 27px; flex: 0 0 27px; border-radius: 50%; display: grid; place-items: center; font-size: 9px; font-weight: 800; background: #dfe4ff; color: var(--primary); }.activity-avatar.coral, .profile-avatar.coral { background: #ffe4df; color: #d77b6a; }.activity-avatar.purple, .profile-avatar.purple { background: #eee2ff; color: #9868db; }.activity-avatar.green { background: var(--green-soft); color: var(--green); }.activity-item strong, .activity-item small, .activity-item time { display: block; }.activity-item strong { font-size: 10px; }.activity-item strong span { color: var(--text-muted); font-weight: 500; }.activity-item small, .activity-item time { color: var(--text-muted); font-size: 9px; margin-top: 4px; }.activity-item time { color: var(--text-soft); margin-top: 6px; }
.toolbar, .gallery-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }.search-field { height: 39px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; display: flex; align-items: center; gap: 8px; padding: 0 12px; flex: 1; max-width: 370px; color: var(--text-soft); }.search-field input { border: 0; outline: 0; background: transparent; color: var(--text); min-width: 0; width: 100%; font-size: 11px; }.search-field input::placeholder { color: var(--text-soft); }.project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; }.project-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow); }.project-cover { height: 145px; background-size: cover; background-position: center; position: relative; }.cover-one { background: linear-gradient(135deg, #a89f95, #d5c1a7 35%, #656d6a 36%, #8a9695 67%, #c3c7c3 68%); }.cover-two { background: linear-gradient(135deg, #798b85, #c5b298 45%, #6f7772 46%, #decbb1); }.cover-three { background: linear-gradient(135deg, #c2a27e, #7a7e77 50%, #bea995 51%, #6b7775); }.project-status { position: absolute; top: 12px; left: 12px; background: rgba(255,255,255,.9); color: #3d4d62; padding: 5px 8px; border-radius: 5px; font-size: 9px; font-weight: 700; }.project-card-body { padding: 16px 17px 14px; }.project-title-row { display: flex; justify-content: space-between; gap: 8px; }.project-title-row h3 { font-size: 13px; margin: 0; }.project-title-row p { color: var(--text-muted); font-size: 10px; margin: 5px 0 0; }.project-progress { margin: 18px 0 15px; }.progress-label { display: flex; justify-content: space-between; color: var(--text-muted); font-size: 9px; margin-bottom: 7px; }.progress-label strong { color: var(--text); }.progress-bar { height: 5px; border-radius: 5px; background: var(--surface-hover); overflow: hidden; }.progress-bar i { display: block; height: 100%; background: var(--primary); border-radius: inherit; }.project-footer { border-top: 1px solid var(--border); display: flex; justify-content: space-between; padding-top: 12px; color: var(--text-muted); font-size: 9px; }
.gallery-toolbar select { height: 39px; border: 1px solid var(--border); color: var(--text-muted); background: var(--surface); border-radius: 8px; padding: 0 10px; font-size: 11px; outline: 0; }.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }.gallery-card { height: 175px; border-radius: 8px; overflow: hidden; position: relative; background-size: cover; background-position: center; }.gallery-card.large { height: 245px; grid-row: span 2; }.gallery-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 27px 12px 11px; color: white; font-size: 10px; font-weight: 700; background: linear-gradient(transparent, rgba(0,0,0,.65)); }
.gallery-card { border: 0; padding: 0; text-align: left; color: inherit; cursor: pointer; }.gallery-card:hover { outline: 3px solid var(--primary); outline-offset: 2px; }.gallery-overlay strong, .gallery-overlay small { display: block; }.gallery-overlay small { margin-top: 3px; font-weight: 500; opacity: .85; }.photo-detail-image { display: block; width: 100%; max-height: 290px; object-fit: contain; border-radius: 9px; background: var(--surface-muted); margin: 18px 0 10px; }.photo-detail-location { color: var(--text-muted); font-size: 10px; margin: 0 0 18px; }.modal-form textarea { width: 100%; min-height: 86px; resize: vertical; margin-top: 7px; border: 1px solid var(--border); border-radius: 7px; padding: 10px 11px; background: var(--surface-muted); color: var(--text); outline: none; font-size: 11px; }.modal-form textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }.photo-detail-actions { display: flex; gap: 9px; align-items: center; }.photo-detail-actions .secondary-button { flex: 1; text-align: center; text-decoration: none; }.danger-button { border: 1px solid #e99999; color: #c34d4d; background: transparent; border-radius: 7px; padding: 10px 12px; font-size: 11px; font-weight: 700; }.recent-photo-row { width: 100%; border: 0; border-top: 1px solid var(--border); background: transparent; color: inherit; text-align: left; cursor: pointer; }
.gallery-room-group { margin: 0 0 30px; }.gallery-group-heading { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 11px; }.gallery-group-heading h2 { margin: 0; font-size: 15px; }.gallery-group-heading span { color: var(--text-muted); font-size: 10px; }
.queue-state { display: flex; align-items: center; gap: 8px; color: var(--green); font-size: 11px; font-weight: 700; padding-top: 9px; }.queue-panel { max-width: 900px; }.queue-list { padding: 0 22px 10px; }.queue-row { min-height: 72px; display: flex; align-items: center; gap: 13px; border-top: 1px solid var(--border); }.queue-preview { width: 55px; height: 40px; flex: 0 0 55px; }.queue-copy { flex: 1; }.queue-copy strong, .queue-copy span { display: block; }.queue-copy strong { font-size: 11px; }.queue-copy span, .queue-size { color: var(--text-muted); font-size: 10px; margin-top: 4px; }.queue-size { margin: 0 16px 0 0; }.users-panel { max-width: 950px; padding-top: 18px; }.user-table .table-head, .user-row { grid-template-columns: 2fr 1.3fr 1fr 1fr; }.user-row { min-height: 70px; border-bottom: 1px solid var(--border); font-size: 11px; color: var(--text-muted); }.user-cell { display: flex; align-items: center; gap: 10px; }.user-cell strong, .user-cell small { display: block; }.user-cell strong { color: var(--text); }.user-cell small { color: var(--text-muted); font-size: 9px; margin-top: 4px; }.user-cell .profile-avatar { flex: 0 0 30px; }
.settings-layout { display: grid; grid-template-columns: 210px minmax(0, 650px); gap: 17px; align-items: start; }.settings-nav { padding: 8px; display: grid; gap: 3px; }.settings-tab { border: 0; background: transparent; text-align: left; border-radius: 7px; padding: 11px 12px; color: var(--text-muted); font-size: 11px; font-weight: 650; }.settings-tab.active, .settings-tab:hover { color: var(--primary); background: var(--primary-soft); }.settings-content { padding: 25px; }.settings-content h2 { margin: 0; font-size: 15px; }.theme-choice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; margin-top: 20px; }.theme-choice { text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: 8px; }.theme-choice.active { border: 2px solid var(--primary); padding: 7px; }.theme-choice:hover { border-color: var(--primary); }.theme-preview { display: block; border-radius: 6px; height: 105px; padding: 11px; margin-bottom: 11px; }.light-preview { background: #f6f7fb; border: 1px solid #e4e7ee; }.dark-preview { background: #171c26; border: 1px solid #2d3544; }.theme-preview i { display: block; height: 10px; width: 52%; margin-bottom: 7px; border-radius: 2px; background: #dfe4ef; }.theme-preview i:nth-child(2) { height: 40px; width: 78%; background: #fff; border: 1px solid #e6eaf1; }.theme-preview i:nth-child(3) { height: 7px; width: 36%; background: #cad2e4; }.dark-preview i { background: #343c4b; }.dark-preview i:nth-child(2) { background: #252c38; border-color: #3b4556; }.theme-choice strong, .theme-choice small { display: block; }.theme-choice strong { font-size: 11px; }.theme-choice small { color: var(--text-muted); font-size: 10px; margin-top: 4px; }.settings-divider { border-top: 1px solid var(--border); margin: 28px 0; }.storage-meter { margin-top: 18px; max-width: 450px; }.storage-meter > div:first-child { display: flex; justify-content: space-between; font-size: 11px; margin-bottom: 8px; }.storage-meter span { color: var(--text-muted); }
.toast { position: fixed; bottom: 25px; left: 50%; transform: translate(-50%, 90px); opacity: 0; background: var(--text); color: var(--surface); border-radius: 8px; padding: 12px 17px; font-size: 11px; box-shadow: var(--shadow); transition: .25s ease; z-index: 20; }.toast.show { transform: translate(-50%, 0); opacity: 1; }
.project-room-button { border: 0; background: transparent; color: var(--primary); font-size: 9px; font-weight: 700; padding: 0; }.actual-preview { background-size: cover; background-position: center; }.uploaded-gallery-card { background-color: var(--surface-hover); background-size: cover; background-position: center; }
.main-content > .view { max-width: 1440px; margin: 0 auto; padding: 38px 43px 70px; }.companies-panel { max-width: 950px; }.company-list { padding: 0 22px 12px; }.company-row { display: grid; grid-template-columns: 2fr 1fr 1fr .8fr; align-items: center; gap: 15px; min-height: 72px; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 11px; }.company-cell { display: flex; align-items: center; gap: 11px; }.company-cell strong, .company-cell small { display: block; }.company-cell strong { color: var(--text); }.company-cell small { color: var(--text-muted); font-size: 9px; margin-top: 4px; }.company-mark { width: 31px; height: 31px; border-radius: 8px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); font-size: 10px; font-weight: 800; }.company-switch-button { border: 0; background: transparent; color: var(--primary); font-size: 10px; font-weight: 700; padding: 0; text-align: left; }.company-switch-button:hover { text-decoration: underline; }
.company-list-head { min-height: 40px; border-top: 0; border-bottom: 1px solid var(--border); color: var(--text-soft); font-size: 10px; }.company-picker { display: grid; gap: 7px; }.company-picker-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); text-align: left; }.company-picker-row:hover, .company-picker-row.selected { border-color: var(--primary); background: var(--primary-soft); }.company-picker-row > span:nth-child(2) { flex: 1; }.company-picker-row strong, .company-picker-row small { display: block; }.company-picker-row strong { font-size: 11px; }.company-picker-row small { color: var(--text-muted); font-size: 9px; margin-top: 4px; }.company-picker-row b { color: var(--primary); font-size: 14px; }
.auth-gate { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; background: var(--bg); }.auth-card { width: min(100%, 390px); padding: 35px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); }.auth-card .brand-mark { margin-bottom: 24px; }.auth-card h1 { margin: 0; font-size: 25px; letter-spacing: -.8px; }.auth-subtitle { color: var(--text-muted); font-size: 12px; margin: 8px 0 25px; }.auth-error { min-height: 15px; margin: 0; color: #d46262; font-size: 10px; }.auth-card button:disabled { opacity: .65; cursor: wait; }
#auth-fallback, #auth-gate { position: fixed !important; inset: 0 !important; z-index: 9999 !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 24px !important; overflow: auto; background: var(--bg) !important; }
.auth-locked { visibility: hidden; }
.landing-points { display: grid; gap: 7px; margin: -7px 0 23px; color: var(--text-muted); font-size: 10px; }.empty-state { min-height: 120px; padding: 28px 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; color: var(--text-muted); text-align: center; }.empty-state strong { color: var(--text); font-size: 12px; }.empty-state span { font-size: 10px; max-width: 340px; }.empty-state .primary-button { margin-top: 9px; }.project-empty { grid-column: 1 / -1; background: var(--surface); border: 1px dashed var(--border); border-radius: 10px; }.gallery-empty { grid-column: 1 / -1; min-height: 280px; background: var(--surface); border: 1px dashed var(--border); border-radius: 10px; }.user-empty { grid-column: 1 / -1; min-height: 125px; border-bottom: 0; }
.logout-link { border: 0; background: transparent; color: var(--primary); font-size: 9px; font-weight: 700; padding: 3px 2px; }.logout-link:hover { text-decoration: underline; }
.modal-backdrop { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 20px; background: rgba(10, 16, 30, .48); backdrop-filter: blur(4px); }.modal-backdrop[hidden] { display: none; }.modal { position: relative; width: min(100%, 440px); max-height: calc(100vh - 40px); overflow: auto; padding: 27px; background: var(--surface); border: 1px solid var(--border); border-radius: 13px; box-shadow: 0 22px 60px rgba(0, 0, 0, .2); }.modal-close { position: absolute; top: 18px; right: 18px; font-size: 23px; }.modal h2 { margin: 0; padding-right: 25px; font-size: 19px; letter-spacing: -.4px; }.modal-subtitle { color: var(--text-muted); font-size: 11px; margin: 7px 0 23px; }.modal-form { display: grid; gap: 15px; }.modal-form label { color: var(--text-muted); font-size: 10px; font-weight: 700; }.modal-form input, .modal-form select, .inline-form input { width: 100%; height: 39px; margin-top: 7px; border: 1px solid var(--border); border-radius: 7px; padding: 0 11px; background: var(--surface-muted); color: var(--text); outline: none; font-size: 11px; }.modal-form input:focus, .modal-form select:focus, .inline-form input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }.field-hint { display: block; color: var(--text-soft); font-size: 9px; font-weight: 500; margin-top: 4px; }.modal-submit { width: 100%; margin-top: 5px; }.room-list { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 19px; }.room-chip { border: 1px solid var(--border); background: var(--surface-muted); color: var(--text-muted); border-radius: 6px; padding: 7px 9px; font-size: 10px; }.inline-form { display: flex; align-items: center; gap: 8px; }.inline-form input { margin-top: 0; flex: 1; min-width: 0; }.inline-form .primary-button { white-space: nowrap; padding-left: 13px; padding-right: 13px; }.inline-form select { width: 110px; height: 39px; min-width: 0; border: 1px solid var(--border); border-radius: 7px; padding: 0 8px; background: var(--surface-muted); color: var(--text); font-size: 10px; }.structure-list { display: grid; gap: 7px; margin-bottom: 15px; }.structure-item { padding: 10px 11px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-muted); }.structure-item strong, .structure-item span { display: block; }.structure-item strong { font-size: 11px; }.structure-item span { color: var(--text-muted); font-size: 10px; margin-top: 4px; }
@media (max-width: 1050px) { :root { --sidebar: 220px; }.topbar, .page-wrap { padding-left: 28px; padding-right: 28px; }.stats-grid { grid-template-columns: repeat(2, 1fr); }.content-grid { grid-template-columns: 1fr; }.project-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .sidebar { position: fixed; z-index: 10; left: 0; top: 0; transform: translateX(-100%); transition: transform .22s ease; box-shadow: 15px 0 40px rgba(0,0,0,.12); }.sidebar.open { transform: translateX(0); }.mobile-close, .menu-button { display: block; }.mobile-close { margin-left: auto; font-size: 24px; }.menu-button { margin-right: 14px; }.topbar { height: 63px; padding: 0 17px; justify-content: flex-start; }.breadcrumb { flex: 1; }.topbar-actions { gap: 13px; }.topbar-avatar { display: none; }.page-wrap, .main-content > .view { padding: 26px 17px 50px; }.page-heading { display: block; margin-bottom: 23px; }.page-heading .primary-button { margin-top: 19px; }.page-heading h1 { font-size: 24px; }.stats-grid { gap: 10px; }.stat-card { padding: 14px 11px; gap: 9px; }.stat-icon { width: 28px; height: 28px; font-size: 14px; }.stat-card strong { font-size: 19px; }.content-grid, .project-grid, .settings-layout { grid-template-columns: 1fr; }.panel-header, .photo-table, .activity-list { padding-left: 15px; padding-right: 15px; }.photo-table { overflow-x: auto; }.table-head, .photo-row { min-width: 540px; }.activity-panel { min-height: auto; }.toolbar, .gallery-toolbar { flex-wrap: wrap; }.search-field { max-width: none; flex-basis: 100%; }.gallery-toolbar select { flex: 1; min-width: 120px; }.gallery-grid { grid-template-columns: repeat(2, 1fr); }.gallery-card, .gallery-card.large { height: 160px; grid-row: auto; }.gallery-card.large { grid-column: span 2; }.queue-size { display: none; }.queue-row { gap: 8px; }.settings-nav { display: flex; overflow-x: auto; }.settings-tab { white-space: nowrap; }.theme-choice-grid { gap: 8px; }.company-row { min-width: 600px; }.company-list { overflow-x: auto; } }