:root{color-scheme:dark;--bg:#081425;--surface:#101f32;--line:#26374a;--text:#eef3f9;--muted:#a5b5c7;--accent:#cfb77c;--blue:#173650;--danger:#ffb1b9;font-family:Assistant,"Segoe UI",Arial,sans-serif}
*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;background:var(--bg);color:var(--text);min-height:100vh;display:flex;flex-direction:column}button,input,textarea,select{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{opacity:.5;cursor:wait}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}a{color:inherit}.topbar{height:82px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:25px;padding:0 5vw;background:#09182b}.topbar img{display:block;width:156px;height:auto}.portal-label{border-inline-start:1px solid var(--line);padding-inline-start:25px;font-size:14px;color:var(--muted)}.topbar #logout{margin-inline-start:auto}main{width:min(1180px,90vw);margin:0 auto;flex:1}.eyebrow{color:var(--accent);font-size:12px;font-weight:700;letter-spacing:.03em}h1,h2,p{margin-top:0}h1{font-size:32px;line-height:1.3;margin-bottom:12px;font-weight:650}h2{font-size:21px;margin-bottom:12px}.muted,.hint{color:var(--muted);line-height:1.6}.hint{font-size:12px;margin:10px 0 22px}.login{width:min(440px,100%);margin:65px auto 50px}.login>h1{font-size:46px;margin:14px 0}.lead{line-height:1.7;color:var(--muted);font-size:17px;margin-bottom:34px}.login-form{border-top:1px solid var(--line);padding-top:27px}.login-form h2{font-size:19px}.login-form>.muted{font-size:13px}.login-form .primary{width:100%;justify-content:space-between}.login-form .quiet{display:block;margin:14px auto 0}.login-foot{font-size:12px;text-align:center;color:var(--muted);margin-top:26px}label{display:block;font-size:13px;font-weight:600;margin:17px 0 8px}input,select,textarea{background:#0b1a2d;border:1px solid #34455a;border-radius:7px;width:100%;padding:12px 14px;color:var(--text)}input::placeholder,textarea::placeholder{color:#7f91a5}textarea{resize:vertical;line-height:1.65}fieldset{border:0;padding:0;margin:22px 0 0}legend{font-size:13px;font-weight:600;margin-bottom:8px}.channels{display:flex;gap:12px}.channels label{display:flex;align-items:center;gap:10px;flex:1;border:1px solid #34455a;border-radius:7px;padding:13px;margin:0;cursor:pointer}.channels label:has(input:checked){background:#142c40;border-color:#82b1ce}.channels input{width:17px;height:17px;margin:0;accent-color:#a7cce5}.primary{border:1px solid #ddc890;border-radius:7px;background:var(--accent);color:#101a27;padding:12px 19px;display:inline-flex;gap:20px;align-items:center;justify-content:center;font-weight:700;white-space:nowrap}.primary:hover{background:#dfc891}.quiet{border:1px solid var(--line);background:transparent;color:var(--muted);padding:9px 13px;border-radius:6px}.quiet:hover{color:var(--text);background:var(--surface)}.otp{font-size:27px;letter-spacing:.4em;text-align:center;margin-bottom:20px}#notice:empty{display:none}#notice{padding:14px 18px;margin:20px 0;border:1px solid #416851;border-radius:7px;background:#152b25;font-size:14px}#notice.error{background:#351c29;border-color:#713340;color:var(--danger)}.loading{padding:90px;text-align:center;color:var(--muted)}.workspace-heading{display:flex;align-items:center;justify-content:space-between;gap:25px;margin:46px 0 29px}.workspace-heading h1{margin-top:8px}.workspace-heading p{margin-bottom:0;font-size:14px}.toolbar{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:17px}.tabs{display:flex;gap:5px}.tabs button{background:transparent;border:0;color:var(--muted);padding:10px 17px;border-radius:6px}.tabs button.selected{background:#18334b;color:#e9f5ff}.table-wrap{border:1px solid var(--line);border-radius:9px;overflow-x:auto;background:#0c1a2c}table{width:100%;border-collapse:collapse;font-size:14px;text-align:start}th{font-size:12px;color:var(--muted);font-weight:600;background:#102136;padding:15px 18px;white-space:nowrap}td{padding:18px;border-top:1px solid var(--line);text-align:start}td:first-child{color:var(--muted);font-size:12px}tr:hover td{background:#13263a}.ticket-link{background:transparent;border:0;color:var(--text);font-size:14px;text-align:start;padding:0;font-weight:600}.ticket-link:hover{text-decoration:underline;text-underline-offset:4px}.badge{display:inline-flex;align-items:center;border:1px solid #38536a;background:#163047;color:#bdd9ee;border-radius:20px;padding:4px 10px;white-space:nowrap;font-size:12px}.badge[data-status="resolved"],.badge[data-status="closed"]{border-color:#365b51;background:#153128;color:#a5d8c4}.badge[data-status="waiting"]{border-color:#61543b;background:#302b1f;color:#dccd9d}.priority-urgent{color:#ffb3b9}.priority-high{color:#e8c99a}.empty{padding:64px 20px;text-align:center}.empty>span{display:inline-flex;border:1px solid #456253;color:#b6dcc5;border-radius:50%;padding:9px 15px;margin-bottom:21px;font-size:20px}.empty h2{font-size:19px}.pagination{display:flex;justify-content:center;align-items:center;gap:20px;margin:23px 0}.pagination span{font-size:12px;color:var(--muted)}footer{text-align:center;font-size:12px;color:#8094ab;padding:30px 0 24px}footer span{margin:0 9px}dialog{margin:0 0 0 auto;position:fixed;inset:0 0 0 auto;width:min(640px,100vw);max-width:100vw;height:100dvh;max-height:100dvh;border:0;border-inline-start:1px solid var(--line);background:var(--surface);color:var(--text);padding:32px;overflow:auto}dialog::backdrop{background:#020913ad;backdrop-filter:blur(3px)}.dialog-header{display:flex;justify-content:space-between;align-items:center;gap:20px;border-bottom:1px solid var(--line);padding-bottom:25px;margin-bottom:27px}.dialog-header h2{margin:7px 0 0;overflow-wrap:anywhere}.dialog-actions{border-top:1px solid var(--line);margin-top:23px;padding-top:23px}.detail-meta{display:flex;gap:15px;align-items:center;flex-wrap:wrap;color:var(--muted);font-size:13px;padding-bottom:24px;border-bottom:1px solid var(--line)}.detail-description{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.8;font-size:15px;margin-top:25px}#form-notice{color:var(--danger);font-size:13px;margin-top:16px}#form-notice:empty{display:none}
@media(max-width:700px){.topbar{height:68px;padding:0 20px;gap:16px}.topbar img{width:125px}.portal-label{font-size:12px;padding-inline-start:16px}.login{margin:39px auto}.login>h1{font-size:38px}.workspace-heading{align-items:flex-start;flex-direction:column;margin-top:30px;gap:18px}h1{font-size:26px}.workspace-heading .primary{width:100%}.tabs button{padding:10px;font-size:12px}td,th{padding:14px 12px}th:nth-child(6),td:nth-child(6),th:nth-child(4),td:nth-child(4){display:none}.ticket-link{max-width:165px;overflow-wrap:anywhere}dialog{padding:23px 20px}.topbar #logout{font-size:12px;padding:7px}.loading{padding:75px 15px}}

/* Match the light DoubleCRM login surface without changing the signed-in workspace. */
body:has(#workspace[hidden]) {
  color-scheme: light;
  --text: #16374c;
  --muted: #607c8e;
  --line: #d7e7ee;
  --accent: #009fba;
  --surface: #f0f9fb;
  --danger: #b42318;
  color: var(--text);
  min-height: 100dvh;
  background: radial-gradient(circle at 82% 10%, rgba(0,183,162,.16), transparent 26%),
    radial-gradient(circle at 12% 88%, rgba(0,159,202,.13), transparent 30%),
    linear-gradient(135deg, #f7fbfd 0%, #eaf3f7 52%, #f9fcfd 100%);
}
body:has(#workspace[hidden])::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(18,73,96,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18,73,96,.04) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.7), rgba(0,0,0,.08));
}
body:has(#workspace[hidden]) .topbar { display: none; }
body:has(#workspace[hidden]) main {
  width: min(1060px, calc(100% - 56px));
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 36px 0 12px;
}
.login {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  width: 100%;
  margin: 0;
  border: 1px solid #d8e9ef;
  border-radius: 38px;
  overflow: hidden;
  background: rgba(255,255,255,.94);
  box-shadow: 0 28px 72px rgba(22,55,76,.13), inset 0 1px 0 rgba(255,255,255,.9);
}
.login-panel { padding: 38px 48px 30px; min-width: 0; }
.login-brand { text-align: center; margin-bottom: 27px; }
.login-brand > img {
  display: block;
  width: min(270px, 85%);
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 14px 24px rgba(0,143,174,.12));
}
.login-copy { margin-top: 22px; }
.login-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 999px;
  background: #e9f8fa;
  color: #07839a;
  font-size: 11px;
  font-weight: 800;
}
.login-kicker::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00b7a2;
  box-shadow: 0 0 0 4px rgba(0,183,162,.12);
}
.login-copy h1 { margin: 14px 0 8px; font-size: 29px; line-height: 1.2; color: #16374c; font-weight: 800; }
.login-copy p { margin: 0; color: #607c8e; font-size: 14px; line-height: 1.75; }
.login-form { border: 0; padding: 0; }
.login-form label, .login-form legend { color: #456276; font-size: 12px; font-weight: 800; }
.login-form > label { margin: 0 0 8px; }
.login-form > input {
  height: 54px;
  padding: 0 18px;
  border: 1px solid #d7e7ee;
  border-radius: 18px;
  background: #f9fcfd;
  color: #16374c;
  font-size: 16px;
  box-shadow: inset 0 1px 0 #fff;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.login-form input::placeholder { color: #8a9eab; font-weight: 400; }
.login-form > input:focus { border-color: #00a7bd; background: #fff; box-shadow: 0 0 0 4px rgba(0,159,202,.12); }
.login-form fieldset { margin-top: 21px; }
.login-form legend { margin-bottom: 10px; }
.login-form .channels { gap: 12px; }
.login-form .channels label { justify-content: center; border: 1px solid #d7e7ee; border-radius: 16px; padding: 14px 12px; font-size: 14px; background: #f9fcfd; }
.login-form .channels label:has(input:checked) { background: #eaf9fa; border-color: #00a7bd; color: #057d91; box-shadow: inset 0 0 0 1px rgba(0,167,189,.08); }
.login-form .channels input { accent-color: #009fb4; width: 16px; height: 16px; }
.login-form .hint { font-size: 12px; line-height: 1.7; margin: 13px 0 21px; color: #607c8e; }
.login-form .primary {
  height: 56px;
  border: 0;
  border-radius: 20px;
  padding: 0 20px;
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  background: linear-gradient(135deg, #00b7a2, #009fca 54%, #087fa5);
  box-shadow: 0 16px 30px rgba(0,144,177,.23);
  transition: transform .18s ease, box-shadow .18s ease;
}
.login-form .primary:hover { transform: translateY(-1px); box-shadow: 0 20px 36px rgba(0,144,177,.3); }
.login-form .primary:active { transform: translateY(0); }
.login-form .primary:disabled { transform: none; opacity: .65; }
.login-form .primary span { font-size: 21px; font-weight: 400; }
.login-form .quiet { border-color: transparent; color: #07839a; font-size: 12px; white-space: normal; }
.login-form .quiet:hover { background: #edf8fa; }
.login-form h2 { color: #16374c; }
.login-form .otp { font-size: 27px; letter-spacing: .35em; }
.login-foot { font-size: 11px; color: #6a8594; margin: 25px 0 0; line-height: 1.7; }
.login-visual {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 0;
  padding: 26px 24px 38px;
  text-align: center;
  border-inline-start: 1px solid #e1eff2;
  background: linear-gradient(155deg, #f1fbfc, #e9f6f8 60%, #f6fbfc);
}
.support-illustration { display: block; width: 100%; max-width: 450px; height: auto; aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply; }
.visual-copy { padding: 0 12px; margin-top: -6px; }
.visual-kicker { color: #07839a; font-size: 11px; font-weight: 800; }
.visual-copy h2 { color: #16374c; font-size: 32px; line-height: 1.3; margin: 12px 0 13px; font-weight: 750; }
.visual-copy p { color: #607c8e; font-size: 14px; line-height: 1.8; margin: 0; }
body:has(#workspace[hidden]) #notice { margin: 0 0 18px; background: #ecf9f3; border-color: #a5d9bf; color: #1a6140; }
body:has(#workspace[hidden]) #notice.error { background: #fff5f4; border-color: #ffc9c2; color: #b42318; }
footer { position: relative; line-height: 1.6; }
footer bdi { font-weight: 750; }
body:has(#workspace[hidden]) footer { color: #607c8e; padding: 24px 18px 22px; }
@media (min-width: 801px) and (max-height: 780px) {
  body:has(#workspace[hidden]) main { padding-top: 22px; }
  .login-panel { padding-block: 27px 24px; }
  .login-brand { margin-bottom: 21px; }
  .login-copy { margin-top: 15px; }
  .login-copy h1 { font-size: 27px; }
  .support-illustration { max-width: 365px; }
  body:has(#workspace[hidden]) footer { padding-block: 16px; }
}
@media (max-width: 800px) {
  body:has(#workspace[hidden]) main { width: min(472px, calc(100% - 28px)); padding: 24px 0 0; }
  .login { grid-template-columns: minmax(0, 1fr); border-radius: 26px; }
  .login-panel { padding: 30px 26px 26px; }
  .login-brand > img { width: min(250px, 82%); }
  .login-copy h1 { font-size: 26px; }
  .login-visual { flex-direction: row; padding: 12px 15px; border-inline-start: 0; border-top: 1px solid #e1eff2; gap: 4px; }
  .support-illustration { width: 44%; max-width: 150px; flex-shrink: 0; }
  .visual-copy { padding: 0 5px; margin: 0; text-align: start; }
  .visual-kicker { font-size: 10px; }
  .visual-copy h2 { font-size: 19px; margin: 7px 0; }
  .visual-copy p { font-size: 11px; line-height: 1.65; }
  body:has(#workspace[hidden]) footer { padding: 19px 14px max(19px, env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .login-form input, .login-form .primary { transition: none; } }