/* Shared studio design. Diagram geometry and playback controls keep their own layout. */
:root{--studio-panel:rgba(var(--glassbox-rgb,35,42,50),.86);--studio-border:color-mix(in srgb,var(--text,#edf1f5) 12%,transparent);--studio-soft:color-mix(in srgb,var(--text,#edf1f5) 5%,transparent);--studio-shadow:0 10px 30px #0002;--control-radius:8px;color-scheme:dark}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;color:var(--text,#edf1f5);font-family:var(--font-body,system-ui,sans-serif);background:var(--bg-gradient,linear-gradient(135deg,#111418,#191e24))}body{position:relative;font-size:14px;line-height:1.5;overflow-x:hidden}body::before{content:"";position:fixed;inset:0;background:none;pointer-events:none;z-index:0}body::after{content:"";position:fixed;inset:0;background-image:linear-gradient(rgba(10,13,17,var(--brand-bg-overlay,0)),rgba(10,13,17,var(--brand-bg-overlay,0))),var(--brand-bg-image,none);background-size:cover;background-position:center;pointer-events:none;z-index:0}.bg-mesh{display:none}a{color:inherit}button,input,select,textarea{font:inherit}button,a,input,select,textarea{touch-action:manipulation}button{cursor:pointer}button:disabled{opacity:.45;cursor:default}h1,h2,h3,h4{font-family:var(--font-heading,system-ui,sans-serif);line-height:1.2;letter-spacing:-.025em}h1{font-size:clamp(24px,3vw,36px);margin:0 0 8px}h2{font-size:20px;margin:0 0 8px}h3{font-size:16px}p{margin:8px 0 16px}.muted,.hint,.field-note,.hero-subtitle,.form-copy,.auth-copy{color:var(--muted)}
.app-shell{position:relative;z-index:1;width:min(1500px,calc(100% - 32px));margin:0 auto 32px}.topbar{position:sticky;top:0;z-index:40;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:56px;padding:8px 14px;margin-bottom:22px;border:1px solid var(--studio-border);border-top:0;border-radius:0 0 var(--card-radius,14px) var(--card-radius,14px);background:var(--studio-panel);backdrop-filter:blur(var(--card-blur,12px));box-shadow:0 3px 14px #0001}.brand{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600}.brand-mark,.product-mark{width:30px;height:30px;flex:none;border-radius:8px;border:1px solid var(--studio-border);background-color:color-mix(in srgb,var(--accent) 18%,transparent);background-image:var(--brand-logo-image,none);background-position:center;background-size:cover}.brand-mark:empty::before,.product-mark:empty::before{content:var(--brand-mark-symbol,"");display:block;width:12px;height:12px;margin:8px;border:2px solid var(--accent);border-radius:3px;transform:rotate(-12deg)}.brand-mark{overflow:hidden}.nav-links{display:flex;align-items:center;flex-wrap:wrap;gap:5px}.nav-links a{padding:7px 10px;font-size:12px;line-height:1.4;text-decoration:none;border:1px solid transparent;border-radius:var(--control-radius);color:var(--muted)}.nav-links a:hover,.nav-links a[aria-current="page"]{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);border-color:color-mix(in srgb,var(--accent) 20%,transparent)}.user-chip{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted)}
.panel{padding:22px;border:1px solid var(--studio-border);border-radius:var(--card-radius,14px);background:var(--studio-panel);backdrop-filter:blur(var(--card-blur,12px));box-shadow:var(--studio-shadow)}.section-chip,.hero-kicker,.auth-kicker{display:block;color:var(--accent);font-size:11px;letter-spacing:.1em;font-weight:600;text-transform:uppercase;margin-bottom:12px}.btn,.gold-btn,.dark-btn,.delete-btn,.red-btn,.share-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:34px;padding:7px 12px;border:1px solid var(--studio-border);border-radius:var(--control-radius);color:var(--text);background:var(--studio-soft);text-decoration:none;font:500 12px var(--font-body,system-ui,sans-serif);line-height:1.5;cursor:pointer;box-shadow:none;transition:background .15s,border-color .15s}.btn-primary,.gold-btn,.btn.gold{background:var(--accent);color:var(--accent-ink,#101820);border-color:var(--accent);font-weight:600}.btn-secondary,.dark-btn,.share-btn{background:var(--studio-soft);color:var(--text)}.delete-btn,.red-btn,.btn.red{background:#c55b6218;color:#ffaeb3;border-color:#c55b6240}.btn:hover,.dark-btn:hover,.share-btn:hover{border-color:var(--accent)}.btn-primary:hover,.gold-btn:hover{filter:brightness(1.08)}.button-row,.sub-button-row{display:flex;gap:8px;flex-wrap:wrap}.input,.field-input,.rename-input,.routine-search input{width:100%;min-width:0;background:var(--studio-soft);border:1px solid var(--studio-border);border-radius:var(--control-radius);padding:9px 11px;color:var(--text);outline:none}input[type=checkbox],input[type=range]{accent-color:var(--accent)}input[type=range]{padding:0;background:transparent;box-shadow:none}input[type=color]{padding:3px;height:38px;cursor:pointer}input[type=file]{font-size:12px}input[type=file]::file-selector-button{padding:6px 9px;margin-right:10px;color:var(--text);background:var(--studio-soft);border:1px solid var(--studio-border);border-radius:6px;cursor:pointer}select option{background:var(--glassbox,#232A32);color:var(--text)}.field,.field-group{display:grid;gap:7px;min-width:0}.field label,.field-group label{font-size:12px;font-weight:500}.field-note{font-size:12px;line-height:1.5}.notice,.admin-msg,.admin-error,.import-msg{padding:11px 13px;border:1px solid var(--studio-border);border-radius:10px;margin:12px 0;font-size:13px}.notice.success,.admin-msg{background:#449c7518}.notice.error,.admin-error{background:#c55b6218;color:#ffaeb3}.notice.info{background:var(--studio-soft)}:where(a,button,input,select,textarea):focus-visible{outline:2px solid var(--accent);outline-offset:3px}input:focus-visible,select:focus-visible,textarea:focus-visible{border-color:var(--accent)}.text-link{color:var(--accent);text-decoration:none}.text-link:hover{text-decoration:underline}
/* Matched chrome for existing canvas workspaces, without touching SVG fills or tool sizes. */
body.studio-unified :is(.card,.content-card,.routine-card,.figure-card,.legend-card,.top-intro,.workspace-dock,.workspace-left-rail,.mobile-tool-popover,.share-view-sidebar,.routine-subnav){background:var(--studio-panel)!important;border:1px solid var(--studio-border)!important;border-radius:var(--card-radius,14px)!important;backdrop-filter:blur(var(--card-blur,12px));box-shadow:var(--studio-shadow)!important;color:var(--text)}
body.studio-unified :is(.topbar,.routine-topbar){background:var(--studio-panel)!important;border-color:var(--studio-border)!important;backdrop-filter:blur(var(--card-blur,12px))!important}
body.studio-unified :is(.btn.gold,.gold-btn,.tab.active){background:var(--accent)!important;color:var(--accent-ink,#101820)!important;border-color:var(--accent)!important;box-shadow:none!important}
body.studio-unified :is(.btn.dark,.dark-btn,.share-btn){background:var(--studio-soft)!important;color:var(--text)!important;border-color:var(--studio-border)!important;box-shadow:none!important}
body.studio-unified :is(.field,.tool-options,.side) :is(input:not([type=color]):not([type=range]):not([type=checkbox]),select,textarea){background:var(--studio-soft)!important;border-color:var(--studio-border)!important;color:var(--text)!important;font-family:var(--font-body)!important}
body.studio-unified :is(.hint,.status,.legend,.field label,.keyHint){color:var(--muted)!important}body.studio-unified :is(h1,h2,h3,.hero-title){font-family:var(--font-heading)!important}body.studio-unified .studio-icon{background:transparent!important}
/* Overview */
.overview-page .page{width:100%;margin:0;padding:0}.overview-page .top-intro{position:relative;padding:22px;margin-bottom:16px}.overview-page .top-intro .logo-wrap{display:none}.overview-page .hero-title{font-size:28px!important}.overview-page .hero-subtitle{font-size:13px!important}.overview-page .top-intro .gold-btn{position:absolute;right:22px;top:20px;margin:0!important}.overview-page .content-card{padding:20px;margin-bottom:16px}.overview-page .section-title{font-size:15px;font-weight:600;margin-bottom:8px}.overview-page .story-text{color:var(--muted);font-size:13px}.overview-page .routine-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr));gap:12px;margin-top:16px}.overview-page .routine-card{padding:18px!important}.overview-page .routine-card h2{font-size:19px!important;overflow-wrap:anywhere}.overview-page :is(.routine-meta,.meta){color:var(--muted);font-size:12px;margin:8px 0 16px}.overview-page .rename-form{display:none;gap:8px;margin-top:12px}.overview-page .rename-form.active{display:flex}.overview-page .rename-form input{flex:1}.overview-page .admin-limit-box{margin:16px 0;padding:12px;background:var(--studio-soft);border:1px solid var(--studio-border);border-radius:10px}.overview-page .admin-limit-box summary{cursor:pointer;font-size:12px;color:var(--muted)}.overview-page .admin-limit-grid{display:flex;align-items:end;flex-wrap:wrap;gap:10px;margin-top:12px}.overview-page .limit-hint{color:var(--muted);font-size:12px}.overview-page .routine-search{display:flex;gap:10px;align-items:center;max-width:720px;margin:14px 0 8px}.overview-page #routineSearchStatus{font-size:12px;color:var(--muted)}.overview-page .empty-state{color:var(--muted);font-size:13px;padding:20px 0}.overview-page .help-modal{background:var(--glassbox);border-radius:var(--card-radius);border-color:var(--studio-border)}

/* Dashboard */
.dashboard-stack{display:grid;gap:16px}.dashboard-hero{min-height:230px;display:flex;flex-direction:column;justify-content:center;padding:32px}.dashboard-hero p{max-width:580px;color:var(--muted);margin-bottom:18px}.dashboard-actions{display:grid;grid-template-columns:1fr 1fr;gap:16px}.dashboard-action{display:flex;flex-direction:column;align-items:start;gap:8px;text-decoration:none;transition:border-color .15s}.dashboard-action:hover{border-color:var(--accent)}.dashboard-action p{color:var(--muted);font-size:13px;margin:0}.dashboard-action .studio-icon{color:var(--accent);width:24px;height:24px;margin-bottom:8px}.studio-icon{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* Authentication */
.auth-shell{position:relative;z-index:1;min-height:100dvh;display:grid;place-items:center;padding:32px 20px}.auth-grid{width:min(1040px,100%);display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch}.auth-panel{padding:32px;display:flex;flex-direction:column;justify-content:center;min-height:540px}.auth-title{font-size:clamp(30px,4vw,44px);line-height:1.12;max-width:440px}.auth-title .accent{color:var(--accent)}.auth-copy{font-size:14px;max-width:400px}.auth-bottom-copy{font-size:12px;color:var(--muted);margin-top:24px}.product-head{display:flex;align-items:center;gap:10px;margin-bottom:28px}.product-head strong{font-size:14px}.product-head span{display:block;color:var(--muted);font-size:11px}.form-title{font-size:25px;margin:0}.form-copy{font-size:13px}.auth-form{display:grid;gap:16px;margin-top:12px}.form-actions,.form-links{display:flex;flex-wrap:wrap;gap:8px}.form-links{font-size:12px}.auth-art{width:100%;margin-top:20px;aspect-ratio:1.8;background:var(--studio-soft);border:1px solid var(--studio-border);border-radius:var(--card-radius)}
/* Appearance */
.appearance-heading{margin:4px 0 24px}.appearance-heading p{color:var(--muted);font-size:13px}.appearance-layout{display:grid;grid-template-columns:minmax(340px,1fr) minmax(320px,1fr);gap:20px;align-items:start}.appearance-form{display:grid;gap:14px}.settings-section h2{font-size:16px;margin-bottom:6px}.settings-section>p{font-size:12px;color:var(--muted);margin-bottom:18px}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.settings-grid .full{grid-column:1/-1}.color-row{display:grid;grid-template-columns:42px 1fr;gap:8px}.range-row{display:flex;gap:10px;align-items:center}.range-row input{flex:1}.range-row output{min-width:48px;text-align:right;color:var(--muted);font-size:12px}.preview-card{position:sticky;top:78px}.preview-card>p{font-size:12px;color:var(--muted)}.appearance-preview{position:relative;isolation:isolate;background:var(--bg-gradient);color:var(--text);font-family:var(--font-body);padding:14px;border:1px solid var(--studio-border);border-radius:var(--card-radius);overflow:hidden;min-height:380px}.appearance-preview::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(10,13,17,var(--brand-bg-overlay)),rgba(10,13,17,var(--brand-bg-overlay))),var(--brand-bg-image);background-size:cover}.preview-topbar{display:flex;align-items:center;gap:8px;padding:10px 12px;margin-bottom:14px;background:var(--studio-panel);border:1px solid var(--studio-border);border-radius:var(--card-radius);backdrop-filter:blur(var(--card-blur))}.preview-topbar .brand-mark{width:26px;height:26px}.preview-workspace{display:grid;grid-template-columns:35px minmax(0,1fr) 90px;gap:8px}.preview-toolrail{display:flex;flex-direction:column;gap:6px;padding:5px;border:1px solid var(--studio-border);border-radius:var(--card-radius);background:var(--studio-panel);backdrop-filter:blur(var(--card-blur));align-self:start}.preview-toolrail button{padding:3px;background:transparent;border:0;border-radius:5px;color:var(--muted)}.preview-toolrail button.active{background:var(--accent);color:var(--accent-ink)}.preview-diagram{width:100%;height:210px;background:var(--studio-soft);border-radius:var(--card-radius);border:1px solid var(--studio-border)}.preview-controls{display:flex;justify-content:space-between;align-items:center;margin-top:8px;padding:7px;background:var(--studio-panel);border:1px solid var(--studio-border);border-radius:var(--card-radius)}.preview-controls span{font-size:10px;color:var(--muted)}.preview-controls .btn{min-height:26px;padding:4px 8px;font-size:10px}.preview-sidebar{background:var(--studio-panel);border:1px solid var(--studio-border);border-radius:var(--card-radius);padding:8px;backdrop-filter:blur(var(--card-blur));font-size:10px}.preview-sidebar h3{font-size:11px;margin:0 0 12px}.preview-sidebar p{color:var(--muted);font-size:10px}.preview-sidebar .input{padding:4px;font-size:10px}.preview-caption{font-size:11px;color:var(--muted);margin-top:14px}.appearance-actions{display:flex;gap:8px;flex-wrap:wrap;padding:14px;border:1px solid var(--studio-border);border-radius:var(--card-radius);background:var(--studio-panel)}.asset-preview{display:flex;align-items:center;gap:12px;margin:8px 0}.asset-preview img{width:46px;height:46px;border-radius:8px;object-fit:cover}.asset-preview img[hidden]{display:none}.upload-box{display:grid;gap:10px}.font-checkbox{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--muted)}
@media(max-width:1000px){.topbar{flex-wrap:wrap;gap:8px}.appearance-layout{grid-template-columns:1fr}.preview-card{position:static;order:-1}.appearance-preview{min-height:0}.auth-panel{min-height:480px;padding:24px}.user-chip{margin-left:auto}.nav-links{justify-content:center}}
@media(max-width:650px){.app-shell{width:calc(100% - 20px)}.topbar{padding:8px 10px}.topbar>.nav-links{order:3;width:100%}.brand>div>div:last-child{font-size:10px!important}.user-chip>span{display:none}.panel{padding:18px}.settings-grid,.dashboard-actions{grid-template-columns:1fr}.settings-grid .full{grid-column:auto}.dashboard-hero{padding:24px;min-height:210px}.auth-grid{grid-template-columns:1fr;max-width:480px}.auth-panel{min-height:0}.hero-side{padding:24px}.auth-title{font-size:30px}.auth-art,.auth-bottom-copy{display:none}.auth-shell{padding:18px 12px}.overview-page .top-intro .gold-btn{top:18px;right:18px}.overview-page .hero-title{font-size:23px!important;padding-right:60px}.overview-page .routine-search{flex-direction:column;align-items:stretch}.preview-workspace{grid-template-columns:30px minmax(0,1fr) 80px}.appearance-preview{padding:9px}.preview-card{padding:14px}.appearance-actions .btn{flex:1}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
body.studio-unified :is(.editor-shell .side,.workspace-figures,.editor-left-toolbar,#groupButtons,.quick-panel,.animation-toolbar,.movie-music-panel){background:var(--studio-panel)!important;border-color:var(--studio-border)!important;border-radius:var(--card-radius)!important;backdrop-filter:blur(var(--card-blur))!important;box-shadow:var(--studio-shadow)!important}
body.studio-unified .workspace-dock-tabs button[aria-selected=true]{outline-color:var(--accent)!important;color:var(--accent-ink)!important;background:var(--accent)!important}
body.studio-unified .editor-ui-icon{background:transparent!important}

body.studio-unified .help-modal{background:var(--glassbox)!important;border-color:var(--studio-border)!important;border-radius:var(--card-radius)!important}
body.studio-unified :is(.help-modal-body p,.help-modal-body li,.note-text){color:var(--muted)!important}
body.studio-unified.routine-share-workspace :is(.legend-item,.note-row){background:var(--studio-soft)!important;border-color:var(--studio-border)!important;box-shadow:none!important}
body.studio-unified.routine-share-workspace :is(.small-filter-btn,.group-filter-chip,.share-animation-play-btn,nav a){background:var(--studio-soft)!important;box-shadow:none!important;border-color:var(--studio-border)!important}
body.studio-unified.routine-share-workspace .top-intro{text-align:left!important;padding:22px!important}
body.studio-unified.routine-share-workspace .hero-title{font-size:28px!important;letter-spacing:-.025em!important}
body.studio-unified.routine-share-workspace .section-title{border:0!important;background:transparent!important;box-shadow:none!important;padding:0!important;font-size:11px!important}
.overview-page #projectImportForm input[type=file]{flex:1;width:auto;min-width:180px}
.overview-page .routine-search input{border-color:var(--studio-border)!important;border-radius:var(--control-radius)!important;background:var(--studio-soft)!important}

/* Neutral graphite canvas surround; group and path colours remain independent. */
body.studio-unified .editor-shell .arenaWrap{background:#101419!important;border-color:var(--studio-border)!important}
body.studio-unified .insert-move-arrow-btn.active{background:var(--accent)!important;color:var(--accent-ink)!important;border-color:var(--accent)!important;box-shadow:none!important}

/* Routide identity: approved horseshoe-path logo, geometric headings, readable interface. */
.routide-brand{display:inline-flex;align-items:center;gap:10px;flex:none;text-decoration:none;min-width:0;line-height:1;}
.routide-logo{display:block;width:156px;height:48px;object-fit:contain;max-width:100%;}
.routide-custom-logo{display:block;width:32px;height:32px;object-fit:contain;}
.routide-wordmark{font:750 23px "Plus Jakarta Sans","Inter",system-ui,sans-serif;letter-spacing:-.045em;color:var(--text);}
body.studio-unified .topbar .routide-logo{width:142px;height:34px;}
body.editor-workspace-ready .topbar .routide-logo{width:124px;height:30px;}
.product-head .routide-logo{width:205px;height:68px;}
.routide-preview-logo{display:block;width:125px;height:35px;background-image:var(--routide-logo-image);background-position:left center;background-repeat:no-repeat;background-size:contain;}
body.studio-unified :is(h1,h2,h3){font-weight:700;letter-spacing:-.025em;}
body.studio-unified header.routide-share-header{display:flex!important;justify-content:space-between;align-items:center;gap:12px;background:var(--studio-panel)!important;border:1px solid var(--studio-border)!important;backdrop-filter:blur(var(--card-blur))!important;}
.routide-share-header nav{display:flex;flex-wrap:wrap;justify-content:flex-end;}
body.studio-unified .routide-share-header .routide-logo{width:140px;height:34px;}
@media(max-width:650px){body.studio-unified .topbar .routide-logo{width:126px;height:32px;}body.studio-unified header.routide-share-header{flex-wrap:wrap!important;}body.studio-unified .routide-share-header nav{width:100%;justify-content:center;}.product-head .routide-logo{width:180px;height:60px;}}

body.studio-unified :is(.topbar,.routide-share-header) .routide-logo{object-fit:contain;object-position:center;}
.routide-preview-logo{background-size:contain;background-position:center;}