:root { --ui-accent:#2563eb; --ui-ink:#17243b; --ui-subtle:#64748b; --ui-border:#e1e8f2; --ui-bg:#f4f7fb; }
html { scroll-behavior:smooth; }
body { background:var(--ui-bg); color:var(--ui-ink); font-family:Inter, "Segoe UI", "Microsoft YaHei", sans-serif; line-height:1.55; }
.container { background:#fff; border:1px solid var(--ui-border); border-radius:18px; box-shadow:0 12px 40px rgba(20,45,90,.055); padding:24px 28px; margin:24px auto; max-width:calc(100% - 36px); }
h2 { font-size:clamp(1.45rem,2.2vw,1.9rem); font-weight:750; letter-spacing:-.03em; color:var(--ui-ink); margin:4px 0 7px; }
h6 { color:var(--ui-subtle); font-size:.94rem; font-weight:400; margin-bottom:18px; }
hr { border-color:var(--ui-border); opacity:1; margin:18px 0 24px; }
table { border-collapse:separate; border-spacing:0; width:100%; margin:12px 0 0; font-size:.88rem; }
table th, table td { border-color:var(--ui-border); padding:11px 10px; vertical-align:middle; }
table th { background:#f6f8fc; color:#43536d; font-weight:650; white-space:nowrap; }
table tbody tr:hover td { background-color:#fafcff; }
.form-control,.form-select { min-height:36px; border:1px solid #d9e2ee; border-radius:8px; background-color:#fff; font-size:.9rem; }
.form-control:focus,.form-select:focus { border-color:#6698f5; box-shadow:0 0 0 3px rgba(37,99,235,.12); }
.input-group-text { border-color:#d9e2ee; background:#f4f7fc; color:#59708d; border-radius:8px; }
.btn { border-radius:9px; font-weight:600; transition:transform .15s ease,box-shadow .15s ease; }
.btn:hover { transform:translateY(-1px); }
.btn-primary { background:#2563eb; border-color:#2563eb; }
.btn-primary:hover { background:#1e4fc5; border-color:#1e4fc5; }
.btn-secondary { background:#e9eff9; border-color:#e9eff9; color:#344563; }
.btn-secondary:hover { background:#dde6f6; border-color:#dde6f6; color:#20314f; }
.btn-danger { background:#fff1f2; border-color:#ffe4e6; color:#c0293a; }
.btn-danger:hover { background:#ffe4e6; border-color:#fecdd3; color:#a01e30; }
.result-info-div { margin-top:32px; }
.my-span { color:#8190a6; font-weight:400; }
.toast { border:1px solid var(--ui-border); border-radius:14px; box-shadow:0 18px 35px rgba(26,42,70,.16); overflow:hidden; min-width:280px; }
.toast-header { background:#f6f8fc; padding:12px 15px; }
.history-item { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 9px; border-top:1px solid #edf1f7; }
.history-item:hover { background:#f8faff; }
.history-load { flex:1; border:0; background:transparent; color:#344963; text-align:left; cursor:pointer; padding:8px; font-size:.85rem; overflow-wrap:anywhere; }
.history-load:hover { color:var(--ui-accent); }
.history-delete { background:transparent; border:0; border-radius:6px; padding:6px 9px; color:#a13f4c; cursor:pointer; font-size:.8rem; }
.history-delete:hover { background:#ffebed; }
.history-empty { color:var(--ui-subtle); margin:14px; font-size:.9rem; }
.float-button-home,.float-button-history { box-shadow:0 5px 20px rgba(29,55,91,.14); }
footer { color:#8894a8; font-size:.8rem; }
@media(max-width:768px) { .container { padding:18px 12px; margin:12px auto; max-width:calc(100% - 16px); border-radius:12px; } .container > table, .container > div:has(> table) { overflow-x:auto; } table { font-size:.82rem; } table th,table td { padding:8px 6px; } .d-flex.justify-content-between { flex-wrap:wrap; gap:12px; } }