:root { color-scheme: light; --paper:#f5f6f8; --card:#fff; --ink:#202126; --soft:#71747e; --line:#e4e5e9; --teal:#5950d5; --teal-soft:#efedff; --coral:#df604e; --safe-top:env(safe-area-inset-top,0px); --safe-bottom:env(safe-area-inset-bottom,0px); font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:radial-gradient(circle at 90% 2%,#e6e3ff 0,transparent 25rem),var(--paper); }
button,input,select,textarea { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
.is-hidden { display:none !important; }
.topbar { position:sticky; z-index:10; top:0; display:grid; grid-template-columns:44px 1fr 44px; align-items:center; min-height:calc(64px + var(--safe-top)); padding:var(--safe-top) max(14px,env(safe-area-inset-right)) 0 max(14px,env(safe-area-inset-left)); border-bottom:1px solid rgba(228,229,233,.9); background:rgba(245,246,248,.9); backdrop-filter:blur(18px); }
.back-link,.topbar>button { display:grid; width:40px; height:40px; place-items:center; border:0; border-radius:12px; color:var(--ink); background:transparent; font-size:28px; text-decoration:none; }
.topbar>button { font-size:22px; }
.brand { display:flex; justify-self:center; align-items:center; gap:10px; color:var(--ink); text-decoration:none; }
.brand>span:last-child strong,.brand>span:last-child small { display:block; }
.brand strong { font-size:15px; }
.brand small { margin-top:2px; color:var(--soft); font-size:10px; }
.brand-mark { position:relative; width:29px; height:25px; }
.brand-mark i { position:absolute; inset:4px 2px; border:2px solid var(--teal); border-radius:5px; background:var(--card); transform:rotate(-8deg) translate(-2px,-2px); }
.brand-mark i:nth-child(2) { transform:none; }.brand-mark i:nth-child(3) { transform:rotate(8deg) translate(2px,2px); }
main { width:min(760px,100%); margin:0 auto; padding:20px max(16px,env(safe-area-inset-right)) calc(42px + var(--safe-bottom)) max(16px,env(safe-area-inset-left)); }
.intro-card { padding:24px 22px; border-radius:22px; color:#fff; background:linear-gradient(145deg,#272532,#5d54d9); box-shadow:0 18px 45px rgba(66,57,165,.18); }
.intro-card p { margin:0 0 12px; color:#c9c5ff; font-size:11px; font-weight:850; letter-spacing:.14em; }
.intro-card h1 { margin:0 0 12px; font-size:clamp(28px,8vw,40px); line-height:1.18; letter-spacing:-.04em; }
.intro-card span { display:block; color:rgba(255,255,255,.76); font-size:14px; line-height:1.75; }
.panel { margin-top:14px; padding:18px; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.96); }
.panel>header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:18px; }
.panel>header span { color:var(--teal); font-size:10px; font-weight:850; letter-spacing:.12em; }
.panel>header h2 { margin:5px 0 0; font-size:19px; }
.panel>header b { color:var(--soft); font-size:12px; }
.panel>header button { min-height:36px; padding:0 12px; border:1px solid var(--line); border-radius:9px; color:var(--teal); background:var(--card); font-size:13px; font-weight:750; }
form label { display:block; margin-bottom:14px; }
form label>span, .followup-form>label { display:block; margin-bottom:7px; font-size:13px; font-weight:800; }
.field-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
input,select,textarea { width:100%; min-width:0; border:1px solid var(--line); border-radius:11px; outline:0; color:var(--ink); background:var(--paper); font-size:16px; }
input,select { min-height:50px; padding:0 13px; }
textarea { padding:13px; line-height:1.65; resize:vertical; }
input:focus,select:focus,textarea:focus { border-color:var(--teal); box-shadow:0 0 0 3px rgba(89,80,213,.11); }
.form-note { display:block; margin:-2px 0 14px; color:var(--soft); font-size:12px; line-height:1.6; }
form>button { width:100%; min-height:50px; border:0; border-radius:11px; color:#fff; background:var(--teal); font-size:15px; font-weight:850; }
form>button:disabled { opacity:.58; }
.form-message,.followup-form p { min-height:18px; margin:8px 1px 0; color:var(--coral); font-size:12px; }
.thread-list { display:grid; gap:9px; }
.thread-card { display:grid; grid-template-columns:1fr auto; gap:10px; width:100%; padding:14px; border:1px solid var(--line); border-radius:12px; color:var(--ink); background:var(--card); text-align:left; }
.thread-card strong,.thread-card small { display:block; }
.thread-card strong { overflow:hidden; font-size:14px; text-overflow:ellipsis; white-space:nowrap; }
.thread-card small { margin-top:6px; color:var(--soft); font-size:11px; }
.status { align-self:start; padding:5px 8px; border-radius:20px; color:var(--teal); background:var(--teal-soft); font-size:10px; font-weight:800; white-space:nowrap; }
.status.new { color:#b14a3b; background:#fff0ed; }.status.closed { color:var(--soft); background:#eff0f2; }
.empty { margin:0; padding:20px 4px; color:var(--soft); font-size:13px; text-align:center; }
.messages { display:grid; gap:10px; margin-bottom:18px; }
.message { max-width:88%; padding:12px 14px; border-radius:13px; background:var(--paper); }
.message.admin { justify-self:end; color:#fff; background:var(--teal); }
.message span,.message time { display:block; }
.message span { white-space:pre-wrap; overflow-wrap:anywhere; font-size:14px; line-height:1.65; }
.message time { margin-top:7px; color:var(--soft); font-size:10px; }
.message.admin time { color:rgba(255,255,255,.7); }
.followup-form { padding-top:16px; border-top:1px solid var(--line); }
footer { padding:24px 8px 0; color:var(--soft); font-size:11px; line-height:1.65; text-align:center; }
.toast { position:fixed; z-index:20; right:18px; bottom:calc(20px + var(--safe-bottom)); left:18px; max-width:420px; margin:auto; padding:13px 16px; border-radius:11px; color:#fff; background:#272532; font-size:13px; text-align:center; opacity:0; pointer-events:none; transform:translateY(10px); transition:.18s; }.toast.show { opacity:1; transform:none; }
@media(max-width:520px){ .field-grid{grid-template-columns:1fr}.intro-card{padding:22px 19px}.panel{padding:16px}.message{max-width:94%} }