:root { color-scheme: dark; --bg:#071019; --deep:#040a11; --panel:#101b29; --panel-2:#142233; --line:rgba(217,195,151,.15); --line-strong:rgba(217,195,151,.31); --gold:#d1ad6c; --gold-soft:#ead8b4; --paper:#eee7da; --muted:#96a3b1; --green:#75b89a; --red:#d77b7f; --cyan:#79aeb6; --serif:"Noto Serif SC","Songti SC",serif; --sans:"Noto Sans SC","Microsoft YaHei",sans-serif; }
* { box-sizing:border-box; } body { min-height:100vh; margin:0; color:var(--paper); background:var(--bg); font-family:var(--sans); } a { color:inherit; text-decoration:none; } button,input,textarea,select { font:inherit; } button { cursor:pointer; } [hidden] { display:none !important; }
.skip-link { position:fixed; z-index:100; top:10px; left:10px; padding:10px 14px; background:var(--paper); color:var(--deep); transform:translateY(-150%); }.skip-link:focus{transform:none}
.studio-topbar { position:sticky; z-index:20; top:0; display:grid; grid-template-columns:300px 1fr auto; align-items:center; min-height:76px; padding:0 28px; border-bottom:1px solid var(--line); background:rgba(7,16,25,.94); backdrop-filter:blur(18px); }
.studio-brand { display:flex; align-items:center; gap:12px; }.studio-brand>span:first-child{display:grid;width:39px;height:39px;place-items:center;border:1px solid var(--gold);border-radius:50%;color:var(--gold)}.studio-brand strong,.studio-brand small{display:block}.studio-brand strong{font:600 14px var(--serif);letter-spacing:.12em}.studio-brand small{margin-top:3px;color:var(--gold);font-size:12px;letter-spacing:.17em}
.studio-breadcrumb { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:12px; }.studio-breadcrumb i{opacity:.4}.studio-breadcrumb strong{color:#cbd3dc;font-weight:500}.topbar-actions{display:flex;align-items:center;gap:18px;color:var(--muted);font-size:12px}.topbar-actions>a:not(.studio-avatar){color:var(--gold)}.save-state{display:flex;align-items:center;gap:7px}.save-state i{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}.save-state.saving i{background:var(--gold);box-shadow:0 0 8px var(--gold)}.save-state.error i{background:var(--red);box-shadow:0 0 8px var(--red)}.studio-avatar{display:grid;width:36px;height:36px;overflow:hidden;place-items:center;border:1px solid var(--line-strong);border-radius:50%;color:var(--gold)}.studio-avatar img{width:100%;height:100%;object-fit:cover}
.static-studio-note{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:center;padding:13px clamp(16px,4vw,44px);border-bottom:1px solid rgba(209,173,108,.25);background:rgba(209,173,108,.07);color:var(--muted)}.static-studio-note>span{display:grid;width:30px;height:30px;place-items:center;border:1px solid var(--line-strong);border-radius:50%;color:var(--gold)}.static-studio-note strong{display:block;color:var(--gold-soft);font-size:12px}.static-studio-note p{margin:3px 0 0;font-size:12px;line-height:1.55}
.studio-loading { display:grid; min-height:calc(100vh - 76px); place-items:center; align-content:center; gap:18px; color:var(--muted); }.studio-loading span{width:48px;height:48px;border:1px solid var(--line);border-top-color:var(--gold);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.studio-gate { width:min(620px,calc(100% - 32px)); margin:12vh auto; padding:clamp(30px,6vw,60px); border:1px solid var(--line); background:var(--panel); text-align:center; }.studio-eyebrow{margin:0;color:var(--gold);font-size:12px;font-weight:700;letter-spacing:.18em}.studio-gate h1,.create-intro h1{margin:8px 0 17px;font:700 clamp(34px,6vw,55px)/1.25 var(--serif)}.studio-gate>p:not(.studio-eyebrow),.create-intro>p:not(.studio-eyebrow){color:var(--muted);line-height:1.9}.studio-gate>div{display:flex;justify-content:center;gap:18px;align-items:center;margin-top:28px}.studio-primary{display:inline-flex;min-height:46px;align-items:center;justify-content:center;padding:0 20px;border:1px solid var(--gold);background:var(--gold);color:#101722;font-weight:600}.studio-primary:disabled{opacity:.5;cursor:wait}
.create-module { display:grid; grid-template-columns:.8fr 1.2fr; gap:70px; width:min(1040px,calc(100% - 40px)); margin:9vh auto; padding:clamp(30px,6vw,65px); border:1px solid var(--line); background:linear-gradient(130deg,var(--panel),#0b1521); }.create-form{display:grid;grid-template-columns:1fr 1fr;gap:18px}.create-form label,.module-form label,.publish-card label{display:grid;gap:8px}.create-form label>span,.module-form label>span,.publish-card label>span{color:#c4ccd5;font-size:12px}.create-form input,.create-form textarea,.module-form input,.module-form textarea,.module-form select,.publish-card select{width:100%;border:1px solid rgba(255,255,255,.11);outline:0;background:rgba(3,9,15,.52);color:var(--paper)}.create-form input,.module-form input,.module-form select,.publish-card select{height:47px;padding:0 13px}.create-form textarea,.module-form textarea{padding:12px 13px;resize:vertical;line-height:1.7}.create-form input:focus,.create-form textarea:focus,.module-form input:focus,.module-form textarea:focus,.module-form select:focus,.publish-card select:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(209,173,108,.07)}.wide{grid-column:1/-1}.create-actions{display:flex;align-items:center;gap:18px}.create-actions a{color:var(--muted);font-size:12px}.form-message{margin:0;color:var(--green);font-size:12px}.form-message.error{color:var(--red)}
.studio-shell { display:grid; grid-template-columns:270px minmax(0,1fr); min-height:calc(100vh - 76px); }.studio-sidebar{position:sticky;top:76px;align-self:start;height:calc(100vh - 76px);padding:27px 18px;border-right:1px solid var(--line);background:#09131e}.module-switcher{padding:0 8px 24px;border-bottom:1px solid var(--line)}.module-switcher label{display:block;margin-bottom:7px;color:var(--muted);font-size:12px;letter-spacing:.12em}.module-switcher select{width:100%;height:43px;padding:0 10px;border:1px solid var(--line);outline:0;background:var(--deep);color:var(--paper);font-size:12px}.module-switcher>a{display:block;margin-top:11px;color:var(--gold);font-size:12px}.studio-sidebar nav{display:grid;gap:4px;margin-top:24px}.studio-sidebar nav button{display:grid;grid-template-columns:30px 1fr auto;align-items:center;min-height:48px;padding:0 11px;border:1px solid transparent;background:transparent;color:var(--muted);text-align:left}.studio-sidebar nav button:hover{color:var(--paper)}.studio-sidebar nav button.active{border-color:var(--line);background:rgba(209,173,108,.06);color:var(--paper)}.studio-sidebar nav button>span{color:var(--gold);font-family:var(--serif)}.studio-sidebar nav button b{font-size:12px;font-weight:500}.studio-sidebar nav button small{font-size:12px}.sidebar-note{position:absolute;right:18px;bottom:25px;left:18px;padding:16px;border:1px solid var(--line);color:var(--muted);font-size:12px;line-height:1.7}.sidebar-note strong{color:var(--gold-soft);font-size:12px}.sidebar-note p{margin:6px 0 0}
.studio-workspace { min-width:0; padding:55px clamp(28px,5vw,75px) 100px; background:radial-gradient(circle at 100% 0,rgba(55,88,115,.11),transparent 34rem),var(--bg); }.studio-section{display:none;max-width:1180px;margin:auto}.studio-section.active{display:block}.workspace-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:35px;margin-bottom:35px}.workspace-heading h1{margin:7px 0 10px;font:700 clamp(32px,5vw,49px)/1.25 var(--serif)}.workspace-heading>div>p:last-child{max-width:660px;margin:0;color:var(--muted);font-size:12px;line-height:1.8}.status-pill{padding:7px 12px;border:1px solid var(--line-strong);color:var(--gold);font-size:12px}
.overview-hero{display:grid;grid-template-columns:150px 1fr;gap:32px;align-items:center;padding:32px;border:1px solid var(--line);background:linear-gradient(120deg,var(--panel),rgba(11,21,33,.75))}.progress-ring{--value:calc(var(--progress)*1%);display:grid;width:122px;height:122px;place-items:center;align-content:center;border-radius:50%;background:radial-gradient(circle,var(--panel) 60%,transparent 62%),conic-gradient(var(--gold) var(--value),rgba(255,255,255,.07) 0)}.progress-ring strong{font:700 28px var(--serif);color:var(--gold-soft)}.progress-ring span{margin-top:3px;color:var(--muted);font-size:12px}.overview-hero h2{margin:7px 0 9px;font:700 29px var(--serif)}.overview-hero>div:last-child>p:not(.studio-eyebrow){margin:0;color:var(--muted);font:400 13px/1.8 var(--serif)}.overview-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:15px}.overview-tags span{padding:4px 8px;border:1px solid var(--line);color:var(--gold);font-size:12px}
.overview-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}.overview-grid article{display:grid;grid-template-columns:48px 1fr auto;gap:15px;align-items:center;min-height:105px;padding:17px;border:1px solid var(--line);background:rgba(15,26,39,.72)}.overview-icon{display:grid;width:48px;height:48px;place-items:center;border:1px solid var(--line-strong);color:var(--gold);font:600 15px var(--serif)}.overview-grid strong{font:600 13px var(--serif)}.overview-grid p{margin:5px 0 0;color:var(--muted);font-size:12px}.overview-grid b{align-self:start;padding:4px 7px;border:1px solid var(--line);color:var(--muted);font-size:12px;font-weight:500}.overview-grid b.ready{color:var(--green);border-color:rgba(117,184,154,.3)}.overview-grid button{grid-column:2/-1;justify-self:start;padding:0;border:0;border-bottom:1px solid var(--line);background:none;color:var(--gold);font-size:12px}.next-steps{margin-top:35px;padding:27px;border:1px solid var(--line)}.next-steps h2{margin:5px 0 15px;font:600 20px var(--serif)}.next-steps ol{display:grid;gap:10px;margin:0;padding-left:22px;color:#c0c9d2;font-size:12px}.next-steps li::marker{color:var(--gold)}
.json-import,.text-button{display:inline-flex;min-height:42px;align-items:center;padding:0 14px;border:1px solid var(--line-strong);background:transparent;color:var(--gold);font-size:12px}.json-import input{position:absolute;width:1px;height:1px;opacity:0}.form-section{margin-bottom:16px;padding:30px;border:1px solid var(--line);background:rgba(13,24,37,.66)}.form-section-title{display:grid;grid-template-columns:42px 1fr;gap:15px;margin-bottom:25px}.form-section-title>span{display:grid;width:42px;height:42px;place-items:center;border:1px solid var(--line-strong);color:var(--gold);font-size:12px}.form-section-title h2{margin:0;font:600 20px var(--serif)}.form-section-title p{margin:5px 0 0;color:var(--muted);font-size:12px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.form-grid.compact{grid-template-columns:repeat(4,1fr)}.module-form label small{color:var(--muted);font-size:12px;text-align:right}.form-actions{display:flex;justify-content:flex-end;align-items:center;gap:20px;margin-top:20px}
.runbook-form{display:grid;gap:16px}.runbook-opening,.runbook-block{padding:25px;border:1px solid var(--line);background:rgba(13,24,37,.66)}.runbook-opening label{display:grid;gap:9px}.runbook-opening label>span{color:#c4ccd5;font-size:12px}.runbook-opening textarea,.runbook-row input,.runbook-row textarea{width:100%;border:1px solid rgba(255,255,255,.11);outline:0;background:rgba(3,9,15,.52);color:var(--paper)}.runbook-opening textarea,.runbook-row textarea{padding:11px 12px;resize:vertical;line-height:1.65}.runbook-row input{height:42px;padding:0 11px}.runbook-opening textarea:focus,.runbook-row input:focus,.runbook-row textarea:focus{border-color:var(--gold)}.runbook-block>header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:17px}.runbook-block h2{margin:4px 0 0;font:600 20px var(--serif)}.runbook-block>header>button{min-height:38px;padding:0 12px;border:1px solid var(--line-strong);background:transparent;color:var(--gold);font-size:12px}.runbook-list{display:grid;gap:9px}.runbook-empty{padding:22px;border:1px dashed var(--line);color:var(--muted);font-size:12px;text-align:center}.runbook-row{display:grid;grid-template-columns:1fr 1fr auto;gap:9px;padding:13px;border:1px solid var(--line);background:rgba(4,10,17,.38)}.runbook-row textarea{grid-column:1/3;min-height:70px}.runbook-row.trackers{grid-template-columns:1fr 120px auto}.runbook-row.trackers textarea{display:none}.runbook-remove{width:38px;height:38px;border:1px solid rgba(215,123,127,.3);background:transparent;color:var(--red)}
.import-notice{display:grid;grid-template-columns:38px 1fr;gap:15px;margin-bottom:22px;padding:18px;border:1px solid rgba(121,174,182,.25);background:rgba(121,174,182,.05)}.import-notice>span{color:var(--cyan);font-size:23px}.import-notice strong{color:#bdd7da;font:600 13px var(--serif)}.import-notice p{margin:6px 0 0;color:var(--muted);font-size:12px;line-height:1.7}.import-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.import-card{padding:24px;border:1px solid var(--line);background:rgba(13,24,37,.72)}.import-card-head{display:grid;grid-template-columns:48px 1fr auto;gap:13px;align-items:center}.import-card-head>span{display:grid;width:48px;height:48px;place-items:center;border:1px solid var(--line-strong);color:var(--gold);font:600 16px var(--serif)}.import-card-head p{margin:0;color:var(--gold);font-size:12px;letter-spacing:.13em}.import-card-head h2{margin:4px 0 0;font:600 18px var(--serif)}.import-card-head b{align-self:start;color:var(--muted);font-size:12px;font-weight:500}.import-card>p{min-height:36px;margin:18px 0;color:var(--muted);font-size:12px;line-height:1.7}.upload-form{display:grid;grid-template-columns:1fr auto;gap:8px}.upload-form label{grid-column:1/-1}.upload-form input{position:absolute;width:1px;height:1px;opacity:0}.upload-form label span{display:grid;min-height:78px;place-items:center;border:1px dashed var(--line-strong);color:var(--gold);font-size:12px;transition:.18s}.upload-form label:hover span{background:rgba(209,173,108,.05)}.upload-form select,.upload-form button{min-height:39px;border:1px solid var(--line);background:var(--deep);color:var(--muted);font-size:12px}.upload-form select{padding:0 8px}.upload-form button{padding:0 12px;color:var(--gold)}.upload-form button:disabled{opacity:.5;cursor:wait}.upload-state{grid-column:1/-1;min-height:15px;color:var(--green);font-size:12px}.upload-state.error{color:var(--red)}
.resource-filter{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:18px}.resource-filter button{padding:7px 12px;border:1px solid var(--line);background:transparent;color:var(--muted);font-size:12px}.resource-filter button.active{border-color:var(--gold);color:var(--gold)}.studio-resource-list{display:grid;gap:8px}.studio-resource-row{display:grid;grid-template-columns:52px minmax(0,1fr) auto auto;gap:15px;align-items:center;padding:14px 16px;border:1px solid var(--line);background:rgba(13,24,37,.68)}.resource-kind{display:grid;width:52px;height:52px;place-items:center;border:1px solid var(--line-strong);color:var(--gold);font-size:12px;font-weight:700}.studio-resource-row strong,.studio-resource-row small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.studio-resource-row strong{font:600 12px var(--serif)}.studio-resource-row small{margin-top:5px;color:var(--muted);font-size:12px}.audience-badge{padding:5px 8px;border:1px solid var(--line);color:var(--muted);font-size:12px}.audience-badge.player{color:var(--green);border-color:rgba(117,184,154,.3)}.audience-badge.keeper{color:var(--cyan);border-color:rgba(121,174,182,.3)}.resource-delete{width:34px;height:34px;border:1px solid rgba(215,123,127,.22);background:transparent;color:var(--red)}.studio-empty{padding:65px;border:1px dashed var(--line-strong);text-align:center;color:var(--muted)}.studio-empty>span{color:var(--gold);font-size:30px}.studio-empty h2{color:var(--paper);font:600 22px var(--serif)}.studio-empty button{padding:9px 13px;border:1px solid var(--gold);background:transparent;color:var(--gold)}
.publish-layout{display:grid;grid-template-columns:1fr 390px;gap:25px}.publish-checklist,.publish-card{padding:28px;border:1px solid var(--line);background:rgba(13,24,37,.68)}.publish-checklist h2,.publish-card h2{margin:4px 0 22px;font:600 23px var(--serif)}.publish-check-row{display:grid;grid-template-columns:28px 1fr auto;gap:12px;align-items:center;padding:14px 0;border-top:1px solid var(--line)}.publish-check-row>span{display:grid;width:24px;height:24px;place-items:center;border:1px solid var(--line);border-radius:50%;color:var(--muted);font-size:12px}.publish-check-row.ready>span{border-color:var(--green);color:var(--green)}.publish-check-row strong{display:block;font-size:12px}.publish-check-row small{display:block;margin-top:4px;color:var(--muted);font-size:12px}.publish-check-row b{color:var(--muted);font-size:12px;font-weight:500}.publish-check-row.ready b{color:var(--green)}.publish-card{align-self:start}.publish-card label{margin-bottom:20px}.publish-warning{margin:20px 0;padding:16px;border:1px solid rgba(209,173,108,.2);background:rgba(209,173,108,.05)}.publish-warning strong{color:var(--gold-soft);font-size:12px}.publish-warning p{margin:7px 0 0;color:var(--muted);font-size:12px;line-height:1.7}.publish-card .studio-primary{width:100%}.publish-card .form-message{margin-top:13px;text-align:center}
.studio-toast{position:fixed;right:24px;bottom:24px;z-index:50;max-width:min(380px,calc(100% - 48px));padding:13px 18px;border:1px solid var(--line-strong);background:var(--panel-2);opacity:0;transform:translateY(12px);transition:.2s;pointer-events:none;font-size:12px}.studio-toast.visible{opacity:1;transform:none}.confirm-dialog{width:min(440px,calc(100% - 28px));padding:0;border:1px solid var(--line-strong);background:var(--panel);color:var(--paper)}.confirm-dialog::backdrop{background:rgba(3,7,12,.8);backdrop-filter:blur(7px)}.confirm-dialog form{padding:30px}.confirm-dialog h2{margin:7px 0 12px;font:600 24px var(--serif)}.confirm-dialog form>p:not(.studio-eyebrow){color:var(--muted);font-size:12px}.confirm-dialog form>div{display:flex;justify-content:flex-end;gap:9px;margin-top:25px}.confirm-dialog button{padding:9px 14px;border:1px solid var(--line);background:transparent;color:var(--muted)}.confirm-dialog button.danger{border-color:rgba(215,123,127,.4);color:var(--red)}
.visual-identity-fields input[type="color"]{height:47px;padding:5px;cursor:pointer}.visual-identity-fields input[type="range"]{height:44px;padding:0;accent-color:var(--gold);cursor:pointer}.theme-color-field{grid-template-columns:minmax(0,1fr) auto;align-items:end}.theme-color-field>span{grid-column:1/-1}.theme-color-field small{min-width:76px;color:var(--gold)!important;font:600 12px/47px monospace;text-align:right!important}.visual-preview-grid{display:grid;grid-template-columns:.78fr 1.22fr 1fr;gap:12px;margin-top:22px}.visual-preview{min-width:0;border:1px solid var(--line);background:rgba(3,9,15,.4)}.visual-preview header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 12px;border-bottom:1px solid var(--line)}.visual-preview header span{color:var(--gold);font-size:12px;letter-spacing:.11em}.visual-preview header strong{font:600 12px var(--serif)}.visual-preview>div{position:relative;display:grid;min-height:150px;overflow:hidden;place-items:center;background:radial-gradient(circle,rgba(209,173,108,.14),transparent 55%),linear-gradient(135deg,#0d1a27,#080f18)}.visual-preview-card>div{aspect-ratio:4/5}.visual-preview-banner>div{aspect-ratio:16/7}.visual-preview-og>div{aspect-ratio:1200/630}.visual-preview img{position:absolute;width:100%;height:100%;object-fit:cover}.visual-preview [data-visual-fallback]{position:relative;z-index:1;padding:8px 10px;border:1px solid color-mix(in srgb,var(--preview-theme,var(--gold)) 55%,transparent);color:var(--preview-theme,var(--gold));font-size:12px;letter-spacing:.08em}
@media(max-width:1050px){.studio-topbar{grid-template-columns:auto 1fr}.studio-breadcrumb{display:none}.studio-shell{grid-template-columns:220px 1fr}.overview-grid{grid-template-columns:1fr}.form-grid.compact{grid-template-columns:1fr 1fr}.publish-layout{grid-template-columns:1fr}.publish-card{max-width:none}.sidebar-note{display:none}.visual-preview-grid{grid-template-columns:1fr 1fr}.visual-preview-og{grid-column:1/-1}}
.runbook-row.clues{grid-template-columns:1fr auto}.runbook-row.clues textarea{grid-column:1/-1}
@media(max-width:760px){.studio-topbar{padding:0 14px}.save-state,.topbar-actions>a:not(.studio-avatar){display:none}.studio-brand small{display:none}.studio-shell{display:block}.studio-sidebar{position:static;width:100%;height:auto;padding:12px;border-right:0;border-bottom:1px solid var(--line)}.module-switcher{display:grid;grid-template-columns:1fr auto;gap:6px;padding-bottom:10px}.module-switcher label{grid-column:1/-1}.studio-sidebar nav{display:flex;overflow:auto;margin-top:10px}.studio-sidebar nav button{flex:0 0 auto;grid-template-columns:24px auto}.studio-sidebar nav button small{display:none}.studio-workspace{padding:35px 14px 70px}.workspace-heading{align-items:flex-start;flex-direction:column}.overview-hero{grid-template-columns:1fr}.progress-ring{width:105px;height:105px}.form-section{padding:20px}.form-grid,.form-grid.compact,.import-grid{grid-template-columns:1fr}.publish-layout{grid-template-columns:1fr}.create-module{grid-template-columns:1fr;gap:25px;margin:4vh auto}.create-form{grid-template-columns:1fr}.wide{grid-column:auto}.studio-resource-row{grid-template-columns:43px minmax(0,1fr) auto}.resource-kind{width:43px;height:43px}.audience-badge{display:none}.runbook-opening,.runbook-block{padding:18px}.runbook-row,.runbook-row.trackers,.runbook-row.clues{grid-template-columns:1fr auto}.runbook-row input,.runbook-row textarea{grid-column:1/-1}.runbook-row .runbook-remove{grid-column:2;grid-row:1}.runbook-block>header{align-items:flex-start;flex-direction:column}.visual-preview-grid{grid-template-columns:1fr}.visual-preview-og{grid-column:auto}}
.create-form select{width:100%;height:47px;padding:0 13px;border:1px solid rgba(255,255,255,.11);outline:0;background:rgba(3,9,15,.52);color:var(--paper)}
.create-form select:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(209,173,108,.07)}