:root {
  --studio-ink:#17251e;
  --studio-paper:#eee8dc;
  --studio-green:#1f674b;
  --studio-deep:#0d2d21;
  --studio-gold:#d1ab59;
  --studio-red:#ca5946;
  --studio-line:#89968e;
  --studio-mist:#dce5dc;
}
.studio-page { background:radial-gradient(circle at 88% 2%,rgba(209,171,89,.15),transparent 28rem),#f2ede3; }
.studio-intro { position:relative; overflow:hidden; background:linear-gradient(135deg,#f4efe5 0 68%,#e3dccd 68%); border:1px solid var(--studio-ink); }
.studio-intro::after { content:"LOCAL"; position:absolute; right:-.05em; bottom:-.22em; color:rgba(23,37,30,.035); font:900 180px/1 ui-monospace,monospace; letter-spacing:-.1em; pointer-events:none; }
.studio-ticket { position:relative; z-index:1; width:220px; min-height:220px; display:flex; flex-direction:column; justify-content:center; padding:25px; color:#f6efdf; background:var(--studio-deep); box-shadow:10px 11px 0 var(--studio-gold); transform:rotate(1.5deg); }
.studio-ticket span,.studio-ticket small { font:800 8px/1.7 ui-monospace,monospace; letter-spacing:.14em; }
.studio-ticket b { margin:12px 0 0; color:var(--studio-gold); font:900 76px/.8 "STKaiti","KaiTi",serif; }
.studio-ticket strong { margin:10px 0 18px; font:800 13px ui-monospace,monospace; letter-spacing:.08em; }
.studio-shell { box-shadow:0 28px 80px rgba(20,35,27,.13); }
.studio-nav { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); align-items:stretch; overflow:visible; background:#e3ddcf; }
.studio-nav .tool-nav-group { min-width:0; }
.studio-nav .tool-nav-group>div { display:flex; flex-wrap:wrap; }
.studio-nav a { min-width:68px; flex:1; }
.studio-shell .expansion-panel { min-height:650px; background:var(--studio-paper); }
.studio-editor-grid { display:grid; grid-template-columns:1fr 1fr; min-height:650px; }
.studio-pane { min-width:0; display:flex; flex-direction:column; padding:28px; border-right:1px solid var(--studio-ink); }
.studio-pane:last-child { border-right:0; }
.studio-pane>header { min-height:38px; display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:13px; }
.studio-pane>header strong { font-size:13px; }
.studio-pane>header span,.studio-pane>header label { color:#6a776f; font:700 8px ui-monospace,monospace; }
.studio-pane>header label { display:flex; align-items:center; gap:7px; }
.studio-pane textarea { min-height:470px; flex:1; padding:18px; resize:vertical; color:#193127; background:#f8f4eb; border:1px solid #839087; font:600 11px/1.75 ui-monospace,SFMono-Regular,monospace; tab-size:2; }
.studio-pane textarea[readonly] { background:#e3ebe3; }
.studio-actions { display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.studio-actions button,.studio-actions select,.studio-page .expansion-panel button,.studio-page .expansion-panel select,.studio-page .expansion-panel input { min-height:39px; padding:8px 12px; color:var(--studio-ink); background:#f8f4eb; border:1px solid var(--studio-ink); font:750 10px "Songti SC","STSong",serif; }
.studio-page .expansion-panel button { cursor:pointer; transition:transform .14s ease,box-shadow .14s ease; }
.studio-page .expansion-panel button:hover { transform:translateY(-1px); box-shadow:2px 3px 0 var(--studio-ink); }
.studio-page .expansion-panel .primary-button { color:#fff; background:var(--studio-green); }
.studio-note { margin-top:12px; color:#627168; font:500 9px/1.8 ui-sans-serif,system-ui,sans-serif; }
.cron-layout,.file-codec,.media-studio,.palette-layout,.shape-layout,.timezone-layout,.calculator-layout,.meta-layout,.lorem-layout { display:grid; min-height:650px; grid-template-columns:.85fr 1.15fr; }
.cron-builder,.file-codec>section,.media-controls,.palette-layout>section:first-child,.shape-controls,.timezone-layout>section,.calculator-main,.meta-controls,.lorem-layout>section { padding:45px; }
.cron-builder,.file-codec>section:first-child,.media-controls,.palette-layout>section:first-child,.shape-controls,.timezone-layout>section:first-child,.calculator-main,.meta-controls,.lorem-layout>section:first-child { border-right:1px solid var(--studio-ink); }
.studio-page .section-kicker { margin:0 0 11px; color:var(--studio-red); font:850 8px ui-monospace,monospace; letter-spacing:.18em; }
.studio-page .expansion-panel h2 { margin:0 0 26px; font:900 30px "STKaiti","KaiTi",serif; }
.cron-builder>label,.media-controls>label,.palette-layout>section:first-child>label,.shape-controls>label,.timezone-layout>section:first-child>label,.calculator-main>label,.meta-controls>label,.lorem-layout>section:first-child>label { display:grid; gap:7px; margin:15px 0; color:#5d6b63; font-size:9px; }
.cron-builder input,.media-controls input:not([type=file]),.timezone-layout input,.timezone-layout select,.calculator-main input,.meta-controls input,.meta-controls textarea,.lorem-layout select { width:100%; }
.cron-builder>label input,.calculator-main>label input { min-height:58px!important; font:800 19px ui-monospace,monospace!important; }
.cron-presets { display:flex; flex-wrap:wrap; gap:6px; margin:13px 0; }
.cron-result { display:grid; align-content:center; padding:55px; background:var(--studio-mist); }
.cron-result>span { color:var(--studio-red); font:800 8px ui-monospace,monospace; letter-spacing:.13em; }
.cron-result h3 { margin:12px 0 26px; font:900 34px/1.25 "STKaiti","KaiTi",serif; }
.cron-result ol { margin:0; padding:0; list-style:none; }
.cron-result li { display:grid; grid-template-columns:36px 1fr; gap:12px; padding:13px 0; border-top:1px solid #aab5ad; font:650 11px ui-monospace,monospace; }
.cron-result li span { color:var(--studio-red); }
.cron-result>p { color:#a03e31; font-size:10px; }
.header-audit-layout { display:grid; grid-template-columns:1.1fr .45fr; min-height:650px; }
.header-audit-layout>.studio-pane { min-height:440px; }
.header-score { display:grid; place-items:center; align-content:center; padding:30px; text-align:center; background:var(--studio-deep); color:#fff; }
.score-ring { width:150px; height:150px; display:grid; place-items:center; align-content:center; border:8px solid var(--studio-gold); border-radius:50%; box-shadow:0 0 0 1px #fff,0 20px 40px rgba(0,0,0,.25); }
.score-ring b { font:900 54px/.9 ui-monospace,monospace; }
.score-ring span { color:#d4c9ad; font:700 9px ui-monospace,monospace; }
.header-score h2 { margin:22px 0 5px!important; color:var(--studio-gold); }
.header-score p { color:#aabdb2; font-size:9px; }
.header-results { grid-column:1/-1; display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--studio-ink); }
.header-result { min-height:120px; padding:17px; border-right:1px solid #a3aea6; border-bottom:1px solid #a3aea6; }
.header-result strong { display:block; font-size:10px; word-break:break-all; }
.header-result span { display:inline-block; margin:8px 0; padding:4px 7px; color:#fff; background:var(--studio-green); font:800 7px ui-monospace,monospace; }
.header-result.missing span { background:var(--studio-red); }
.header-result p { margin:0; color:#617068; font:500 8px/1.55 ui-sans-serif,system-ui,sans-serif; }
.file-codec textarea { width:100%; min-height:310px; padding:14px; resize:vertical; font:600 10px/1.6 ui-monospace,monospace; }
.studio-dropzone { min-height:150px; display:grid!important; place-items:center; align-content:center; gap:7px; padding:20px; color:var(--studio-ink)!important; background:#f7f2e8; border:1px dashed var(--studio-green); text-align:center; cursor:pointer; }
.studio-dropzone input[type=file] { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.studio-dropzone span { font:900 21px "STKaiti","KaiTi",serif; }
.studio-dropzone small { color:#718078; font-size:8px; }
.switch-line { display:flex!important; grid-template-columns:auto 1fr!important; align-items:center; gap:8px!important; }
.switch-line input { width:auto!important; min-height:0!important; }
.file-decode-row,.control-pair { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.file-decode-row label,.control-pair label { display:grid; gap:5px; color:#607068; font-size:8px; }
.media-studio { grid-template-columns:360px 1fr; }
.media-preview,.palette-preview,.shape-stage,.meta-previews { min-width:0; display:grid; place-items:center; align-content:center; gap:16px; padding:32px; background:var(--studio-mist); }
.media-controls input[type=range],.palette-layout input[type=range],.shape-controls input[type=range] { width:100%; padding:0; border:0; }
#watermark-canvas,#palette-canvas { max-width:100%; max-height:540px; background:#d1d8d1; border:1px solid var(--studio-ink); box-shadow:8px 9px 0 var(--studio-ink); }
.media-preview p,.palette-preview p { color:#617068; font-size:9px; }
.watermark-pro { grid-template-columns:430px 1fr; }
.watermark-pro .media-controls { padding:30px; max-height:780px; overflow:auto; }
.compact-upload { padding:10px; background:#e4ebe4; border:1px dashed #93a299; }
.compact-upload input { min-height:32px!important; padding:4px!important; background:transparent!important; border:0!important; }
.preview-toolbar { width:100%; display:flex; justify-content:space-between; gap:14px; padding:10px 12px; color:#e9e2d5; background:var(--studio-deep); font:750 9px ui-monospace,monospace; }
.preview-toolbar span { color:#d4b86e; text-align:right; }
.crop-workspace { display:grid; grid-template-columns:380px minmax(0,1fr); min-height:680px; }
.crop-controls { padding:34px; border-right:1px solid var(--studio-ink); }
.crop-controls>label,.steg-pane>label { display:grid; gap:7px; margin:14px 0; color:#5d6b63; font-size:9px; }
.crop-controls input[type=range] { width:100%; padding:0; border:0; }
.transform-buttons { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin:12px 0; }
.crop-stage-area { min-width:0; padding:28px; background:var(--studio-mist); }
.crop-stage { position:relative; width:fit-content; max-width:100%; max-height:520px; margin:18px auto; overflow:auto; line-height:0; background:#bfc9c1; border:1px solid var(--studio-ink); box-shadow:8px 9px 0 var(--studio-ink); touch-action:none; }
#crop-source-canvas { display:block; max-width:none; width:min(760px,100%); height:auto; transform-origin:top left; }
.crop-box { position:absolute; z-index:2; min-width:24px; min-height:24px; border:2px solid #fff; outline:1px solid #0d2d21; background:rgba(29,103,75,.12); box-shadow:0 0 0 9999px rgba(6,18,12,.48); cursor:move; touch-action:none; }
.crop-box::before,.crop-box::after { content:""; position:absolute; pointer-events:none; }
.crop-box::before { left:33.333%; right:33.333%; top:0; bottom:0; border-left:1px dashed rgba(255,255,255,.72); border-right:1px dashed rgba(255,255,255,.72); }
.crop-box::after { top:33.333%; bottom:33.333%; left:0; right:0; border-top:1px dashed rgba(255,255,255,.72); border-bottom:1px dashed rgba(255,255,255,.72); }
.crop-box i { position:absolute; z-index:3; width:15px; height:15px; background:#f3d56b; border:1px solid #0d2d21; }
.crop-box i[data-handle=nw] { left:-8px; top:-8px; cursor:nwse-resize; }
.crop-box i[data-handle=ne] { right:-8px; top:-8px; cursor:nesw-resize; }
.crop-box i[data-handle=sw] { left:-8px; bottom:-8px; cursor:nesw-resize; }
.crop-box i[data-handle=se] { right:-8px; bottom:-8px; cursor:nwse-resize; }
.crop-result { display:grid; grid-template-columns:150px minmax(0,1fr); align-items:center; gap:18px; margin-top:26px; padding:18px; background:#f7f2e8; border:1px solid #9ea9a1; }
.crop-result strong,.crop-result span { display:block; }
.crop-result strong { margin-bottom:7px; font:900 18px "STKaiti","KaiTi",serif; }
.crop-result span { color:#67766d; font:700 8px/1.6 ui-monospace,monospace; }
#crop-preview-canvas { max-width:100%; max-height:220px; justify-self:center; background:repeating-conic-gradient(#d8ddd8 0 25%,#f1eee5 0 50%) 50%/18px 18px; border:1px solid #9ca89f; }
.invisible-workspace { display:grid; grid-template-columns:1fr 1fr; min-height:690px; }
.steg-pane { min-width:0; padding:36px; border-right:1px solid var(--studio-ink); }
.steg-pane:last-child { border-right:0; }
.steg-pane textarea { min-height:110px; padding:12px; resize:vertical; color:#173126; background:#f8f4eb; border:1px solid #87948c; font:600 10px/1.65 ui-monospace,monospace; }
#steg-encode-canvas { display:block; width:100%; max-height:220px; object-fit:contain; background:#d8dfd9; border:1px solid #9da9a0; }
.capacity-meter { margin:14px 0; }
.capacity-meter span { display:block; margin-bottom:7px; color:#5f6f66; font:700 8px ui-monospace,monospace; }
.capacity-meter i { display:block; height:8px; overflow:hidden; background:#cbd4cd; border:1px solid #91a096; }
.capacity-meter b { display:block; width:0; height:100%; background:var(--studio-green); transition:width .2s ease,background .2s ease; }
.steg-facts { display:grid; grid-template-columns:repeat(3,1fr); margin:20px 0; border:1px solid #9ba69e; }
.steg-facts div { padding:13px; border-right:1px solid #9ba69e; }
.steg-facts div:last-child { border-right:0; }
.steg-facts dt { color:#6c786f; font:700 7px ui-monospace,monospace; }
.steg-facts dd { margin:6px 0 0; color:var(--studio-green); font:900 11px ui-monospace,monospace; }
.steg-warning { padding:15px; color:#754137; background:#f1ddd5; border-left:4px solid var(--studio-red); font:600 9px/1.75 ui-sans-serif,system-ui,sans-serif; }
.steg-warning strong { color:#9a3f31; }
.raster-preview { display:grid; place-items:center; align-content:center; gap:16px; padding:30px; background:var(--studio-mist); }
#raster-canvas { width:min(460px,100%); aspect-ratio:1; background:#fff; border:1px solid var(--studio-ink); box-shadow:8px 9px 0 var(--studio-ink); }
.raster-options { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-top:14px; }
.raster-options label { display:grid; gap:5px; color:#627168; font-size:8px; }
.palette-swatches { width:100%; display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }
.palette-swatch { min-height:68px; display:flex; align-items:end; padding:8px; border:1px solid rgba(20,30,25,.25); cursor:pointer; }
.palette-swatch span { padding:3px 5px; color:#fff; background:rgba(0,0,0,.55); font:750 8px ui-monospace,monospace; }
.shape-layout { grid-template-columns:390px 1fr; }
.shape-stage { overflow:hidden; }
#shape-preview { width:min(370px,70vw); aspect-ratio:1; display:grid; place-items:center; background:linear-gradient(135deg,#1f6b4d,#e8c86c); box-shadow:0 25px 55px rgba(23,37,30,.22); transition:border-radius .3s ease,transform .3s ease; }
#shape-preview span { color:#fff; font:900 110px "STKaiti","KaiTi",serif; text-shadow:0 5px 20px rgba(0,0,0,.24); }
#shape-code { max-width:620px; padding:14px; background:#f7f2e8; border:1px solid #a9b2ab; font-size:9px; overflow-wrap:anywhere; }
.timezone-layout { grid-template-columns:360px 1fr; }
.timezone-header { display:flex; justify-content:space-between; gap:10px; margin-bottom:15px; padding-bottom:12px; border-bottom:1px solid var(--studio-ink); }
.timezone-header span { color:#68776e; font-size:8px; }
.timezone-explanation { margin-bottom:12px; padding:14px 16px; color:#33443b; background:#e1e9df; border-left:4px solid var(--studio-green); }
.timezone-explanation strong { font-size:11px; }
.timezone-explanation p { margin:6px 0 0; font-size:9px; line-height:1.7; }
.timezone-explanation time { color:var(--studio-red); font-weight:800; }
.timezone-results { display:grid; gap:8px; }
.timezone-card { display:grid; grid-template-columns:1fr auto; align-items:center; gap:15px; padding:15px; background:#f7f2e8; border:1px solid #a7b0a9; }
.timezone-card strong { display:block; margin-bottom:4px; font-size:13px; }
.timezone-card span { color:#64736b; font-size:8px; }
.timezone-card time { font:900 23px ui-monospace,monospace; }
.timezone-card time b { display:block; color:var(--studio-red); font:750 8px ui-sans-serif,system-ui,sans-serif; text-align:right; }
.timezone-card>p { grid-column:1/-1; margin:0; padding-top:9px; color:#53635a; border-top:1px dashed #bdc5bf; font-size:9px; line-height:1.65; }
.calculator-layout { grid-template-columns:1fr 330px; }
.calculator-formula { min-height:105px; display:grid; align-content:center; gap:10px; padding:16px; background:#f7f2e8; border:1px solid #a7b0a9; }
.calculator-formula>span { color:#68776e; font:800 8px ui-monospace,monospace; letter-spacing:.12em; }
.calculator-formula math { max-width:100%; overflow:auto hidden; font-size:clamp(24px,4vw,42px); }
.calculator-main>output { min-height:90px; display:flex; align-items:center; justify-content:flex-end; padding:18px; overflow:auto; color:#f7eddd; background:var(--studio-deep); font:900 clamp(28px,5vw,54px)/1 ui-monospace,monospace; }
.calculator-buttons { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:10px; }
.calculator-buttons button { min-height:50px!important; font-family:ui-monospace,monospace!important; }
.calculator-buttons .equals { grid-column:1/-1; color:#fff!important; background:var(--studio-red)!important; }
.calculator-layout aside { padding:40px 28px; background:var(--studio-mist); }
.calculator-layout aside h2 { margin-bottom:15px!important; }
#calculator-history { margin:0; padding:0; list-style:none; }
#calculator-history li { padding:11px 0; border-bottom:1px solid #adb7af; font:650 9px/1.6 ui-monospace,monospace; }
#calculator-history b { display:block; color:var(--studio-green); font-size:13px; }
.calculator-steps { max-height:230px; margin:0 0 30px; padding-left:22px; overflow:auto; }
.calculator-steps li { padding:7px 0; color:#43534a; border-bottom:1px dashed #adb7af; font:700 9px/1.5 ui-monospace,monospace; }
.morse-output-pane textarea { font-size:15px; letter-spacing:.08em; }
.morse-legend { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.morse-legend span { padding:7px 9px; background:#e1e8e1; border:1px solid #a9b2ab; font-size:8px; }
.morse-legend b { color:var(--studio-red); }
.morse-audio-controls { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:17px; padding:13px; background:#e2e9e2; border:1px solid #a8b2aa; }
.morse-audio-controls label { display:grid; grid-template-columns:1fr auto; gap:7px; color:#56675e; font:750 8px ui-monospace,monospace; }
.morse-audio-controls input { grid-column:1/-1; width:100%; min-height:18px!important; padding:0!important; border:0!important; accent-color:var(--studio-green); }
.morse-audio-controls output { color:var(--studio-green); font-weight:900; }
.morse-playback-actions { align-items:center; }
.morse-playback-actions button:disabled { cursor:not-allowed; opacity:.45; box-shadow:none!important; transform:none!important; }
.morse-signal { width:15px; height:15px; margin-left:auto; background:#aeb8b1; border:1px solid var(--studio-ink); border-radius:50%; transition:background .06s ease,box-shadow .06s ease,transform .06s ease; }
.morse-signal.active { background:var(--studio-gold); box-shadow:0 0 0 5px rgba(209,171,89,.22),0 0 18px var(--studio-gold); transform:scale(1.08); }
.morse-status { min-height:39px; display:flex; align-items:center; margin:10px 0 0; padding:9px 11px; color:#52635a; background:#f7f2e8; border-left:4px solid var(--studio-green); font:700 9px/1.55 ui-monospace,monospace; }
.morse-status[data-tone="warning"] { border-left-color:var(--studio-red); color:#923b30; }
.meta-layout { grid-template-columns:420px 1fr; }
.meta-controls textarea { min-height:80px; padding:10px; resize:vertical; }
.meta-previews { place-items:stretch; }
.search-preview,.social-preview { width:min(640px,100%); padding:20px; background:#fff; border:1px solid #b6bdb7; box-shadow:5px 6px 0 rgba(23,37,30,.16); }
.search-preview span { color:#40544a; font:500 9px ui-sans-serif,system-ui,sans-serif; }
.search-preview h3 { margin:7px 0; color:#1a0dab; font:500 18px ui-sans-serif,system-ui,sans-serif; }
.search-preview p { margin:0; color:#4d5156; font:500 10px/1.6 ui-sans-serif,system-ui,sans-serif; }
.social-preview { display:grid; grid-template-columns:160px 1fr; gap:18px; }
#meta-social-image { min-height:110px; display:grid; place-items:center; color:#fff; background:var(--studio-deep); font:800 9px ui-monospace,monospace; }
.social-preview small { color:#67756d; font-size:8px; }
.social-preview h3 { margin:8px 0; font-size:16px; }
.social-preview p { margin:0; color:#637168; font:500 9px/1.6 ui-sans-serif,system-ui,sans-serif; }
#meta-output { min-height:180px; padding:13px; resize:vertical; background:#112a20; color:#e9e2d4; font:600 9px/1.65 ui-monospace,monospace; }
.lorem-layout { grid-template-columns:380px 1fr; }
.lorem-layout .studio-pane { border:0; }
.lorem-layout textarea { min-height:470px; }
@media (max-width:1050px) {
  .studio-nav { display:flex; overflow-x:auto; }
  .studio-nav .tool-nav-group { min-width:170px; }
  .studio-editor-grid,.cron-layout,.file-codec,.media-studio,.palette-layout,.shape-layout,.timezone-layout,.calculator-layout,.meta-layout,.lorem-layout,.crop-workspace,.invisible-workspace { grid-template-columns:1fr; }
  .studio-pane,.cron-builder,.file-codec>section:first-child,.media-controls,.palette-layout>section:first-child,.shape-controls,.timezone-layout>section:first-child,.calculator-main,.meta-controls,.lorem-layout>section:first-child,.crop-controls,.steg-pane { border-right:0; border-bottom:1px solid var(--studio-ink); }
  .header-audit-layout { grid-template-columns:1fr; }
  .header-score { min-height:320px; }
  .header-results { grid-template-columns:repeat(2,1fr); }
  .studio-ticket { width:190px; min-height:190px; }
}
@media (max-width:680px) {
  .studio-intro { background:#f4efe5; }
  .studio-ticket { width:100%; min-height:150px; }
  .studio-pane,.cron-builder,.file-codec>section,.media-controls,.palette-layout>section:first-child,.shape-controls,.timezone-layout>section,.calculator-main,.calculator-layout aside,.meta-controls,.lorem-layout>section { padding:24px 18px; }
  .studio-pane textarea { min-height:360px; }
  .header-results { grid-template-columns:1fr; }
  .file-decode-row,.control-pair,.raster-options { grid-template-columns:1fr; }
  .morse-audio-controls { grid-template-columns:1fr; }
  .palette-swatches { grid-template-columns:repeat(2,1fr); }
  .social-preview { grid-template-columns:1fr; }
  .calculator-buttons button { min-height:46px!important; padding:5px!important; }
  .crop-controls,.crop-stage-area,.steg-pane { padding:22px 16px; }
  .crop-result { grid-template-columns:1fr; }
  .steg-facts { grid-template-columns:1fr; }
  .steg-facts div { border-right:0; border-bottom:1px solid #9ba69e; }
}
@media (prefers-reduced-motion:reduce) {
  .studio-page .expansion-panel button,#shape-preview { transition:none; }
}