/* Shared rhythm and surfaces for the MemoSwift app shell. */
:root { --mx-bg:#f7f8fc; --mx-surface:#fff; --mx-soft:#f0f2fb; --mx-text:#17213c; --mx-muted:#66718b; --mx-line:#e4e7f0; --mx-accent:#6366f1; }
[data-theme="dark"] { --mx-bg:#0f172a; --mx-surface:#172136; --mx-soft:#202c44; --mx-text:#eef2ff; --mx-muted:#a7b3cb; --mx-line:#2d3a52; }
#app .ms-page-container,#app .sr-page,#app .fv-page,#app .msp-wrapper { background:var(--mx-bg); color:var(--mx-text); min-height:calc(100vh - 60px); }
#app .ms-page-container { padding:24px; }
#app .ms-hero-section,#app .fv-hero { background:var(--mx-surface); border:1px solid var(--mx-line); border-radius:20px; overflow:hidden; }
#app .ms-hero-wrapper { padding:28px; }
#app .ms-hero-grid { gap:24px; grid-template-columns:112px minmax(0,1fr) 200px; }
#app .ms-category-badge { display:none; }
#app .ms-action-group .ms-btn-primary { background:var(--mx-accent); box-shadow:none; }
#app .ms-combine-btn,#app .ms-edit-btn { background:var(--mx-surface); color:var(--mx-text); border:1px solid var(--mx-line); box-shadow:none; }
#app .ms-quiz-cover { width:112px; height:112px; border-radius:20px; box-shadow:none; font-size:48px; }
#app .ms-quiz-title { font-size:clamp(26px,3vw,38px); line-height:1.2; letter-spacing:-1px; color:var(--mx-text); }
#app .ms-quiz-desc { color:var(--mx-muted); max-width:65ch; }
#app .ms-stats-row { padding:18px 28px; background:var(--mx-soft); border-top:1px solid var(--mx-line); gap:28px; }
#app .ms-preview-container { padding:28px 0; }
#app .ms-preview-label h2 { font-size:20px; color:var(--mx-text); }
#app .ms-flashcard { box-shadow:0 8px 28px #17213c08; border:1px solid var(--mx-line); }
#app .ms-fc-face,#app .ms-card-row,#app .ms-mode-card,#app .sr-card,#app .sr-folder,#app .sr-user,#app .fv-card,#app .msp-card { background:var(--mx-surface); border-color:var(--mx-line); color:var(--mx-text); }
#app .ms-mode-card { border-radius:16px; box-shadow:none; }
#app .ms-mode-desc { line-height:1.6; color:var(--mx-muted); }
#app .ms-card-row { border-radius:14px; margin-bottom:10px; }
.mx-pronunciation { color:var(--mx-muted); font-size:16px; font-weight:500; margin-top:8px; line-height:1.5; }
#termPronunciation { text-align:center; font-size:22px; }
.mx-wayfinding { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin:0 0 20px; font-size:13px; }
.mx-wayfinding a,.mx-connection a { color:var(--mx-accent); text-decoration:none; font-weight:600; }
.mx-wayfinding nav { display:flex; gap:16px; flex-wrap:wrap; }
.mx-eyebrow { font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--mx-muted); font-weight:700; margin-bottom:8px; }
.mx-connection { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; background:var(--mx-soft); padding:18px 22px; border:1px solid var(--mx-line); border-radius:16px; margin:20px 0; }
.mx-connection p { margin:4px 0 0; font-size:13px; color:var(--mx-muted); }
.mx-search-form { display:flex; align-items:center; gap:12px; margin:22px 0; max-width:760px; }
.mx-search-form input { flex:1; min-width:0; background:var(--mx-surface); color:var(--mx-text); border:1px solid var(--mx-line); border-radius:12px; padding:14px 16px; font:inherit; }
.mx-search-form button { border:0; border-radius:12px; background:var(--mx-accent); color:white; font:inherit; font-weight:600; padding:14px 20px; }
#app .sr-header { padding:32px 24px 0!important; background:var(--mx-surface); border-bottom:1px solid var(--mx-line); }
#app .sr-query-title { font-size:32px; letter-spacing:-.8px; color:var(--mx-text); }
#app .sr-card-visual { height:128px; }
#app .sr-cards-grid { grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); }
#app .sr-tab { min-height:44px; }
#app .fv-page { padding:24px; }
#app .fv-container { max-width:1280px; }
#app .fv-icon { width:80px; height:80px; font-size:34px; box-shadow:none; }
#app .fv-title { color:var(--mx-text); font-size:30px; letter-spacing:-.7px; }
#app .msp-wrapper { padding:24px; max-width:1400px; }
#app .msp-header { margin:0; border:1px solid var(--mx-line); border-radius:20px; background:var(--mx-surface); }
#app .msp-banner { height:140px; background:linear-gradient(115deg,#555bd2,#8789ec); }
#app .msp-card { border:1px solid var(--mx-line); border-radius:16px; box-shadow:none; }
#app .msp-stats-bar { background:var(--mx-surface); border-color:var(--mx-line); }
.mx-skip { position:fixed; left:16px; top:-60px; padding:12px 18px; z-index:99999; background:var(--mx-surface); color:var(--mx-accent); border-radius:10px; }
.mx-skip:focus { top:12px; }
#app :is(a,button,input,textarea,select):focus-visible { outline:3px solid #9395fa; outline-offset:3px; }
@media(max-width:760px) { #app .ms-page-container,#app .fv-page,#app .msp-wrapper { padding:14px; } #app .ms-hero-wrapper { padding:20px; } #app .ms-hero-grid { grid-template-columns:1fr; } #app .ms-quiz-cover { width:72px;height:72px;font-size:32px; } #app .ms-stats-row { padding:16px;gap:16px;flex-wrap:wrap; } #app .ms-action-group { width:100%; } #app .ms-preview-header { flex-wrap:wrap;gap:12px; } #app .ms-card-data { min-width:0; } #app .ms-card-text { overflow-wrap:anywhere; } #app .sr-header { padding:24px 14px 0!important; } .mx-search-form { gap:8px; } #app .msp-banner { height:100px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; transition-duration:.01ms!important; } }