.ltp-page {
    min-height: 100dvh;
    background: var(--color-bg, #0a0a0f);
    color: var(--color-text, #fff);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: calc(30px + env(safe-area-inset-bottom));
}

 .ltp-hero {
    position: relative;
    width: calc(100% - 32px);
    margin: 14px 16px 0;
    padding: 22px 22px 26px;
    border-radius: 26px;
    overflow: hidden;
    text-align: left;
    background-image:
        linear-gradient(145deg, rgba(255,255,255,.14) 0%, rgba(0,0,0,.08) 100%),
        linear-gradient(145deg, var(--color-primary-dark, #001a40) 0%, var(--color-primary, #0055a5) 62%, rgba(26,184,212,.86) 100%);
    border: 1px solid rgba(255,255,255,.34);
    box-shadow:
        0 16px 48px rgba(0,30,100,.28),
        0 4px 16px rgba(0,20,80,.18),
        inset 0 1px 0 rgba(255,255,255,.70),
        inset 0 -1px 0 rgba(255,255,255,.14);
    backdrop-filter: blur(4px) saturate(1.4);
    -webkit-backdrop-filter: blur(4px) saturate(1.4);
}
.ltp-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 48%;
    background: linear-gradient(180deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.06) 50%, transparent 100%);
    border-radius: 26px 26px 0 0;
    pointer-events: none;
}
.ltp-hero::after {
    content:'✝';
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 98px;
    color: rgba(28, 32, 84, 0.22);
    text-shadow: 0 2px 10px rgba(0,0,0,.12);
    pointer-events: none;
}
.ltp-hero-icon {
    width: 44px;
    height: 44px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.30);
    background: rgba(255,255,255,.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: 1.4rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: #fff;
    filter: drop-shadow(0 3px 10px rgba(0,0,0,.18));
}
.ltp-hero h1 {
    position: relative;
    z-index: 1;
    margin: 0 0 6px;
    font-size: 20px;
    /* font-weight: 800; */
    line-height: 1.16;
    color: #fff;
    text-shadow: 0 1px 12px rgba(0,0,0,.24);
}
.ltp-hero p {
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: 14px;
    color: rgba(255,255,255,.80);
    line-height: 1.45;
    letter-spacing: .01em;
}

/* ── Card stage ───────────────────────────────────────────── */
.ltp-card-stage {
    margin: 18px auto 0;
    width: min(390px, calc(100vw - 10px));
    aspect-ratio: 4 / 5;
    position: relative;
}

/* ── The shareable card ───────────────────────────────────── */
/*
   The card is always 1080 × 1350 px.
   We scale it so its visual width = stage width.
   transform-origin: top left keeps alignment.
*/
.ltp-card {
    position: absolute;
    top: 0; left: 0;
    width: 1080px;
    height: 1350px;

    transform-origin: top left;
    /* JS sets --ltp-scale; fallback for any viewport */
    transform: scale(var(--ltp-scale, 0.3333));

    border-radius: calc(32px / var(--ltp-scale, 0.3333));   /* visually ~32 px */
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0,0,0,.6);

    display: block;
}

/* background image */
.ltp-card-bg {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: opacity .4s ease;
}

/* Gold cross ornament */
.ltp-card-cross {
    position: absolute;
    top: 60px; left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    font-size: 64px; line-height: 1;
    filter: drop-shadow(0 0 22px rgba(255,215,0,.55)) drop-shadow(0 0 55px rgba(255,165,0,.28));
    opacity: .82;
}

/* content sits above overlay */
.ltp-card-content {
    position: absolute;
    left: 72px;
    right: 72px;
    top: 160px;
    bottom: 220px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 28px;
}

/* decorative divider */
.ltp-card-divider {
    width: 80px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--color-primary-light), transparent);
}

.ltp-verse-text {
    margin: 0;
    max-width: 92%;
    font-family: 'Merriweather', 'Georgia', 'Times New Roman', serif;
    font-size: 64px;
    font-weight: 700;
    font-style: italic;
    line-height: 1.48;
    color: var(--color-primary);
    text-shadow: 0 2px 5px rgba(0, 0, 0, .28), 0 1px 0 rgba(255, 255, 255, .18);
    letter-spacing: .15px;
}

.ltp-verse-ref {
    margin: 0;
    font-size: 34px;
    font-weight: 600;
    color: var(--color-primary-dark);
    letter-spacing: .6px;
    text-transform: uppercase;
    text-shadow: 0 2px 8px rgba(0,0,0,.22);
}

/* Footer row inside card */
.ltp-card-footer {
    position: absolute;
    left: 52px;
    bottom: 52px;
    z-index: 1;
    /* width: calc(100% - 104px); */
    max-width: 700px;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 20px;
    background: rgba(5, 8, 16, .42);
    backdrop-filter: blur(18px) saturate(1.45);
    -webkit-backdrop-filter: blur(18px) saturate(1.45);
    box-shadow:
        0 8px 28px rgba(0,0,0,.34),
        inset 0 1px 0 rgba(255,255,255,.26);
}

.ltp-branding {
    display: flex;
    align-items: center;
    gap: 18px;
}
.ltp-branding-logo {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,.4);
}
.ltp-branding-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.ltp-branding-name {
    font-size: 30px;
    font-weight: 700;
    color: #fff;
    letter-spacing: .5px;
}
.ltp-branding-sub {
    font-size: 22px;
    color: #fff;
    margin-top: 4px;
}

/* ── Loading state inside card ────────────────────────────── */
.ltp-card.is-loading .ltp-card-content {
    opacity: 0;
}
.ltp-card.is-loading .ltp-card-footer {
    opacity: 0;
}

/* ── Action buttons ───────────────────────────────────────── */
.ltp-actions {
    margin-top: 24px;
    display: flex;
    gap: 12px;
    justify-content: center;
    padding: 0 16px;
    flex-wrap: wrap;
}

.ltp-btn {
    flex: 1;
    min-width: 140px;
    max-width: 200px;
    padding: 13px 20px;
    border: none;
    border-radius: 50px;
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform .15s ease, opacity .15s ease, box-shadow .2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.ltp-btn:active { transform: scale(.93); }

.ltp-btn-draw {
    background: rgba(255,255,255,.08);
    color: #fff;
    border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(10px);
}
.ltp-btn-draw:hover { background: rgba(255,255,255,.14); }

.ltp-btn-share {
    background: linear-gradient(130deg, #ffcc00 0%, #ff8800 50%, #ff4400 100%);
    color: #1a0400;
    box-shadow: 0 5px 22px rgba(255,130,0,.52), inset 0 1px 0 rgba(255,255,255,.22);
    letter-spacing: .25px;
}
.ltp-btn-share:not(:disabled):hover {
    box-shadow: 0 7px 30px rgba(255,130,0,.68), inset 0 1px 0 rgba(255,255,255,.25);
}

.ltp-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
}

/* ── Category chip ────────────────────────────────────────── */
.ltp-category {
    margin-top: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 50px;
    background: #fff;
    border: 1px solid rgba(255,215,0,.22);
    font-size: .78rem;
    color: #f60;
    letter-spacing: .5px;
}

/* ── Shimmer animation (loading) ──────────────────────────── */
@keyframes ltp-shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position:  400px 0; }
}
.ltp-shimmer {
    background: linear-gradient(90deg, rgba(255,255,255,.05) 25%, rgba(255,255,255,.12) 50%, rgba(255,255,255,.05) 75%);
    background-size: 800px 100%;
    animation: ltp-shimmer 1.4s linear infinite;
    border-radius: 8px;
}

/* ── Dark‑mode compat: background tracks system ─────────────  */
@media (prefers-color-scheme: light) {
    .ltp-page {
        background: #f5f0e8;
        color: #1a0a00;
    }
}

/* ── SEO content block ────────────────────────────────────── */
.cnt{
    width:min(880px, calc(100% - 24px));
    margin:22px auto 0;
    padding:20px 18px;
    border-radius:22px;
    border:1px solid color-mix(in srgb, var(--color-primary, #6a1b9a) 28%, #ffffff 72%);
    background:
        linear-gradient(145deg, rgba(255,255,255,.82), rgba(246,250,255,.68)),
        radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--color-primary, #6a1b9a) 10%, transparent) 0%, transparent 58%);
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    box-shadow:
        0 10px 28px rgba(15,23,42,.10),
        inset 0 1px 0 rgba(255,255,255,.82);
}
.cnt h2{
    margin:0 0 12px;
    font-size:1.42rem;
    line-height:1.32;
    font-weight:800;
    letter-spacing:.01em;
    color:var(--color-primary-dark, #4a148c);
}
.cnt h3{
    margin:18px 0 8px;
    font-size:1.04rem;
    line-height:1.38;
    font-weight:750;
    color:var(--text-primary, #0f172a);
}
.cnt p{
    margin:0 0 10px;
    font-size:.985rem;
    line-height:1.78;
    color:var(--text-secondary, #334155);
}
.cnt strong{
    color:color-mix(in srgb, var(--color-primary, #6a1b9a) 78%, #111827 22%);
    font-weight:780;
}
.cnt p:last-child{
    margin-top:14px;
    margin-bottom:0;
    padding-top:12px;
    border-top:1px solid rgba(255,255,255,.75);
}
[data-theme="light"] .ltp-page {
        background: #f5f0e8;
        color: #1a0a00;
    }

/* CTA mở lộc thánh */
.btnhai{
    appearance:none;
    -webkit-appearance:none;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border:1px solid color-mix(in srgb, var(--color-primary, #6a1b9a) 58%, #ffffff 42%);
    border-radius:999px;
    padding:14px 24px;
    width: min(100%, 520px);
    min-height:52px;
    font-size:1rem;
    font-weight:900;
    letter-spacing:.01em;
    color:#fff;
    cursor:pointer;
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--color-primary-dark, #4a148c) 88%, #ffffff 12%) 0%,
            color-mix(in srgb, var(--color-primary, #6a1b9a) 76%, #ffffff 24%) 52%,
            color-mix(in srgb, var(--color-primary, #6a1b9a) 58%, #f59e0b 42%) 100%);
    box-shadow:
        0 12px 26px color-mix(in srgb, var(--color-primary, #6a1b9a) 36%, transparent),
        0 0 0 3px color-mix(in srgb, var(--color-primary, #6a1b9a) 20%, transparent),
        inset 0 1px 0 rgba(255,255,255,.42);
    transition: transform .2s ease, filter .2s ease, box-shadow .2s ease, opacity .2s ease;
    animation: ltpBtnPulse 2.8s ease-in-out infinite;
}
.btnhai::before{
    content:'✨ ';
    font-size: 1.02em;
}
.btnhai::after{
    content:' ⟶';
    font-size: 1.02em;
    opacity:.9;
}
.btnhai > *{
    position: relative;
    z-index: 1;
}
.btnhai::selection{ background: transparent; }
.btnhai:focus-visible{
    outline: 3px solid color-mix(in srgb, var(--color-primary, #6a1b9a) 60%, #ffffff 40%);
    outline-offset: 2px;
}
.btnhai:hover{
    filter:brightness(1.06);
    box-shadow:
        0 14px 30px color-mix(in srgb, var(--color-primary, #6a1b9a) 44%, transparent),
        0 0 0 4px color-mix(in srgb, var(--color-primary, #6a1b9a) 24%, transparent),
        inset 0 1px 0 rgba(255,255,255,.5);
}
.btnhai:active{
    transform:translateY(1px) scale(.985);
    animation: none;
}
.btnhai.is-running{ opacity:.88; }
.btnhai:disabled{
    cursor:not-allowed;
    animation: none;
}
.btnhai:not(.is-running)::marker{ content:''; }
.btnhai:not(.is-running){
    background-size: 220% 220%;
}
.btnhai:not(.is-running):hover{
    background-position: 100% 50%;
}

@keyframes ltpBtnPulse{
    0%,100%{ transform: translateY(0); }
    50%{ transform: translateY(-1px); }
}

/* Thống kê lộc thánh */
.ltp-draw-stats{
    margin: 12px 0 14px;
    padding: 12px;
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--color-primary, #6a1b9a) 24%, #ffffff 76%);
    background:
        linear-gradient(150deg, rgba(255,255,255,.78), rgba(248,250,255,.66)),
        radial-gradient(120% 110% at 100% 0%, color-mix(in srgb, var(--color-primary, #6a1b9a) 10%, transparent) 0%, transparent 62%);
    box-shadow:
        0 8px 24px rgba(15,23,42,.08),
        inset 0 1px 0 rgba(255,255,255,.88);
}
.ltp-draw-metrics{
    display:grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap:10px;
    margin-bottom:12px;
}
.ltp-draw-metric{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.8);
    background:rgba(255,255,255,.68);
}
.ltp-draw-metric-icon{
    width:34px;height:34px;border-radius:10px;
    display:inline-flex;align-items:center;justify-content:center;
    font-size:1.05rem;
    background: color-mix(in srgb, var(--color-primary, #6a1b9a) 16%, #ffffff 84%);
}
.ltp-draw-metric-body{ display:flex; flex-direction:column; min-width:0; }
.ltp-draw-metric-value{
    font-size:1.2rem;
    line-height:1.1;
    font-weight:900;
    color: var(--color-primary-dark, #4a148c);
}
.ltp-draw-metric-label{
    margin-top:2px;
    font-size:.78rem;
    color:#475569;
    line-height:1.25;
}
.ltp-draw-recent{
    border-top:1px solid rgba(255,255,255,.8);
    padding-top:10px;
}
.ltp-draw-recent-title{
    margin:0 0 8px;
    font-size:.95rem;
    font-weight:800;
    color: var(--color-primary-dark, #4a148c);
}
.ltp-draw-recent-list{
    margin:0;
    padding:0;
    list-style:none;
    display:grid;
    gap:6px;
}
.ltp-draw-recent-item{
    display:grid;
    grid-template-columns: 24px 1fr auto;
    align-items:center;
    gap:8px;
    padding:6px 8px;
    border-radius:10px;
    background: rgba(255,255,255,.65);
    border:1px solid rgba(255,255,255,.82);
}
.ltp-draw-recent-rank{
    width:20px;height:20px;border-radius:999px;
    display:inline-flex;align-items:center;justify-content:center;
    font-size:.7rem;font-weight:800;
    background: color-mix(in srgb, var(--color-primary, #6a1b9a) 20%, #ffffff 80%);
    color: var(--color-primary-dark, #4a148c);
}
.ltp-draw-recent-name{
    min-width:0;
    font-size:.86rem;
    font-weight:700;
    color:#1e293b;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.ltp-draw-recent-time{
    font-size:.74rem;
    color:#64748b;
}
.ltp-draw-empty{
    font-size:.82rem;
    color:#64748b;
    padding:6px 2px;
}

/* Khu vực lộc thánh bị ẩn ban đầu */
.locthanhonline{
    width:100%;
}
.locthanhonline.is-gated{
    opacity:0;
    max-height:0;
    overflow:hidden;
    pointer-events:none;
    transform: translateY(8px);
}
.locthanhonline.is-revealed{
    animation: ltpReveal .45s ease both;
    text-align: center;
}
@keyframes ltpReveal{
    from{ opacity:.05; transform:translateY(8px); }
    to{ opacity:1; transform:translateY(0); }
}

/* Màn hình chờ countdown */
.ltp-reveal-wait{
    width:min(820px, calc(100% - 20px));
    margin:16px auto 0;
}
.ltp-wait-card{
    position:relative;
    overflow:hidden;
    border-radius:28px;
    padding:24px 18px 18px;
    text-align:center;
    border:1px solid color-mix(in srgb, var(--color-primary, #6a1b9a) 30%, #ffffff 70%);
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.75), rgba(255,255,255,.4) 50%, rgba(255,255,255,.28) 100%),
        linear-gradient(145deg, color-mix(in srgb, var(--color-primary-light, #f3e5f5) 78%, #fff 22%), rgba(255,255,255,.66));
    box-shadow:
        0 14px 36px rgba(15,23,42,.12),
        inset 0 1px 0 rgba(255,255,255,.9);
    backdrop-filter: blur(14px) saturate(1.1);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
}
.ltp-wait-card::before{
    content:'';
    position:absolute; inset:-30% -20%;
    background: radial-gradient(circle at 50% 20%, color-mix(in srgb, var(--color-primary, #6a1b9a) 18%, transparent) 0%, transparent 56%);
    pointer-events:none;
}
.ltp-wait-top{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns: 1fr auto 1fr;
    align-items:center;
    gap:10px;
    margin-bottom:10px;
}
.ltp-wait-candle{
    font-size:2.1rem;
    filter: drop-shadow(0 6px 10px rgba(0,0,0,.15));
}
.ltp-wait-cross{
    font-size:2.4rem;
    color: color-mix(in srgb, var(--color-primary, #6a1b9a) 68%, #c98900 32%);
    text-shadow: 0 0 20px rgba(255,214,102,.55), 0 3px 10px rgba(0,0,0,.1);
}
.ltp-wait-verse{
    position:relative;
    z-index:1;
    margin:8px auto 12px;
    max-width:560px;
    font-size:1.25rem;
    line-height:1.58;
    font-style:italic;
    font-family:'Merriweather','Georgia','Times New Roman',serif;
    color: color-mix(in srgb, var(--color-primary-dark, #4a148c) 70%, #a91d4a 30%);
    text-shadow: 0 2px 10px rgba(255,255,255,.85);
}
.ltp-wait-count-wrap{
    position:relative; z-index:1;
    display:inline-flex;
    align-items:baseline;
    gap:8px;
    margin-bottom:8px;
    color: var(--color-primary-dark, #4a148c);
}
.ltp-wait-count-num{
    font-size:2.15rem;
    font-weight:900;
    line-height:1;
}
.ltp-wait-count-label{
    font-size:1rem;
    font-weight:700;
    opacity:.82;
}
.ltp-wait-dots{
    position:relative; z-index:1;
    display:flex;
    justify-content:center;
    gap:10px;
    margin:4px 0 2px;
}
.ltp-wait-dots span{
    width:10px; height:10px;
    border-radius:50%;
    background: color-mix(in srgb, var(--color-primary, #6a1b9a) 55%, #ffcf66 45%);
    opacity:.3;
    animation: ltpWaitPulse 1.2s ease-in-out infinite;
}
.ltp-wait-dots span:nth-child(2){ animation-delay:.12s; }
.ltp-wait-dots span:nth-child(3){ animation-delay:.24s; }
.ltp-wait-dots span:nth-child(4){ animation-delay:.36s; }
.ltp-wait-dots span:nth-child(5){ animation-delay:.48s; }
@keyframes ltpWaitPulse{
    0%,100%{ transform:scale(.82); opacity:.28; }
    50%{ transform:scale(1); opacity:.95; }
}
[data-theme="dark"] .ltp-wait-card{
    border-color: color-mix(in srgb, var(--color-primary, #a78bfa) 45%, #334155 55%);
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.08), rgba(255,255,255,.03) 52%, transparent 100%),
        linear-gradient(150deg, rgba(15,23,42,.88), rgba(30,41,59,.82));
}
[data-theme="dark"] .ltp-draw-stats{
    border-color: color-mix(in srgb, var(--color-primary, #a78bfa) 44%, #334155 56%);
    background:
        linear-gradient(150deg, rgba(15,23,42,.84), rgba(30,41,59,.74)),
        radial-gradient(120% 110% at 100% 0%, color-mix(in srgb, var(--color-primary, #a78bfa) 16%, transparent) 0%, transparent 62%);
    box-shadow:
        0 10px 26px rgba(2,6,23,.38),
        inset 0 1px 0 rgba(255,255,255,.06);
}
[data-theme="dark"] .ltp-draw-metric{
    background: rgba(30,41,59,.72);
    border-color: rgba(148,163,184,.28);
}
[data-theme="dark"] .ltp-draw-metric-label,
[data-theme="dark"] .ltp-draw-recent-time,
[data-theme="dark"] .ltp-draw-empty{
    color:#94a3b8;
}
[data-theme="dark"] .ltp-draw-recent-item{
    background: rgba(30,41,59,.66);
    border-color: rgba(148,163,184,.22);
}
[data-theme="dark"] .ltp-draw-recent-name{
    color:#e2e8f0;
}
[data-theme="dark"] .ltp-wait-verse{
    color:#e9d5ff;
    text-shadow: 0 2px 16px rgba(0,0,0,.5);
}
[data-theme="dark"] .ltp-wait-count-wrap{
    color:#c4b5fd;
}
[data-theme="dark"] .cnt{
    border-color:color-mix(in srgb, var(--color-primary, #a78bfa) 48%, #475569 52%);
    background:
        linear-gradient(145deg, rgba(15,23,42,.78), rgba(30,41,59,.62)),
        radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--color-primary, #a78bfa) 18%, transparent) 0%, transparent 58%);
    box-shadow:
        0 12px 28px rgba(2,6,23,.38),
        inset 0 1px 0 rgba(255,255,255,.08);
}
[data-theme="dark"] .cnt h2{
    color:var(--color-primary, #c4b5fd);
}
[data-theme="dark"] .cnt h3{
    color:#e2e8f0;
}
[data-theme="dark"] .cnt p{
    color:#cbd5e1;
}
[data-theme="dark"] .cnt strong{
    color:#ede9fe;
}
@media (max-width:640px){
    .cnt{
        width:calc(100% - 16px);
        margin-top:16px;
        padding:16px 14px;
        border-radius:18px;
    }
    .cnt h2{ font-size:1.2rem; }
    .cnt h3{ font-size:1rem; }
    .cnt p{ font-size:.95rem; line-height:1.72; }
    .ltp-wait-card{
        border-radius:22px;
        padding:20px 14px 16px;
    }
    .ltp-wait-verse{
        font-size:1.1rem;
        line-height:1.5;
    }
    .ltp-wait-count-num{ font-size:1.95rem; }
    .ltp-draw-metrics{
        grid-template-columns: 1fr;
    }
    .ltp-draw-recent-item{
        grid-template-columns: 22px 1fr;
    }
    .ltp-draw-recent-time{
        grid-column: 2;
        margin-top: -2px;
    }
}