:root { --bg:#f6f3ef; --card:#ffffff; --text:#1f2933; --muted:#667085; --border:#ddd6cc; --accent:#1f4d3a; --warn:#8a4b00; --danger:#a82020; }
* { box-sizing: border-box; }
body { margin:0; font-family: Arial, Helvetica, sans-serif; background:var(--bg); color:var(--text); }
.page { max-width: 1120px; margin: 0 auto; padding: 28px; }
.hero { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; margin-bottom:20px; }
h1 { font-size:42px; margin:4px 0 8px; }
h2 { margin:0 0 8px; } h3 { margin:22px 0 10px; }
.eyebrow { text-transform:uppercase; letter-spacing:.08em; color:var(--accent); font-weight:700; font-size:13px; margin:0; }
.card, .status-panel { background:var(--card); border:1px solid var(--border); border-radius:18px; box-shadow:0 10px 30px rgba(20,20,20,.06); padding:22px; margin-bottom:18px; }
.status-panel { color:var(--muted); }
.language-card { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:14px; min-width:180px; }
label { display:flex; flex-direction:column; gap:7px; font-weight:700; }
input, textarea, select { width:100%; border:1px solid var(--border); border-radius:10px; padding:11px 12px; font-size:16px; background:#fff; color:var(--text); }
.grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; }
.wide { grid-column: span 3; }
.help, .summary { color:var(--muted); }
.actions { display:flex; gap:12px; margin-top:18px; flex-wrap:wrap; }
button { border:0; border-radius:999px; background:var(--accent); color:white; padding:12px 18px; font-weight:700; cursor:pointer; }
button.secondary { background:#334155; }
button:disabled { opacity:.5; cursor:not-allowed; }
.items-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap:14px; }
.item-card { border:1px solid var(--border); border-radius:16px; overflow:hidden; background:#fffaf4; }
.item-card img { width:100%; height:210px; object-fit:cover; background:#eee; display:block; }
.item-body { padding:14px; }
.item-title { font-weight:800; margin-bottom:8px; }
.meta { display:grid; gap:5px; color:var(--muted); font-size:14px; }
.reason { margin-top:10px; font-size:14px; }
.missing-block { background:#fff7ed; border:1px solid #fed7aa; color:var(--warn); border-radius:14px; padding:14px; margin-top:16px; }
.error-card { border-color:#fecaca; color:var(--danger); }
@media (max-width: 800px) { .hero { flex-direction:column; } .grid { grid-template-columns:1fr; } .wide { grid-column:span 1; } h1 { font-size:32px; } .page { padding:18px; } }

/* V1.4 outfit-centric visualization */
.visual-grid { display:grid; grid-template-columns: repeat(5, minmax(150px, 1fr)); gap:14px; margin: 12px 0 22px; align-items:stretch; }
.visual-slot { border:1px solid var(--border); border-radius:18px; background:#fff; padding:12px; min-height:270px; display:flex; flex-direction:column; gap:9px; justify-content:flex-start; }
.filled-slot { box-shadow:0 8px 22px rgba(20,20,20,.06); }
.empty-slot { border-style:dashed; background:#fff7ed; color:var(--warn); }
.slot-name { font-weight:800; text-transform:uppercase; letter-spacing:.06em; font-size:12px; color:var(--accent); }
.visual-image-shell, .image-shell { width:100%; background:#eee; border-radius:14px; overflow:hidden; display:flex; align-items:center; justify-content:center; min-height:180px; }
.visual-image { width:100%; height:180px; object-fit:cover; display:block; }
.visual-title { font-weight:800; line-height:1.25; }
.visual-meta { color:var(--muted); font-size:13px; line-height:1.35; overflow-wrap:anywhere; }
.empty-icon { width:64px; height:64px; border:2px dashed #f59e0b; border-radius:999px; display:flex; align-items:center; justify-content:center; margin:34px auto 20px; font-size:34px; font-weight:700; }
.no-image { padding:18px; color:var(--muted); text-align:center; width:100%; }
.image-error::after { content:"Image unavailable"; color:var(--muted); font-size:14px; padding:16px; text-align:center; }
@media (max-width: 1050px) { .visual-grid { grid-template-columns: repeat(3, minmax(160px, 1fr)); } }
@media (max-width: 650px) { .visual-grid { grid-template-columns:1fr; } }


/* V1.4.1 user image thumbnail preview */
.user-preview-card { border:1px solid var(--border); border-radius:14px; padding:10px; background:#fffaf4; display:flex; flex-direction:column; gap:8px; font-weight:700; color:var(--muted); }
.user-preview-card[hidden] { display:none; }
.user-preview-card img { width:100%; max-height:145px; object-fit:cover; border-radius:10px; background:#eee; display:block; }

/* V1.4.2 complete outfit board and diagnostics */
.outfit-board { display:grid; grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr; gap:14px; margin:12px 0 24px; padding:16px; border:1px solid var(--border); border-radius:20px; background:linear-gradient(180deg,#ffffff,#fffaf4); }
.board-piece { min-height:230px; border:1px solid var(--border); border-radius:16px; background:#fff; padding:10px; display:flex; flex-direction:column; align-items:center; justify-content:space-between; gap:8px; overflow:hidden; }
.board-slot-name { align-self:flex-start; font-weight:800; text-transform:uppercase; letter-spacing:.06em; font-size:12px; color:var(--accent); }
.board-image { width:100%; height:170px; object-fit:contain; display:block; background:#f3f4f6; border-radius:12px; }
.board-piece-title { font-weight:800; font-size:13px; text-align:center; line-height:1.25; }
.board-empty { border-style:dashed; background:#fff7ed; color:var(--warn); }
.board-empty-icon { width:54px; height:54px; border:2px dashed #f59e0b; border-radius:999px; display:flex; align-items:center; justify-content:center; font-size:30px; font-weight:800; margin:auto; }
.diagnostics-block { background:#eef6ff; border:1px solid #bfdbfe; color:#1e3a5f; border-radius:14px; padding:12px 14px; margin: 10px 0 20px; font-size:14px; line-height:1.45; }
.diagnostics-block[hidden] { display:none; }
@media (max-width: 950px) { .outfit-board { grid-template-columns: repeat(2, minmax(160px,1fr)); } }
@media (max-width: 600px) { .outfit-board { grid-template-columns:1fr; } }

/* V1.4.3 suggested outfit composition */
.suggested-outfit { margin: 12px 0 26px; }
.suggested-layout { display:grid; grid-template-columns: 240px 1fr; gap:18px; align-items:stretch; }
.suggested-user, .suggested-look-card { border:2px solid var(--accent); border-radius:22px; background:#fff; padding:16px; box-shadow:0 12px 32px rgba(20,20,20,.08); }
.suggested-user { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; min-height:360px; }
.suggested-user img { width:100%; max-height:300px; object-fit:cover; border-radius:16px; background:#eee; }
.suggested-user-empty { border-style:dashed; border-color:var(--border); color:var(--muted); }
.suggested-look-card { min-height:360px; }
.suggested-look-title { font-size:24px; font-weight:900; margin-bottom:14px; color:var(--accent); }
.suggested-look-canvas { display:grid; grid-template-rows:auto auto auto auto; gap:10px; padding:14px; border-radius:20px; background:linear-gradient(180deg,#f8fafc,#fff7ed); border:1px solid var(--border); }
.suggested-piece { border:1px solid var(--border); border-radius:18px; background:#fff; padding:10px; display:grid; grid-template-columns: 140px 1fr; grid-template-rows:auto auto; column-gap:14px; align-items:center; min-height:112px; overflow:hidden; }
.suggested-piece-label { font-weight:900; text-transform:uppercase; letter-spacing:.08em; font-size:12px; color:var(--accent); grid-column:1 / -1; align-self:start; margin-bottom:6px; }
.suggested-piece-image { width:140px; height:96px; object-fit:contain; background:#f3f4f6; border-radius:12px; display:block; }
.suggested-piece-name { font-weight:900; font-size:18px; line-height:1.2; }
.suggested-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.suggested-row .suggested-piece { grid-template-columns:90px 1fr; min-height:100px; }
.suggested-row .suggested-piece-image { width:90px; height:72px; }
.suggested-missing { border-style:dashed; background:#fffaf4; color:var(--warn); }
.suggested-missing-box { width:72px; height:72px; border:2px dashed #f59e0b; border-radius:999px; display:flex; align-items:center; justify-content:center; font-size:36px; font-weight:900; margin:auto; }
@media (max-width: 850px) { .suggested-layout { grid-template-columns:1fr; } .suggested-user { min-height:auto; } .suggested-row { grid-template-columns:1fr; } }

.final-generated-wrap { margin: 12px 0 26px; border: 2px solid var(--accent); border-radius: 24px; background: #fff; padding: 18px; box-shadow: 0 12px 32px rgba(20,20,20,.08); }
.final-generated-image { width: 100%; max-height: 720px; object-fit: contain; border-radius: 18px; background: #f3f4f6; display: block; }
.final-generated-meta { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; color: var(--muted); word-break: break-word; }
.final-generated-meta strong { color: var(--text); }
.final-generated-placeholder { min-height: 260px; border: 2px dashed var(--warn); border-radius: 18px; display: flex; align-items: center; justify-content: center; color: var(--warn); font-weight: 900; }