/* =========================
   🌌 基础背景：保留赛博氛围但不乱
========================= */
body{
    font-family:"Segoe UI","Microsoft YaHei",sans-serif;
    min-height:100vh;
    padding:60px 20px;
    color:#e5e7eb;

    background:
        radial-gradient(circle at 20% 30%, rgba(0,229,255,.12), transparent 45%),
        radial-gradient(circle at 80% 20%, rgba(168,85,247,.12), transparent 40%),
        #050816;

    overflow-x:hidden;
}

/* 轻扫描线（保留科技感，不刺眼） */
body::before{
    content:"";
    position:fixed;
    inset:0;
    background: repeating-linear-gradient(
        to bottom,
        rgba(255,255,255,.03),
        rgba(255,255,255,.03) 1px,
        transparent 3px,
        transparent 6px
    );
    pointer-events:none;
    mix-blend-mode:overlay;
    opacity:.4;
}

/* =========================
   🧊 容器：清爽 + 霓虹边缘
========================= */
.container{
    max-width:900px;
    margin:auto;

    padding:42px;
    border-radius:18px;

    background:rgba(17,24,39,.55);
    backdrop-filter:blur(18px);

    position:relative;

    border:1px solid rgba(0,229,255,.18);

    box-shadow:
        0 0 25px rgba(0,229,255,.08),
        0 0 60px rgba(168,85,247,.06);
}

/* 霓虹外框（关键赛博感回归点） */
.container::before{
    content:"";
    position:absolute;
    inset:-1px;
    border-radius:18px;
    background:linear-gradient(45deg,#00e5ff,#a855f7,#00ffcc,#00e5ff);
    z-index:-1;
    filter:blur(14px);
    opacity:.25;
}

/* =========================
   ⚡ 标题：轻 glitch + 霓虹渐变
========================= */
h1{
    text-align:center;
    font-size:34px;
    margin-bottom:38px;
    font-weight:800;

    background:linear-gradient(90deg,#00e5ff,#a855f7,#00ffcc);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    letter-spacing:1px;

    position:relative;
}

/* 轻微故障感（不夸张） */
h1::after{
    content:attr(data-text);
    position:absolute;
    left:0;
    top:0;
    width:100%;

    color:#00e5ff;
    opacity:.15;

    transform:translateX(1px);
    animation:glitchSoft 3s infinite;
}

/* =========================
   📦 表单间距：清爽核心
========================= */
.form-group{
    margin-bottom:24px;
}

.form-group label{
    display:block;
    margin-bottom:10px;
    font-size:14px;
    color:#cbd5e1;
    letter-spacing:.4px;
}

/* =========================
   🎛 输入框：科技玻璃 + 轻霓虹
========================= */
select,
textarea{
    width:100%;
    padding:14px 16px;

    background:rgba(15,23,42,.75);

    border:1px solid rgba(148,163,184,.18);
    border-radius:12px;

    color:#fff;
    font-size:14px;

    transition:.25s ease;

    box-shadow:inset 0 0 10px rgba(0,0,0,.45);
}

/* 霓虹 focus */
select:focus,
textarea:focus{
    outline:none;

    border-color:#00e5ff;

    box-shadow:
        0 0 0 2px rgba(0,229,255,.12),
        0 0 18px rgba(0,229,255,.25),
        0 0 30px rgba(168,85,247,.12);
}

/* textarea 更“终端感” */
textarea{
    line-height:1.6;
    resize:vertical;
    min-height:120px;
}

/* =========================
   ☑ checkbox：科技卡片
========================= */
.checkbox-group{
    padding:14px 16px;

    background:rgba(15,23,42,.55);

    border:1px solid rgba(148,163,184,.15);
    border-radius:12px;

    display:flex;
    align-items:center;
}

.checkbox-group label{
    display:flex;
    align-items:center;
    gap:10px;
    margin:0;
}

/* =========================
   🔘 按钮：核心能量条（赛博重点）
========================= */
#convertBtn{
    width:100%;
    padding:16px;

    border:none;
    border-radius:14px;

    font-size:16px;
    font-weight:700;

    cursor:pointer;

    color:white;

    background:linear-gradient(90deg,#00e5ff,#a855f7,#00ffcc);
    background-size:200% 100%;

    transition:.3s ease;

    position:relative;

    box-shadow:
        0 0 18px rgba(0,229,255,.15);
}

/* 流动能量 */
#convertBtn:hover{
    transform:translateY(-2px);
    background-position:100% 0;
    box-shadow:
        0 0 25px rgba(0,229,255,.25),
        0 0 40px rgba(168,85,247,.15);
}

/* =========================
   📟 输出：绿色终端（保留赛博灵魂）
========================= */
#outputResult{
    background:#020617;
    color:#39ff88;

    border:1px solid rgba(57,255,136,.18);

    font-family:Consolas,monospace;

    min-height:180px;

    box-shadow:
        inset 0 0 12px rgba(0,0,0,.7),
        0 0 18px rgba(57,255,136,.06);
}

/* =========================
   🎞 轻动画（不晃眼）
========================= */
@keyframes glitchSoft{
    0%{transform:translateX(0)}
    50%{transform:translateX(1px)}
    100%{transform:translateX(0)}
}

/* =========================
   📱 mobile
========================= */
@media (max-width:768px){
    .container{
        padding:22px;
    }

    h1{
        font-size:26px;
    }
}