:root {
  --primary: #8b5cf6;
  --primary-light: #a78bfa;
  --primary-dark: #7c3aed;
  --accent: #8b5cf6;
  --accent-light: #a78bfa;
  --accent-dark: #7c3aed;
  --bg: #0a0a0f;
  --bg-secondary: #12121a;
  --bg-card: #1a1a24;
  --bg-card-hover: #252532;
  --text: #ffffff;
  --text-secondary: #a1a1aa;
  --text-muted: #71717a;
  --border: #27272a;
  --border-light: #3f3f46;
  --success: #10b981;
  --danger: #ef4444;
  --gradient-1: linear-gradient(135deg, #8b5cf6, #a78bfa);
  --gradient-2: linear-gradient(135deg, #1a1a24, #252532);
  --gradient-3: linear-gradient(135deg, #2d1f4e, #1a1a24);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.5);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body { font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif; background:var(--bg); color:var(--text); overflow-x:hidden; -webkit-font-smoothing:antialiased; }
::-webkit-scrollbar { width:0; height:0; }

.app-container { max-width:430px; margin:0 auto; min-height:100vh; background:var(--bg); position:relative; overflow:hidden; }

/* HEADER */
.header { position:fixed; top:0; left:50%; transform:translateX(-50%); width:100%; max-width:430px; z-index:100; background:rgba(10,10,15,0.95); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-bottom:1px solid var(--border); }
.header-inner { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; gap:12px; }
.header-logo { font-family:'Playfair Display',serif; font-size:22px; font-weight:700; color:var(--text); letter-spacing:-0.5px; }
.header-logo span { color:var(--primary); }
.header-search { flex:1; max-width:200px; position:relative; }
.header-search input { width:100%; padding:8px 12px 8px 36px; border:1px solid var(--border); border-radius:var(--radius-full); font-size:13px; background:var(--bg-card); color:var(--text); outline:none; transition:all 0.3s; font-family:'Inter',sans-serif; }
.header-search input::placeholder { color:var(--text-muted); }
.header-search input:focus { border-color:var(--primary); background:var(--bg-card); box-shadow:0 0 0 3px rgba(139,92,246,0.2); }
.header-search svg { position:absolute; left:10px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--text-muted); }
.header-actions { display:flex; gap:4px; }
.header-btn { width:36px; height:36px; border-radius:var(--radius-full); border:none; background:transparent; display:flex; align-items:center; justify-content:center; cursor:pointer; position:relative; color:var(--text); transition:background 0.2s; }
.header-btn:hover { background:var(--bg-card); }
.header-btn svg { width:20px; height:20px; }
.header-btn .badge { position:absolute; top:4px; right:4px; width:8px; height:8px; background:var(--primary); border-radius:50%; border:2px solid var(--bg); }

/* PAGES */
.page { display:none; padding-top:60px; padding-bottom:calc(80px + var(--safe-bottom)); min-height:100vh; }
.page.active { display:block; }

/* STORIES */
.stories-bar { padding:16px 0 12px; overflow-x:auto; display:flex; gap:16px; padding-left:16px; padding-right:16px; }
.story-item { display:flex; flex-direction:column; align-items:center; gap:6px; flex-shrink:0; cursor:pointer; }
.story-avatar { width:62px; height:62px; border-radius:50%; padding:2px; background:var(--gradient-1); }
.story-avatar img { width:100%; height:100%; border-radius:50%; object-fit:cover; border:2px solid white; }
.story-name { font-size:11px; color:var(--text-secondary); max-width:64px; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* CATEGORY CHIPS */
.categories-bar { display:flex; gap:8px; padding:0 16px 16px; overflow-x:auto; }
.category-chip { flex-shrink:0; padding:8px 16px; border-radius:var(--radius-full); border:1px solid var(--border); background:var(--bg-card); font-size:13px; font-weight:500; color:var(--text-secondary); cursor:pointer; transition:all 0.3s; font-family:'Inter',sans-serif; }
.category-chip.active, .category-chip:hover { background:var(--primary); color:white; border-color:var(--primary); }

/* HOME CLOSET SECTION */
.home-closet-section { margin:0 16px 16px; padding:24px 20px; background:var(--bg-card); border-radius:var(--radius-lg); border:1px solid var(--border); }
.home-closet-label { font-size:11px; font-weight:700; color:var(--primary); letter-spacing:1px; text-transform:uppercase; }
.home-closet-title { font-size:20px; font-weight:700; margin-top:8px; margin-bottom:6px; }
.home-closet-desc { font-size:13px; color:var(--text-secondary); line-height:1.5; margin-bottom:16px; }
.home-closet-actions { display:flex; gap:10px; margin-bottom:20px; }
.home-closet-btn-primary { padding:10px 18px; border-radius:var(--radius-full); background:var(--primary); color:white; border:none; font-size:13px; font-weight:600; cursor:pointer; font-family:'Inter',sans-serif; display:flex; align-items:center; gap:6px; transition:all 0.2s; }
.home-closet-btn-primary:hover { background:var(--primary-dark); }
.home-closet-btn-secondary { padding:10px 18px; border-radius:var(--radius-full); background:transparent; color:var(--text); border:1px solid var(--border); font-size:13px; font-weight:500; cursor:pointer; font-family:'Inter',sans-serif; transition:all 0.2s; }
.home-closet-btn-secondary:hover { border-color:var(--primary); color:var(--primary); }
.home-closet-icons { display:flex; gap:10px; }
.home-closet-icon-item { width:64px; height:64px; border-radius:var(--radius-md); background:var(--bg-secondary); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; }
.home-closet-icon-item svg { width:24px; height:24px; color:var(--primary); opacity:0.6; }

/* HOME PROMO BANNERS */
.home-promo-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:0 16px 16px; }
.home-promo-card { padding:16px; background:var(--bg-card); border-radius:var(--radius-lg); border:1px solid var(--border); cursor:pointer; transition:all 0.2s; }
.home-promo-card:hover { border-color:var(--primary); }
.home-promo-icon { font-size:20px; margin-bottom:8px; color:var(--primary); }
.home-promo-title { font-size:16px; font-weight:700; margin-bottom:4px; }
.home-promo-desc { font-size:12px; color:var(--text-secondary); margin-bottom:8px; }
.home-promo-code { display:inline-block; padding:3px 10px; background:rgba(139,92,246,0.15); color:var(--primary); font-size:11px; font-weight:700; border-radius:var(--radius-full); letter-spacing:0.5px; }

/* MASONRY FEED */
.masonry-feed { column-count:2; column-gap:10px; padding:0 10px; }
.look-card { break-inside:avoid; margin-bottom:10px; border-radius:var(--radius-md); overflow:hidden; background:var(--bg-card); box-shadow:var(--shadow-sm); cursor:pointer; transition:transform 0.2s,box-shadow 0.2s; position:relative; animation:fadeIn 0.5s ease forwards; border:1px solid var(--border); }
.look-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--border-light); }
.look-card-img { width:100%; display:block; object-fit:cover; background:var(--border-light); }
.look-card-overlay { position:absolute; top:8px; right:8px; display:flex; flex-direction:column; gap:6px; }
.look-card-overlay button { width:32px; height:32px; border-radius:50%; background:rgba(26,26,36,0.8); backdrop-filter:blur(10px); border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all 0.2s; color:var(--text); }
.look-card-overlay button.liked { color:var(--danger); }
.look-card-overlay button.saved { color:var(--accent); }
.look-card-overlay button:hover { transform:scale(1.1); }
.look-card-overlay button svg { width:16px; height:16px; }
.look-card-tags { position:absolute; bottom:60px; left:8px; display:flex; gap:4px; flex-wrap:wrap; }
.look-tag { padding:3px 8px; background:rgba(0,0,0,0.6); backdrop-filter:blur(10px); color:white; font-size:10px; border-radius:var(--radius-full); font-weight:500; }
.look-tag.has-link { cursor:pointer; background:rgba(200,149,108,0.85); }
.look-card-info { padding:10px; }
.look-card-author { display:flex; align-items:center; gap:8px; }
.look-card-author img { width:24px; height:24px; border-radius:50%; object-fit:cover; }
.look-card-author-name { font-size:12px; font-weight:600; }
.look-card-items-count { margin-top:8px; padding:6px 10px; background:var(--bg-secondary); border-radius:var(--radius-sm); font-size:11px; font-weight:500; color:var(--primary); display:flex; align-items:center; gap:4px; border:1px solid var(--border); }
.look-card-items-count svg { width:14px; height:14px; }

/* MODAL */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:200; align-items:flex-end; justify-content:center; }
.modal-overlay.active { display:flex; }
.modal-content { background:var(--bg-secondary); width:100%; max-width:430px; max-height:92vh; border-radius:var(--radius-xl) var(--radius-xl) 0 0; overflow-y:auto; animation:slideUp 0.3s ease; }
@keyframes slideUp { from{transform:translateY(100%);opacity:0} to{transform:translateY(0);opacity:1} }
.modal-handle { width:40px; height:4px; background:var(--border); border-radius:2px; margin:12px auto; }
.modal-top-bar { display:flex; align-items:center; justify-content:space-between; padding:14px 16px 10px; position:sticky; top:0; background:var(--bg-secondary); z-index:10; border-bottom:1px solid var(--border); border-radius:var(--radius-xl) var(--radius-xl) 0 0; }
.modal-close-btn { display:flex; align-items:center; gap:4px; background:none; border:none; font-size:14px; font-weight:600; color:var(--text); cursor:pointer; font-family:'Inter',sans-serif; padding:6px 10px; border-radius:var(--radius-full); transition:background 0.2s; }
.modal-close-btn:hover { background:var(--bg-card); }
.modal-close-btn svg { width:20px; height:20px; }
.modal-look-image-wrapper { position:relative; }
.modal-look-image-wrapper img { width:100%; max-height:450px; object-fit:cover; }
.item-marker { position:absolute; width:28px; height:28px; border-radius:50%; background:rgba(139,92,246,0.95); border:2px solid var(--primary); display:flex; align-items:center; justify-content:center; cursor:pointer; animation:pulse 2s infinite; box-shadow:var(--shadow-md); }
.item-marker svg { width:14px; height:14px; color:white; }
@keyframes pulse { 0%,100%{box-shadow:0 0 0 0 rgba(139,92,246,0.4)} 50%{box-shadow:0 0 0 8px rgba(139,92,246,0)} }
.modal-author-bar { display:flex; align-items:center; justify-content:space-between; padding:16px; }
.modal-author-left { display:flex; align-items:center; gap:10px; }
.modal-author-left img { width:40px; height:40px; border-radius:50%; object-fit:cover; }
.modal-author-name { font-weight:600; font-size:14px; }
.modal-author-handle { font-size:12px; color:var(--text-muted); }
.btn-follow { padding:8px 20px; border-radius:var(--radius-full); background:var(--primary); color:white; border:none; font-size:13px; font-weight:600; cursor:pointer; font-family:'Inter',sans-serif; }
.btn-follow:hover { background:var(--primary-dark); }
.modal-actions-bar { display:flex; gap:16px; padding:0 16px 16px; }
.modal-actions-bar button { display:flex; align-items:center; gap:6px; background:none; border:none; font-size:13px; color:var(--text-secondary); cursor:pointer; font-family:'Inter',sans-serif; }
.modal-actions-bar button svg { width:20px; height:20px; }
.modal-actions-bar button.liked { color:var(--danger); }
.modal-section-title { font-size:15px; font-weight:700; padding:16px 16px 12px; display:flex; align-items:center; gap:6px; }
.modal-section-title svg { width:18px; height:18px; color:var(--accent); }
.shop-items-list { padding:0 16px 16px; display:flex; flex-direction:column; gap:10px; }
.shop-item { display:flex; gap:12px; padding:12px; background:var(--bg-card); border-radius:var(--radius-md); cursor:pointer; transition:all 0.2s; border:1px solid var(--border); }
.shop-item:hover { background:var(--bg-card-hover); border-color:var(--primary); }
.shop-item-img { width:70px; height:70px; border-radius:var(--radius-sm); object-fit:cover; background:var(--bg-secondary); }
.shop-item-info { flex:1; display:flex; flex-direction:column; justify-content:center; }
.shop-item-name { font-size:13px; font-weight:600; }
.shop-item-brand { font-size:12px; color:var(--text-muted); margin-top:2px; }
.shop-item-price { margin-top:4px; display:flex; align-items:center; gap:8px; }
.shop-item-price strong { font-size:14px; color:var(--primary); }
.shop-item-price del { font-size:12px; color:var(--text-muted); }
.shop-item-coupon { margin-top:4px; display:inline-flex; align-items:center; gap:4px; padding:2px 8px; background:rgba(16,185,129,0.1); color:var(--success); font-size:10px; font-weight:600; border-radius:var(--radius-full); width:fit-content; }
.shop-item-action { display:flex; align-items:center; justify-content:center; padding:0 4px; }
.shop-item-action svg { width:18px; height:18px; color:var(--text-muted); }

/* EXPLORE */
.explore-header { padding:16px; }
.explore-search { width:100%; padding:12px 16px 12px 44px; border:1px solid var(--border); border-radius:var(--radius-lg); font-size:14px; background:var(--bg-card); color:var(--text); outline:none; font-family:'Inter',sans-serif; transition:all 0.3s; }
.explore-search::placeholder { color:var(--text-muted); }
.explore-search:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(139,92,246,0.2); }
.explore-search-wrapper { position:relative; }
.explore-search-wrapper svg { position:absolute; left:14px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--text-muted); }
.section-header { display:flex; align-items:center; justify-content:space-between; padding:20px 16px 12px; }
.section-title { font-size:18px; font-weight:700; }
.section-see-all { font-size:13px; color:var(--accent); font-weight:600; cursor:pointer; border:none; background:none; font-family:'Inter',sans-serif; }

/* TRENDING */
.trending-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:0 16px; }
.trending-card { position:relative; border-radius:var(--radius-md); overflow:hidden; cursor:pointer; aspect-ratio:3/4; }
.trending-card img { width:100%; height:100%; object-fit:cover; transition:transform 0.3s; }
.trending-card:hover img { transform:scale(1.05); }
.trending-card-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,0.7),transparent 60%); display:flex; flex-direction:column; justify-content:flex-end; padding:12px; }
.trending-label { font-size:12px; font-weight:700; color:white; }
.trending-count { font-size:11px; color:rgba(255,255,255,0.8); margin-top:2px; }
.trending-badge { position:absolute; top:10px; left:10px; padding:4px 10px; background:var(--danger); color:white; font-size:10px; font-weight:700; border-radius:var(--radius-full); display:flex; align-items:center; gap:4px; }
.trending-badge svg { width:10px; height:10px; }

/* INFLUENCER CARDS */
.influencer-scroll { display:flex; gap:12px; padding:0 16px; overflow-x:auto; }
.influencer-card { flex-shrink:0; width:140px; background:var(--bg-card); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); cursor:pointer; transition:all 0.2s; text-align:center; border:1px solid var(--border); }
.influencer-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); border-color:var(--primary); }
.influencer-cover { height:80px; width:100%; object-fit:cover; }
.influencer-avatar { width:50px; height:50px; border-radius:50%; object-fit:cover; border:3px solid var(--bg-card); margin-top:-25px; position:relative; }
.influencer-name { font-size:13px; font-weight:600; margin-top:6px; padding:0 8px; }
.influencer-handle { font-size:11px; color:var(--text-muted); }
.influencer-stats { font-size:11px; color:var(--text-secondary); margin:6px 0; }
.influencer-follow-btn { margin:0 12px 12px; padding:6px; width:calc(100% - 24px); border-radius:var(--radius-full); background:var(--gradient-1); color:white; border:none; font-size:12px; font-weight:600; cursor:pointer; font-family:'Inter',sans-serif; }

/* AI BANNER */
.ai-banner { margin:20px 16px; padding:20px; background:var(--bg-card); border-radius:var(--radius-lg); color:white; position:relative; overflow:hidden; cursor:pointer; border:1px solid var(--border); }
.ai-banner::after { content:''; position:absolute; top:-30px; right:-30px; width:120px; height:120px; background:rgba(139,92,246,0.2); border-radius:50%; }
.ai-banner-icon { width:44px; height:44px; border-radius:var(--radius-md); background:var(--primary); display:flex; align-items:center; justify-content:center; margin-bottom:12px; }
.ai-banner-icon svg { width:24px; height:24px; }
.ai-banner h3 { font-size:16px; font-weight:700; margin-bottom:4px; }
.ai-banner p { font-size:13px; color:rgba(255,255,255,0.8); line-height:1.4; }
.ai-banner-btn { margin-top:14px; padding:10px 20px; background:var(--primary); color:white; border:none; border-radius:var(--radius-full); font-size:13px; font-weight:600; cursor:pointer; font-family:'Inter',sans-serif; display:inline-flex; align-items:center; gap:6px; }
.ai-banner-btn svg { width:16px; height:16px; }

/* COUPONS */
.coupons-scroll { display:flex; gap:12px; padding:0 16px; overflow-x:auto; }
.coupon-card { flex-shrink:0; width:200px; padding:16px; background:var(--bg-card); border-radius:var(--radius-lg); border:1px solid var(--border); cursor:pointer; transition:all 0.2s; }
.coupon-card:hover { box-shadow:var(--shadow-md); background:var(--bg-card-hover); border-color:var(--primary); }
.coupon-store { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.coupon-store-logo { width:36px; height:36px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; color:white; font-weight:700; font-size:10px; }
.coupon-store-name { font-size:13px; font-weight:600; }
.coupon-value { font-size:22px; font-weight:800; color:var(--primary); }
.coupon-desc { font-size:12px; color:var(--text-secondary); margin-top:4px; }
.coupon-code { margin-top:10px; padding:6px 12px; background:var(--bg-secondary); border-radius:var(--radius-sm); font-size:12px; font-weight:600; text-align:center; letter-spacing:2px; color:var(--primary); border:1px solid var(--border); }

/* CLOSET */
.closet-header { padding:16px 16px 0; display:flex; align-items:center; gap:12px; }
.closet-back-btn { width:36px; height:36px; border-radius:50%; border:none; background:transparent; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text); }
.closet-title { font-size:18px; font-weight:700; flex:1; text-align:center; margin-right:36px; }
.closet-tabs { display:flex; gap:8px; padding:16px; overflow-x:auto; }
.closet-tab { padding:10px 16px; text-align:center; font-size:13px; font-weight:600; color:var(--text-muted); border:1px solid var(--border); background:var(--bg-card); cursor:pointer; font-family:'Inter',sans-serif; transition:all 0.2s; border-radius:var(--radius-full); display:flex; align-items:center; gap:6px; white-space:nowrap; }
.closet-tab svg { width:16px; height:16px; }
.closet-tab.active { color:white; background:var(--primary); border-color:var(--primary); }
.closet-content { padding:16px; }
.closet-empty { text-align:center; padding:60px 20px; }
.closet-empty svg { width:64px; height:64px; color:var(--text-muted); margin-bottom:16px; }
.closet-empty h3 { font-size:18px; font-weight:600; margin-bottom:8px; }
.closet-empty p { font-size:14px; color:var(--text-secondary); line-height:1.5; }

/* CLOSET LOOKS GRID */
.closet-looks-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.closet-look-card { background:var(--bg-card); border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--border); position:relative; }
.closet-look-card-inner { padding:20px; display:flex; align-items:center; justify-content:center; min-height:120px; background:linear-gradient(135deg, rgba(139,92,246,0.15), rgba(139,92,246,0.05)); }
.closet-look-card-inner svg { width:40px; height:40px; color:var(--primary); opacity:0.7; }
.closet-look-card-info { padding:12px; }
.closet-look-card-info h4 { font-size:14px; font-weight:600; margin-bottom:4px; }
.closet-look-card-info span { font-size:12px; color:var(--primary); }
.closet-look-favorite { position:absolute; top:10px; right:10px; width:28px; height:28px; border-radius:50%; background:rgba(26,26,36,0.8); border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--primary); }
.closet-look-favorite.active { color:var(--primary); }
.closet-look-favorite svg { width:14px; height:14px; fill:currentColor; }

/* IA STYLIST / PROVADOR DIGITAL */
.ia-stylist-section { padding:0 16px; }
.ia-stylist-banner { background:var(--bg-card); border-radius:var(--radius-lg); padding:16px; display:flex; align-items:center; gap:12px; border:1px solid var(--border); margin-bottom:20px; }
.ia-stylist-banner-icon { width:48px; height:48px; border-radius:var(--radius-md); background:var(--primary); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ia-stylist-banner-icon svg { width:24px; height:24px; color:white; }
.ia-stylist-banner-text h4 { font-size:14px; font-weight:600; margin-bottom:2px; }
.ia-stylist-banner-text p { font-size:12px; color:var(--text-secondary); }
.ia-stylist-banner-text span { color:var(--primary); }
.ia-pieces-title { font-size:14px; font-weight:600; margin-bottom:12px; }
.ia-pieces-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:20px; }
.ia-piece-card { background:var(--bg-card); border-radius:var(--radius-md); padding:16px 8px; text-align:center; border:1px solid var(--border); cursor:pointer; transition:all 0.2s; }
.ia-piece-card:hover, .ia-piece-card.selected { border-color:var(--primary); background:rgba(139,92,246,0.1); }
.ia-piece-card-emoji { font-size:28px; margin-bottom:6px; }
.ia-piece-card-name { font-size:11px; color:var(--text-secondary); }
.ia-generate-btn { width:100%; padding:14px; border-radius:var(--radius-lg); background:var(--primary); color:white; border:none; font-size:14px; font-weight:600; cursor:pointer; font-family:'Inter',sans-serif; display:flex; align-items:center; justify-content:center; gap:8px; }
.ia-generate-btn svg { width:18px; height:18px; }

/* TRYON / PROVADOR DIGITAL */
.tryon-upload-area { border:2px dashed var(--border); border-radius:var(--radius-lg); overflow:hidden; cursor:pointer; transition:all 0.3s; background:var(--bg-card); position:relative; min-height:160px; display:flex; align-items:center; justify-content:center; }
.tryon-upload-area:hover { border-color:var(--primary); background:var(--bg-card-hover); }
.tryon-upload-area.has-image { border-style:solid; border-color:var(--primary); }
.tryon-upload-placeholder { display:flex; flex-direction:column; align-items:center; gap:8px; padding:24px; text-align:center; }
.tryon-upload-placeholder svg { color:var(--primary); opacity:0.6; }
.tryon-upload-placeholder span { font-size:13px; color:var(--text-secondary); font-weight:500; }
.tryon-upload-placeholder small { font-size:11px; color:var(--text-muted); }
.tryon-upload-area img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; border-radius:var(--radius-lg); }
.tryon-result-container { border-radius:var(--radius-lg); overflow:hidden; border:2px solid var(--primary); }
.tryon-result-container img { width:100%; display:block; }
.tryon-spinner { width:40px; height:40px; border:3px solid var(--border); border-top-color:var(--primary); border-radius:50%; animation:spin 0.8s linear infinite; margin:0 auto; }
@keyframes spin { to { transform:rotate(360deg); } }
.tryon-history-item { display:flex; gap:10px; padding:10px; background:var(--bg-card); border-radius:var(--radius-md); margin-bottom:8px; border:1px solid var(--border); cursor:pointer; transition:all 0.2s; }
.tryon-history-item:hover { border-color:var(--primary); }
.tryon-history-item img { width:50px; height:50px; border-radius:var(--radius-sm); object-fit:cover; }
.tryon-history-item-info { flex:1; display:flex; flex-direction:column; justify-content:center; }
.tryon-history-item-info span { font-size:12px; font-weight:600; }
.tryon-history-item-info small { font-size:11px; color:var(--text-muted); }
.ia-generate-btn:disabled { opacity:0.5; cursor:not-allowed; }

/* PRODUCT FORM */
.add-product-form { padding:16px; background:var(--bg-card); border-radius:var(--radius-lg); border:1px solid var(--border); margin-top:12px; }
.product-form-upload { border:2px dashed var(--border); border-radius:var(--radius-md); padding:32px 16px; text-align:center; cursor:pointer; transition:all 0.3s; background:var(--bg-secondary); display:flex; flex-direction:column; align-items:center; gap:8px; position:relative; overflow:hidden; min-height:120px; }
.product-form-upload:hover { border-color:var(--primary); }
.product-form-upload svg { color:var(--primary); opacity:0.5; }
.product-form-upload span { font-size:12px; color:var(--text-muted); }

/* SAVED PRODUCT CARD */
.saved-product-card { display:flex; gap:12px; padding:12px; background:var(--bg-card); border-radius:var(--radius-md); border:1px solid var(--border); margin-bottom:10px; transition:all 0.2s; }
.saved-product-card:hover { border-color:var(--primary); }
.saved-product-img { width:80px; height:80px; border-radius:var(--radius-sm); object-fit:cover; background:var(--bg-secondary); flex-shrink:0; }
.saved-product-img-placeholder { width:80px; height:80px; border-radius:var(--radius-sm); background:linear-gradient(135deg,rgba(139,92,246,0.15),rgba(139,92,246,0.05)); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.saved-product-img-placeholder svg { width:28px; height:28px; color:var(--primary); opacity:0.5; }
.saved-product-info { flex:1; display:flex; flex-direction:column; justify-content:center; min-width:0; }
.saved-product-name { font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.saved-product-brand { font-size:12px; color:var(--text-muted); margin-top:2px; }
.saved-product-price { font-size:14px; font-weight:700; color:var(--primary); margin-top:4px; }
.saved-product-actions { display:flex; gap:6px; margin-top:6px; }
.saved-product-actions button { padding:4px 10px; border-radius:var(--radius-full); font-size:10px; font-weight:600; cursor:pointer; font-family:'Inter',sans-serif; border:none; transition:all 0.2s; }
.btn-product-link { background:var(--primary); color:white; }
.btn-product-link:hover { background:var(--primary-dark); }
.btn-product-fav { background:transparent; border:1px solid var(--border) !important; color:var(--text-muted); }
.btn-product-fav.active { color:var(--danger); border-color:var(--danger) !important; }
.btn-product-delete { background:transparent; border:1px solid var(--border) !important; color:var(--text-muted); }
.btn-product-delete:hover { color:var(--danger); border-color:var(--danger) !important; }
.saved-products-empty { text-align:center; padding:40px 20px; }
.saved-products-empty svg { width:48px; height:48px; color:var(--text-muted); margin-bottom:12px; opacity:0.5; }
.saved-products-empty h4 { font-size:16px; font-weight:600; margin-bottom:6px; }
.saved-products-empty p { font-size:13px; color:var(--text-secondary); line-height:1.5; }

/* TIPO DE CORPO */
.body-type-section { padding:0 16px; }
.body-type-intro { font-size:13px; color:var(--text-secondary); margin-bottom:16px; }
.body-type-list { display:flex; flex-direction:column; gap:8px; }
.body-type-item { background:var(--bg-card); border-radius:var(--radius-md); padding:16px; display:flex; align-items:center; gap:14px; border:1px solid var(--border); cursor:pointer; transition:all 0.2s; }
.body-type-item:hover { border-color:var(--primary); background:var(--bg-card-hover); }
.body-type-icon { width:36px; height:36px; display:flex; align-items:center; justify-content:center; font-size:24px; }
.body-type-info { flex:1; }
.body-type-info h4 { font-size:14px; font-weight:600; margin-bottom:2px; }
.body-type-info p { font-size:12px; color:var(--text-muted); }
.body-type-arrow { color:var(--text-muted); }
.body-type-arrow svg { width:18px; height:18px; }

/* SALVAR NOVO LOOK BTN */
.save-look-btn { margin:20px 16px; padding:14px; border-radius:var(--radius-lg); background:var(--bg-card); color:var(--text); border:1px dashed var(--border); font-size:14px; font-weight:500; cursor:pointer; font-family:'Inter',sans-serif; display:flex; align-items:center; justify-content:center; gap:8px; transition:all 0.2s; }
.save-look-btn:hover { border-color:var(--primary); color:var(--primary); }
.closet-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; }
.closet-item { aspect-ratio:3/4; border-radius:var(--radius-sm); overflow:hidden; position:relative; cursor:pointer; }
.closet-item img { width:100%; height:100%; object-fit:cover; transition:transform 0.3s; }
.closet-item:hover img { transform:scale(1.05); }
.closet-item-badge { position:absolute; bottom:6px; left:6px; padding:3px 8px; background:rgba(0,0,0,0.6); color:white; font-size:10px; font-weight:600; border-radius:var(--radius-full); }

/* WISHLIST */
.wishlist-list { display:flex; flex-direction:column; gap:12px; }
.wishlist-item { display:flex; gap:12px; padding:12px; background:var(--bg-card); border-radius:var(--radius-md); border:1px solid var(--border); }
.wishlist-item img { width:80px; height:80px; border-radius:var(--radius-sm); object-fit:cover; }
.wishlist-item-info { flex:1; }
.wishlist-item-name { font-size:13px; font-weight:600; }
.wishlist-item-brand { font-size:12px; color:var(--text-muted); margin-top:2px; }
.wishlist-item-price { font-size:15px; font-weight:700; color:var(--primary); margin-top:4px; }
.wishlist-item-actions { display:flex; gap:8px; margin-top:8px; }
.btn-shop-now { padding:6px 14px; border-radius:var(--radius-full); background:var(--primary); color:white; border:none; font-size:11px; font-weight:600; cursor:pointer; font-family:'Inter',sans-serif; }
.btn-remove { padding:6px 14px; border-radius:var(--radius-full); background:transparent; color:var(--text-muted); border:1px solid var(--border); font-size:11px; font-weight:500; cursor:pointer; font-family:'Inter',sans-serif; }
.btn-remove:hover { border-color:var(--danger); color:var(--danger); }

/* POST LOOK */
.post-look-container { padding:16px; }
.upload-area { border:2px dashed var(--border); border-radius:var(--radius-lg); padding:48px 20px; text-align:center; cursor:pointer; transition:all 0.3s; background:var(--bg-card); }
.upload-area:hover { border-color:var(--primary); background:var(--bg-card-hover); }
.upload-area svg { width:48px; height:48px; color:var(--primary); margin-bottom:12px; }
.upload-area h3 { font-size:16px; font-weight:600; margin-bottom:4px; }
.upload-area p { font-size:13px; color:var(--text-secondary); }
.upload-options { display:flex; gap:10px; margin-top:16px; justify-content:center; }
.upload-option-btn { padding:10px 20px; border-radius:var(--radius-full); border:1px solid var(--border); background:var(--bg-card); color:var(--text); font-size:13px; font-weight:500; cursor:pointer; display:flex; align-items:center; gap:6px; font-family:'Inter',sans-serif; transition:all 0.2s; }
.upload-option-btn:hover { border-color:var(--primary); color:var(--primary); }
.upload-option-btn svg { width:16px; height:16px; }
.post-form { margin-top:24px; display:flex; flex-direction:column; gap:16px; }
.form-group label { display:block; font-size:13px; font-weight:600; margin-bottom:6px; }
.form-group input, .form-group textarea { width:100%; padding:12px 16px; border:1px solid var(--border); border-radius:var(--radius-md); font-size:14px; outline:none; font-family:'Inter',sans-serif; transition:border-color 0.2s; background:var(--bg-card); color:var(--text); }
.form-group input::placeholder, .form-group textarea::placeholder { color:var(--text-muted); }
.form-group input:focus, .form-group textarea:focus { border-color:var(--primary); }
.form-group textarea { min-height:80px; resize:vertical; }
.tag-items-section { background:var(--bg-card); border-radius:var(--radius-lg); padding:16px; border:1px solid var(--border); }
.tag-items-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.tag-items-header h4 { font-size:14px; font-weight:600; display:flex; align-items:center; gap:6px; }
.tag-items-header h4 svg { width:18px; height:18px; color:var(--accent); }
.btn-add-item { padding:6px 14px; border-radius:var(--radius-full); background:var(--gradient-1); color:white; border:none; font-size:12px; font-weight:600; cursor:pointer; display:flex; align-items:center; gap:4px; font-family:'Inter',sans-serif; }
.btn-add-item svg { width:14px; height:14px; }
.tagged-item { display:flex; gap:10px; padding:10px; background:var(--bg-secondary); border-radius:var(--radius-sm); margin-bottom:8px; align-items:center; border:1px solid var(--border); }
.tagged-item-icon { width:36px; height:36px; border-radius:var(--radius-sm); background:var(--bg-card); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.tagged-item-icon svg { width:18px; height:18px; color:var(--primary); }
.tagged-item-info { flex:1; }
.tagged-item-info strong { font-size:12px; display:block; }
.tagged-item-info small { font-size:11px; color:var(--text-muted); }
.btn-publish { width:100%; padding:16px; border-radius:var(--radius-lg); background:var(--primary); color:white; border:none; font-size:15px; font-weight:700; cursor:pointer; font-family:'Inter',sans-serif; transition:all 0.2s; }
.btn-publish:hover { background:var(--primary-light); }

/* PROFILE */
.profile-header { text-align:center; padding:20px 16px; background:var(--bg-secondary); }
.profile-cover { height:120px; margin:-20px -16px 0; background:var(--gradient-1); position:relative; }
.profile-avatar { width:80px; height:80px; border-radius:50%; object-fit:cover; border:4px solid var(--bg-secondary); margin-top:-40px; position:relative; }
.profile-name { font-size:20px; font-weight:700; margin-top:8px; }
.profile-handle { font-size:13px; color:var(--text-muted); }
.profile-bio { font-size:13px; color:var(--text-secondary); margin-top:8px; line-height:1.5; max-width:300px; margin-left:auto; margin-right:auto; }
.profile-stats { display:flex; justify-content:center; gap:32px; margin-top:16px; }
.profile-stat { text-align:center; }
.profile-stat-value { font-size:18px; font-weight:700; }
.profile-stat-label { font-size:11px; color:var(--text-muted); }
.profile-actions { display:flex; gap:10px; justify-content:center; margin-top:16px; }
.btn-edit-profile { padding:10px 28px; border-radius:var(--radius-full); border:1px solid var(--border); background:var(--bg-card); color:var(--text); font-size:13px; font-weight:600; cursor:pointer; font-family:'Inter',sans-serif; }
.btn-edit-profile:hover { border-color:var(--primary); color:var(--primary); }
.btn-share-profile { width:40px; height:40px; border-radius:50%; border:1px solid var(--border); background:var(--bg-card); color:var(--text); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.btn-share-profile:hover { border-color:var(--primary); color:var(--primary); }
.btn-share-profile svg { width:18px; height:18px; }
.profile-tabs { display:flex; border-bottom:1px solid var(--border); background:var(--bg-secondary); }
.profile-tab { flex:1; padding:14px; text-align:center; border:none; background:none; cursor:pointer; color:var(--text-muted); font-size:13px; font-weight:600; border-bottom:2px solid transparent; font-family:'Inter',sans-serif; display:flex; align-items:center; justify-content:center; gap:6px; }
.profile-tab.active { color:var(--primary); border-bottom-color:var(--primary); }
.profile-tab svg { width:18px; height:18px; }
.profile-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; padding:3px; }
.profile-grid-item { aspect-ratio:3/4; overflow:hidden; cursor:pointer; position:relative; }
.profile-grid-item img { width:100%; height:100%; object-fit:cover; transition:transform 0.3s; }
.profile-grid-item:hover img { transform:scale(1.05); }
.profile-menu { padding:16px; display:flex; flex-direction:column; gap:4px; }
.profile-menu-item { display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:var(--radius-md); cursor:pointer; transition:background 0.2s; }
.profile-menu-item:hover { background:var(--bg-card); }
.profile-menu-icon { width:40px; height:40px; border-radius:var(--radius-md); background:var(--bg-card); display:flex; align-items:center; justify-content:center; }
.profile-menu-icon svg { width:20px; height:20px; color:var(--text-secondary); }
.profile-menu-text { flex:1; }
.profile-menu-text strong { font-size:14px; display:block; }
.profile-menu-text span { font-size:12px; color:var(--text-muted); }
.profile-menu-arrow svg { width:18px; height:18px; color:var(--text-muted); }

/* AI MODAL */
.ai-modal-content { padding:24px 16px; text-align:center; }
.ai-modal-icon { width:72px; height:72px; border-radius:50%; background:var(--primary); display:flex; align-items:center; justify-content:center; margin:0 auto 16px; }
.ai-modal-icon svg { width:32px; height:32px; color:white; }
.ai-modal-content h2 { font-size:20px; font-weight:700; margin-bottom:8px; }
.ai-modal-content p { font-size:14px; color:var(--text-secondary); line-height:1.5; margin-bottom:24px; }
.ai-upload-area { border:2px dashed var(--primary); border-radius:var(--radius-lg); padding:40px; margin-bottom:16px; cursor:pointer; transition:all 0.3s; background:var(--bg-card); }
.ai-upload-area:hover { background:var(--bg-card-hover); }
.ai-upload-area svg { width:40px; height:40px; color:var(--primary); margin-bottom:8px; }
.ai-upload-area p { font-size:13px; color:var(--text-secondary); margin-bottom:0; }
.ai-results { margin-top:20px; display:none; }
.ai-results.show { display:block; }
.ai-result-item { display:flex; gap:12px; padding:12px; background:var(--bg-card); border-radius:var(--radius-md); margin-bottom:8px; text-align:left; border:1px solid var(--border); }
.ai-result-item img { width:60px; height:60px; border-radius:var(--radius-sm); object-fit:cover; }
.ai-result-info { flex:1; }
.ai-result-info strong { font-size:13px; }
.ai-result-info small { font-size:12px; color:var(--text-muted); display:block; margin-top:2px; }
.ai-result-price { font-size:14px; font-weight:700; color:var(--primary); margin-top:4px; }
.ai-match-score { padding:2px 8px; background:rgba(16,185,129,0.1); color:var(--success); font-size:10px; font-weight:600; border-radius:var(--radius-full); display:inline-block; margin-top:4px; }

/* BOTTOM NAV */
.bottom-nav { position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:430px; background:rgba(10,10,15,0.95); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-top:1px solid var(--border); display:flex; justify-content:space-around; padding:8px 0 calc(8px + var(--safe-bottom)); z-index:100; }
.nav-item { display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer; padding:4px 12px; border:none; background:none; font-family:'Inter',sans-serif; transition:all 0.2s; }
.nav-item svg { width:22px; height:22px; color:var(--text-muted); transition:color 0.2s; }
.nav-item span { font-size:10px; color:var(--text-muted); font-weight:500; transition:color 0.2s; }
.nav-item.active svg { color:var(--primary); }
.nav-item.active span { color:var(--primary); font-weight:600; }
.nav-item-post { width:50px; height:50px; border-radius:50%; background:var(--primary); display:flex; align-items:center; justify-content:center; margin-top:-14px; box-shadow:0 4px 15px rgba(139,92,246,0.4); }
.nav-item-post svg { color:white !important; width:24px; height:24px; }

/* TOAST */
.toast { position:fixed; bottom:100px; left:50%; transform:translateX(-50%) translateY(100px); padding:12px 24px; background:var(--bg-card); color:white; border-radius:var(--radius-full); font-size:13px; font-weight:500; z-index:300; opacity:0; transition:all 0.3s ease; white-space:nowrap; box-shadow:var(--shadow-lg); border:1px solid var(--primary); }
.toast.show { transform:translateX(-50%) translateY(0); opacity:1; }

@keyframes fadeIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
@media (min-width:431px) { .app-container { border-left:1px solid var(--border); border-right:1px solid var(--border); box-shadow:0 0 60px rgba(0,0,0,0.05); } }