:root {
  --navy: #172b4d;
  --ink: #24334d;
  --muted: #748198;
  --line: #e8edf3;
  --surface: #ffffff;
  --canvas: #f7f9fc;
  --blue: #3f7cff;
  --blue-soft: #eef4ff;
  --green: #1c9a70;
  --green-soft: #e9f8f2;
  --orange: #d9822b;
  --orange-soft: #fff4e7;
  --red: #d65656;
  --red-soft: #fff0f0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--canvas);
}
:root[data-theme="dark"] { --navy: #e8eef8; --ink: #d8e1ef; --muted: #9aa9bf; --line: #2d3b50; --surface: #182536; --canvas: #101a28; --blue-soft: #1d355b; --green-soft: #153b35; --orange-soft: #4b321d; --red-soft: #48282c; }
:root[data-theme="dark"] body, :root[data-theme="dark"] .auth-screen { background: var(--canvas); }
:root[data-theme="dark"] .topbar, :root[data-theme="dark"] .sidebar, :root[data-theme="dark"] .stat-card, :root[data-theme="dark"] .toolbar, :root[data-theme="dark"] .ticket-card, :root[data-theme="dark"] .team-card, :root[data-theme="dark"] .admin-panel, :root[data-theme="dark"] .settings-panel, :root[data-theme="dark"] .modal, :root[data-theme="dark"] .auth-card { background: var(--surface); }
:root[data-theme="dark"] .search-box input, :root[data-theme="dark"] .filter-group select, :root[data-theme="dark"] .form-field select, :root[data-theme="dark"] .form-field input, :root[data-theme="dark"] .form-field textarea { color: var(--ink); background: #1e2d41; }
:root[data-theme="dark"] .user-switcher, :root[data-theme="dark"] .user-menu { color: var(--ink); background: #1e2d41; }
:root[data-theme="dark"] .user-menu button:hover { background: #263951; }
:root[data-theme="dark"] .button-ghost { color: var(--ink); background: #263951; }
:root[data-theme="dark"] .badge-priority, :root[data-theme="dark"] .mini-avatar { color: var(--muted); background: #263951; }
:root[data-theme="dark"] .date-card strong, :root[data-theme="dark"] .breadcrumbs strong { color: var(--navy); }
:root[data-theme="dark"] .user-menu strong, :root[data-theme="dark"] .user-menu small,
:root[data-theme="dark"] .user-switcher-copy strong, :root[data-theme="dark"] .user-switcher-copy small,
:root[data-theme="dark"] .user-menu button, :root[data-theme="dark"] .user-switcher,
:root[data-theme="dark"] .hero h1, :root[data-theme="dark"] .team-heading h1,
:root[data-theme="dark"] .board-heading h2, :root[data-theme="dark"] .ticket-title,
:root[data-theme="dark"] .empty-state strong, :root[data-theme="dark"] label { color: var(--ink); }
:root[data-theme="dark"] .user-menu small, :root[data-theme="dark"] .user-switcher-copy small { color: var(--muted); }

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--canvas); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.auth-screen { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 15% 10%, #eef4ff 0, transparent 38%), var(--canvas); }
.auth-card { width: min(410px, 100%); padding: 34px; background: white; border: 1px solid var(--line); border-radius: 15px; box-shadow: 0 18px 50px #24334d12; }
.auth-brand { padding: 0 0 34px; }.auth-card h1 { color: var(--navy); font-size: 28px; letter-spacing: -.04em; margin: 0; }.auth-subtitle { color: var(--muted); font-size: 12px; line-height: 1.6; margin: 9px 0 25px; }.auth-submit { width: 100%; margin-top: 4px; }.auth-note { color: #a0abba; text-align: center; font-size: 10px; margin: 22px 0 0; }.form-error { color: var(--red); background: var(--red-soft); border-radius: 6px; padding: 9px 10px; font-size: 11px; margin: -3px 0 12px; }.field-hint { display: block; color: var(--muted); font-size: 10px; margin-top: 5px; }
.app-shell { display: flex; min-height: 100vh; }
.sidebar { width: 245px; background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 28px 16px 20px; flex-shrink: 0; }
.brand { display: flex; align-items: center; gap: 11px; padding: 0 12px 42px; }
.brand-mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: white; background: var(--blue); font-weight: 800; font-size: 18px; box-shadow: 0 6px 15px #3f7cff36; }
.brand strong { display: block; color: var(--navy); font-size: 16px; letter-spacing: -.2px; }
.brand span { color: var(--muted); display: block; margin-top: 2px; font-size: 10px; }
.main-nav { display: grid; gap: 6px; }
.nav-item { color: var(--muted); background: transparent; border: 0; border-radius: 9px; padding: 11px 13px; text-align: left; font-size: 13px; display: flex; align-items: center; gap: 12px; }
.nav-item.active { color: var(--blue); background: var(--blue-soft); font-weight: 700; }
.nav-icon { width: 18px; font-size: 17px; text-align: center; }
.sidebar-section { margin-top: 42px; position: relative; }
.sidebar-label { color: #abb5c4; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 0 12px 10px; }
.user-switcher { border: 1px solid var(--line); background: #fbfcfe; border-radius: 10px; padding: 10px; display: flex; align-items: center; text-align: left; width: 100%; gap: 9px; color: var(--ink); }
.user-switcher-copy { min-width: 0; flex: 1; }.user-switcher-copy strong, .user-switcher-copy small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }.user-switcher-copy strong { font-size: 12px; }.user-switcher-copy small { color: var(--muted); font-size: 10px; margin-top: 2px; }.chevron { color: var(--muted); }
.avatar { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 9px; font-size: 11px; font-weight: 800; flex-shrink: 0; }.avatar-admin { color: #7557c9; background: #eee9ff; }.avatar-blue { color: #3370ca; background: #e7f0ff; }.avatar-orange { color: #b46920; background: #fff0dc; }
.user-menu { position: absolute; z-index: 3; top: 75px; left: 0; right: 0; padding: 5px; border: 1px solid var(--line); background: white; border-radius: 10px; box-shadow: 0 12px 30px #24334d1a; }.user-menu button { border: 0; background: transparent; width: 100%; display: flex; gap: 9px; align-items: center; padding: 8px; border-radius: 7px; text-align: left; }.user-menu button:hover { background: var(--canvas); }.user-menu small { display: block; color: var(--muted); font-size: 10px; }
.sidebar-footer { margin-top: auto; color: var(--muted); font-size: 11px; display: flex; gap: 8px; align-items: center; padding: 0 12px; }.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.main-content { flex: 1; min-width: 0; }.topbar { height: 82px; padding: 0 clamp(24px, 5vw, 70px); display: flex; align-items: center; justify-content: space-between; background: white; border-bottom: 1px solid var(--line); }.breadcrumbs { display: flex; gap: 10px; color: #abb5c4; font-size: 12px; }.breadcrumbs strong { color: var(--ink); font-weight: 600; }.topbar-actions { display: flex; align-items: center; gap: 12px; }.notification-wrap { position: relative; }.notification-button { position: relative; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 9px; color: var(--blue); background: var(--surface); font-size: 18px; font-weight: 800; }.notification-button:hover { background: var(--blue-soft); }.notification-count { position: absolute; top: -7px; right: -7px; min-width: 19px; height: 19px; padding: 2px 5px; border-radius: 10px; color: white; background: var(--red); font-size: 10px; line-height: 15px; }.notification-menu { position: absolute; z-index: 8; top: 47px; right: 0; width: min(360px, 80vw); max-height: 330px; overflow-y: auto; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: 0 14px 35px #172b4d26; }.notification-item { display: block; width: 100%; padding: 10px; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); background: transparent; text-align: left; font-size: 11px; }.notification-item:last-child { border-bottom: 0; }.notification-item small { display: block; color: var(--muted); margin-top: 4px; }.notification-empty { color: var(--muted); padding: 18px 10px; text-align: center; font-size: 11px; }
.button { border: 0; border-radius: 8px; padding: 11px 16px; font-size: 12px; font-weight: 700; }.button-primary { color: white; background: var(--blue); box-shadow: 0 5px 12px #3f7cff2b; }.button-primary:hover { background: #326eea; }.button-ghost { color: var(--muted); background: #f2f5f8; }.button span { font-size: 18px; vertical-align: -1px; margin-right: 5px; }
.page-view { max-width: 1220px; padding: 46px clamp(24px, 5vw, 70px) 70px; margin: auto; }.hero { display: flex; justify-content: space-between; gap: 30px; align-items: flex-start; }.eyebrow { color: var(--blue); text-transform: uppercase; letter-spacing: .13em; font-size: 10px; font-weight: 800; margin: 0 0 10px; }.hero h1, .team-heading h1 { font-size: clamp(26px, 3vw, 34px); letter-spacing: -.04em; color: var(--navy); margin: 0; }.hero-subtitle { color: var(--muted); font-size: 13px; margin: 9px 0 0; }.date-card { text-align: right; padding-top: 9px; }.date-card span, .date-card strong { display: block; }.date-card span { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }.date-card strong { margin-top: 4px; color: var(--navy); font-size: 13px; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 38px 0 30px; }.stat-card { background: white; border: 1px solid var(--line); border-radius: 11px; padding: 17px 18px; }.stat-card-top { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; }.stat-card strong { display: block; margin-top: 12px; color: var(--navy); font-size: 24px; letter-spacing: -.04em; }.stat-icon { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 7px; font-size: 13px; }.stat-blue { color: var(--blue); background: var(--blue-soft); }.stat-orange { color: var(--orange); background: var(--orange-soft); }.stat-green { color: var(--green); background: var(--green-soft); }.stat-red { color: var(--red); background: var(--red-soft); }
.toolbar { display: flex; gap: 10px; align-items: flex-end; padding: 14px; margin-bottom: 35px; background: white; border: 1px solid var(--line); border-radius: 11px; }.search-box { border: 1px solid var(--line); border-radius: 7px; flex: 1; min-width: 150px; display: flex; align-items: center; padding: 0 10px; color: var(--muted); }.search-box input { border: 0; outline: 0; width: 100%; padding: 9px 7px; color: var(--ink); font-size: 12px; background: transparent; }.filter-group label { display: block; color: var(--muted); font-size: 9px; font-weight: 700; margin: 0 0 5px 2px; }.filter-group select, .form-field select, .form-field input, .form-field textarea { border: 1px solid var(--line); outline: 0; border-radius: 7px; color: var(--ink); background: white; padding: 9px 11px; font-size: 12px; }.filter-group select:focus, .form-field input:focus, .form-field textarea:focus, .form-field select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.board-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 15px; }.board-heading h2 { color: var(--navy); font-size: 17px; margin: 0; }.board-heading p { margin: 5px 0 0; color: var(--muted); font-size: 11px; }.count-pill { color: var(--blue); background: var(--blue-soft); border-radius: 15px; padding: 3px 7px; font-size: 10px; vertical-align: 2px; }.text-button { color: var(--blue); background: transparent; border: 0; font-size: 11px; }
.ticket-list { display: grid; gap: 9px; }.ticket-card { background: white; border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; display: grid; grid-template-columns: 1fr auto; gap: 14px; transition: border-color .15s, box-shadow .15s; }.ticket-card:hover { border-color: #cbd9ed; box-shadow: 0 5px 18px #24334d0a; }.ticket-title { color: var(--navy); margin: 0; font-size: 13px; font-weight: 700; }.ticket-description { color: var(--muted); margin: 6px 0 12px; font-size: 11px; line-height: 1.5; max-width: 700px; }.ticket-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }.badge { border-radius: 5px; padding: 4px 7px; font-size: 9px; font-weight: 700; }.badge-open { color: var(--blue); background: var(--blue-soft); }.badge-progress { color: var(--orange); background: var(--orange-soft); }.badge-done { color: var(--green); background: var(--green-soft); }.badge-priority { color: var(--muted); background: #f3f5f8; }.badge-high { color: var(--red); background: var(--red-soft); }.ticket-assignee { color: var(--muted); font-size: 10px; display: flex; align-items: center; gap: 6px; }.mini-avatar { width: 19px; height: 19px; border-radius: 6px; display: grid; place-items: center; font-size: 8px; font-weight: 800; background: #edf1f7; color: var(--muted); }.ticket-actions { display: flex; align-items: center; gap: 4px; align-self: center; }.icon-button { border: 0; color: var(--muted); background: transparent; font-size: 19px; line-height: 1; padding: 5px; border-radius: 6px; }.icon-button:hover { color: var(--blue); background: var(--blue-soft); }.empty-state { padding: 50px 20px; text-align: center; border: 1px dashed #cad4e2; border-radius: 10px; color: var(--muted); }.empty-state strong { display: block; color: var(--navy); font-size: 13px; margin-bottom: 5px; }.empty-state p { margin: 0; font-size: 11px; }
.badge-reminder { color: var(--blue); background: var(--blue-soft); }
.team-heading { margin-bottom: 32px; }.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }.team-card { background: white; border: 1px solid var(--line); border-radius: 11px; padding: 22px; }.team-card .avatar { width: 42px; height: 42px; border-radius: 12px; font-size: 15px; margin-bottom: 17px; }.team-card h3 { color: var(--navy); font-size: 15px; margin: 0 0 4px; }.team-card p { color: var(--muted); font-size: 11px; margin: 0 0 20px; }.team-card .team-stat { color: var(--muted); font-size: 10px; border-top: 1px solid var(--line); padding-top: 13px; }.team-card .team-stat strong { color: var(--navy); }
.settings-grid { display: grid; gap: 14px; max-width: 780px; }.settings-panel { display: flex; align-items: center; gap: 15px; padding: 20px; border: 1px solid var(--line); border-radius: 11px; background: white; }.settings-icon { width: 38px; height: 38px; display: grid; place-items: center; color: var(--blue); background: var(--blue-soft); border-radius: 10px; font-weight: 700; }.settings-copy { flex: 1; }.settings-copy h2 { color: var(--navy); font-size: 14px; margin: 0 0 5px; }.settings-copy p { color: var(--muted); font-size: 11px; margin: 0; }.settings-panel select { border: 1px solid var(--line); border-radius: 7px; padding: 9px 12px; color: var(--ink); background: var(--surface); font-size: 12px; }.theme-switcher { display: flex; padding: 3px; border-radius: 8px; background: var(--canvas); }.theme-switcher button { color: var(--muted); border: 0; border-radius: 6px; background: transparent; padding: 7px 11px; font-size: 11px; }.theme-switcher button.active { color: var(--blue); background: var(--blue-soft); font-weight: 700; }
.reminder-fields { padding: 12px; border: 1px solid #d9e5fb; border-radius: 8px; background: var(--blue-soft); }
.admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }.admin-panel { background: white; border: 1px solid var(--line); border-radius: 11px; padding: 20px; }.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; padding-bottom: 13px; border-bottom: 1px solid var(--line); }.panel-heading h2 { color: var(--navy); font-size: 16px; margin: 0; }.panel-heading p { color: var(--muted); font-size: 10px; margin: 5px 0 0; }.panel-heading .button { white-space: nowrap; padding: 9px 11px; font-size: 10px; }.admin-row { display: flex; align-items: center; gap: 10px; padding: 13px 0; border-bottom: 1px solid var(--line); }.admin-row:last-child { border-bottom: 0; padding-bottom: 0; }.admin-row > div:nth-child(2) { flex: 1; min-width: 0; }.admin-row strong, .admin-row small { display: block; }.admin-row strong { color: var(--navy); font-size: 12px; }.admin-row small { color: var(--muted); font-size: 10px; margin-top: 3px; }.team-icon { width: 29px; height: 29px; display: grid; place-items: center; color: var(--blue); background: var(--blue-soft); border-radius: 9px; font-size: 15px; }.logout-button { border: 0; background: transparent; color: var(--muted); font-size: 10px; padding: 10px 12px 0; text-align: left; }.logout-button:hover { color: var(--red); }
.modal-backdrop { position: fixed; inset: 0; background: #172b4d66; display: grid; place-items: center; padding: 20px; z-index: 10; }.modal { width: min(530px, 100%); background: white; border-radius: 13px; padding: 25px; box-shadow: 0 20px 60px #172b4d33; }.modal-header { display: flex; justify-content: space-between; margin-bottom: 24px; }.modal-header h2 { color: var(--navy); margin: 0; font-size: 20px; letter-spacing: -.03em; }.form-field { margin-bottom: 16px; flex: 1; }.form-field label { display: block; color: var(--ink); font-size: 11px; font-weight: 700; margin-bottom: 6px; }.form-field label span { color: var(--red); }.form-field input, .form-field textarea, .form-field select { width: 100%; resize: vertical; }.form-row { display: flex; gap: 12px; }.modal-actions { display: flex; justify-content: flex-end; gap: 9px; padding-top: 7px; }.toast { position: fixed; right: 25px; bottom: 25px; color: white; background: var(--navy); padding: 12px 16px; border-radius: 8px; font-size: 12px; box-shadow: 0 8px 25px #172b4d33; z-index: 20; }
.ticket-chat-modal { width: min(680px, 100%); }.ticket-chat-modal .modal-header { margin-bottom: 15px; }.ticket-chat-participants { color: var(--muted); font-size: 11px; margin: 5px 0 0; }.chat-messages { display: grid; gap: 10px; max-height: 360px; min-height: 150px; overflow-y: auto; padding: 12px; background: var(--canvas); border: 1px solid var(--line); border-radius: 9px; }.chat-empty { color: var(--muted); font-size: 11px; text-align: center; padding: 45px 15px; }.chat-message { max-width: 82%; padding: 9px 11px; border-radius: 10px 10px 10px 3px; background: var(--surface); border: 1px solid var(--line); }.chat-message.own { justify-self: end; border-radius: 10px 10px 3px 10px; color: white; background: var(--blue); border-color: var(--blue); }.chat-message strong { display: block; font-size: 11px; }.chat-message p { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; line-height: 1.45; }.chat-message time { display: block; margin-top: 5px; font-size: 9px; opacity: .7; }.chat-message img { display: block; max-width: 100%; max-height: 220px; margin-top: 7px; border-radius: 6px; }.chat-composer { display: flex; gap: 9px; align-items: flex-end; margin-top: 12px; }.chat-input-wrap { position: relative; flex: 1; }.chat-composer textarea { width: 100%; border: 1px solid var(--line); outline: 0; border-radius: 7px; color: var(--ink); background: var(--surface); padding: 9px 11px; resize: vertical; font-size: 12px; }.chat-composer textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }.mention-menu { position: absolute; bottom: calc(100% + 6px); left: 0; right: 0; z-index: 3; padding: 5px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 22px #172b4d22; }.mention-menu button { width: 100%; display: flex; align-items: center; gap: 8px; border: 0; border-radius: 6px; padding: 8px; color: var(--ink); background: transparent; text-align: left; font-size: 11px; }.mention-menu button:hover, .mention-menu button:focus { background: var(--blue-soft); outline: 0; }.chat-attachment { color: var(--blue); border: 1px solid var(--line); border-radius: 7px; padding: 9px 11px; cursor: pointer; }.chat-attachment input { display: none; }.chat-image-name { max-width: 100px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 800px) { .sidebar { width: 200px; }.toolbar { flex-wrap: wrap; }.search-box { flex-basis: 100%; }.stats-grid { grid-template-columns: repeat(2, 1fr); }.team-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .app-shell { display: block; }.sidebar { width: 100%; padding: 15px; border-right: 0; border-bottom: 1px solid var(--line); }.brand { padding: 0 5px 15px; }.main-nav { display: flex; }.nav-item { flex: 1; }.sidebar-section, .sidebar-footer { display: none; }.topbar { height: 65px; padding: 0 18px; }.page-view { padding: 30px 18px 50px; }.hero { display: block; }.date-card { text-align: left; margin-top: 18px; }.stats-grid { gap: 8px; margin-top: 25px; }.stat-card { padding: 13px; }.stat-card strong { font-size: 20px; }.toolbar { display: grid; grid-template-columns: 1fr 1fr; }.search-box { grid-column: span 2; }.filter-group select { width: 100%; }.ticket-card { grid-template-columns: 1fr; }.ticket-actions { justify-content: flex-end; }.form-row { display: block; } }
@media (max-width: 700px) { .admin-grid { grid-template-columns: 1fr; } }