/* ==========================================================
   Bonus Navigator
   style.css
   Part 1 / 3
========================================================== */

/* ---------- Сброс ---------- */

*,
*::before,
*::after{
    box-sizing:border-box;
    margin:0;
    padding:0;
}

html{
    font-size:16px;
    scroll-behavior:smooth;
    -webkit-tap-highlight-color:transparent;
}

body{
    font-family:Inter, "Segoe UI", Roboto, Arial, sans-serif;
    background:
        radial-gradient(circle at top left, rgba(45,125,255,.22), transparent 28%),
        linear-gradient(135deg, #05070d 0%, #0f1724 45%, #05070d 100%);
    color:#f4f7fb;
    min-height:100vh;
    overflow-x:hidden;
    user-select:none;
    position:relative;
}

body::before,
body::after{
    content:"";
    position:fixed;
    inset:auto;
    width:28rem;
    height:28rem;
    border-radius:50%;
    filter:blur(90px);
    opacity:.22;
    pointer-events:none;
    z-index:-1;
}

body::before{
    top:-8rem;
    left:-10rem;
    background:#2d7dff;
}

body::after{
    right:-8rem;
    bottom:-10rem;
    background:#13233b;
}

body.auth-locked{
    overflow:hidden;
}

body.auth-locked #app,
body.auth-locked #viewer{
    pointer-events:none;
    user-select:none;
}

/* ---------- Цвета ---------- */

:root{

    --primary:#2d7dff;
    --primary-dark:#1758c5;
    --primary-soft:rgba(45,125,255,.18);

    --background:#05070d;
    --surface:#111827;
    --surface-2:#182235;
    --card:#121a2a;
    --border:rgba(255,255,255,.12);
    --text:#f4f7fb;
    --muted:#9aa5b8;

    --shadow:0 16px 40px rgba(0,0,0,.35);
    --radius:18px;

}

/* ---------- Контейнер ---------- */

#app{

    width:min(100%, 1500px);
    margin:0 auto;
    padding:18px 16px 48px;
    position:relative;

}

#app::before{
    content:"";
    position:absolute;
    inset:0 0 auto 0;
    height:200px;
    background:linear-gradient(90deg, rgba(45,125,255,.14), transparent 70%);
    border-radius:0 0 30px 30px;
    filter:blur(12px);
    pointer-events:none;
    z-index:-1;
}

/* ==========================================================
   HEADER
========================================================== */

#header{

    position:sticky;

    top:0;

    z-index:500;

    background:linear-gradient(135deg, rgba(10,14,24,.95), rgba(18,24,38,.9));
    backdrop-filter:blur(16px);

    padding:16px;

    border:1px solid var(--border);
    border-radius:0 0 var(--radius) var(--radius);
    box-shadow:var(--shadow);
    overflow:hidden;
    display:flex;
    justify-content:space-between;
    align-items:center;

}

.topbar{
    display:none;
}

.install-btn{
    width:40px;
    height:40px;
    border:1px solid rgba(255,255,255,.2);
    background:rgba(255,255,255,.08);
    color:var(--text);
    border-radius:12px;
    cursor:pointer;
    transition:.25s ease;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

.install-btn:hover{
    background:rgba(255,255,255,.14);
    border-color:rgba(255,255,255,.3);
}

.install-btn:active{
    transform:scale(.95);
}

.install-btn.hidden{
    display:none !important;
}

.current-user{
    margin-left:auto;
    margin-right:10px;
    padding:8px 12px;
    border:1px solid rgba(255,255,255,.2);
    border-radius:999px;
    background:rgba(255,255,255,.08);
    color:var(--text);
    font-size:.88rem;
    white-space:nowrap;
    max-width:48vw;
    overflow:hidden;
    text-overflow:ellipsis;
}

.current-user.hidden{
    display:none;
}

@media(max-width:650px){
    .current-user{
        margin-right:8px;
        padding:6px 8px;
        font-size:.72rem;
        max-width:64vw;
        white-space:normal;
        overflow:visible;
        text-overflow:clip;
        line-height:1.15;
        text-align:right;
    }
}

@media(max-width:380px){
    .current-user{
        font-size:.66rem;
        max-width:66vw;
    }
}

.categories-toggle-side{
    width:52px;
    height:44px;
    border:1px solid var(--border);
    background:transparent;
    color:var(--text);
    border-radius:12px;
    cursor:pointer;
    transition:.18s ease;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-top:8px;
}

.categories-toggle-side:hover{
    background:rgba(255,255,255,.08);
    transform:translateY(-1px);
}

.categories-toggle-side:active{
    transform:scale(.98);
}

#content{
    display:grid;
    grid-template-columns:96px minmax(0, 1fr);
    gap:20px;
    margin-top:20px;
}

.star-panel{
    position:sticky;
    top:110px;
    align-self:start;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.06);
    border-radius:18px;
    padding:10px 8px;
    box-shadow:var(--shadow);
    width:96px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
}

.panel-title{
    display:none;
}

.star-list{
    display:flex;
    flex-direction:column;
    gap:10px;
    align-items:center;
}

.star{
    width:52px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    border:1px solid var(--border);
    background:transparent;
    color:var(--text);
    border-radius:12px;
    cursor:pointer;
    transition:.18s ease;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
    font-size:1.4rem;
    line-height:1;
}

.star:hover{
    transform:translateY(-1px);
    background:rgba(255,255,255,.12);
}

.star.active{
    background:linear-gradient(135deg, #f5c451, #ffb800);
    color:#1d1600;
    border-color:transparent;
    box-shadow:0 10px 24px rgba(245,196,81,.28);
}

.star:hover{
    background:rgba(245,196,81,.15);
}

.main-content{
    position:relative;
}

#grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
    gap:20px;
    padding:10px 0 140px;
}

.scroll-top{
    position:fixed;
    right:24px;
    bottom:24px;
    z-index:600;
    border:0;
    background:rgba(45,125,255,.95);
    color:#fff;
    padding:12px 18px;
    border-radius:999px;
    cursor:pointer;
    box-shadow:0 18px 40px rgba(0,0,0,.25);
    transition:.25s ease;
}

.scroll-top:hover{
    transform:translateY(-2px);
    background:linear-gradient(135deg, #2d7dff, #1e57d4);
}

.category-sidebar-trigger{
    position:fixed;
    right:0;
    top:50%;
    transform:translateY(-50%);
    z-index:700;
    display:flex;
    align-items:center;
    justify-content:center;
    width:50px;
    height:140px;
    padding:8px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);
    border-radius:24px 0 0 24px;
    box-shadow:var(--shadow);
    backdrop-filter:blur(20px);
}

.category-sidebar-trigger .category-toggle{
    writing-mode:vertical-rl;
    text-orientation:mixed;
    transform:rotate(180deg);
    padding:10px 6px;
    border-radius:18px;
    background:rgba(255,255,255,.08);
    font-size:.95rem;
}

.category-drawer{
    position:fixed;
    inset:0;
    z-index:900;
    display:grid;
    grid-template-columns:1fr minmax(280px, 340px);
    pointer-events:auto;
}

.category-drawer.hidden{
    display:none;
    pointer-events:none;
}

.drawer-backdrop{
    background:rgba(0,0,0,.45);
    opacity:1;
    transition:opacity .25s ease;
    pointer-events:auto;
}

.drawer-panel{
    background:var(--surface);
    backdrop-filter:blur(18px);
    border-right:1px solid rgba(255,255,255,.08);
    padding:20px;
    display:flex;
    flex-direction:column;
    pointer-events:auto;
    order:-1;
    transform:translateX(-100%);
    transition:transform .3s ease;
}

.category-drawer:not(.hidden) .drawer-panel{
    transform:translateX(0);
}

.drawer-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    margin-bottom:18px;
    font-size:1rem;
    font-weight:700;
}

.drawer-header button{
    border:none;
    background:rgba(255,255,255,.08);
    color:var(--text);
    width:36px;
    height:36px;
    border-radius:12px;
    cursor:pointer;
    transition:.2s ease;
}

.drawer-header button:hover{
    background:rgba(255,255,255,.12);
}



.category-list{
    display:grid;
    gap:10px;
    overflow:auto;
    max-height:calc(100vh - 220px);
}

.category-item{
    width:100%;
    text-align:left;
    border:1px solid var(--border);
    border-radius:16px;
    padding:12px 14px;
    background:rgba(255,255,255,.05);
    color:var(--text);
    cursor:pointer;
    transition:.25s ease;
}

.category-item:hover{
    background:rgba(255,255,255,.12);
    transform:translateX(2px);
}

.category-item.active{
    background:linear-gradient(135deg, var(--primary), var(--primary-dark));
    color:#fff;
    border-color:transparent;
}

@media(max-width:1100px){
    #content{
        grid-template-columns:96px minmax(0, 1fr);
    }

    .star-panel{
        position:sticky;
        top:110px;
        width:96px;
        max-height:none;
        margin-bottom:0;
    }
}

@media(max-width:750px){
    .topbar{
        flex-direction:column;
        align-items:stretch;
    }

    .category-toggle{
        width:100%;
    }

    .search-bar{
        left:10px;
        right:10px;
        bottom:16px;
    }

    .scroll-top{
        right:14px;
        bottom:86px;
    }

    .category-drawer{
        grid-template-columns:1fr minmax(240px, 90vw);
    }

    .drawer-panel{
        max-width:90vw;
    }
}

/* Категории drawer на мобильных - компактнее */
@media(max-width:650px){
    .category-drawer{
        grid-template-columns:1fr minmax(220px, 60vw);
    }

    .drawer-panel{
        max-width:60vw;
        padding:16px;
    }

    .category-item{
        font-size:0.9rem;
        padding:10px 12px;
    }
}

/* Для планшетов (651px - 750px) скрыть боковую категории*/
@media(min-width:651px) and (max-width:750px){
    .category-sidebar-trigger{
        display:none;
    }
}

#header::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg, rgba(45,125,255,.16), transparent 55%, rgba(255,255,255,.05));
    pointer-events:none;
}

.empty-state{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-height:180px;
    padding:24px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    border-radius:24px;
    color:var(--text);
    text-align:center;
    box-shadow:var(--shadow);
}

.empty-title{
    font-size:1.2rem;
    font-weight:700;
    margin-bottom:12px;
}

.empty-text{
    color:var(--muted);
    max-width:520px;
    line-height:1.6;
}

.summary{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:12px;
    margin:12px 0 0;
    padding:14px 18px;
    border-radius:20px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    color:var(--text);
    font-size:.95rem;
    text-align:center;
}

.summary span{
    display:inline-block;
}

#logo{

    font-size:1.4rem;
    font-weight:700;
    letter-spacing:.02em;

    text-align:center;

    margin-bottom:14px;

    color:#eaf3ff;
    text-shadow:0 2px 8px rgba(45,125,255,.25);

}

/* ---------- Поиск ---------- */

#search{

    width:100%;
    max-width:960px;

    border:1px solid var(--border);
    outline:none;
    padding:14px 16px;
    border-radius:999px;

    font-size:1rem;
    color:var(--text);
    background:rgba(255,255,255,.06);
    transition:.2s ease;

}

.search-bar{
    position:fixed;
    left:20px;
    right:20px;
    bottom:24px;
    z-index:700;
    display:flex;
    justify-content:center;
    gap:10px;
    align-items:center;
    pointer-events:none;
}

.search-bar #search{
    pointer-events:auto;
    width:100%;
    box-shadow:0 18px 60px rgba(0,0,0,.2);
}

.search-bar .scan-qr-btn{
    pointer-events:auto;
    width:48px;
    height:48px;
    min-width:48px;
    min-height:48px;
    padding:0;
    background:var(--primary);
    border:1px solid rgba(255,255,255,.1);
    border-radius:12px;
    color:#fff;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.25s ease;
    box-shadow:0 4px 12px rgba(45,125,255,.3);
}

.search-bar .scan-qr-btn:hover{
    background:var(--primary-dark);
    transform:scale(1.05);
}

.search-bar .scan-qr-btn:active{
    transform:scale(.95);
}

#search::placeholder{
    color:var(--muted);
}

#search:focus{

    background:rgba(255,255,255,.1);
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(45,125,255,.18);

}

/* Hide QR scanner button on desktop */
@media(min-width:651px){
    .scan-qr-btn{
        display:none !important;
    }

    .mobile-categories-btn{
        display:none !important;
    }
}

/* ==========================================================
   Категории
========================================================== */

#categories{

    display:flex;

    gap:10px;

    overflow-x:auto;

    padding:14px 0 8px;

    scrollbar-width:none;

}

#categories::-webkit-scrollbar{

    display:none;

}

.categoryButton{

    flex:none;

    border:1px solid var(--border);
    background:rgba(255,255,255,.05);
    color:var(--text);
    padding:10px 16px;

    border-radius:999px;

    cursor:pointer;

    transition:.25s ease;

    white-space:nowrap;
    font-size:.9rem;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04);

}

.categoryButton:hover{

    background:rgba(255,255,255,.11);
    transform:translateY(-1px);
    box-shadow:0 10px 22px rgba(0,0,0,.18);

}

.categoryButton:active,
.star:active{
    transform:scale(.97);
}

.categoryButton.active{

    background:linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-color:transparent;
    color:white;
    box-shadow:0 10px 24px rgba(45,125,255,.28);

}

/* ==========================================================
   Фильтр звезд
========================================================== */

#stars{

    display:flex;

    gap:8px;

    overflow-x:auto;

    padding:10px 0 6px;

    scrollbar-width:none;

}

#stars::-webkit-scrollbar{

    display:none;

}

.star{

    flex:none;

    cursor:pointer;

    border:1px solid var(--border);

    border-radius:999px;

    background:rgba(255,255,255,.05);
    color:var(--text);
    padding:9px 14px;

    font-size:.9rem;

    box-shadow:0 6px 16px rgba(0,0,0,.18);

    transition:.2s ease;

}

.star:hover{

    transform:translateY(-2px);
    background:rgba(255,255,255,.11);
    box-shadow:0 10px 24px rgba(0,0,0,.24);

}

.star.active{

    background:linear-gradient(135deg, #f5c451, #ffb800);
    color:#1d1600;
    border-color:transparent;
    box-shadow:0 10px 24px rgba(245,196,81,.28);

}

/* ==========================================================
   GRID
========================================================== */

#grid{

    display:grid;

    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));

    gap:16px;

    padding:10px 0 0;

}

/* ---------- Планшет ---------- */

@media(max-width:900px){

    #grid{

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

    }

}

/* ---------- Телефон ---------- */

@media(max-width:650px){

    #content{
        display:grid;
        grid-template-columns:80px minmax(0, 1fr);
        gap:12px;
        margin-top:20px;
    }

    #grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:12px;
        padding:8px 0 0;
    }

    /* Звезды вертикально слева */
    .star-panel{
        position:sticky;
        top:110px;
        width:80px;
        max-width:none;
        margin:0;
        padding:8px 4px;
        background:transparent;
        border:none;
        box-shadow:none;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:flex-start;
        max-height:none;
        gap:6px;
    }

    .star-list{
        display:flex;
        flex-direction:column;
        gap:6px;
        align-items:center;
        justify-content:flex-start;
        width:100%;
    }

    .star{
        width:36px;
        height:32px;
        font-size:1rem;
        border-radius:6px;
        background:rgba(45,125,255,.1);
        border:1px solid rgba(45,125,255,.3);
        transition:.2s ease;
        padding:0;
        display:flex;
        align-items:center;
        justify-content:center;
    }

    .star:hover{
        background:rgba(45,125,255,.2);
        border-color:rgba(45,125,255,.5);
    }

    .categories-toggle-side{
        width:36px;
        height:32px;
        border:1px solid rgba(45,125,255,.3);
        background:rgba(45,125,255,.1);
        border-radius:6px;
        margin-top:2px;
    }

    .categories-toggle-side:hover{
        background:rgba(45,125,255,.2);
        border-color:rgba(45,125,255,.5);
    }

    .categories-toggle-side:active{
        transform:scale(.95);
    }

    /* Категории слева под звездами */
    .category-sidebar-trigger{
        position:relative;
        width:80px;
        height:auto;
        right:auto;
        top:auto;
        transform:none;
        background:transparent;
        border:none;
        box-shadow:none;
        padding:0;
        z-index:auto;
        display:none;
    }

    .category-sidebar-trigger .category-toggle{
        writing-mode:horizontal-tb;
        text-orientation:mixed;
        transform:none;
        width:100%;
        padding:8px 4px;
        font-size:0.65rem;
        border:1px solid rgba(45,125,255,.3);
        background:rgba(45,125,255,.1);
        border-radius:6px;
        word-break:break-word;
        line-height:1.2;
        white-space:normal;
    }

    /* Компактные карточки на мобильных */
    .card{
        padding:0;
        border-radius:12px;
    }

    .card-stars{
        padding:6px 4px;
        font-size:0.7rem;
    }

    .card-stars .stars-text,
    .card-stars .stars-hollow{
        font-size:0.9em;
        letter-spacing:1px;
    }

    .photo{
        height:120px;
    }

    .card-article{
        padding:6px 8px;
        font-size:0.8rem;
        line-height:1.2;
    }

    .card-price{
        padding:4px 6px;
        font-size:0.75rem;
    }

    .card-model{
        padding:4px 8px;
        font-size:0.75rem;
    }

}

/* ==========================================================
   PRODUCT CARD
========================================================== */

.card{

    position:relative;
    isolation:isolate;
    background:linear-gradient(180deg, rgba(18,26,42,.98), rgba(11,16,26,.98));

    border-radius:var(--radius);

    overflow:hidden;

    box-shadow:var(--shadow);
    transition:
        transform .22s cubic-bezier(.2,.9,.2,1),
        box-shadow .22s ease,
        border-color .22s ease;

    cursor:pointer;

    display:flex;

    flex-direction:column;

    border:1px solid var(--border);

}

.card::before{
    content:"";
    position:absolute;
    inset:1px;
    border-radius:calc(var(--radius) - 1px);
    background:linear-gradient(135deg, rgba(255,255,255,.08), transparent 40%, rgba(45,125,255,.08));
    pointer-events:none;
    opacity:.9;
}

.card:hover{

    transform:translateY(-6px) scale(1.01);
    box-shadow:0 20px 48px rgba(0,0,0,.4);
    border-color:rgba(45,125,255,.35);

}

.card:active{

    transform:scale(.98);

}

.card.card-enter{
    animation:cardEnter .62s cubic-bezier(.2,.9,.2,1) both;
}

/* ---------- Полоса звезд ---------- */

.card-stars{

    width:100%;

    padding:8px 6px;

    text-align:center;

    font-size:.8rem;

    font-weight:700;

    letter-spacing:.5px;

    background:rgba(255,255,255,.06);
    border-bottom:1px solid var(--border);

}

/* ---------- Фото ---------- */

.card-image{

    width:100%;

    aspect-ratio:1 / 1;

    display:flex;

    align-items:center;
    justify-content:center;

    background:linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));

    overflow:hidden;
    position:relative;

}

.card-image::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.12) 100%);
    pointer-events:none;
}

.photo{

    width:100%;

    height:100%;

    object-fit:cover;
    transition:
        transform .28s ease,
        opacity .2s;
    transform:scale(1.01);

}

.card:hover .photo{

    transform:scale(1.06);

}

/* ---------- Пока фото загружается ---------- */

.photo.loading{

    opacity:0;

}

.card-image.loading{

    background:
        linear-gradient(
            90deg,
            #eeeeee 25%,
            #f8f8f8 50%,
            #eeeeee 75%
        );

    background-size:300% 100%;

    animation:skeleton 1.3s infinite linear;

}

@keyframes skeleton{

    from{

        background-position:100% 0;

    }

    to{

        background-position:-100% 0;

    }

}

@keyframes cardEnter{
    from{
        opacity:0;
        transform:translateY(14px) scale(.98);
    }
    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

/* ---------- Артикул ---------- */

.card-meta{
    padding:12px 16px 6px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    flex-wrap:wrap;
}

.card-article{

    text-align:center;

    font-size:.95rem;

    font-weight:700;
    padding:0;

    color:#6fa8ff;

    word-break:break-word;

}

.card-price{
    font-size:.95rem;
    font-weight:600;
    color:#d6e3ff;
    background:rgba(255,255,255,.06);
    padding:4px 10px;
    border-radius:999px;
}

/* ---------- Модель ---------- */

.card-model{

    padding:4px 10px 12px;

    text-align:center;
    font-size:.85rem;

    line-height:1.35;

    color:var(--muted);

    flex-grow:1;

    display:flex;

    align-items:center;

    justify-content:center;

}

/* Gold color for filled star characters inside card header */
.card-stars .stars-text{
    color: #ffd700 !important;
    text-shadow: 
        0 0 4px rgba(255,215,0,0.6),
        0 2px 8px rgba(0,0,0,0.3);
    display:inline;
    letter-spacing:2px;
    font-size:1.1em;
    font-weight:900;
}

/* Silver color for hollow star characters inside card header */
.card-stars .stars-hollow{
    color: #c0c0c0 !important;
    text-shadow: 
        0 0 2px rgba(192,192,192,0.4),
        0 1px 4px rgba(0,0,0,0.2);
    display:inline;
    letter-spacing:2px;
    font-size:1.1em;
    font-weight:900;
}

/* Placeholder image styling */
.photo.no-photo{
    object-fit:contain;
    background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    filter:grayscale(.15) contrast(.95);
}

/* ==========================================================
   ЦВЕТ ЗВЕЗД
========================================================== */

.card.stars5 .card-stars{

    background:linear-gradient(90deg, #2f6b3a, #1d4b26);
    color:white;

}

.card.stars4 .card-stars{

    background:linear-gradient(90deg, #356d6a, #214f4b);
    color:white;

}

.card.stars3 .card-stars{

    background:linear-gradient(90deg, #3f5d89, #2a4368);
    color:white;

}

.card.stars2 .card-stars{

    background:linear-gradient(90deg, #6a5d2d, #4d431e);
    color:#f8f2d6;

}

.card.stars1 .card-stars{

    background:linear-gradient(90deg, #4b5563, #374151);
    color:#e5e7eb;

}

/* ==========================================================
   QR SCANNER
========================================================== */

.qr-scanner-modal{
    position:fixed;
    inset:0;
    z-index:1000;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:1;
    visibility:visible;
    transition:opacity .2s ease, visibility .2s ease;
}

.qr-scanner-modal.hidden{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}

.qr-scanner-backdrop{
    position:absolute;
    inset:0;
    background:rgba(2,6,23,.94);
    backdrop-filter:blur(6px);
}

.qr-scanner-container{
    position:relative;
    z-index:10;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    max-width:90vw;
    width:100%;
    max-height:90vh;
    padding:20px;
    display:flex;
    flex-direction:column;
    gap:16px;
}

.qr-scanner-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
}

.qr-scanner-header h2{
    font-size:1.3rem;
    font-weight:600;
    margin:0;
    color:var(--text);
}

.close-btn{
    width:40px;
    height:40px;
    padding:0;
    background:rgba(255,255,255,.08);
    border:1px solid var(--border);
    border-radius:8px;
    color:var(--text);
    cursor:pointer;
    font-size:1.5rem;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.25s ease;
}

.close-btn:hover{
    background:rgba(255,255,255,.12);
}

#qrVideo{
    border-radius:12px;
    background:#000;
    border:1px solid rgba(255,255,255,.06);
}

.qr-scanner-status{
    text-align:center;
    color:var(--muted);
    font-size:.95rem;
    padding:10px;
}

.stop-btn{
    padding:12px 20px;
    background:rgba(255,255,255,.08);
    border:1px solid var(--border);
    border-radius:8px;
    color:var(--text);
    cursor:pointer;
    font-size:1rem;
    transition:.25s ease;
    align-self:center;
    min-width:150px;
}

.stop-btn:hover{
    background:rgba(255,255,255,.12);
}

/* ==========================================================
   INSTALL MODAL
========================================================== */

.install-modal{
    position:fixed;
    inset:0;
    z-index:1000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
}

.auth-modal{
    position:fixed;
    inset:0;
    z-index:1100;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
}

.auth-modal.hidden{
    display:none;
}

.auth-backdrop{
    position:absolute;
    inset:0;
    background:rgba(2,6,23,.8);
    backdrop-filter:blur(6px);
}

.auth-content{
    position:relative;
    z-index:1;
    width:100%;
    max-width:420px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:18px;
    box-shadow:var(--shadow);
    padding:22px;
}

.auth-content h2{
    margin:0 0 8px;
    color:var(--text);
    font-size:1.3rem;
}

.auth-subtitle{
    margin:0 0 18px;
    color:var(--muted);
    font-size:.92rem;
}

.auth-form{
    display:grid;
    gap:10px;
}

.auth-label{
    color:var(--text);
    font-size:.9rem;
}

.auth-input{
    width:100%;
    border:1px solid var(--border);
    outline:none;
    padding:11px 12px;
    border-radius:10px;
    font-size:1rem;
    color:var(--text);
    background:rgba(255,255,255,.06);
    transition:.2s ease;
}

.auth-input:focus{
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(45,125,255,.2);
}

.auth-error{
    min-height:20px;
    color:#ff8f8f;
    font-size:.88rem;
}

.auth-submit{
    margin-top:2px;
    width:100%;
}

.install-modal.hidden{
    display:none;
}

.modal-backdrop{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.6);
    backdrop-filter:blur(4px);
}

.modal-content{
    position:relative;
    z-index:1001;
    background:var(--surface);
    border-radius:18px;
    border:1px solid var(--border);
    box-shadow:var(--shadow);
    width:100%;
    max-width:420px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
}

.modal-header{
    padding:20px;
    border-bottom:1px solid var(--border);
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.modal-header h2{
    margin:0;
    font-size:1.3rem;
    font-weight:600;
    color:var(--text);
}

.modal-body{
    padding:20px;
    color:var(--text);
    font-size:0.95rem;
    line-height:1.6;
}

.modal-body p{
    margin:0 0 10px;
}

.modal-body strong{
    display:block;
    margin-top:15px;
    margin-bottom:8px;
    color:var(--primary);
}

.modal-body ol, .modal-body ul{
    margin:10px 0 10px 20px;
    padding:0;
}

.modal-body li{
    margin:5px 0;
}

.modal-footer{
    padding:16px 20px;
    border-top:1px solid var(--border);
    display:flex;
    gap:10px;
    justify-content:flex-end;
}

.btn-primary{
    padding:10px 24px;
    background:linear-gradient(135deg, var(--primary), var(--primary-dark));
    color:white;
    border:none;
    border-radius:8px;
    cursor:pointer;
    font-weight:500;
    font-size:0.95rem;
    transition:.25s ease;
}

.btn-primary:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 16px rgba(45,125,255,.3);
}

.btn-secondary{
    padding:10px 24px;
    background:rgba(255,255,255,.08);
    color:var(--text);
    border:1px solid var(--border);
    border-radius:8px;
    cursor:pointer;
    font-weight:500;
    font-size:0.95rem;
    transition:.25s ease;
}

.btn-secondary:hover{
    background:rgba(255,255,255,.12);
}

/* ==========================================================
   АДАПТИВНОСТЬ
========================================================== */

@media(max-width:650px){

    #header{
        padding:14px;
    }

    #logo{
        font-size:1.2rem;
        margin-bottom:10px;
    }

    #search{
        padding:12px 14px;
        font-size:.95rem;
    }

    .card-stars{

        font-size:.72rem;

    }

    .card-article{

        font-size:.84rem;
    }

    .card-model{

        font-size:.76rem;
    }

}

@media(max-width:430px){

    #app{
        padding:12px 10px 36px;
    }

    .card{

        border-radius:14px;

    }

    .card-stars{

        padding:5px;

    }

    .card-model{

        padding:6px 8px 10px;
        font-size:.72rem;

    }

}


/* ==========================================================
   FULL SCREEN VIEWER
========================================================== */

#viewer{

    position:fixed;

    inset:0;

    z-index:9999;

    display:flex;

    align-items:center;

    justify-content:center;

    opacity:1;

    visibility:visible;

    transition:
        opacity .2s ease,
        visibility .2s ease;

}

#viewer.hidden{

    opacity:0;

    visibility:hidden;

    pointer-events:none;

}

#viewerBackground{

    position:absolute;

    inset:0;

    background:rgba(2,6,23,.94);

    backdrop-filter:blur(6px);

}

#viewerImage{

    position:relative;

    z-index:2;

    max-width:95vw;

    max-height:95vh;

    object-fit:contain;

    border-radius:16px;

    box-shadow:0 24px 80px rgba(0,0,0,.55);

    animation:viewerAppear .18s ease;

    cursor:zoom-out;

}

@keyframes viewerAppear{

    from{

        transform:scale(.92);

        opacity:0;

    }

    to{

        transform:scale(1);

        opacity:1;

    }

}

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

::-webkit-scrollbar{

    width:10px;

    height:10px;

}

::-webkit-scrollbar-track{

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

}

::-webkit-scrollbar-thumb{

    background:linear-gradient(180deg, #3d5f86, #213448);
    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:linear-gradient(180deg, #4f78a7, #2e4d68);

}

/* Firefox */

*{

    scrollbar-width:thin;

}

/* ==========================================================
   SELECTION
========================================================== */

::selection{

    background:#1565c0;

    color:white;

}

/* ==========================================================
   IMAGE PLACEHOLDER
========================================================== */

.photo.error{

    opacity:.25;

    filter:grayscale(1);

}

.photo.loaded{

    opacity:1;

}

/* ==========================================================
   EMPTY LIST
========================================================== */

#emptyMessage{

    grid-column:1/-1;

    text-align:center;

    padding:60px 20px;

    color:var(--muted);
    font-size:1rem;
    border:1px dashed var(--border);
    border-radius:var(--radius);
    background:rgba(255,255,255,.04);

}

/* ==========================================================
   LOADING
========================================================== */

#loading{

    position:fixed;

    right:18px;

    bottom:18px;

    background:linear-gradient(135deg, var(--primary), var(--primary-dark));

    color:white;

    padding:10px 16px;

    border-radius:999px;

    box-shadow:0 10px 24px rgba(45,125,255,.25);

    font-size:.85rem;

    z-index:600;

    display:none;

}

#loading.visible{

    display:block;

}

/* ==========================================================
   TOUCH DEVICES
========================================================== */

@media (hover:none){

    .card:hover{

        transform:none;

        box-shadow:var(--shadow);

    }

    .card:hover .photo{

        transform:none;

    }

}

/* ==========================================================
   LARGE SCREENS
========================================================== */

@media(min-width:1200px){

    #grid{

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

    }

}

/* ==========================================================
   VERY SMALL PHONES
========================================================== */

@media(max-width:380px){

    #header{

        padding:10px;

    }

    #logo{

        font-size:1.05rem;

        margin-bottom:8px;

    }

    #search{

        padding:10px 12px;

        font-size:.9rem;

    }

    #categories{

        padding:8px 0 6px;

        gap:8px;

    }

    .categoryButton{

        padding:8px 12px;

        font-size:.8rem;

    }

    #stars{

        padding:8px 0 4px;

        gap:6px;

    }

    .star{

        padding:7px 11px;

        font-size:.75rem;

    }

}

/* ==========================================================
   PRINT
========================================================== */

@media print{

    #header,
    #categories,
    #stars,
    #viewer{

        display:none !important;

    }

    body{

        background:white;

    }

}