:root {

            --accent: #00ffff;

            --bg: #050505;

            --card: #111;

            --muted: #9aa0a6;

            --border: #202124;

            --ok: #7CFC00;

            --warn: #FFD700

        }



        * {

            box-sizing: border-box

        }



        body {

            margin: 0;

            background: var(--bg);

            color: #fff;

            font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial

        }



        .appbar {

            position: sticky;

            top: 0;

            z-index: 10;

            background: rgba(5, 5, 5, .9);

            backdrop-filter: saturate(140%) blur(8px);

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

        }



        .wrap {

            max-width: 780px;

            margin: 0 auto;

            padding: 12px 16px

        }



        .title {

            display: flex;

            align-items: center;

            gap: 10px

        }



        .dot {

            width: 10px;

            height: 10px;

            border-radius: 50%;

            background: var(--accent);

            box-shadow: 0 0 16px var(--accent)

        }



        h1 {

            margin: 0;

            font-size: 20px;

            color: var(--accent);

            letter-spacing: .2px

        }



        .controls {

            display: flex;

            flex-wrap: wrap;

            gap: 8px;

            margin-top: 10px

        }



        .seg {

            display: inline-flex;

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

            border-radius: 999px;

            overflow: hidden;

            background: #0b0b0b

        }



        .seg button {

            border: 0;

            background: transparent;

            color: var(--muted);

            padding: 8px 14px;

            font: 600 13px/1 system-ui;

            cursor: pointer;

            transition: color .15s, background .15s

        }



        .seg button.active {

            background: var(--accent);

            color: #000

        }



        .refresh {

            margin-left: auto;

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

            background: #0b0b0b;

            color: #fff;

            padding: 8px 12px;

            border-radius: 10px;

            cursor: pointer

        }



        .refresh:hover {

            border-color: var(--accent)

        }



        /* NEW: search */

        .search {

            flex: 1 1 200px;

            min-width: 160px;

            display: flex;

            align-items: center;

            gap: 8px

        }



        .search input {

            width: 100%;

            padding: 8px 12px;

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

            border-radius: 10px;

            background: #0b0b0b;

            color: #fff

        }



        .list {

            max-width: 780px;

            margin: 12px auto 64px;

            padding: 0 16px;

            display: grid;

            gap: 12px

        }



        .card {

            background: var(--card);

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

            border-radius: 14px;

            padding: 12px 14px;

            box-shadow: 0 6px 16px rgba(0, 255, 255, .06);

            transition: transform .12s, border-color .12s;

            cursor: pointer

        }



        .card:hover {

            transform: translateY(-1px);

            border-color: rgba(0, 255, 255, .35)

        }



        .row {

            display: flex;

            align-items: center;

            justify-content: space-between;

            gap: 10px

        }



        .episode {

            display: flex;

            align-items: center;

            gap: 8px;

            font-weight: 700;

            color: var(--accent);

            font-size: 14px

        }



        .episode img {

            width: 18px;

            height: 12px;

            object-fit: cover;

            border-radius: 2px;

            box-shadow: 0 0 0 1px #0005

        }



        .date {

            color: var(--muted);

            font-size: 13px

        }



        .titleTxt {

            display: block;

            margin-top: 6px;

            font-size: 15px;

            line-height: 1.25;

            color: #fff;

            text-decoration: none

        }



        .titleTxt.finished {

            color: var(--warn)

        }



        .titleTxt.soon_finished {

            color: var(--ok)

        }



        .skeleton {

            display: grid;

            gap: 12px

        }



        .sk {

            height: 72px;

            border-radius: 14px;

            background: linear-gradient(90deg, #0f0f0f 25%, #161616 37%, #0f0f0f 63%);

            background-size: 400% 100%;

            animation: shimmer 1.1s infinite

        }



        @keyframes shimmer {

            0% {

                background-position: 100% 0

            }



            100% {

                background-position: -100% 0

            }

        }



        .empty {

            color: var(--muted);

            text-align: center;

            padding: 24px 8px;

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

            border-radius: 14px

        }



        /* Overlay */

        #firstTime {

            position: fixed;

            inset: 0;

            display: flex;

            align-items: center;

            justify-content: center;

            background: rgba(0, 0, 0, .55);

            backdrop-filter: blur(8px) saturate(120%);

            z-index: 9999;

            animation: fadeIn .18s ease-out

        }



        @keyframes fadeIn {

            from {

                opacity: 0

            }



            to {

                opacity: 1

            }

        }



        #firstTime .ft-card {

            width: min(680px, 92vw);

            padding: 22px 18px;

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

            border-radius: 18px;

            background: #0b0b0b;

            box-shadow: 0 12px 32px rgba(0, 255, 255, .08)

        }



        #firstTime .ft-head {

            display: flex;

            align-items: center;

            gap: 10px;

            margin: 0 0 10px 0

        }



        #firstTime .ft-dot {

            width: 12px;

            height: 12px;

            border-radius: 50%;

            background: var(--accent);

            box-shadow: 0 0 16px var(--accent)

        }



        #firstTime h2 {

            margin: 0;

            font-size: 20px;

            color: var(--accent);

            letter-spacing: .2px

        }



        #firstTime .ft-text {

            color: #cfcfcf;

            font-size: 14px;

            line-height: 1.45;

            margin: 6px 0 14px

        }



        #firstTime .ft-legend {

            display: grid;

            gap: 10px;

            margin: 10px 0 14px

        }



        #firstTime .ft-row {

            display: flex;

            align-items: center;

            gap: 10px

        }



        #firstTime .ft-badge {

            min-width: 110px;

            padding: 6px 10px;

            border-radius: 999px;

            font-weight: 700;

            font-size: 13px;

            background: #111;

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

            text-align: center

        }



        #firstTime .ok {

            color: var(--ok);

            border-color: rgba(124, 252, 0, .35)

        }



        #firstTime .warn {

            color: var(--warn);

            border-color: rgba(255, 215, 0, .35)

        }



        #firstTime .ft-new {

            display: inline-flex;

            align-items: center;

            gap: 6px;

            font-size: 14px;

            color: #fff;

            background: #111;

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

            border-radius: 10px;

            padding: 6px 10px

        }



        #firstTime .ft-new .dot {

            width: 8px;

            height: 8px;

            border-radius: 50%;

            background: var(--accent);

            box-shadow: 0 0 10px var(--accent)

        }



        #firstTime .ft-actions {

            display: flex;

            justify-content: flex-end;

            gap: 10px;

            margin-top: 14px

        }



        #firsttime_btn {

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

            background: var(--accent);

            color: #000;

            padding: 10px 14px;

            border-radius: 12px;

            font-weight: 700;

            cursor: pointer;

            transition: transform .08s ease, box-shadow .12s ease

        }



        #firsttime_btn:active {

            transform: translateY(1px)

        }

    .footer{border-top:1px solid var(--border);padding:16px;background:#0b0b0b;text-align:center}

    .footer a{color:var(--accent);text-decoration:none;margin:0 8px}

    .footer a:hover{text-decoration:underline}

    .footer .muted{font-size:12px;color:var(--muted);margin-top:8px}

.footer { min-height: 80px; }