:root { color-scheme: dark; --bg:#030407; --panel:#0d0d15; --panel2:#141020; --line:#252235; --line2:#372556; --text:#fbf7ff; --muted:#aaa4b8; --soft:#d8d0e8; --purple:#8f2cff; --purple2:#b343ff; --green:#37d07b; --amber:#ffb02e; }
    * { box-sizing: border-box; }
    body { margin:0; min-height:100vh; background:radial-gradient(circle at 68% -10%, #241039 0, transparent 32%), radial-gradient(circle at 0 100%, #0e1a25 0, transparent 28%), var(--bg); color:var(--text); font-family: Inter, Segoe UI, Arial, sans-serif; letter-spacing:0; overflow-x:hidden; }
    button, input { font:inherit; }
    .app { display:grid; grid-template-columns:244px minmax(0,1fr) 356px; min-height:100vh; }
    .left { border-right:1px solid var(--line); padding:24px 18px; background:linear-gradient(180deg,#090913,#05060b); position:sticky; top:0; height:100vh; overflow:auto; }
    .brand { display:flex; align-items:center; margin-bottom:28px; }
    .brand img { width:160px; max-width:100%; height:auto; display:block; }
    .nav, .genres { display:grid; gap:6px; }
    .nav button { width:100%; min-height:42px; display:flex; align-items:center; gap:12px; border:1px solid transparent; border-radius:8px; background:transparent; color:#d9d3e5; text-align:left; padding:0 12px; font-weight:780; cursor:pointer; }
    .nav button.active { color:white; border-color:#582390; background:linear-gradient(90deg,#351158,#191123); box-shadow:inset 3px 0 0 #a347ff; }
    .nav button:hover { color:white; background:#120d1d; }
    .nav .ico { width:18px; text-align:center; opacity:.95; }
    .divider { height:1px; background:var(--line); margin:20px 0 14px; }
    .side-title { margin:0 0 10px; color:#8e879e; font-size:12px; font-weight:850; text-transform:uppercase; }
    .genre { color:#d8d2e1; text-decoration:none; line-height:1.72; font-size:14px; }
    .tv-card { margin-top:28px; border:1px solid var(--line2); border-radius:8px; padding:16px; background:linear-gradient(140deg,#171225,#21113a); box-shadow:0 16px 44px rgba(0,0,0,.22); }
    .tv-card h3 { margin:0 0 8px; font-size:15px; }
    .tv-card p { margin:0 0 14px; color:var(--muted); font-size:13px; line-height:1.45; }
    .tv-card button, .primary { border:0; border-radius:8px; color:white; background:linear-gradient(135deg,var(--purple),var(--purple2)); font-weight:850; padding:10px 14px; cursor:pointer; box-shadow:0 12px 30px rgba(143,44,255,.35); }
    .content { min-width:0; padding:18px 24px 40px; }
    .topbar { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:14px; }
    .search-wrap { width:min(610px,54vw); height:44px; display:flex; align-items:center; gap:12px; border:1px solid var(--line); border-radius:8px; background:rgba(12,13,20,.82); padding:0 12px; margin:0 auto; }
    .search-wrap input { flex:1; border:0; outline:0; background:transparent; color:white; min-width:0; }
    .shortcut { color:#bdb5ca; border:1px solid #343044; border-radius:6px; padding:3px 6px; font-size:12px; }
    .account-top { position:relative; display:flex; align-items:center; gap:14px; min-width:max-content; }
    .account-trigger { border:0; background:transparent; color:inherit; display:flex; align-items:center; gap:14px; padding:0; cursor:pointer; text-align:left; }
    .account-panel { position:absolute; right:0; top:48px; width:230px; border:1px solid var(--line); border-radius:8px; background:#101018; box-shadow:0 22px 60px rgba(0,0,0,.48); padding:10px; z-index:20; display:none; }
    .account-panel.open { display:grid; gap:8px; }
    .account-panel a, .account-panel button { width:100%; border:1px solid var(--line); border-radius:8px; background:#16131f; color:white; padding:10px 12px; text-decoration:none; font-weight:850; cursor:pointer; text-align:left; }
    .account-panel a:hover, .account-panel button:hover { border-color:#7540b0; background:#211233; }
    .bell { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; border:1px solid transparent; }
    .avatar { width:38px; height:38px; display:grid; place-items:center; border-radius:50%; background:linear-gradient(135deg,#351458,#7a2ae8); font-weight:900; }
    .signed { display:grid; gap:2px; font-size:12px; color:#a9a2b5; }
    .signed strong { color:white; font-size:13px; }
    .hero { position:relative; min-height:344px; border:1px solid var(--line); border-radius:8px; overflow:hidden; display:flex; align-items:flex-end; padding:42px 48px; background:linear-gradient(90deg,rgba(7,7,13,.95) 0%,rgba(20,8,34,.86) 38%,rgba(6,6,11,.18) 100%), radial-gradient(circle at 70% 28%,rgba(166,75,255,.72) 0 8%, transparent 9%), linear-gradient(145deg,#12081f,#321157 48%,#090812); }
    .hero.series-hero { min-height:264px; padding:30px 48px; }
    .hero:before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 63% 22%,rgba(229,186,255,.22),transparent 18%), linear-gradient(155deg,transparent 45%,rgba(2,2,7,.78) 80%), repeating-linear-gradient(88deg,transparent 0 70px,rgba(255,255,255,.025) 72px 73px); opacity:.95; }
    .hero-art { position:absolute; right:0; bottom:0; width:55%; height:100%; background:radial-gradient(circle at 46% 28%,#d9c1ff 0 2%,transparent 3%), linear-gradient(180deg,transparent 0 44%,rgba(4,4,9,.94) 100%); clip-path:polygon(10% 0,100% 0,100% 100%,0 100%); opacity:.88; }
    .hero-art:after { content:""; position:absolute; right:8%; bottom:0; width:54%; height:72%; background:linear-gradient(160deg,transparent 0 35%,#0e0716 36% 100%); border-radius:48% 48% 0 0; filter:drop-shadow(-20px -14px 35px rgba(177,94,255,.34)); }
    .hero-copy { position:relative; z-index:1; max-width:660px; }
    .exclusive { display:inline-flex; gap:5px; align-items:center; margin-bottom:22px; padding:5px 9px; border-radius:5px; background:rgba(118,39,205,.45); color:white; font-size:12px; font-weight:900; }
    .hero h1 { margin:0 0 14px; max-width:560px; font-family:Georgia, 'Times New Roman', serif; font-size:57px; line-height:.88; letter-spacing:.12em; font-weight:500; text-transform:uppercase; }
    .hero.series-hero h1 { font-size:48px; margin-bottom:10px; }
    .meta { display:flex; align-items:center; gap:10px; flex-wrap:wrap; color:#f0eaf7; font-size:14px; margin-bottom:13px; }
    .badge { display:inline-flex; align-items:center; border-radius:5px; background:#46206e; color:#e8d6ff; padding:3px 7px; font-weight:850; }
    .hero p { margin:0 0 22px; color:#ddd5e8; font-size:16px; line-height:1.45; max-width:560px; }
    .hero.series-hero p { margin-bottom:18px; max-width:620px; }
    .hero-actions { display:flex; gap:10px; }
    .secondary { border:1px solid #4a4558; border-radius:8px; color:white; background:rgba(18,18,25,.7); font-weight:850; padding:10px 15px; cursor:pointer; }
    .dots { position:absolute; right:44px; bottom:28px; display:flex; gap:9px; z-index:2; }
    .dot { width:10px; height:10px; border-radius:50%; background:#77717f; opacity:.75; }
    .dot.active { background:var(--purple); opacity:1; box-shadow:0 0 14px rgba(143,44,255,.85); }
    .row { margin-top:22px; }
    .row.series-detail { margin-top:18px; }
    .row-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
    .row h2 { margin:0; font-size:18px; }
    .see { color:#c852ff; font-weight:850; font-size:13px; text-decoration:none; }
    .rail { display:grid; grid-auto-flow:column; grid-auto-columns:180px; gap:12px; overflow:hidden; position:relative; }
    .rail.wide { grid-auto-columns:244px; }
    .continue-card { height:148px; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:#15131c; position:relative; }
    .continue-card button { width:100%; height:100%; border:0; background:transparent; color:inherit; padding:0; cursor:pointer; text-align:left; display:block; }
    .thumb { position:absolute; inset:0; background:linear-gradient(135deg,#342255,#12121a); background-size:cover; background-position:center; }
    .thumb:after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.88)); }
    .continue-card .info { position:absolute; left:12px; right:12px; bottom:10px; z-index:1; }
    .continue-card strong, .poster-card strong, .list-card strong { display:block; color:white; font-size:14px; line-height:1.2; }
    .continue-card span, .poster-card span, .list-card span { color:#c8c0d4; font-size:12px; }
    .progress { height:4px; background:#3c3745; border-radius:99px; margin-top:10px; overflow:hidden; }
    .progress i { display:block; height:100%; background:linear-gradient(90deg,var(--purple),var(--purple2)); border-radius:99px; }
    .poster-rail { display:grid; grid-auto-flow:column; grid-auto-columns:112px; gap:12px; overflow:hidden; }
    .row[hidden], .see[hidden] { display:none; }
    .row.expanded .poster-rail { grid-auto-flow:row; grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); grid-auto-columns:unset; overflow:visible; align-items:start; }
    .poster-card { min-width:0; }
    .poster { height:156px; border:1px solid var(--line); border-radius:8px; background:#15121d center/cover; box-shadow:0 12px 24px rgba(0,0,0,.28); overflow:hidden; }
    .poster-card button { width:100%; border:0; background:transparent; color:inherit; padding:0; cursor:pointer; text-align:left; }
    .poster-card strong { display:block; margin-top:7px; font-size:12px; line-height:1.25; min-height:30px; }
    .poster-card span { display:block; text-align:center; margin-top:7px; }
    .poster.locked { position:relative; filter:saturate(.75); }
    .poster.locked:after { content:"Not available"; position:absolute; left:8px; right:8px; bottom:8px; padding:5px 6px; border-radius:6px; background:rgba(0,0,0,.72); color:#eadcff; font-size:11px; font-weight:900; text-align:center; }
    .poster.empty { display:grid; place-items:center; color:#d9c8ef; font-weight:900; text-align:center; padding:10px; }
    .row.series-detail .poster-rail { display:block; overflow:visible; }
    .episode-list { display:block; overflow:visible; }
    .season-tabs { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 12px; }
    .season-tabs button { border:1px solid var(--line); border-radius:999px; background:#12111a; color:#ddd5e8; padding:8px 13px; cursor:pointer; font-weight:850; }
    .season-tabs button.active { border-color:#8f2cff; background:linear-gradient(135deg,#351158,#211034); color:white; box-shadow:0 8px 22px rgba(143,44,255,.22); }
    .season-block { border:1px solid var(--line); border-radius:10px; background:rgba(12,12,18,.72); overflow:hidden; margin-bottom:16px; }
    .season-block[hidden] { display:none; }
    .season-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; border-bottom:1px solid var(--line); background:linear-gradient(90deg,rgba(47,23,76,.68),rgba(12,12,18,.25)); }
    .season-head h3 { margin:0; font-size:17px; }
    .season-head span { color:var(--muted); font-size:13px; font-weight:800; }
    .episode-row { display:grid; grid-template-columns:180px minmax(0,1fr) auto; gap:16px; align-items:center; padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.07); transition:background .16s ease, box-shadow .16s ease; }
    .episode-row:hover { background:rgba(255,255,255,.035); box-shadow:inset 3px 0 0 rgba(143,44,255,.72); }
    .episode-row:last-child { border-bottom:0; }
    .episode-thumb { position:relative; width:180px; aspect-ratio:16/9; border:1px solid var(--line); border-radius:8px; background:#15121d center/cover; cursor:pointer; overflow:hidden; }
    .episode-thumb:before { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.52)); }
    .episode-thumb span { position:absolute; left:10px; bottom:10px; width:26px; height:26px; display:grid; place-items:center; border-radius:50%; background:rgba(8,8,14,.72); border:1px solid rgba(255,255,255,.32); color:white; font-size:11px; opacity:.78; transition:opacity .16s ease, background .16s ease, transform .16s ease; }
    .episode-thumb:hover span, .episode-thumb:focus-visible span { opacity:1; background:rgba(143,44,255,.82); transform:scale(1.05); }
    .episode-body { min-width:0; border:0; background:transparent; color:inherit; padding:0; text-align:left; cursor:pointer; }
    .episode-body:focus-visible, .episode-thumb:focus-visible, .episode-play:focus-visible { outline:2px solid #b343ff; outline-offset:3px; }
    .episode-kicker { color:#d8c7ef; font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.04em; margin-bottom:5px; }
    .episode-body h4 { margin:0 0 6px; font-size:17px; color:white; transition:color .16s ease; }
    .episode-row:hover .episode-body h4 { color:#e4c8ff; }
    .episode-body p { margin:0; color:#cfc8da; font-size:14px; line-height:1.45; max-width:760px; }
    .episode-play { min-width:92px; }
    .bottom-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:22px; align-items:start; }
    .empty-shelf { border:1px solid var(--line); border-radius:8px; min-height:118px; display:grid; place-items:center; padding:20px; color:var(--muted); background:rgba(12,12,18,.58); text-align:center; }
    .my-list { display:grid; grid-template-columns:repeat(5,minmax(82px,1fr)); gap:10px; }
    .list-card .poster { height:142px; position:relative; }
    .list-card .poster:after { content:"â–¶"; position:absolute; left:50%; top:50%; translate:-50% -50%; width:32px; height:32px; display:grid; place-items:center; border-radius:50%; background:rgba(0,0,0,.42); }
    .player { margin-top:18px; display:none; border:1px solid var(--line); border-radius:8px; background:#08080c; overflow:hidden; }
    .player.visible { display:block; }
    video { width:100%; max-height:68vh; display:block; background:#000; }
    .player-meta { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 14px; }
    .player-title { font-weight:850; }
    .notice { color:#d4b8ff; font-size:13px; }
    .right { border-left:1px solid var(--line); padding:20px 18px; background:linear-gradient(180deg,#080910,#0d0b14); position:sticky; top:0; height:100vh; overflow:auto; }
    .side-card { border:1px solid var(--line); border-radius:8px; background:linear-gradient(180deg,rgba(20,19,30,.96),rgba(12,12,18,.98)); padding:18px; margin-bottom:14px; box-shadow:0 18px 50px rgba(0,0,0,.25); }
    .membership-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
    .membership-title { display:flex; gap:10px; align-items:center; }
    .small-mark { width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:#331058; color:#c850ff; font-weight:1000; }
    .tag { border-radius:5px; padding:4px 7px; background:#3e1a65; color:#d6b4ff; font-size:11px; font-weight:900; }
    .active { color:#54e18d; background:rgba(29,119,65,.26); }
    .inactive { color:#ffca6b; background:rgba(144,91,18,.24); }
    .metric { display:flex; justify-content:space-between; align-items:center; margin-top:16px; color:#d8d3e2; font-size:14px; }
    .metric b { font-weight:700; color:white; }
    .wide-button { width:100%; margin-top:18px; }
    .credit-box { position:relative; border:1px solid var(--line2); border-radius:8px; padding:18px; background:radial-gradient(circle at 86% 45%,rgba(147,40,255,.38),transparent 28%),#12111a; margin:12px 0; overflow:hidden; }
    .credits { font-size:34px; line-height:1; font-weight:950; }
    .ticket { position:absolute; right:22px; top:22px; width:70px; height:70px; border-radius:50%; display:grid; place-items:center; background:radial-gradient(circle,#922bff,#35125b 62%,transparent 64%); box-shadow:0 0 30px rgba(151,52,255,.72); }
    .request-row { display:grid; grid-template-columns:48px 1fr auto; gap:10px; align-items:center; padding:9px 0; border-top:1px solid var(--line); }
    .mini { width:48px; height:30px; border-radius:5px; background:#20182d center/cover; }
    .status { font-size:12px; font-weight:800; }
    .status.done { color:#53e58c; }
    .status.work { color:var(--amber); }
    .status.queue { color:#c24fff; }
    .signin-card img { width:132px; height:auto; display:block; margin-bottom:14px; }
    .benefit { border-top:1px solid var(--line); padding:12px 0; }
    .benefit strong { display:block; margin-bottom:4px; }
    .benefit span { color:var(--muted); font-size:13px; line-height:1.4; }
    .allowance { border:1px solid var(--line2); border-radius:8px; padding:14px; background:#12111a; margin-top:12px; }
    .allowance b { display:block; font-size:26px; margin-top:4px; }
    .modal-backdrop { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:28px; background:rgba(0,0,0,.72); backdrop-filter:blur(8px); }
    .modal-backdrop[hidden] { display:none; }
    .join-modal { position:relative; width:min(980px,96vw); max-height:90vh; overflow:auto; border:1px solid var(--line2); border-radius:12px; padding:26px; background:linear-gradient(180deg,#11101a,#080810); box-shadow:0 0 70px rgba(143,44,255,.24); }
    .join-modal h2 { margin:0 0 8px; font-size:34px; }
    .join-modal p, .join-modal li { color:var(--muted); line-height:1.45; }
    .modal-close { position:absolute; right:18px; top:16px; border:0; background:transparent; color:white; font-size:28px; cursor:pointer; }
    .join-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:18px; }
    .join-panel { border:1px solid var(--line); border-radius:8px; padding:16px; background:rgba(16,15,24,.9); }
    .payment-panel { grid-column:span 2; }
    .payment-panel input { width:100%; border:1px solid var(--line); border-radius:8px; background:#15131e; color:white; padding:12px; margin-top:10px; }
    .payment-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
    .terms { display:flex; gap:8px; align-items:center; color:var(--muted); margin-top:12px; }
    .modal-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:16px; }
    .price { display:block; font-size:26px; margin:8px 0 12px; }
    .request-modal { width:min(1120px,96vw); }
    .request-search { display:flex; gap:10px; margin:18px 0; }
    .request-search input { flex:1; border:1px solid var(--line); border-radius:8px; background:#15131e; color:white; padding:12px 14px; outline:0; }
    .request-results { display:grid; grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); gap:14px; min-height:220px; }
    .request-card { border:1px solid var(--line); border-radius:8px; background:#111019; overflow:hidden; display:grid; grid-template-rows:210px auto; }
    .request-card-poster { background:#191322 center/cover; display:grid; place-items:center; padding:10px; color:#decaff; font-weight:950; text-align:center; }
    .request-card-body { padding:12px; display:grid; gap:8px; }
    .request-card h3 { margin:0; font-size:14px; line-height:1.25; }
    .request-card p { margin:0; color:var(--muted); font-size:12px; line-height:1.35; max-height:50px; overflow:hidden; }
    .request-meta { display:flex; justify-content:space-between; gap:8px; color:#d8d1e4; font-size:12px; }
    .request-card button { width:100%; margin-top:2px; }
    .request-card button[disabled] { cursor:not-allowed; opacity:.55; box-shadow:none; }
    .request-message { color:#d8c5ff; font-size:13px; margin:0 0 12px; min-height:18px; }
    .credit-inline { color:#d8d1e4; font-size:13px; margin-top:8px; }
    .recent-empty { color:var(--muted); font-size:13px; line-height:1.45; margin-top:10px; }
    @media (max-width:700px) { .app { grid-template-columns:1fr; } .left { position:relative; height:auto; } .right { display:none; } .content { padding:16px; } .search-wrap { width:100%; } .topbar { align-items:stretch; flex-direction:column; } .hero { min-height:300px; padding:28px; } .hero h1 { font-size:39px; } .bottom-grid { grid-template-columns:1fr; } .rail.wide { grid-auto-columns:210px; } }

    @media (max-width:1100px) {
      html, body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
      }
      body { min-width: 0; }
      .app {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
        max-width: 100%;
        min-height: 100vh;
      }
      .left, .right {
        position: relative;
        top: auto;
        width: auto;
        height: auto;
        min-height: 0;
        overflow: visible;
      }
      .left {
        padding: 18px 14px;
        border-right: 0;
        border-bottom: 1px solid var(--line);
      }
      .brand {
        margin-bottom: 16px;
      }
      .brand img {
        width: 148px;
      }
      .nav {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
      }
      .nav button {
        flex: 0 0 auto;
        width: auto;
        min-height: 40px;
        white-space: nowrap;
      }
      .divider, .genres, .side-title, .tv-card {
        display: none;
      }
      .content {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding: 14px 12px 24px;
      }
      .topbar {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
      }
      .search-wrap {
        order: 1;
        width: 100%;
        height: 46px;
        margin: 0;
      }
      .search-wrap input {
        font-size: 16px;
      }
      .account-top {
        order: 0;
        justify-content: flex-end;
        min-width: 0;
      }
      .account-trigger {
        max-width: 100%;
      }
      .signed {
        min-width: 0;
      }
      .signed strong {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 170px;
      }
      .account-panel {
        right: 0;
        width: min(260px, calc(100vw - 24px));
      }
      .hero {
        min-height: 330px;
        padding: 26px 18px;
        align-items: flex-end;
      }
      .hero h1 {
        font-size: clamp(34px, 12vw, 46px);
        line-height: .92;
      }
      .hero p {
        font-size: 14px;
      }
      .hero-art {
        width: 100%;
        opacity: .46;
      }
      .hero-actions {
        flex-wrap: wrap;
      }
      .hero-actions button {
        min-height: 42px;
      }
      .dots {
        right: 18px;
        bottom: 18px;
      }
      .row {
        margin-top: 20px;
      }
      .rail, .rail.wide, .poster-rail {
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
      }
      .rail {
        grid-auto-columns: 230px;
      }
      .rail.wide {
        grid-auto-columns: 230px;
      }
      .poster-rail {
        grid-auto-columns: 118px;
      }
      .continue-card {
        height: 138px;
      }
      .poster {
        height: 164px;
      }
      .my-list {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 112px;
        grid-template-columns: none;
        overflow-x: auto;
        gap: 12px;
        padding-bottom: 8px;
      }
      .player-meta {
        align-items: flex-start;
        flex-direction: column;
      }
      video {
        max-height: 62vh;
      }
      .right {
        display: block;
        padding: 14px 12px 28px;
        border-left: 0;
        border-top: 1px solid var(--line);
        background: linear-gradient(180deg,#080910,#0d0b14);
      }
      .side-card {
        padding: 16px;
      }
      .metric {
        gap: 12px;
      }
      .join-modal {
        width: min(100%, calc(100vw - 24px));
        max-height: calc(100vh - 24px);
        padding: 20px;
      }
      .join-grid, .payment-grid {
        grid-template-columns: 1fr;
      }
      .payment-panel {
        grid-column: auto;
      }
      .modal-actions {
        flex-direction: column-reverse;
      }
      .modal-actions button {
        width: 100%;
      }
      .request-search {
        flex-direction: column;
      }
      .request-results {
        grid-template-columns: repeat(auto-fill, minmax(138px, 1fr));
      }
      .request-card {
        grid-template-rows: 188px auto;
      }
    }