:root { --black:#050505; --surface:#101010; --surface-2:#171717; --line:#272727; --text:#f6f6f4; --muted:#939393; --silver:#d7d7d7; --accent:#f2f1eb; --shadow:0 12px 40px rgba(0,0,0,.28); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--text); background:var(--black); }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; min-height:100vh; background:radial-gradient(circle at 50% -10%,#252525 0,transparent 31rem),var(--black); }
button,input,select { font:inherit; }
button { cursor:pointer; }
.app-shell { width:min(100%,1180px); min-height:100vh; margin:auto; padding:0 20px 105px; }
.topbar { height:84px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.055); }
.brand { color:var(--text); font-family:Georgia,serif; font-size:1.48rem; font-weight:700; letter-spacing:-.07em; text-decoration:none; }.brand span{color:#cfcfcf;margin-left:3px;font-size:.82em}
.topbar-actions { display:flex; gap:10px; }.icon-button { width:42px;height:42px;border:1px solid var(--line);border-radius:50%;background:#121212;color:var(--text);font-size:1.22rem;display:grid;place-items:center;transition:.2s ease; }.icon-button:hover{background:#262626;border-color:#555}
.page-content { padding:35px 0 28px; }.page-head { display:flex;justify-content:space-between;gap:20px;align-items:end;margin-bottom:27px; }.eyebrow { margin:0 0 8px;color:var(--muted);font-size:.68rem;letter-spacing:.12em;font-weight:700; }.page-title { margin:0;font-family:Georgia,serif;font-weight:500;font-size:clamp(2rem,5vw,3.65rem);letter-spacing:-.055em; }.subtitle { margin:10px 0 0;color:var(--muted);font-size:.95rem; }
.hero { margin-bottom:30px; }.hero-date { color:#858585;font-size:.77rem;margin-bottom:10px; }.hero h1 { margin:0;font-family:Georgia,serif;font-size:clamp(2rem,5vw,3.2rem);font-weight:500;letter-spacing:-.055em; }.hero p { color:var(--muted);margin:8px 0 0; }
.stats-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:25px 0; }.stat-card { background:linear-gradient(145deg,#161616,#0b0b0b);border:1px solid #202020;border-radius:18px;padding:19px;min-height:112px;display:flex;flex-direction:column;justify-content:end; }.stat-card .stat-icon{font-size:.8rem;color:#aaa;margin-bottom:auto}.stat-card strong{font-size:1.6rem;letter-spacing:-.06em}.stat-card span{margin-top:2px;color:#888;font-size:.75rem}
.quick-actions { display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:38px; }.action-card { border:1px solid #2a2a2a;border-radius:18px;background:#121212;color:#f5f5f5;padding:19px;display:flex;align-items:center;gap:14px;text-align:left;transition:.2s ease; }.action-card:first-child{background:#f2f1eb;color:#111;border-color:#f2f1eb}.action-card:hover{transform:translateY(-2px)}.action-mark{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.09);font-size:1.2rem}.action-card:first-child .action-mark{background:#deddd6}.action-card b{display:block}.action-card small{color:inherit;opacity:.63}
.section-heading{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 15px}.section-heading h2{font-size:1.05rem;margin:0}.text-link{border:0;background:transparent;color:#888;padding:0;font-size:.8rem}.text-link:hover{color:white}
.garment-row { display:grid;grid-auto-flow:column;grid-auto-columns:minmax(125px,1fr);gap:12px;overflow:auto;padding-bottom:8px;scrollbar-width:none; }.garment-row::-webkit-scrollbar{display:none}.garment-card { position:relative;background:var(--surface);border:1px solid #232323;border-radius:16px;overflow:hidden;min-width:0;box-shadow:var(--shadow); }.garment-image{width:100%;aspect-ratio:4/4.3;object-fit:cover;display:block;background:#252525}.garment-details{padding:11px}.garment-name{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.81rem;font-weight:650}.garment-brand{display:block;color:#888;margin-top:4px;font-size:.7rem}.favorite{position:absolute;right:9px;top:9px;width:29px;height:29px;border:0;border-radius:50%;background:rgba(5,5,5,.62);color:white}.favorite.is-favorite{color:#f0e0a0}.garment-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:14px}
.filter-bar{display:flex;gap:9px;overflow:auto;padding:0 0 17px;scrollbar-width:none}.filter-bar::-webkit-scrollbar{display:none}.chip{white-space:nowrap;border:1px solid #2d2d2d;background:#111;color:#c8c8c8;border-radius:100px;padding:8px 12px;font-size:.78rem}.chip.active,.chip:hover{background:#efeee8;color:#111;border-color:#efeee8}.search{width:100%;border:1px solid #292929;border-radius:14px;background:#111;color:#fff;padding:14px 16px;outline:none;margin-bottom:16px}.search:focus{border-color:#848484}.search::placeholder{color:#777}
.look-tools{display:grid;grid-template-columns:1.45fr .7fr auto;gap:12px;margin-bottom:18px}.select-control{border:1px solid #292929;border-radius:14px;background:#111;color:#e4e4e4;padding:0 12px}.primary-button{background:#f2f1eb;border:0;color:#101010;border-radius:14px;padding:14px 18px;font-weight:750;transition:.2s ease}.primary-button:hover{background:white;transform:translateY(-1px)}.look-result{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}.look-card{background:#151515;border:1px solid #262626;border-radius:20px;padding:17px}.look-collage{display:grid;grid-template-columns:1fr 1fr;gap:7px}.look-collage img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:11px}.look-card h3{margin:15px 0 5px;font-size:1rem}.look-card p{margin:0;color:#929292;font-size:.78rem}.look-actions{display:flex;gap:8px;margin-top:15px}.mini-button{border:1px solid #353535;background:transparent;color:#e9e9e9;border-radius:9px;padding:8px 10px;font-size:.75rem}
.style-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:14px}.style-card{min-height:190px;display:flex;flex-direction:column;justify-content:end;padding:16px;border:1px solid #292929;border-radius:18px;background:linear-gradient(160deg,#383838,#101010);overflow:hidden;text-align:left;color:white}.style-card:nth-child(3n){background:linear-gradient(160deg,#766655,#151515)}.style-card:nth-child(3n+2){background:linear-gradient(160deg,#4c5660,#101010)}.style-card span{font-size:.72rem;color:#d0d0d0}.style-card strong{font-family:Georgia,serif;font-size:1.55rem;font-weight:500;margin-top:4px}.style-card small{color:#d2d2d2;margin-top:4px}.profile-card{padding:24px;border:1px solid #282828;border-radius:22px;background:#111;display:flex;align-items:center;gap:16px}.avatar{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#dedbd3,#656565);color:#121212;font-family:Georgia,serif;font-size:1.6rem}.profile-card h2{margin:0;font-size:1.2rem}.profile-card p{margin:5px 0 0;color:#888;font-size:.8rem}.profile-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}.profile-stats div{border:1px solid #272727;border-radius:14px;padding:15px;background:#101010}.profile-stats strong{font-size:1.35rem;display:block}.profile-stats span{font-size:.74rem;color:#888}.empty-state{text-align:center;border:1px dashed #343434;border-radius:20px;padding:55px 20px;color:#888}.empty-state span{font-size:1.8rem;color:white}.empty-state h2{color:#eee;font-size:1.2rem}.empty-state p{font-size:.85rem}
.bottom-nav{position:fixed;z-index:5;bottom:16px;left:50%;transform:translateX(-50%);width:min(calc(100% - 32px),530px);display:grid;grid-template-columns:repeat(5,1fr);padding:8px;border:1px solid #2c2c2c;border-radius:22px;background:rgba(18,18,18,.91);box-shadow:0 12px 36px rgba(0,0,0,.5);backdrop-filter:blur(16px)}.nav-item{border:0;background:transparent;color:#888;padding:7px 2px;font-size:.63rem;display:grid;justify-items:center;gap:4px}.nav-item span{font-size:1rem}.nav-item.active{color:white}.nav-item.active span{color:#f3f1eb}
.add-dialog{width:min(650px,calc(100% - 24px));max-height:90vh;overflow:auto;background:#111;border:1px solid #303030;border-radius:24px;color:#f4f4f2;padding:0;box-shadow:0 30px 100px rgba(0,0,0,.75)}.add-dialog::backdrop{background:rgba(0,0,0,.74);backdrop-filter:blur(3px)}.add-dialog form{padding:24px}.dialog-head{display:flex;align-items:start;justify-content:space-between;margin-bottom:20px}.dialog-head h2{margin:0;font-family:Georgia,serif;font-weight:500;font-size:1.8rem}.upload-zone{border:1px dashed #505050;border-radius:16px;display:flex;flex-direction:column;align-items:center;text-align:center;padding:19px;gap:7px;color:#e7e7e5}.upload-zone small,.form-help{color:#898989;font-size:.76rem}.photo-preview{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#252525;font-size:1.45rem;overflow:hidden}.photo-preview img{width:100%;height:100%;object-fit:cover}.upload-zone:hover{border-color:#aaa}.add-dialog input[type=file]{position:absolute;width:1px;height:1px;opacity:0}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:17px 0}.add-dialog label:not(.upload-zone){display:grid;gap:7px;color:#bdbdbd;font-size:.76rem}.add-dialog input:not([type=file]),.add-dialog select{width:100%;border:1px solid #303030;border-radius:10px;background:#191919;color:white;padding:11px;outline:none}.add-dialog input:focus,.add-dialog select:focus{border-color:#858585}.form-help{margin:15px 0}.add-dialog .primary-button{width:100%}
@media (min-width:760px){.app-shell{padding-left:38px;padding-right:38px}.bottom-nav{top:105px;bottom:auto;left:max(40px,calc(50% - 590px));transform:none;width:160px;display:flex;flex-direction:column;padding:12px}.nav-item{grid-template-columns:22px 1fr;justify-items:start;padding:10px;align-items:center;font-size:.78rem}.page-content{margin-left:187px;max-width:920px;padding-top:54px}.topbar{padding-left:187px}.stats-grid{gap:15px}.garment-row{grid-auto-columns:minmax(145px,1fr)}.look-result{grid-template-columns:repeat(3,1fr)} }
@media (max-width:560px){.app-shell{padding:0 16px 100px}.topbar{height:68px}.page-content{padding-top:27px}.stats-grid{grid-template-columns:1fr 1fr}.stat-card{min-height:94px;padding:15px}.quick-actions{grid-template-columns:1fr}.look-tools{grid-template-columns:1fr 1fr}.look-tools .primary-button{grid-column:1/-1}.look-result{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.profile-stats{grid-template-columns:1fr 1fr}.page-head{align-items:start;flex-direction:column}.page-title{font-size:2.25rem}}