.support-page { --support-ink:#183e34; --support-green:#14755b; --support-mint:#e8f6f1; --support-border:#d7e7e1; display:grid; gap:18px; width:min(1280px,100%); margin:0 auto; color:var(--support-ink); font-family:Inter,Roboto,"Segoe UI",sans-serif; }
.support-page button,.support-page input,.support-page textarea { font:inherit; }
.support-hero { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:30px 34px; border-radius:22px; color:#fff; background:radial-gradient(circle at 92% 12%,rgba(133,237,199,.3),transparent 30%),linear-gradient(135deg,#0e4b3a,#178264); box-shadow:0 18px 42px rgba(15, 90, 67, .14); }
.support-hero > div:first-child { display:grid; gap:7px; }
.support-hero > div:first-child > span,.support-eyebrow { color:#74d7b4; font-size:10px; font-weight:850; letter-spacing:.16em; }
.support-hero h1 { margin:0; color:#fff; font-size:clamp(28px,4vw,42px); letter-spacing:-.045em; }
.support-hero p { margin:0; color:rgba(255,255,255,.75); font-size:14px; }
.support-hero-badge { display:grid; justify-items:center; min-width:104px; padding:12px 17px; border:1px solid rgba(255,255,255,.22); border-radius:15px; background:rgba(255,255,255,.1); }
.support-hero-badge strong { font-size:26px; line-height:1; }.support-hero-badge small { margin-top:5px; color:rgba(255,255,255,.75); font-size:11px; }
.support-hero-actions { display:flex; align-items:center; gap:12px; }.support-outline { display:inline-flex; align-items:center; min-height:42px; padding:0 15px; border:1px solid rgba(255,255,255,.32); border-radius:10px; color:#fff; font-size:12px; font-weight:800; text-decoration:none; background:rgba(255,255,255,.08); }
.support-alert { padding:12px 15px; border:1px solid; border-radius:11px; font-size:13px; font-weight:700; }.support-alert.success { color:#176548; border-color:#b9e4d4; background:#edf9f4; }.support-alert.error { color:#a0382e; border-color:#f0c9c3; background:#fff3f1; }
.support-activation-card { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:19px 23px; border:1px solid #f0dca8; border-radius:16px; background:linear-gradient(110deg,#fffaf0,#fff); box-shadow:0 8px 22px rgba(135,94,19,.06); }.support-activation-card h2 { margin:4px 0 3px; color:#5e471e; font-size:19px; }.support-activation-card p { margin:0; color:#8b7650; font-size:12px; }.support-activation-card .support-primary { flex:0 0 auto; color:#fff; background:#9a6a17; box-shadow:0 8px 18px rgba(154,106,23,.2); }
.support-layout { display:grid; grid-template-columns:minmax(300px,.72fr) minmax(430px,1.28fr); gap:18px; align-items:start; }.support-new-card,.support-list-card,.support-conversation { border:1px solid var(--support-border); border-radius:20px; background:#fff; box-shadow:0 12px 35px rgba(21,77,62,.07); overflow:hidden; }
.support-new-card { padding:25px; }.support-new-card h2,.support-list-card h2,.support-conversation h2 { margin:5px 0 7px; font-size:22px; letter-spacing:-.03em; }.support-new-card p { margin:0 0 20px; color:#738780; font-size:13px; line-height:1.5; }.support-new-card form { display:grid; gap:15px; }.support-new-card label { display:grid; gap:7px; color:#45695d; font-size:12px; font-weight:800; }.support-new-card input,.support-new-card textarea,.support-reply textarea { width:100%; padding:11px 12px; border:1px solid #cfe0da; border-radius:10px; outline:0; color:var(--support-ink); background:#fbfefd; resize:vertical; }.support-new-card input:focus,.support-new-card textarea:focus,.support-reply textarea:focus { border-color:var(--support-green); box-shadow:0 0 0 3px rgba(20,117,91,.12); }.support-new-card .validation-message { color:#b33b30; font-size:11px; }
.support-primary { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:43px; padding:0 17px; border:0; border-radius:10px; color:#fff; background:var(--support-green); font-size:12px; font-weight:850; cursor:pointer; box-shadow:0 8px 18px rgba(20,117,91,.2); }.support-primary:disabled { opacity:.55; cursor:wait; }
.support-list-header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:22px 23px 17px; border-bottom:1px solid #edf3f1; }.support-tabs { display:flex; gap:6px; }.support-tabs button { min-height:34px; padding:0 11px; border:1px solid #d2e2dc; border-radius:9px; color:#56756b; background:#fff; font-size:11px; font-weight:800; cursor:pointer; }.support-tabs button.selected { color:#fff; border-color:var(--support-green); background:var(--support-green); }.support-tabs b { margin-left:4px; opacity:.75; }
.support-tickets { display:grid; padding:9px; gap:5px; }.support-ticket-row { display:grid; grid-template-columns:28px minmax(0,1fr) auto 18px; align-items:center; gap:10px; width:100%; padding:13px 12px; border:1px solid transparent; border-radius:11px; color:var(--support-ink); background:#fff; text-align:left; cursor:pointer; }.support-ticket-row:hover,.support-ticket-row.selected { border-color:#bde1d3; background:#edf8f4; }.support-ticket-row strong,.support-ticket-row small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.support-ticket-row strong { font-size:12px; }.support-ticket-row small,.ticket-date { margin-top:4px; color:#81938e; font-size:10px; }.ticket-date { white-space:nowrap; }.ticket-status { display:grid; place-items:center; width:26px; height:26px; border-radius:8px; font-size:12px; }.ticket-status.open { color:#bf7412; background:#fff3d8; }.ticket-status.closed { color:#167354; background:#e6f5ee; }.ticket-arrow { color:#92aaa1; font-size:20px; }.support-empty { display:grid; justify-items:center; gap:5px; padding:40px 18px; color:#6f8780; text-align:center; }.support-empty span { display:grid; place-items:center; width:34px; height:34px; margin-bottom:3px; border-radius:50%; color:#177458; background:#e4f4ee; font-weight:900; }.support-empty strong { color:var(--support-ink); font-size:13px; }.support-empty small { font-size:11px; }
.support-conversation > header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 25px; border-bottom:1px solid #e7efec; }.support-conversation > header h2 { margin-bottom:5px; }.support-conversation > header small { color:#789089; font-size:11px; }.support-messages { display:grid; gap:13px; max-height:440px; overflow:auto; padding:22px 25px; background:#f7fbf9; }.support-message { display:flex; align-items:flex-start; gap:10px; max-width:86%; }.support-message.mine { justify-self:end; flex-direction:row-reverse; }.support-avatar { display:grid; place-items:center; flex:0 0 31px; width:31px; height:31px; border-radius:50%; color:#14755b; background:#dcefe8; font-size:11px; font-weight:850; }.support-message > div:last-child { min-width:0; padding:10px 12px; border-radius:12px 12px 12px 3px; background:#fff; box-shadow:0 4px 11px rgba(20,70,57,.06); }.support-message.mine > div:last-child { border-radius:12px 12px 3px 12px; color:#fff; background:#147a5e; }.support-message-meta { display:flex; align-items:center; gap:9px; margin-bottom:4px; }.support-message-meta strong { font-size:11px; }.support-message-meta time { color:#8aa097; font-size:9px; }.support-message.mine .support-message-meta time { color:rgba(255,255,255,.72); }.support-message p { margin:0; white-space:pre-wrap; font-size:12px; line-height:1.45; }.support-reply { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:10px; padding:16px 20px; border-top:1px solid #e7efec; }.support-closed-note { padding:14px 20px; color:#6e827c; background:#f4f8f6; font-size:11px; }.ticket-status-label { display:inline-flex; padding:5px 9px; border-radius:999px; font-size:10px; font-weight:850; }.ticket-status-label.open { color:#9b650e; background:#fff2d6; }.ticket-status-label.closed { color:#1a7157; background:#e4f4ed; }.ticket-lock { color:#82938e; font-size:10px; font-weight:750; }.admin-ticket-actions { display:flex; align-items:center; gap:10px; }.support-close-ticket { min-height:34px; padding:0 11px; border:1px solid #e9c4be; border-radius:9px; color:#a83c30; background:#fff6f4; font-size:11px; font-weight:850; cursor:pointer; }.support-close-ticket:hover { background:#ffebe7; }.support-close-ticket:disabled { opacity:.55; cursor:wait; }
@media (max-width:900px) { .support-layout { grid-template-columns:1fr; }.support-conversation > header { align-items:flex-start; flex-direction:column; }.admin-ticket-actions { width:100%; justify-content:space-between; } }
@media (max-width:620px) { .support-hero { align-items:flex-start; flex-direction:column; padding:24px; }.support-hero-actions { width:100%; justify-content:space-between; }.support-list-header { align-items:flex-start; flex-direction:column; }.support-ticket-row { grid-template-columns:28px minmax(0,1fr) 18px; }.ticket-date { display:none; }.support-reply { grid-template-columns:1fr; }.support-primary { width:100%; }.support-messages { padding:17px 13px; } }

.support-ticket-row .ticket-priority { margin-top:0; margin-right:4px; vertical-align:middle; }
.trial-countdown { display:inline-flex; align-items:center; gap:5px; margin-left:4px; padding:4px 8px; border-radius:999px; color:#126c53; background:#dff3eb; font-size:11px; font-weight:850; }

.ticket-status.in_progress { color:#2266a1; background:#e6f1fc; }
.ticket-status-label.in_progress { color:#2266a1; background:#e6f1fc; }
.support-reply-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.support-reply-actions input[type=file], .support-upload input[type=file] { max-width:220px; font-size:11px; }
.support-file-name, .support-upload span { color:#738780; font-size:10px; }
.support-upload { display:flex; align-items:center; gap:10px; padding:9px 10px; border:1px dashed #b9d7cc; border-radius:10px; background:#f5fbf8; }
.support-attachment { display:inline-flex; align-items:center; gap:5px; margin-top:7px; padding:5px 8px; border-radius:7px; color:#126c53; background:#e7f6ef; font-size:11px; font-weight:800; text-decoration:none; }
.support-attachment small { color:#6d8d82; font-weight:600; }
.admin-ticket-actions .support-outline { color:var(--support-green); border-color:#b9dace; background:#f5fbf8; }
.support-active-ticket-note { display:grid; gap:6px; padding:13px; border:1px solid #f1dca9; border-radius:10px; color:#73551c; background:#fff9ec; font-size:12px; }
.support-active-ticket-note span { color:#8b7650; font-size:11px; }
.ticket-priority { display:inline-flex; margin-top:8px; padding:4px 8px; border-radius:999px; font-size:10px; font-weight:850; }
.ticket-priority.normal { color:#52746a; background:#edf5f2; }.ticket-priority.low { color:#4b7b61; background:#e8f6ec; }.ticket-priority.high { color:#9b650e; background:#fff1d4; }.ticket-priority.urgent { color:#a43a30; background:#ffebe8; }
.admin-ticket-tools { display:flex; align-items:end; gap:10px; padding:12px 20px; border-top:1px solid #e7efec; background:#fbfefd; }
.admin-ticket-tools label { display:grid; gap:4px; color:#527167; font-size:10px; font-weight:850; }.admin-ticket-tools select,.admin-ticket-tools input { min-height:34px; padding:0 9px; border:1px solid #cfe0da; border-radius:8px; color:#183e34; background:#fff; }.admin-ticket-note { flex:1; }
.admin-ticket-note-preview { display:grid; gap:4px; margin:0 20px 10px; padding:9px 11px; border-left:3px solid #d5a63a; border-radius:7px; color:#6e5828; background:#fff9e9; font-size:11px; }.admin-ticket-note-preview span { white-space:pre-wrap; }
.admin-ticket-audit { padding:10px 20px; border-top:1px solid #e7efec; color:#627a72; font-size:10px; }.admin-ticket-audit summary { cursor:pointer; color:#27755e; font-weight:850; }.admin-ticket-audit p { display:grid; grid-template-columns:auto 1fr auto; gap:8px; margin:8px 0; }.admin-ticket-audit small { color:#8ba099; }