:root {
  --navy-950: #050b12;
  --navy-900: #07111d;
  --navy-850: #0a1725;
  --navy-800: #0d1c2c;
  --blue-700: #0757c8;
  --blue-600: #0c6ff0;
  --blue-500: #2b84f5;
  --blue-100: #e9f3ff;
  --gold: #e6aa35;
  --ink: #132033;
  --muted: #657188;
  --line: #dce3ec;
  --surface: #ffffff;
  --canvas: #f4f7fb;
  --green: #15956a;
  --amber: #c77808;
  --violet: #7757d7;
  --danger: #c93642;
  --shadow: 0 24px 65px rgba(13, 33, 58, .14);
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--canvas); font: 16px/1.55 Inter, "Segoe UI", Arial, sans-serif; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
svg { display: block; width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.prototype-bar { display: flex; min-height: 34px; align-items: center; justify-content: center; gap: 10px; padding: 6px 18px; color: #dcecff; background: #0b3869; font-size: .78rem; text-align: center; }
.prototype-bar span { padding: 2px 8px; color: #06111d; border-radius: 999px; background: #8fc5ff; font-size: .68rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }

.portal-brand { display: flex; align-items: center; gap: 18px; color: #fff; text-decoration: none; }
.portal-brand img { display: block; width: 154px; height: 51px; object-fit: contain; }
.portal-brand span { padding-left: 18px; border-left: 1px solid rgba(255,255,255,.2); color: #bfc9d6; font-size: .83rem; line-height: 1.15; letter-spacing: .06em; text-transform: uppercase; }
.portal-brand b { display: block; color: #fff; font-size: .94rem; }

.auth-page { min-height: 100vh; background: var(--navy-900); }
.auth-header { display: flex; min-height: 86px; align-items: center; justify-content: space-between; padding: 13px clamp(24px, 5vw, 74px); border-bottom: 1px solid rgba(255,255,255,.09); background: rgba(5,11,18,.96); }
.header-help { display: flex; align-items: center; gap: 10px; color: #d4dce6; font-size: .86rem; font-weight: 700; text-decoration: none; }
.header-help:hover { color: #fff; }
.icon-circle { display: inline-grid; width: 28px; height: 28px; place-items: center; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; color: #fff; }
.auth-main { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(440px, .96fr); min-height: calc(100vh - 184px); }
.auth-intro { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding: 74px clamp(30px, 8vw, 130px); color: #fff; background: radial-gradient(circle at 12% 20%, rgba(28,115,221,.28), transparent 38%), linear-gradient(135deg, #06111d, #0b1b2c 65%, #07101a); }
.auth-intro::before { position: absolute; inset: 0; z-index: -1; opacity: .22; background-image: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(110deg, #000, transparent 78%); content: ""; }
.auth-intro::after { position: absolute; right: -200px; bottom: -230px; z-index: -1; width: 560px; height: 560px; border: 1px solid rgba(56,142,247,.28); border-radius: 50%; box-shadow: 0 0 0 70px rgba(56,142,247,.04), 0 0 0 145px rgba(56,142,247,.035); content: ""; }
.eyebrow { margin: 0 0 10px; color: var(--blue-600); font-size: .73rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.auth-intro .eyebrow { color: #76b7ff; }
.auth-intro h1 { max-width: 690px; margin: 0; font-size: clamp(2.35rem, 4.1vw, 4.7rem); line-height: 1.03; letter-spacing: -.045em; }
.auth-lead { max-width: 610px; margin: 24px 0 40px; color: #b8c6d6; font-size: 1.05rem; }
.auth-benefits { display: grid; max-width: 650px; gap: 12px; }
.auth-benefits > div { display: flex; align-items: center; gap: 14px; padding: 12px 0; }
.benefit-icon { display: grid; flex: 0 0 42px; width: 42px; height: 42px; place-items: center; color: #8dc5ff; border: 1px solid rgba(118,183,255,.34); border-radius: 12px; background: rgba(39,121,221,.09); }
.auth-benefits p { display: grid; gap: 2px; margin: 0; }
.auth-benefits strong { font-size: .94rem; }
.auth-benefits small { color: #9eafc1; font-size: .8rem; }
.auth-panel { display: grid; place-items: center; padding: 58px clamp(26px, 5vw, 86px); background: linear-gradient(145deg, #f8fbff, #edf3f9); }
.auth-card { width: min(100%, 520px); padding: clamp(28px, 4vw, 44px); border: 1px solid #dce5ef; border-radius: 22px; background: #fff; box-shadow: var(--shadow); }
.auth-card-heading { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; }
.auth-card-heading h2 { margin: 0; font-size: clamp(1.45rem, 2.2vw, 2rem); letter-spacing: -.025em; }
.auth-card-heading .eyebrow { margin-bottom: 3px; }
.card-mark { display: grid; flex: 0 0 50px; width: 50px; height: 50px; place-items: center; color: #fff; border-radius: 14px; background: linear-gradient(135deg, var(--blue-600), #084aaf); box-shadow: 0 10px 24px rgba(12,111,240,.25); }
.card-mark svg { width: 25px; height: 25px; }
.portal-form { display: grid; gap: 19px; }
.field { display: grid; gap: 7px; }
.field label, .label-row label { color: #253348; font-size: .85rem; font-weight: 800; }
.field small { color: #7a8595; font-size: .73rem; }
.field input, .field select, .field textarea { width: 100%; padding: 12px 14px; color: var(--ink); border: 1px solid #cfd8e4; border-radius: 9px; outline: none; background: #fff; transition: border-color .18s, box-shadow .18s; }
.field input, .field select { min-height: 48px; }
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--blue-600); box-shadow: 0 0 0 3px rgba(12,111,240,.13); }
.field input[readonly] { color: #586579; background: #f3f6f9; }
.label-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.label-row a { color: var(--blue-700); font-size: .76rem; font-weight: 800; text-decoration: none; }
.password-field { position: relative; }
.password-field input { padding-right: 50px; }
.password-toggle { position: absolute; top: 50%; right: 8px; display: grid; width: 36px; height: 36px; place-items: center; color: #6a7789; border: 0; border-radius: 8px; background: transparent; cursor: pointer; transform: translateY(-50%); }
.password-toggle:hover { color: var(--blue-600); background: var(--blue-100); }
.check-row { display: flex; align-items: flex-start; gap: 10px; color: #556175; font-size: .82rem; cursor: pointer; }
.check-row input { width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--blue-600); }
.check-row a { color: var(--blue-700); font-weight: 700; }
.remember-row { align-items: center; margin-top: -3px; padding: 11px 13px; border: 1px solid #dce4ed; border-radius: 9px; background: #f7faff; }
.remember-row input { flex: 0 0 18px; width: 18px; height: 18px; margin: 0; }
.remember-row span { display: grid; gap: 1px; }
.remember-row strong { color: #253348; font-size: .8rem; }
.remember-row small { color: #748094; font-size: .69rem; }
.remember-row:hover { border-color: #b7cce5; background: #f1f7ff; }
.primary-button, .secondary-button, .new-ticket-shortcut { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 13px; padding: 12px 18px; color: #fff; border: 0; border-radius: 9px; background: linear-gradient(135deg, var(--blue-600), #0755bd); box-shadow: 0 9px 22px rgba(12,111,240,.2); font-size: .84rem; font-weight: 900; text-decoration: none; cursor: pointer; transition: transform .18s, box-shadow .18s; }
.primary-button:hover, .new-ticket-shortcut:hover { box-shadow: 0 13px 28px rgba(12,111,240,.28); transform: translateY(-1px); }
.primary-button.compact { min-height: 43px; padding: 10px 16px; white-space: nowrap; }
.secondary-button { color: #2c3a4e; border: 1px solid #cad4e0; background: #fff; box-shadow: none; }
.secondary-button:hover { border-color: #95a7bb; background: #f8fafc; }
.secondary-button.full { width: 100%; }
.form-note { display: flex; align-items: flex-start; gap: 8px; margin: -4px 0 0; color: #748094; font-size: .72rem; }
.form-note span { color: var(--green); font-size: .6rem; }
.auth-footer { display: flex; min-height: 64px; align-items: center; justify-content: space-between; gap: 20px; padding: 14px clamp(24px, 5vw, 74px); color: #8290a1; border-top: 1px solid rgba(255,255,255,.08); background: #050b12; font-size: .74rem; }
.auth-footer p { margin: 0; }
.auth-footer nav { display: flex; gap: 24px; }
.auth-footer a { text-decoration: none; }
.auth-footer a:hover { color: #fff; }

.activation-page { background: radial-gradient(circle at 20% 10%, #123159, transparent 36%), var(--navy-900); }
.activation-main { display: grid; min-height: calc(100vh - 184px); place-items: center; padding: 54px 24px; }
.activation-card { width: min(100%, 850px); padding: clamp(28px, 5vw, 54px); border: 1px solid #dce5ef; border-radius: 22px; background: #fff; box-shadow: var(--shadow); }
.activation-progress { display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; max-width: 610px; margin: 0 auto 42px; color: #9aa5b4; }
.activation-progress span { display: flex; width: 30px; height: 30px; align-items: center; justify-content: center; border: 2px solid #cdd5df; border-radius: 50%; font-size: .74rem; font-weight: 900; }
.activation-progress span b { position: absolute; margin-top: 58px; font-size: .7rem; white-space: nowrap; }
.activation-progress span.done { color: #fff; border-color: var(--green); background: var(--green); }
.activation-progress span.active { color: #fff; border-color: var(--blue-600); background: var(--blue-600); }
.activation-progress i { height: 2px; background: #dbe1e8; }
.activation-heading { max-width: 610px; margin: 0 auto 32px; text-align: center; }
.activation-heading .card-mark { margin: 0 auto 18px; }
.activation-heading h1 { margin: 0; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -.04em; }
.activation-heading > p:last-child { color: var(--muted); }
.activation-form { max-width: 690px; margin: auto; }
.form-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
.password-rules { display: flex; flex-wrap: wrap; gap: 8px 18px; color: #8994a4; font-size: .72rem; }
.password-rules span::before { margin-right: 6px; color: #a7b1be; content: "○"; }
.password-rules span.met { color: var(--green); }
.password-rules span.met::before { content: "●"; }
.terms-row { padding: 16px; border-radius: 9px; background: #f4f7fa; }
.security-note { display: flex; gap: 13px; max-width: 690px; margin: 28px auto 0; padding: 17px 19px; color: #4f6175; border: 1px solid #d4e3f5; border-radius: 10px; background: #eff7ff; font-size: .78rem; }
.security-note svg { flex: 0 0 22px; color: var(--blue-600); }
.security-note p { margin: 0; }

.portal-page { min-height: 100vh; background: var(--canvas); }
.portal-layout { display: grid; grid-template-columns: 274px minmax(0, 1fr); min-height: calc(100vh - 34px); }
.portal-sidebar { position: sticky; top: 0; display: flex; height: calc(100vh - 34px); flex-direction: column; padding: 24px 17px 20px; color: #c6d1de; background: radial-gradient(circle at 10% 0, #15355a, transparent 30%), var(--navy-900); }
.sidebar-brand { gap: 13px; padding: 0 7px 22px; border-bottom: 1px solid rgba(255,255,255,.1); }
.sidebar-brand img { width: 123px; height: 41px; }
.sidebar-brand span { padding-left: 12px; font-size: .64rem; }
.sidebar-brand b { font-size: .75rem; }
.company-chip { display: flex; align-items: center; gap: 11px; margin: 22px 5px 18px; padding: 13px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: rgba(255,255,255,.055); }
.company-chip > span { display: grid; flex: 0 0 37px; width: 37px; height: 37px; place-items: center; color: #07111d; border-radius: 10px; background: linear-gradient(135deg, #82c2ff, #3f91eb); font-size: .72rem; font-weight: 900; }
.company-chip p { display: grid; min-width: 0; gap: 2px; margin: 0; }
.company-chip strong { overflow: hidden; color: #fff; font-size: .74rem; text-overflow: ellipsis; white-space: nowrap; }
.company-chip small { color: #8799ad; font-size: .63rem; }
.portal-nav { display: grid; gap: 5px; }
.portal-nav button, .sidebar-bottom button { display: flex; width: 100%; min-height: 44px; align-items: center; gap: 12px; padding: 10px 12px; color: #aebdcd; border: 0; border-radius: 9px; background: transparent; font-size: .79rem; font-weight: 700; text-align: left; cursor: pointer; }
.portal-nav button:hover, .portal-nav button.active, .sidebar-bottom button:hover { color: #fff; background: rgba(43,132,245,.14); }
.portal-nav button.active { box-shadow: inset 3px 0 var(--blue-500); }
.portal-nav svg, .sidebar-bottom svg { flex: 0 0 19px; width: 19px; height: 19px; }
.nav-count { display: grid; min-width: 21px; height: 21px; margin-left: auto; place-items: center; color: #cae4ff; border-radius: 99px; background: rgba(43,132,245,.25); font-size: .64rem; }
.sidebar-bottom { display: grid; gap: 5px; margin-top: auto; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1); }
.sidebar-bottom a { display: flex; align-items: center; gap: 10px; padding: 7px 12px; color: #99aabc; font-size: .74rem; text-decoration: none; }
.sidebar-bottom .icon-circle { width: 24px; height: 24px; }
.portal-workspace { min-width: 0; }
.portal-topbar { position: sticky; top: 0; z-index: 10; display: flex; min-height: 76px; align-items: center; gap: 14px; padding: 13px clamp(20px, 3.3vw, 48px); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.94); box-shadow: 0 6px 24px rgba(13,33,58,.05); backdrop-filter: blur(14px); }
.portal-topbar > div:nth-child(2) { display: grid; }
.topbar-kicker { margin: 0; color: var(--blue-600); font-size: .62rem; font-weight: 900; letter-spacing: .14em; }
.portal-topbar strong { font-size: .92rem; }
.topbar-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.urgent-call { display: grid; gap: 2px; padding: 7px 12px; color: #7f3f06; border: 1px solid #f0d4a8; border-radius: 10px; background: #fff8e9; text-decoration: none; }
.urgent-call span { color: #9b6a2f; font-size: .59rem; font-weight: 800; }
.urgent-call strong { color: #7f3f06; font-size: .7rem; }
.urgent-call:hover { border-color: #dea856; background: #fff3d9; }
.notification-button { position: relative; display: grid; width: 42px; height: 42px; place-items: center; color: #536277; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; }
.notification-button span { position: absolute; top: 8px; right: 8px; width: 7px; height: 7px; border: 2px solid #fff; border-radius: 50%; background: var(--danger); }
.new-ticket-shortcut { min-height: 42px; padding: 9px 15px; }
.sidebar-toggle { display: none; width: 41px; height: 41px; padding: 9px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.sidebar-toggle span { display: block; height: 2px; margin: 4px 0; background: #27374b; }
.portal-content { max-width: 1480px; margin: 0 auto; padding: 39px clamp(20px, 3.3vw, 48px) 70px; }
.portal-view { display: none; }
.portal-view.active { display: block; animation: view-in .24s ease both; }
@keyframes view-in { from { opacity: 0; transform: translateY(5px); } }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 27px; }
.page-heading h1 { margin: 0; font-size: clamp(1.85rem, 3vw, 2.65rem); line-height: 1.08; letter-spacing: -.035em; }
.page-heading > div > p:last-child { max-width: 670px; margin: 10px 0 0; color: var(--muted); font-size: .87rem; }
.security-banner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 15px; margin-bottom: 21px; padding: 15px 18px; color: #174b3d; border: 1px solid #bde0d2; border-radius: 12px; background: #ecf8f3; }
.security-banner-icon { display: grid; width: 38px; height: 38px; place-items: center; color: #fff; border-radius: 10px; background: var(--green); }
.security-banner strong { font-size: .81rem; }
.security-banner p { margin: 2px 0 0; color: #55786c; font-size: .72rem; }
.security-banner button { color: #167356; border: 0; background: transparent; font-size: .71rem; font-weight: 900; cursor: pointer; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-bottom: 21px; }
.stat-grid article { display: flex; min-height: 106px; align-items: center; gap: 15px; padding: 19px; border: 1px solid var(--line); border-radius: 13px; background: #fff; box-shadow: 0 9px 25px rgba(21,44,72,.045); }
.stat-icon { display: grid; flex: 0 0 46px; width: 46px; height: 46px; place-items: center; border-radius: 12px; }
.stat-icon.blue { color: #1167d7; background: #e7f2ff; }
.stat-icon.amber { color: var(--amber); background: #fff4dd; }
.stat-icon.violet { color: var(--violet); background: #f0ecff; }
.stat-icon.green { color: var(--green); background: #e5f6ef; }
.stat-grid p { display: grid; margin: 0; }
.stat-grid strong { font-size: 1.65rem; line-height: 1; }
.stat-grid small { margin-top: 7px; color: var(--muted); font-size: .69rem; }
.content-card { border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 12px 32px rgba(21,44,72,.05); }
.card-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 22px; border-bottom: 1px solid #e5eaf0; }
.card-header h2, .settings-card h2, .security-settings h2 { margin: 0; font-size: 1.05rem; }
.card-header p, .settings-card p, .security-settings p { margin: 4px 0 0; color: var(--muted); font-size: .73rem; }
.text-button { color: var(--blue-700); border: 0; background: transparent; font-size: .73rem; font-weight: 900; cursor: pointer; }
.text-button.left { margin-top: 16px; padding: 0; text-align: left; }
.ticket-list { display: grid; }
.ticket-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) 102px 24px; align-items: center; gap: 13px; min-height: 72px; padding: 13px 22px; color: inherit; border: 0; border-bottom: 1px solid #edf0f4; background: #fff; text-align: left; cursor: pointer; }
.ticket-row:last-child { border-bottom: 0; border-radius: 0 0 14px 14px; }
.ticket-row:hover { background: #f8fbff; }
.ticket-code { color: #657389; font: 700 .7rem/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; }
.ticket-main { display: grid; gap: 3px; min-width: 0; }
.ticket-main strong { overflow: hidden; font-size: .81rem; text-overflow: ellipsis; white-space: nowrap; }
.ticket-main small { color: #8390a1; font-size: .68rem; }
.status { display: inline-flex; width: max-content; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 99px; font-size: .63rem; font-weight: 900; white-space: nowrap; }
.status::before { width: 6px; height: 6px; border-radius: 50%; background: currentColor; content: ""; }
.status-new, .status-submitted { color:#5b6676; background:#edf1f5; }
.status-accepted { color:#a45e00; background:#fff0cf; }
.status-progress { color: #7151cd; background: #eee9ff; }
.status-done { color: #147c5a; background: #e2f5ed; }
.status-unresolved { color:#b42318; background:#fee7e5; }
.row-arrow { color: #8f9aaa; font-size: 1.4rem; }
.ticket-form { display: grid; max-width: 970px; gap: 21px; padding: clamp(23px, 4vw, 38px); }
.ticket-form .field small { justify-self: end; }
.upload-field input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.upload-field label { display: flex; min-height: 112px; flex-direction: column; align-items: center; justify-content: center; padding: 18px; color: #607086; border: 1px dashed #aebdce; border-radius: 10px; background: #f8fafc; text-align: center; cursor: pointer; }
.upload-field label:hover, .upload-field input:focus + label { color: var(--blue-600); border-color: var(--blue-600); background: #f3f8ff; }
.upload-field svg { margin-bottom: 7px; }
.upload-field strong { font-size: .78rem; }
.upload-field small { margin-top: 3px; color: #8792a2; font-size: .66rem; }
.attachment-list { margin: 8px 2px 0; color: #66758a; font-size: .69rem; overflow-wrap: anywhere; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 6px; }
.ticket-table-card { overflow: hidden; }
.ticket-filters { display: flex; justify-content: space-between; gap: 14px; padding: 17px 20px; border-bottom: 1px solid #e7ebf0; }
.ticket-filters label { position: relative; width: min(100%, 390px); }
.ticket-filters label svg { position: absolute; top: 50%; left: 12px; width: 17px; color: #8794a5; transform: translateY(-50%); }
.ticket-filters input, .ticket-filters select { min-height: 42px; padding: 9px 12px; color: var(--ink); border: 1px solid #d3dae4; border-radius: 8px; background: #fff; }
.ticket-filters input { width: 100%; padding-left: 39px; }
.ticket-filters select { min-width: 155px; }
.ticket-row[hidden] { display: none; }
.settings-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(290px, .5fr); gap: 20px; }
.device-list { display: grid; }
.device-list article { display: flex; align-items: center; gap: 14px; padding: 20px 22px; border-top: 1px solid #e9edf2; }
.device-list article:first-child { border-top: 0; }
.device-icon { display: grid; flex: 0 0 43px; width: 43px; height: 43px; place-items: center; color: var(--blue-600); border-radius: 11px; background: var(--blue-100); }
.device-list article > div { display: grid; }
.device-list strong { font-size: .8rem; }
.device-list small { color: #7b8798; font-size: .69rem; }
.current-device { margin-left: auto; color: var(--green); font-size: .66rem; font-weight: 900; }
.danger-text { margin-left: auto; color: var(--danger); border: 0; background: transparent; font-size: .68rem; font-weight: 900; cursor: pointer; }
.security-settings { padding: 23px; }
.install-settings { display: grid; grid-column: 1 / -1; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 21px 23px; }
.install-settings h2 { margin: 0; font-size: 1.05rem; }
.install-settings p { margin: 5px 0 0; color: var(--muted); font-size: .73rem; }
.install-icon, .install-dialog-icon { display: grid; width: 46px; height: 46px; place-items: center; color: #fff; border-radius: 12px; background: linear-gradient(145deg, var(--blue-500), var(--blue-700)); }
.install-icon svg, .install-dialog-icon svg { width: 24px; height: 24px; }
.contact-email { display: flex; align-items: center; gap: 12px; margin: 22px 0; padding: 14px; border-radius: 10px; background: #f2f6fa; }
.contact-email > span { display: grid; width: 36px; height: 36px; place-items: center; color: #fff; border-radius: 9px; background: var(--blue-600); font-weight: 900; }
.contact-email div { display: grid; }
.contact-email small { color: #7b8797; font-size: .65rem; }
.contact-email strong { font-size: .76rem; }
.ticket-dialog { width: min(calc(100% - 30px), 650px); padding: 31px; color: var(--ink); border: 0; border-radius: 16px; box-shadow: 0 28px 90px rgba(0,0,0,.35); }
.ticket-dialog::backdrop { background: rgba(3,10,18,.67); backdrop-filter: blur(3px); }
.install-dialog { width: min(calc(100% - 30px), 570px); padding: 32px; color: var(--ink); border: 0; border-radius: 16px; box-shadow: 0 28px 90px rgba(0,0,0,.35); }
.install-dialog::backdrop { background: rgba(3,10,18,.67); backdrop-filter: blur(3px); }
.install-dialog h2 { margin: 14px 35px 9px 0; font-size: 1.55rem; line-height: 1.15; }
.install-dialog > p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.65; }
.install-dialog .eyebrow { margin: 20px 0 0; }
.install-instructions { margin-top: 18px; padding: 14px 16px; color: #37516f; border: 1px solid #cfe0f3; border-radius: 10px; background: #f1f7ff; font-size: .76rem; line-height: 1.55; }
.install-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
.ticket-dialog h2 { margin: 0 35px 8px 0; font-size: 1.45rem; }
.dialog-close { position: absolute; top: 16px; right: 16px; display: grid; width: 34px; height: 34px; place-items: center; color: #68768a; border: 0; border-radius: 9px; background: #f1f4f7; font-size: 1.3rem; cursor: pointer; }
.dialog-meta { display: flex; align-items: center; gap: 13px; color: #7b8796; font-size: .69rem; }
.timeline { display: grid; gap: 0; margin-top: 27px; }
.timeline article { position: relative; display: grid; grid-template-columns: 20px 1fr; gap: 13px; padding-bottom: 22px; }
.timeline article::before { position: absolute; top: 11px; bottom: -3px; left: 5px; width: 2px; background: #d9e2ec; content: ""; }
.timeline article:last-child::before { display: none; }
.timeline article > span { position: relative; z-index: 1; width: 12px; height: 12px; margin-top: 3px; border: 3px solid #dceeff; border-radius: 50%; background: var(--blue-600); }
.timeline article div { display: grid; }
.timeline strong { font-size: .8rem; }
.timeline small { color: #8995a5; font-size: .65rem; }
.timeline p { margin: 7px 0 0; color: #59677a; font-size: .75rem; }
.dialog-note { margin: 0; padding: 13px 15px; color: #526479; border-radius: 9px; background: #eef6ff; font-size: .72rem; }
.toast { position: fixed; right: 22px; bottom: 22px; z-index: 100; max-width: min(400px, calc(100% - 44px)); padding: 13px 17px; color: #fff; border-radius: 10px; background: #102238; box-shadow: 0 14px 40px rgba(0,0,0,.28); font-size: .77rem; opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity .2s, transform .2s; }
.toast.show { opacity: 1; transform: none; }

@media (max-width: 1100px) {
  .auth-main { grid-template-columns: minmax(0, .88fr) minmax(410px, 1.12fr); }
  .auth-intro { padding-inline: 45px; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .settings-grid { grid-template-columns: 1fr; }
}

@media (max-width: 840px) {
  .prototype-bar { align-items: flex-start; font-size: .68rem; }
  .auth-header { min-height: 72px; padding-inline: 20px; }
  .auth-header .portal-brand img { width: 125px; }
  .portal-brand span { display: none; }
  .auth-main { display: block; }
  .auth-intro { min-height: auto; padding: 58px 24px; }
  .auth-intro h1 { font-size: clamp(2.3rem, 9vw, 3.5rem); }
  .auth-panel { padding: 38px 20px 54px; }
  .auth-footer { align-items: flex-start; padding-inline: 20px; }
  .auth-footer nav { flex-wrap: wrap; gap: 8px 18px; }
  .portal-layout { display: block; }
  .portal-sidebar { position: fixed; top: 34px; bottom: 0; left: 0; z-index: 30; width: min(300px, 86vw); height: auto; box-shadow: 20px 0 55px rgba(0,0,0,.35); transform: translateX(-105%); transition: transform .22s ease; }
  .portal-sidebar.open { transform: none; }
  .portal-topbar { top: 34px; }
  .sidebar-toggle { display: block; }
  .urgent-call span { display: none; }
  .urgent-call strong { font-size: 0; }
  .urgent-call strong::after { font-size: .7rem; content: "+421 911 077 990"; }
  .ticket-row { grid-template-columns: 80px minmax(0, 1fr) 90px; }
  .row-arrow { display: none; }
}

@media (max-width: 620px) {
  .header-help .icon-circle { display: none; }
  .header-help { font-size: .72rem; }
  .auth-card { padding: 25px 19px; border-radius: 15px; }
  .auth-card-heading { align-items: flex-start; }
  .auth-footer { flex-direction: column; }
  .activation-main { padding: 30px 14px; }
  .activation-card { padding: 28px 18px; border-radius: 15px; }
  .activation-progress span b { display: none; }
  .form-columns { grid-template-columns: 1fr; }
  .new-ticket-shortcut { width: 42px; overflow: hidden; padding: 0; color: transparent; white-space: nowrap; }
  .urgent-call { padding: 7px 9px; }
  .urgent-call strong::after { content: "Zavolať"; }
  .new-ticket-shortcut::first-letter { color: #fff; }
  .portal-content { padding: 28px 14px 50px; }
  .page-heading { align-items: flex-start; flex-direction: column; }
  .security-banner { grid-template-columns: auto 1fr; }
  .security-banner button { grid-column: 2; justify-self: start; padding: 0; }
  .stat-grid { gap: 10px; }
  .stat-grid article { min-height: 93px; padding: 14px; }
  .stat-icon { flex-basis: 39px; width: 39px; height: 39px; }
  .ticket-row { grid-template-columns: 1fr auto; gap: 8px 12px; padding: 15px 17px; }
  .ticket-code { grid-column: 1; }
  .ticket-main { grid-column: 1; }
  .status { grid-row: 1 / span 2; grid-column: 2; }
  .card-header { align-items: flex-start; }
  .ticket-filters { flex-direction: column; }
  .ticket-filters label, .ticket-filters select { width: 100%; }
  .form-actions { align-items: stretch; flex-direction: column-reverse; }
  .device-list article { align-items: flex-start; flex-wrap: wrap; }
  .install-settings { grid-template-columns: auto 1fr; }
  .install-settings button { grid-column: 1 / -1; }
  .install-actions { align-items: stretch; flex-direction: column-reverse; }
  .current-device, .danger-text { width: 100%; margin: 0 0 0 57px; text-align: left; }
}

/* Production portal */
.portal-nav a {
  display:flex;
  width:100%;
  min-height:44px;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  color:#aebdcd;
  border-radius:9px;
  font-size:.79rem;
  font-weight:700;
  text-decoration:none;
}
.portal-nav a:hover,
.portal-nav a.active { color:#fff; background:rgba(43,132,245,.14); }
.portal-nav a.active { box-shadow:inset 3px 0 var(--blue-500); }
.portal-nav a svg { flex:0 0 19px; width:19px; height:19px; }
.sidebar-bottom form { margin:0; }
.sidebar-bottom form button { font:inherit; }
.ticket-row { text-decoration:none; }
.server-alert { margin:0 0 18px; padding:13px 15px; border:1px solid; border-radius:9px; font-size:.78rem; line-height:1.55; }
.server-alert-success { color:#17633b; border-color:#a8dfc0; background:#effbf4; }
.server-alert-error { color:#9d2634; border-color:#f0b2bb; background:#fff2f4; }
.server-alert-warning { color:#7f5714; border-color:#ead09c; background:#fff9eb; }
.empty-state { margin:0; padding:28px 22px; color:var(--muted); text-align:center; }
.production-ticket-detail { margin-bottom:22px; padding:24px; }
.production-ticket-detail .card-header { margin-bottom:18px; }
.ticket-description { padding:18px; border:1px solid #e4eaf1; border-radius:11px; background:#f8fafc; }
.ticket-description strong,
.attachment-links > strong { display:block; margin-bottom:8px; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; }
.ticket-description p { margin:0; color:#46566a; font-size:.82rem; line-height:1.75; }
.attachment-links { display:flex; flex-wrap:wrap; gap:10px; margin:18px 0; align-items:center; }
.attachment-links > strong { flex:0 0 100%; margin:0; }
.attachment-links a { padding:8px 11px; color:#175eae; border:1px solid #d7e4f2; border-radius:8px; background:#f5f9ff; font-size:.72rem; font-weight:800; text-decoration:none; }
.message-thread { display:grid; gap:12px; margin:20px 0; }
.message-item { max-width:82%; padding:14px 16px; border:1px solid #e3e9f0; border-radius:12px; background:#fff; }
.message-item strong { font-size:.75rem; }
.message-item small { display:block; margin:3px 0 8px; color:#8794a5; font-size:.65rem; }
.message-item p { margin:0; color:#425166; font-size:.78rem; line-height:1.65; }
.message-admin { justify-self:end; border-color:#cfe2fb; background:#eff6ff; }
.production-reply { margin-top:22px; padding-top:20px; border-top:1px solid #e7ebf0; }
.production-reply textarea { width:100%; resize:vertical; }
.production-reply > div { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:10px; }
.ticket-admin-controls { display:flex; align-items:center; gap:10px; margin-top:18px; padding:15px; border:1px solid #e4eaf1; border-radius:10px; background:#f8fafc; }
.ticket-admin-controls label { font-size:.73rem; font-weight:800; }
.ticket-admin-controls select { min-height:42px; padding:8px 34px 8px 10px; border:1px solid #cbd6e2; border-radius:8px; background:#fff; }
button[aria-busy="true"] { opacity:.65; cursor:wait; }
.settings-note { margin:18px 0 0; color:var(--muted); font-size:.75rem; line-height:1.6; }

@media (max-width: 640px) {
  .message-item { max-width:100%; }
  .production-ticket-detail { padding:17px; }
  .production-reply > div,
  .ticket-admin-controls { align-items:stretch; flex-direction:column; }
}

.employee-grid { display:grid; grid-template-columns:minmax(300px,.72fr) minmax(0,1.28fr); gap:20px; }
.employee-list { display:grid; }
.employee-row { display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:13px; padding:16px 18px; border-bottom:1px solid #e8edf3; }
.employee-row:last-child { border-bottom:0; }
.employee-avatar { display:grid; width:40px; height:40px; place-items:center; color:#1767d5; border-radius:12px; background:#e9f3ff; font-size:.72rem; font-weight:900; }
.employee-row div { min-width:0; }
.employee-row strong, .employee-row small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.employee-row small { margin-top:3px; color:#77859a; font-size:.68rem; }
.employee-state { padding:6px 9px; border-radius:99px; color:#147c5a; background:#e2f5ed; font-size:.61rem; font-weight:900; }
.employee-state.pending { color:#a36408; background:#fff1d3; }
.preference-card { display:grid; gap:17px; }
.preference-toggle { display:flex; align-items:flex-start; gap:12px; padding:16px; border:1px solid #dce5ef; border-radius:12px; background:#f8fafc; cursor:pointer; }
.preference-toggle input { width:19px; height:19px; margin-top:2px; accent-color:#1767d5; }
.preference-toggle span { display:grid; gap:4px; }
.preference-toggle small { color:#64748b; line-height:1.5; }
.ticket-owner { display:block; margin-top:3px; color:#64748b; font-size:.68rem; }
.resolution-note { margin-top:18px; padding:15px 17px; border-left:4px solid #d92d20; border-radius:0 10px 10px 0; background:#fff2f1; }
.resolution-note strong { display:block; margin-bottom:6px; color:#a71910; }
.resolution-note p { margin:0; color:#563532; line-height:1.6; }
.ticket-finalize-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px; }
.ticket-finalize-grid form { display:grid; gap:10px; padding:15px; border:1px solid #e1e7ee; border-radius:11px; background:#f8fafc; }
.ticket-finalize-grid textarea { width:100%; min-height:86px; resize:vertical; }

@media(max-width:900px){.employee-grid,.ticket-finalize-grid{grid-template-columns:1fr}}