/* MANGA SHORT Studio — shared presentation for every case and local editor. */
:root{
  --studio-navy:#111d32;--studio-navy-soft:#1b2c47;--studio-cyan:#00b9ed;
  --studio-cyan-ink:#006d92;--studio-pink:#df1175;--studio-pink-hover:#c90d66;
  --studio-bg:#f4f6f9;--studio-white:#fff;--studio-ink:#1b2940;--studio-muted:#69768a;
  --studio-line:#e1e6ed;--studio-soft:#edf9fe;--studio-radius:12px;
  --studio-shadow:0 2px 8px #15274404,0 12px 30px #15274404;
  --ink:var(--studio-ink);--muted:var(--studio-muted);--paper:var(--studio-bg);--line:var(--studio-line);--accent:var(--studio-cyan-ink);--pale:var(--studio-soft);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif;
  color:var(--studio-ink);background:var(--studio-bg);font-synthesis:none;
}
body[data-studio]{color:var(--studio-ink);background:var(--studio-bg);font:14px/1.65 Inter,-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif;-webkit-font-smoothing:antialiased}
[data-studio] *{box-sizing:border-box}
[data-studio] :is(button,input,textarea,select){font-family:inherit}
[data-studio] :is(button,a,input,textarea,select,summary){-webkit-tap-highlight-color:transparent}
[data-studio] :is(button,a,summary){touch-action:manipulation}
[data-studio] :is(button,input,textarea,select,summary,a):focus-visible{outline:3px solid var(--studio-cyan);outline-offset:3px}
[data-studio] :is(input,textarea,select){border:1px solid #d8e0ea;border-radius:8px;background:#fff;color:var(--studio-ink);line-height:1.65;min-width:0;max-width:100%;box-shadow:0 1px 2px #17233b02;transition:border-color .15s,box-shadow .15s}
[data-studio] :is(input,textarea,select):focus{border-color:var(--studio-cyan-ink);box-shadow:0 0 0 3px #00b9ed12;outline-color:var(--studio-cyan)}
[data-studio] :is(input,textarea)::placeholder{color:#8591a2}
[data-studio] textarea{resize:vertical}
[data-studio] button{min-height:36px;border:1px solid var(--studio-line);border-radius:8px;color:#415169;background:#fff;font-size:12px;font-weight:650;transition:background .15s,border-color .15s,box-shadow .15s}
[data-studio] button:hover:not(:disabled){background:#f0f6fa;border-color:#aebfce}
[data-studio] button:disabled{cursor:default;opacity:.45}
[data-studio] :is(button.primary,.toolbar .primary,#save-project,#save-case-details,#create-case,#save,#send,#verify){background:var(--studio-pink);border-color:var(--studio-pink);color:#fff;box-shadow:0 3px 7px #df117518}
[data-studio] :is(button.primary,.toolbar .primary,#save-project,#save-case-details,#create-case,#save,#send,#verify):hover:not(:disabled){background:var(--studio-pink-hover);border-color:var(--studio-pink-hover);color:#fff}
[data-studio] :is(#export-json,#export-md,#markdown,#export){color:#b60c5d;border-color:#f2c8dc;background:#fff8fb}
[data-studio] :is(.view-switch button.active,[aria-pressed="true"],.panel-tabs button.active){background:var(--studio-soft);border-color:#91dff4;color:var(--studio-cyan-ink);box-shadow:inset 0 -2px var(--studio-cyan)}
[data-studio] :is(.view-switch,.toolbar-filters){background:#f4f7fa}
[data-studio] :is(.toolbar,.item-card,.overall,.project,.person,.project-card,.line-card,.page,.readthrough,.section-block,.case-profile,.step-head,.save-result){border-color:var(--studio-line);border-radius:var(--studio-radius);box-shadow:var(--studio-shadow)}
[data-studio] :is(.item-card,.overall,.project,.person,.project-card,.line-card,.page,.readthrough){background:#fff}
[data-studio] :is(.toolbar,.topbar,header.hero){background:#fff;color:var(--studio-ink)}
[data-studio] .hero{border:1px solid var(--studio-line);border-radius:14px;padding:24px 28px;box-shadow:var(--studio-shadow);position:relative;overflow:hidden}
[data-studio] .hero::after{content:"";position:absolute;top:18px;right:18px;width:28px;height:9px;background:var(--studio-pink);transform:skew(-20deg);opacity:.9;pointer-events:none}
[data-studio] .hero h1{font-size:25px;font-weight:750;letter-spacing:-.035em;line-height:1.5}
[data-studio] .hero :is(p,.project-mark,.eyebrow span,.hero-stats span){color:var(--studio-muted)}
[data-studio] :is(.eyebrow,.section-kicker,.hero>span,.hero .eyebrow){color:var(--studio-cyan-ink);font-size:10px;font-weight:750;letter-spacing:.12em}
[data-studio] .hero-main{margin:12px 0}
[data-studio] .hero-stats{border-color:var(--studio-line);color:var(--studio-cyan-ink);padding-right:20px}
[data-studio] .hero-stats strong{font-variant-numeric:tabular-nums}
[data-studio] .confirmed{background:#f7f9fc;border-color:var(--studio-line);color:#63728a;border-radius:8px}
[data-studio] .confirmed-label{background:#e5f7fc;color:#006680}
[data-studio] :is(.item-number,.line-number,.read-number){color:var(--studio-cyan-ink);background:var(--studio-soft);border-color:#cceff8}
[data-studio] :is(.notice,.save-result,.hearing-reference){background:#eef9fc;border-color:#c3e7f1;color:#21617c}
[data-studio] :is(.notice.error,.error){color:#a93639;border-color:#efc1c6}
[data-studio] :is(.hint,.small-note,footer,.draft-status,.source-meta,.project-mark){color:var(--studio-muted)}
[data-studio] :is(.menu-panel,.file-menu-panel,.menu,.add-choices){border:1px solid var(--studio-line);border-radius:10px;background:#fff;box-shadow:0 12px 30px #13263c1a;z-index:40}
[data-studio] .style-option.selected,[data-studio] .candidate-card.selected{border-color:var(--studio-cyan);box-shadow:0 0 0 2px #00b9ed1c;background:#f0fbff}
[data-studio] a{color:var(--studio-cyan-ink)}
[data-studio] dialog{color:var(--studio-ink);border:1px solid var(--studio-line);border-radius:16px;box-shadow:0 30px 90px #0d1c3540}
[data-studio] dialog::backdrop{background:#0d1c3573;backdrop-filter:blur(3px)}
[data-studio] :is(.app-shell,main.shell){padding:22px 26px 50px}
[data-studio] :is(.section-head,.person-toggle,.page-head,.line-top){border-color:var(--studio-line);background:#f9fbfd}
[data-studio] :is(.memo,.memo-label,.note-badge){color:#6d547b;background:#faf6fc;border-color:#eaddf0}
[data-studio] .sidebar{background:var(--studio-navy);border:1px solid #243149;color:#c2ccda;border-radius:12px;padding:18px}
[data-studio] .sidebar :is(.side-head,strong){color:#f0f5fb}
[data-studio] .sidebar :is(a,button){color:#c2ccda;background:transparent;border-color:transparent;border-radius:8px}
[data-studio] .sidebar :is(a,button):hover{background:var(--studio-navy-soft);color:#fff}
[data-studio] .sidebar :is(a.active,button.active){background:var(--studio-cyan);color:#092637;border-color:var(--studio-cyan)}
[data-studio] .sidebar :is(.side-help,.side-help p,.side-help strong){color:#a2b1c6;border-color:#31405a}
[data-studio] .sidebar .nav-count{color:inherit;background:#ffffff15}
.studio-brand{display:flex;align-items:center;gap:11px;color:#fff!important;text-decoration:none;font-size:13px;font-weight:800;letter-spacing:.07em;padding:7px 6px 25px}
.studio-brand small{display:block;margin-top:4px;color:#8496b3;font-size:8px;font-weight:600;letter-spacing:.17em}
.studio-logo{display:grid;grid-template-columns:15px 12px;grid-template-rows:12px 15px;gap:3px;transform:skew(-6deg);width:34px;flex:none}
.studio-logo i{background:#fff;border-radius:2px;display:block}.studio-logo i:nth-child(2){grid-row:1/3;grid-column:2;background:var(--studio-cyan)}.studio-logo i:nth-child(3){background:var(--studio-pink)}
.studio-rail{position:fixed;top:0;left:0;bottom:0;width:224px;background:var(--studio-navy);color:#b6c4d8;padding:22px 18px;display:flex;flex-direction:column;z-index:45;overflow-y:auto;border-right:1px solid #1f2e46}
.rail-label{color:#788ba7;font-size:9px;font-weight:750;letter-spacing:.17em;margin:23px 12px 12px}
.rail-link{display:flex;align-items:center;gap:12px;min-height:45px;margin-bottom:6px;padding:11px 12px;border-radius:9px;text-decoration:none;color:#b6c4d8!important;font-size:12px;font-weight:600;border:1px solid transparent;background:transparent}
button.rail-link{width:100%;text-align:left;justify-content:flex-start;background:transparent;color:#b6c4d8;border-color:transparent}
.rail-link:hover{background:var(--studio-navy-soft)!important;color:#fff!important;border-color:transparent!important}
.rail-link.active{background:var(--studio-cyan)!important;color:#08273a!important;border-color:var(--studio-cyan)!important;box-shadow:0 4px 12px #00b9ed16}
.rail-icon{display:grid;place-items:center;width:22px;flex:none;font-size:18px;font-weight:500}
.rail-footer{margin-top:auto;border-top:1px solid #2b3950;padding:20px 7px 2px;display:flex;gap:11px;align-items:center;color:#dbe4f0;font-size:11px}
.rail-footer small{display:block;color:#8295b1;font-size:10px;margin-top:3px}.rail-monogram{width:32px;height:32px;border:1px solid #3b4b66;border-radius:9px;display:grid;place-items:center;font-size:10px;color:#b9c6db}
body.has-studio-rail{margin-left:224px;max-width:none}
.studio-menu-toggle,.studio-menu-shade{display:none}
/* Production workspace */
body[data-studio="hub"] .shell{grid-template-columns:254px minmax(0,1fr)}
body[data-studio="hub"] .sidebar{border-radius:0;padding:24px 18px;height:100dvh;border:0}
body[data-studio="hub"] .sidebar .brand{border-color:#2c3950;padding:0 5px 24px}
body[data-studio="hub"] .brand-mark{background:var(--studio-pink);border-radius:9px;transform:rotate(-5deg);font-family:inherit;font-size:18px}
body[data-studio="hub"] .brand strong{font-size:12px;letter-spacing:.08em}
body[data-studio="hub"] .brand small{font-size:9px;color:#8da0ba}
body[data-studio="hub"] .case-picker{margin:20px 0 0;padding-bottom:17px;border-color:#2c3950}
body[data-studio="hub"] .case-picker :is(input,select){background:#1b2b44;border-color:#334159;color:#e3ebf8;font-size:11px;padding:8px}
body[data-studio="hub"] .case-picker input::placeholder{color:#92a0b6}
body[data-studio="hub"] .case-picker :is(label,summary){color:#9cacc3;font-size:10px}
body[data-studio="hub"] .case-picker .section-title{font-size:11px;color:#e1eaf6}
body[data-studio="hub"] .case-picker :is(.case-dates,.case-search-status){color:#8092ae;font-size:9px}
body[data-studio="hub"] .sidebar-label{color:#788fae;font-size:9px;letter-spacing:.15em;margin:21px 8px 12px}
body[data-studio="hub"] .step-button{padding:10px;gap:10px;border-radius:8px}
body[data-studio="hub"] .step-button strong{font-size:11px}
body[data-studio="hub"] .step-button small{color:#8498b5;font-size:9px}
body[data-studio="hub"] .step-button .number{background:#22344e;color:#b3c8dd;font-size:10px;width:26px;height:28px;border-radius:6px}
body[data-studio="hub"] .step-button.active{background:var(--studio-cyan);border-color:var(--studio-cyan);color:#072a3a}
body[data-studio="hub"] .step-button.active strong{color:#072a3a}
body[data-studio="hub"] .step-button.active small{color:#164b65}
body[data-studio="hub"] .step-button.active .number{background:#ffffffb5;color:#006a8c}
body[data-studio="hub"] .client-review-link{margin:12px 3px 0;border-color:#2d3d55;color:#b5c4d9;padding:10px;font-size:10px;line-height:1.8}
body[data-studio="hub"] .client-review-link small{color:#8296b4;font-size:9px}
body[data-studio="hub"] .sidebar-help{color:#8597b0;border-color:#2e3d55;font-size:10px;margin:18px 4px 0}
body[data-studio="hub"] .show-add-case{margin:18px 0 0;width:100%;background:var(--studio-pink);color:#fff;border:0}
body[data-studio="hub"] .show-add-case:hover{background:var(--studio-pink-hover);color:#fff}
body[data-studio="hub"] .main{padding:26px 30px 30px;max-width:1900px;width:100%;margin:auto}
body[data-studio="hub"] .topbar{background:transparent;margin-bottom:22px;padding:0;box-shadow:none}
body[data-studio="hub"] .topbar h1{font-size:23px;letter-spacing:-.035em;margin:7px 0 4px}
body[data-studio="hub"] .topbar p{color:#7a879b;font-size:11px}
body[data-studio="hub"] .open-editor{color:#465b73;border-color:var(--studio-line);font-size:11px;box-shadow:var(--studio-shadow)}
body[data-studio="hub"] .case-profile{padding:0 16px;background:#fff;margin-bottom:16px}
body[data-studio="hub"] .case-profile>summary{padding:12px 0;font-size:11px;font-weight:650;cursor:pointer;color:#69768a}
body[data-studio="hub"] .case-profile[open]{padding-bottom:16px}
body[data-studio="hub"] .case-profile-head{border-top:1px solid var(--studio-line);padding-top:12px}
body[data-studio="hub"] .step-head{padding:15px 18px;border-left:3px solid var(--studio-cyan);gap:12px}
body[data-studio="hub"] .step-number{background:var(--studio-soft);color:var(--studio-cyan-ink);font-size:9px;border-radius:6px}
body[data-studio="hub"] .step-head h2{font-size:16px;margin:0 0 2px}
body[data-studio="hub"] .step-head p{font-size:11px;color:#718298}
body[data-studio="hub"] .source-note{font-size:11px;color:#7a8798;margin:8px 3px 13px}
body[data-studio="hub"] .source-note.linked{background:#edf8fd;border-color:#d2ebf6;color:#31677f;padding:9px 13px}
body[data-studio="hub"] .editor-frame{border-color:#dbe3ed;border-radius:12px;height:calc(100dvh - 255px);min-height:650px;box-shadow:var(--studio-shadow)}
body[data-studio="hub"] .frame-host{min-height:650px}
/* Embedded editors stay spacious without repeating the outer navigation. */
[data-embedded="true"] :is(.app-shell,main.shell){padding:18px;max-width:none}
[data-embedded="true"] .hero{padding:16px 21px;background:#fff;box-shadow:none}
[data-embedded="true"] .hero h1{font-size:21px}
[data-embedded="true"] .hero .confirmed{font-size:10px;margin-top:8px}
[data-embedded="true"] .toolbar{position:sticky;top:0;margin-top:12px;box-shadow:0 3px 7px #15274408}
body[data-studio="hearing"]{padding:28px;max-width:1220px}
body[data-studio="hearing"].has-studio-rail{padding:30px 40px;max-width:1400px}
body[data-studio="hearing"][data-embedded="true"]{padding:22px}
body[data-studio="hearing"] header{background:#fff;padding:22px 26px;border:1px solid var(--studio-line);border-radius:12px}
body[data-studio="hearing"] h1{font-size:24px;letter-spacing:-.025em}
body[data-studio="hearing"] header p{font-size:12px;color:var(--studio-muted)}
body[data-studio="hearing"] .toolbar{padding:10px;border:1px solid var(--studio-line);background:#fff;border-radius:10px;gap:7px}
body[data-studio="hearing"] .toolbar button{font-size:11px;min-height:38px}
body[data-studio="hearing"] .file-button{font-size:10px;padding:3px 9px;border-color:var(--studio-line);color:var(--studio-muted);background:#f8fafc;margin:0}
body[data-studio="hearing"] .file-button input{font-size:10px;width:150px;border:0;padding:0}
body[data-studio="hearing"] nav{background:#e9eef4;border-radius:10px;padding:4px;gap:3px}
body[data-studio="hearing"] nav button{border:0;background:transparent;border-radius:7px;font-size:12px;padding:11px;color:#67768d;min-width:120px}
body[data-studio="hearing"] nav button.active{background:#fff;box-shadow:0 2px 6px #142c4210;color:var(--studio-cyan-ink);border-bottom:2px solid var(--studio-cyan)}
body[data-studio="hearing"] :is(article,.brief-intro){border-color:var(--studio-line);box-shadow:var(--studio-shadow);padding:24px;border-radius:12px}
body[data-studio="hearing"] h3{font-size:15px}
/* Canvas editors */
body[data-studio="revision"] .page-rail,body[data-studio="cuts"] #cut-nav{background:var(--studio-navy);border-color:#253952;color:#c1d0e4}
body[data-studio="revision"] .page-rail :is(h2,h3,.rail-heading){color:#a8bdd5}
body[data-studio="revision"] .page-card,body[data-studio="cuts"] #cut-nav button{background:#1b2d46;border-color:#2c405b;color:#dce8f8}
body[data-studio="revision"] .page-card.active,body[data-studio="cuts"] #cut-nav button.active{background:#153d56;border-color:var(--studio-cyan);outline:1px solid var(--studio-cyan)}
body[data-studio="cuts"] #cut-nav small{color:#9aafc8}
body[data-studio="revision"] .manuscript,body[data-studio="cuts"] .viewer{background:#edf1f6;background-image:radial-gradient(#bac7d53d .7px,transparent .7px);background-size:12px 12px}
body[data-studio="revision"] .image-scroll{background:#e5eaf1;border-color:#d3dde8;border-radius:9px}
body[data-studio="revision"] .source-dialogue{background:#f4f8fc;border-left-color:#96d9ec;border-radius:0 8px 8px 0}
body[data-studio="revision"] #candidate-controls{background:#f5f7fb;border-radius:9px}
body[data-studio="revision"] :is(.pane-head,.editor-heading),body[data-studio="cuts"] .viewer-head{border-color:var(--studio-line)}
body[data-studio="revision"] .project-strip,body[data-studio="cuts"] .strip{background:#f9fbfd;border-bottom:1px solid var(--studio-line);color:#718399;font-size:11px}
body[data-studio="revision"] .panel-tabs{background:#f3f6fa}
body[data-studio="revision"] .topbar{padding:16px 22px}
body[data-studio="revision"] .brand-mark{background:var(--studio-pink);color:#fff;border-radius:8px;font-family:inherit;transform:rotate(-4deg)}
body[data-studio="cuts"] header{background:#fff;padding:17px 22px;gap:16px}
body[data-studio="cuts"] header h1{font-size:20px}
body[data-studio="cuts"] header small{font-size:10px;letter-spacing:.05em;color:#77879a}
body[data-studio="cuts"] #workspace{grid-template-columns:136px minmax(300px,1fr) minmax(280px,340px);height:calc(100dvh - 150px);min-height:620px}
body[data-studio="cuts"] #cut-nav small{font-size:9px;white-space:nowrap;max-width:58px;overflow:hidden;text-overflow:ellipsis}
body[data-studio="cuts"][data-stage="motion"] .source-scroll,
body[data-studio="cuts"][data-stage="motion"] .images figure:nth-child(2)>img{height:clamp(240px,calc(100dvh - 690px),420px);max-height:none}
body[data-studio="cuts"] .editor{padding:20px;border-color:var(--studio-line)}
body[data-studio="cuts"] .editor h2{font-size:14px}
body[data-studio="cuts"] .dialogue{background:#f4f8fc;border:1px solid var(--studio-line);font-size:12px;line-height:1.85}
body[data-studio="cuts"] .viewer-head h2{font-size:13px}
body[data-studio="cuts"] #timing{font-size:10px;white-space:nowrap;color:#6d7e92}
body[data-studio="cuts"] .images img{border-radius:8px;box-shadow:0 4px 18px #20345514}
body[data-studio="cuts"] .source-scroll{border-radius:8px;border-color:#d3dde8}
body[data-studio="cuts"] :is(.hint,figcaption){font-size:10px;color:#718398}
body[data-studio="cuts"] .layers{border:1px solid var(--studio-line);background:#fafbfd;padding:13px}
body[data-studio="cuts"] #layer-fields label::before{content:"";display:inline-block;width:8px;height:8px;border-radius:2px;background:var(--track-color);margin-right:7px}
body[data-studio="cuts"] #layer-fields label[for="background"]{--track-color:#4c9cdf}
body[data-studio="cuts"] #layer-fields label[for="characters"]{--track-color:#9470db}
body[data-studio="cuts"] #layer-fields label[for="dialogue"]{--track-color:#00abd6}
body[data-studio="cuts"] #layer-fields label[for="effects"]{--track-color:#e6539a}
body[data-studio="cuts"] #layer-fields label[for="imagination"]{--track-color:#d49a2f}
/* The timeline shows cut durations and the presence of instructions, not rendered layer timing. */
.studio-timeline{background:#fff;border:1px solid var(--studio-line);border-radius:11px;margin-top:22px;box-shadow:var(--studio-shadow);overflow:hidden}
.timeline-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 15px;border-bottom:1px solid var(--studio-line)}
.timeline-heading strong{font-size:12px}.timeline-heading small{font-size:10px;color:var(--studio-muted)}
.timeline-help{font-size:10px;color:#7d8899;margin:0;padding:10px 15px;background:#fcfdfe}
.timeline-scroll{overflow:auto;max-height:280px;overscroll-behavior:contain}
.timeline-grid{min-width:880px;padding:10px 12px 12px;width:max-content}
.timeline-row{display:flex;align-items:center;gap:3px;margin-bottom:5px}
.track-name{width:76px;flex:none;color:#68788d;font-size:10px;position:sticky;left:0;background:#fff;z-index:2;padding:5px}
.track-name::before{content:"";width:6px;height:6px;border-radius:2px;background:var(--track);display:inline-block;margin-right:5px}
[data-studio] .timeline-clip{flex:none;width:var(--clip-width);min-height:24px;height:26px;border-radius:4px;background:color-mix(in srgb,var(--track) 13%,white);border:1px solid color-mix(in srgb,var(--track) 38%,white);border-left:3px solid var(--track);color:#34445b;font-size:9px;font-weight:600;line-height:1.2;padding:3px 5px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:left}
[data-studio] .timeline-clip.active{box-shadow:0 0 0 1px var(--studio-cyan);border-color:var(--studio-cyan)}
[data-studio] .timeline-clip[data-empty="true"]{background:#f7f9fc;border:1px dashed #d8e0ea;color:#a0adbd}
[data-studio] .timeline-clip:hover{filter:brightness(.96);background:color-mix(in srgb,var(--track) 20%,white)}
.timeline-row.ruler .timeline-clip{background:#fff;border:0;color:#8090a4;height:21px;min-height:21px}
body[data-studio="legacy-script"]{--accent:var(--studio-cyan-ink);--page:#f4f6f9}
body[data-studio="legacy-script"]>main{max-width:1700px;margin:auto}
body[data-studio="legacy-script"] .card{border-color:var(--studio-line);box-shadow:0 2px 6px #15274403;border-radius:10px}
body[data-studio="legacy-script"] .column-head{background:var(--studio-navy-soft)}
body[data-studio="legacy-script"] .anchor-nav a[data-status="ok"]{background:#e4f6ef;color:#236b52;border-color:#b4dece}
body[data-studio="legacy-script"] .card[data-status="ok"] .status{background:#e4f6ef;color:#236b52;border-color:#b4dece}
body[data-studio="legacy-script"] .card[data-status="revise"] .status{background:#fff0f7;color:#ae2666;border-color:#f0bfd6}
/* Client portal and submission preparation */
body[data-studio="portal"]{margin-left:224px;min-height:100dvh}
body[data-studio="portal"]>header{height:68px;padding:0 36px;border-bottom:1px solid var(--studio-line);background:#fff}
.portal-breadcrumb{font-size:11px;color:#8995a7;display:flex;gap:10px;align-items:center}.portal-breadcrumb strong{color:#4e6078;font-weight:600}
body[data-studio="portal"] .environment{font-size:9px;color:#7c899b;border-color:#dce4ec;background:#fafbfd;padding:4px 10px;border-radius:6px}
body[data-studio="portal"]>main{max-width:1160px;padding:38px 40px 60px}
body[data-studio="portal"] .intro{text-align:left;position:relative;padding:0 0 12px}
body[data-studio="portal"] .intro h1{font-size:30px;letter-spacing:-.05em;line-height:1.5;font-weight:750;margin:10px 0}
body[data-studio="portal"] .intro>p:last-child{font-size:12px;color:#7b879a;line-height:1.95;max-width:610px}
body[data-studio="portal"] .intro .eyebrow{color:var(--studio-cyan-ink);font-size:9px;letter-spacing:.18em}
body[data-studio="portal"] .intro::after{content:"";position:absolute;right:4px;top:9px;width:8px;height:32px;border-radius:2px;background:var(--studio-pink);transform:rotate(28deg);box-shadow:16px -5px 0 -2px #00b9ed}
body[data-studio="portal"] .steps{border:1px solid var(--studio-line);background:#fff;border-radius:10px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:0;overflow:hidden;box-shadow:var(--studio-shadow);margin:12px 0 20px}
body[data-studio="portal"] .steps li{display:flex;align-items:center;padding:17px 15px;font-size:10px;border-right:1px solid var(--studio-line);gap:9px;color:#62728a}
body[data-studio="portal"] .steps li:last-child{border:0}
body[data-studio="portal"] .steps b{display:grid;place-items:center;background:#edf8fd;color:#2088a8;border-radius:6px;width:26px;height:26px;margin:0;font-size:10px;flex:none}
body[data-studio="portal"] #message:empty{display:none}
body[data-studio="portal"] .login-layout{grid-template-columns:minmax(300px,1fr) minmax(260px,.86fr);gap:24px;margin-top:24px}
body[data-studio="portal"] .card{padding:28px;border:1px solid var(--studio-line);border-radius:14px;box-shadow:var(--studio-shadow);background:#fff}
body[data-studio="portal"] .card h2{font-size:20px;letter-spacing:-.025em;color:var(--studio-ink)}
body[data-studio="portal"] .card>p{font-size:12px;color:var(--studio-muted)}
body[data-studio="portal"] label{font-size:11px;color:#506077;font-weight:650;margin-top:19px}
body[data-studio="portal"] :is(input,textarea,select){padding:12px 13px;font-size:13px;background:#fcfdff}
body[data-studio="portal"] input::placeholder{color:#9aa6b5}
body[data-studio="portal"] button{padding:11px 16px;font-size:12px}
body[data-studio="portal"] button:not(.secondary):not(.request-card):not(.rail-link):not(.studio-menu-toggle):not(.studio-menu-shade){background:var(--studio-pink);border-color:var(--studio-pink);color:#fff}
body[data-studio="portal"] .secondary{background:#fff;border-color:var(--studio-line);color:#62738a}
body[data-studio="portal"] .login-card>p.small{font-size:10px;line-height:1.8}
body[data-studio="portal"] .login-links{border-top:1px solid var(--studio-line);padding-top:17px;margin-top:22px;font-size:11px}
body[data-studio="portal"] .login-links a{font-size:11px;text-decoration:none}
body[data-studio="portal"] .login-links p{margin:10px 0}
body[data-studio="portal"] .preparation{background:#f8fbfe;overflow:hidden;position:relative;box-shadow:none}
body[data-studio="portal"] .preparation :is(h2,#flow-title){font-size:15px}
body[data-studio="portal"] .preparation p{font-size:11px;color:#77869a;line-height:1.9}
body[data-studio="portal"] .divider{background:var(--studio-line);margin:23px 0}
body[data-studio="portal"] .status-dot{background:var(--studio-cyan);box-shadow:0 0 0 4px #00b9ed12;width:7px;height:7px}
.studio-art{margin:0 0 26px;position:relative;display:block;width:100%;height:auto;max-height:235px;overflow:visible}
.art-caption{font-size:9px!important;letter-spacing:.17em;color:#95a1b3!important;margin-top:5px}
body[data-studio="portal"] .demo-banner{border:1px solid #c9e6f1;background:#edf8fd;border-radius:11px;padding:16px 20px;margin:10px 0 23px;position:relative}
body[data-studio="portal"] .demo-banner strong{font-size:11px;color:#36667d}
body[data-studio="portal"] .demo-banner p{font-size:10px;color:#7592a1;margin:4px 0 12px}
body[data-studio="portal"] .demo-banner button{padding:7px 12px;min-height:34px;font-size:10px;border-color:#c5dfed;background:#fff}
body[data-studio="portal"] .account{border-bottom:1px solid var(--studio-line);padding-bottom:17px;font-size:11px;color:#667890}
body[data-studio="portal"] .account p::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#17aa91;margin-right:8px}
body[data-studio="portal"] .request-card{background:#fff;border:1px solid var(--studio-line);border-left:3px solid var(--studio-cyan);border-radius:9px;color:#304962;padding:17px 18px;font-size:12px;margin:8px 0;box-shadow:0 2px 5px #13284003}
body[data-studio="portal"] .request-card:hover{background:#f1fafe;border-color:#72cce6}
body[data-studio="portal"] .request-card span{font-size:10px;margin-top:5px;color:#8090a4}
body[data-studio="portal"] .hearing-detail{border-color:var(--studio-line);padding-top:20px;margin-top:22px}
body[data-studio="portal"] .hearing-detail>h3{font-size:15px}
body[data-studio="portal"] .hearing-detail>p{font-size:12px;color:#6c7a8e}
body[data-studio="portal"] .hearing-question{border-color:var(--studio-line);border-radius:12px;background:#fff;padding:22px;margin:16px 0}
body[data-studio="portal"] .hearing-question h4{font-size:15px;letter-spacing:-.02em;margin:0 0 8px}
.question-number{display:inline-grid;place-items:center;width:28px;height:28px;margin-right:10px;border-radius:7px;color:var(--studio-cyan-ink);background:var(--studio-soft);font:750 11px/1 monospace;vertical-align:middle}
body[data-studio="portal"] .hearing-question .small{margin:5px 0 15px;font-size:11px;color:#8894a5}
body[data-studio="portal"] .hearing-question label{margin-top:13px;font-size:10px}
body[data-studio="portal"] .hearing-question .secondary{background:#f8fafc;color:#75859a;font-size:10px;min-height:31px;padding:5px 9px}
body[data-studio="portal"] .hearing-question textarea{min-height:100px;background:#fcfdff;font-size:13px;line-height:1.9}
body[data-studio="portal"] :is(.review-status,.hearing-success){background:#ebfaf5;border:1px solid #c2e9db;color:#28755d;border-radius:10px;padding:18px;font-size:12px}
body[data-studio="portal"] :is(.hearing-received,.received){background:#f8fafd;border:1px solid var(--studio-line);padding:20px;border-radius:10px}
body[data-studio="portal"] :is(.hearing-received,.received) h4{font-size:12px;color:#62758e}
body[data-studio="portal"] .preserve-lines{font-size:13px;color:#344861}
body[data-studio="portal"] :is(.hearing-import,.confirm-box){border:1px solid #c3e3ee;background:#f6fcff;padding:20px;border-radius:12px}
body[data-studio="portal"] .review-jumps{gap:6px;background:#fff;z-index:5;padding:10px 0;border-color:var(--studio-line)}
body[data-studio="portal"] .review-jumps a{padding:7px 12px;border-radius:7px;text-decoration:none;font-size:11px;background:#f0f8fc}
body[data-studio="portal"] .item{padding:22px 0;border-color:var(--studio-line)}
body[data-studio="portal"] .item h3{font-size:15px;letter-spacing:-.02em}
body[data-studio="portal"] .item p{font-size:13px;color:#52647b;line-height:1.95}
body[data-studio="portal"] .review-controls{border-color:var(--studio-line)}
body[data-studio="portal"] .asset-grid img{background:#f2f5fa;border-radius:10px;border:1px solid var(--studio-line)}
body[data-studio="portal"] .prepare-layout{grid-template-columns:240px minmax(0,1fr);gap:22px}
body[data-studio="portal"] .prepare-layout .card{padding:22px}
body[data-studio="portal"] .summary-counts span{background:#edf8fc;border:1px solid #d4edf5;color:#40819a;font-size:11px;border-radius:7px}
body[data-studio="portal"] .small{font-size:11px;color:#8190a2}
body[data-studio="portal"] .heading h2{font-size:16px}
body[data-studio="portal"] footer{padding:20px 30px 25px;color:#9aa5b5;font-size:9px;letter-spacing:.16em}
body[data-studio="portal"] #hearing details{border-radius:8px;background:#f7f9fc;padding:12px 14px}
body[data-studio="portal"] #hearing details summary{font-size:11px;color:#657b94}
body[data-studio="portal"]:not(.hearing-only) #hearing{display:none!important}
/* Responsive editing: canvas first, controls below; mobile navigation is a drawer. */
@media(max-width:1000px){
  body[data-studio="cuts"] #workspace{grid-template-columns:94px minmax(0,1fr);height:auto}
  body[data-studio="cuts"] .editor{grid-column:2;border-top:1px solid var(--studio-line)}
  body[data-studio="cuts"] #cut-nav{grid-row:1/3;max-height:calc(100dvh - 150px);position:sticky;top:0}
  body[data-studio="cuts"] #cut-nav button{display:block;text-align:center}
  body[data-studio="cuts"] #cut-nav img{width:100%;height:82px}
  body[data-studio="cuts"] #cut-nav small{max-width:100%}
}
@media(max-width:1200px){
  body[data-studio="portal"]>main{padding:30px 26px 48px}
  body[data-studio="portal"] .login-layout{grid-template-columns:1fr}
  body[data-studio="portal"] .preparation{display:grid;grid-template-columns:minmax(180px,.85fr) 1fr;column-gap:24px;align-items:center}
  body[data-studio="portal"] .preparation .studio-art{grid-row:1/8;margin:0}
  body[data-studio="portal"] .preparation .art-caption{display:none}
  body[data-studio="portal"] .preparation .status-dot{display:none}
}
@media(max-width:900px){
  body[data-studio="hub"] .main{padding:22px 18px}
  body[data-studio="hub"] .shell{grid-template-columns:222px minmax(0,1fr)}
  body[data-studio="hub"] .sidebar{padding:22px 13px}
  body[data-studio="portal"] .prepare-layout{grid-template-columns:1fr}
  body[data-studio="portal"] .intro h1{font-size:26px}
  [data-studio] .toolbar-main{flex-wrap:wrap}
}
@media(max-width:850px){
  body.navigation-open{overflow:hidden}
  body[data-studio="hub"] .shell{display:block}
  body[data-studio="hub"] .sidebar,.studio-rail{position:fixed;left:0;top:0;bottom:0;width:260px;height:100dvh;overflow:auto;transform:translateX(-100%);transition:transform .2s;z-index:65;padding:66px 20px 22px}
  body.navigation-open .studio-rail,body[data-studio="hub"].navigation-open .sidebar{transform:translateX(0)}
  body[data-studio="hub"] #step-list{display:grid;grid-template-columns:1fr}
  body[data-studio="hub"] .step-button small{display:block}
  body[data-studio="hub"] .main{padding-top:72px}
  body.has-studio-rail,body[data-studio="portal"]{margin-left:0}
  .studio-menu-toggle{position:fixed;display:flex!important;gap:7px;align-items:center;left:14px;top:13px;z-index:70!important;background:#fff!important;color:#2c4961!important;border:1px solid #d9e4ed!important;min-height:38px!important;padding:7px 11px!important;font-size:11px!important;box-shadow:0 2px 8px #1326400c}
  .studio-menu-toggle span:first-child{font-size:16px}
  .studio-menu-shade:not([hidden]){display:block!important;position:fixed;inset:0;z-index:60;border:0!important;background:#0c1a354f!important;border-radius:0!important;backdrop-filter:blur(2px)}
  body[data-studio="portal"]>header{height:64px;padding:0 18px 0 125px;position:sticky;top:0;z-index:55}
  body[data-studio="portal"] .review-jumps{top:64px}
  body[data-studio="portal"] .item{scroll-margin-top:126px}
  body[data-studio="portal"]>main{padding:28px 20px 45px}
  body[data-studio="portal"] .portal-breadcrumb{font-size:10px}
  body.has-studio-rail:not([data-studio="portal"]){padding-top:65px}
  body[data-studio="hearing"].has-studio-rail{padding:72px 20px 30px}
  body[data-studio="hub"] .topbar h1{font-size:22px}
  body[data-studio="hub"] .case-details-form{grid-template-columns:110px minmax(0,1fr)}
  body[data-studio="hub"] .editor-frame{min-height:650px;height:75dvh}
}
@media(max-width:600px){
  [data-studio] :is(button,select){min-height:42px}
  [data-studio] :is(input,textarea,select){font-size:16px}
  [data-studio] :is(.app-shell,main.shell){padding:12px 12px 30px}
  [data-studio] .hero{padding:18px}
  [data-studio] .hero h1{font-size:21px}
  [data-studio] .hero-stats{padding:0 18px 0 0;min-width:90px}
  [data-studio] .toolbar{position:static;flex-wrap:wrap;gap:7px;padding:9px}
  [data-studio] .toolbar .primary{margin-left:auto}
  [data-studio] .sidebar{position:static;height:auto;max-height:none;border-radius:9px;padding:12px}
  [data-studio] .sidebar nav{display:flex;overflow:auto;gap:5px}
  [data-studio] .sidebar nav button{flex:none;width:auto;min-width:90px}
  body[data-studio="hub"] .sidebar{position:fixed;height:100dvh;border-radius:0;padding:65px 18px 20px}
  body[data-studio="hub"] .sidebar #step-list{display:grid}
  body[data-studio="hub"] .sidebar #step-list button{width:100%}
  body[data-studio="hub"] .main{padding:70px 12px 24px}
  body[data-studio="hub"] .topbar{gap:12px;align-items:flex-start}
  body[data-studio="hub"] .topbar h1{font-size:19px}
  body[data-studio="hub"] .open-editor{padding:8px 9px;font-size:10px;max-width:106px;white-space:normal}
  body[data-studio="hub"] .step-head p{font-size:10px}
  body[data-studio="hub"] .step-head h2{font-size:14px}
  body[data-studio="hub"] .case-details-form{grid-template-columns:1fr}
  body[data-studio="hearing"]{padding:12px}
  body[data-studio="hearing"] :is(header,article,.brief-intro){padding:17px}
  body[data-studio="hearing"] nav{flex-wrap:nowrap;overflow:auto}
  body[data-studio="hearing"] nav button{flex:none;min-width:150px}
  body[data-studio="cuts"] header{padding:16px;align-items:flex-start;flex-direction:column}
  body[data-studio="cuts"] header h1{font-size:18px}
  body[data-studio="cuts"] .actions{flex-wrap:wrap;gap:7px}
  body[data-studio="cuts"] .strip{padding:9px 14px;gap:7px;flex-wrap:wrap}
  body[data-studio="cuts"] #workspace{display:flex;flex-direction:column;min-height:0}
  body[data-studio="cuts"] #cut-nav{position:static;display:flex;overflow-x:auto;width:100%;max-height:110px;padding:10px;gap:7px}
  body[data-studio="cuts"] #cut-nav button{width:85px;flex:none;font-size:10px;min-height:78px;margin:0}
  body[data-studio="cuts"] #cut-nav img{width:27px;height:48px}
  body[data-studio="cuts"] #cut-nav small{font-size:9px}
  body[data-studio="cuts"] .viewer{padding:16px}
  body[data-studio="cuts"] .viewer-head{flex-wrap:wrap;gap:4px}
  body[data-studio="cuts"] .viewer-head h2{margin:0}
  body[data-studio="cuts"] .images{margin-top:14px;grid-template-columns:1fr;gap:20px}
  body[data-studio="cuts"] .images figure:nth-child(2){order:-1}
  body[data-studio="cuts"] .images figure:nth-child(2)>img{height:auto!important;max-height:65dvh!important}
  body[data-studio="cuts"] .source-scroll{height:260px!important;max-height:260px!important}
  body[data-studio="cuts"] .editor{border-left:0;padding:20px 16px}
  body[data-studio="cuts"] .play-controls{gap:6px}
  body[data-studio="cuts"] .play-controls button{font-size:11px;padding:8px}
  .timeline-heading{padding:11px;align-items:flex-start;flex-direction:column;gap:3px}
  body[data-studio="revision"] .topbar{padding:15px;align-items:flex-start;flex-wrap:wrap}
  body[data-studio="revision"] .top-actions{flex-wrap:wrap;gap:6px}
  body[data-studio="revision"] .workspace{display:flex;flex-direction:column}
  body[data-studio="revision"] .page-rail{width:100%;max-height:230px;overflow:auto}
  body[data-studio="revision"] .page-rail .rail-heading{position:static}
  body[data-studio="portal"]>main{padding:25px 15px 36px}
  body[data-studio="portal"] .intro h1{font-size:25px;max-width:310px;line-height:1.55}
  body[data-studio="portal"] .intro>p:last-child{font-size:11px;max-width:325px}
  body[data-studio="portal"] .intro::after{right:16px;top:5px;width:5px;height:22px}
  body[data-studio="portal"] .steps{grid-template-columns:repeat(2,minmax(0,1fr));margin:8px 0 20px}
  body[data-studio="portal"] .steps li{padding:12px;font-size:10px;border-bottom:1px solid var(--studio-line)}
  body[data-studio="portal"] .steps li:nth-child(even){border-right:0}
  body[data-studio="portal"] .steps li:nth-child(n+3){border-bottom:0}
  body[data-studio="portal"] .card{padding:21px 18px;border-radius:12px}
  body[data-studio="portal"] .login-layout{gap:16px;margin-top:18px}
  body[data-studio="portal"] .preparation{display:block}
  body[data-studio="portal"] .preparation .studio-art{height:180px;margin-bottom:20px}
  body[data-studio="portal"] .card h2{font-size:19px}
  body[data-studio="portal"] .demo-banner{padding:13px 15px}
  body[data-studio="portal"] .demo-banner .toolbar{background:transparent;border:0;padding:0;box-shadow:none}
  body[data-studio="portal"] .demo-banner button{font-size:10px;min-height:40px}
  body[data-studio="portal"] .hearing-question{padding:17px 14px;margin:13px 0}
  body[data-studio="portal"] .hearing-question h4{font-size:14px;line-height:1.7}
  body[data-studio="portal"] .hearing-question textarea,body[data-studio="portal"] :is(input,textarea,select){font-size:16px}
  body[data-studio="portal"] .hearing-detail{margin-top:18px}
  body[data-studio="portal"] .hearing-detail>h3{font-size:13px}
  body[data-studio="portal"] .review-jumps{flex-wrap:wrap;gap:5px}
  body[data-studio="portal"] .review-jumps a{min-height:39px;padding:9px 11px}
  body[data-studio="portal"] .request-card{font-size:11px;padding:15px 13px}
  body[data-studio="portal"] .toolbar{box-shadow:none;border:0;padding:0}
  body[data-studio="portal"] .toolbar button{flex:1}
  body[data-studio="portal"] .account{margin-top:16px}
  body[data-studio="portal"] .environment{font-size:8px;white-space:nowrap}
  body[data-studio="portal"] .portal-breadcrumb>span{display:none}
  body[data-studio="portal"] .prepare-controls :is(input,select){font-size:16px}
  body[data-studio="portal"] .hearing-import{padding:14px}
}
@media(prefers-reduced-motion:reduce){[data-studio] *,[data-studio] *::before,[data-studio] *::after{transition:none!important;scroll-behavior:auto!important}}
