/* Main-screen visual refinement — loaded after app.css. */
:root{
    --sidebar:243px;
    --header:62px;
    --panel:#0d1319;
    --panel-2:#10171e;
    --line:#1a232b;
}
.hero-slide{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,8,11,.82),rgba(4,8,11,.08)),var(--hero-image) center/cover no-repeat;animation:hero-slide-in .4s ease}.hero-slide[hidden]{display:none}.hero-slide .hero-copy{position:relative;z-index:2;height:100%}.hero-dots button{width:20px;height:3px;padding:0;border:0;border-radius:4px;background:#59616a}.hero-dots button.active{background:var(--red)}@keyframes hero-slide-in{from{opacity:.2;transform:scale(1.01)}to{opacity:1;transform:none}}

body{
    background:
        radial-gradient(circle at 67% 17%,rgba(239,35,60,.035),transparent 28%),
        linear-gradient(135deg,#080d12,#05090d 67%);
    font-size:13px;
}

.brand{
    justify-content:center;
    padding:7px 12px;
}

.brand img{
    width:100%;
    height:48px;
    object-fit:contain;
}

.brand.mobile-brand{display:none}

.topbar{
    gap:30px;
    padding:0 24px 0 27px;
    background:rgba(5,9,13,.97);
}
.topbar>.searchbar{width:180px;min-width:180px}

.topnav{gap:31px}
.topnav a{
    font-size:11px;
    font-weight:700;
    color:#f0f2f4;
}
.topnav a i{font-size:9px;margin-left:5px}
.topnav a.active:after,.topnav a:hover:after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:8px;
    height:2px;
    border-radius:2px;
    background:var(--red);
}
.top-icon{
    border-color:transparent;
    background:transparent;
}
.top-icon:hover{background:#0d141a}

.sidebar{
    padding:0 13px 18px;
    background:
        radial-gradient(circle at 20% 12%,rgba(239,35,60,.035),transparent 25%),
        linear-gradient(180deg,#0d1319,#080d12);
}
.side-nav{padding-top:18px}
.side-nav a{
    height:36px;
    gap:13px;
    padding:0 12px;
    font-size:12px;
    color:#b7c0c8;
}
.categories a{height:34px;font-size:11px}
.side-label{
    margin-top:10px;
    padding:18px 12px 8px;
    font-size:9px;
}
.premium-card{
    margin-top:17px;
    padding:19px 15px 15px;
}
.premium-card p{margin:13px 0 15px;font-size:11px}
.premium-card .btn{width:100%;padding:11px 8px}

.site-shell{
    min-height:calc(100vh - var(--header) - 50px);
    padding:calc(var(--header) + 18px) 21px 18px;
}
.footer{
    min-height:50px;
    padding:0 21px;
    font-size:11px;
}

.page-grid{
    grid-template-columns:minmax(0,1fr) 312px;
    gap:16px;
}
.right-column{gap:12px}
.panel{
    border-color:var(--line);
    background:linear-gradient(145deg,rgba(15,22,29,.98),rgba(9,14,19,.99));
}

.hero{
    height:260px;
    background:
        linear-gradient(90deg,rgba(5,8,12,.96) 0%,rgba(5,8,12,.64) 32%,rgba(5,8,12,.08) 67%,rgba(5,8,12,.2) 100%),
        url("../img/home-hero.webp") center/cover no-repeat;
    box-shadow:inset 0 0 40px rgba(0,0,0,.24);
}
.hero:after{
    background:linear-gradient(0deg,rgba(5,8,12,.5),transparent 42%);
}
.hero-copy{
    width:50%;
    padding:42px 38px;
}
.hero h1{
    font-size:29px;
    font-weight:760;
    letter-spacing:-.02em;
    margin-bottom:13px;
}
.hero p{
    max-width:370px;
    margin:0;
    font-size:12px;
    line-height:1.75;
    color:#aeb6be;
}
.hero-actions{margin-top:19px}
.hero-actions .btn{padding:11px 16px;font-size:10px}
.hero-arrow{
    position:absolute;
    z-index:3;
    top:50%;
    width:34px;
    height:34px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:50%;
    display:grid;
    place-items:center;
    transform:translateY(-50%);
    background:rgba(6,10,14,.72);
    color:#fff;
}
.hero-prev{left:-17px;padding-left:14px}
.hero-next{right:21px}
.hero-dots{
    position:absolute;
    z-index:3;
    left:50%;
    bottom:10px;
    display:flex;
    gap:8px;
    transform:translateX(-50%);
}
.hero-dots span{
    width:20px;
    height:4px;
    border-radius:5px;
    background:rgba(255,255,255,.18);
}
.hero-dots span.active{background:var(--red)}

.primary-column>.panel{margin-top:14px}
.featured-categories{padding:14px 12px 11px!important}
.panel-title{margin-bottom:12px;padding:0 6px}
.panel-title h2,.panel-title h3{font-size:13px;font-weight:700}
.panel-title a{font-size:10px}
.category-cards{gap:8px}
.category-card{
    min-height:103px;
    display:grid;
    grid-template-columns:39px minmax(0,1fr);
    gap:8px;
    align-items:start;
    padding:12px 10px;
    background:
        radial-gradient(circle at 18% 30%,rgba(239,35,60,.045),transparent 34%),
        linear-gradient(145deg,#10171e,#0a0f14);
}
.category-card .icon-box{
    width:34px;
    height:34px;
    font-size:14px;
    box-shadow:0 0 20px rgba(239,35,60,.08);
}
.category-copy{min-width:0}
.category-card strong{
    display:block;
    margin:2px 0 0;
    font-size:11px;
}
.category-card p{
    min-height:28px;
    margin:7px 0 6px;
    font-size:9px;
    line-height:1.55;
}
.category-card small{font-size:8px;color:#c3c9ce}

.home-topics .tabs{
    height:48px;
    gap:38px;
    padding:0 24px;
}
.home-topics .tabs button{
    padding:15px 0 13px;
    font-size:10px;
}
.topic-row{
    grid-template-columns:36px minmax(0,1fr) 58px 78px 116px 34px;
    min-height:59px;
    gap:10px;
    padding:9px 14px 9px 20px;
}
.topic-row .row-icon{
    width:32px;
    height:32px;
    background:#0d1a24;
    border-color:#142a39;
    color:#3ca9f4;
}
.topic-row .row-main strong{font-size:12px;font-weight:500}
.topic-row .row-main small{
    display:flex;
    align-items:center;
    gap:5px;
    font-size:9px;
}
.topic-row .row-main small em{font-size:9px}
.topic-row .row-main small i{font-size:7px;color:#64717b}
.topic-row .metric b{font-size:11px;font-weight:500}
.topic-row .metric small,.topic-row .row-time small{font-size:8px}
.mini-avatar{
    width:28px;
    height:28px;
    border:1px solid #68202b;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:radial-gradient(circle,#54121e,#090d11 68%);
    color:#f05a68;
    font-size:10px;
    font-weight:800;
}
.avatar-1{border-color:#715039;color:#e2a466;background:radial-gradient(circle,#332318,#090d11 68%)}
.avatar-2{border-color:#5f4850;color:#d9b3bd;background:radial-gradient(circle,#281a20,#090d11 68%)}
.avatar-3{border-color:#56357a;color:#b57bec;background:radial-gradient(circle,#29143e,#090d11 68%)}
.avatar-4{border-color:#1b607c;color:#58b9df;background:radial-gradient(circle,#123247,#090d11 68%)}

.home-stat-strip{
    min-height:83px;
    margin-top:14px;
    padding:17px 23px;
}
.home-stat-strip>div{padding:0 24px}
.home-stat-strip i{
    width:32px;
    height:32px;
    font-size:14px;
}
.home-stat-strip>div:last-child i{
    color:#43d542;
    background:rgba(35,188,45,.1);
}
.home-stat-strip b{font-size:16px}
.home-stat-strip small{font-size:8px}

.welcome-card{
    min-height:158px;
    display:grid;
    grid-template-columns:54px 1fr;
    grid-template-rows:1fr 54px;
    gap:0 12px;
    padding:18px 17px 0;
}
.welcome-avatar{
    width:50px;
    height:50px;
    border:1px solid #8b1c29;
    border-radius:50%;
    object-fit:cover;
    background:#090d11;
    box-shadow:0 0 18px rgba(239,35,60,.12);
}
.welcome-copy{padding-top:6px}
.welcome-copy p{margin:0 0 5px;font-size:13px}
.welcome-copy small{color:var(--red);font-size:10px}
.welcome-metrics{
    grid-column:1/3;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    border-top:1px solid var(--line);
}
.welcome-metrics span{
    display:flex;
    flex-direction:column;
    justify-content:center;
    border-right:1px solid var(--line);
}
.welcome-metrics span:last-child{border:0}
.welcome-metrics small{color:var(--muted);font-size:8px;margin-bottom:4px}
.welcome-metrics b{font-size:13px}
.welcome-login{
    align-self:center;
    color:var(--red);
    font-size:10px;
    font-weight:800;
}

.side-stats{min-height:176px;padding:18px}
.side-stats h3,.side-products h3,.recent-activity h3{
    padding-bottom:12px;
    margin-bottom:10px;
    border-bottom:1px solid var(--line);
    font-size:12px;
}
.side-stats p{margin:13px 0;font-size:10px}
.side-products{padding:17px}
.side-products>a:not(.btn){
    min-height:38px;
    align-items:center;
    padding:8px 0;
    font-size:9px;
}
.side-product-name{
    min-width:0;
    display:flex;
    align-items:center;
    gap:8px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.product-dot{
    flex:0 0 auto;
    width:22px;
    height:22px;
    border:1px solid #51303a;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#121820;
    color:#db6b85;
    font-size:10px;
    font-style:normal;
}
.dot-1{color:#65b7e8}.dot-2{color:#d9e2e9}.dot-3{color:#f0a53a}.dot-4{color:#ef5067}
.side-products .btn{margin-top:11px;padding:10px;font-size:9px}
.recent-activity{padding:17px}
.recent-activity>a{
    display:grid;
    grid-template-columns:28px minmax(0,1fr);
    gap:9px;
    padding:9px 0;
    color:#8db4d9;
    font-size:9px;
    line-height:1.45;
}
.recent-activity>a b{color:#4ca8ef;font-weight:500}
.recent-activity>a small{display:block;color:var(--muted);margin-top:2px}

@media(max-width:1180px){
    :root{--sidebar:210px}
    .page-grid{grid-template-columns:1fr}
    .right-column{display:grid;grid-template-columns:repeat(3,1fr)}
    .recent-activity{grid-column:1/4}
}

@media(max-width:900px){
    :root{--sidebar:0px}
    .brand.mobile-brand{display:flex}
    .page-grid{grid-template-columns:1fr}
    .right-column{grid-template-columns:1fr 1fr}
    .recent-activity{grid-column:1/3}
    .category-cards{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:620px){
    .hero{height:360px;background-position:62% center}
    .hero-copy{width:100%;padding:30px 22px;background:linear-gradient(90deg,rgba(5,8,12,.88),rgba(5,8,12,.18))}
    .hero-next{right:12px}
    .category-cards,.right-column{grid-template-columns:1fr}
    .recent-activity{grid-column:auto}
    .topic-row{grid-template-columns:34px minmax(0,1fr) 52px 28px}
    .topic-row .metric:nth-of-type(2),.topic-row .row-time{display:none}
    .home-stat-strip{grid-template-columns:1fr 1fr}
}