@font-face {
    font-family: 'Orbitron';
    src: url('/assets/fonts/orbitron/Orbitron-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Orbitron';
    src: url('/assets/fonts/orbitron/Orbitron-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}
@media (max-width: 600px) {

    .stats-row {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
        width: 100%;
    }

        .main-title {
            font-size: 16px;
            font-weight: 700;
            color: #ffffff;
            margin: 0;
            text-transform: uppercase;
            letter-spacing: 1px;
            white-space: nowrap;
            /* Împiedică textul să sară pe rândul doi */
        }
    
        /* Opțional: pe telefoane foarte mici, dacă nu e loc, putem reduce textul */
        @media (max-width: 480px) {
            .main-title {
                font-size: 14px;
            }
        }
        
    .stat-pill {
        padding: 6px 10px;
        font-size: 13px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 4px;
        border-radius: 6px;
    }

    .topbar-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}
:root{
  --bg:#0a0011;
  --panel:rgba(12,0,30,0.90);
  --accent:#3e0053;
  --accent-2:#a20aff;
  --muted:rgba(255,255,255,0.06);
  --glass:rgba(20,0,30,0.66);
  --text:#ffffff;
  --radius:12px;
  --sidebar-w:240px;
  --sidebar-collapsed-w:88px;
  --topbar-h:50px;
}
*{box-sizing:border-box;}
html,body{height:100%;margin:0;font-family:'Orbitron',sans-serif;background:var(--bg);color:var(--text);overflow:hidden;}
a{color:inherit;text-decoration:none;}
.sidebar{
  position:fixed;top:0;left:0;bottom:0;width:var(--sidebar-w);padding:20px;
  background:var(--panel);backdrop-filter:blur(4px);
  box-shadow:2px 0 20px rgba(0,0,0,0.6);
  display:flex;flex-direction:column;gap:18px;transition:width .28s ease,transform .28s ease;
  z-index:1200;overflow:hidden;
}
.sidebar.collapsed{width:var(--sidebar-collapsed-w);}
.sidebar .brand{display:flex;justify-content:center;align-items:center;padding-bottom:8px;border-bottom:1px solid var(--muted);}
.sidebar .brand .logo{width:180px;height:32px;border-radius:8px;overflow:hidden;}
.sidebar .brand .logo img{width:100%;height:100%;object-fit:cover;}
.sidebar.collapsed .brand .logo{width:48px;height:48px;}
.menu{margin-top:12px;flex:1;overflow:hidden;padding-right:6px;}
.menu ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px;}
.menu li a{
  display:flex;align-items:center;gap:12px;padding:10px;border-radius:10px;
  font-weight:600;font-style:italic;letter-spacing:1px;text-transform:uppercase;
  transition:all .18s ease;position:relative;
}
.menu li a .icon{width:28px;min-width:28px;text-align:center;font-size:16px;}
.menu li a .text{white-space:nowrap;}
.menu li a:hover,.menu li a.active{
  background:linear-gradient(90deg, rgba(162,10,255,0.12), rgba(199,125,255,0.06));
  transform:translateX(6px);
}
.sidebar.collapsed .menu li a .text{display:none;}
.sidebar .small{font-size:12px;color:rgba(255,255,255,0.7);text-align:center;padding-top:8px;border-top:1px solid var(--muted);}
.sidebar.collapsed .small{display:none!important;}
.topbar{
  position:fixed;top:8px;left:var(--sidebar-w);right:20px;height:auto;display:flex;align-items:stretch;z-index:1150;
  transition:left .28s ease,right .28s ease;
}
.main.expanded .topbar{left:var(--sidebar-collapsed-w);}
.topbar-inner{
  width:100%;display:flex;align-items:center;gap:12px;background:var(--glass);
  backdrop-filter:blur(12px);padding:4px 10px;border-radius:12px;box-shadow:0 3px 12px rgba(0,0,0,0.4);
}
.toggle-btn{background:transparent;border:none;padding:4px;border-radius:8px;cursor:pointer;font-size:16px;color:var(--text);}
.stats-row{
  flex:1;display:flex;justify-content:space-around;align-items:center;gap:12px;
}
.stat-pill{
  display:flex;flex-direction:row;align-items:center;gap:6px;
  padding:6px 14px;border-radius:10px;
  background:rgba(255,255,255,0.03);white-space:nowrap;
  font-size:14px;font-weight:600;
}
.stat-pill .label{color:rgba(255,255,255,0.7);}
.stat-pill .value{font-weight:800;}
.main{margin-left:var(--sidebar-w);height:100vh;display:flex;flex-direction:column;transition:margin-left .28s ease;padding:12px;}
.main.expanded{margin-left:var(--sidebar-collapsed-w);}
.content-wrap{
  flex:1;display:flex;overflow:hidden;margin-top:20px; /* mai sus */
}
#panel-frame{
  flex:1;width:100%;border:0;border-radius:12px;background:rgba(0,0,0,0.28);
  transition:opacity .3s ease,filter .3s ease;
  overflow:hidden;
}
#panel-frame.fade-out{opacity:0;filter:blur(6px);}
@media(max-width:900px){
  .sidebar{transform:translateX(-100%);}
  .sidebar.active{transform:translateX(0);}
  .main,.main.expanded{margin-left:0;padding:8px;}
  .topbar{left:12px;right:12px;}
  .stats-row{flex-direction:column;gap:6px;}
  .stat-pill{font-size:12px;padding:4px 8px;}
  .content-wrap{margin-top:2px;}
}
@media(max-width:600px) {

    .topbar-inner {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 4px 8px !important;
    }

    .topbar-left {
        order: 2;
        margin-left: auto;
    }

    #sidebar-toggle {
        font-size: 16px !important;
        padding: 4px !important;
    }

    .stats-row {
        order: 1;
        width: 100%;
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        margin-top: 6px;
        padding: 0 4px;
    }

    .stat-pill {
        padding: 4px 6px !important;
        font-size: 11px !important;
        gap: 3px !important;
        justify-content: center !important;
        border-radius: 6px !important;
    }

    .stat-pill .label {
        display: none !important;
    }

    .stat-pill:nth-child(1)::before {
        content: "";
        font-weight: 700;
    }

    .stat-pill:nth-child(2)::before {
        content: "";
        font-weight: 700;
    }

    .stat-pill:nth-child(3)::before {
        content: "";
        font-weight: 700;
    }

    .stat-pill:nth-child(4)::before {
        content: "";
        font-weight: 700;
    }
}