:root{
    --bg0:#060608;
    --bg1:#0b0b0e;

    --card:#101016;
    --card2:#0c0c11;

    --text:#e8eaf0;
    --muted:#a6adbb;

    --border: rgba(255,255,255,.10);
    --border2: rgba(255,255,255,.06);

    --shadow: 0 30px 90px rgba(0,0,0,.65);

    --radius: 22px;

    --red:#e11d48;
    --rose:#fb7185;
    --emerald:#10b981;
    --amber:#f59e0b;
    --slate:#94a3b8;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
    margin:0;
    color:var(--text);
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
    background: radial-gradient(1200px 700px at 50% 0%, #160a12 0%, #07070a 55%, #050506 100%);
    overflow-x:hidden;
}

/* Background */
.bg{ position:fixed; inset:0; pointer-events:none; z-index:-1; }
.bgGlow{
    position:absolute; inset:-20%;
    background:
            radial-gradient(800px 280px at 15% 12%, rgba(225,29,72,.22), transparent 60%),
            radial-gradient(760px 280px at 85% 10%, rgba(245,158,11,.10), transparent 60%),
            radial-gradient(840px 320px at 55% 95%, rgba(16,185,129,.08), transparent 60%);
    filter: blur(14px);
    opacity: .95;
}
.bgVignette{
    position:absolute; inset:0;
    background: radial-gradient(circle at 50% 35%, rgba(0,0,0,0) 0%, rgba(0,0,0,.32) 55%, rgba(0,0,0,.70) 100%);
}

/* Page */
.page{
    min-height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 22px;
}

.card{
    width:100%;
    max-width: 860px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(16,16,22,.92), rgba(10,10,15,.92));
    box-shadow: var(--shadow);
    overflow:hidden;
    position:relative;

    --accent: var(--red);
    --accentSoft: rgba(225,29,72,.16);
    --accentBorder: rgba(225,29,72,.42);

    /* NEW: subtle tint inside card, based on accent */
    --accentTintTop: rgba(225,29,72,.10);
    --accentTintBottom: rgba(225,29,72,.04);
}

.card.success{
    --accent: var(--emerald);
    --accentSoft: rgba(16,185,129,.16);
    --accentBorder: rgba(16,185,129,.42);
    --accentTintTop: rgba(16,185,129,.10);
    --accentTintBottom: rgba(16,185,129,.04);
}
.card.cancel{
    --accent: var(--slate);
    --accentSoft: rgba(148,163,184,.16);
    --accentBorder: rgba(148,163,184,.32);
    --accentTintTop: rgba(148,163,184,.08);
    --accentTintBottom: rgba(148,163,184,.03);
}
.card.return{
    --accent: var(--rose);
    --accentSoft: rgba(251,113,133,.16);
    --accentBorder: rgba(251,113,133,.40);
    --accentTintTop: rgba(251,113,133,.10);
    --accentTintBottom: rgba(251,113,133,.04);
}
.card.refresh{
    --accent: var(--amber);
    --accentSoft: rgba(245,158,11,.16);
    --accentBorder: rgba(245,158,11,.40);
    --accentTintTop: rgba(245,158,11,.10);
    --accentTintBottom: rgba(245,158,11,.04);
}

.card::after{
    content:"";
    position:absolute;
    top:0; left:0; right:0;
    height: 4px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity: .95;
}

/* UPDATED: accent tint behind content (stronger + obvious) */
.card::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
            radial-gradient(720px 260px at 20% 0%, var(--accentSoft), transparent 60%),
            radial-gradient(520px 260px at 80% 0%, rgba(59,130,246,.08), transparent 60%),
            linear-gradient(180deg, var(--accentTintTop), transparent 45%, var(--accentTintBottom));
    filter: blur(0px);
    opacity: 1;
}

/* Inner */
.inner{
    position:relative;
    padding: 32px;
}

/* Header row */
.header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom: 22px;
}
.brand{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
}
.brandDot{
    width:10px; height:10px;
    border-radius:999px;
    background: var(--accent);
    box-shadow: 0 0 0 6px var(--accentSoft);
}
.brandName{
    font-weight: 800;
    letter-spacing: .2px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    opacity:.95;
}
.pill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid var(--accentBorder);
    background: rgba(255,255,255,.03);
    color: var(--accent);
    font-size: 12.5px;
}
.pill b{
    color: #fff;
    font-weight: 800;
}

/* Center hero (no crooked grid) */
.hero{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap: 12px;
    margin: 12px 0 18px;
}
.heroIcon{
    width: 84px;
    height: 84px;
    border-radius: 22px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size: 34px;
    font-weight: 900;
    color: #fff;
    border: 1px solid var(--accentBorder);
    background:
            radial-gradient(circle at 30% 20%, rgba(255,255,255,.20), transparent 55%),
            linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.35)),
            linear-gradient(180deg, var(--accent), rgba(0,0,0,.2));
    box-shadow:
            0 0 0 7px var(--accentSoft),
            0 18px 55px rgba(0,0,0,.55);
}
h1{
    margin:0;
    font-size: 30px;
    letter-spacing:.2px;
}
.lead{
    margin:0;
    max-width: 64ch;
    color: var(--muted);
    line-height: 1.65;
    font-size: 15px;
}

/* Blocks */
.block{
    margin-top: 14px;
    border-radius: 18px;
    padding: 16px;
    border: 1px solid var(--border2);
    background: rgba(255,255,255,.02);
}
.blockAccent{
    border: 1px solid var(--accentBorder);
    background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
    position:relative;
}
.blockAccent::before{
    content:"";
    position:absolute;
    inset:-1px;
    border-radius:18px;
    background: radial-gradient(520px 160px at 20% 35%, var(--accentSoft), transparent 60%);
    filter: blur(10px);
    opacity: .95;
    pointer-events:none;
}
.blockTitle{
    position:relative;
    display:flex;
    align-items:center;
    gap:10px;
    margin:0 0 8px;
    font-weight: 900;
    letter-spacing: .2px;
}
.blockMiniDot{
    width:8px; height:8px;
    border-radius:999px;
    background: var(--accent);
    box-shadow: 0 0 0 6px var(--accentSoft);
}
.blockText{
    position:relative;
    margin:0;
    color: var(--muted);
    line-height: 1.65;
    font-size: 14px;
}

/* Actions */
.actions{
    margin-top: 20px;
    display:flex;
    justify-content:center;
    gap: 12px;
    flex-wrap: wrap;
}
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding: 12px 16px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,.02);
    color: var(--text);
    text-decoration:none;
    font-weight: 900;
    letter-spacing: .15px;
    transition: transform .14s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease;
}
.btn:hover{
    transform: translateY(-1px);
    box-shadow: 0 12px 30px rgba(0,0,0,.45);
    border-color: rgba(255,255,255,.16);
    background: rgba(255,255,255,.04);
}
.btnPrimary{
    border-color: transparent;
    background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.20)), linear-gradient(180deg, var(--accent), rgba(0,0,0,.35));
    box-shadow: 0 10px 30px rgba(0,0,0,.45), 0 0 0 7px var(--accentSoft);
}
.btnPrimary:hover{
    box-shadow: 0 14px 40px rgba(0,0,0,.55), 0 0 0 8px var(--accentSoft);
}

.note{
    margin-top: 16px;
    text-align:center;
    color: rgba(255,255,255,.28);
    font-size: 12.5px;
    line-height: 1.5;
}

/* Responsive */
@media (max-width: 720px){
    .inner{ padding: 22px; }
    h1{ font-size: 24px; }
    .heroIcon{ width:72px; height:72px; border-radius:18px; font-size:28px; }
    .header{ flex-direction:column; align-items:flex-start; }
    .actions{ justify-content:stretch; }
    .btn{ width:100%; }
}
@media (max-width: 420px){
    .page{ padding: 14px; }
    .inner{ padding: 18px; }
}