/* Preview v2: shared navigation and typography for the harmonized studio. */
:root { --bg:#0d101c; --surface:#151a2a; --surface-2:#1b2135; --surface-3:#111625; --text:#f1f2fa; --muted:#a4a2bb; --violet:#8c6af5; --line:#ffffff14; }
body { display:grid; grid-template-columns:64px 236px minmax(0,1fr); color:var(--text); font-size:13px; }
main { min-width:0; }
.studio-rail { position:sticky; top:0; z-index:25; display:flex; align-items:center; flex-direction:column; width:64px; height:100dvh; background:#090c16; border-right:1px solid #ffffff08; padding:21px 9px 17px; }
.rail-brand { width:40px; height:40px; display:grid; place-items:center; border:1px solid #a58be137; border-radius:12px; background:#8c6af51a; color:#c6b4ff; margin-bottom:35px; }
.rail-brand svg { width:29px; height:29px; stroke-width:1.9; }
.studio-rail nav,.rail-bottom { display:flex; align-items:center; flex-direction:column; gap:12px; width:100%; }
.rail-bottom { margin-top:auto; gap:19px; }
.rail-link { width:44px; min-height:50px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:6px; border:1px solid transparent; border-radius:9px; padding:8px 3px; color:#8b8ba4; background:transparent; box-shadow:none; text-decoration:none; font-size:9px; font-weight:500; }
.rail-link svg { width:19px; height:19px; color:inherit; }
.rail-link span { line-height:1; }
.rail-link.active { border-color:#9b7cf52b; background:#8c6af519; color:#c1acfc; }
.rail-link:hover { background:#ffffff06; color:#e2d9f7; }

.sidebar { width:236px; top:0; margin:0; height:100dvh; background:#0f121f; border-right:1px solid #ffffff0a; border-radius:0; box-shadow:none; }
.brand { padding:22px 20px; flex:0 0 88px; height:88px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.sidebar-identity { display:flex; flex-direction:column; gap:9px; }
.sidebar-identity strong { color:#f1f0fb; font-size:21px; line-height:1; letter-spacing:-.6px; }
.sidebar-identity strong span { color:#a295c5; font-weight:400; font-size:15px; margin-left:5px; }
.sidebar-identity small { color:#7c7c98; font-size:8px; letter-spacing:1.5px; font-weight:550; }
.sidebar-version { font-size:9px; font-weight:500; color:#9490b0; padding:4px 6px; background:#ffffff03; border:1px solid #ffffff0c; border-radius:5px; }
#navigation { padding:0 13px 24px; gap:0; scrollbar-color:#444056 transparent; }
.nav-search { display:flex; align-items:center; gap:8px; border:1px solid #ffffff10; border-radius:8px; background:#ffffff02; padding:9px 10px; margin:2px 2px 22px; }
.nav-search svg { width:15px; height:15px; flex-shrink:0; color:#8a86a5; }
.nav-search input { width:100%; min-width:0; border:0!important; padding:0!important; min-height:20px!important; background:transparent!important; box-shadow:none!important; color:#ddd8ef; font-size:11px!important; }
.nav-search input::placeholder { color:#8a859f; }
.nav-search kbd { color:#5b566e; font-size:15px; }
.nav-shortcuts { display:grid; gap:5px; padding-bottom:18px; margin-bottom:4px; border-bottom:1px solid #ffffff08; }
#navigation button { min-height:38px; align-items:center; gap:10px; padding:9px 11px; color:#aaa6c0; font-size:12px; font-weight:450; border-radius:7px; }
#navigation button svg { color:#8a83a4!important; width:16px; height:16px; flex:0 0 16px; }
#navigation button span { min-width:0; }
#navigation button.active { color:#dacfff; background:#8c6af51a; border-color:#a58ae42b; }
#navigation button.active svg { color:#baa0fc!important; }
#navigation button em { font-size:9px; margin-left:auto; padding:2px 5px; color:#c2b0ef; background:#a17fec12; }
#navigation button:hover { background:#ffffff06; border-color:#ffffff07; color:#e9e3f9; }
.nav-group { border:0; margin:4px 0; padding:0; border-radius:0; }
.nav-group summary { display:flex; align-items:center; gap:8px; list-style:none; padding:13px 10px 10px; border-radius:7px; font-size:10px; letter-spacing:.35px; font-weight:550; color:#8c87a1; }
.nav-group summary::-webkit-details-marker { display:none; }
.nav-group summary:hover { color:#d9cfec; background:#ffffff03; }
.nav-group summary small { margin-left:auto; color:#68637e; font-size:9px; }
.nav-group summary svg { width:14px; height:14px; color:#847a9b; transition:transform .15s; }
.nav-group[open] summary svg { transform:rotate(180deg); }
.nav-group > .nav-group-links { display:flex; flex-direction:column; gap:3px; margin:0; padding-bottom:8px; }
.nav-group-links button { padding-left:12px!important; }
#navSearchEmpty { margin:20px 12px; color:#a39bb8; font-size:12px; }
.sidebar footer { display:block; padding:16px 15px; min-height:90px; border-top:1px solid #ffffff09; margin-top:auto; background:#0e111d; }
.sidebar-site-link { display:flex; align-items:center; gap:10px; border:1px solid #a081dc20; border-radius:9px; padding:12px 10px; color:inherit; text-decoration:none; background:#8c6af508; }
.site-link-icon { display:grid; place-items:center; height:29px; width:29px; flex-shrink:0; background:#8c6af514; border-radius:8px; color:#bc9ff5; }
.site-link-icon svg { width:16px; height:16px; }
.sidebar-site-link > span:nth-child(2) { display:flex; flex-direction:column; gap:6px; }
.sidebar footer strong { color:#c9c0dc; font-size:10px; font-weight:550; }
.sidebar footer small { font-size:9px; color:#898098; }
.sidebar footer small::before { content:none; }
.sidebar-site-link > b { margin-left:auto; color:#9282ac; font-weight:400; font-size:14px; }
.topbar { padding:0 32px; height:70px; min-height:70px; gap:15px; background:#0d101c; }




.demo-chip { display:flex; align-items:center; gap:6px; color:#b9a7db; border:1px solid #a78bc82a; background:#8c6af508; padding:5px 9px; border-radius:5px; font-size:9px; letter-spacing:.2px; }
.demo-chip i { width:4px; height:4px; border-radius:50%; background:#ad92e9; }
.header-badges { gap:7px; }
.header-badges .pill { display:none; }
.header-icon { width:30px; height:30px; border-color:#ffffff0d; background:#ffffff03; color:#a69bb8; }
.workspace { padding:26px 32px 55px; }
.page-heading { margin-bottom:24px; }
.page-heading p { color:var(--muted); }
.breadcrumb { color:#90879e; font-size:10px; }
.breadcrumb-preview { color:#b3a1ce; font-size:7px; border-color:#aa8de02b; letter-spacing:.8px; }
.modules-intro { margin-bottom:25px; }
.studio-eyebrow { font-size:8px; color:#ae9dce; letter-spacing:1.4px; }
.modules-intro h2 { font-size:30px; font-weight:600; }
.modules-intro p { font-size:12px; color:#a39bb5; line-height:1.6; }
.studio-hero { margin-bottom:31px; border-color:#a28bb62b; }
.studio-hero-copy { padding:30px 32px 35px; width:60%; }
.hero-tag { font-size:8px; }
.studio-hero h2 { font-size:36px; }
.studio-hero p { font-size:12px; color:#b6acc7; }
.studio-primary,.studio-quiet { font-size:11px; padding:11px 14px; }
.studio-primary { background:#7554d3; }
.studio-primary:hover { background:#8061db; }
.hero-caption { font-size:8px; color:#c3b4d5; }
.gallery-heading h2 { font-size:19px; font-weight:600; }
.gallery-heading p { font-size:11px; color:#a69bb4; }
.gallery-heading .module-search { min-width:245px; background:#151a2a; padding:11px 13px; border-color:#ffffff12; }
.module-search input { font-size:11px!important; color:#cfc6dc; }
.module-filters button { min-height:31px; padding:7px 11px; font-size:10px; color:#a598b7; }
.module-filters button span { font-size:9px; color:#a89ab7; }
#moduleCount { color:#a296ae; font-size:10px; }
.illustrated-grid { gap:18px; grid-template-columns:repeat(3,minmax(0,1fr)); }
.illustrated-card { border-color:#ffffff11; background:#151a2a; }
.module-visual { height:151px; }
.module-category { font-size:9px; left:17px; top:15px; }
.module-favorite { right:10px; top:10px; }
.module-card-copy { padding:19px 20px 0; border-color:#ffffff09; }
.module-card-copy h3 { font-size:16px; }
.module-card-copy p { font-size:11px; line-height:1.6; color:#a9a0ba; min-height:18px; }
.module-card-copy small { font-size:10px; color:#a093ad; line-height:1.6; }
.module-open { font-size:11px; padding:14px 0; color:#c7bdd7; }
.module-open:hover { background:transparent; }
.gallery-bottom { margin-top:23px; }
.gallery-bottom > span,.gallery-bottom button { font-size:10px; color:#a698b7; }
.preview-note { font-size:10px; color:#95869e; padding:20px 0; }
.module-page-hero { background:#151a2a; border-color:#ffffff12; border-radius:13px; }
.module-page-hero h2 { font-size:25px; }
.module-back { font-size:11px; color:#aaa0bc; }
.module-page-category { font-size:9px; }
.module-page-hero p { color:#a99cb9; font-size:11px; }
.workspace .panel h2 { font-size:16px; font-weight:550; }
.workspace .panel,.workspace .kpi,.workspace .integration-card,.workspace .info-bar { border-radius:12px; }
.workspace .panel h3 { font-size:14px; }
.workspace .panel > p,.workspace .panel label { font-size:12px; color:#bfb4d0; }
.workspace .kpi span { font-size:12px; color:#bfb4d0; }
.workspace .kpi small { font-size:11px; color:#a69ab7; }
.workspace .kpi strong { font-size:27px; color:#ede5fa; }
.workspace .kpi i { background:#8c6af518; color:#b9a2f6; }
.workspace .integration-card { border-top-color:#ffffff14; }
.workspace .panel .notice { font-size:11px; line-height:1.65; color:#aa9eb9; }
.workspace .table > div,.workspace .data-row,.workspace .permission-matrix > div { font-size:12px; color:#c0b5cf; }
.workspace .data-row small { font-size:11px; }
.workspace .selectable-list button b { font-size:12px; }
.workspace .selectable-list button small { font-size:11px; color:#a99ab8; }
.workspace .selectable-list button:disabled { opacity:.8; }
.workspace .toggle-list label,.workspace .rule-list>div,.workspace .category-toggles label { font-size:12px; }
.workspace .rule-list small,.workspace .sanction-steps b,.workspace .sanction-steps>div { font-size:11px; }
.workspace .embed,.workspace .embed p,.workspace .chat-thread b,.workspace .chat-thread p { font-size:11px; line-height:1.6; }
.workspace .empty { font-size:12px; }
.workspace .service-grid b,.workspace .activity-row small { font-size:11px; }
.novaplay-tabs { gap:7px; }
.novaplay-tabs button { font-size:11px; }
#toast { left:calc(50% + 150px); font-size:12px; }
@media(min-width:1600px) { .illustrated-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(min-width:1121px) and (max-width:1280px) { .workspace { padding:24px; } .topbar { padding:0 24px; } .module-filters button { font-size:9px; padding:7px 8px; } .module-page-hero h2 { font-size:23px; } .studio-hero h2 { font-size:32px; } }
@media(max-width:1120px) {
  body { display:block; }
  .studio-rail { position:fixed; top:0; left:0; z-index:75; transform:translateX(-64px); transition:transform .2s; }
  .sidebar { position:fixed; top:0; left:64px; z-index:75; width:236px; transform:translateX(-300px); height:100dvh; }
  .studio-menu-open .studio-rail,.studio-menu-open .sidebar { transform:translateX(0); }
  .studio-menu-open .sidebar-backdrop { z-index:70; }
  .topbar { position:sticky; padding:0 24px; gap:12px; }
  #navigation { display:flex; max-height:none; }
  .brand { padding:22px 20px; height:88px; flex-basis:88px; }
  .workspace { padding:25px; }
  #toast { left:50%; }
}
@media(max-width:780px) {
  .header-badges { display:none; }
  .topbar { justify-content:flex-start; }
  .demo-chip { margin-left:auto; }
  .illustrated-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .gallery-heading { gap:17px; }
  .gallery-heading .module-search { width:100%; }
  .studio-hero-copy { width:68%; }
  .studio-hero h2 { font-size:32px; }
  .module-page-hero h2 { font-size:22px; }
  .gallery-toolbar { flex-wrap:wrap; }
  .workspace .voice-top { grid-template-columns:1fr; }
}
@media(max-width:500px) {
  .topbar { height:64px; min-height:64px; padding:0 15px; gap:9px; }
  
  
  .demo-chip { padding:4px 6px; font-size:8px; gap:4px; }
  .mobile-menu-button { width:29px; height:30px; min-height:30px; padding:6px; flex-shrink:0; }
  .workspace { padding:20px 17px 35px; }
  .breadcrumb-preview { font-size:6px; padding:3px 5px; }
  .modules-intro { margin-top:20px; }
  .studio-eyebrow { font-size:7px; letter-spacing:.9px; }
  .modules-intro h2 { font-size:26px; line-height:1.3; }
  .modules-intro p { font-size:12px; }
  .studio-hero { min-height:400px; }
  .studio-hero-copy { padding:24px 23px; width:100%; }
  .studio-hero h2 { font-size:30px; }
  .studio-hero p { font-size:11px; }
  .studio-primary,.studio-quiet { font-size:10px; padding:10px 11px; }
  .hero-tag { font-size:7px; }
  .illustrated-grid { grid-template-columns:1fr; }
  .module-visual { height:173px; }
  .module-card-copy h3 { font-size:18px; }
  .module-card-copy p { font-size:12px; }
  .module-card-copy small { font-size:11px; }
  .module-open { font-size:12px; }
  .module-filters { gap:4px; }
  .module-filters button { font-size:10px; padding:7px 9px; }
  .module-page-hero h2 { font-size:22px; }
  .module-page-hero p { font-size:11px; }
  .workspace .panel { padding:17px; }
  .workspace .kpi strong { font-size:26px; }
  .workspace .panel .notice { font-size:11px; }
}