:root { --ink:#1b2a31; --muted:#66757d; --line:#d6e0df; --paper:#f4f8f7; --panel:#fff; --teal:#087d74; --teal-dark:#05645d; --teal-pale:#e4f4f0; --orange:#ca672b; --danger:#b63b3b; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; color:var(--ink); background:var(--paper); font-family:"Segoe UI","Microsoft YaHei",Arial,sans-serif; letter-spacing:0; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
.topbar { height:60px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 28px; background:#fff; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:10px; font-weight:700; font-size:16px; }.brand-mark { width:22px; height:22px; border:2px solid var(--teal); border-radius:6px; background:linear-gradient(135deg,var(--teal) 0 42%,transparent 42% 57%,var(--orange) 57%); }.brand small { color:var(--teal-dark); background:var(--teal-pale); padding:3px 5px; font-size:10px; letter-spacing:1px; }.connection { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:12px; }.connection span { width:8px; height:8px; border-radius:50%; background:#39a77f; box-shadow:0 0 0 3px #ddf4e9; }
.workspace { min-height:calc(100vh - 60px); display:grid; grid-template-columns:290px minmax(0,1fr); }.settings { padding:22px 18px; background:#fff; border-right:1px solid var(--line); overflow:auto; }.rail-heading { padding:0 4px 18px; }.rail-heading h1 { margin:0 0 5px; font-size:17px; }.rail-heading p { margin:0; color:var(--muted); font-size:12px; }.setting-section { padding:17px 4px; border-top:1px solid #e7eded; }.setting-section h2 { margin:0 0 13px; font-size:13px; }.setting-section label,.composer>label { display:block; margin:11px 0 6px; color:var(--muted); font-size:11px; font-weight:650; }
input,select,textarea { width:100%; border:1px solid #cbd8d6; border-radius:5px; color:var(--ink); background:#fff; outline:none; } input,select { min-height:37px; padding:0 10px; font-size:12px; } textarea { min-height:102px; padding:11px; resize:vertical; line-height:1.55; } input:focus,select:focus,textarea:focus { border-color:var(--teal); box-shadow:0 0 0 3px rgba(8,125,116,.12); }
.secondary { min-height:35px; padding:0 11px; border:1px solid #bdcfcc; border-radius:5px; color:#36514e; background:#fff; font-size:12px; font-weight:650; }.connection-section .secondary { width:100%; margin-top:12px; }.mode-switch { display:grid; grid-template-columns:1fr 1fr; gap:3px; padding:3px; background:#edf2f1; border-radius:6px; }.mode { min-height:34px; border:0; border-radius:4px; background:transparent; color:var(--muted); font-size:11px; }.mode.active { color:var(--ink); background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.12); font-weight:700; }.select-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.upload-zone { min-height:80px; display:flex !important; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:9px; border:1px dashed #9fbab5; border-radius:6px; background:#f9fcfb; color:#4c625f !important; text-align:center; cursor:pointer; }.upload-zone small { color:var(--muted); font-size:10px; }.upload-zone input { position:absolute; width:1px; height:1px; overflow:hidden; opacity:0; }.reference-section img { width:100%; max-height:130px; margin-top:10px; object-fit:cover; border:1px solid var(--line); border-radius:5px; }
.canvas-shell { min-width:0; display:grid; grid-template-rows:58px minmax(360px,1fr) auto auto 158px; }.canvas-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 24px; background:#fff; border-bottom:1px solid var(--line); }.canvas-toolbar strong { font-size:13px; }.canvas-toolbar span { margin-left:9px; color:var(--muted); font-size:11px; }.result-canvas { min-height:0; display:grid; place-items:center; padding:30px; overflow:hidden; background-color:#edf3f1; background-image:linear-gradient(45deg,#e6eeec 25%,transparent 25%),linear-gradient(-45deg,#e6eeec 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e6eeec 75%),linear-gradient(-45deg,transparent 75%,#e6eeec 75%); background-size:22px 22px; background-position:0 0,0 11px,11px -11px,-11px 0; }.result-canvas img { max-width:min(100%,820px); max-height:62vh; object-fit:contain; box-shadow:0 14px 38px rgba(26,57,53,.18); }.empty-canvas { display:grid; gap:7px; text-align:center; color:var(--muted); }.empty-canvas b { color:#435955; font-size:16px; }.empty-canvas span { font-size:12px; }.status { min-height:36px; padding:10px 24px; color:#54706b; background:#fff; border-top:1px solid var(--line); font-size:12px; }.status.error { color:var(--danger); background:#fff6f6; }.status.busy { color:var(--teal-dark); background:#eff9f6; }
.history-panel { padding:14px 24px 17px; background:#fff; border-top:1px solid var(--line); }.history-heading { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px; }.history-heading h2 { margin:0; font-size:13px; }.history-heading span { color:var(--muted); font-size:11px; }.history { display:flex; gap:9px; min-height:0; overflow-x:auto; }.history button { flex:0 0 auto; width:62px; height:48px; padding:0; border:2px solid transparent; border-radius:5px; background:#edf2f1; overflow:hidden; }.history button.active { border-color:var(--teal); }.history img { width:100%; height:100%; object-fit:cover; }
.composer { padding:16px 24px 19px; background:#fff; border-top:1px solid var(--line); }.composer>label { margin-top:0; }.composer-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:10px; }.composer-footer span { color:var(--muted); font-size:11px; }.primary { min-width:118px; min-height:39px; padding:0 15px; border:0; border-radius:5px; color:#fff; background:var(--teal); font-size:13px; font-weight:700; box-shadow:0 2px 0 var(--teal-dark); }.primary:hover { background:var(--teal-dark); }.primary:disabled,.secondary:disabled { cursor:not-allowed; opacity:.55; }
@media (max-width:820px) { .topbar { padding:0 16px; }.connection { display:none; }.workspace { grid-template-columns:1fr; }.settings { border-right:0; border-bottom:1px solid var(--line); }.canvas-shell { grid-template-rows:54px minmax(310px,1fr) auto auto auto; }.result-canvas img { max-height:52vh; }.composer { padding:14px; }.history-panel,.canvas-toolbar,.status { padding-left:14px; padding-right:14px; } }
@media (max-width:480px) { .brand small { display:none; }.settings { padding:17px 14px; }.result-canvas { padding:18px; }.composer-footer { align-items:flex-start; flex-direction:column; }.primary { width:100%; }.canvas-toolbar span { display:none; } }