/* ==========================================
   GLOBAL
========================================== */

body{

    margin:0;

    font-family:'Montserrat',sans-serif;

    background:
    linear-gradient(
        180deg,
        #efefef 0%,
        #f7f7f7 100%
    );

    color:#1a1a1a;
}


.ai-loading .upload-card{
opacity:0.5;
pointer-events:none;
filter:grayscale(1);
}
.ai-loader{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:18px;

    padding:45px 20px;
}

.loader{

    width:52px;

    height:52px;

    border-radius:50%;

    border:4px solid #ececec;

    border-top:4px solid #111;

    animation:spin 1s linear infinite;
}

@keyframes spin{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}


.loader-text{

    font-size:15px;

    font-weight:600;

    color:#111;
}

.loader-text-desc{

    font-size:13px;

    color:#888;
}

/* ==========================================
   APP
========================================== */

.app{

    width:100%;

    max-width:1400px;

    margin:40px auto;

    background:#fff;

    border-radius:24px;

    overflow:hidden;

    box-shadow:
        0 20px 60px rgba(0,0,0,.08),
        0 5px 15px rgba(0,0,0,.04);

    transition:.35s;
}
.app:hover{

    box-shadow:
        0 25px 70px rgba(0,0,0,.10);
}

/* Нижняя навигация остаётся доступной при прокрутке страницы. */
.bottom-nav{

    position:sticky;

    bottom:0;

    width:100%;

    display:flex;

    justify-content:center;

    gap:80px;

    padding:22px 40px;

    background:rgba(255,255,255,.96);

    backdrop-filter:blur(18px);

    border-top:1px solid #ececec;

    z-index:999;
}

.bottom-nav a{

    display:flex;

    align-items:center;

    gap:12px;

    color:#666;

    font-size:15px;

    font-weight:600;

    text-decoration:none;

    transition:.3s;
}

.bottom-nav a i{ font-size:20px; }

.bottom-nav a:hover,
.bottom-nav a.active{ color:#111; }

body{ padding-bottom:0; }

/* AI-гардероб: подбор только по товарам магазинов платформы. */
.ai-wardrobe{padding-top:20px;background:radial-gradient(circle at 90% 4%,rgba(224,178,89,.15),transparent 25%),linear-gradient(180deg,#fff 0%,#fafafa 100%)}
.ai-wardrobe__intro{position:relative;overflow:hidden;padding:34px 38px;border:1px solid #30323a;border-radius:26px;background:radial-gradient(circle at 80% 25%,rgba(234,190,95,.27),transparent 17%),radial-gradient(circle at 96% 84%,rgba(77,107,212,.26),transparent 26%),linear-gradient(122deg,#111216,#202127 55%,#292830);color:#fff;box-shadow:0 22px 44px rgba(20,21,28,.18)}
.ai-wardrobe__intro:after{content:"✦";position:absolute;right:42px;top:33px;color:#f4c662;font-size:75px;line-height:1;opacity:.9;text-shadow:0 0 38px rgba(244,198,98,.5)}
.ai-wardrobe__eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:16px}.ai-wardrobe__eyebrow span,.ai-results__heading span{font-size:10px;letter-spacing:1.7px;font-weight:700;color:#f0c86f}.ai-wardrobe__eyebrow b{padding:6px 9px;border:1px solid rgba(155,235,183,.28);border-radius:100px;background:rgba(83,167,105,.14);color:#c8efd0;font-size:10px;font-weight:600}.ai-wardrobe__eyebrow b i{margin-right:5px;color:#77d88e;font-size:7px}
.ai-wardrobe__intro h2{position:relative;z-index:1;margin:0 0 12px;font-size:32px;line-height:1.12;letter-spacing:-.9px}.ai-wardrobe__intro p{position:relative;z-index:1;margin:0;max-width:660px;color:#d8d8db;line-height:1.55;font-size:14px}.ai-wardrobe__hints{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:9px;margin-top:23px}.ai-wardrobe__hints span{padding:8px 11px;border:1px solid rgba(255,255,255,.13);border-radius:10px;background:rgba(255,255,255,.07);color:#efeff1;font-size:11px}.ai-wardrobe__hints i{margin-right:5px;color:#eac36d}
.ai-mode-switch{display:inline-flex;gap:4px;margin-top:20px;padding:5px;border:1px solid #e5e1d9;border-radius:15px;background:#f4f1eb}.ai-mode-switch button{border:0;border-radius:10px;padding:10px 15px;background:transparent;color:#75716b;font:700 12px 'Montserrat',sans-serif;cursor:pointer;transition:.2s}.ai-mode-switch button i{margin-right:6px}.ai-mode-switch button:hover{color:#29282a}.ai-mode-switch button.is-active{background:#1b1c20;color:#f6cc72;box-shadow:0 4px 12px rgba(20,20,22,.16)}
.ai-tools{margin-top:13px}.ai-tool-card{position:relative;overflow:hidden;border:1px solid #e7e6e4;border-radius:23px;padding:29px;background:linear-gradient(145deg,#fff,#fbfaf8);box-shadow:0 12px 28px rgba(22,24,32,.055);transition:transform .25s,box-shadow .25s}.ai-tool-card:hover{transform:translateY(-3px);box-shadow:0 20px 38px rgba(22,24,32,.1)}.ai-tool-card:before{content:"";position:absolute;width:170px;height:170px;right:-75px;bottom:-86px;border-radius:50%;background:#f7ecd2;opacity:.75}.ai-tool-card__title{position:relative;display:flex;gap:14px;align-items:flex-start}.ai-tool-card__title>i{display:grid;flex:0 0 auto;place-items:center;width:45px;height:45px;border-radius:15px;background:linear-gradient(145deg,#f4d484,#c99035);color:#3b2a10;box-shadow:0 8px 17px rgba(186,128,34,.22)}.ai-tool-card__title>div>span{display:block;margin-bottom:4px;color:#9b783b;font-size:9px;font-weight:700;letter-spacing:1.2px}.ai-tool-card h3{margin:0 0 5px;font-size:19px;letter-spacing:-.3px}.ai-tool-card p{margin:0;color:#7b7b7e;font-size:12px;line-height:1.45}
.color-picker{position:relative;display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}.color-chip{display:inline-flex;align-items:center;gap:7px;border:1px solid #e5e3df;border-radius:100px;background:#fff;padding:8px 11px;color:#444;cursor:pointer;font:600 11px 'Montserrat',sans-serif;transition:.18s}.color-chip:hover{border-color:#be8a38;transform:translateY(-1px)}.color-chip span{width:14px;height:14px;border-radius:50%;border:1px solid rgba(0,0,0,.13);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}.color-chip.is-selected{border-color:#171717;background:#171717;color:#fff;box-shadow:0 6px 14px rgba(0,0,0,.16)}.color-chip.is-selected span{box-shadow:0 0 0 2px #fff}
.ai-prompt-label{position:relative;display:block;margin:21px 0 8px;font-size:12px;font-weight:700;color:#4b4b4e}.ai-tool-card textarea{position:relative;box-sizing:border-box;width:100%;height:92px;resize:vertical;border:1px solid #dedbd4;border-radius:14px;padding:13px;background:#fffdf9;font:13px 'Montserrat',sans-serif;line-height:1.5;transition:.2s}.ai-tool-card textarea:focus{outline:0;border-color:#bc862e;box-shadow:0 0 0 4px rgba(212,161,69,.13)}.ai-tool-button{position:relative;height:49px;margin-top:14px;border-radius:14px;background:linear-gradient(112deg,#18191d,#353035);font-size:13px}.ai-tool-button:hover{background:linear-gradient(112deg,#2a2b31,#4c3e32);transform:translateY(-2px)}
.ai-results{margin-top:32px;padding-top:27px;border-top:1px solid #e9e7e4}.ai-results__heading{display:flex;justify-content:space-between;gap:20px;align-items:end;margin-bottom:17px}.ai-results__heading h2{margin:7px 0 0;font-size:24px;letter-spacing:-.6px}.ai-results__heading p{margin:0;max-width:400px;color:#89898c;font-size:12px;line-height:1.5;text-align:right}.ai-results__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}.ai-product-card{position:relative;overflow:hidden;border:1px solid #e8e7e4;border-radius:18px;background:#fff;color:#171717;text-decoration:none;box-shadow:0 5px 16px rgba(21,22,25,.035);transition:.25s}.ai-product-card:hover{transform:translateY(-5px);border-color:#d4b476;box-shadow:0 16px 32px rgba(24,25,29,.12)}.ai-product-card>img,.ai-product-card__empty{display:block;width:100%;height:225px;object-fit:cover;background:#f4f2ef}.ai-product-card__empty{display:grid;place-items:center;color:#aaa;font-size:30px}.ai-product-card__body{padding:14px 14px 16px}.ai-product-card__body small{display:block;color:#979390;text-transform:uppercase;letter-spacing:.7px;font-size:9px;font-weight:700}.ai-product-card h3{margin:7px 0 12px;font-size:14px;line-height:1.38}.ai-product-card strong{display:block;font-size:16px;letter-spacing:-.2px}.ai-product-card del{margin-left:5px;color:#aaa;font-size:10px;font-weight:500}.ai-product-color{display:flex;align-items:center;gap:5px;margin:-4px 0 10px;color:#7c7772;font-size:10px}.ai-product-color i{width:10px;height:10px;border-radius:50%;border:1px solid rgba(0,0,0,.15)}.ai-empty{grid-column:1/-1;display:flex;min-height:170px;flex-direction:column;gap:10px;align-items:center;justify-content:center;border:1px dashed #d9d4ca;border-radius:18px;background:#fffdfa;color:#777}.ai-empty i{font-size:28px;color:#be8a38}.ai-empty strong{color:#333}
.ai-look-card{grid-column:1/-1;overflow:hidden;border:1px solid #e3d7bd;border-radius:22px;background:linear-gradient(145deg,#fff,#fffaf0);box-shadow:0 15px 30px rgba(75,57,27,.08)}.ai-look-card__head{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid #eee2ca}.ai-look-card__head span{color:#a6762c;font-size:10px;font-weight:700;letter-spacing:1px}.ai-look-card__head h3{margin:6px 0 0;font-size:20px}.ai-look-card__head>b{display:grid;place-items:center;min-width:44px;height:44px;border-radius:50%;background:#1b1c20;color:#f4cc74;font-size:13px}.ai-look-pieces{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;padding:18px}.ai-look-piece{overflow:hidden;border:1px solid #ede6d7;border-radius:15px;background:#fff;color:#1e1e20;text-decoration:none;transition:.2s}.ai-look-piece:hover{transform:translateY(-3px);box-shadow:0 10px 20px rgba(38,30,20,.1)}.ai-look-piece>span{display:block;padding:9px 10px 0;color:#a77a31;font-size:9px;font-weight:700;letter-spacing:.8px;text-transform:uppercase}.ai-look-piece img,.ai-look-piece__empty{display:block;width:100%;height:170px;object-fit:cover;margin-top:7px;background:#f4f1ea}.ai-look-piece__empty{display:grid;place-items:center;color:#b6aa94;font-size:22px}.ai-look-piece strong,.ai-look-piece small,.ai-look-piece b{display:block;margin:9px 10px 0}.ai-look-piece strong{font-size:12px;line-height:1.35}.ai-look-piece small{margin-top:4px;color:#888;font-size:10px}.ai-look-piece b{margin-bottom:11px;font-size:13px}
@media(max-width:800px){.ai-wardrobe__intro{padding:25px 22px}.ai-wardrobe__intro:after{right:19px;top:27px;font-size:53px}.ai-wardrobe__intro h2{font-size:25px}.ai-wardrobe__intro p{padding-right:20px}.ai-mode-switch{display:flex;width:100%;box-sizing:border-box}.ai-mode-switch button{flex:1;padding:10px 7px;font-size:11px}.ai-tool-card{padding:21px}.ai-results__heading{display:block}.ai-results__heading p{text-align:left;margin-top:8px}.ai-results__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.ai-product-card>img,.ai-product-card__empty{height:185px}.ai-look-pieces{grid-template-columns:repeat(2,minmax(0,1fr));padding:12px;gap:10px}.ai-look-piece img,.ai-look-piece__empty{height:145px}.ai-look-card__head{padding:17px}.ai-look-card__head h3{font-size:17px}}

.header {
    display: flex;
    align-items: center;
    padding: 15px;
    font-weight: 600;
    border-bottom: 1px solid #eee;
}

.header i {
    margin-right: 15px;
    cursor: pointer;
}

/* ==========================================
   CONTENT
========================================== */

.content{

    padding:40px 60px 80px;
}
.upload-section{

    margin-top:35px;

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:25px;
}

.upload-card{

    background:#fff;

    border-radius:24px;

    border:1px solid #ececec;

    padding:25px;

    transition:.35s;

    box-shadow:
        0 10px 25px rgba(0,0,0,.04);
}
.upload-card:hover{

    transform:translateY(-6px);

    box-shadow:
        0 20px 45px rgba(0,0,0,.10);
}
.upload-card input{

    display:none;
}


.upload-label{

    display:flex;

    justify-content:center;

    align-items:center;

    width:100%;

    height:54px;

    border-radius:14px;

    background:#111;

    color:#fff;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:.3s;
}
.upload-label:hover{

    background:#222;
}
.upload-preview img {
    width: 100%;
    border-radius: 10px;
    margin-top: 10px;
}

.generate-btn{

    margin-top:35px;

    width:100%;

    height:64px;

    border:none;

    border-radius:18px;

    background:#111;

    color:#fff;

    font-size:18px;

    font-weight:700;

    cursor:pointer;

    transition:.35s;
}

.generate-btn:hover{

    background:#222;

    transform:translateY(-3px);

    box-shadow:
        0 18px 40px rgba(0,0,0,.18);
}

.look-result{

    margin-top:45px;

    display:flex;

    justify-content:center;
}



.look-result img {
    width: 200px;
    border-radius: 12px;
}

.look-card{

    width:100%;

    max-width:720px;

    background:#fff;

    border:1px solid #ececec;

    border-radius:24px;

    overflow:hidden;

    box-shadow:
        0 18px 45px rgba(0,0,0,.08);

    animation:fadeUp .5s ease;
}
.look-header{

    display:flex;

    align-items:center;

    gap:14px;

    padding:25px 30px;

    border-bottom:1px solid #ececec;

    font-size:20px;

    font-weight:700;
}

.look-header i{

    font-size:24px;

    color:#ffb347;
}

.score{

    margin-left:auto;

    background:#111;

    color:#fff;

    padding:8px 16px;

    border-radius:100px;

    font-size:14px;

    font-weight:700;
}

.look-items{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:20px;

    padding:30px;
}

.look-items img{

    width:100%;

    aspect-ratio:3/4;

    object-fit:cover;

    border-radius:18px;

    border:1px solid #ececec;

    transition:.35s;
}

.look-items img:hover{

    transform:scale(1.03);

    box-shadow:
        0 18px 40px rgba(0,0,0,.12);
}

.look-tags{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    padding:0 30px 30px;
}

.look-tags span{

    padding:10px 18px;

    border-radius:100px;

    background:#fafafa;

    border:1px solid #ececec;

    font-size:14px;

    font-weight:600;

    transition:.3s;
}
.look-tags span:hover{

    background:#111;

    color:#fff;

    border-color:#111;
}
/**/
.weather-section{

    padding:40px 60px 20px;
}

.weather-glass{

    background:#fff;

    border-radius:24px;

    padding:30px;

    border:1px solid #ececec;

    box-shadow:
        0 10px 30px rgba(0,0,0,.05);
}

/* Верхняя часть */

.weather-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:40px;
}
.weather-icon{

    width:90px;

    height:90px;

    border-radius:50%;

    background:#fafafa;

    border:1px solid #ececec;

    display:flex;

    justify-content:center;

    align-items:center;
}

.weather-icon i{

    font-size:42px;

    color:#ffb347;
}
.weather-info{

    flex:1;
}

.weather-time{

    font-size:14px;

    color:#888;

    margin-bottom:8px;
}

.weather-main{

    font-size:34px;

    font-weight:700;

    color:#111;
}


.weather-city {
    font-size: 14px;
    opacity: 0.6;
}

/* Полоса солнца */

.weather-city{

    margin-top:8px;

    font-size:15px;

    color:#777;
}

.weather-controls{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:8px;

    margin-top:12px;
}

.weather-controls label{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:8px 10px;

    border:1px solid #e6e6e6;

    border-radius:10px;

    background:#fafafa;

    color:#555;
}

.weather-controls select{

    border:0;

    outline:0;

    background:transparent;

    color:#333;

    font:inherit;

    font-size:13px;

    cursor:pointer;
}

.weather-status{

    color:#888;

    font-size:12px;
}

.weather-rain{

    min-width:180px;

    height:80px;

    border-radius:18px;

    background:#fafafa;

    border:1px solid #ececec;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    font-size:16px;

    font-weight:600;
}

.weather-rain i{

    font-size:34px;

    color:#4f8cff;
}
.weather-sun{

    margin-top:25px;

    height:64px;

    border-radius:18px;

    background:#fafafa;

    border:1px solid #ececec;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 25px;

    font-size:15px;

    color:#555;
}

.weather-range{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:12px;

    margin-top:14px;
}

.page-topbar{display:flex;align-items:center;justify-content:space-between;padding:25px 60px 0}.page-back{display:inline-flex;align-items:center;gap:8px;color:#333;font-size:14px;font-weight:600;text-decoration:none}.page-actions{display:flex;gap:10px}.page-actions a{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid #e4e4e4;border-radius:50%;color:#555;text-decoration:none}.page-actions a:hover,.page-actions a.active{background:#111;border-color:#111;color:#fff}

.weather-range div{

    padding:14px;

    border:1px solid #ececec;

    border-radius:14px;

    background:#fafafa;

    text-align:center;
}

.weather-range span{

    display:block;

    color:#888;

    font-size:12px;
}

.weather-range strong{

    display:block;

    margin-top:5px;

    color:#111;

    font-size:22px;
}

.weather-range__current{

    border-color:#111!important;

    background:#111!important;
}

.weather-range__current span,
.weather-range__current strong{

    color:#fff;
}

.recommend-glass{

    margin-top:25px;

    background:#fff;

    border:1px solid #ececec;

    border-radius:24px;

    padding:28px;

    box-shadow:
        0 10px 25px rgba(0,0,0,.04);
}

.recommend-header{

    display:flex;

    align-items:center;

    gap:12px;

    font-size:18px;

    font-weight:700;

    color:#111;
}

.recommend-header i{

    color:#ffb347;

    font-size:22px;
}

.recommend-text{

    margin-top:18px;

    font-size:16px;

    line-height:1.8;

    color:#666;
}

.recommend-tips{

    margin-top:20px;

    display:flex;

    flex-wrap:wrap;

    gap:15px;
}


.tip{

    padding:14px 18px;

    border-radius:14px;

    background:#fafafa;

    border:1px solid #ececec;

    display:flex;

    align-items:center;

    gap:10px;

    font-size:14px;

    transition:.3s;
}

.tip:hover{

    transform:translateY(-3px);

    box-shadow:0 12px 25px rgba(0,0,0,.08);
}

.tip i{

    color:#111;
}

/**/
/*.ai-loading .ai-modes{
display: none;
}*/

.ai-success{

    display:none;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:15px;

    padding:45px;
}

.ai-success i{

    font-size:56px;

    color:#111;
}

.ai-success span{

    font-size:18px;

    font-weight:700;
}

@keyframes successPop{

0%{
opacity:0;
transform:scale(0.7);
}

60%{
transform:scale(1.1);
}

100%{
opacity:1;
transform:scale(1);
}

}

/* плавное исчезновение */

.fade-out{
animation:fadeOut 0.6s forwards;
}

@keyframes fadeOut{
to{
opacity:0;
transform:scale(0.9);
}
}

.ai-loading #aiModes{
display:none;
}

.ai-select{

    margin-top:40px;

    background:#fff;

    border:1px solid #ececec;

    border-radius:24px;

    padding:30px;

    box-shadow:
        0 10px 30px rgba(0,0,0,.05);
}

.ai-title{

    font-size:24px;

    font-weight:700;

    color:#111;

    margin-bottom:25px;
}

.ai-modes{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;
}

.ai-mode{

    display:flex;

    align-items:center;

    gap:14px;

    background:#fff;

    border:1px solid #ececec;

    border-radius:18px;

    padding:18px;

    cursor:pointer;

    transition:.35s;

    font-size:15px;

    font-weight:600;
}

.ai-mode i{

    width:48px;

    height:48px;

    border-radius:50%;

    background:#fafafa;

    border:1px solid #ececec;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:20px;

    transition:.35s;
}
.ai-mode:hover{

    transform:translateY(-5px);

    box-shadow:
        0 18px 40px rgba(0,0,0,.08);
}

.ai-mode:hover i{

    background:#111;

    color:#fff;
}
.ai-mode.active{

    border:2px solid #111;
}

.ai-mode.active i{

    background:#111;

    color:#fff;
}

.ai-mode.locked{

    opacity:.55;
}


.ai-mode.locked::after{

    content:"Soon";

    margin-left:auto;

    padding:5px 10px;

    border-radius:100px;

    background:#111;

    color:#fff;

    font-size:11px;

    font-weight:600;
}


.upload-preview{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:15px;

    margin-top:20px;
}

.preview-item{

    position:relative;

    border-radius:18px;

    overflow:hidden;

    background:#fafafa;

    border:1px solid #ececec;

    transition:.35s;
}

.preview-item:hover{

    transform:translateY(-4px);

    box-shadow:
        0 15px 35px rgba(0,0,0,.10);
}

.processing-overlay{

    position:absolute;

    inset:0;

    background:rgba(255,255,255,.88);

    backdrop-filter:blur(5px);

    display:flex;

    justify-content:center;

    align-items:center;
}

.preview-item img{

    width:100%;

    aspect-ratio:1/1;

    object-fit:cover;

    display:block;
}

.preview-item span {
    position: absolute;
    top: 5px;
    right: 6px;
    background: #fff;
    border-radius: 50%;
    padding: 2px 7px;
    font-size: 14px;
    cursor: pointer;
    font-weight: 600;
}
.preview-item .remove-btn{

    position:absolute;

    top:10px;

    right:10px;

    width:28px;

    height:28px;

    border-radius:50%;

    background:rgba(17,17,17,.92);

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:18px;

    cursor:pointer;

    transition:.3s;
}
.preview-item .remove-btn:hover{

    transform:scale(1.15);

    background:#000;
}
.dots{

    display:flex;

    gap:10px;
}

.dots span{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#111;

    animation:dotJump .9s infinite ease-in-out;
}

.dots span:nth-child(2){

    animation-delay:.15s;
}

.dots span:nth-child(3){

    animation-delay:.3s;
}

@keyframes dotJump{

    0%,80%,100%{

        transform:translateY(0);

        opacity:.4;

    }

    40%{

        transform:translateY(-8px);

        opacity:1;

    }

}

/* ==========================================
   ANIMATIONS
========================================== */

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

.weather-section,
.ai-select,
.upload-section,
.look-result{

    animation:fadeUp .7s ease;
}

/* ==========================================
   SCROLLBAR
========================================== */

::-webkit-scrollbar{

    width:10px;

    height:10px;
}

::-webkit-scrollbar-track{

    background:#f3f3f3;
}

::-webkit-scrollbar-thumb{

    background:#cfcfcf;

    border-radius:100px;
}

::-webkit-scrollbar-thumb:hover{

    background:#999;
}

/* ==========================================
   GLOBAL
========================================== */

button,
label,
input,
img,
a,
.upload-card,
.look-card,
.ai-mode,
.preview-item{

    transition:.3s ease;
}

img{

    display:block;

    user-select:none;

    -webkit-user-drag:none;
}

::selection{

    background:#111;

    color:#fff;
}

a{

    color:inherit;
}

/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width:1200px){

    .content,
    .weather-section{

        padding:35px;
    }

    .upload-section{

        grid-template-columns:repeat(2,1fr);
    }

    .look-items{

        grid-template-columns:repeat(2,1fr);
    }

}

@media (max-width:768px){

    body{padding-bottom:76px;}

    .page-topbar{padding:20px 25px 0;}

    .app{

        margin:0;

        border-radius:0;
    }

    .weather-top{

        flex-direction:column;

        align-items:flex-start;
    }

    .weather-rain{

        width:100%;
    }

    .weather-sun{

        flex-direction:column;

        height:auto;

        gap:12px;

        padding:20px;
    }

    .upload-section{

        grid-template-columns:1fr;
    }

    .ai-modes{

        grid-template-columns:1fr;
    }

    .look-items{

        grid-template-columns:1fr;
    }

    .bottom-nav{

        gap:30px;

        padding:18px;
    }

}
/* ==========================================
   LOOK ITEM
========================================== */

.look-item{

    display:flex;

    flex-direction:column;
}

.look-name{

    margin-top:14px;

    text-align:center;

    font-size:15px;

    font-weight:600;

    color:#333;
}

/* ==========================================
   LOOK FOOTER
========================================== */

.look-footer{

    display:flex;

    gap:18px;

    padding:30px;

    border-top:1px solid #ececec;
}

.look-footer button{

    flex:1;

    height:56px;

    border:none;

    border-radius:16px;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:.35s;
}

.save-look{

    background:#f5f5f5;

    color:#111;
}

.save-look:hover{

    background:#111;

    color:#fff;
}

.generate-again{

    background:#111;

    color:#fff;
}

.generate-again:hover{

    background:#222;

    transform:translateY(-2px);
}

.look-tags span{

    display:flex;

    align-items:center;

    gap:8px;
}

.look-tags span i{

    font-size:13px;
}