:root { --bg:#050a12; --panel:#0b1626; --panel-2:#08111e; --line:rgba(143,180,220,.22); --text:#f2f7ff; --muted:#8da0b8; --blue:#168cff; --green:#25d992; --danger:#ff7183; --display:Georgia, 'Times New Roman', serif; --font:Arial, Helvetica, sans-serif; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; background:var(--bg); color:var(--text); font-family:var(--font); }
.page-shell { min-height:100vh; padding:72px 20px 48px; position:relative; overflow:hidden; }
.backdrop { position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 50% 0%,rgba(0,128,255,.2),transparent 36rem),linear-gradient(180deg,#071322,#03070d 78%); }
.container { width:min(100%,760px); margin:0 auto; position:relative; z-index:1; }
.page-heading { text-align:center; margin-bottom:28px; }
.eyebrow { color:#5abaff; font-size:11px; font-weight:700; letter-spacing:.16em; }
h1,h2 { font-family:var(--display); letter-spacing:-.03em; }
h1 { font-size:clamp(34px,6vw,56px); margin:12px 0 8px; }
h2 { font-size:26px; margin:0 0 8px; }
.page-heading p,.hint { color:var(--muted); line-height:1.6; margin:0; }
.card { background:linear-gradient(180deg,rgba(12,28,48,.97),rgba(5,13,24,.98)); border:1px solid var(--line); border-radius:14px; padding:34px; box-shadow:0 24px 70px rgba(0,0,0,.32); }
.card-icon { color:#65c7ff; font-weight:bold; margin-bottom:18px; }
.hint { font-size:13px; margin-bottom:24px; }
.form { display:grid; gap:9px; }
.form label { color:#d3dfed; font-size:12px; font-weight:bold; }
.form textarea,.form input,.share-row input { width:100%; border:1px solid var(--line); border-radius:8px; background:#030912; color:var(--text); outline:none; padding:13px 14px; font:inherit; }
.form textarea { min-height:220px; resize:vertical; line-height:1.55; }
.form textarea:focus,.form input:focus,.share-row input:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(22,140,255,.14); }
.form-row { display:grid; grid-template-columns:1fr auto; align-items:end; gap:14px; margin-top:9px; }
.field-group { display:grid; gap:9px; }
.form-note { color:#71849c; font-size:11px; margin-top:9px; }
.form-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:7px; }
.button { min-height:44px; display:inline-flex; align-items:center; justify-content:center; border:1px solid transparent; border-radius:8px; padding:0 18px; color:white; font-weight:bold; cursor:pointer; text-decoration:none; font-size:13px; }
.button--primary { background:#087cff; }.button--success { background:#159d69; }.button--ghost { background:transparent; border-color:var(--line); }.button--full { width:100%; }
.alert { border-radius:9px; padding:14px 16px; margin-bottom:16px; font-size:13px; }.alert--error { color:#ffc1c9; background:rgba(160,30,55,.2); border:1px solid rgba(255,113,131,.35); }.alert--success { color:#aaf4d3; background:rgba(22,137,94,.16); border:1px solid rgba(37,217,146,.32); }
.share-row { display:flex; gap:8px; margin-top:11px; }.share-row input { color:#b9c9da; min-width:0; }
.card-top { display:flex; justify-content:space-between; gap:12px; color:#7488a0; font-size:10px; letter-spacing:.08em; margin-bottom:24px; }.status { color:var(--green); }
.paste-content { white-space:pre-wrap; overflow-wrap:anywhere; background:#030912; border:1px solid var(--line); border-radius:8px; padding:18px; color:#d9e7f7; font:13px/1.7 Consolas, 'Courier New', monospace; max-height:650px; overflow:auto; margin:0 0 22px; }
footer { color:#657990; font-size:11px; text-align:center; margin-top:24px; }
@media (max-width:580px) { .page-shell { padding:48px 14px 32px; }.card { padding:24px 18px; }.form-row { grid-template-columns:1fr; }.form-row .button { width:100%; }.share-row { flex-direction:column; } }

/* Whido Tech Help visual language */
:root { --bg:#090a0d; --panel:#15171b; --line:#30343b; --text:#f5f5f5; --muted:#9b9da3; --blue:#d8232e; --cyan:#ef3a43; --display:'Trebuchet MS', Arial, sans-serif; --font:Arial, Helvetica, sans-serif; }
body { background:#090a0d; color:var(--text); }
.page-shell { padding:0 20px 44px; }
.backdrop { background:radial-gradient(circle at 50% 0%,rgba(216,35,46,.14),transparent 34rem),linear-gradient(180deg,#17191d 0,#0b0c0f 45%,#090a0d 100%); }
.container { width:min(100%,940px); }
.site-header { min-height:88px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.1); }
.brand { display:inline-flex; align-items:center; text-decoration:none; }.brand img { display:block; width:145px; max-height:48px; object-fit:contain; object-position:left center; }
.header-label { color:#a2a4a9; font-size:10px; font-weight:700; letter-spacing:.16em; }
.page-heading { max-width:700px; margin:66px auto 28px; text-align:center; }
.eyebrow { color:#f03c45; font-size:12px; letter-spacing:.22em; }
h1,h2 { color:#fff; font-family:var(--display); }
h1 { font-size:clamp(38px,6vw,64px); line-height:1.02; margin:13px 0 12px; }
.page-heading p { color:#a6a8ad; font-size:16px; }.quick-intro { display:flex; align-items:center; gap:15px; padding:18px 21px; margin-bottom:16px; background:#1b1e23; border:1px solid #343941; border-radius:10px; }
.intro-icon { width:39px; height:39px; display:grid; place-items:center; color:#fff; background:var(--blue); border-radius:8px; font-weight:700; }.quick-intro strong,.quick-intro span { display:block; }.quick-intro strong { color:#fff; font-size:14px; }.quick-intro span { color:#a1a4aa; font-size:12px; margin-top:4px; }
.intro-meta { margin-left:auto; padding-left:20px; border-left:1px solid #3b3f46; text-align:right; }.intro-meta b { color:#f03c45; font-size:17px; }.intro-meta span { color:#a1a4aa; font-size:10px; }
.card { background:rgba(21,23,27,.98); border:1px solid #353940; border-radius:10px; padding:34px 38px; box-shadow:0 18px 42px rgba(0,0,0,.28); }
.card-icon { color:#f03c45; margin-bottom:15px; }.card h2 { font-size:27px; }.hint { color:#a1a4aa; }
.form label { color:#e0e1e3; }.form textarea,.form input,.share-row input { background:#0d0f12; color:#f5f5f5; border-color:#3b4048; border-radius:6px; }
.form textarea:focus,.form input:focus,.share-row input:focus { border-color:#e3343e; box-shadow:0 0 0 3px rgba(216,35,46,.16); }
.button { border-radius:6px; min-height:45px; }.button--primary { background:#d8232e; box-shadow:0 8px 16px rgba(216,35,46,.2); }.button--success { background:#bd2631; }.button--ghost { color:#fff; background:#22252a; border-color:#4a4e55; }
.alert { border-radius:7px; }.alert--error { color:#ffb9bf; background:#32171b; border-color:#71323a; }.alert--success { color:#b8f0d7; background:#162d25; border-color:#2d654c; }
.card-top { color:#9b9da3; }.status { color:#57d49e; }.paste-content { background:#0d0f12; border-color:#363b42; color:#f0f0f0; }
.form-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:7px; }
.help-strip { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:18px; padding:15px 18px; border:1px solid #30343b; background:#15171b; border-radius:8px; }
.help-strip > div { display:flex; align-items:center; gap:10px; }.help-dot { width:9px; height:9px; border-radius:50%; background:#43d69b; box-shadow:0 0 0 4px rgba(67,214,155,.12); }.help-strip strong,.help-strip small { display:block; }.help-strip strong { color:#eee; font-size:12px; }.help-strip small { color:#999da4; font-size:10px; margin-top:3px; }.help-contact { color:#999da4; font-size:10px; }.help-contact b { color:#43d69b; }
footer { color:#747980; margin-top:22px; } footer span { color:#4c5158; margin:0 5px; }
@media (max-width:580px) { .page-shell { padding:0 14px 30px; }.site-header { min-height:72px; }.header-label { font-size:8px; }.page-heading { margin-top:48px; }.page-heading p { font-size:14px; }.quick-intro { align-items:flex-start; }.intro-meta { display:none; }.card { padding:25px 18px; }.help-strip { align-items:flex-start; flex-direction:column; }.help-contact { padding-left:19px; } }