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

:root {
  --navy: #4a5d76;
  --orange: #ce661f;
  --orange-hover: #b85a1a;
  --orange-light: #ff914d;
  --orange-pale: #fff3eb;
  --orange-border: #e8c4a8;
  --bg: #f4f6f8;
  --bg-card: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-nav: #4a5d76;
  --text-primary: #1a2332;
  --text-secondary: #4b5563;
  --text-tertiary: #9ca3af;
  --border: #e5e7eb;
  --border-med: #d1d5db;
  --blue-pale: #e6f1fb;
  --blue-mid: #85b7eb;
  --blue-text: #185fa5;
  --green-pale: #eaf3de;
  --green-border: #c0dd97;
  --green-text: #3b6d11;
  --amber-pale: #faeeda;
  --amber-border: #fac775;
  --amber-text: #854f0b;
  --navy-pale: #eef1f5;
  --navy-border: #c8d0da;
  --danger: #dc2626;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg: 0 4px 24px rgba(0,0,0,0.13);
}

[data-theme="dark"] {
  --bg: #0f1623;
  --bg-card: #1a2332;
  --bg-secondary: #1e2a3a;
  --bg-nav: #111c2a;
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-tertiary: #64748b;
  --border: #2d3748;
  --border-med: #3d4f66;
  --navy-pale: #1e2a3a;
  --navy-border: #2d3f55;
  --orange-pale: #2a1a0a;
  --orange-border: #5a3a1a;
  --blue-pale: #0f2040;
  --blue-mid: #2d5a8a;
  --blue-text: #60a5fa;
  --green-pale: #0f2010;
  --green-border: #1a4020;
  --green-text: #86efac;
  --amber-pale: #2a1a00;
  --amber-border: #5a3a00;
  --amber-text: #fbbf24;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg: 0 4px 24px rgba(0,0,0,0.5);
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--text-primary);
  background: var(--bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  transition: background 0.2s, color 0.2s;
}

a { color: inherit; text-decoration: none; }
button, input, select { font-family: inherit; }

nav {
  background: var(--bg-nav);
  min-height: 60px;
  display: flex;
  align-items: center;
  padding: 0 28px;
  position: sticky;
  top: 0;
  z-index: 200;
  box-shadow: var(--shadow-sm);
}
.logo { display: flex; align-items: center; gap: 10px; margin-right: 32px; flex-shrink: 0; }
.logo-icon { width: 34px; height: 34px; flex-shrink: 0; }
.logo-text { display: flex; align-items: baseline; font-size: 18px; font-weight: 600; letter-spacing: -0.4px; }
.logo-land, .logo-cloud { color: #fff; }
.logo-2 { color: var(--orange-light); }
.nav-links { display: flex; align-items: center; gap: 2px; flex: 1; }
.nav-link { color: rgba(255,255,255,0.65); padding: 8px 15px; border-radius: 7px; font-size: 14px; font-weight: 500; white-space: nowrap; display: flex; align-items: center; gap: 6px; transition: background 0.15s, color 0.15s; }
.nav-link:hover, .nav-link.active { background: rgba(255,255,255,0.13); color: #fff; }
.nav-link .ti { font-size: 16px; }
.nav-alert-badge { background: var(--orange); color: #fff; font-size: 11px; font-weight: 700; min-width: 20px; height: 20px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; }
.nav-right { display: flex; align-items: center; gap: 4px; }
.page-login .nav-links, .page-login .avatar-dropdown { display: none; }
.nav-icon-btn { color: rgba(255,255,255,0.65); padding: 8px; border-radius: 7px; cursor: pointer; display: flex; align-items: center; justify-content: center; border: none; background: none; transition: background 0.15s, color 0.15s; }
.nav-icon-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
.nav-icon-btn .ti { font-size: 19px; }
.lang-dropdown, .avatar-dropdown { position: relative; }
.lang-current { color: rgba(255,255,255,0.65); font-size: 13px; font-weight: 600; padding: 7px 10px; border-radius: 7px; cursor: pointer; display: flex; align-items: center; gap: 4px; border: none; background: none; letter-spacing: 0.3px; }
.lang-current:hover { background: rgba(255,255,255,0.1); color: #fff; }
.dropdown-menu { position: absolute; right: 0; top: calc(100% + 8px); background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-lg); min-width: 140px; display: none; z-index: 300; }
.avatar-menu { min-width: 220px; }
.dropdown-menu.open { display: block; }
.dropdown-item { padding: 11px 18px; font-size: 14px; font-weight: 500; color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; gap: 9px; border: none; background: none; width: 100%; text-align: left; transition: background 0.1s, color 0.1s; }
.dropdown-item:hover { background: var(--bg-secondary); color: var(--text-primary); }
.dropdown-item.active { color: var(--navy); font-weight: 600; }
[data-theme="dark"] .dropdown-item.active { color: var(--orange-light); }
.dropdown-item.active::after { content: '✓'; font-size: 12px; color: var(--orange); margin-left: auto; }
.dropdown-item.danger { color: var(--danger); }
.dropdown-divider { border: none; border-top: 1px solid var(--border); margin: 3px 0; }
.user-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--orange); color: #fff; font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center; cursor: pointer; border: 2px solid transparent; }
.user-avatar:hover { border-color: rgba(255,255,255,0.4); }
.avatar-menu-header { padding: 14px 18px 12px; border-bottom: 1px solid var(--border); }
.avatar-menu-name { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.avatar-menu-email { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }

main { max-width: 1200px; margin: 0 auto; padding: 40px 32px 72px; }
.page-password main { max-width: 760px; }
.page-tenant main { max-width: 860px; }
.page-create main { max-width: 860px; }
.page-login main { max-width: 520px; }
.page-profile main { max-width: 860px; }
h1 { font-size: 26px; font-weight: 600; color: var(--navy); margin-bottom: 10px; letter-spacing: -0.5px; }
[data-theme="dark"] h1 { color: var(--text-primary); }
.welcome { color: var(--text-secondary); font-size: 15px; margin-bottom: 32px; }
.page-subtitle { color: var(--text-secondary); font-size: 15px; margin-bottom: 28px; }
.back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); font-size: 14px; font-weight: 500; margin-bottom: 22px; }
.back-link:hover { color: var(--orange); }

.section { margin-bottom: 40px; scroll-margin-top: 84px; }
.section-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.section-title { font-size: 12px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.8px; display: flex; align-items: center; gap: 6px; }
.section-title .ti { font-size: 14px; }
.section-actions { display: flex; gap: 10px; align-items: center; }
.section-collapse-btn { color: var(--text-tertiary); font-size: 13px; font-weight: 500; background: none; border: none; cursor: pointer; display: flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 6px; transition: background 0.15s, color 0.15s; }
.section-collapse-btn:hover { background: var(--bg-secondary); color: var(--text-secondary); }
.section-collapse-btn .ti.chevron { font-size: 14px; transition: transform 0.2s; }
.section-collapse-btn.collapsed .ti.chevron { transform: rotate(180deg); }
.section-body.collapsed { display: none; }

.btn-primary, .btn-secondary, .btn-alert { border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.btn-primary { background: var(--orange); color: #fff; border: 1px solid var(--orange); padding: 10px 16px; }
.btn-primary:hover { background: var(--orange-hover); border-color: var(--orange-hover); }
.btn-primary:disabled { cursor: wait; opacity: 0.7; }
.btn-secondary, .btn-alert { background: var(--navy-pale); color: var(--navy); border: 1px solid var(--navy-border); padding: 10px 16px; }
[data-theme="dark"] .btn-secondary, [data-theme="dark"] .btn-alert { color: var(--text-primary); }
.btn-secondary:hover, .btn-alert:hover { background: var(--bg-secondary); }

.alert-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.alert-card, .project-card, .empty-state, .status-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-sm); }
.alert-card { padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-left: 3px solid var(--amber-border); }
.alert-card.has-action { border-left-color: var(--orange); }
.alert-card:hover, .project-card:hover { border-color: var(--border-med); box-shadow: var(--shadow-md); }
.alert-card-info { flex: 1; min-width: 0; }
.alert-project-name { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px; }
.alert-company { font-size: 13px; color: var(--text-secondary); margin-bottom: 10px; }
.alert-counts { display: flex; gap: 7px; flex-wrap: wrap; }
.alert-count-pill, .plan-pill { font-size: 13px; font-weight: 500; border-radius: 20px; display: inline-flex; align-items: center; gap: 5px; border: 1px solid; }
.alert-count-pill { padding: 5px 11px; }
.alert-count-pill.action { background: var(--orange-pale); color: var(--orange); border-color: var(--orange-border); }
.alert-count-pill.view { background: var(--amber-pale); color: var(--amber-text); border-color: var(--amber-border); }

.project-card { padding: 18px 20px; margin-bottom: 9px; display: flex; align-items: center; gap: 14px; transition: border-color 0.15s, box-shadow 0.15s; }
.pin-btn { font-size: 18px; cursor: pointer; flex-shrink: 0; background: none; border: none; padding: 3px; line-height: 1; color: var(--text-tertiary); }
.pin-btn.on, .pin-btn:hover { color: var(--orange); }
.project-info { flex: 1; min-width: 0; }
.project-name { font-weight: 500; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 6px; }
.project-meta { font-size: 14px; color: var(--text-secondary); display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.plan-pill { font-size: 12px; padding: 3px 9px; border-radius: 10px; background: var(--blue-pale); color: var(--blue-text); border-color: var(--blue-mid); }
.modules { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; flex-shrink: 0; justify-content: flex-end; }
.mod, .notif-pill { font-size: 14px; padding: 7px 14px; border-radius: 20px; font-weight: 500; white-space: nowrap; display: flex; align-items: center; gap: 5px; border: 1px solid; }
.mod-admin { background: var(--navy-pale); color: var(--navy); border-color: var(--navy-border); }
.mod-calc { background: var(--orange-pale); color: #9a4a10; border-color: var(--orange-border); }
.mod-viewer { background: var(--green-pale); color: var(--green-text); border-color: var(--green-border); }
.mod-upsell { background: none; color: var(--text-tertiary); border: 1px dashed var(--border-med); }
.notif-pill.on { background: var(--amber-pale); color: var(--amber-text); border-color: var(--amber-border); }
.notif-pill.off { background: var(--bg-secondary); color: var(--text-tertiary); border-color: var(--border); }
[data-theme="dark"] .mod-admin { color: var(--text-primary); }
[data-theme="dark"] .mod-calc { color: var(--orange-light); }

.tenant-group { margin-bottom: 9px; }
.tenant-toggle { width: 100%; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 16px 20px; display: flex; align-items: center; gap: 12px; cursor: pointer; transition: background 0.15s, border-color 0.15s; text-align: left; box-shadow: var(--shadow-sm); }
.tenant-toggle:hover, .tenant-toggle.open { background: var(--navy-pale); border-color: var(--navy-border); }
.tenant-toggle.open { border-radius: 12px 12px 0 0; border-bottom-color: transparent; }
.tenant-toggle-icon { font-size: 17px; color: var(--navy); flex-shrink: 0; }
.tenant-toggle-name { font-size: 15px; font-weight: 600; color: var(--navy); flex: 1; }
.tenant-toggle-meta { font-size: 14px; color: var(--text-secondary); }
.tenant-toggle-action { color: var(--text-tertiary); display: inline-flex; padding: 4px; border-radius: 6px; }
.tenant-toggle-action:hover { color: var(--orange); background: var(--bg-card); }
.tenant-toggle-chevron { font-size: 17px; color: var(--text-tertiary); transition: transform 0.2s; flex-shrink: 0; }
.tenant-toggle.open .tenant-toggle-chevron { transform: rotate(180deg); }
[data-theme="dark"] .tenant-toggle-icon, [data-theme="dark"] .tenant-toggle-name { color: var(--text-primary); }
.tenant-projects { border: 1px solid var(--navy-border); border-top: none; border-radius: 0 0 12px 12px; overflow: hidden; display: none; box-shadow: var(--shadow-sm); }
.tenant-projects.open { display: block; }
.tenant-projects .project-card { border: none; border-bottom: 1px solid var(--border); border-radius: 0; margin-bottom: 0; box-shadow: none; }
.tenant-projects .project-card:last-child { border-bottom: none; }
.tenant-projects .project-card:hover { background: var(--bg-secondary); box-shadow: none; }
.subsection-title { font-size: 15px; font-weight: 600; color: var(--text-secondary); margin-bottom: 14px; margin-top: 28px; display: flex; align-items: center; gap: 8px; }
.subsection-title:first-child { margin-top: 0; }
.subsection-title.mine { color: var(--navy); }
[data-theme="dark"] .subsection-title.mine { color: var(--text-primary); }
.empty-state, .status-card { padding: 18px 20px; color: var(--text-secondary); font-size: 14px; }
.status-card { margin-bottom: 24px; display: none; }
.status-card.error { display: block; color: var(--danger); border-color: #fecaca; background: #fef2f2; }
[data-theme="dark"] .status-card.error { border-color: #5f1b1b; background: #2a0a0a; }

.form-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-sm); overflow: hidden; }
.form-card-header { padding: 18px 22px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.form-card-body { padding: 24px 22px; }
.form-grid { display: grid; gap: 20px; }
.field label { display: block; color: var(--text-secondary); font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.field input, .field select { width: 100%; border: 1px solid var(--border-med); background: var(--bg-card); color: var(--text-primary); border-radius: 9px; padding: 11px 12px; font-size: 15px; outline: none; transition: border-color 0.15s, box-shadow 0.15s; }
.field input:focus, .field select:focus { border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-pale); }
.field-hint { color: var(--text-tertiary); font-size: 13px; margin-top: 7px; }
.form-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--border); }
.tenant-id-pill { background: var(--navy-pale); color: var(--navy); border: 1px solid var(--navy-border); border-radius: 999px; padding: 5px 11px; font-size: 12px; font-weight: 500; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-theme="dark"] .tenant-id-pill { color: var(--text-primary); }
.loading-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-sm); padding: 22px; color: var(--text-secondary); font-size: 14px; display: flex; align-items: center; gap: 10px; }
.profile-grid { display: grid; gap: 14px; }
.profile-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.profile-row:last-child { border-bottom: none; }
.profile-label { color: var(--text-secondary); font-size: 13px; font-weight: 600; }
.profile-value { color: var(--text-primary); font-size: 15px; text-align: right; overflow-wrap: anywhere; }
.message { display: none; margin-top: 18px; padding: 13px 15px; border-radius: 10px; font-size: 14px; border: 1px solid; white-space: pre-wrap; }
.message.show { display: block; }
.message.success { background: var(--green-pale); color: var(--green-text); border-color: var(--green-border); }
.message.error { background: #fef2f2; color: var(--danger); border-color: #fecaca; }
[data-theme="dark"] .message.error { background: #2a0a0a; border-color: #5f1b1b; }
.is-hidden { display: none; }
.overlay { position: fixed; inset: 0; z-index: 100; display: none; }
.overlay.open { display: block; }
.site-footer { max-width: 1200px; margin: 0 auto; padding: 24px 32px 36px; color: var(--text-tertiary); font-size: 13px; text-align: center; }

@media (max-width: 900px) {
  nav { height: auto; flex-wrap: wrap; gap: 10px; padding: 12px 18px; }
  .logo { margin-right: 12px; }
  .nav-links { order: 3; width: 100%; overflow-x: auto; }
  main { padding: 28px 18px 56px; }
  .project-card { align-items: flex-start; flex-wrap: wrap; }
  .modules { width: 100%; justify-content: flex-start; }
}

@media (max-width: 760px) {
  .form-card-header, .form-actions { align-items: stretch; flex-direction: column; }
  .form-actions .btn-primary, .form-actions .btn-secondary { width: 100%; }
}