#appWrap{
--bg:#1b1f25;
--surface:#22262d;
--panel:#20242a;
--field:#191d23;
--ink:#a6b0bd;
--ink-bright:#c4cdd9;
--ink-muted:#6b7480;
--border:#2a2f38;
--border-strong:#333944;
--accent:#4f8ad0;
--accent-soft:#7aabe6;
--card-bg:var(--surface);
--accent-hover:#5f97d8;
--radius:12px; --radius-sm:8px;
--shadow:none;
--shadow-md:0 1px 3px rgba(0,0,0,0.2);
background:var(--bg);
color:var(--ink);
min-height:100vh;
}
#appWrap, #appWrap .calc-container{ color:var(--ink); }
#appWrap .header-fixed{
padding:12px 22px;
background:rgba(27,31,37,0.92);
-webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
border-bottom:1px solid var(--border);
box-shadow:none;
margin-bottom:16px;
}
#appWrap .header-fixed h2{ font-size:18px; letter-spacing:-0.02em; font-weight:700; color:var(--ink-bright); }
#appWrap .header-fixed .hint{ font-size:11px; color:var(--ink-muted); margin-top:3px; }
.to-main-btn{
padding:6px 13px; border:1px solid var(--border-strong); background:var(--surface); border-radius:8px;
font-size:13px; font-weight:600; color:var(--ink); cursor:pointer; margin-right:12px;
transition:border-color .15s,color .15s;
}
.to-main-btn:hover{ border-color:var(--accent); color:var(--accent-soft); }
#appWrap .calc-container.active:not(.submit-scope){ padding:0 22px 44px; }
#appWrap .calc-layout{ gap:14px; }
#appWrap fieldset{
background:var(--surface);
border:1px solid var(--border);
border-radius:12px;
padding:14px 16px;
margin-bottom:12px;
box-shadow:none;
}
#appWrap legend{ font-size:13px; font-weight:700; color:var(--ink-bright); padding:0 4px; margin-bottom:2px; }
#appWrap .row{ margin-bottom:6px; gap:6px; }
#appWrap h2, #appWrap h3, #appWrap strong, #appWrap b{ color:var(--ink-bright); }
#appWrap .hint, #appWrap .small{ color:var(--ink-muted); }
#appWrap .calc-container:not(.submit-scope) input[type="number"],
#appWrap .calc-container:not(.submit-scope) input[type="text"],
#appWrap .calc-container:not(.submit-scope) input[type="password"],
#appWrap .calc-container:not(.submit-scope) select,
#appWrap .calc-container:not(.submit-scope) textarea{
height:32px; border-radius:8px;
background:var(--field); color:var(--ink-bright); border:1px solid var(--border-strong);
}
#appWrap .calc-container:not(.submit-scope) textarea{ height:auto; }
#appWrap select option{ background:#191d23; color:var(--ink-bright); }
#appWrap .btn{
background:var(--surface); color:var(--ink); border:1px solid var(--border-strong); border-radius:8px;
}
#appWrap .btn:hover{ background:#2a3039; border-color:#3d444f; }
#appWrap .btn.primary{ background:var(--accent); border-color:var(--accent); color:#fff; }
#appWrap .btn.primary:hover{ background:var(--accent-hover); border-color:var(--accent-hover); }
#appWrap .tab-btn{ color:var(--ink-muted); }
#appWrap .tab-btn:hover{ background:var(--panel); color:var(--accent-soft); }
#appWrap .acc-list{ background:var(--panel); border:1px solid var(--border); border-radius:10px; }
#appWrap div.result{ background:var(--panel); border:1px solid var(--border); color:var(--ink); border-radius:10px; }
#appWrap .dragon-tab{ background:var(--panel); color:var(--ink); border:1px solid var(--border-strong); border-radius:8px 8px 0 0; }
#appWrap .dragon-tab.active{ background:var(--accent); color:#fff; border-color:var(--accent); }
#appWrap .dragon-tabs{ border-bottom-color:var(--border-strong); }
body[data-route="submit"], body[data-route="submit"] #appWrap{ background:#191d23; }
body[data-route="submit"] #appWrap .header-fixed{
background:rgba(25,29,35,0.92);
border-bottom:1px solid #2a2f38;
}
#appWrap input[type="radio"], #appWrap input[type="checkbox"]{
-webkit-appearance:none; appearance:none;
width:15px; height:15px; margin:0; flex:none; cursor:pointer;
background:#191d23; border:1px solid #3a424d; position:relative;
transition:background .12s, border-color .12s;
}
#appWrap input[type="radio"]{ border-radius:50%; }
#appWrap input[type="checkbox"]{ border-radius:4px; }
#appWrap input[type="radio"]:hover, #appWrap input[type="checkbox"]:hover{ border-color:#4f8ad0; }
#appWrap input[type="radio"]:checked, #appWrap input[type="checkbox"]:checked{
background:#4f8ad0; border-color:#4f8ad0;
}
#appWrap input[type="radio"]:checked::after{
content:''; position:absolute; inset:4px; border-radius:50%; background:#fff;
}
#appWrap input[type="checkbox"]:checked::after{
content:''; position:absolute; left:4px; top:1px; width:4px; height:8px;
border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);
}
#appWrap input[type="radio"]:focus-visible, #appWrap input[type="checkbox"]:focus-visible{
outline:2px solid rgba(79,138,208,0.5); outline-offset:1px;
}