@font-face{font-family:TarotKai;src:url('../assets/psd-s1/fallback-kaiti.woff2') format('woff2');font-display:swap}
@font-face{font-family:TarotWenkai;src:url('../assets/typography/wenkai-gb-medium.woff') format('woff');font-weight:500;font-display:swap}
@font-face{font-family:TarotSerif;src:url('../assets/native/card-serif-heavy.woff2') format('woff2');font-display:swap}
:root{color-scheme:light;--bg:#f1ede7;--panel:#fbf9f5;--field:#fffdfa;--ink:#342b36;--muted:#786b75;--line:#ded5ce;--accent:#9a5449;--accent-soft:#f1e1db;--sans:'Microsoft YaHei','PingFang SC',system-ui,sans-serif}
*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;background:var(--bg);color:var(--ink);font:13px/1.6 var(--sans)}button,input,textarea,select{font:inherit}button,a,input,select,textarea{touch-action:manipulation}button{cursor:pointer;border:1px solid var(--line);background:var(--field);color:var(--ink);padding:8px 12px;border-radius:6px;transition:background .15s}button:hover{background:#f0e8df}button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,canvas:focus-visible{outline:2px solid var(--accent);outline-offset:3px}input,textarea,select{width:100%;min-width:0;border:1px solid #d6c8bf;border-radius:5px;padding:8px 9px;background:var(--field);color:var(--ink)}textarea{resize:vertical;line-height:1.8}input[type=color]{padding:4px;height:39px}input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent);margin:0}input[type=range]{padding:0;height:5px;accent-color:var(--accent);margin:12px 0}input[aria-invalid=true],textarea[aria-invalid=true]{border-color:#b53236}select{cursor:pointer}h1,h2,h3,p{margin:0}.primary{background:var(--accent);color:white;border-color:var(--accent)}.primary:hover{background:#86483f}.app-header{height:82px;display:flex;align-items:center;gap:30px;padding:0 26px;border-bottom:1px solid var(--line);background:var(--panel)}.brand{display:flex;gap:10px;align-items:center;text-decoration:none;color:var(--ink);font:600 15px/1.3 Georgia,serif;min-width:232px}.brand img{width:34px;height:34px}.brand small{display:block;font:11px/1.9 var(--sans);color:var(--muted);letter-spacing:2px}.header-title{border-left:1px solid var(--line);padding-left:28px}.header-title h1{font-size:19px;font-weight:600;letter-spacing:2px}.header-title>span{font-size:11px;color:var(--muted)}.header-actions{margin-left:auto;display:flex;gap:8px}.header-actions .primary{min-width:118px}.header-actions .primary span{margin-left:12px}.workspace{display:grid;grid-template-columns:292px minmax(310px,1fr) 304px;gap:0;height:calc(100dvh - 82px)}.inspector{overflow:auto;background:var(--panel);scrollbar-width:thin;scrollbar-color:#d8c8bf transparent}.left{border-right:1px solid var(--line)}.right{border-left:1px solid var(--line)}.panel-heading{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 14px;border-bottom:1px solid var(--line)}h2{font-size:14px;font-weight:600}.panel-heading>span{font-size:11px;color:var(--muted)}.inspector section{padding:20px;border-bottom:1px solid var(--line)}h3{font-size:13px;font-weight:600;margin-bottom:15px}.section-no{font:12px Georgia,serif;color:#ab8578;margin-right:8px}label{display:block;font-size:12px;margin-bottom:13px}label>input:not([type=checkbox]):not([type=range]),label>textarea,label>select{display:block;margin-top:5px}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px}.check{display:flex;align-items:center;gap:8px;margin:12px 0}.hint{color:var(--muted);font-size:11px;line-height:1.85;margin:6px 0 13px}.slider-label{position:relative;margin-bottom:0}.slider-label output{float:right;font:12px/1.6 Consolas,monospace;color:var(--accent)}.slider-ends{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin-top:-4px}.local-note p,.source-note p{font-size:11px;color:var(--muted);line-height:1.9}.local-note button{margin-top:14px}.subtle{background:transparent}.tabs{display:flex;padding:10px 14px 0;border-bottom:1px solid var(--line);gap:3px}.tabs button{flex:1;border:0;border-radius:4px 4px 0 0;background:transparent;padding:9px 0;color:var(--muted);font-size:12px;border-bottom:2px solid transparent}.tabs button[aria-selected=true]{color:var(--accent);border-bottom-color:var(--accent);background:#f5ece6}.upload-area{display:flex;align-items:center;flex-direction:column;gap:5px;border-style:dashed;width:100%;padding:20px 5px;background:#f7f1eb}.upload-area strong{font-size:12px;font-weight:500}.upload-area small{font-size:10px;color:var(--muted)}.upload-symbol{font-size:25px;color:var(--accent);line-height:1.2}.button-row{display:flex;flex-wrap:wrap;gap:8px}.button-row button{flex:1;padding:7px 8px;font-size:11px}.preview-panel{display:flex;flex-direction:column;min-width:0;min-height:0;position:relative;background:radial-gradient(ellipse at 50% 43%,#faf6ef 0,#eee7de 80%)}.preview-toolbar{height:57px;flex-shrink:0;display:flex;justify-content:space-between;align-items:center;padding:0 22px;border-bottom:1px solid #e3dbd1;color:var(--muted);font-size:11px}.preview-toolbar>div{display:flex;gap:6px;align-items:center}.preview-toolbar button{background:transparent;padding:4px 7px;border-color:transparent}.preview-toolbar select{width:auto;padding:4px 5px;font-size:11px;background:transparent}.canvas-stage{flex:1;min-height:200px;overflow:auto;display:flex;align-items:flex-start;justify-content:center;padding:22px 24px 8px}.canvas-wrap{position:relative;flex-shrink:0;line-height:0;box-shadow:0 10px 35px #49372826;border-radius:15px;background:#f9f4f1;max-width:100%}canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:none}canvas:active{cursor:grabbing}.loading{position:absolute;inset:0;background:#f9f3ed;display:flex;align-items:center;justify-content:center;line-height:2;padding:30px;color:var(--muted);font-size:12px;border-radius:15px}.preview-caption{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;font-size:10px;color:#95837b;padding:7px 15px 12px}.feedback{font-size:11px;color:#98632f;padding:0 24px;text-align:center;line-height:1.8;max-height:100px;overflow:auto}.feedback:not(:empty){padding-bottom:10px}.feedback.error{color:#b33035}.bottom-status{display:flex;justify-content:space-between;gap:15px;font-size:10px;color:var(--muted);padding:11px 20px;border-top:1px solid var(--line)}.range-inputs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:18px 0}.range-inputs label{text-align:center;margin:0;font-family:Georgia,serif;font-size:17px;color:#6c5148}.range-inputs input{text-align:center;font:12px var(--sans);padding:7px 1px}.range-stats{padding:12px 0;font-size:11px;color:var(--muted);line-height:1.8}.heatmap{display:flex;gap:2px;margin-top:9px}.heatmap span{flex:1;text-align:center;font:17px Georgia,serif}.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);background:#342b36;color:white;padding:12px 20px;border-radius:8px;box-shadow:0 8px 32px #0002;z-index:20;max-width:min(90vw,650px);font-size:12px}.toast.error{background:#963b35}dialog{border:1px solid var(--line);border-radius:12px;padding:26px;background:var(--panel);color:var(--ink);max-width:440px;box-shadow:0 20px 80px #0003}dialog::backdrop{background:#342b3655}dialog h2{font-size:18px;margin-bottom:12px}dialog p{margin-bottom:24px;color:var(--muted)}
@media(min-width:1600px){.workspace{grid-template-columns:320px minmax(310px,1fr) 336px}.inspector section{padding:23px}.panel-heading{padding-left:23px;padding-right:23px}}
@media(max-width:1120px){.workspace{grid-template-columns:254px minmax(270px,1fr) 262px}.inspector section{padding:15px}.app-header{padding:0 18px;gap:15px}.brand{min-width:210px;font-size:13px}.header-title{padding-left:16px}.preview-toolbar{padding:0 12px}.preview-toolbar button span{display:none}.bottom-status>span:last-child{display:none}}
@media(max-width:850px){.app-header{height:auto;min-height:106px;padding:12px 16px;flex-wrap:wrap;gap:10px 14px}.brand{min-width:0;flex:1}.header-title{border:0;padding:0;text-align:right}.header-title h1{font-size:16px}.header-actions{width:100%;justify-content:flex-end}.header-actions button{padding:6px 10px;font-size:12px}.workspace{height:auto;grid-template-columns:1fr 1fr;align-items:start}.preview-panel{grid-column:1/-1;grid-row:1;min-height:760px;height:calc(100dvh - 125px)}.left,.right{overflow:visible;border-top:1px solid var(--line)}.canvas-stage{min-height:500px}.preview-toolbar{height:46px}.bottom-status>span:last-child{display:inline}.inspector{height:auto}}
@media(max-width:520px){.workspace{display:flex;flex-direction:column}.preview-panel{width:100%;height:730px;min-height:0}.canvas-stage{min-height:0}.left,.right{width:100%;border-left:0;border-right:0}.preview-caption{font-size:9px;gap:8px}.brand span{font-size:12px}.brand small{font-size:9px}.brand img{width:28px;height:28px}.header-title>span{font-size:9px}.header-actions{justify-content:stretch}.header-actions button{flex:1}.panel-heading{padding:16px 20px}.inspector section{padding:20px}.right{order:2}.left{order:3}.bottom-status{padding:10px 13px;font-size:9px}}

.font-presets{display:grid;gap:7px;margin-bottom:18px}.font-presets button{text-align:left;font-size:12px;padding:9px 12px}.font-presets button:first-child{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}

/* ---------- Tarot UI polish layer (2026-09-26).
   Same restrained treatment as the card editor: clearer states, no decoration. */

:root { --muted-bg: #f3eee8; --accent-strong: #86483f; --accent-ring: #9a544933; --line-strong: #cbbdb2; }

/* ---------- Controls ---------- */
button { transition: background-color .12s, border-color .12s, color .12s; }
button:hover:not(:disabled) { border-color: var(--line-strong); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
input[type=range]:focus { box-shadow: none; }
input[type=color]:focus { box-shadow: none; }
.primary:hover:not(:disabled) { background: var(--accent-strong); border-color: var(--accent-strong); }
.inspector::-webkit-scrollbar { width: 10px; }
.inspector::-webkit-scrollbar-thumb { background: #d3c5bb; border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; }

/* ---------- Header ---------- */
.app-header { height: 64px; gap: 24px; }
.workspace { height: calc(100dvh - 64px); }
.header-actions { gap: 6px; align-items: center; }
.header-actions button { min-height: 34px; padding: 6px 12px; }
.header-actions .primary { min-width: 0; }
.header-actions .primary > span[aria-hidden] { display: none; }

/* ---------- Tabs: segmented control, same as the main editor ---------- */
.tabs { margin: 10px 14px 0; padding: 3px; gap: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--muted-bg); }
.tabs button { height: 30px; padding: 0; border: 0; border-radius: 6px; }
.tabs button:hover { color: var(--ink); background: #ffffff80; }
.tabs button[aria-selected=true] { background: var(--field); color: var(--accent); font-weight: 700; box-shadow: 0 1px 2px #2f25300f, 0 0 0 1px var(--line); }

/* ---------- Checkboxes become switches ---------- */
.check { justify-content: space-between; flex-direction: row-reverse; }
.check input[type=checkbox] { -webkit-appearance: none; appearance: none; flex: none; width: 34px; height: 20px; border-radius: 99px; background: #cfc2b9; position: relative; cursor: pointer; transition: background-color .15s; margin-left: auto; }
.check input[type=checkbox]::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px #0003; transition: transform .15s; }
.check input[type=checkbox]:checked { background: var(--accent); }
.check input[type=checkbox]:checked::after { transform: translateX(14px); }

/* Font presets: keep the "recommended" hint but no permanent selected look. */
.font-presets button:first-child { border-color: var(--line); color: var(--ink); background: var(--field); }
.font-presets button:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Save state (ui-polish.js) ---------- */
#saveProject { position: relative; }
#saveProject.has-unexported::after { content: ""; position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--field); }
.save-failed #saveStatus { color: #b3342f; font-weight: 700; }
.save-failed #saveProject { border-color: #b3342f; background: #fbeceb; color: #9c2b27; }
.save-alert { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 12px 0; padding: 8px 12px; border: 1px solid #e2b4b0; border-left: 3px solid #b3342f; border-radius: 6px; background: #fbeceb; color: #7f2622; font-size: 12px; }
.save-alert strong { color: #9c2b27; }
.save-alert span { flex: 1; min-width: 200px; }
.save-alert button { padding: 3px 10px; border-color: #b3342f; background: #b3342f; color: #fff; font-size: 12px; }
.save-alert button:hover { background: #9c2b27; }

/* ---------- Export: resolution + button as one control ---------- */
.export-group { display: inline-flex; align-items: stretch; }
.export-group #exportScale { width: auto; margin: 0; padding: 0 6px 0 10px; border: 1px solid var(--accent); border-right: 0; border-radius: 6px 0 0 6px; background: var(--accent-soft); color: var(--accent-strong); font-size: 12px; }
.export-group #exportScale:focus { position: relative; z-index: 1; }
.export-group #exportPng { border-radius: 0 6px 6px 0; }

/* ---------- Keyboard hints ---------- */
.kbd-hint { display: none; margin-left: 6px; padding: 0 4px; border: 1px solid currentColor; border-radius: 3px; font: 10px/15px Consolas, monospace; opacity: .55; }
.primary .kbd-hint { opacity: .75; }
@media (min-width: 1600px) { .kbd-hint { display: inline-block; } }

/* ---------- Workshop switch: same pill as the main editor ---------- */
.workshop-nav { display: flex; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 99px; background: var(--muted-bg); font-size: 12px; flex: none; }
.workshop-nav a, .workshop-nav a:visited, .workshop-current { display: inline-flex; align-items: center; min-height: 26px; padding: 1px 12px; border-radius: 99px; color: var(--muted); text-decoration: none; white-space: nowrap; }
.workshop-nav a:hover { background: #ffffff99; color: var(--accent); }
.workshop-current { background: var(--field); color: var(--accent); font-weight: 600; box-shadow: 0 0 0 1px var(--line); }

@media (max-width: 850px) { .app-header { height: auto; } .workspace { height: auto; } }