@import url('../assets/vendor-fonts/fonts.css');
/* mode-shell.css — shared four-mode top bar + moments. Snake-room palette (keeper.css / keeper-v4.css):
   canvas #07121c · surface #0c1b2a · inset #122538 · raised #1a3148 · teal #03ffcc · violet #9b7bff.
   Bar height: 48px desktop, 44px ≤600px. */
.ms-shell{--ms-canvas:#07121c;--ms-surface:#0c1b2a;--ms-inset:#122538;--ms-raised:#1a3148;--ms-text:#eef4f8;--ms-sec:#93a6ba;--ms-teal:#03ffcc;--ms-violet:#9b7bff;
 position:relative;z-index:30;box-sizing:border-box;height:48px;min-height:48px;max-height:48px;padding:0 18px;display:flex;align-items:center;gap:14px;
 background:var(--ms-surface);color:var(--ms-text);font:600 12px/1 Inter,Arial,sans-serif;box-shadow:inset 0 -1px 0 #ffffff0d;min-width:0}
.ms-shell *{box-sizing:border-box}
.ms-shell .ms-mark{display:block;line-height:0;border-radius:6px;flex:none}
.ms-shell .ms-mark img{width:92px;height:auto;display:block}
.ms-shell .ms-switch{position:relative;min-width:0;flex:0 1 auto;display:flex;align-items:center}
.ms-shell .ms-switch-btn{display:none}
.ms-shell .ms-pills{display:flex;gap:4px;align-items:center;min-width:0;overflow-x:auto;scrollbar-width:none;padding:2px;border-radius:10px;background:var(--ms-canvas)}
.ms-shell .ms-pills::-webkit-scrollbar{display:none}
.ms-shell .ms-pill{flex:none;padding:8px 12px;border-radius:8px;color:var(--ms-sec);text-decoration:none;white-space:nowrap;font:700 12px/1 Inter,Arial,sans-serif;letter-spacing:.1px;transition:color .15s,background .15s}
.ms-shell .ms-pill:hover{color:var(--ms-text);background:var(--ms-inset)}
.ms-shell .ms-pill.is-on{color:var(--ms-teal);background:var(--ms-inset);box-shadow:inset 0 0 0 1px #03ffcc33,0 0 18px -6px #9b7bff88}
.ms-shell .ms-right{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none;min-width:0}
.ms-shell .ms-chip{display:inline-flex;align-items:center;height:28px;padding:0 10px;border-radius:999px;background:var(--ms-inset);color:var(--ms-sec);white-space:nowrap;font:700 11px/1 Inter,Arial,sans-serif}
.ms-shell .ms-chip.is-ok{color:var(--ms-teal);box-shadow:inset 0 0 0 1px #03ffcc2e}
.ms-shell .ms-chip b{font-weight:700}.ms-shell .ms-chip-short{display:none}
.ms-shell .ms-icon,.ms-shell .sd-icon-button,.ms-shell.kd-topbar .sd-icon-button{width:32px;height:32px;display:grid;place-items:center;border:0;padding:0;border-radius:8px;background:var(--ms-inset);color:#cfd8e6;cursor:pointer;flex:none;font:800 13px/1 Inter,Arial,sans-serif}
.ms-shell .ms-icon:hover,.ms-shell .sd-icon-button:hover,.ms-shell .sd-icon-button[aria-expanded="true"]{background:var(--ms-raised);color:#fff}
.ms-shell .ms-icon[aria-checked="true"]{color:var(--ms-teal)}
.ms-shell a:focus-visible,.ms-shell button:focus-visible{outline:2px solid var(--ms-teal);outline-offset:2px}
.ms-shell .ms-gold{font:650 12px/1.1 Inter,Arial,sans-serif;color:#ecd58b;white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
.ms-shell .ms-gold small{display:block;font-size:9px;font-weight:400;color:var(--ms-sec);margin-top:1px}
/* keeper: the shell replaces the 64px .kd-topbar (classes kept for tests/QA hooks) */
.ms-shell.kd-topbar{min-height:48px;padding:0 18px;gap:14px}
.ms-shell.kd-topbar .sd-settings{margin-left:0}
@media (min-width:601px){.kd-app .ms-shell~.sd-main .sd-draft.v4,.kd-app:has(> .ms-shell) .sd-draft.v4{height:calc(100vh - 48px);height:calc(100dvh - 48px)}}
@media (max-width:1100px){.ms-shell .ms-gold{display:none}}
@media (max-width:900px){.ms-shell .ms-chip-full{display:none}.ms-shell .ms-chip-short{display:inline}}
@media (max-width:600px){
 .ms-shell,.ms-shell.kd-topbar{height:44px;min-height:44px;max-height:44px;padding:0 10px;gap:8px;flex-wrap:nowrap}
 .ms-shell .ms-mark img{width:70px}
 .ms-shell .ms-switch{flex:1 1 auto;min-width:0}
 .ms-shell .ms-switch-btn{display:inline-flex;align-items:center;gap:6px;max-width:100%;height:32px;padding:0 10px;border:0;border-radius:8px;background:var(--ms-inset);color:var(--ms-teal);font:800 12px/1 Inter,Arial,sans-serif;white-space:nowrap;cursor:pointer;min-width:0}
 .ms-shell .ms-switch-btn span{overflow:hidden;text-overflow:ellipsis}
 .ms-shell .ms-switch-btn i{font-style:normal;color:var(--ms-sec);font-size:10px}
 .ms-shell .ms-pills{display:none;position:absolute;top:calc(100% + 8px);left:-48px;width:min(260px,calc(100vw - 20px));flex-direction:column;align-items:stretch;gap:2px;padding:6px;border-radius:12px;background:var(--ms-raised);box-shadow:0 18px 44px #000c;overflow:visible}
 .ms-shell .ms-switch.is-open .ms-pills{display:flex}
 .ms-shell .ms-pill{padding:12px;font-size:13px}
 .ms-shell .ms-right{gap:6px}
 .ms-shell .ms-chip{height:28px;padding:0 8px;font-size:10px}
 .ms-shell .ms-icon,.ms-shell .sd-icon-button,.ms-shell.kd-topbar .sd-icon-button{width:30px;height:30px}
}
@media (max-width:360px){.ms-shell .ms-mark img{width:56px}.ms-shell .ms-chip{display:none}}

/* ---- moments ---- */
.ms-toasts{position:fixed;z-index:200;top:58px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:min(440px,calc(100vw - 24px))}
.ms-toast{padding:10px 14px;border-radius:12px;background:#0b1a26f2;color:#eef4f8;box-shadow:0 18px 50px #000b,inset 0 0 0 1px #ffffff14;font:800 13px/1.3 Inter,Arial,sans-serif;text-align:center;max-width:100%}
.ms-toast.is-good{color:#9ffde6;box-shadow:0 18px 50px #000b,inset 0 0 0 1px #03ffcc66}
.ms-toast.is-warn{color:#ffd39a;background:#160f06f2;box-shadow:0 18px 50px #000b,inset 0 0 0 1px #f5a52488}
.ms-toast.is-bad{color:#ffb3bf;background:#1a0a10f2;box-shadow:0 18px 50px #000b,inset 0 0 0 1px #f5647a88}
.ms-toast.is-info{box-shadow:0 18px 50px #000b,inset 0 0 0 1px #9b7bff66}
.ms-fly{position:fixed;left:0;top:0;z-index:180;pointer-events:none;will-change:transform,opacity;padding:14px 18px;border-radius:16px;background:linear-gradient(160deg,#1a3148,#0c1b2a);color:#fff;box-shadow:0 24px 60px #000c,inset 0 0 0 1px #03ffcc55;font:900 16px/1.2 Inter,Arial,sans-serif;max-width:min(320px,calc(100vw - 24px))}
.ms-fly.is-warn{box-shadow:0 24px 60px #000c,inset 0 0 0 1px #f5a524aa}
.ms-fly.is-bad{box-shadow:0 24px 60px #000c,inset 0 0 0 1px #f5647aaa}
.ms-card{perspective:800px;backface-visibility:hidden}
.ms-flash-up{color:#03ffcc!important}.ms-flash-down{color:#f5647a!important}
@media (prefers-reduced-motion:reduce){.ms-shell .ms-pill{transition:none}}
@media (max-width:600px){.ms-toasts{top:52px}}