:root{font-family:IBM Plex Sans,PingFang SC,Microsoft YaHei,sans-serif;line-height:1.5;font-weight:400;color:#1d2630;background:radial-gradient(circle at top left,rgba(255,216,176,.72),transparent 32%),radial-gradient(circle at top right,rgba(98,154,199,.32),transparent 24%),linear-gradient(180deg,#f7f2e8,#f4efe4 52%,#efeadf);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color-scheme:light;--surface: rgba(255, 250, 241, .82);--border: rgba(66, 51, 30, .12);--shadow: 0 20px 60px rgba(53, 42, 27, .12);--accent: #9d6239;--accent-strong: #7f4e2d;--text-muted: #6d6a64;--danger: #b24747}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}button,input,select{font:inherit}#app{min-height:100vh}.app-shell{width:min(1440px,calc(100% - 32px));margin:0 auto;padding:28px 0 40px}.hero{display:grid;gap:16px;padding:28px;border:1px solid var(--border);border-radius:28px;background:linear-gradient(135deg,#fffaf1f5,#f2e8d6e6),#fff9;box-shadow:var(--shadow)}.hero h1{margin:4px 0 0;font-family:Space Grotesk,IBM Plex Sans,sans-serif;font-size:clamp(2rem,4vw,3.6rem);line-height:1;letter-spacing:-.06em}.hero-kicker,.eyebrow{margin:0;text-transform:uppercase;letter-spacing:.18em;font-size:.75rem;color:var(--accent)}.hero-copy,.field-help{margin:0;color:var(--text-muted)}.layout-grid{display:grid;grid-template-columns:minmax(320px,420px) minmax(0,1fr);gap:20px;margin-top:22px}.control-stack,.preview-stack{display:grid;gap:20px}.panel,.panel-wide{border:1px solid var(--border);border-radius:24px;background:var(--surface);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.panel{padding:22px}.panel-wide{padding:24px}.panel-heading{display:grid;gap:6px;margin-bottom:16px}.panel-heading h2{margin:0;font-size:1.25rem}.upload-dropzone{display:grid;gap:8px;padding:22px;border:1px dashed rgba(157,98,57,.35);border-radius:18px;background:#ffffff73;cursor:pointer}.upload-dropzone input{display:none}.upload-dropzone span{font-weight:700}.upload-preview{display:grid;grid-template-columns:84px 1fr;gap:14px;margin-top:16px;padding:14px;border-radius:18px;background:#f5efe4b8}.upload-preview img{width:84px;height:108px;object-fit:cover;border-radius:14px}.upload-preview p{margin:6px 0 0;color:var(--text-muted)}.field-select,.field-input{width:100%;padding:12px 14px;border:1px solid rgba(94,74,52,.14);border-radius:14px;background:#ffffffdb}.field-stack{display:grid;gap:8px}.field-stack span{font-size:.92rem;color:var(--text-muted)}.grid-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}.segmented{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.segmented-item,.mode-card,.download-button,.primary-action,.color-chip{border:1px solid transparent;cursor:pointer;transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease,background-color .14s ease}.segmented-item{padding:12px;border-radius:14px;background:#ffffffbd}.segmented-item.active,.mode-card.active,.color-chip.active{border-color:#9d623966;box-shadow:0 12px 24px #9d623924}.color-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}.color-grid.disabled{opacity:.56}.color-chip{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;background:#ffffffb8}.color-chip span{width:18px;height:18px;border-radius:999px;border:1px solid rgba(25,25,25,.08)}.color-picker{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:14px;background:#ffffffb8}.color-picker input{width:44px;height:34px;padding:0;border:0;background:transparent}.mode-grid{display:grid;gap:10px}.mode-card{display:grid;gap:4px;padding:16px;border-radius:18px;background:#ffffffb3;text-align:left}.mode-card span{color:var(--text-muted)}.toggle-group{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px}.toggle{display:inline-flex;align-items:center;gap:8px;color:var(--text-muted)}.action-panel{background:linear-gradient(140deg,#a0663a1f,#fffcf5f5),#ffffffb8}.action-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:18px}.action-metrics div{padding:14px;border-radius:16px;background:#ffffffb3}.action-metrics span,.meta-grid span{display:block;color:var(--text-muted);font-size:.85rem}.primary-action{width:100%;padding:15px 18px;border-radius:16px;border-color:#7f4e2d66;background:linear-gradient(135deg,var(--accent),var(--accent-strong));color:#fff;font-weight:700}.primary-action:disabled,.download-button:disabled,.segmented-item:disabled,.color-chip:disabled{opacity:.5;cursor:not-allowed}.primary-action:not(:disabled):hover,.download-button:not(:disabled):hover,.segmented-item:not(:disabled):hover,.mode-card:hover,.color-chip:not(:disabled):hover{transform:translateY(-1px)}.error-banner{margin:14px 0 0;padding:12px 14px;border-radius:14px;background:#b247471f;color:var(--danger)}.preview-shell{display:grid}.preview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.preview-card{display:grid;gap:12px;padding:14px;border-radius:20px;background:#ffffff8f}.preview-card header{display:flex;flex-direction:column;gap:4px}.preview-card header span{color:var(--text-muted);font-size:.85rem}.preview-stage{display:grid;place-items:center;min-height:320px;padding:16px;border-radius:18px;background-image:linear-gradient(45deg,rgba(0,0,0,.04) 25%,transparent 25%),linear-gradient(-45deg,rgba(0,0,0,.04) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(0,0,0,.04) 75%),linear-gradient(-45deg,transparent 75%,rgba(0,0,0,.04) 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0}.preview-stage.neutral{background:linear-gradient(180deg,#f9f5ece6,#f1ebe2f2)}.preview-stage img{max-width:100%;max-height:360px;object-fit:contain;border-radius:14px;box-shadow:0 16px 32px #32291b24}.layout-stage img{max-height:280px}.preview-stage p{color:var(--text-muted)}.meta-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:18px}.meta-grid div{padding:14px;border-radius:16px;background:#ffffffad}.download-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.download-button{padding:14px;border-radius:14px;border-color:#5e4a3429;background:#fffc;font-weight:600}@media(max-width:1100px){.layout-grid,.preview-grid,.meta-grid,.download-grid{grid-template-columns:1fr}}@media(max-width:640px){.app-shell{width:min(100% - 18px,100%);padding-top:18px}.hero,.panel,.panel-wide{border-radius:20px}.grid-two,.color-grid,.action-metrics{grid-template-columns:1fr}.preview-stage{min-height:240px}}