:root{
    --black:#0b0d10;
    --cream:#f7f4ec;
    --white:#ffffff;
    --blue:#3155ff;
    --pink:#ff35a8;
    --lime:#c8ff00;
    --cyan:#08dfd1;
    --orange:#ff9d22;
    --green:#28c76f;
    --text:#171821;
    --muted:#74757d;
    --line:#e6e3dc;
    --shadow:0 10px 30px rgba(25,25,35,.07);
}

*{box-sizing:border-box}

html,body{
    margin:0;
    min-height:100%;
}

body{
    font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
    background:var(--cream);
    color:var(--text);
}

/* HEADER */

header{
    height:105px;
    padding:26px 34px;
    background:var(--black);
    color:#fff;
    position:relative;
    overflow:hidden;
}

header:after{
    content:"";
    position:absolute;
    width:360px;
    height:240px;
    right:-80px;
    top:-120px;
    background:radial-gradient(circle,#713cff 0%,rgba(113,60,255,.2) 45%,transparent 70%);
}

.brand{
    position:relative;
    z-index:2;
    display:inline-block;
    font-family:Arial Black,Impact,sans-serif;
    font-size:32px;
    line-height:1;
    font-style:italic;
    font-weight:900;
    letter-spacing:-1px;
    transform:skew(-5deg);
}

.brand::first-letter{
    color:#fff;
}

.brand:after{
    content:"•";
    color:var(--pink);
    margin-left:4px;
}

.sub{
    position:relative;
    z-index:2;
    margin-top:9px;
    color:var(--pink);
    font-weight:800;
    font-size:11px;
    letter-spacing:2px;
    text-transform:uppercase;
}

.sub:before{
    content:"// ";
}

/* NAV */

nav{
    height:58px;
    display:flex;
    align-items:center;
    gap:34px;
    padding:0 34px;
    background:#fff;
    border-bottom:1px solid var(--line);
}

nav a{
    position:relative;
    height:58px;
    display:flex;
    align-items:center;
    color:#65666d;
    text-decoration:none;
    font-size:13px;
    font-weight:650;
}

nav a:hover{
    color:var(--blue);
}

nav a.active{
    color:var(--text);
    font-weight:800;
}

nav a.active:after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:4px;
    border-radius:4px 4px 0 0;
    background:var(--lime);
}

/* CONTENT */

main{
    max-width:1380px;
    margin:0 auto;
    padding:40px 34px 80px;
}

.page-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:30px;
    margin-bottom:28px;
}

.page-head > div:first-child:before{
    content:"BILGIQ /";
    display:block;
    margin-bottom:9px;
    color:var(--blue);
    font-size:10px;
    font-weight:900;
    letter-spacing:1.2px;
}

h1{
    margin:0;
    font-family:Arial Black,Impact,sans-serif;
    font-size:46px;
    line-height:.95;
    font-weight:900;
    font-style:italic;
    letter-spacing:-2px;
    text-transform:uppercase;
}

h1:after{
    content:"•";
    color:var(--pink);
    font-style:normal;
    margin-left:5px;
}

.intro{
    margin-top:11px;
    color:var(--muted);
    font-size:15px;
}

/* BUTTONS */

.button,
.new-sale-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:46px;
    padding:0 21px;
    border:0;
    border-radius:9px;
    background:linear-gradient(135deg,#3155ff,#283ce7);
    color:#fff;
    text-decoration:none;
    font-size:13px;
    font-weight:800;
    box-shadow:0 8px 20px rgba(49,85,255,.22);
    cursor:pointer;
    transition:.16s ease;
}

.button:hover,
.new-sale-button:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 25px rgba(49,85,255,.30);
}

.button.secondary{
    background:#fff;
    color:var(--text);
    border:1px solid var(--line);
    box-shadow:none;
}

/* SEARCH */

.search{
    margin-bottom:20px;
}

.search input,
input[type=text],
input[type=search],
input[type=date],
select,
textarea{
    min-height:45px;
    padding:0 15px;
    border:1px solid #dedde0;
    border-radius:10px;
    background:#fff;
    color:var(--text);
    font:14px inherit;
    outline:none;
}

.search input{
    width:100%;
    max-width:340px;
}

input:focus,
select:focus,
textarea:focus{
    border-color:var(--blue);
    box-shadow:0 0 0 3px rgba(49,85,255,.09);
}

/* CARDS */

.card{
    background:#fff;
    border:1px solid rgba(30,30,40,.07);
    border-radius:13px;
    overflow:hidden;
    box-shadow:var(--shadow);
}

.ct{
    padding:15px 19px;
    background:#faf9f6;
    border-bottom:1px solid var(--line);
    font-size:11px;
    font-weight:850;
    letter-spacing:.7px;
    text-transform:uppercase;
}

.content{
    padding:21px;
}

/* TABLE */

table{
    width:100%;
    border-collapse:collapse;
}

th{
    padding:14px 17px;
    background:#f6f5f1;
    border-bottom:1px solid var(--line);
    text-align:left;
    color:#77787f;
    font-size:10px;
    font-weight:850;
    letter-spacing:.6px;
    text-transform:uppercase;
}

td{
    padding:15px 17px;
    border-bottom:1px solid var(--line);
    font-size:13px;
}

tbody tr{
    cursor:pointer;
    transition:.14s ease;
}

tbody tr:hover td{
    background:#fbfaff;
}

tbody tr:last-child td{
    border-bottom:0;
}

.title{
    font-weight:800;
}

/* STATUS */

.pill,
.status,
.stage{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 11px;
    border-radius:999px;
    background:#eaf1ff;
    color:#2863df;
    font-size:11px;
    font-weight:800;
}

.pill:before{
    content:"";
    width:7px;
    height:7px;
    border-radius:50%;
    background:currentColor;
}

/* BRIDGE */

.bridge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:7px 12px;
    border-radius:7px;
    background:var(--cyan);
    color:#071513;
    text-decoration:none;
    font-size:11px;
    font-weight:850;
}

.bridge:before{
    content:"▶";
    font-size:9px;
}

/* DETAIL */

.row{
    display:grid;
    grid-template-columns:180px 1fr;
    gap:18px;
    padding:12px 0;
    border-bottom:1px solid var(--line);
}

.row:last-child{border-bottom:0}

.label{
    color:#85868c;
    font-size:12px;
}

.value{
    font-size:13px;
    font-weight:650;
}

/* WORKFLOW */

.workflow{
    display:flex;
    align-items:center;
    gap:7px;
    margin-bottom:28px;
}

.workflow-step{
    flex:1;
    min-width:110px;
    padding:11px 8px;
    text-align:center;
    border-radius:8px;
    background:#ececf0;
    color:#777;
    font-size:10px;
    font-weight:850;
}

.workflow-step.active{
    background:linear-gradient(135deg,var(--pink),#8b48ff);
    color:#fff;
    box-shadow:0 7px 18px rgba(255,53,168,.20);
}

.workflow-arrow{
    color:#b3b3b7;
}

/* MESSAGES */

.ok,.notice.ok{
    padding:13px 15px;
    background:#e6f9ee;
    border:1px solid #bce9cd;
    color:#16834a;
    border-radius:9px;
}

.error,.notice.error{
    padding:13px 15px;
    background:#fff0f2;
    border:1px solid #ffcbd2;
    color:#c93449;
    border-radius:9px;
}

/* RETRO DETAILS */

main:after{
    content:"GOOD SONGS. BETTER BUSINESS.";
    display:block;
    margin-top:32px;
    color:var(--pink);
    font-family:"Comic Sans MS",cursive;
    font-size:13px;
    font-style:italic;
    transform:rotate(-2deg);
    text-align:right;
}

@media(max-width:800px){
    header{height:auto;padding:22px}
    nav{padding:0 20px;overflow-x:auto}
    main{padding:30px 20px 60px}
    h1{font-size:37px}
    .page-head{display:block}
    .page-head .button,
    .page-head .new-sale-button{margin-top:20px}
    .workflow{overflow-x:auto}
    .row{grid-template-columns:1fr;gap:5px}
}

/* =========================================================
   BILGIQ V5 — MOODSHINE SIDEBAR
   ========================================================= */

body{
    padding-left:270px !important;
    background:
        radial-gradient(circle at 20% 0%,rgba(255,53,168,.09),transparent 25%),
        radial-gradient(circle at 90% 10%,rgba(49,85,255,.08),transparent 28%),
        #f8f5ed !important;
}

/* OLD HEADER BECOMES SIDEBAR */

header{
    position:fixed !important;
    left:0;
    top:0;
    bottom:0;
    z-index:100;
    width:270px !important;
    height:100vh !important;

    padding:30px 24px !important;

    background:
        linear-gradient(180deg,#090c10 0%,#0b1116 72%,#11151a 100%) !important;

    border:0 !important;
    overflow:hidden !important;
}

header:after{
    content:"";
    position:absolute;
    width:280px !important;
    height:280px !important;
    right:-160px !important;
    top:-130px !important;

    background:
        radial-gradient(
            circle,
            rgba(255,53,168,.35),
            rgba(49,85,255,.12) 45%,
            transparent 70%
        ) !important;
}

.brand{
    display:none !important;
}

.sub{
    display:none !important;
}

/* ORIGINAL MOODSHINE LOGO */

header:before{
    content:"";
    display:block;
    position:relative;
    z-index:2;

    width:220px;
    height:105px;

    margin:0 auto 20px;

    background-image:url('/bilgiq/assets/moodshine-logo.png');
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;

    filter:invert(1);
}

/* POWERED BY */

.bilgiq-powered{
    position:relative;
    z-index:3;

    margin:0 0 30px;
    text-align:center;

    color:#8d9198;
    font-size:9px;
    font-weight:800;
    letter-spacing:1.7px;
    text-transform:uppercase;
}

.bilgiq-powered strong{
    display:block;
    margin-top:5px;

    color:#fff;
    font-family:Arial Black,Impact,sans-serif;
    font-style:italic;
    font-size:23px;
    letter-spacing:-1px;
}

.bilgiq-powered strong span{
    color:#ff35a8;
}

/* SIDEBAR NAV */

nav{
    position:fixed !important;
    left:18px;
    top:205px;
    bottom:auto;
    z-index:110;

    width:234px !important;
    height:auto !important;

    display:flex !important;
    flex-direction:column !important;
    gap:7px !important;

    padding:0 !important;

    background:transparent !important;
    border:0 !important;
}

nav a{
    position:relative;

    width:100%;
    height:47px !important;

    display:flex !important;
    align-items:center !important;

    padding:0 16px !important;

    border-radius:9px;

    color:#e3e5e7 !important;
    font-size:14px !important;
    font-weight:600 !important;

    transition:.15s ease;
}

nav a:hover{
    background:rgba(255,255,255,.07);
    color:#fff !important;
}

nav a.active{
    background:#c8ff00 !important;
    color:#0a0d0f !important;
    font-weight:800 !important;

    box-shadow:
        0 8px 25px rgba(200,255,0,.16);
}

nav a.active:after{
    display:none !important;
}

nav a:nth-child(1):before{
    content:"♫";
}

nav a:nth-child(2):before{
    content:"◇";
}

nav a:nth-child(3):before{
    content:"▤";
}

nav a:nth-child(4):before{
    content:"€";
}

nav a:before{
    width:27px;
    margin-right:8px;

    font-size:20px;
    font-weight:800;
    text-align:center;
}

/* EXTRA SIDEBAR */

.sidebar-extra{
    position:fixed;
    left:18px;
    top:430px;
    z-index:110;

    width:234px;

    padding-top:17px;
    border-top:1px solid rgba(255,255,255,.18);
}

.sidebar-extra a{
    height:44px;

    display:flex;
    align-items:center;

    padding:0 16px;

    border-radius:8px;

    color:#d6d8db;
    text-decoration:none;

    font-size:14px;
    font-weight:550;
}

.sidebar-extra a:hover{
    background:rgba(255,255,255,.07);
    color:#fff;
}

.sidebar-extra .icon{
    width:30px;
    color:#fff;
    font-size:18px;
}

/* WORKSPACE */

.workspace-card{
    position:fixed;
    left:18px;
    bottom:20px;
    z-index:120;

    width:234px;

    display:flex;
    align-items:center;
    gap:11px;

    padding:13px;

    border:1px solid rgba(255,255,255,.18);
    border-radius:11px;

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

    color:#fff;
}

.workspace-avatar{
    width:38px;
    height:38px;

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

    border-radius:50%;

    background:
        linear-gradient(135deg,#3155ff,#753cff);

    color:#fff;
    font-size:12px;
    font-weight:800;
}

.workspace-name{
    font-size:13px;
    font-weight:700;
}

.workspace-sub{
    margin-top:3px;
    color:#8f949b;
    font-size:10px;
}

/* MAIN */

main{
    max-width:none !important;
    width:100% !important;

    margin:0 !important;

    padding:
        48px
        clamp(34px,4vw,70px)
        80px !important;
}

/* TOP BAR */

.bilgiq-topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;

    margin-bottom:34px;
}

.global-search{
    width:min(570px,55vw);
    height:46px;

    display:flex;
    align-items:center;

    padding:0 16px;

    border:1px solid #dedee3;
    border-radius:10px;

    background:#fff;

    box-shadow:0 3px 12px rgba(20,20,30,.03);
}

.global-search span{
    margin-right:10px;
    color:#8a8c95;
}

.global-search input{
    width:100%;
    min-height:0 !important;
    height:auto !important;

    padding:0 !important;

    border:0 !important;
    box-shadow:none !important;

    background:transparent !important;
}

.top-workspace{
    color:#16171c;
    font-size:13px;
    font-weight:750;
}

/* PAGE HEADER */

.page-head{
    position:relative;
    align-items:center !important;
    margin-bottom:30px !important;
}

.page-head > div:first-child:before{
    content:"BILGIQ  /  TOPLINES" !important;
    color:#3155ff !important;
}

h1{
    font-size:58px !important;
}

.intro{
    font-size:17px !important;
}

/* KPI */

.kpi-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:14px;

    margin:0 0 27px;
}

.kpi{
    min-height:88px;

    display:flex;
    align-items:center;
    gap:13px;

    padding:16px;

    border:1px solid rgba(20,20,30,.06);
    border-radius:12px;

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

    box-shadow:
        0 7px 20px rgba(30,30,40,.05);
}

.kpi-icon{
    width:44px;
    height:44px;

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

    flex:0 0 44px;

    border-radius:50%;

    font-size:20px;
    font-weight:900;
}

.kpi:nth-child(1) .kpi-icon{
    color:#3155ff;
    background:#edf0ff;
}

.kpi:nth-child(2) .kpi-icon{
    color:#00ad77;
    background:#e4fbf2;
}

.kpi:nth-child(3) .kpi-icon{
    color:#ff35a8;
    background:#ffebf7;
}

.kpi:nth-child(4) .kpi-icon{
    color:#f2a000;
    background:#fff5d9;
}

.kpi:nth-child(5) .kpi-icon{
    color:#3155ff;
    background:#edf0ff;
}

.kpi-number{
    font-size:23px;
    line-height:1;
    font-weight:850;
}

.kpi-label{
    margin-top:5px;
    color:#7b7d86;
    font-size:11px;
}

/* TABLE CARD */

.card{
    box-shadow:
        0 10px 35px rgba(25,25,35,.055) !important;
}

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

.search input{
    max-width:360px !important;
}

/* MOODSHINE TABLE */

td.title{
    font-size:14px !important;
}

/* RESPONSIVE */

@media(max-width:1000px){

    body{
        padding-left:0 !important;
    }

    header{
        position:relative !important;
        width:100% !important;
        height:130px !important;
    }

    header:before{
        width:180px;
        height:70px;
        margin:0;
    }

    .bilgiq-powered{
        display:none;
    }

    nav{
        position:relative !important;
        left:auto;
        top:auto;

        width:100% !important;

        flex-direction:row !important;

        padding:0 20px !important;

        background:#0b0d10 !important;

        overflow-x:auto;
    }

    nav a{
        width:auto;
        min-width:max-content;
    }

    .sidebar-extra,
    .workspace-card{
        display:none;
    }

    main{
        padding:30px 20px 60px !important;
    }

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