ai{
--bg:#080b0f;
--bg2:#10161c;
--sf:rgba(17,23,29,.92);
--sf2:rgba(27,36,43,.78);
--solid:#151c22;
--tx:#edf2f4;
--mu:#a1adb4;
--dim:#6f7b82;
--line:rgba(205,225,232,.14);
--line2:rgba(205,225,232,.28);
--red:#ed5b43;
--red2:#9f2f23;
--rsoft:rgba(237,91,67,.14);
--cyan:#76d7dc;
--green:#55d49d;
--yellow:#e2b85d;
--danger:#ef6464;
--shadow:0 18px 52px rgba(0,0,0,.38),0 3px 12px rgba(0,0,0,.22);
position:relative;
isolation:isolate;
display:block;
width:100%;
max-width:920px;
margin:10px auto;
overflow:hidden;
border:1px solid var(--line);
border-radius:18px;
background:
radial-gradient(circle at 78% -8%,rgba(159,47,35,.23),transparent 32%),
radial-gradient(circle at -8% 65%,rgba(118,215,220,.055),transparent 28%),
linear-gradient(165deg,var(--bg),var(--bg2));
color:var(--tx);
font-family:Inter,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
font-size:15px;
line-height:1.75;
box-shadow:var(--shadow);
word-break:break-word;
-webkit-text-size-adjust:100%;
}
ai::before{
content:"";
position:absolute;
z-index:-1;
inset:0;
pointer-events:none;
opacity:.23;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='92' height='92' viewBox='0 0 92 92'%3E%3Cpath d='M0 18H92M0 55H92' stroke='%23d6e2e7' stroke-opacity='.035'/%3E%3Ccircle cx='14' cy='33' r='.7' fill='%23ed5b43' fill-opacity='.34'/%3E%3Ccircle cx='71' cy='76' r='.6' fill='%2376d7dc' fill-opacity='.24'/%3E%3C/svg%3E");
}
ai::after{
content:"";
position:absolute;
z-index:10;
top:0;
left:-45%;
width:32%;
height:100%;
pointer-events:none;
opacity:.28;
background:linear-gradient(90deg,transparent,rgba(237,242,244,.035),transparent);
transform:skewX(-15deg);
animation:ai-scan 12s linear infinite;
}
ai ::selection{
color:#fff;
background:var(--red);
}
ai hd{
position:relative;
display:grid;
grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) auto;
align-items:center;
gap:7px 14px;
min-height:52px;
padding:9px 14px 9px 18px;
overflow:hidden;
border-bottom:1px solid var(--line);
background:
linear-gradient(90deg,rgba(237,91,67,.13),transparent 42%),
rgba(9,13,17,.9);
font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
font-size:12px;
letter-spacing:.03em;
}
ai hd::before{
content:"";
position:absolute;
top:0;
bottom:0;
left:0;
width:3px;
background:linear-gradient(var(--red),var(--red2));
box-shadow:0 0 13px rgba(237,91,67,.62);
}
ai hd::after{
content:"ARCHIVE // LIVE";
position:absolute;
right:13px;
bottom:-4px;
color:rgba(237,91,67,.08);
font-size:22px;
font-weight:900;
letter-spacing:-.06em;
pointer-events:none;
}
ai hd b{
position:relative;
z-index:1;
color:var(--tx);
font-size:12px;
letter-spacing:.06em;
}
ai hd b::before{
content:"";
display:inline-block;
width:6px;
height:6px;
margin-right:7px;
border-radius:50%;
background:var(--red);
box-shadow:0 0 0 4px rgba(237,91,67,.11),0 0 12px var(--red);
animation:ai-pulse 2.2s ease-in-out infinite;
}
ai hd span{
position:relative;
z-index:1;
overflow:hidden;
color:var(--mu);
text-overflow:ellipsis;
white-space:nowrap;
}
ai hd em{
position:relative;
z-index:1;
padding:3px 8px;
border:1px solid rgba(118,215,220,.19);
border-radius:999px;
background:rgba(118,215,220,.07);
color:var(--cyan);
font-style:normal;
white-space:nowrap;
}
ai article{
position:relative;
padding:19px clamp(15px,4vw,30px) 23px;
background:
linear-gradient(180deg,rgba(255,255,255,.015),transparent 18%),
rgba(8,12,15,.35);
}
ai article::before{
content:"RECOVERED NARRATIVE";
display:block;
margin-bottom:13px;
color:var(--dim);
font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
font-size:10px;
font-weight:800;
letter-spacing:.18em;
}
ai article>p{
position:relative;
margin:0;
color:#d8e0e3;
text-align:justify;
text-indent:0;
letter-spacing:.012em;
}
ai article>p+p{
margin-top:15px;
padding-top:2px;
}
ai article>p::first-letter{
float:left;
margin:6px 6px 0 0;
color:var(--red);
font-family:Georgia,"Songti SC","STSong",serif;
font-size:2.45em;
font-weight:850;
line-height:.78;
text-shadow:0 0 17px rgba(237,91,67,.28);
}
ai article>p:hover{
color:var(--tx);
}
ai article q{
quotes:none;
position:relative;
margin:0 3px;
color:#f3f6f7;
font-weight:620;
text-decoration:none;
}
ai article q::before,
ai article q::after{
content:none;
}
ai article q i{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:28px;
height:28px;
margin:0 6px 0 2px;
padding:0 7px;
border:1px solid rgba(255,125,100,.42);
border-radius:999px;
background:
radial-gradient(circle at 35% 25%,rgba(255,255,255,.16),transparent 38%),
linear-gradient(145deg,var(--red),var(--red2));
color:#fff;
font-size:11px;
font-style:normal;
font-weight:900;
line-height:1;
letter-spacing:0;
text-indent:0;
vertical-align:2px;
box-shadow:0 3px 12px rgba(237,91,67,.2);
}
ai article q:hover i{
border-color:rgba(255,190,174,.62);
box-shadow:0 0 0 3px rgba(237,91,67,.1),0 5px 18px rgba(237,91,67,.27);
transform:translateY(-1px);
}
ai chat{
position:relative;
display:block;
padding:23px 13px 26px;
overflow:hidden;
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
background:
radial-gradient(circle at 50% 0,rgba(237,91,67,.1),transparent 42%),
linear-gradient(180deg,rgba(12,17,21,.85),rgba(7,10,13,.94));
}
ai chat::before{
content:"SURVIVOR CHANNEL // ENCRYPTED";
display:block;
max-width:380px;
margin:0 auto 10px;
color:var(--dim);
font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
font-size:10px;
font-weight:800;
letter-spacing:.16em;
text-align:center;
}
ai chat::after{
content:"";
position:absolute;
top:48px;
left:50%;
width:300px;
height:300px;
border:1px solid rgba(237,91,67,.055);
border-radius:50%;
box-shadow:0 0 0 40px rgba(237,91,67,.018),0 0 0 82px rgba(237,91,67,.012);
transform:translateX(-50%);
pointer-events:none;
}
ai ph{
position:relative;
z-index:1;
display:flex;
flex-direction:column;
width:min(100%,368px);
max-height:650px;
min-height:520px;
margin:auto;
padding:8px;
overflow:hidden;
border:1px solid rgba(210,226,233,.25);
border-radius:35px;
background:
linear-gradient(145deg,#353b40,#090c0e 46%,#272d31);
box-shadow:
0 26px 60px rgba(0,0,0,.48),
inset 0 0 0 2px rgba(255,255,255,.035),
inset 0 -7px 16px rgba(0,0,0,.36);
}
ai ph::before{
content:"";
position:absolute;
z-index:5;
top:13px;
left:50%;
width:92px;
height:20px;
border-radius:15px;
background:#050708;
box-shadow:inset 0 -1px rgba(255,255,255,.035);
transform:translateX(-50%);
}
ai ph::after{
content:"";
position:absolute;
z-index:6;
bottom:12px;
left:50%;
width:92px;
height:3px;
border-radius:999px;
background:rgba(237,242,244,.34);
transform:translateX(-50%);
pointer-events:none;
}
ai bar{
display:flex;
flex:0 0 auto;
align-items:center;
justify-content:space-between;
min-height:34px;
padding:6px 13px 1px;
border-radius:27px 27px 0 0;
background:#0d1216;
color:var(--mu);
font-size:10px;
font-weight:800;
}
ai bar time,
ai bar b{
font:inherit;
}
ai ch{
position:relative;
display:flex;
flex:0 0 auto;
align-items:center;
gap:9px;
min-height:57px;
padding:8px 11px;
border-bottom:1px solid var(--line);
background:rgba(13,18,22,.97);
}
ai ch>a,
ai m>a{
display:grid;
place-items:center;
flex:0 0 auto;
border:1px solid rgba(255,128,102,.32);
background:
radial-gradient(circle at 35% 25%,rgba(255,255,255,.14),transparent 36%),
linear-gradient(145deg,var(--red),var(--red2));
color:#fff;
font-weight:900;
text-decoration:none;
box-shadow:0 5px 15px rgba(237,91,67,.18);
}
ai ch>a{
width:38px;
height:38px;
border-radius:13px;
font-size:14px;
}
ai ch f{
display:block;
min-width:0;
flex:1;
}
ai ch strong,
ai ch small{
display:block;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
ai ch strong{
color:var(--tx);
font-size:13px;
line-height:1.35;
}
ai ch small{
margin-top:2px;
color:var(--green);
font-size:9px;
letter-spacing:.03em;
}
ai ch em{
padding:3px 6px;
border:1px solid rgba(118,215,220,.18);
border-radius:999px;
color:var(--cyan);
font-size:9px;
font-style:normal;
}
ai msgs{
display:block;
flex:1 1 auto;
min-height:0;
padding:12px 10px 27px;
overflow-x:hidden;
overflow-y:auto;
overscroll-behavior:contain;
background:
radial-gradient(circle at 78% 0,rgba(159,47,35,.11),transparent 36%),
linear-gradient(rgba(13,18,22,.98),rgba(11,15,19,.98));
scrollbar-width:thin;
scrollbar-color:rgba(237,91,67,.3) transparent;
}
ai msgs::-webkit-scrollbar{
width:4px;
}
ai msgs::-webkit-scrollbar-thumb{
border-radius:999px;
background:rgba(237,91,67,.3);
}
ai date{
display:block;
width:max-content;
max-width:90%;
margin:0 auto 14px;
padding:3px 8px;
border:1px solid var(--line);
border-radius:999px;
background:rgba(255,255,255,.025);
color:var(--dim);
font-size:9px;
text-align:center;
}
ai m{
display:flex;
align-items:flex-end;
gap:6px;
margin:0 0 10px;
opacity:0;
animation:ai-msg .42s cubic-bezier(.2,.8,.2,1) forwards;
}
ai m:nth-of-type(2){animation-delay:.06s}
ai m:nth-of-type(3){animation-delay:.12s}
ai m:nth-of-type(4){animation-delay:.18s}
ai m:nth-of-type(5){animation-delay:.24s}
ai m:nth-of-type(6){animation-delay:.3s}
ai m:nth-of-type(7){animation-delay:.36s}
ai m:nth-of-type(8){animation-delay:.42s}
ai m:nth-of-type(9){animation-delay:.48s}
ai m:nth-of-type(10){animation-delay:.54s}
ai m:nth-of-type(11){animation-delay:.6s}
ai m:nth-of-type(12){animation-delay:.66s}
ai m[me]{
justify-content:flex-end;
}
ai m>a{
width:24px;
height:24px;
border-radius:8px;
font-size:9px;
}
ai m[me]>a{
border-color:rgba(118,215,220,.32);
background:
radial-gradient(circle at 35% 25%,rgba(255,255,255,.16),transparent 36%),
linear-gradient(145deg,#328d93,#1b5961);
box-shadow:0 5px 15px rgba(118,215,220,.12);
}
ai m u{
position:relative;
display:block;
max-width:78%;
padding:8px 10px 5px;
border:1px solid var(--line);
border-radius:14px 14px 14px 5px;
background:rgba(31,41,48,.96);
color:#eaf0f2;
font-size:12px;
line-height:1.55;
text-decoration:none;
box-shadow:0 4px 12px rgba(0,0,0,.12);
}
ai m[me] u{
border-color:rgba(255,127,101,.28);
border-radius:14px 14px 5px 14px;
background:linear-gradient(145deg,var(--red),var(--red2));
color:#fff;
}
ai m u time{
display:block;
margin-top:2px;
color:rgba(225,234,238,.47);
font-size:8px;
line-height:1.3;
text-align:right;
}
ai m[me] u time{
color:rgba(255,255,255,.58);
}
ai m:hover u{
border-color:var(--line2);
transform:translateY(-1px);
}
ai send{
display:flex;
flex:0 0 auto;
align-items:center;
gap:7px;
min-height:49px;
padding:8px 10px 13px;
border-top:1px solid var(--line);
border-radius:0 0 27px 27px;
background:rgba(13,18,22,.98);
}
ai send span{
display:flex;
align-items:center;
min-width:0;
min-height:32px;
flex:1;
padding:0 11px;
overflow:hidden;
border:1px solid var(--line);
border-radius:12px;
background:var(--sf2);
color:var(--dim);
font-size:10px;
text-overflow:ellipsis;
white-space:nowrap;
}
ai send b{
display:grid;
place-items:center;
width:33px;
height:33px;
flex:0 0 auto;
border-radius:11px;
background:linear-gradient(145deg,var(--red),var(--red2));
color:#fff;
font-size:13px;
box-shadow:0 5px 15px rgba(237,91,67,.2);
}
ai details{
position:relative;
display:block;
margin:0;
border:0;
background:
linear-gradient(180deg,rgba(237,91,67,.035),transparent 130px),
rgba(10,14,18,.9);
}
ai details>summary{
position:relative;
z-index:2;
display:flex;
align-items:center;
min-height:50px;
padding:10px 44px 10px 17px;
overflow:hidden;
border-bottom:1px solid var(--line);
background:
linear-gradient(90deg,rgba(237,91,67,.16),transparent 50%),
rgba(18,24,29,.95);
color:var(--tx);
font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
font-size:13px;
font-weight:900;
letter-spacing:.08em;
cursor:pointer;
list-style:none;
user-select:none;
}
ai details>summary::-webkit-details-marker{
display:none;
}
ai details>summary::before{
content:"";
width:7px;
height:7px;
margin-right:9px;
border-radius:50%;
background:var(--green);
box-shadow:0 0 0 4px rgba(85,212,157,.1),0 0 13px rgba(85,212,157,.55);
animation:ai-pulse 2s ease-in-out infinite;
}
ai details>summary::after{
content:"⌃";
position:absolute;
right:17px;
display:grid;
place-items:center;
width:23px;
height:23px;
border:1px solid var(--line);
border-radius:8px;
color:var(--red);
font-size:14px;
line-height:1;
transition:transform .25s ease;
}
ai details:not([open])>summary::after{
transform:rotate(180deg);
}
ai details>summary:hover{
background:
linear-gradient(90deg,rgba(237,91,67,.22),transparent 58%),
rgba(21,28,34,.98);
}
ai st{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:1px;
padding:1px;
background:var(--line);
}
ai g{
position:relative;
display:block;
min-width:0;
padding:38px 12px 10px 15px;
overflow:hidden;
background:
linear-gradient(135deg,rgba(255,255,255,.024),transparent 58%),
var(--solid);
transition:background .2s ease,box-shadow .2s ease;
}
ai g::before{
content:attr(t);
position:absolute;
top:0;
right:0;
left:0;
height:30px;
padding:7px 12px 0 15px;
border-bottom:1px solid rgba(205,225,232,.08);
background:rgba(255,255,255,.018);
color:var(--cyan);
font-size:10px;
font-weight:900;
line-height:1.5;
letter-spacing:.13em;
}
ai g::after{
content:"";
position:absolute;
top:0;
bottom:0;
left:0;
width:2px;
background:var(--cyan);
opacity:.72;
box-shadow:0 0 9px rgba(118,215,220,.3);
}
ai g:hover{
z-index:1;
background:
linear-gradient(90deg,rgba(118,215,220,.055),transparent 46%),
#182027;
box-shadow:inset 0 0 0 1px rgba(118,215,220,.08);
}
ai g[risk="2"]::before{
color:var(--yellow);
}
ai g[risk="2"]::after{
background:var(--yellow);
box-shadow:0 0 10px rgba(226,184,93,.38);
}
ai g[risk="3"]::before{
color:#f18a60;
}
ai g[risk="3"]::after{
background:#f18a60;
box-shadow:0 0 11px rgba(241,138,96,.45);
}
ai g[risk="4"]{
background:
radial-gradient(circle at 100% 0,rgba(239,100,100,.09),transparent 45%),
var(--solid);
animation:ai-danger 3s ease-in-out infinite;
}
ai g[risk="4"]::before{
color:var(--danger);
}
ai g[risk="4"]::after{
background:var(--danger);
box-shadow:0 0 13px rgba(239,100,100,.6);
}
ai f{
display:block;
margin:0 0 6px;
padding:7px 9px;
border:1px solid rgba(118,215,220,.16);
border-radius:9px;
background:
linear-gradient(90deg,rgba(118,215,220,.09),transparent);
color:var(--tx);
font-size:13px;
font-weight:900;
line-height:1.45;
}
ai f[lv="1"]{
border-color:rgba(237,91,67,.31);
background:
linear-gradient(90deg,rgba(237,91,67,.16),transparent 78%);
color:#ff9a85;
box-shadow:inset 2px 0 var(--red);
}
ai f[lv="1"]::after{
content:" I";
float:right;
padding:1px 6px;
border:1px solid rgba(237,91,67,.28);
border-radius:999px;
background:rgba(237,91,67,.1);
color:var(--red);
font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
font-size:9px;
letter-spacing:.08em;
}
ai d{
position:relative;
display:block;
min-height:25px;
padding:4px 5px 4px 10px;
border-bottom:1px dashed rgba(205,225,232,.075);
color:var(--mu);
font-size:12px;
line-height:1.5;
transition:padding-left .18s ease,color .18s ease,background .18s ease;
}
ai d:last-child{
border-bottom:0;
}
ai d::before{
content:"";
position:absolute;
top:11px;
left:1px;
width:3px;
height:3px;
border-radius:50%;
background:var(--dim);
}
ai d:hover{
padding-left:14px;
border-radius:5px;
background:linear-gradient(90deg,rgba(237,91,67,.075),transparent);
color:var(--tx);
}
ai d:hover::before{
background:var(--red);
box-shadow:0 0 7px var(--red);
}
ai g[t="当前目标"] d:first-of-type,
ai g[t="可选行动"] d{
color:#dfe7e9;
}
ai g[t="可选行动"] d{
margin:2px 0;
padding:6px 7px 6px 12px;
border:1px solid transparent;
border-radius:7px;
background:rgba(255,255,255,.018);
}
ai g[t="可选行动"] d:hover{
border-color:rgba(237,91,67,.18);
background:linear-gradient(90deg,rgba(237,91,67,.11),rgba(237,91,67,.025));
transform:translateX(2px);
}
@keyframes ai-scan{
0%{left:-45%}
28%,100%{left:125%}
}
@keyframes ai-pulse{
0%,100%{opacity:.55;transform:scale(.88)}
50%{opacity:1;transform:scale(1.1)}
}
@keyframes ai-msg{
from{opacity:0;transform:translateY(8px) scale(.985)}
to{opacity:1;transform:none}
}
@keyframes ai-danger{
0%,100%{box-shadow:inset 0 0 0 rgba(239,100,100,0)}
50%{box-shadow:inset 0 0 22px rgba(239,100,100,.055)}
}
@media(max-width:720px){
ai{
margin:6px auto;
border-radius:14px;
font-size:14px;
line-height:1.7;
}
ai hd{
grid-template-columns:1fr auto;
gap:3px 8px;
padding:8px 10px 8px 14px;
}
ai hd span{
grid-column:1/-1;
grid-row:2;
font-size:10px;
}
ai hd em{
grid-column:2;
grid-row:1;
font-size:10px;
}
ai article{
padding:16px 14px 20px;
}
ai article>p{
text-align:left;
}
ai article>p+p{
margin-top:13px;
}
ai article>p::first-letter{
font-size:2.25em;
}
ai chat{
padding:18px 7px 21px;
}
ai ph{
width:min(100%,350px);
min-height:500px;
max-height:620px;
border-radius:31px;
}
ai bar{
border-radius:23px 23px 0 0;
}
ai send{
border-radius:0 0 23px 23px;
}
ai st{
grid-template-columns:1fr;
}
ai g{
padding-right:10px;
padding-left:13px;
}
}
@media(max-width:390px){
ai{
border-right-width:0;
border-left-width:0;
border-radius:0;
}
ai hd{
font-size:11px;
}
ai hd b{
font-size:11px;
}
ai article{
padding-right:12px;
padding-left:12px;
}
ai article q i{
min-width:25px;
height:25px;
margin-right:4px;
padding:0 6px;
font-size:10px;
}
ai chat{
padding-right:4px;
padding-left:4px;
}
ai ph{
min-height:480px;
padding:6px;
border-radius:28px;
}
ai ph::before{
top:11px;
width:82px;
height:18px;
}
ai ch{
min-height:53px;
}
ai msgs{
padding-right:7px;
padding-left:7px;
}
ai m u{
max-width:81%;
font-size:11px;
}
ai details>summary{
padding-left:13px;
font-size:12px;
}
ai d{
font-size:11px;
}
}
@media(prefers-reduced-motion:reduce){
ai::after{
animation:none;
display:none;
}
ai hd b::before,
ai details>summary::before,
ai g[risk="4"],
ai m{
animation:none;
opacity:1;
}
ai article q:hover i,
ai m:hover u,
ai g[t="可选行动"] d:hover{
transform:none;
}
}

/* 变量定义：继承暗色档案终端、熔红警戒与冷青数据流色调 */
:root {
  --archive-bg: #080b0f; /* 深渊黑 */
  --archive-bg-secondary: #10161c; /* 冷调黑蓝 */
  --archive-surface: rgba(17, 23, 29, 0.92); /* 半透明终端表面 */
  --archive-surface-secondary: rgba(27, 36, 43, 0.78); /* 输入区域表面 */
  --archive-solid: #151c22; /* 实体面板色 */

  --archive-text: #edf2f4; /* 高亮文字 */
  --archive-muted: #a1adb4; /* 次级文字 */
  --archive-dim: #6f7b82; /* 弱化文字 */

  --archive-line: rgba(205, 225, 232, 0.14); /* 基础边框 */
  --archive-line-bright: rgba(205, 225, 232, 0.28); /* 激活边框 */

  --archive-red: #ed5b43; /* 熔红主色 */
  --archive-red-dark: #9f2f23; /* 熔红暗部 */
  --archive-red-soft: rgba(237, 91, 67, 0.14); /* 熔红光晕 */

  --archive-cyan: #76d7dc; /* 冷青数据流 */
  --archive-green: #55d49d; /* 在线状态 */
  --archive-yellow: #e2b85d; /* 警告状态 */
  --archive-danger: #ef6464; /* 危险状态 */

  --archive-shadow:
    0 18px 52px rgba(0, 0, 0, 0.38),
    0 3px 12px rgba(0, 0, 0, 0.22);
}

/* 按钮与输入框共有基础样式 */
.btn,
button,
input,
textarea,
.input-field {
  position: relative;
  border: 1px solid var(--archive-line);
  border-radius: 12px;
  padding: 12px 20px;
  overflow: hidden;
  outline: none;

  background:
    radial-gradient(
      circle at 82% -20%,
      rgba(237, 91, 67, 0.13),
      transparent 48%
    ),
    linear-gradient(
      145deg,
      rgba(31, 41, 48, 0.98),
      rgba(17, 23, 29, 0.96) 52%,
      rgba(8, 11, 15, 0.98)
    );

  color: var(--archive-text);
  caret-color: var(--archive-red);

  font-family:
    Inter,
    "Segoe UI",
    "PingFang SC",
    "Microsoft YaHei",
    sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.55;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28),
    0 5px 15px rgba(0, 0, 0, 0.2);

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  transition:
    color 0.25s ease,
    border-color 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;

  -webkit-tap-highlight-color: transparent;
}

/* 悬停/聚焦状态：熔红警戒点亮，冷青数据流外溢 */
.btn:hover,
button:hover,
input:hover,
textarea:hover,
.input-field:hover,
input:focus,
textarea:focus,
.input-field:focus,
input:focus-visible,
textarea:focus-visible,
.input-field:focus-visible {
  border-color: rgba(118, 215, 220, 0.42);

  background:
    radial-gradient(
      circle at 78% 0%,
      rgba(237, 91, 67, 0.18),
      transparent 45%
    ),
    linear-gradient(
      145deg,
      rgba(31, 43, 50, 0.98),
      rgba(19, 28, 34, 0.98) 52%,
      rgba(10, 15, 19, 0.98)
    );

  color: #ffffff;

  box-shadow:
    inset 2px 0 0 var(--archive-red),
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 0 0 3px rgba(118, 215, 220, 0.07),
    0 0 20px rgba(118, 215, 220, 0.1),
    0 10px 25px rgba(0, 0, 0, 0.32);

  transform: translateY(-1px);
}

/* 按钮悬停状态：强化熔红响应 */
.btn:hover,
button:hover {
  border-color: rgba(255, 125, 100, 0.46);

  background:
    radial-gradient(
      circle at 35% 15%,
      rgba(255, 255, 255, 0.11),
      transparent 35%
    ),
    linear-gradient(
      145deg,
      var(--archive-red),
      var(--archive-red-dark)
    );

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 0 3px rgba(237, 91, 67, 0.1),
    0 0 20px rgba(237, 91, 67, 0.18),
    0 10px 25px rgba(0, 0, 0, 0.34);

  transform: translateY(-2px);
}

/* 扫光特效定义 */
.btn::before,
button::before,
.input-field::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: -125%;
  width: 48%;
  height: 100%;
  pointer-events: none;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(237, 242, 244, 0.12),
    rgba(118, 215, 220, 0.1),
    transparent
  );

  transform: skewX(-16deg);
  transition: left 0.65s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* 触发扫光效果 */
.btn:hover::before,
button:hover::before,
.input-field:hover::before,
.input-field:focus-within::before {
  left: 135%;
}

/* 确保按钮内容位于扫光层上方 */
.btn > *,
button > * {
  position: relative;
  z-index: 2;
}

/* 点击特效：熔红沉降与终端按压反馈 */
.btn:active,
button:active,
input:active,
textarea:active,
.input-field:active {
  border-color: rgba(237, 91, 67, 0.5);

  background:
    linear-gradient(
      145deg,
      rgba(159, 47, 35, 0.96),
      rgba(74, 25, 21, 0.98)
    );

  color: #ffffff;

  box-shadow:
    inset 0 4px 10px rgba(0, 0, 0, 0.46),
    inset 0 0 18px rgba(237, 91, 67, 0.09),
    0 2px 6px rgba(0, 0, 0, 0.22);

  transform: translateY(1px) scale(0.99);
}

/* 输入框特有优化 */
input,
textarea,
.input-field {
  cursor: text;

  background:
    linear-gradient(
      145deg,
      rgba(27, 36, 43, 0.86),
      rgba(13, 18, 22, 0.96)
    );

  color: var(--archive-text);
}

/* 输入框聚焦时保持冷青边框与熔红侧光 */
input:focus,
textarea:focus,
.input-field:focus,
.input-field:focus-within {
  border-color: rgba(118, 215, 220, 0.44);

  background:
    linear-gradient(
      90deg,
      rgba(237, 91, 67, 0.065),
      transparent 24%
    ),
    linear-gradient(
      145deg,
      rgba(27, 38, 45, 0.98),
      rgba(12, 17, 21, 0.98)
    );

  box-shadow:
    inset 2px 0 0 var(--archive-red),
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0 0 3px rgba(118, 215, 220, 0.07),
    0 0 18px rgba(118, 215, 220, 0.08),
    0 8px 22px rgba(0, 0, 0, 0.28);

  transform: translateY(-1px);
}

/* 占位符颜色调整 */
::placeholder {
  color: var(--archive-dim);
  opacity: 0.78;
  transition:
    color 0.2s ease,
    opacity 0.2s ease;
}

input:focus::placeholder,
textarea:focus::placeholder,
.input-field:focus::placeholder {
  color: var(--archive-muted);
  opacity: 0.48;
}

/* 文本选择颜色 */
input::selection,
textarea::selection,
.input-field::selection,
.output-field::selection,
.output-box::selection {
  color: #ffffff;
  background: var(--archive-red);
}

/* --- 差异化处理：按钮 --- */
.btn,
button {
  overflow: hidden;
  cursor: pointer;
  isolation: isolate;

  border-color: rgba(255, 128, 102, 0.3);

  background:
    radial-gradient(
      circle at 35% 25%,
      rgba(255, 255, 255, 0.12),
      transparent 36%
    ),
    linear-gradient(
      145deg,
      var(--archive-red),
      var(--archive-red-dark)
    );

  color: #ffffff;
  letter-spacing: 0.025em;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 5px 15px rgba(237, 91, 67, 0.18),
    0 8px 20px rgba(0, 0, 0, 0.2);
}

/* 按钮聚焦可见状态 */
.btn:focus-visible,
button:focus-visible {
  border-color: rgba(118, 215, 220, 0.72);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 0 3px rgba(118, 215, 220, 0.14),
    0 0 22px rgba(118, 215, 220, 0.17),
    0 7px 20px rgba(0, 0, 0, 0.3);
}

/* 禁用状态 */
.btn:disabled,
button:disabled,
input:disabled,
textarea:disabled,
.input-field:disabled,
.input-field[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.48;
  filter: saturate(0.45);

  border-color: var(--archive-line);

  background:
    linear-gradient(
      145deg,
      rgba(27, 36, 43, 0.72),
      rgba(13, 18, 22, 0.82)
    );

  color: var(--archive-dim);
  box-shadow: none;
  transform: none;
}

/* --- 差异化处理：输入 / 输出 / 编辑框 --- */
input,
textarea,
.input-field,
.output-field,
.output-box {
  overflow-y: auto;
  overflow-x: hidden;
  cursor: text;

  border: 1px solid var(--archive-line);
  border-radius: 12px;

  background:
    radial-gradient(
      circle at 100% 0,
      rgba(159, 47, 35, 0.09),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      rgba(27, 36, 43, 0.88),
      rgba(11, 15, 19, 0.98)
    );

  color: var(--archive-text);

  scrollbar-width: thin;
  scrollbar-color: rgba(237, 91, 67, 0.34) transparent;
}

/* 只读输出区域 */
.output-field,
.output-box {
  padding: 14px 16px;

  box-shadow:
    inset 2px 0 0 rgba(118, 215, 220, 0.68),
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 5px 15px rgba(0, 0, 0, 0.18);
}

/* 输出区域悬停 */
.output-field:hover,
.output-box:hover {
  border-color: var(--archive-line-bright);

  background:
    radial-gradient(
      circle at 100% 0,
      rgba(237, 91, 67, 0.11),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      rgba(29, 40, 47, 0.94),
      rgba(12, 17, 21, 0.98)
    );

  box-shadow:
    inset 2px 0 0 var(--archive-cyan),
    0 0 18px rgba(118, 215, 220, 0.06),
    0 8px 22px rgba(0, 0, 0, 0.22);
}

/* 自动填充状态适配暗色终端 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--archive-text);
  caret-color: var(--archive-red);
  border-color: rgba(118, 215, 220, 0.4);
  box-shadow:
    inset 0 0 0 1000px #151d23,
    inset 2px 0 0 var(--archive-red),
    0 0 0 3px rgba(118, 215, 220, 0.06);
  transition: background-color 9999s ease-out;
}

/* 滚动条样式：熔红轨迹与暗色终端 */
textarea::-webkit-scrollbar,
.input-field::-webkit-scrollbar,
.output-field::-webkit-scrollbar,
.output-box::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

textarea::-webkit-scrollbar-track,
.input-field::-webkit-scrollbar-track,
.output-field::-webkit-scrollbar-track,
.output-box::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(8, 11, 15, 0.45);
}

textarea::-webkit-scrollbar-thumb,
.input-field::-webkit-scrollbar-thumb,
.output-field::-webkit-scrollbar-thumb,
.output-box::-webkit-scrollbar-thumb {
  border: 1px solid rgba(255, 255, 255, 0.035);
  border-radius: 999px;

  background:
    linear-gradient(
      180deg,
      rgba(237, 91, 67, 0.58),
      rgba(159, 47, 35, 0.62)
    );

  box-shadow: 0 0 7px rgba(237, 91, 67, 0.18);
}

textarea::-webkit-scrollbar-thumb:hover,
.input-field::-webkit-scrollbar-thumb:hover,
.output-field::-webkit-scrollbar-thumb:hover,
.output-box::-webkit-scrollbar-thumb:hover {
  background:
    linear-gradient(
      180deg,
      var(--archive-red),
      var(--archive-red-dark)
    );

  box-shadow: 0 0 9px rgba(237, 91, 67, 0.32);
}

/* 减少动态效果偏好 */
@media (prefers-reduced-motion: reduce) {
  .btn,
  button,
  input,
  textarea,
  .input-field,
  .output-field,
  .output-box,
  .btn::before,
  button::before,
  .input-field::before {
    transition: none;
  }

  .btn:hover,
  button:hover,
  input:hover,
  textarea:hover,
  .input-field:hover,
  input:focus,
  textarea:focus,
  .input-field:focus,
  .btn:active,
  button:active {
    transform: none;
  }

  .btn::before,
  button::before,
  .input-field::before {
    display: none;
  }
}