Dashboard in glass

<style>
    :root {
        --ink: #3e2155;
        --purple: #672c72;
        --muted: #5b5872;
        --eyebrow: #5b5872;
        --green: #178055;
        --blue: #1f5f9b;
        --amber: #9a6207;
        --red: #b42318;
        --glass: rgba(255, 255, 255, .62);
        --glass-strong: rgba(255, 255, 255, .74);
        --edge: rgba(255, 255, 255, .72);
        --corner: 14px 14px 14px 3px;
        --font: "Satoshi", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    * {
        box-sizing: border-box;
    }

    body {
        margin: 0;
    }

    /* The field. Glass has nothing to do without it: backdrop-filter blurs what
     is behind, and a flat page tint blurs to itself. This is the change that
     makes the treatment possible, and it is a change to the page rather than
     to any card. */
    .app {
        font-family: var(--font);
        color: var(--ink);
        min-height: 100vh;
        position: relative;
        background:
            radial-gradient(46% 52% at 8% 6%, rgba(103, 44, 114, .34), transparent 62%),
            radial-gradient(40% 46% at 88% 12%, rgba(31, 95, 155, .30), transparent 64%),
            radial-gradient(44% 50% at 74% 84%, rgba(23, 128, 85, .26), transparent 66%),
            radial-gradient(36% 42% at 26% 92%, rgba(194, 65, 12, .16), transparent 66%),
            linear-gradient(158deg, #f7f3fc 0%, #ece5f4 100%);
        background-attachment: fixed;
    }

    .glass {
        background: var(--glass);
        -webkit-backdrop-filter: blur(20px) saturate(1.5);
        backdrop-filter: blur(20px) saturate(1.5);
        border: 1px solid var(--edge);
        border-radius: var(--corner);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .9),
            0 12px 28px -16px rgba(62, 33, 85, .40);
    }

    /* ---------- chrome ---------- */
    .strip {
        position: sticky;
        top: 0;
        z-index: 20;
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 10px 20px;
        background: rgba(255, 255, 255, .58);
        -webkit-backdrop-filter: blur(22px) saturate(1.5);
        backdrop-filter: blur(22px) saturate(1.5);
        border-bottom: 1px solid rgba(255, 255, 255, .6);
    }

    .logo {
        font-weight: 800;
        font-size: 17px;
        letter-spacing: -.01em;
    }

    .logo span {
        color: var(--purple);
    }

    .greet {
        font-weight: 700;
        font-size: 14px;
    }

    .pill {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 3px 10px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 700;
        color: #1b5e3f;
        background: rgba(23, 128, 85, .12);
        border: 1px solid rgba(23, 128, 85, .28);
    }

    .pill i {
        width: 7px;
        height: 7px;
        border-radius: 999px;
        background: currentColor;
        display: block;
    }

    .strip .right {
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 13px;
    }

    .btn {
        padding: 8px 16px;
        border-radius: 999px;
        font-weight: 700;
        font-size: 13px;
        background: var(--purple);
        color: #fff;
        border: 0;
    }

    .link-up {
        color: #c2410c;
        font-weight: 700;
    }

    .shell {
        display: grid;
        grid-template-columns: 236px 1fr;
        gap: 18px;
        padding: 18px 20px 40px;
        align-items: start;
    }

    /* ---------- sidebar ---------- */
    .side {
        padding: 12px;
        position: sticky;
        top: 76px;
    }

    .side a {
        display: flex;
        align-items: center;
        gap: 11px;
        padding: 8px 11px;
        border-radius: 9px 9px 9px 2px;
        font-size: 14px;
        color: #4a4560;
        text-decoration: none;
    }

    .side a.on {
        background: rgba(103, 44, 114, .13);
        color: var(--ink);
        font-weight: 700;
    }

    .side .mark {
        width: 16px;
        height: 16px;
        border-radius: 4px;
        background: rgba(103, 44, 114, .28);
        flex: 0 0 auto;
    }

    .side h4 {
        font-size: 10.5px;
        text-transform: uppercase;
        letter-spacing: .09em;
        color: var(--eyebrow);
        margin: 16px 0 6px 11px;
        font-weight: 700;
    }

    /* ---------- content ---------- */
    .main {
        display: grid;
        gap: 16px;
        min-width: 0;
    }

    .sec-title {
        font-size: 16px;
        font-weight: 800;
        margin: 2px 0 0;
    }

    .grid3 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .two {
        display: grid;
        grid-template-columns: 1.55fr 1fr;
        gap: 16px;
        align-items: start;
    }

    .shortcut {
        display: flex;
        align-items: center;
        gap: 11px;
        padding: 11px 13px;
        font-size: 13.5px;
        color: #4a4560;
    }

    .disc {
        width: 26px;
        height: 26px;
        border-radius: 999px;
        display: grid;
        place-items: center;
        flex: 0 0 auto;
    }

    .dot {
        width: 10px;
        height: 10px;
        border-radius: 999px;
    }

    .panel {
        padding: 16px;
    }

    .panel h3 {
        font-size: 15px;
        font-weight: 800;
        margin: 0 0 10px;
    }

    .eyebrow {
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: var(--eyebrow);
        margin: 0 0 4px;
    }

    .muted {
        color: var(--muted);
        font-size: 13.5px;
    }

    .kim {
        display: flex;
        align-items: center;
        gap: 11px;
        padding-bottom: 12px;
        border-bottom: 1px solid rgba(62, 33, 85, .09);
    }

    .kim .av {
        width: 40px;
        height: 40px;
        border-radius: 999px;
        background: radial-gradient(circle at 40% 35%, #8a4a96, #4d1f57);
    }

    .bubble {
        display: inline-block;
        margin: 14px 0 0;
        padding: 10px 14px;
        border-radius: 14px 14px 14px 4px;
        background: rgba(103, 44, 114, .10);
        font-size: 13.5px;
    }

    .ask {
        margin-top: 92px;
        display: flex;
        gap: 10px;
    }

    .ask input {
        flex: 1;
        padding: 11px 14px;
        border-radius: 999px;
        font: inherit;
        font-size: 13.5px;
        border: 1px solid rgba(62, 33, 85, .16);
        background: rgba(255, 255, 255, .6);
    }

    .hero {
        background: linear-gradient(135deg, rgba(103, 44, 114, .94), rgba(125, 63, 168, .9));
        color: #fff;
        border-radius: 12px 12px 12px 3px;
        padding: 13px 15px;
        margin-bottom: 10px;
    }

    .hero .eyebrow {
        color: rgba(255, 255, 255, .82);
        margin-bottom: 2px;
    }

    .hero b {
        font-size: 14.5px;
    }

    .step {
        display: flex;
        align-items: flex-start;
        gap: 11px;
        padding: 9px 2px;
        border-bottom: 1px solid rgba(62, 33, 85, .08);
        font-size: 13.5px;
    }

    .step:last-of-type {
        border-bottom: 0;
    }

    .n {
        width: 21px;
        height: 21px;
        border-radius: 999px;
        background: rgba(103, 44, 114, .13);
        color: var(--purple);
        font-size: 11px;
        font-weight: 800;
        display: grid;
        place-items: center;
        flex: 0 0 auto;
    }

    .ring {
        width: 92px;
        height: 92px;
        border-radius: 999px;
        display: grid;
        place-items: center;
        flex: 0 0 auto;
        background: conic-gradient(var(--amber) 0 62%, rgba(62, 33, 85, .10) 62% 100%);
    }

    .ring span {
        width: 70px;
        height: 70px;
        border-radius: 999px;
        background: rgba(255, 255, 255, .82);
        display: grid;
        place-items: center;
        font-size: 27px;
        font-weight: 800;
    }

    .meter {
        display: flex;
        gap: 2px;
        height: 18px;
        width: 148px;
    }

    .meter i {
        flex: 1;
        font-style: normal;
        font-size: 9px;
        font-weight: 800;
        color: #fff;
        display: grid;
        place-items: center;
        opacity: .18;
    }

    .meter i:first-child {
        border-radius: 4px 0 0 4px;
    }

    .meter i:last-child {
        border-radius: 0 4px 4px 0;
    }

    .meter i.on {
        opacity: 1;
        box-shadow: 0 0 0 2px rgba(62, 33, 85, .5);
        border-radius: 3px;
    }

    .mrow {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 7px 0;
        font-size: 13.5px;
    }

    .proj {
        display: flex;
        gap: 11px;
        padding: 11px;
        align-items: center;
    }

    .thumb {
        width: 54px;
        height: 34px;
        border-radius: 6px 6px 6px 2px;
        background: linear-gradient(135deg, rgba(103, 44, 114, .35), rgba(31, 95, 155, .3));
        flex: 0 0 auto;
    }
</style>
<div class="app">
    <div class="strip">
        <div class="logo">tube<span>spanner</span></div>
        <div class="greet">Good afternoon, TubeSpanner</div>
        <span class="pill"><i></i> Channel connected</span>
        <div class="right">
            <span class="link-up">Upgrade</span>
            <button class="btn">+ Create</button>
        </div>
    </div>

    <div class="shell">
        <aside class="side glass">
            <a class="on" href="#"><span class="mark"></span> Dashboard</a>
            <a href="#"><span class="mark"></span> Plan</a>
            <a href="#"><span class="mark"></span> Produce</a>
            <a href="#"><span class="mark"></span> Promote</a>
            <a href="#"><span class="mark"></span> Extras</a>
            <a href="#"><span class="mark"></span> My account</a>
            <h4>Most used tools</h4>
            <a href="#">Saved bio pages</a>
            <a href="#">Saved scripts</a>
            <a href="#">Content scheduler</a>
        </aside>

        <div class="main">
            <p class="sec-title">Shortcuts</p>
            <div class="grid3">
                <div class="glass shortcut"><span class="disc" style="background:rgba(103,44,114,.16)"><span class="dot" style="background:var(--purple)"></span></span> Video script templates</div>
                <div class="glass shortcut"><span class="disc" style="background:rgba(74,48,181,.16)"><span class="dot" style="background:#4a30b5"></span></span> Project creation</div>
                <div class="glass shortcut"><span class="disc" style="background:rgba(74,48,181,.16)"><span class="dot" style="background:#4a30b5"></span></span> Thumbnail gallery</div>
                <div class="glass shortcut"><span class="disc" style="background:rgba(23,128,85,.16)"><span class="dot" style="background:var(--green)"></span></span> Mailing lists</div>
                <div class="glass shortcut"><span class="disc" style="background:rgba(23,128,85,.16)"><span class="dot" style="background:var(--green)"></span></span> Post to social media</div>
                <div class="glass shortcut"><span class="disc" style="background:rgba(31,95,155,.16)"><span class="dot" style="background:var(--blue)"></span></span> Create a thumbnail</div>
            </div>

            <div class="two">
                <section class="glass panel">
                    <div class="kim">
                        <span class="av"></span>
                        <div><b style="font-size:14.5px">Kim</b>
                            <div class="muted">Your TubeSpanner assistant</div>
                        </div>
                    </div>
                    <div class="bubble">Hi, I'm Kim. Ask me about a title or idea.</div>
                    <div class="ask">
                        <input placeholder="Ask Kim about a title or idea..." />
                        <button class="btn">Send</button>
                    </div>
                </section>

                <section class="glass panel">
                    <h3>Your next steps</h3>
                    <div class="hero">
                        <p class="eyebrow">Do this first</p>
                        <b>Supercharge YouTube Studio</b>
                    </div>
                    <div class="step"><span class="n">2</span> Tell Kim what you're aiming for</div>
                    <div class="step"><span class="n">3</span> Line up your next script</div>
                    <div class="step"><span class="n">4</span> One of your videos could do better</div>
                    <div class="step"><span class="n">5</span> Connect Facebook</div>
                    <p class="muted" style="margin:12px 0 0">Ordered by what moves your channel most.</p>
                </section>
            </div>

            <div class="two">
                <section class="glass panel">
                    <h3>Channel health</h3>
                    <div style="display:flex;gap:16px;align-items:center">
                        <div class="ring"><span>C</span></div>
                        <div>
                            <b style="font-size:14.5px">Retention and Packaging are dragging this down most.</b>
                            <p class="muted" style="margin:6px 0 0">3 of 4 measured.</p>
                        </div>
                    </div>
                    <div style="margin-top:14px">
                        <div class="mrow"><span>Retention</span><span class="meter"><i style="background:var(--red)">F</i><i class="on" style="background:#c2410c">D</i><i style="background:var(--amber)">C</i><i style="background:#4f7a12">B</i><i style="background:#1b7a3e">A</i><i style="background:#12703f">A+</i></span></div>
                        <div class="mrow"><span>Posting schedule</span><span class="meter"><i style="background:var(--red)">F</i><i style="background:#c2410c">D</i><i style="background:var(--amber)">C</i><i class="on" style="background:#4f7a12">B</i><i style="background:#1b7a3e">A</i><i style="background:#12703f">A+</i></span></div>
                        <div class="mrow"><span>Packaging</span><span class="meter"><i style="background:var(--red)">F</i><i style="background:#c2410c">D</i><i class="on" style="background:var(--amber)">C</i><i style="background:#4f7a12">B</i><i style="background:#1b7a3e">A</i><i style="background:#12703f">A+</i></span></div>
                    </div>
                </section>

                <section>
                    <p class="sec-title" style="margin-bottom:10px">My recent projects</p>
                    <div style="display:grid;gap:10px">
                        <div class="glass proj"><span class="thumb"></span>
                            <div><b style="font-size:13.5px">Never Gonna Give You Up</b>
                                <div class="muted" style="font-size:12.5px">8th April 2026</div>
                            </div>
                        </div>
                        <div class="glass proj"><span class="thumb"></span>
                            <div><b style="font-size:13.5px">Channel trailer v2</b>
                                <div class="muted" style="font-size:12.5px">2nd April 2026</div>
                            </div>
                        </div>
                        <div class="glass proj"><span class="thumb"></span>
                            <div><b style="font-size:13.5px">Thumbnail A/B test</b>
                                <div class="muted" style="font-size:12.5px">28th March 2026</div>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </div>
</div>