:root{
      --bg:#0b0f14; --card:#121821; --muted:#9fb0c3; --accent:#4f9ef7; --good:#20c997; --bad:#ff6b6b; --warn:#ffd166;
    }
    *{
        box-sizing:border-box;
    }
    body{
        margin:0;
        padding:0;
        font-family:system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
        background:rgb(14,14,84);
        color:#e7eef7;
    }
    header{
        padding:24px 20px;
        display:flex;
        align-items:center;
        gap:16px;
        flex-wrap:wrap;
    }
    .logo{
        display:flex;
        align-items:center;
        gap:10px;
        font-weight:700;
    }
    .logo .dot{
        width:14px;
        height:14px;
        border-radius:50%;
        background:var(--accent);
        box-shadow:0 0 18px var(--accent);
    }
    .container{
        display:grid;
        grid-template-columns: 380px 1fr;
        gap:18px;
        padding:0 18px 24px;
    }
    @media (max-width: 980px){
        .container
        {
            grid-template-columns:1fr;
        }}
    .panel{
        background:var(--card);
        border:1px solid rgba(255,255,255,.06);
        border-radius:18px;
        box-shadow:0 10px 30px rgba(0,0,0,.25);
    }
    .left{
        padding:16px;
    }
    .controls{
        display:flex;
        flex-wrap:wrap;
        gap:10px;
        margin:6px 0 10px;
    }
    button, select{
        background:#0f1420;
        border:1px solid rgba(255,255,255,.12);
        padding:10px 12px;
        border-radius:12px;
        color:#e7eef7;
        cursor:pointer;
    }
    button.primary{
        background:var(--accent);
        border:none;
        color:#06121f;
        font-weight:700;
    }
    button.secondary{
        background:#111827;
    }
    button:disabled{
        opacity:.5;
        cursor:not-allowed;
    }
    .hint{
        color:var(--muted);
        font-size:.9rem;
    }
    .video-wrap{
        position:relative;
        border-radius:16px;
        overflow:hidden;
        margin-top:10px;
    }
    video{
        width:100%;
        display:block;
        background:#000;
        border-radius:16px;
    }
    canvas{
        position:absolute;
        left:0;
        top:0;
    }
    .status{
        display:flex;
        align-items:center;
        justify-content:space-between;
        margin-top:10px;
        font-size:.95rem;
    }
    .status b{
        color:#fff;
    }
    .chip{
        display:inline-flex;
        align-items:center;
        gap:6px;
        padding:6px 10px;
        border-radius:999px;
        background:rgba(255,255,255,.06);
        border:1px solid rgba(255,255,255,.08);
    }
    .legend{
        display:flex;
        flex-wrap:wrap;
        gap:8px;
        margin-top:8px;
    }
    .legend .bar{
        height:8px;
        border-radius:8px;
        background:rgba(255,255,255,.08);
        overflow:hidden;
    }
    .legend .fill{
        height:8px;
        background:var(--accent);
    }

    .right{
        padding:18px;
    }
    .books{
        display:grid;
        grid-template-columns:repeat(3,1fr);
        gap:12px;
    }
    @media (max-width: 840px){
        .books{
            grid-template-columns:repeat(2,1fr);
        }}
    @media (max-width: 560px){
        .books{grid-template-columns:1fr;
        }}
    .book{
        background:#0e1522;
        border:1px solid rgba(255,255,255,.07);
        border-radius:14px;
        padding:12px;
        display:flex;
        gap:12px;
    }
    .cover{
        width:56px;
        height:80px;
        border-radius:8px;
        background:#0b0f14;
        flex:0 0 auto;
        display:grid;
        place-items:center;
        border:1px solid rgba(255,255,255,.07);
        font-weight:700;
    }
    .meta{
        display:flex;
        flex-direction:column;
        gap:4px;
    }
    .title{
        font-weight:700;
    }
    .author{
        color:var(--muted);
        font-size:.92rem;
    }
    .tag{
        display:inline-block;
        margin-top:2px;
        padding:2px 8px;
        border-radius:999px;
        font-size:.78rem;
        border:1px solid rgba(255,255,255,.12);
        color:#9cc4ff;
    }
    .empty{
        padding:24px;
        border:1px dashed rgba(255,255,255,.2);
        border-radius:12px;
        text-align:center;
        color:var(--muted);
    }
    footer{
        padding:10px 18px 30px;
        color:var(--muted);
        font-size:.9rem;
    }
    a{
        color:#9cc4ff;
    }