/* Premium interaction layer — intentionally separate so the core token system stays easy to tune. */
:root { --glow-amber: 0 0 0 1px rgba(243,181,98,.14), 0 18px 55px rgba(0,0,0,.22); }
body { background-color:#081019; }
.stat-card, .train-card, .alerts-panel, .sidebar-note { transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease; }
.stat-card:hover { border-color:rgba(243,181,98,.3); transform:translateY(-2px); box-shadow:var(--glow-amber); }
.train-card:hover { border-color:rgba(243,181,98,.34); box-shadow:0 22px 75px rgba(0,0,0,.3); }
.button:disabled { cursor:wait; opacity:.7; transform:none; }
.button-secondary { color:var(--soft); background:rgba(255,255,255,.045); border:1px solid var(--line); }
.button-secondary:hover { color:var(--paper); background:rgba(255,255,255,.09); border-color:#3b5061; }
.modal { width:min(470px,calc(100vw - 30px)); max-width:calc(100vw - 30px); border:0; padding:0; background:transparent; }
.modal[open] { animation:modal-in .24s cubic-bezier(.22,1,.36,1) both; }
.modal-card { width:100%; max-height:calc(100vh - 28px); overflow:auto; scrollbar-width:thin; scrollbar-color:#385064 transparent; background:linear-gradient(145deg,#172d40,#0d1c2b); box-shadow:0 30px 90px rgba(0,0,0,.55), 0 0 0 1px rgba(243,181,98,.06); }
.modal-card:after { content:""; position:absolute; inset:0; pointer-events:none; border-radius:18px; background:linear-gradient(120deg,rgba(255,255,255,.07),transparent 32%); }
.modal-actions { display:flex; align-items:center; gap:10px; margin-top:8px; }
.modal-actions .full { flex:1; width:auto; }
.modal-card input { transition:border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.modal-card input:hover { border-color:#385064; }
.modal-card input:focus { border-color:var(--amber); background:#0b1723; box-shadow:0 0 0 3px rgba(243,181,98,.1); outline:0; }
.modal-close { z-index:2; width:36px; height:36px; border-radius:50%; line-height:1; transition:background .18s ease,color .18s ease,transform .18s ease; }
.modal-close:hover { color:var(--paper); background:rgba(255,255,255,.08); transform:rotate(90deg); }
.button-spinner { display:inline-block; width:12px; height:12px; margin-right:7px; border:2px solid rgba(10,17,27,.28); border-top-color:var(--ink); border-radius:50%; vertical-align:-2px; animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes modal-in { from { opacity:0; transform:translateY(10px) scale(.98); } to { opacity:1; transform:none; } }
@media (max-width:700px) { .modal-card { padding:23px 20px 20px; } .modal-actions { position:sticky; bottom:-20px; padding-top:12px; background:linear-gradient(transparent,#172d40 24%); } }
@media (prefers-reduced-motion:reduce) { .modal[open], .button-spinner { animation:none; } }