:root {
  --ca-brand: #0284c7;
  --ca-header: #0284c7;
  --ca-accent: #0284c7;
  --ca-bg: #f5f5f7;
  --ca-panel: #ffffff;
  --ca-panel-soft: #fafafa;
  --ca-border: #e5e5ea;
  --ca-muted: #6e6e73;
  --ca-faint: #8e8e93;
  --ca-fg: #1d1d1f;
  --ca-secondary: #3a3a3c;
  --ca-hover: #f2f2f7;
  --ca-input: #ffffff;
  --ca-ring: rgba(2, 132, 199, 0.35);
  --ca-font: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --ca-danger: #b42318;
  --ca-ok: #027a48;
}
html.dark {
  --ca-brand: #ffffff;
  --ca-header: #ffffff;
  --ca-accent: #8e8e93;
  --ca-bg: #000000;
  --ca-panel: #1c1c1e;
  --ca-panel-soft: #2c2c2e;
  --ca-border: #38383a;
  --ca-muted: #98989d;
  --ca-faint: #636366;
  --ca-fg: #f5f5f7;
  --ca-secondary: #e5e5ea;
  --ca-hover: #2c2c2e;
  --ca-input: #1c1c1e;
  --ca-ring: rgba(142, 142, 147, 0.45);
  --ca-danger: #ff6961;
  --ca-ok: #30d158;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--ca-bg);
  color: var(--ca-fg);
  font: 14px/1.45 var(--ca-font);
}
html.dark body {
  background: radial-gradient(900px 420px at 50% -8%, rgba(255, 255, 255, 0.05), transparent 55%), #000;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--ca-brand); text-decoration: none; }
html.dark a { color: #ffffff; }
.hidden { display: none !important; }
.brand-word { color: var(--ca-brand); letter-spacing: -0.03em; font-size: 1.25rem; line-height: 1; }
html.dark .brand-word, html.dark .page-title, html.dark .brand-word-login { color: #ffffff; }
.brand-cor { font-weight: 400; }
.brand-suffix { font-weight: 700; }
.login-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  position: relative;
}
.login-card {
  width: min(420px, 100%);
  background: var(--ca-panel);
  border: 1px solid var(--ca-border);
  border-radius: 1.1rem;
  padding: 1.6rem 1.4rem 1.2rem;
}
.login-brand { display: flex; align-items: center; gap: 0.85rem; justify-content: center; margin-bottom: 1.2rem; }
.login-mark { width: 4.75rem; height: 4.75rem; border-radius: 1rem; display: block; }
.form-field { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.75rem; }
.form-field label, .lbl { color: var(--ca-muted); font-size: 0.82rem; }
input, select, textarea {
  width: 100%;
  background: var(--ca-input);
  border: 1px solid var(--ca-border);
  border-radius: 0.65rem;
  padding: 0.55rem 0.7rem;
}
textarea { min-height: 7rem; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--ca-ring); border-color: transparent; }
.btn, .btn-primary, .btn-quiet, .header-icon-btn, .help-pill {
  border-radius: 999px;
  border: 1px solid var(--ca-border);
  background: var(--ca-panel);
  color: var(--ca-fg);
  padding: 0.45rem 0.9rem;
  cursor: pointer;
  text-decoration: none;
}
.btn-primary { background: #0284c7; color: #fff; border: none; }
html.dark .btn-primary { background: #3a3a3c; color: #f5f5f7; border: 1px solid #48484a; }
html.dark .btn-primary:hover { background: #48484a; }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.55; cursor: wait; }
.btn-quiet { background: transparent; }
.header-icon-btn, .help-pill {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.help-pill { width: auto; padding: 0 0.75rem; border-radius: 999px; font-weight: 600; }
.link-btn { background: none; border: 0; color: var(--ca-muted); cursor: pointer; padding: 0.35rem 0; display: block; }
.alert-error, .banner {
  background: rgba(180, 35, 24, 0.12);
  color: var(--ca-danger);
  border-radius: 0.65rem;
  padding: 0.55rem 0.7rem;
  margin-bottom: 0.7rem;
}
.banner.ok { background: rgba(48, 209, 88, 0.12); color: var(--ca-ok); }
.corauth-panel { display: none; margin-bottom: 0.7rem; }
.corauth-panel.show { display: block; }
.login-info, .muted { color: var(--ca-muted); }
.login-help { color: var(--ca-faint); font-size: 0.8rem; }
.app { min-height: 100vh; display: flex; flex-direction: column; }
.ca-topbar {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0 0.85rem;
  border-bottom: 1px solid var(--ca-border);
  background: rgba(0, 0, 0, 0.92);
  position: sticky;
  top: 0;
  z-index: 20;
}
html:not(.dark) .ca-topbar { background: rgba(255, 255, 255, 0.92); }
.ca-brand { display: flex; align-items: center; gap: 0.55rem; color: inherit; text-decoration: none; }
.ca-mark { width: 32px; height: 32px; border-radius: 8px; }
.ca-search { flex: 1; max-width: 420px; }
.ca-search input { background: #000; border-color: #38383a; }
html:not(.dark) .ca-search input { background: #fff; }
.ca-header-right { display: flex; align-items: center; gap: 0.4rem; }
.shell { flex: 1; display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 0; }
.rail {
  border-right: 1px solid var(--ca-border);
  padding: 0.75rem 0.55rem 1.5rem;
  overflow: auto;
  background: #000;
}
html:not(.dark) .rail { background: #f5f5f7; }
.rail button, .rail a.nav {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  color: var(--ca-secondary);
  border-radius: 0.6rem;
  padding: 0.42rem 0.6rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}
.rail button.active, .rail button:hover { background: var(--ca-panel); color: #fff; }
html:not(.dark) .rail button.active { color: #0284c7; }
.rail h3 { margin: 0.9rem 0.6rem 0.25rem; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ca-faint); font-weight: 650; }
.stage { min-width: 0; min-height: 0; overflow: auto; }
.work { display: grid; grid-template-columns: 360px minmax(0, 1fr) 292px; height: calc(100vh - 56px - var(--ca-banner, 0px)); min-height: 0; }
.list, .thread, .props { min-width: 0; min-height: 0; overflow: auto; }
.list { border-right: 1px solid var(--ca-border); }
.props { border-left: 1px solid var(--ca-border); background: #000; padding: 0.85rem; }
html:not(.dark) .props { background: #f5f5f7; }
.list-head, .thread-head { padding: 0.75rem 0.85rem; border-bottom: 1px solid var(--ca-border); display: flex; justify-content: space-between; gap: 0.5rem; align-items: center; position: sticky; top: 0; background: #000; z-index: 2; }
html:not(.dark) .list-head, html:not(.dark) .thread-head { background: #f5f5f7; }
.ticket-row { width: 100%; text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--ca-border); padding: 0.75rem 0.85rem; cursor: pointer; color: inherit; }
.ticket-row.active, .ticket-row:hover { background: var(--ca-panel); }
.ticket-row b { display: block; font-weight: 620; color: #fff; }
html:not(.dark) .ticket-row b { color: #1d1d1f; }
.meta { color: var(--ca-muted); font-size: 0.78rem; display: flex; gap: 0.45rem; flex-wrap: wrap; }
.pip { width: 8px; height: 8px; border-radius: 99px; display: inline-block; background: #fff; }
.pip.high, .pip.urgent, .sla-bad { background: var(--ca-danger); }
.pip.waiting { background: #ffd60a; }
.chip { border: 1px solid var(--ca-border); border-radius: 999px; padding: 0.1rem 0.45rem; font-size: 0.75rem; color: var(--ca-muted); }
.msg { margin: 0.75rem 0.9rem; padding: 0.75rem 0.85rem; background: var(--ca-panel); border-radius: 0.8rem; border: 1px solid var(--ca-border); }
.msg.internal { border-left: 3px solid #8e8e93; }
.msg .who { color: var(--ca-muted); font-size: 0.78rem; margin-bottom: 0.3rem; }
.composer { border-top: 1px solid var(--ca-border); padding: 0.75rem; position: sticky; bottom: 0; background: #000; }
html:not(.dark) .composer { background: #fff; }
.row { display: flex; gap: 0.45rem; flex-wrap: wrap; align-items: center; }
.pad { padding: 1rem 1.1rem 2rem; }
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
.card, .panel { background: var(--ca-panel); border: 1px solid var(--ca-border); border-radius: 0.9rem; padding: 0.85rem 1rem; }
.card b { display: block; font-size: 1.5rem; color: #fff; }
html:not(.dark) .card b { color: #0284c7; }
.page-title { margin: 0 0 0.2rem; font-size: 1.45rem; letter-spacing: -0.02em; }
.bars { display: flex; flex-direction: column; gap: 0.4rem; }
.bar { height: 8px; background: #3a3a3c; border-radius: 99px; }
.modal-back { position: fixed; inset: 0; background: rgba(0,0,0,0.62); display: flex; align-items: center; justify-content: center; z-index: 30; padding: 1rem; }
.modal { width: min(560px, 100%); background: var(--ca-panel); border: 1px solid var(--ca-border); border-radius: 1rem; padding: 1rem; max-height: calc(100vh - 2rem); overflow: auto; }
.hits { position: absolute; top: 46px; left: 220px; width: min(420px, 50vw); background: var(--ca-panel); border: 1px solid var(--ca-border); border-radius: 0.8rem; z-index: 25; max-height: 320px; overflow: auto; }
.hit { display: block; width: 100%; text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--ca-border); color: inherit; padding: 0.55rem 0.7rem; cursor: pointer; }
.hit:hover { background: var(--ca-hover); }
.notice { margin: 0; padding: 0.45rem 0.9rem; background: #1c1c1e; color: #f5f5f7; border-bottom: 1px solid var(--ca-border); }
html:not(.dark) .notice { background: #f5f5f7; color: #1d1d1f; }
.count { color: var(--ca-faint); font-variant-numeric: tabular-nums; }
.thread-body { min-height: 0; }
.composer textarea { min-height: 5.5rem; }
.prop-block { margin-bottom: 0.85rem; }
.prop-block h4 { margin: 0 0 0.35rem; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ca-faint); }
.tabs { display: flex; gap: 0.35rem; flex-wrap: wrap; margin: 0.6rem 0 0.8rem; }
.tabs button.active { background: var(--ca-panel-soft); color: #fff; }
html:not(.dark) .tabs button.active { color: #0284c7; }
.portal { max-width: 980px; margin: 0 auto; padding: 1.25rem; }
.portal-hero { display: flex; justify-content: space-between; gap: 1rem; align-items: center; margin-bottom: 1rem; }
.split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 0.8rem; }
@media (max-width: 1100px) {
  .work { grid-template-columns: 300px minmax(0, 1fr); }
  .props { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--ca-border); }
  .cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 800px) {
  .shell { grid-template-columns: 1fr; }
  .rail { display: flex; gap: 0.25rem; overflow: auto; border-right: 0; border-bottom: 1px solid var(--ca-border); }
  .rail h3 { display: none; }
  .rail button { width: auto; white-space: nowrap; }
  .work { grid-template-columns: 1fr; height: auto; }
  .ca-search { display: none; }
  .split, .cards { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .login-brand { flex-direction: column; }
}