.page-aitryon { background: #f4f1ea; }
.page-aitryon [hidden] { display: none !important; }
.page-aitryon .header-links .is-active { color: var(--brand-dark); font-weight: 800; }
.aitryon-shell { padding-top: 24px; padding-bottom: 70px; }
.aitryon-simple-intro { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 8px 4px 18px; border-bottom: 1px solid var(--line); }
.aitryon-simple-intro h1 { margin: 0; color: var(--brand-dark); font: 700 clamp(34px,5vw,56px)/1 Georgia,serif; letter-spacing: -.04em; }
.aitryon-simple-intro > div > p:last-child { margin: 8px 0 0; color: var(--muted); font-size: 14px; }
.privacy-pill { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; padding: 9px 13px; color: #2f6657; background: #e7f1ec; border-radius: 999px; font-size: 11px; font-weight: 800; }
.privacy-pill > span:first-child { color: #43a079; font-size: 9px; }
.aitryon-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; padding: 34px 38px; color: #fff; background: linear-gradient(130deg, #0c3034, #1f6268); border-radius: 32px; box-shadow: 0 24px 60px rgba(10,48,52,.18); }
.aitryon-kicker { margin: 0 0 8px; font-size: 11px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; opacity: .72; }
.aitryon-hero h1 { margin: 0; font: 700 clamp(44px,8vw,92px)/.9 Georgia,serif; letter-spacing: -.055em; }
.aitryon-hero > div > p:last-child { max-width: 680px; margin: 18px 0 0; color: rgba(255,255,255,.8); font-size: 16px; }
.aitryon-privacy { display: grid; min-width: 240px; gap: 5px; padding: 16px 18px; border: 1px solid rgba(255,255,255,.18); border-radius: 18px; background: rgba(255,255,255,.08); }
.aitryon-privacy span { color: rgba(255,255,255,.7); font-size: 12px; }
.aitryon-notice { margin-top: 18px; padding: 15px 18px; border-radius: 14px; background: #fff; }
.aitryon-notice.is-error { color: #8b2c2c; border: 1px solid #efc9c3; }
.aitryon-workspace { display: grid; grid-template-columns: minmax(310px,.7fr) minmax(520px,1.5fr); gap: 16px; margin-top: 16px; }
.aitryon-card, .aitryon-generate-card, .aitryon-active-result, .aitryon-history-section { background: #fffdf8; border: 1px solid var(--line); border-radius: 26px; box-shadow: 0 14px 36px rgba(20,40,42,.06); }
.aitryon-card { min-width: 0; padding: 24px; }
.aitryon-card-head { display: flex; gap: 13px; align-items: flex-start; margin-bottom: 18px; }
.aitryon-card-head > span { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; color: #fff; background: var(--brand-dark); border-radius: 50%; font-size: 11px; font-weight: 900; }
.aitryon-card-head h2, .aitryon-generate-card h2, .aitryon-active-result h2, .aitryon-section-head h2 { margin: 0; color: var(--brand-dark); font-size: clamp(22px,3vw,30px); }
.aitryon-card-head p, .aitryon-section-head p { margin: 5px 0 0; color: var(--muted); font-size: 13px; }
.gender-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 12px; padding: 4px; background: #ecebe6; border-radius: 999px; }
.gender-switch button { min-height: 38px; border: 0; border-radius: 999px; color: var(--muted); background: transparent; font-weight: 800; cursor: pointer; }
.gender-switch button.is-active { color: #fff; background: var(--brand-dark); }
.model-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.customer-card .model-grid { max-width: 460px; }
.model-card { position: relative; display: grid; grid-template-rows: minmax(0,1fr) auto; min-width: 0; padding: 5px; overflow: hidden; border: 1px solid var(--line); border-radius: 15px; color: var(--brand-dark); background: #f8f6f1; cursor: pointer; }
.model-card[hidden] { display: none !important; }
.model-card img { display: block; width: 100%; aspect-ratio: 2/3; object-fit: cover; object-position: center top; background: #f2eee7; border-radius: 10px; }
.model-card strong { padding: 7px 2px 4px; overflow: hidden; font-size: 10px; text-align: center; white-space: nowrap; text-overflow: ellipsis; }
.model-card.is-selected { border-color: var(--brand-dark); box-shadow: 0 0 0 2px rgba(12,48,52,.13); }
.model-card.is-selected::after { content: "✓"; position: absolute; top: 9px; right: 9px; display: grid; place-items: center; width: 22px; height: 22px; color: #fff; background: var(--brand-dark); border-radius: 50%; font-size: 11px; font-weight: 900; }
.model-upload-card { grid-template-rows: minmax(0,1fr) auto auto; }
.model-upload-card input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.model-upload-visual { display: grid; place-items: center; min-height: 0; aspect-ratio: 2/3; overflow: hidden; background: #eeece6; border: 1px dashed #aebbb7; border-radius: 10px; }
.model-upload-visual img { grid-area: 1/1; height: 100%; }
.model-upload-visual b { grid-area: 1/1; display: grid; place-items: center; width: 40px; height: 40px; color: #fff; background: var(--brand-dark); border-radius: 50%; font-size: 22px; }
.model-upload-card small { padding-bottom: 5px; color: var(--muted); font-size: 8px; text-align: center; }
.model-status { margin: 11px 0 0; color: #2f6657; font-size: 11px; font-weight: 800; text-align: center; }
.aitryon-upload-zone { display: grid; place-items: center; min-height: 330px; margin: 0; padding: 25px; text-align: center; border: 1.5px dashed #a9bbb7; border-radius: 22px; background: linear-gradient(160deg,#f7fbf9,#f0ece5); cursor: pointer; }
.aitryon-upload-zone:hover, .aitryon-upload-zone.is-dragging { border-color: var(--brand-dark); background: #eef6f3; }
.aitryon-upload-zone input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.aitryon-upload-zone strong, .aitryon-upload-zone small { display: block; }
.aitryon-upload-zone small { margin-top: 7px; color: var(--muted); }
.upload-plus { display: grid; place-items: center; width: 62px; height: 62px; margin-bottom: 15px; color: #fff; background: var(--brand-dark); border-radius: 50%; font-size: 34px; }
.aitryon-person-preview { display: none !important; position: relative; overflow: hidden; min-height: 330px; border-radius: 22px; background: #eceeea; }
.aitryon-person-preview img { display: block; width: 100%; height: 430px; object-fit: contain; background: #f3f1ec; }
.aitryon-person-preview button { position: absolute; right: 12px; bottom: 12px; padding: 10px 14px; border: 0; border-radius: 999px; color: #fff; background: rgba(10,48,52,.88); cursor: pointer; }
.photo-tips { display: grid; gap: 7px; margin: 17px 0 0; padding-left: 19px; color: var(--muted); font-size: 12px; }
.selected-product { display: grid; grid-template-columns: 105px 1fr; gap: 15px; align-items: center; min-height: 120px; padding: 11px; border: 1px solid var(--line); border-radius: 19px; background: #f7f5f0; }
.selected-product img { width: 105px; height: 105px; object-fit: contain; background: #fff; border-radius: 13px; }
.selected-product span, .selected-product small { display: block; color: var(--muted); font-size: 11px; }
.selected-product strong { display: block; margin: 5px 0; color: var(--brand-dark); overflow-wrap: anywhere; }
.selected-product.is-empty { opacity: .75; }
.outfit-slots { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; }
.outfit-slot { position: relative; display: grid; grid-template-rows: auto 82px auto; gap: 5px; min-width: 0; padding: 9px; overflow: hidden; text-align: left; border: 1px solid var(--line); border-radius: 16px; color: var(--brand-dark); background: #f8f6f1; cursor: pointer; }
.outfit-slot.is-active { border-color: var(--brand-dark); box-shadow: 0 0 0 2px rgba(12,48,52,.1); }
.outfit-slot.has-item { background: #fff; }
.outfit-slot > span { font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.outfit-slot > strong { display: grid; place-items: center; min-width: 0; overflow: hidden; color: #a8b4b0; background: #eef0ec; border-radius: 10px; font-size: 24px; }
.outfit-slot > strong img { width: 100%; height: 82px; object-fit: contain; background: #fff; }
.outfit-slot > strong.is-multiple { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2px; padding: 2px; }
.outfit-slot > strong.is-multiple img { height: 38px; border-radius: 5px; }
.outfit-slot > small { display: block; overflow: hidden; color: var(--muted); font-size: 9px; white-space: nowrap; text-overflow: ellipsis; }
.outfit-slot .slot-remove { position: absolute; top: 5px; right: 5px; display: grid; place-items: center; width: 23px; height: 23px; padding: 0; border: 0; border-radius: 50%; color: #fff; background: rgba(128,42,42,.88); cursor: pointer; }
.outfit-builder-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; color: var(--muted); font-size: 11px; }
.outfit-builder-meta button { padding: 5px 9px; border: 0; color: #8b3434; background: transparent; cursor: pointer; }
.product-source-tabs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-top: 17px; padding: 5px; border: 1px solid var(--line); border-radius: 17px; background: #efeee9; }
.product-source-tabs button { display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; min-height: 44px; padding: 8px 10px; border: 0; border-radius: 12px; color: var(--muted); background: transparent; cursor: pointer; }
.product-source-tabs button span { display: grid; place-items: center; flex: 0 0 22px; width: 22px; height: 22px; color: var(--brand-dark); background: rgba(255,255,255,.72); border-radius: 50%; font-size: 8px; font-weight: 900; }
.product-source-tabs button strong { min-width: 0; overflow: hidden; font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
.product-source-tabs button.is-active { color: #fff; background: var(--brand-dark); box-shadow: 0 7px 16px rgba(10,48,52,.14); }
.product-source-tabs button.is-active span { color: var(--brand-dark); background: #fff; }
.product-source-panel { margin-top: 13px; padding: 15px; border: 1px solid var(--line); border-radius: 18px; background: #faf9f5; }
.source-tab-panel[hidden] { display: none !important; }
.product-source-panel h3 { margin: 0; color: var(--brand-dark); font-size: 17px; }
.product-source-panel p:not(.aitryon-kicker) { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.product-upload-button { display: inline-flex; align-items: center; justify-content: center; max-width: 100%; min-height: 42px; margin-top: 12px; padding: 9px 15px; color: #fff; background: var(--brand-dark); border-radius: 999px; font-size: 12px; font-weight: 800; text-align: center; cursor: pointer; }
.product-upload-button input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.upload-source-panel > small { display: inline-block; margin-left: 8px; color: var(--muted); font-size: 10px; }
.catalog-source-panel { padding: 0; border: 0; background: transparent; }
.aitryon-search { display: grid; grid-template-columns: 1fr auto; gap: 9px; margin-top: 15px; }
.aitryon-search input { min-width: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 999px; outline: 0; }
.aitryon-search input:focus { border-color: var(--brand-dark); box-shadow: 0 0 0 3px rgba(12,48,52,.09); }
.aitryon-search button, .aitryon-generate-button { border: 0; color: #fff; background: var(--brand-dark); font-weight: 800; cursor: pointer; }
.aitryon-search button { padding: 0 18px; border-radius: 999px; }
.aitryon-tabs { display: flex; gap: 7px; overflow-x: auto; margin: 14px 0 8px; padding-bottom: 3px; }
.aitryon-tabs button { padding: 8px 12px; white-space: nowrap; border: 1px solid var(--line); border-radius: 999px; color: var(--text); background: #fff; cursor: pointer; }
.aitryon-tabs button.active { color: #fff; background: var(--brand-dark); border-color: var(--brand-dark); }
.aitryon-inline-status { min-height: 18px; margin: 8px 0; color: var(--muted); font-size: 12px; }
.aitryon-product-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; max-height: 430px; overflow-y: auto; padding: 2px; }
.aitryon-product { min-width: 0; padding: 0; overflow: hidden; text-align: left; border: 1px solid var(--line); border-radius: 15px; background: #fff; cursor: pointer; }
.aitryon-product:hover, .aitryon-product.is-selected { border-color: var(--brand-dark); box-shadow: 0 8px 22px rgba(10,48,52,.12); }
.aitryon-product img { display: block; width: 100%; aspect-ratio: 1/1.15; object-fit: contain; background: #f7f7f5; }
.aitryon-product div { padding: 9px; }
.aitryon-product strong { display: -webkit-box; overflow: hidden; color: var(--brand-dark); font-size: 11px; line-height: 1.35; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.aitryon-product small { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; }
.load-more-products { display: flex; width: max-content; margin: 13px auto 0; }
.load-more-products[hidden] { display: none; }
.advanced-options { margin-top: 14px; border-top: 1px solid var(--line); }
.advanced-options > summary { width: max-content; margin: 13px auto 0; padding: 7px 12px; color: var(--muted); border-radius: 999px; font-size: 10px; font-weight: 800; cursor: pointer; list-style: none; }
.advanced-options > summary::-webkit-details-marker { display: none; }
.advanced-options > summary::before { content: "+ "; }
.advanced-options[open] > summary::before { content: "− "; }
.ai-source-panel { background: linear-gradient(135deg,#fffdf8,#eef5f2); }
.source-panel-heading { margin-bottom: 15px; }
.personalization-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.personalization-grid label { display: grid; gap: 7px; color: var(--brand-dark); font-size: 11px; font-weight: 800; }
.personalization-grid select { width: 100%; min-height: 44px; padding: 9px 34px 9px 11px; border: 1px solid var(--line); border-radius: 12px; color: var(--text); background: #fff; }
.personalization-note { margin: 13px 0 0; color: var(--muted); font-size: 11px; }
.ai-stylist-panel { display: grid; grid-template-columns: 1fr auto; gap: 13px 18px; align-items: center; margin-top: 18px; padding: 17px; color: #fff; background: linear-gradient(130deg,#0c3034,#23656a); border-radius: 18px; }
.ai-stylist-panel strong { font-size: 15px; }
.ai-stylist-panel p { margin: 4px 0 0; color: rgba(255,255,255,.72); font-size: 11px; }
.ai-stylist-panel .aitryon-generate-button { min-width: 190px; min-height: 45px; color: var(--brand-dark); background: #fff; box-shadow: none; }
.ai-stylist-panel .aitryon-inline-status, .ai-stylist-results { grid-column: 1/-1; margin: 0; color: rgba(255,255,255,.8); }
.ai-stylist-results { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.ai-stylist-summary { grid-column: 1/-1; }
.ai-selected-product { min-width: 0; padding: 8px; color: var(--brand-dark); background: #fff; border-radius: 12px; }
.ai-selected-product img { width: 100%; aspect-ratio: 1/1; object-fit: contain; background: #f5f5f2; border-radius: 8px; }
.ai-selected-product strong, .ai-selected-product small { display: block; margin-top: 5px; overflow: hidden; text-overflow: ellipsis; }
.ai-selected-product strong { font-size: 10px; white-space: nowrap; }
.ai-selected-product small { color: var(--muted); font-size: 8px; }
.aitryon-generate-card { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; margin-top: 20px; padding: 25px 28px; }
.aitryon-generate-card .aitryon-kicker { color: var(--brand-dark); }
.aitryon-consent { display: flex; gap: 9px; align-items: flex-start; margin-top: 13px; color: var(--muted); font-size: 12px; }
.aitryon-consent input { margin-top: 2px; }
.aitryon-generate-button { min-width: 210px; min-height: 56px; padding: 13px 22px; border-radius: 999px; font-size: 15px; box-shadow: 0 13px 27px rgba(10,48,52,.2); }
.aitryon-generate-button:disabled { opacity: .48; cursor: not-allowed; }
.aitryon-generation-status { grid-column: 1/-1; min-height: 20px; margin: 0; color: var(--muted); }
.aitryon-generation-status.is-error { color: #9b3434; }
.aitryon-generation-status.is-success { color: #287153; }
.aitryon-active-result { display: grid; grid-template-columns: .65fr 1fr; gap: 28px; margin-top: 20px; padding: 26px; }
.aitryon-active-result img { width: 100%; max-height: 720px; object-fit: contain; background: #f2f1ed; border-radius: 20px; }
.result-copy { align-self: center; }
.result-copy > p:not(.aitryon-kicker) { color: var(--muted); line-height: 1.6; }
.result-products { display: grid; gap: 7px; margin: 9px 0 17px; }
.result-product { display: grid; grid-template-columns: 42px 1fr; gap: 9px; align-items: center; padding: 7px; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.result-product img { width: 42px; height: 42px; object-fit: contain; border-radius: 7px; }
.result-product strong, .result-product small { display: block; }
.result-product strong { color: var(--brand-dark); font-size: 10px; }
.result-product small { color: var(--muted); font-size: 8px; }
.aitryon-secondary-button { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 9px 15px; color: var(--brand-dark); background: #fff; border: 1px solid var(--line); border-radius: 999px; font-weight: 800; text-decoration: none; cursor: pointer; }
.history-collapsible { margin-top: 18px; }
.history-collapsible > summary { width: max-content; margin: 0 auto; padding: 8px 14px; color: var(--muted); font-size: 11px; font-weight: 800; cursor: pointer; list-style: none; }
.history-collapsible > summary::-webkit-details-marker { display: none; }
.aitryon-history-section { margin-top: 8px; padding: 26px; }
.aitryon-section-head { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; }
.aitryon-history-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.history-card { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.history-images { display: grid; grid-template-columns: repeat(3,1fr); }
.history-image { position: relative; min-width: 0; aspect-ratio: 4/5; background: #efefec; border-right: 1px solid var(--line); }
.history-image:last-child { border-right: 0; }
.history-image img { width: 100%; height: 100%; object-fit: contain; background: #f7f7f5; }
.history-image span { position: absolute; left: 5px; bottom: 5px; padding: 3px 5px; color: #fff; background: rgba(10,48,52,.78); border-radius: 5px; font-size: 8px; font-weight: 800; }
.history-body { padding: 13px; }
.history-body strong { display: block; color: var(--brand-dark); overflow-wrap: anywhere; }
.history-meta { margin: 5px 0 10px; color: var(--muted); font-size: 10px; }
.history-actions { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.history-status-badge { padding: 5px 8px; color: var(--brand-dark); background: #eaf2ef; border-radius: 999px; font-size: 9px; font-weight: 900; }
.history-delete { border: 0; color: #9b3434; background: transparent; font-size: 10px; cursor: pointer; }
.aitryon-empty { grid-column: 1/-1; padding: 38px 20px; color: var(--muted); text-align: center; border: 1px dashed #bcc8c4; border-radius: 18px; }
@media (max-width: 1050px) { .aitryon-workspace { grid-template-columns: minmax(0,1fr); } .aitryon-product-grid { grid-template-columns: repeat(5,minmax(0,1fr)); } .aitryon-history-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .personalization-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 700px) { .aitryon-shell { padding-top: 12px; } .aitryon-simple-intro { align-items: flex-start; gap: 10px; padding: 5px 2px 13px; } .aitryon-simple-intro h1 { font-size: 34px; } .aitryon-simple-intro > div > p:last-child { max-width: 245px; font-size: 11px; } .privacy-pill { padding: 7px 9px; font-size: 9px; } .aitryon-card { padding: 15px; border-radius: 20px; } .aitryon-card-head { margin-bottom: 13px; } .aitryon-card-head > span { width: 30px; height: 30px; flex-basis: 30px; } .aitryon-card-head h2 { font-size: 22px; } .model-grid { gap: 7px; } .model-card { border-radius: 12px; } .model-card img, .model-upload-visual { border-radius: 8px; } .outfit-slots { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; } .outfit-slot { grid-template-rows: auto 62px auto; padding: 6px; border-radius: 12px; } .outfit-slot > span { font-size: 8px; letter-spacing: 0; } .outfit-slot > strong img { height: 62px; } .outfit-slot > strong.is-multiple img { height: 28px; } .product-source-tabs button { display: grid; gap: 4px; padding: 7px 4px; } .product-source-tabs button span { margin: 0 auto; } .product-source-tabs button strong { width: 100%; font-size: 9px; } .aitryon-product-grid { grid-template-columns: repeat(3,minmax(0,1fr)); max-height: 470px; } .personalization-grid { grid-template-columns: 1fr 1fr; } .ai-stylist-panel { grid-template-columns: 1fr; } .ai-stylist-panel .aitryon-generate-button { width: 100%; } .ai-stylist-results { grid-template-columns: repeat(2,minmax(0,1fr)); } .aitryon-generate-card { grid-template-columns: 1fr; padding: 18px; border-radius: 20px; } .aitryon-generate-button { width: 100%; } .aitryon-active-result { grid-template-columns: 1fr; padding: 18px; } .aitryon-history-section { padding: 16px; } .aitryon-history-grid { grid-template-columns: 1fr; } .aitryon-section-head { align-items: center; } }