:root{--app-primary:#176b87;--app-primary-dark:#104e64;--app-soft:#edf9fc;--app-border:#d9ebf0;--app-text:#173b47}
body{min-height:100vh;display:flex;flex-direction:column;background:radial-gradient(circle at 8% 0,#dff4fa 0,transparent 34%),#f4f8fa;color:var(--app-text);font-family:"Microsoft JhengHei",system-ui,-apple-system,sans-serif}
main{flex:1 0 auto}
footer{flex-shrink:0}
.brand-mark{display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:.75rem;background:linear-gradient(145deg,#27a8bd,var(--app-primary-dark));color:#fff;box-shadow:0 .35rem 1rem #176b8733}
.navbar-brand{color:var(--app-text)}.navbar .nav-link.active,.navbar .nav-link:hover{color:var(--app-primary)}
.tool-shell{padding:1.5rem;border:1px solid var(--app-border);border-radius:1.25rem;background:#fff;box-shadow:0 .35rem 1.5rem #234f5d12}
.privacy-note{display:grid;gap:.25rem;max-width:28rem;padding:1rem;border:1px solid var(--app-border);border-radius:.75rem;background:var(--app-soft);font-size:.92rem}
.drop-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:12rem;border:2px dashed #70b5c5;border-radius:1rem;padding:1.5rem;background:#f1fbfd;color:var(--app-primary);text-align:center;cursor:pointer;transition:.2s}
.drop-zone:hover,.drop-zone.hover{border-color:var(--app-primary);background:#e1f6fa;transform:translateY(-1px)}.drop-icon{display:grid;place-items:center;width:3.75rem;height:3.75rem;margin-bottom:.75rem;border-radius:50%;background:#d8f2f6;font-size:2rem}
.panel{height:100%;padding:1rem;border:1px solid var(--app-border);border-radius:.85rem;background:#fff}.file-list{display:grid;gap:.75rem;max-height:42rem;overflow:auto}.file-list.empty{display:block;color:#6b8790}.file-item{display:grid;grid-template-columns:4rem 1fr;gap:.75rem;align-items:center;padding:.6rem;border:1px solid var(--app-border);border-radius:.7rem;background:#f8fcfd;cursor:pointer}.file-item.active{border-color:var(--app-primary);box-shadow:0 0 0 .15rem #176b8720}.file-thumb{width:4rem;height:4rem;object-fit:cover;border-radius:.45rem;background:#e9f3f6}.file-name{font-size:.9rem;font-weight:700;word-break:break-all}.file-meta{font-size:.8rem;color:#6b8790}
.nav-pills .nav-link{color:var(--app-primary)}.nav-pills .nav-link.active{background:var(--app-primary)}.btn-primary{--bs-btn-bg:var(--app-primary);--bs-btn-border-color:var(--app-primary);--bs-btn-hover-bg:var(--app-primary-dark);--bs-btn-hover-border-color:var(--app-primary-dark)}.btn-outline-primary{--bs-btn-color:var(--app-primary);--bs-btn-border-color:var(--app-primary);--bs-btn-hover-bg:var(--app-primary);--bs-btn-hover-border-color:var(--app-primary)}
.result-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.result-card{padding:.75rem;border:1px solid var(--app-border);border-radius:.75rem;background:#f8fcfd}.result-card img{display:block;width:100%;aspect-ratio:4/3;object-fit:contain;border-radius:.45rem;background:#fff}.result-card .small{word-break:break-all}
.workspace{position:relative;display:grid;place-items:center;min-height:30rem;border:1px solid var(--app-border);border-radius:.75rem;background:#f8fcfd;overflow:hidden}.workspace img:not(.d-none){display:block;max-width:100%;max-height:70vh}.empty-workspace{display:grid;place-items:center;min-height:18rem;color:#6b8790;text-align:center}
.edit-layout{display:grid;grid-template-columns:minmax(0,1fr) 18rem;gap:1rem}.edit-toolbar{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:.75rem}.tool-btn{display:grid;place-items:center;width:2.4rem;height:2.4rem;border:1px solid var(--app-border);border-radius:.45rem;background:#fff;color:var(--app-text);font-weight:700}.tool-btn:hover,.tool-btn.active{border-color:var(--app-primary);background:#e1f6fa;color:var(--app-primary)}.tool-btn.danger{color:#b42318}
.editor-wrap{position:relative;display:grid;place-items:center;min-height:32rem;border:1px solid var(--app-border);border-radius:.75rem;background:#f8fcfd;overflow:auto}.editor-side{padding:1rem;border:1px solid var(--app-border);border-radius:.75rem;background:#f8fcfd}.setting-group.is-hidden{display:none!important}#konva-container{line-height:0}.footer-link{color:#557681;text-decoration:none}.footer-link:hover{color:var(--app-primary)}
@media(max-width:1199.98px){.result-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.edit-layout{grid-template-columns:1fr}.editor-side{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;align-items:end}.editor-side .form-label,.editor-side .form-check,.editor-side button{margin-bottom:0!important}}
@media(max-width:767.98px){.tool-shell{padding:1rem}.result-grid{grid-template-columns:1fr}.file-list{max-height:none}.editor-side{display:block}.workspace,.editor-wrap{min-height:22rem}}