:root{
    --bg:#09090b;         /* zinc-950 */
    --card:#18181b;       /* zinc-900 */
    --card2:#27272a;      /* zinc-800 */
    --border:#27272a;     /* zinc-800 */
    --border2:rgba(63,63,70,.5); /* zinc-700/50 */
    --text:#f4f4f5;       /* zinc-100 */
    --muted:#a1a1aa;      /* zinc-400 */
    --muted2:#71717a;     /* zinc-500 */
    --blue:#2563eb;       /* blue-600 */
    --blue2:#1d4ed8;      /* blue-700 */
    --blue3:#1e40af;      /* blue-800 */
    --green:#22c55e;      /* green-500 */
    --red:#ef4444;        /* red-500 */
    --shadow: 0 25px 50px -12px rgba(0,0,0,.45);
    --radius: 16px;
    --radius2: 12px;
    --mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    --sans: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,"Noto Sans",sans-serif;
}
*{ box-sizing:border-box; }
body{
    margin:0;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:16px;
    background:var(--bg);
    color:var(--text);
    font-family:var(--sans);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}
.wrap{
    width:100%;
    max-width:420px;
}

/* Card */
.card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:20px;
    overflow:hidden;
    box-shadow: var(--shadow);
}
.header{
    padding:18px 20px;
    border-bottom:1px solid var(--border);
    background: linear-gradient(90deg, #27272a 0%, #18181b 100%);
    display:flex;
    align-items:center;
    gap:10px;
}
.brand{
    font-size:20px;
    font-weight:600;
    letter-spacing:.2px;
}
.content{
    padding:20px;
    display:flex;
    flex-direction:column;
    gap:16px;
}

/* Blocks */
.block{
    background:rgba(39,39,42,.5);
    border:1px solid rgba(63,63,70,.5);
    border-radius:14px;
    padding:16px;
}
.row{
    display:flex;
    gap:12px;
}
.row > .col{ flex:1; }

.label{
    font-size:12px;
    color:var(--muted2);
    margin-bottom:6px;
}
.value{
    font-size:14px;
    color:#e4e4e7;
}
.titleLine{
    display:flex;
    align-items:center;
    gap:12px;
    font-size:18px;
    color:#f4f4f5;
}
.iconBox{
    width:36px;height:36px;
    border-radius:10px;
    display:grid;
    place-items:center;
    background:rgba(59,130,246,.10);
    border:1px solid rgba(59,130,246,.18);
}
.amountLabel{
    font-size:13px;
    color:var(--muted);
    margin-bottom:6px;
}
.amount{
    font-size:30px;
    letter-spacing:.2px;
}
.mono{ font-family:var(--mono); }

/* Timer + support */
.pill{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:12px;
    border-radius:12px;
    border:1px solid rgba(63,63,70,.5);
    background: rgba(39,39,42,.35);
}
.btn{
    appearance:none;
    border:1px solid rgba(63,63,70,.6);
    background:rgba(39,39,42,.5);
    color:#d4d4d8;
    border-radius:12px;
    padding:12px 14px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    font-weight:500;
    cursor:pointer;
    transition: background .15s ease, transform .02s ease, border-color .15s ease;
    user-select:none;
}
.btn:hover{ background:rgba(39,39,42,.75); }
.btn:active{ transform: translateY(1px); }

.btnPrimary{
    border:0;
    background:var(--blue);
    color:#fff;
    padding:14px 16px;
    border-radius:14px;
    font-weight:600;
    box-shadow: 0 12px 28px rgba(37,99,235,.22);
}
.btnPrimary:hover{ background:var(--blue2); }
.btnPrimary:active{ background:var(--blue3); transform: translateY(1px); }

/* Screens */
.center{
    padding:48px 26px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:18px;
    text-align:center;
}
.circle{
    width:88px;height:88px;
    border-radius:999px;
    display:grid;
    place-items:center;
    background: rgba(34,197,94,.10);
    border:1px solid rgba(34,197,94,.18);
}
.circle.red{
    background: rgba(239,68,68,.10);
    border-color: rgba(239,68,68,.18);
}
.h2{
    font-size:22px;
    font-weight:700;
    margin:0;
}
.p{
    font-size:13px;
    color:var(--muted);
    margin:0;
    line-height:1.5;
}

/* Loader */
.loaderWrap{
    padding:28px 0 12px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:14px;
}
.spinner{
    width:64px;height:64px;
    border-radius:999px;
    border:4px solid rgba(59,130,246,.20);
    border-top-color: rgba(59,130,246,1);
    animation: spin 1s linear infinite;
}
@keyframes spin{
    to{ transform: rotate(360deg); }
}

/* Inline icons (simple SVG) */
.svg{
    width:18px;height:18px;
    display:block;
}
.svg.lg{ width:22px;height:22px; }
.svg.xl{ width:64px;height:64px; }
.svg.blue{ color: rgba(59,130,246,1); }
.svg.gray{ color: rgba(161,161,170,1); }
.svg.green{ color: rgba(34,197,94,1); }
.svg.red{ color: rgba(239,68,68,1); }
svg{ width:100%; height:100%; }
.sr{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* Small helpers */
.muted{ color:var(--muted); }
.mt8{ margin-top:8px; }
.w100{ width:100%; }

/* Responsive */
@media (max-width:380px){
    .row{ flex-direction:column; }
    .header{ padding:16px 16px; }
    .content{ padding:16px; }
}