﻿/* ======================================================================
   故障文字生成器 · 独立设计（赛博朋克黑霓虹主题）
   浅色 = 深灰霓虹（风格本身偏暗）；深色 = 纯黑 + 高饱和霓虹
   ====================================================================== */
.gt{
  --ink:#e8e6f5; --sub:#a09cc0; --faint:#6b678f;
  --bg:#191722; --card:#211e2d; --card2:#2a2638; --line:#3a3550; --line2:#312c44;
  --pri:#a855f7; --pri-2:#c084fc; --pri-soft:rgba(168,85,247,.16); --pri-ink:#d8b4fe;
  --c1:#00f0ff; --c2:#ff00e5;
  --red:#ff5d5d; --red-soft:rgba(255,93,93,.14);
  --ok:#39ff9c;
  --r:14px;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px rgba(168,85,247,.18);
  color:var(--ink);
  font-family:-apple-system,"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",system-ui,sans-serif;
  font-size:15px; line-height:1.75;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0 1px, transparent 1px 3px),
    radial-gradient(820px 400px at 85% -130px, rgba(0,240,255,.10), transparent 60%),
    radial-gradient(700px 360px at -8% 160px, rgba(255,0,229,.08), transparent 60%),
    var(--bg);
  padding:0 16px 56px;
}
:root[data-theme="dark"] .gt{
  --ink:#f2f0ff; --sub:#b4aed4; --faint:#7a749e;
  --bg:#0b0a12; --card:#131220; --card2:#1a1829; --line:#2b2742; --line2:#232036;
  --pri:#c084fc; --pri-2:#e9d5ff; --pri-soft:rgba(192,132,252,.18); --pri-ink:#e9d5ff;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 14px 36px rgba(0,0,0,.5);
}
.gt *{box-sizing:border-box;}
.gt b{font-weight:700;}
.gt-wrap{max-width:1160px;margin:0 auto;}
.gt input,.gt textarea,.gt pre,.gt code{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Consolas,"Courier New",monospace;}

.gt-hero{margin-top:22px;border-radius:16px;overflow:hidden;box-shadow:var(--shadow);
  background:linear-gradient(115deg,#0f0c29,#302b63 55%,#24243e 115%);position:relative;}
.gt-hero::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,240,255,.06) 0 2px,transparent 2px 5px);pointer-events:none;}
.gt-hero-body{position:relative;padding:24px 28px;}
.gt-hero h1{margin:0 0 8px;font-size:clamp(23px,3.4vw,31px);font-weight:900;color:#fff;line-height:1.3;text-shadow:2px 0 var(--c1),-2px 0 var(--c2);}
.gt-hero p{margin:0;color:#b9b4dd;font-size:15px;max-width:820px;}
.gt-hero p em{font-style:normal;color:var(--c1);font-weight:700;}

.gt-desk{display:grid;grid-template-columns:340px 1fr;gap:18px;margin-top:20px;align-items:start;}
@media (max-width:960px){.gt-desk{grid-template-columns:1fr;}}
.gt-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:18px;}
.gt-card h2{margin:0 0 10px;font-size:16px;font-weight:800;display:flex;align-items:center;gap:8px;}
.gt-card h2::before{content:"▚";color:var(--pri);}
.gt-tip{font-size:12.5px;color:var(--sub);margin:0 0 10px;}
.gt-in{width:100%;padding:9px 12px;border-radius:10px;border:1px solid var(--line);background:var(--card2);color:var(--ink);font-size:14px;outline:none;}
.gt-in:focus{border-color:var(--pri-2);box-shadow:0 0 0 3px var(--pri-soft);}
.gt-lbl{font-size:12.5px;font-weight:700;color:var(--sub);margin:14px 0 6px;}
.gt-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.gt-chip{border:1px solid var(--line);background:var(--card2);color:var(--sub);border-radius:999px;padding:5px 14px;font-size:13px;cursor:pointer;font-weight:600;transition:all .15s;}
.gt-chip:hover{border-color:var(--pri-2);color:var(--pri-ink);}
.gt-chip.on{background:var(--pri);border-color:var(--pri);color:#160b26;}
.gt-sld{display:grid;grid-template-columns:64px 1fr 46px;align-items:center;gap:10px;margin:8px 0;font-size:13px;color:var(--sub);font-weight:600;}
.gt-sld input[type=range]{width:100%;accent-color:var(--pri);}
.gt-sld .v{font-family:ui-monospace,Consolas,monospace;color:var(--pri-ink);text-align:right;}
.gt-btn{border:none;border-radius:10px;padding:9px 20px;font-size:14px;font-weight:800;cursor:pointer;transition:all .15s;}
.gt-btn-go{background:var(--pri);color:#160b26;}
.gt-btn-go:hover{background:var(--pri-2);}
.gt-btn-ghost{background:var(--card2);color:var(--pri-ink);border:1px solid var(--line);}
.gt-btn-ghost:hover{border-color:var(--pri-2);}
.gt-msg{margin-top:10px;font-size:13px;min-height:20px;font-weight:600;}
.gt-msg.err{color:var(--red);}
.gt-msg.ok{color:var(--ok);}

/* 预览舞台 */
.gt-stage{border-radius:12px;border:1px solid var(--line);background:#0a0913;min-height:260px;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;padding:20px;}
.gt-stage::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 4px);}
.gt-text{position:relative;display:inline-block;font-weight:900;letter-spacing:.04em;color:#fff;white-space:pre-wrap;text-align:center;
  --goff:4px;--gs:1.6s;}
.gt-text::before,.gt-text::after{content:attr(data-text);position:absolute;top:0;left:0;width:100%;overflow:hidden;}
.gt-s-rgb .gt-text::before{color:var(--c1);animation:gtA 2s infinite linear alternate-reverse;mix-blend-mode:screen;}
.gt-s-rgb .gt-text::after{color:var(--c2);animation:gtB 2.6s infinite linear alternate-reverse;mix-blend-mode:screen;}
.gt-s-slice .gt-text::before{color:var(--c1);animation:gtA var(--gs) infinite steps(2) alternate-reverse;}
.gt-s-slice .gt-text::after{color:var(--c2);animation:gtB calc(var(--gs)*1.3) infinite steps(2) alternate-reverse;}
.gt-s-wave .gt-text::before{color:var(--c1);animation:gtW var(--gs) infinite ease-in-out alternate;}
.gt-s-wave .gt-text::after{color:var(--c2);animation:gtW calc(var(--gs)*.8) infinite ease-in-out alternate-reverse;}
@keyframes gtA{
  0%{transform:translate(calc(var(--goff)*-1),0);clip-path:inset(8% 0 82% 0);}
  20%{transform:translate(var(--goff),0);clip-path:inset(62% 0 18% 0);}
  40%{transform:translate(calc(var(--goff)*-.6),0);clip-path:inset(30% 0 55% 0);}
  60%{transform:translate(calc(var(--goff)*.8),0);clip-path:inset(84% 0 4% 0);}
  80%{transform:translate(calc(var(--goff)*-.4),0);clip-path:inset(18% 0 70% 0);}
  100%{transform:translate(var(--goff),0);clip-path:inset(48% 0 34% 0);}
}
@keyframes gtB{
  0%{transform:translate(var(--goff),0);clip-path:inset(70% 0 12% 0);}
  25%{transform:translate(calc(var(--goff)*-.9),0);clip-path:inset(12% 0 76% 0);}
  50%{transform:translate(calc(var(--goff)*.5),0);clip-path:inset(40% 0 42% 0);}
  75%{transform:translate(calc(var(--goff)*-.7),0);clip-path:inset(86% 0 2% 0);}
  100%{transform:translate(calc(var(--goff)*.9),0);clip-path:inset(24% 0 66% 0);}
}
@keyframes gtW{
  0%{transform:translateX(calc(var(--goff)*-.5)) skewX(-3deg);clip-path:inset(10% 0 60% 0);}
  50%{transform:translateX(calc(var(--goff)*.5)) skewX(3deg);clip-path:inset(50% 0 8% 0);}
  100%{transform:translateX(calc(var(--goff)*-.3)) skewX(-2deg);clip-path:inset(20% 0 40% 0);}
}
.gt-paused .gt-text::before,.gt-paused .gt-text::after{animation-play-state:paused;}

.gt-pre{width:100%;min-height:190px;max-height:340px;overflow:auto;border-radius:10px;border:1px solid var(--line);background:var(--card2);color:var(--ink);padding:12px 14px;font-size:12px;line-height:1.6;white-space:pre;margin:10px 0 0;}

.gt-faq{margin-top:34px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;box-shadow:var(--shadow);}
.gt-faq h2{margin:0 0 12px;font-size:19px;font-weight:900;}
.gt-faq h3{margin:18px 0 6px;font-size:15.5px;font-weight:800;color:var(--pri-ink);}
.gt-faq p{margin:0;color:var(--sub);font-size:14px;}
.gt-faq p b{color:var(--ink);}

/* ---------- ② 预设配方 · 强度扫描 · 多格式导出 · 兼容性体检 ---------- */
.gt2-lab{margin-top:20px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);box-shadow:var(--shadow);padding:18px;}
.gt2-head h2{margin:0 0 6px;font-size:17px;font-weight:900;color:var(--ink);}
.gt2-head p{margin:0 0 14px;color:var(--sub);font-size:13.5px;}
.gt2-head p em{font-style:normal;color:var(--pri-ink);font-weight:700;}
.gt2-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;}
.gt2-grid:last-child{margin-bottom:0;}
@media (max-width:900px){.gt2-grid{grid-template-columns:1fr;}}
.gt2-panel{background:var(--card2);border:1px solid var(--line2);border-radius:12px;padding:14px;min-width:0;}
.gt2-panel h3{margin:0 0 10px;font-size:14px;font-weight:800;color:var(--ink);}
.gt2-presets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
@media (max-width:520px){.gt2-presets{grid-template-columns:1fr;}}
.gt2-preset{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:10px;padding:8px 10px;text-align:left;cursor:pointer;font-family:inherit;font-size:12.5px;line-height:1.45;font-weight:700;transition:all .15s;min-width:0;}
.gt2-preset small{display:block;font-weight:500;color:var(--sub);font-size:11px;}
.gt2-preset:hover{border-color:var(--pri-2);}
.gt2-preset.on{background:var(--pri-soft);border-color:var(--pri);}
.gt2-msg{margin-top:8px;font-size:12.5px;font-weight:600;min-height:18px;color:var(--sub);}
.gt2-msg.ok{color:var(--ok);}
.gt2-msg.err{color:var(--red);}
.gt2-msg:empty{display:none;}
.gt2-chart{background:var(--card);border:1px solid var(--line2);border-radius:10px;padding:4px;overflow-x:auto;}
.gt2-chart svg{display:block;width:100%;height:auto;min-width:420px;}
.gt2-grid-l{stroke:var(--line2);stroke-width:1;}
.gt2-axis{stroke:var(--line);stroke-width:1.2;}
.gt2-curve{fill:none;stroke:var(--pri);stroke-width:2.4;}
.gt2-bar{fill:var(--pri-soft);stroke:var(--pri);stroke-width:1;}
.gt2-dot{fill:var(--c1);stroke:var(--card);stroke-width:2;}
.gt2-lab{fill:var(--sub);font-size:9.5px;}
.gt2-lab-hi{fill:var(--pri-ink);font-size:10px;font-weight:800;}
.gt2-legend{display:flex;flex-wrap:wrap;gap:12px;font-size:11.5px;color:var(--sub);margin-top:8px;}
.gt2-legend span{display:inline-flex;align-items:center;gap:5px;}
.gt2-legend i{width:14px;height:3px;border-radius:2px;background:var(--pri);display:inline-block;}
.gt2-legend i.b{height:9px;background:var(--pri-soft);border:1px solid var(--pri);}
.gt2-tip{font-size:11.5px;color:var(--sub);margin:8px 0 0;line-height:1.6;}
.gt2-kpis{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.gt2-kpi{background:var(--card);border:1px solid var(--line2);border-radius:10px;padding:8px 12px;min-width:104px;}
.gt2-kpi .v{font-size:19px;font-weight:900;color:var(--pri-ink);font-family:"JetBrains Mono",Consolas,monospace;}
.gt2-kpi .k{font-size:11px;color:var(--sub);font-weight:700;}
.gt2-fmt{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;}
.gt2-fmt-btn{border:1px solid var(--line);background:var(--card);color:var(--sub);border-radius:999px;padding:5px 12px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;transition:all .15s;}
.gt2-fmt-btn:hover{border-color:var(--pri-2);}
.gt2-fmt-btn.on{background:var(--pri);border-color:var(--pri);color:#160b26;}
.gt2-out{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-size:12px;line-height:1.7;white-space:pre;overflow:auto;max-height:280px;margin:0;color:var(--ink);}
.gt2-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.gt2-btn{border:1px solid var(--line);background:var(--card);color:var(--pri-ink);border-radius:9px;padding:8px 14px;font-size:12.5px;font-weight:800;cursor:pointer;font-family:inherit;transition:all .15s;}
.gt2-btn:hover{border-color:var(--pri-2);}
.gt2-btn-go{background:var(--pri);border-color:var(--pri);color:#160b26;}
.gt2-check{display:flex;flex-direction:column;gap:8px;}
.gt2-item{display:flex;gap:8px;align-items:flex-start;background:var(--card);border:1px solid var(--line2);border-radius:10px;padding:9px 11px;font-size:12.5px;color:var(--sub);line-height:1.6;}
.gt2-item .tag{flex:none;font-size:10.5px;font-weight:900;border-radius:999px;padding:2px 8px;letter-spacing:.04em;}
.gt2-item .tag.ok{background:rgba(57,255,156,.14);color:var(--ok);border:1px solid rgba(57,255,156,.3);}
.gt2-item .tag.warn{background:rgba(255,196,0,.14);color:#ffc400;border:1px solid rgba(255,196,0,.3);}
.gt2-item b{color:var(--ink);}
.gt2-item code{display:block;margin-top:5px;font-size:11px;color:var(--pri-ink);white-space:pre-wrap;word-break:break-all;}

