/* StreamEcon — Contact, support tickets and Help Center on the public site (Web 0.126.36.0).
   Loaded after site.css on /contact, /support… and /help…; uses the site tokens only. */

/* ---------- Shared ---------- */
.sp-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 24px;margin-bottom:28px}
.sp-head>div{display:grid;gap:10px;max-width:720px}
.sp-head h1{font-size:clamp(30px,4vw,42px);line-height:1.08;font-weight:800}
.sp-head p{color:var(--muted);font-size:17px}
.sp-crumbs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:14px;color:var(--dim)}
.sp-crumbs a{color:var(--muted);text-decoration:none}
.sp-crumbs a:hover{color:var(--text)}
.sp-crumbs span{color:var(--dim)}
.sp-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:28px;align-items:start}
.sp-panel{border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.sp-panel-b{padding:22px 24px}
.sp-panel-h{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:16px 24px;border-bottom:1px solid var(--line)}
.sp-panel-h h2{font-size:17px;font-weight:700}
.sp-panel-h p{color:var(--muted);font-size:14px;margin-top:2px}
.sp-aside{display:grid;gap:14px}
.sp-aside .sp-panel-b{padding:18px 20px}
.sp-aside h3{font:700 15px/1.3 var(--body);margin-bottom:6px}
.sp-aside p,.sp-aside li{color:var(--muted);font-size:14px}
.sp-aside ul{margin:0;padding-left:18px;display:grid;gap:4px}
.sp-aside a.sp-arrow{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:14px;font-weight:600;text-decoration:none}
.sp-aside a.sp-arrow:hover{text-decoration:underline}
.sp-note{display:grid;gap:4px;padding:14px 16px;border:1px solid var(--line2);border-radius:12px;background:rgba(255,255,255,.02);font-size:14.5px}
.sp-note.ok{border-color:rgba(61,220,151,.4);background:rgba(61,220,151,.06)}
.sp-note.bad{border-color:rgba(255,107,129,.45);background:rgba(255,107,129,.06)}
.sp-note p{color:var(--muted)}
.sp-status{display:inline-flex;align-items:center;gap:7px;padding:4px 10px;border-radius:999px;font-size:12.5px;font-weight:600;white-space:nowrap;background:rgba(147,160,191,.12);color:var(--muted)}
.sp-status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.sp-status.is-open{background:rgba(46,197,255,.12);color:#7fd8ff}
.sp-status.is-waiting_on_user{background:rgba(255,181,71,.13);color:#ffc56b}
.sp-status.is-on_hold{background:rgba(139,92,255,.14);color:#b9a0ff}
.sp-status.is-closed{background:rgba(147,160,191,.12);color:var(--muted)}
.sp-dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 16px;margin:0;font-size:14px}
.sp-dl dt{color:var(--dim)}
.sp-dl dd{margin:0;color:var(--text);overflow-wrap:anywhere}
.sp-files{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.sp-file{display:inline-flex;align-items:center;gap:7px;max-width:100%;padding:6px 10px;border:1px solid var(--line2);border-radius:8px;color:var(--text);font-size:13px;text-decoration:none}
.sp-file:hover{border-color:#3d5080}
.sp-file svg{width:15px;height:15px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8}
.sp-file span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-upload{display:grid;gap:6px}
.sp-upload input[type=file]{padding:10px 12px;border:1px dashed var(--line2);border-radius:12px;background:#0b1222;color:var(--muted);font:500 14px/1.4 var(--body);width:100%}
.sp-upload small{color:var(--dim);font-size:13px}
.sp-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}

/* ---------- Ticket list ---------- */
.sp-tickets{display:grid}
.sp-ticket-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;align-items:center;padding:16px 24px;border-top:1px solid var(--line);color:var(--text);text-decoration:none}
.sp-ticket-row:first-child{border-top:0}
.sp-ticket-row:hover{background:rgba(255,255,255,.025)}
.sp-ticket-row b{font-size:15.5px}
.sp-ticket-row .sp-ticket-preview{grid-column:1/-1;color:var(--muted);font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-ticket-meta{display:flex;flex-wrap:wrap;gap:4px 14px;color:var(--dim);font-size:13px;grid-column:1/-1}
.sp-ticket-row .sp-ticket-title{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;min-width:0}
.sp-ticket-row .sp-ticket-title span{color:var(--muted);font-size:14px}
.sp-empty{padding:40px 24px;text-align:center;color:var(--muted)}
.sp-empty b{display:block;color:var(--text);font-size:16px;margin-bottom:4px}

/* ---------- Conversation ---------- */
.sp-thread{display:grid;gap:14px}
.sp-msg{border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.sp-msg-h{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;padding:12px 18px;border-bottom:1px solid var(--line)}
.sp-msg-who{display:flex;align-items:center;gap:10px;min-width:0}
.sp-avatar{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--surface2);border:1px solid var(--line2);font-weight:700;font-size:13px;color:var(--muted);flex:none}
.sp-msg-who b{font-size:14.5px}
.sp-msg-who small{display:block;color:var(--dim);font-size:12.5px}
.sp-msg-h time{color:var(--dim);font-size:13px}
.sp-msg-b{padding:16px 18px;color:#d3dbee;font-size:15px;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere}
.sp-msg-b .sp-files{white-space:normal}
.sp-msg.is-staff{border-color:rgba(46,197,255,.28)}
.sp-msg.is-staff .sp-avatar{background:rgba(46,197,255,.12);border-color:rgba(46,197,255,.35);color:#7fd8ff}
.sp-msg.is-closure{border-color:rgba(61,220,151,.3)}
.sp-msg.is-closure .sp-avatar{background:rgba(61,220,151,.1);border-color:rgba(61,220,151,.35);color:#6ee3b0}
.sp-reply textarea{min-height:150px}

/* ---------- Contact ---------- */
.sp-form{display:grid;gap:18px}
.sp-form .form-row{gap:16px}
.sp-form select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:38px}
.sp-context{display:flex;flex-wrap:wrap;gap:6px 18px;padding:12px 14px;border-radius:10px;background:rgba(255,255,255,.025);border:1px solid var(--line);font-size:13.5px;color:var(--muted)}
.sp-context b{color:var(--text);font-weight:600}
.sp-done{display:grid;gap:16px;justify-items:start}
.sp-done h2{font-size:24px;font-weight:800}
.sp-done p{color:var(--muted)}
.sp-done .sp-ticket-no{font:700 15px/1 var(--mono);padding:8px 12px;border-radius:8px;background:var(--surface2);border:1px solid var(--line2);color:var(--text)}

/* ---------- Help Center ---------- */
.hc-search{position:relative;max-width:620px}
.hc-search input{width:100%;min-height:52px;padding:12px 16px 12px 46px;border:1px solid var(--line2);border-radius:14px;background:#0b1222;color:var(--text);font:500 16px/1.4 var(--body)}
.hc-search input:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(46,197,255,.18)}
.hc-search svg{position:absolute;left:16px;top:50%;width:18px;height:18px;transform:translateY(-50%);stroke:var(--dim);fill:none;stroke-width:2}
.hc-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:32px}
.hc-group{border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:20px 22px}
.hc-group h2{font:700 13px/1 var(--body);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.hc-group ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.hc-group a{display:block;padding:7px 10px;margin:0 -10px;border-radius:8px;color:var(--text);text-decoration:none;font-size:15px}
.hc-group a small{display:block;color:var(--dim);font-size:13px;margin-top:1px}
.hc-group a:hover{background:rgba(255,255,255,.04)}
.hc-start{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:28px}
.hc-start a{display:grid;gap:6px;padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--text);text-decoration:none}
.hc-start a:hover{border-color:var(--line2)}
.hc-start b{font-size:15px}
.hc-start span{color:var(--muted);font-size:13.5px}
.hc-start i{font-style:normal;font:700 12px/1 var(--mono);color:var(--cyan)}
.hc-results{display:grid;gap:8px;margin-top:18px}
.hc-results a{display:grid;gap:2px;padding:12px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--text);text-decoration:none}
.hc-results a span{color:var(--muted);font-size:14px}
.hc-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:44px;align-items:start}
.hc-nav{position:sticky;top:92px;display:grid;gap:18px;max-height:calc(100vh - 120px);overflow:auto;padding-right:6px;font-size:14px}
.hc-nav b{display:block;padding:0 10px 6px;color:var(--dim);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase}
.hc-nav a{display:block;padding:6px 10px;border-radius:7px;color:var(--muted);text-decoration:none}
.hc-nav a:hover{color:var(--text);background:rgba(255,255,255,.04)}
.hc-nav a.is-current{color:var(--text);background:rgba(46,197,255,.1);box-shadow:inset 2px 0 0 var(--cyan)}
.hc-article{max-width:74ch}
.hc-article header{display:grid;gap:10px;margin-bottom:26px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.hc-article header h1{font-size:clamp(28px,3.4vw,38px);line-height:1.1;font-weight:800}
.hc-article header p{color:var(--muted);font-size:17px}
.hc-body{color:#c9d2e8;font-size:16px;line-height:1.7}
.hc-body h2{margin:34px 0 10px;color:var(--text);font-size:21px;font-weight:700}
.hc-body h3{margin:22px 0 6px;color:var(--text);font-size:17px;font-weight:700;font-family:var(--body)}
.hc-body p{margin:0 0 14px}
.hc-body ul,.hc-body ol{margin:0 0 16px;padding-left:22px}
.hc-body li{margin:5px 0}
.hc-body li::marker{color:var(--dim)}
.hc-body strong{color:var(--text)}
.hc-body code{padding:2px 6px;border-radius:6px;background:var(--surface2);border:1px solid var(--line);font:600 .88em var(--mono);color:#e6ecfb;white-space:nowrap}
.hc-body a{color:var(--cyan)}
.hc-body>*:first-child{margin-top:0}
.hc-tip{margin:18px 0;padding:14px 16px;border:1px solid var(--line2);border-left:3px solid var(--cyan);border-radius:10px;background:rgba(46,197,255,.04)}
.hc-tip.warn{border-left-color:var(--gold);background:rgba(255,181,71,.04)}
.hc-tip p:last-child{margin-bottom:0}
.hc-tip strong:first-child{display:block;margin-bottom:2px}
.hc-steps{counter-reset:hc;list-style:none;padding-left:0!important}
.hc-steps>li{position:relative;padding-left:40px;margin:12px 0}
.hc-steps>li::before{counter-increment:hc;content:counter(hc);position:absolute;left:0;top:1px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--surface2);border:1px solid var(--line2);font:700 13px/1 var(--body);color:var(--text)}
.hc-table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:14.5px}
.hc-table th,.hc-table td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.hc-table th{color:var(--muted);font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:700}
.hc-table td:first-child{white-space:nowrap}
.hc-faq details{border-top:1px solid var(--line);padding:12px 0}
.hc-faq details:last-child{border-bottom:1px solid var(--line)}
.hc-faq summary{cursor:pointer;color:var(--text);font-weight:600;list-style:none}
.hc-faq summary::-webkit-details-marker{display:none}
.hc-faq summary::before{content:"+";display:inline-block;width:20px;color:var(--dim)}
.hc-faq details[open] summary::before{content:"–"}
.hc-faq details p{margin:8px 0 0 20px}
.hc-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:40px;padding-top:20px;border-top:1px solid var(--line);color:var(--muted);font-size:14px}
.hc-related{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.hc-related a{padding:6px 12px;border:1px solid var(--line2);border-radius:999px;color:var(--text);font-size:13.5px;text-decoration:none}
.hc-related a:hover{border-color:#3d5080}

@media (max-width:1020px){
  .sp-layout,.hc-layout{grid-template-columns:minmax(0,1fr)}
  .hc-nav{position:static;max-height:none}
  .hc-groups{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hc-start{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .hc-groups,.hc-start{grid-template-columns:minmax(0,1fr)}
  .sp-ticket-row,.sp-panel-b,.sp-panel-h{padding-inline:16px}
  .sp-msg-b,.sp-msg-h{padding-inline:14px}
}