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

:root{

    --bg:#07131f;
    --bg2:#0d2235;
    --card:rgba(18,34,51,.75);

    --border:rgba(255,255,255,.08);

    --text:#ffffff;
    --muted:#9fb5c8;

    --accent:#25d3ff;
    --green:#4ade80;

    --shadow:0 20px 50px rgba(0,0,0,.35);

    --radius:22px;

    font-family:
        "Inter",
        sans-serif;

}

body{

    background:
        linear-gradient(
            135deg,
            #08121c 0%,
            #0b1d2d 45%,
            #123554 100%
        );

    color:var(--text);

    min-height:100vh;

    overflow-x:hidden;

}

.background{

    position:fixed;

    inset:0;

    background:

        radial-gradient(
            circle at top right,
            rgba(37,211,255,.20),
            transparent 35%
        ),

        radial-gradient(
            circle at bottom left,
            rgba(37,211,255,.10),
            transparent 40%
        );

    z-index:-1;

}

.dashboard{

    display:grid;

    grid-template-columns:

        260px
        1fr;

    min-height:100vh;

}
.sidebar{

    background:rgba(8,18,28,.75);

    backdrop-filter:blur(18px);

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

    padding:30px;

    display:flex;

    flex-direction:column;

}

.logo{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:45px;

}

.logo-icon{

    width:60px;

    height:60px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    font-weight:700;

    background:linear-gradient(
        135deg,
        var(--accent),
        #0ea5e9
    );

    color:#fff;

    box-shadow:0 0 35px rgba(37,211,255,.35);

}
.logo-icon img{

    width:44px;

    height:44px;

    display:block;

}
.logo h1{

    font-size:24px;

    font-weight:700;

}

.logo span{

    color:var(--muted);

    font-size:13px;

}

.sidebar nav{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.sidebar nav a{

    display:flex;

    align-items:center;

    gap:14px;

    text-decoration:none;

    color:var(--muted);

    padding:14px 16px;

    border-radius:16px;

    transition:.25s;

    font-size:15px;

}

.sidebar nav a:hover{

    background:rgba(37,211,255,.12);

    color:#fff;

    transform:translateX(5px);

}

.sidebar nav a.active{

    background:linear-gradient(
        90deg,
        rgba(37,211,255,.22),
        rgba(37,211,255,.05)
    );

    color:#fff;

    border:1px solid rgba(37,211,255,.25);

}
.content{

    padding:35px;

    display:flex;

    flex-direction:column;

    gap:30px;

}

.topbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.topbar h2{

    font-size:34px;

    font-weight:700;

    margin-bottom:8px;

}

.topbar p{

    color:var(--muted);

    font-size:16px;

}

.status{

    display:flex;

    align-items:center;

    gap:12px;

    background:var(--card);

    padding:12px 22px;

    border-radius:50px;

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

    backdrop-filter:blur(15px);

    box-shadow:var(--shadow);

}

.online{

    width:12px;

    height:12px;

    border-radius:50%;

    background:var(--green);

    box-shadow:0 0 18px var(--green);

}

.cards{

    display:grid;

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

    gap:22px;

}

.card{

    background:var(--card);

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

    border-radius:var(--radius);

    backdrop-filter:blur(20px);

    padding:28px;

    display:flex;

    align-items:center;

    gap:20px;

    box-shadow:var(--shadow);

    transition:.3s;

}

.card:hover{

    transform:translateY(-6px);

    border-color:rgba(37,211,255,.35);

}

.card-icon{

    width:70px;

    height:70px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

    background:linear-gradient(
        135deg,
        rgba(37,211,255,.18),
        rgba(37,211,255,.05)
    );

}

.card-info h3{

    color:var(--muted);

    font-size:15px;

    margin-bottom:6px;

}

.card-info h1{

    font-size:34px;

    margin-bottom:4px;

}

.card-info span{

    color:var(--muted);

    font-size:14px;

}
.workspace{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:28px;

    align-items:start;

}

.left-column{

    display:flex;

    flex-direction:column;

    gap:28px;

}

.right-column{

    display:flex;

    flex-direction:column;

}

.panel{

    background:var(--card);

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

    border-radius:var(--radius);

    backdrop-filter:blur(18px);

    box-shadow:var(--shadow);

    padding:28px;

}

.panel-header{

    margin-bottom:22px;

}

.panel-header h2{

    font-size:24px;

    margin-bottom:6px;

}

.panel-header span{

    color:var(--muted);

    font-size:14px;

}

textarea{

    width:100%;

    min-height:170px;

    resize:vertical;

    border:none;

    outline:none;

    border-radius:18px;

    padding:20px;

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

    color:#fff;

    font-size:16px;

    margin-bottom:18px;

}

textarea::placeholder{

    color:#8da4b7;

}

button{

    background:linear-gradient(
        135deg,
        var(--accent),
        #0ea5e9
    );

    color:#fff;

    border:none;

    border-radius:16px;

    padding:16px 30px;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

    box-shadow:0 12px 25px rgba(37,211,255,.25);

}

button:hover{

    transform:translateY(-3px);

    box-shadow:0 18px 35px rgba(37,211,255,.35);

}
.nova-card{

    background:var(--card);

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

    border-radius:var(--radius);

    backdrop-filter:blur(20px);

    box-shadow:var(--shadow);

    padding:30px;

    position:sticky;

    top:35px;

}

.nova-avatar{

    width:150px;

    height:150px;

    margin:0 auto 25px;

    border-radius:50%;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:70px;

    background:linear-gradient(
        135deg,
        rgba(37,211,255,.25),
        rgba(14,165,233,.15)
    );

    border:2px solid rgba(37,211,255,.35);

    box-shadow:0 0 45px rgba(37,211,255,.20);

}

.nova-card h2{

    text-align:center;

    font-size:30px;

    margin-bottom:15px;

}

.nova-text{

    color:var(--muted);

    line-height:1.7;

    text-align:center;

    margin-bottom:30px;

}

.idea-box{

    background:rgba(37,211,255,.08);

    border:1px solid rgba(37,211,255,.18);

    border-radius:18px;

    padding:20px;

    margin-bottom:28px;

}

.idea-title{

    font-size:18px;

    font-weight:700;

    margin-bottom:12px;

    color:#ffffff;

}

.idea-box p{

    color:var(--muted);

    line-height:1.7;

}
.nova-status{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.status-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:12px 0;

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

}

.status-row:last-child{

    border-bottom:none;

}

.ok{

    color:var(--green);

    font-weight:600;

}

.activity-list{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.activity{

    display:flex;

    align-items:flex-start;

    gap:16px;

}

.activity-dot{

    width:14px;

    height:14px;

    border-radius:50%;

    background:var(--accent);

    margin-top:7px;

    box-shadow:0 0 12px rgba(37,211,255,.45);

    flex-shrink:0;

}

.activity-content h3{

    font-size:17px;

    margin-bottom:4px;

}

.activity-content p{

    color:var(--muted);

    font-size:13px;

}

.empty{

    color:var(--muted);

    padding:30px 0;

    text-align:center;

}

.footer{

    margin-top:35px;

    padding:22px 30px;

    border-top:1px solid rgba(255,255,255,.08);

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    color:var(--muted);

    font-size:14px;

}

.footer-center{

    text-align:center;

}

.footer-right{

    color:var(--accent);

    font-weight:600;

}
/* ===========================================
   TABLET
=========================================== */

@media (max-width:1200px){

    .workspace{

        grid-template-columns:1fr;

    }

    .nova-card{

        position:relative;

        top:0;

    }

}

/* ===========================================
   HANDY
=========================================== */

@media (max-width:900px){

    .dashboard{

        grid-template-columns:1fr;

    }

    .sidebar{

        width:100%;

        border-right:none;

        border-bottom:1px solid rgba(255,255,255,.08);

        padding:20px;

    }

    .sidebar nav{

        display:grid;

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

        gap:10px;

    }

    .content{

        padding:20px;

    }

    .topbar{

        flex-direction:column;

        align-items:flex-start;

        gap:20px;

    }

    .cards{

        grid-template-columns:1fr;

    }

    .workspace{

        grid-template-columns:1fr;

    }

    .footer{

        flex-direction:column;

        text-align:center;

    }

}

/* ===========================================
   KLEINE SMARTPHONES
=========================================== */

@media (max-width:600px){

    .logo{

        justify-content:center;

        text-align:center;

    }

    .logo-icon{

        width:52px;

        height:52px;

        font-size:22px;

    }

    .topbar h2{

        font-size:26px;

    }

    .card{

        flex-direction:column;

        text-align:center;

    }

    .card-icon{

        width:64px;

        height:64px;

        font-size:28px;

    }

    .nova-avatar{

        width:120px;

        height:120px;

        font-size:54px;

    }

    textarea{

        min-height:140px;

    }

    button{

        width:100%;

    }

}
/* ===========================================
   ANIMATIONEN
=========================================== */

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes pulse{

    0%{

        box-shadow:0 0 8px rgba(74,222,128,.25);

    }

    50%{

        box-shadow:0 0 22px rgba(74,222,128,.60);

    }

    100%{

        box-shadow:0 0 8px rgba(74,222,128,.25);

    }

}

.topbar,
.card,
.panel,
.nova-card,
.footer{

    animation:fadeUp .6s ease forwards;

}

.card:nth-child(2){

    animation-delay:.08s;

}

.card:nth-child(3){

    animation-delay:.16s;

}

.card:nth-child(4){

    animation-delay:.24s;

}

.online{

    animation:pulse 2s infinite;

}

button:active{

    transform:scale(.98);

}

textarea:focus{

    border:1px solid rgba(37,211,255,.45);

    box-shadow:0 0 25px rgba(37,211,255,.20);

}

.idea-box{

    transition:.30s;

}

.idea-box:hover{

    transform:translateY(-4px);

    border-color:rgba(37,211,255,.35);

    box-shadow:0 12px 30px rgba(37,211,255,.15);

}

.nova-avatar{

    transition:.35s;

}

.nova-avatar:hover{

    transform:scale(1.05);

    box-shadow:0 0 60px rgba(37,211,255,.35);

}

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#08121c;

}

::-webkit-scrollbar-thumb{

    background:#1f4f72;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#2b79ab;

}

::selection{

    background:rgba(37,211,255,.35);

    color:#ffffff;

}