*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:transparent;font-family:-apple-system,Inter,system-ui,sans-serif;-webkit-tap-highlight-color:transparent;color:#f1f5f9;overscroll-behavior:none}
#app{background:#080d1c;min-height:100%;display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}
input,select,textarea{outline:none;font-family:inherit}
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-thumb{background:#6366f166;border-radius:3px}

#header-search-bar{position:fixed!important;top:56px!important;left:0;right:0}
.page-enter{animation:fadeUp .3s ease both;will-change:transform}
[data-page-rendered="detail"].page-enter{transform:none!important}
.inp{padding:9px 13px;border-radius:10px;background:#ffffff12;border:1px solid rgba(255,255,255,.14);color:#f1f5f9;font-size:13px;width:100%;transition:border-color .15s}
.inp:focus{border-color:#6366f199;background:#ffffff1a}
.inp option{background:#1e2a45;color:#f1f5f9}
select.inp{color:#f1f5f9}
textarea.inp{color:#f1f5f9;resize:vertical}
label.lbl{color:#94a3b8;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;display:block;margin-bottom:5px}
.btn-primary{padding:10px 20px;border-radius:12px;background:linear-gradient(135deg,#6366f1,#8b5cf6);border:none;color:#fff;font-weight:700;font-size:13px;cursor:pointer;transition:all .2s}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 20px #6366f166}
.btn-ghost{padding:10px 20px;border-radius:12px;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);color:#9ca3af;font-size:13px;cursor:pointer;transition:all .2s}
.btn-ghost:hover{background:#ffffff17;color:#d1d5db}
.btn-danger{padding:10px 20px;border-radius:12px;background:#ef44441f;border:1px solid rgba(239,68,68,.28);color:#f87171;font-size:13px;cursor:pointer;transition:all .2s}
#toast{position:fixed;top:18px;left:50%;transform:translateX(-50%) translateY(-12px);z-index:9999;min-width:240px;max-width:min(92vw,440px);padding:13px 18px 13px 16px;border-radius:14px;color:#f8fafc;font-weight:600;font-size:13.5px;letter-spacing:.005em;display:none;align-items:center;gap:12px;background:linear-gradient(180deg,rgba(20,22,40,.92),rgba(14,16,30,.92));border:1px solid rgba(255,255,255,.08);box-shadow:0 18px 50px -12px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.04) inset,0 0 32px var(--toast-glow,rgba(99,102,241,.25));backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);opacity:0;pointer-events:none;transition:opacity .22s ease,transform .28s cubic-bezier(.32,.72,.2,1.05)}
#toast.show{display:flex;opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
#toast::before{content:"";flex:0 0 6px;align-self:stretch;border-radius:99px;background:var(--toast-accent,#818cf8);box-shadow:0 0 14px var(--toast-accent,#818cf8)}
#toast .toast-ico{width:22px;height:22px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;background:color-mix(in oklab,var(--toast-accent,#818cf8) 22%,transparent);color:var(--toast-accent,#818cf8)}
#toast .toast-ico svg{width:14px;height:14px}
#toast .toast-msg{flex:1;min-width:0;line-height:1.35}
#toast.toast-success{--toast-accent:#34d399;--toast-glow:rgba(52,211,153,.28)}
#toast.toast-warn{--toast-accent:#fbbf24;--toast-glow:rgba(251,191,36,.28)}
#toast.toast-error{--toast-accent:#f87171;--toast-glow:rgba(248,113,113,.32)}
#toast.toast-info{--toast-accent:#818cf8;--toast-glow:rgba(129,140,248,.28)}
#sync-badge{position:fixed;top:18px;left:18px;z-index:9998;padding:9px 16px 9px 12px;border-radius:99px;color:#f1f5f9;font-weight:600;font-size:12px;letter-spacing:.015em;display:none;align-items:center;gap:9px;background:linear-gradient(180deg,rgba(20,22,40,.9),rgba(14,16,30,.92));border:1px solid rgba(255,255,255,.08);box-shadow:0 14px 36px -10px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.04) inset,0 0 24px var(--sync-glow,rgba(99,102,241,.3));backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4)}
#sync-badge .sync-dot{width:8px;height:8px;border-radius:50%;background:var(--sync-accent,#818cf8);box-shadow:0 0 10px var(--sync-accent,#818cf8);flex-shrink:0}
#sync-badge.sync-syncing{--sync-accent:#818cf8;--sync-glow:rgba(129,140,248,.32)}
#sync-badge.sync-syncing .sync-dot{animation:syncPulse 1.1s ease-in-out infinite}
#sync-badge.sync-synced{--sync-accent:#34d399;--sync-glow:rgba(52,211,153,.3)}
#sync-badge.sync-pending{--sync-accent:#fbbf24;--sync-glow:rgba(251,191,36,.3)}
#sync-badge.sync-pending .sync-dot{animation:syncPulse 1.4s ease-in-out infinite}
#sync-badge.sync-error{--sync-accent:#f87171;--sync-glow:rgba(248,113,113,.34)}
@keyframes syncPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.55);opacity:.55}}
@media (max-width:768px){#toast{top:max(14px,env(safe-area-inset-top,0px));font-size:13px;min-width:auto;max-width:calc(100vw - 24px);padding:11px 14px 11px 12px;border-radius:13px}#sync-badge{top:max(14px,env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%)}}
.profile-badge{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;background:#6366f11a;border:1px solid rgba(99,102,241,.2);margin:0;cursor:default}
.profile-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#8b5cf6);display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-size:13px;flex-shrink:0}
:root{--mml-bg:#080d1c;--mml-bg-soft:#0c1226;--mml-surface:#111827;--mml-surface-2:#1a1f35;--mml-border:rgba(255,255,255,.08);--mml-border-strong:rgba(140,130,255,.22);--mml-text:#f1f5f9;--mml-text-dim:#9ca3af;--mml-text-mute:#6b7280;--mml-accent:#818cf8;--mml-accent-2:#a78bfa;--mml-accent-3:#c4b5fd;--mml-grad-primary:linear-gradient(135deg,#6366f1 0%,#7c3aed 55%,#8b5cf6 100%);--mml-grad-soft:linear-gradient(135deg,rgba(99,102,241,.18),rgba(139,92,246,.1));--mml-shadow-sm:0 2px 8px rgba(0,0,0,.25);--mml-shadow-md:0 10px 28px rgba(0,0,0,.45);--mml-shadow-lg:0 22px 60px rgba(0,0,0,.6),0 0 0 1px rgba(99,102,241,.18);--mml-shadow-accent:0 10px 32px rgba(99,102,241,.45);--mml-radius-sm:10px;--mml-radius:14px;--mml-radius-lg:20px;--mml-ease:cubic-bezier(.4,0,.2,1)}
html,body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"cv11","ss01","ss03";letter-spacing:-.005em}
:where(button,a,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--mml-accent);outline-offset:2px;border-radius:8px}
.inp:focus-visible{outline:none;border-color:#818cf8b3;box-shadow:0 0 0 3px #818cf838}
.btn-primary{background:var(--mml-grad-primary);box-shadow:var(--mml-shadow-accent),inset 0 1px #ffffff2e;letter-spacing:.01em}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 14px 36px #6366f18c,inset 0 1px #ffffff38}
.btn-primary:active{transform:translateY(0);filter:brightness(.96)}
.btn-ghost:active,.btn-danger:active{transform:translateY(0);filter:brightness(.95)}
.inp{transition:border-color .15s,box-shadow .15s,background .15s}
::selection{background:#818cf859;color:#fff}
.panel-title{color:#fff;font-weight:700;font-size:14px;display:flex;align-items:center;gap:8px;margin-bottom:14px}
.panel-ico{width:18px;height:18px;display:inline-flex}
.panel-ico>*{width:18px;height:18px}
.lp-v{color:#fff;font-weight:800;font-size:20px;line-height:1;font-variant-numeric:tabular-nums}
.lp-l{color:#64748b;font-size:10px;text-transform:uppercase;letter-spacing:.1em;font-weight:600}
#desktop-nav-links{gap:2px!important;margin-left:28px!important;padding:4px;background:#ffffff06;border:1px solid rgba(255,255,255,.05);border-radius:14px}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}