:root{--bg:#f6f1eb;--paper:#fff;--ink:#2d2723;--muted:#776e67;--brand:#6f4e3d;--danger:#a23c35;--line:#ded4ca}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,"Noto Sans TC",sans-serif}header{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:20px;padding:12px max(16px,calc((100% - 1100px)/2));background:#302925;color:#fff;box-shadow:0 2px 12px #0002}.brand{margin-right:auto;color:#fff;text-decoration:none;font-size:1.1rem;font-weight:800}nav{display:flex;gap:5px;flex-wrap:wrap}button{border:1px solid var(--line);border-radius:9px;padding:10px 14px;background:#fff;color:var(--ink);font:inherit;font-weight:650;cursor:pointer}header button{border:0;background:transparent;color:#fff;padding:8px}.primary{border-color:var(--brand);background:var(--brand);color:#fff}.danger{border-color:var(--danger);background:var(--danger);color:#fff}main{max-width:1100px;min-height:calc(100vh - 130px);margin:auto;padding:25px 16px 60px}h1{margin:0 0 16px;font-size:clamp(1.8rem,5vw,2.5rem)}h2{margin-top:0}.panel,.clothing-card{background:var(--paper);border:1px solid var(--line);border-radius:15px;padding:18px;box-shadow:0 5px 20px #3b2e2510}.narrow,.form-panel{max-width:650px;margin:5vh auto}.narrow{max-width:430px}label{display:block;margin:13px 0 5px;font-weight:700}input,select,textarea{display:block;width:100%;margin-top:5px;padding:11px;border:1px solid #bcb0a5;border-radius:9px;background:#fff;font:inherit}textarea{min-height:85px;resize:vertical}.muted{color:var(--muted)}.message{max-width:650px;margin:0 auto 16px;padding:11px;border:1px solid #e2ca77;border-radius:9px;background:#fff3bf}.message.error{border-color:#e3a29c;background:#ffe3df}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(245px,1fr));gap:16px}.compact-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}.two-col{display:grid;grid-template-columns:minmax(280px,360px) 1fr;gap:18px;align-items:start}.clothing-card{padding:0;overflow:hidden}.clothing-card .content{padding:15px}.clothing-card h2{margin:0 0 8px}.clothing-photo{display:block;width:100%;height:220px;object-fit:cover;background:#e8dfd6}.no-photo{display:grid;place-items:center;color:var(--muted)}.tag{display:inline-block;margin:2px;padding:3px 8px;border-radius:99px;background:#e9ddd2;font-size:.86rem}.actions,.title-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.title-row{justify-content:space-between;margin-bottom:14px}.actions button{margin-top:10px}.search{margin-bottom:18px}.preview{display:block;max-width:100%;max-height:350px;border-radius:10px;background-image:linear-gradient(45deg,#eee 25%,transparent 25%),linear-gradient(-45deg,#eee 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#eee 75%),linear-gradient(-45deg,transparent 75%,#eee 75%);background-position:0 0,0 10px,10px -10px,-10px 0;background-size:20px 20px}.photo-tools{margin:10px 0}.photo-status{margin:0;padding:10px;border-radius:9px;background:#eee6de}.photo-status.processing{background:#fff3bf}.photo-status.success{background:#dff3e4}.photo-status.error{background:#ffe3df}.photo-tools .actions button{margin-top:8px}.empty{text-align:center}.card-actions{display:flex;gap:7px;margin-top:12px}.card-actions button{padding:7px 10px}footer{max-width:1100px;margin:auto;padding:18px 16px;color:var(--muted);display:flex;justify-content:space-between;align-items:center}footer button{border:0;background:transparent;text-decoration:underline;color:var(--muted);padding:0}@media(max-width:700px){header{align-items:flex-start}nav{justify-content:flex-end}.two-col{grid-template-columns:1fr}.clothing-photo{height:250px}main{padding-top:18px}}@media(display-mode:standalone){body{padding-bottom:env(safe-area-inset-bottom)}}
.credit-status{margin:0 0 12px;padding:10px;border-radius:9px;background:#e9f0f8;color:#43566b}.save-status{margin:10px 0 0;padding:10px;border-radius:9px;background:#fff3bf}.save-status.error{background:#ffe3df}.wardrobe-sections{margin:12px 0}.wardrobe-section{display:flex;align-items:center;justify-content:space-between;gap:6px;margin:6px 0;padding:6px 8px;border-radius:8px;background:#f2ebe4}.wardrobe-section button{padding:3px 8px}.section-add{display:flex;gap:6px;margin-top:8px}.section-add input{margin:0;min-width:0}.section-add button{flex:0 0 auto;padding:8px 10px}
