:root {font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#292e2a;background:#f6f6f1;--muted:#7e847b;--line:#dddfd5;--accent:#ec6c4d;--dark:#273c30;--paper:#fdfdf9;font-synthesis:none}
* {box-sizing:border-box}
body {margin:0;font-size:14px}
a {color:inherit;text-decoration:none}
button,input,textarea {font:inherit}
button {cursor:pointer;color:inherit}
button:disabled {opacity:.5;cursor:wait}
[hidden] {display:none!important}
:focus-visible {outline:2px solid var(--accent);outline-offset:4px}
h1,h2,h3,p {margin:0}
h1 {font-size:58px;font-weight:500;letter-spacing:-2.8px;line-height:1.1}
h2 {font-size:23px;font-weight:550;letter-spacing:-.7px}
h3 {font-size:13px;font-weight:600}
.top-strip {background:var(--dark);color:#e5eadc;font:9px monospace;letter-spacing:1.4px;padding:11px max(30px,calc((100% - 1180px)/2));display:flex;align-items:center;gap:9px;white-space:nowrap}
.live-dot {display:inline-block;background:#c4dc93;border-radius:50%;height:5px;width:5px}
.strip-right {margin-left:auto;font-size:8px;color:#a3b2a0}
header {max-width:1180px;margin:auto;display:flex;align-items:center;justify-content:space-between;height:98px;border-bottom:1px solid var(--line);gap:35px}
.brand {display:flex;align-items:center;gap:9px;font-weight:700;font-size:31px;letter-spacing:-1.4px}
.brand-dot {color:var(--accent)}
.logo-mark {display:grid;place-items:center;height:32px;width:32px;background:var(--accent);color:#fff7e9;border-radius:9px;font-size:27px;font-weight:400;line-height:1;padding-bottom:2px}
nav {display:flex;gap:32px;font-size:12px;margin-right:auto;margin-left:55px;height:100%;align-items:center}
nav a {color:var(--muted);height:100%;display:flex;align-items:center;gap:10px;border-bottom:2px solid transparent;padding-top:2px}
nav a.active {color:#303c30;border-bottom-color:var(--accent)}
nav a:hover,.monitor-link:hover {color:var(--accent)}
.monitor-link {font-size:11px;color:#6c796d}
main {max-width:1180px;margin:0 auto;min-height:calc(100vh - 221px);padding:52px 0 70px}
.eyebrow {font:9px monospace;font-weight:500;letter-spacing:1.6px;color:#717d68}
.hero {margin-bottom:36px}
.hero .eyebrow {margin-bottom:17px}
.hero h1 {margin-bottom:19px}
.hero p {font-size:13px;color:var(--muted);line-height:1.8}
.public-grid {display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);gap:40px;align-items:start}
.card {border:1px solid var(--line);background:var(--paper);border-radius:12px;box-shadow:0 3px 9px #26322b03;overflow:hidden}
.form-card {padding:32px}
.card-heading {display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:29px}
.card-heading .step {display:block;font:9px monospace;letter-spacing:1.2px;color:#a0998d;margin-bottom:9px}
.badge {font:8px monospace;letter-spacing:1px;border:1px solid #dbe2d0;background:#f2f5eb;color:#7c866e;padding:6px 8px;border-radius:4px;white-space:nowrap}
.form-row {display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-field {margin:0 0 23px}
label {display:block;font-size:11px;font-weight:500;margin-bottom:9px;color:#4e5a4e}
input,textarea {width:100%;border:1px solid #daddd3;border-radius:6px;background:#fffefa;color:#333d33;padding:12px 13px;font-size:12px;outline:none}
input:focus,textarea:focus {border-color:#a6b596;box-shadow:0 0 0 3px #a6b59616}
input::placeholder,textarea::placeholder {color:#a0a398}
textarea {resize:vertical;min-height:164px;line-height:1.8;border-radius:6px 6px 0 0;display:block}
.label-row {display:flex;justify-content:space-between;gap:10px}
.label-row>span {font-size:9px;color:#a0a398}
.editor-footer {border:1px solid #daddd3;border-top:0;border-radius:0 0 6px 6px;padding:10px 12px;background:#f7f8f1;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:9px;color:#93998a}
.editor-footer button {background:none;border:0;padding:0;font-size:10px;color:#5a7357;font-weight:550;white-space:nowrap}
.editor-footer button:hover {color:var(--accent)}
.hint {font-size:10px;line-height:1.7;color:#7b895e;margin-top:7px}
.submit-row {display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid #e7e9df;padding-top:23px}
.privacy-note {font-size:9px;color:#979d90;line-height:1.7}
.button {background:#fafbf6;border:1px solid #d8ddd0;border-radius:6px;padding:11px 15px;font-size:11px;display:inline-flex;align-items:center;justify-content:center;gap:22px;font-weight:550;min-height:38px}
.button:hover {background:#f0f3e9;border-color:#b2bd9f}
.button.primary {color:#fffbf1;background:var(--accent);border-color:var(--accent)}
.button.primary:hover {background:#dd6043;border-color:#dd6043}
.button span {font-size:16px;line-height:12px;font-weight:400}
.button.full {width:100%;justify-content:space-between}
.button.small {font-size:10px;padding:7px 11px;min-height:30px}
.button.danger {color:#b66753;background:transparent;border:0;box-shadow:none}
.walkthrough {padding:25px 30px 29px;background:#e9eddf;border:1px solid #dce2ce;border-radius:11px}
.walkthrough-heading {display:flex;align-items:center;gap:11px;margin-bottom:19px}
.orbit {font-size:30px;color:#7a8764;line-height:1}
.walkthrough h2 {font-size:28px;line-height:1.2;color:#40513b;letter-spacing:-1px}
.walkthrough>p {font-size:11px;color:#859079;line-height:1.8;margin:16px 0 25px;max-width:260px}
.walkthrough ol {list-style:none;padding:0;margin:0}
.walkthrough li {display:flex;gap:15px;padding:0 0 21px;margin:0 0 2px}
.walkthrough li>span {height:25px;width:25px;border-radius:50%;border:1px solid #ccd5ba;display:grid;place-items:center;font:9px monospace;color:#7e8b6b;flex-shrink:0}
.walkthrough li h3 {font-size:12px;font-weight:550;color:#536346;margin-top:4px}
.walkthrough li p {font-size:10px;color:#87917a;line-height:1.8;margin-top:7px;max-width:245px}
.stack {border-top:1px solid #d3dcc4;display:flex;gap:7px;padding-top:17px}
.stack span {font:8px monospace;border:1px solid #d2dac6;border-radius:4px;padding:5px 7px;color:#8a957c}
footer {max-width:1180px;margin:0 auto;padding:22px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;font:8px monospace;color:#9a9e91;letter-spacing:1px}
footer span:nth-child(2) {font-family:inherit;letter-spacing:0}
.success-panel {text-align:center;padding:44px 14px;outline:none}
.success-icon {display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:#e8efd9;color:#6e8550;font-size:30px;margin:0 auto 26px}
.success-panel h2 {font-size:33px;margin:13px 0 17px}
.success-panel p {font-size:12px;color:var(--muted);line-height:1.8;max-width:350px;margin:0 auto 28px}
.success-panel label {font:8px monospace;letter-spacing:1px;color:#9c9f8f}
.success-panel code {display:inline-block;background:#f0f2e9;border:1px solid #e0e4d6;border-radius:5px;padding:12px 16px;font-size:11px;color:#68765b;max-width:100%;overflow-wrap:anywhere}
.success-actions {display:flex;gap:10px;justify-content:center;margin-top:30px;flex-wrap:wrap}
.login-wrap {display:grid;grid-template-columns:1.2fr 1fr;gap:80px;padding:50px 50px 80px;align-items:center;min-height:65vh}
.login-side h1 {font-size:46px;letter-spacing:-1.9px;margin:19px 0}
.login-side p {font-size:12px;color:var(--muted);max-width:310px;line-height:1.9}
.login-decoration {margin-top:36px;display:flex;gap:13px;align-items:center;font:8px monospace;letter-spacing:1px;color:#9ba487}
.login-decoration b {color:var(--accent);font-size:16px;font-weight:400}
.login-card {padding:31px}
.login-card .card-heading {margin-bottom:14px}
.login-card form {margin-top:29px}
.login-card .muted {font-size:11px;color:var(--muted)}
.login-symbol {font-size:23px;color:#a3ad8f;background:#f0f3e7;border-radius:10px;width:45px;height:45px;display:grid;place-items:center}
.login-note {font-size:9px;color:#a0a695;line-height:1.7;text-align:center;margin-top:21px}
.error {color:#bb5c48;font-size:11px;line-height:1.8;margin-bottom:15px;overflow-wrap:anywhere}
.page-heading {display:flex;align-items:center;justify-content:space-between;gap:25px;margin:12px 0 30px}
.page-heading h1 {font-size:40px;letter-spacing:-1.5px;margin:15px 0 12px;display:flex;gap:15px;align-items:center}
.page-heading p {font-size:12px;color:var(--muted);line-height:1.8}
.count {font:14px monospace;letter-spacing:0;border-radius:8px;border:1px solid #d9e0cb;padding:8px 11px;background:#eaf0df;color:#789258}
.inbox-meta {display:flex;align-items:center;gap:24px;padding:18px 0 24px;font-size:11px;color:#87927c}
.inbox-meta>span {display:flex;align-items:center;gap:7px}
.status-dot {width:5px;height:5px;border-radius:50%;background:#859c64}
.meta-right {margin-left:auto;font-size:10px;color:#a4a89b}
.table-card {border-radius:9px}
.table-wrap {overflow:auto}
table {border-collapse:collapse;width:100%;text-align:left;white-space:nowrap}
th {font:9px monospace;letter-spacing:1px;color:#96a084;background:#f1f4e9;font-weight:400;padding:16px 22px}
td {padding:21px 22px;border-top:1px solid #e6e9de;font-size:12px}
tbody tr:hover {background:#f9faf4}
.ticket-subject {font-size:12px;font-weight:550;display:block;max-width:340px;overflow:hidden;text-overflow:ellipsis}
.ticket-subject:hover {color:var(--accent)}
.ticket-preview {font:10px monospace;color:#9ca48e;max-width:340px;overflow:hidden;text-overflow:ellipsis;margin-top:9px}
.subline {font-size:10px;color:#a1a895;margin-top:7px}
.status {display:inline-flex;align-items:center;gap:6px;border:1px solid #d4dec3;background:#eef3e4;color:#7b935d;padding:5px 9px;border-radius:5px;font:10px monospace;text-transform:capitalize;white-space:nowrap}
.status::before {content:'';height:4px;width:4px;border-radius:50%;background:currentColor}
.status.closed {color:#9b9f92;background:#f1f2eb;border-color:#dfe3d5}
.time {font-size:10px;color:#8e9883}
.row-arrow {color:#a2ac93;font-size:17px}
.table-footer {padding:16px 22px;border-top:1px solid #e6e9de;font-size:10px;color:#a0a78f;display:flex;align-items:center;justify-content:space-between;gap:15px;line-height:1.8}
.empty {padding:75px 25px;text-align:center}
.empty>span {display:block;color:var(--accent);font-size:34px;margin-bottom:16px}
.empty p {font-size:12px;color:var(--muted);line-height:1.8;margin:15px 0 25px}
.empty h1 {font-size:30px;margin-bottom:25px}
.back-link {font-size:11px;color:#8e997f;display:inline-block;margin-bottom:14px}
.back-link:hover {color:var(--accent)}
.ticket-heading h1 {display:block;font-size:32px;letter-spacing:-1px;overflow-wrap:anywhere;line-height:1.3}
.ticket-heading .eyebrow {font-size:8px;overflow-wrap:anywhere}
.ticket-heading {align-items:flex-start}
.ticket-heading>.status {margin-top:34px}
.detail-grid {display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:25px;align-items:start}
.message-toolbar {padding:18px 21px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:15px;background:#fafbf5}
.message-toolbar>div:first-child {display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.message-toolbar strong {font-size:11px;font-weight:550}
.mode-dot {height:5px;width:5px;border-radius:50%;display:inline-block;background:#83a060}
.mode-dot.raw {background:var(--accent)}
.mode-description {font-size:9px;color:#9aa58a;display:block;flex-basis:100%;margin-left:12px}
.segmented {display:flex;flex-shrink:0;border:1px solid #e0e3d7;background:#f0f2e8;border-radius:5px;padding:3px;font-size:9px;color:#9ba78a}
.segmented a {padding:7px 9px;border-radius:3px}
.segmented a.selected {background:#fffef7;color:#7d8d66;box-shadow:0 1px 3px #69764c20}
.segmented a.raw-selected {color:#c67a61}
.rendered-message {padding:28px;min-height:260px;font-size:13px;line-height:1.8;overflow-wrap:anywhere}
.source-view {white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;font:11px/1.9 monospace;color:#7b8a68;margin:0}
.message-footer {border-top:1px solid var(--line);padding:16px 21px;font-size:9px;color:#a0a88f;background:#fcfcf7;line-height:1.7}
.ticket-details {padding:24px}
.ticket-details dl {margin:25px 0}
.ticket-details dt {font-size:9px;color:#a0a98f;margin:17px 0 7px}
.ticket-details dd {margin:0;font-size:11px;color:#657357;line-height:1.8;overflow-wrap:anywhere}
.ticket-details .button {margin-top:8px}
.mono {font-family:monospace}
.monitor-card {display:flex;flex-direction:column;gap:12px;background:#e9eedf;border:1px solid #dae3cb;border-radius:9px;margin-top:18px;padding:23px}
.monitor-card strong {font-size:14px;font-weight:550;color:#677d51}
.monitor-card>span:last-child {font-size:10px;line-height:1.8;color:#8e9f7b}
@media(max-width:1250px) {
  header,main,footer {margin-left:35px;margin-right:35px}
  .top-strip {padding-left:35px;padding-right:35px}
  .login-wrap {padding:30px 20px;gap:55px}
}
@media(max-width:900px) {
  .public-grid {gap:23px;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
  .form-card {padding:25px}
  .walkthrough {padding:25px}
  .form-row {grid-template-columns:1fr;gap:0}
  nav {margin-left:15px;gap:20px}
  .monitor-link {display:none}
  .card-heading {align-items:flex-start}
  .badge {display:none}
  .editor-footer {align-items:flex-start;flex-direction:column;gap:10px}
  .login-wrap {grid-template-columns:1fr 1fr;gap:30px;padding:25px 0}
  .login-side h1 {font-size:38px}
  .login-card {padding:25px}
  .detail-grid {grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}
  .message-toolbar {padding:15px;flex-wrap:wrap}
  footer span:nth-child(2) {display:none}
}
@media(max-width:640px) {
  header,main,footer {margin-left:20px;margin-right:20px}
  .top-strip {padding:10px 20px;font-size:7px;letter-spacing:1px}
  .strip-right {font-size:7px}
  header {height:81px;gap:18px}
  .brand {font-size:27px;gap:7px}
  .logo-mark {height:28px;width:28px;border-radius:8px;font-size:24px}
  nav {margin:0 0 0 auto;gap:17px;font-size:10px}
  nav a {gap:4px}
  nav a span {display:none}
  main {padding-top:35px;padding-bottom:40px}
  h1 {font-size:43px;letter-spacing:-1.9px}
  .hero p {font-size:11px;max-width:270px}
  .hero {margin-bottom:28px}
  .eyebrow {font-size:8px;letter-spacing:1.3px}
  .public-grid {grid-template-columns:1fr;gap:25px}
  .form-card {padding:23px}
  h2 {font-size:21px}
  .form-field {margin-bottom:20px}
  .form-row {grid-template-columns:1fr}
  textarea {min-height:170px}
  .walkthrough {padding:27px}
  .walkthrough>p,.walkthrough li p {max-width:none}
  .success-panel {padding:22px 0}
  .success-panel code {font-size:10px;padding:12px}
  .success-actions {flex-direction:column}
  .login-wrap {grid-template-columns:1fr;gap:30px;padding:5px 0 30px}
  .login-side h1 {font-size:38px}
  .login-decoration {display:none}
  .login-side p {font-size:11px}
  .page-heading {margin-top:0;gap:20px}
  .page-heading h1 {font-size:33px}
  .page-heading p {font-size:11px}
  .page-heading .button {padding:10px 12px;white-space:nowrap;font-size:10px}
  .inbox-meta {flex-wrap:wrap;gap:13px}
  .meta-right {margin:0;flex-basis:100%;font-size:9px}
  .detail-grid {grid-template-columns:1fr;gap:20px}
  .ticket-heading {flex-direction:column;gap:5px}
  .ticket-heading h1 {font-size:27px}
  .ticket-heading>.status {margin:0}
  .rendered-message {padding:22px}
  .message-toolbar {padding:15px}
  .message-footer {padding:15px}
  .message-toolbar .mode-description {display:none}
  footer {font-size:7px;letter-spacing:.6px;padding:19px 0}
  .table-footer {font-size:9px}
}