/* DEC-050: transplanted from approved-mockup.html HOME/MODAL/SETTINGS/TOUR. */
.nav-backdrop,.nav-settings,.nav-tour-layer,.nav-create-page{--blue:var(--accent,#2563eb);--ink:var(--text-1,#121826);--muted:var(--text-2,#687386);--line:var(--border,#dfe4ec);--soft:var(--bg-sunken,#f4f6f9);--shadow:0 14px 34px rgba(22,34,55,.12);}

.nav-backdrop{position:fixed;inset:0;background:rgba(17,24,39,.46);display:grid;place-items:center;z-index:50;padding:22px}.nav-modal{width:min(720px,95vw);background:#fff;border-radius:20px;box-shadow:0 28px 75px rgba(0,0,0,.28);padding:26px}.nav-modal-top{display:flex;justify-content:space-between;align-items:start}.nav-modal h2{margin:0;font-size:25px}.nav-close{border:0;background:#f0f2f6;border-radius:9px;width:34px;height:34px;font-size:19px}.nav-create-options{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:22px 0}.nav-create-option{border:1px solid var(--line);background:#fff;border-radius:13px;padding:18px;text-align:left;min-height:128px}.nav-create-option:hover{border-color:var(--blue);box-shadow:0 0 0 3px #eaf0ff}.nav-create-option b{display:block;margin:14px 0 5px}.nav-create-option span{font-size:12px;color:var(--muted);line-height:1.4}.nav-ratio-row{border-top:1px solid var(--line);padding-top:18px;display:flex;align-items:center;gap:10px}.nav-ratio-row strong{margin-right:auto}.nav-ratio{border:1px solid var(--line);background:#fff;border-radius:10px;padding:9px 13px;font-weight:700}.nav-ratio.active{border-color:var(--blue);color:var(--blue);background:#eff4ff}

.nav-settings{display:grid;grid-template-rows:64px 1fr;background:#f5f6f8}.nav-settings-top{background:white;border-bottom:1px solid var(--line);padding:0 22px;display:flex;align-items:center;gap:18px}.nav-back-link{border:0;background:var(--soft);border-radius:9px;padding:9px 12px;font-weight:750}.nav-settings-body{display:grid;grid-template-columns:250px minmax(0,720px);justify-content:center;gap:32px;padding:38px;overflow:auto}.nav-settings-nav{background:white;border:1px solid var(--line);border-radius:15px;padding:10px;height:max-content}.nav-settings-nav button{width:100%;border:0;background:transparent;text-align:left;padding:12px;border-radius:9px;font-weight:700;color:#465164}.nav-settings-nav button.active{background:#edf3ff;color:#1d55cd}.nav-settings-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px}.nav-settings-card h1{font-size:25px;margin:0 0 8px}.nav-settings-card>p{color:var(--muted);margin:0 0 22px}.nav-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.nav-form-grid .wide{grid-column:1/-1}.nav-save{border:0;background:var(--blue);color:white;padding:11px 17px;border-radius:10px;font-weight:800;margin-top:20px}

.nav-tour-layer{position:fixed;inset:0;background:rgba(11,18,31,.54);z-index:80}.nav-tour-highlight{position:fixed;left:300px;top:105px;width:58px;height:58px;border:3px solid #fff;border-radius:15px;box-shadow:0 0 0 5px rgba(69,114,255,.9),0 0 0 9999px rgba(11,18,31,.12)}.nav-tour-card{position:fixed;left:375px;top:102px;width:310px;background:white;border-radius:15px;padding:18px;box-shadow:0 18px 50px rgba(0,0,0,.28)}.nav-tour-card .step{font-size:11px;color:var(--blue);font-weight:850}.nav-tour-card h3{margin:7px 0;font-size:19px}.nav-tour-card p{color:var(--muted);font-size:13px;line-height:1.45}.nav-tour-actions{display:flex;align-items:center;gap:8px;margin-top:16px}.nav-tour-actions .skip{border:0;background:transparent;color:var(--muted);margin-right:auto}.nav-tour-actions .next{border:0;background:var(--blue);color:#fff;border-radius:9px;padding:9px 14px;font-weight:800}

.nav-create-options{grid-template-columns:repeat(2,1fr)}.nav-modal{max-width:560px;color:var(--text-1);background:var(--bg-raised)}.nav-create-option,.nav-ratio{background:var(--bg-raised);color:var(--text-1)}.nav-modal-top button{border:0;border-radius:9px;padding:6px 12px}.nav-settings{min-height:100vh;color:var(--text-1);background:var(--bg-sunken)}.nav-settings-top{height:64px;background:var(--bg-raised)}.nav-settings-top>span{flex:1}.nav-settings-body{align-items:start;grid-template-columns:250px minmax(0,720px)}.nav-settings-nav,.nav-settings-card{background:var(--bg-raised)}.nav-settings-nav [aria-current=page]{background:var(--accent-weak);color:var(--accent)}.nav-settings-card .v3-mbody{padding:0}.nav-settings-card .v3-mfoot{flex-wrap:wrap}.nav-settings select{display:block;max-width:100%;margin-top:15px}.nav-settings-card p{line-height:1.6}.nav-lessons section{border-bottom:1px solid var(--line);padding:12px 0}.nav-lessons h2{font-size:17px}.nav-lessons small{font-size:12px;color:var(--muted);margin-left:8px}.nav-primary{background:var(--accent);color:white;padding:11px 17px;border:0;border-radius:10px}.nav-tour-highlight{pointer-events:none}.nav-tour-card{color:var(--text-1);background:var(--bg-raised);width:min(310px,calc(100vw - 24px))}.nav-tour-actions button{border:0;padding:9px;border-radius:9px}.nav-setup .v3-card{max-width:840px}.nav-create-page{min-height:100vh;background:var(--bg-sunken)}@media(max-width:760px){.nav-settings-body{grid-template-columns:1fr;padding:18px;gap:16px}.nav-settings-nav{display:flex;flex-wrap:wrap}.nav-settings-nav h2{width:100%}.nav-settings-nav button{width:auto}.nav-create-options{gap:8px}.nav-modal{padding:18px}.nav-ratio-row{flex-wrap:wrap}}
.nav-create-error{position:fixed;z-index:60;top:18px;left:50%;transform:translateX(-50%);width:min(600px,calc(100% - 36px));padding:16px 20px;background:var(--bg-raised);color:var(--text-1);border:1px solid var(--error,#c42b43);border-radius:12px;box-shadow:0 8px 24px #18253633}.nav-create-error p{margin:0 0 8px}.nav-create-error a{color:var(--accent);text-decoration:underline}