:root { color-scheme: light; --navy: #172554; --blue: #1768dc; --border: #d9e3f1; --muted: #64748b; --ink: #172b4d; }
* { box-sizing: border-box; }
body { margin: 0; background: #f2f5fa; color: var(--ink); font: 15px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif; }
[hidden] { display: none !important; }
header { min-height: 78px; padding: 16px 26px; background: var(--navy); color: white; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
header > div, nav { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
header h1 { font-size: 25px; margin: 0; }
.brand { background: white; color: var(--navy); padding: 5px 10px; border-radius: 8px; font-weight: 850; }
.subtitle { color: #b9c9e4; font-size: 13px; }
nav a { color: white; }
nav button { background: transparent; color: white; border-color: #7180a1; }
h2 { font-size: 19px; margin: 0; } h3 { font-size: 22px; margin: 10px; }
button, input, textarea, select, a { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
button, .result-toolbar a { border: 1px solid var(--border); background: white; color: var(--ink); border-radius: 9px; padding: 9px 13px; font: inherit; font-weight: 650; cursor: pointer; text-decoration: none; }
button:hover, .result-toolbar a:hover { border-color: #6aa0ec; background: #edf4ff; }
button:disabled { cursor: not-allowed; opacity: .55; }
.primary { background: var(--blue); color: white; border-color: var(--blue); }
.primary:hover { background: #1156bf; color: white; }
:focus-visible { outline: 3px solid #91b9fa; outline-offset: 2px; }
.wide { width: 100%; min-height: 48px; }
input, textarea, select { display: block; width: 100%; border: 1px solid #cad7e8; border-radius: 9px; background: white; padding: 10px 12px; font: inherit; color: var(--ink); }
textarea { resize: vertical; min-height: 86px; }
label { display: block; font-weight: 650; margin: 14px 0 6px; }
label span { font-weight: 400; font-size: 12px; }
.muted { color: var(--muted); } .small { font-size: 12px; }
main { display: grid; grid-template-columns: minmax(320px, 370px) minmax(340px, 1fr) 255px; gap: 18px; padding: 22px; align-items: start; max-width: 2100px; margin: auto; }
.panel { background: white; border: 1px solid var(--border); border-radius: 16px; padding: 20px; min-width: 0; box-shadow: 0 3px 12px #17255404; }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.section-title label { margin: 14px 0 6px; }
.tag { color: #326bb3; background: #eef5ff; border-radius: 6px; padding: 3px 8px; font-size: 12px; }
.engine-tabs { display: flex; gap: 6px; padding: 5px; margin: 14px 0; background: #f0f4fa; border-radius: 10px; }
.engine-tabs button { flex: 1; min-width: 0; padding: 8px 6px; background: transparent; border-color: transparent; font-size: 13px; }
.engine-tabs button[aria-pressed="true"] { background: white; color: var(--blue); border-color: #b4cff5; }
#professional-status { margin: -5px 0 8px; }
.presets { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.presets button, .presets select { padding: 6px 8px; font-size: 12px; color: #4b6390; }
.presets select { width: auto; flex: 0 1 auto; max-width: 100%; cursor: pointer; }
.presets button[aria-pressed="true"] { background: #eef5ff; border-color: #b4cff5; color: var(--blue); }
#campaign-fields { border: 1px solid var(--border); border-radius: 9px; margin: 18px 0 0; padding: 10px 12px 14px; min-width: 0; background: #f8fbff; }
#campaign-fields legend { font-weight: 650; padding: 0 5px; }
#campaign-fields label { font-size: 13px; margin-top: 8px; }
.size-hint { display: block; margin-top: 6px; overflow-wrap: anywhere; }
#drop-zone { border: 2px dashed #aec7e8; border-radius: 12px; background: #f7faff; padding: 22px 8px; display: grid; gap: 5px; text-align: center; cursor: pointer; }
#drop-zone strong { font-size: 17px; color: var(--blue); } #drop-zone span, #drop-zone small { color: var(--muted); font-size: 12px; }
#drop-zone.dragging { border-color: var(--blue); background: #e7f1ff; }
.references { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 10px; }
.reference { position: relative; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; padding: 4px; background: #f8fafc; }
.reference img { width: 100%; height: 76px; object-fit: contain; display: block; cursor: pointer; }
.reference small { display: block; text-align: center; } .reference button { position: absolute; top: 2px; right: 2px; border-radius: 50%; padding: 0; width: 24px; height: 24px; }
.two-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.two-columns > label { min-width: 0; }
.composer .two-columns { grid-template-columns: 1fr; gap: 0; }
.check { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; font-weight: 400; margin-bottom: 15px; } .check input { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 3px; }
.preview { position: sticky; top: 18px; } .preview-tabs { display: flex; gap: 5px; flex-shrink: 0; } .preview-tabs button { padding: 6px 10px; font-size: 12px; }
.canvas { position: relative; margin-top: 16px; background: #edf1f7; border: 1px solid var(--border); border-radius: 12px; min-height: 500px; height: min(65vh, 850px); padding: 16px; display: flex; justify-content: center; align-items: center; overflow: auto; }
.generation-wait { position: absolute; inset: 0; z-index: 1; background: #edf1f7ed; display: grid; align-content: center; justify-items: center; gap: 8px; padding: 20px; text-align: center; }
.generation-wait strong { font-size: 21px; color: var(--blue); }
.generation-wait span { font-size: 13px; color: var(--muted); }
.canvas img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; background: white; box-shadow: 0 4px 20px #23314b12; }
.canvas.original-size { display: block; } .canvas.original-size img { max-width: none; max-height: none; }
#empty-preview { text-align: center; color: #6c819f; } #empty-preview p { font-size: 13px; } .empty-icon { font-size: 65px; color: #b2c7e4; }
.result-toolbar { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; font-size: 12px; } #preview-title { flex: 1; overflow-wrap: anywhere; } .result-toolbar button, .result-toolbar a { padding: 6px 10px; font-size: 12px; }
.result-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.review-note { border-top: 1px solid #e8eef6; padding-top: 13px; color: var(--muted); font-size: 12px; }
.job-status { background: #eef5ff; border-radius: 9px; padding: 12px; margin-top: 14px; overflow-wrap: anywhere; }
.history-tabs { display: flex; gap: 5px; margin: 16px 0; } .history-tabs button { flex: 1; font-size: 12px; padding: 7px; }
.history-tabs button[aria-pressed="true"] { color: var(--blue); border-color: #77a9ed; background: #f0f6ff; }
#history { max-height: 76vh; overflow: auto; }
.history-card { border: 1px solid var(--border); border-radius: 9px; margin-bottom: 9px; width: 100%; font-size: 12px; overflow: hidden; }
.history-select { display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: center; gap: 9px; text-align: left; padding: 9px; width: 100%; font-size: inherit; border: 0; background: transparent; border-radius: 0; }
.asset-actions { display: flex; justify-content: flex-end; gap: 6px; padding: 0 9px 9px; }
.asset-actions button { font-size: 12px; padding: 4px 10px; }
.danger { color: #bd3535; }
#generate, #save-asset-name { margin-top: 16px; }
.history-card.selected { border-color: var(--blue); background: #eef6ff; }
.history-card img { height: 58px; width: 58px; object-fit: contain; background: #f1f5fa; border-radius: 5px; }
.history-card span { min-width: 0; overflow-wrap: anywhere; } .history-card strong { display: block; } .history-card small { display: block; color: var(--muted); font-weight: 400; } .history-placeholder { background: #edf3fb; height: 58px; display: grid; place-items: center; color: var(--blue); border-radius: 5px; }
#notice { margin: 12px 22px 0; padding: 10px 16px; border: 1px solid #c1d6f2; border-radius: 9px; background: #eff6ff; color: #23467c; }
.login { max-width: 420px; margin: 70px auto; padding: 30px; background: white; border: 1px solid var(--border); border-radius: 14px; } .login button { width: 100%; margin: 16px 0; }
dialog { width: min(620px, calc(100% - 30px)); border: 1px solid var(--border); border-radius: 15px; padding: 24px; color: var(--ink); max-height: 90vh; overflow: auto; }
dialog::backdrop { background: #102344aa; } #lightbox { width: min(1500px, calc(100% - 30px)); } #large-image { display: block; max-width: 100%; max-height: 75vh; margin: 12px auto; object-fit: contain; }
@media (max-width: 1240px) { main { grid-template-columns: 340px minmax(300px, 1fr); } .history { grid-column: 1 / -1; } #history { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-height: 300px; } .subtitle { display: none; } }
@media (max-width: 750px) { header { padding: 12px 15px; flex-wrap: wrap; gap: 8px; } header h1 { font-size: 21px; } header > div, nav { gap: 10px; } nav { font-size: 12px; } main { padding: 12px; display: flex; flex-direction: column; gap: 12px; } .panel { width: 100%; padding: 16px; } .preview { position: static; } .canvas { min-height: 320px; height: 440px; } #history { grid-template-columns: 1fr 1fr; } .preview > .section-title { flex-wrap: wrap; } #notice { margin: 10px 12px; } }