body{font-family:'Plus Jakarta Sans',sans-serif;background:#f8fafc;color:#0f172a}
.glass{background:rgba(255,255,255,.98);border:1px solid #e2e8f0;box-shadow:0 4px 6px -1px rgba(0,0,0,.05),0 10px 15px -3px rgba(0,0,0,.05);border-radius:1rem}
.inpt{transition:.2s;border:1px solid #cbd5e1;background:#f8fafc}
.inpt:focus{background:#fff;border-color:#6366f1;box-shadow:0 0 0 4px rgba(99,102,241,.12);outline:none}
.mono{font-variant-numeric:tabular-nums}
.fade-in{animation:fadeIn .45s cubic-bezier(.16,1,.3,1) forwards}
@keyframes fadeIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.pulse{animation:pulseGlow 2s infinite}
@keyframes pulseGlow{0%{box-shadow:0 0 0 0 rgba(16,185,129,.35)}70%{box-shadow:0 0 0 10px rgba(16,185,129,0)}100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}}
.chip{font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;border:1px solid;padding:.25rem .5rem;border-radius:9999px;white-space:nowrap}
.bar{height:10px;border-radius:9999px;background:#e2e8f0;overflow:hidden;margin-top:0.5rem;}
.bar>div{height:100%;border-radius:9999px;background:linear-gradient(90deg,#6366f1,#10b981);transition: width 0.5s ease-out;}
.tipbtn{width:18px;height:18px;border-radius:9999px;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;line-height:1;border:1px solid #cbd5e1;background:#fff;color:#334155;cursor:pointer;user-select:none;margin-left:6px;}
.tipbtn:hover{border-color:#94a3b8;background:#f1f5f9;}
#tip-ui{position:fixed;left:0;top:0;width:320px;background:#0f172a;color:#fff;border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:12px;box-shadow:0 20px 55px rgba(0,0,0,.35);z-index:999999;opacity:0;pointer-events:none;transition:.15s ease;transform:translateY(5px);}
#tip-ui.show{opacity:1;pointer-events:auto;transform:translateY(0);}
#tip-ui .t-title{font-weight:900;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#a5b4fc;margin-bottom:4px}
#tip-ui .t-body{font-size:12px;line-height:1.4;color:#cbd5e1}
#tip-ui .t-muted{margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,0.1);color:#94a3b8;font-size:11px;font-style:italic;}
@keyframes slideDown { from { transform: translate(-50%, -20px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
.toast { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 9999999; background: #0f172a; color: white; padding: 12px 24px; border-radius: 99px; box-shadow: 0 10px 25px rgba(0,0,0,0.2); font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; display: flex; align-items: center; gap: 10px; animation: slideDown 0.3s ease-out forwards; pointer-events: none; }
.toast.hiding { animation: fadeOut 0.3s ease-in forwards; }
@keyframes flashGreen { 0% { background-color: #d1fae5; transform: scale(1.02); } 100% { background-color: white; transform: scale(1); } }
.flash-item { animation: flashGreen 0.8s ease-out; }
@media print{
  body{background:#fff;margin:0}
  #web-ui,#modal,#prefs,#tip-ui,.toast{display:none!important}
  #printable{display:block!important;position:absolute;inset:0;width:100%;height:100%}
  @page{margin:0;size:A4}
}
.simBtnActive{border-color:#6366f1!important; background:#eef2ff!important; box-shadow:0 10px 25px rgba(99,102,241,.12)!important}
.simBtnActive .simTag{color:#4338ca!important}
.simBtnActive .simTitle{color:#0f172a!important}
.simBtnActive .simSub{color:#475569!important}
.simBtnActive .simTick{opacity:1!important; transform:scale(1)!important}
.simTick{opacity:0; transform:scale(.9); transition:all .18s ease}