:root{
    --records-accent:#b45309;
    --records-gold:#b45309;
    --records-silver:#475569;
    --records-bronze:#92400e;
}

.page-hero{
    margin-bottom:22px;
}

.db-strip{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
    gap:12px;
    margin-bottom:20px;
}

.db-stat{
    background:rgba(255,255,255,.16);
    border:1px solid rgba(255,255,255,.22);
    border-radius:18px;
    padding:16px 18px;
    color:white;
    text-align:center;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
}

.db-stat-value{
    font-size:clamp(22px,3vw,30px);
    font-weight:950;
    letter-spacing:-.04em;
    line-height:1;
}

.db-stat-label{
    font-size:11px;
    opacity:.78;
    margin-top:6px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.two-col{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
    margin-bottom:18px;
}

.one-col{
    margin-bottom:18px;
}

.rcard{
    background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.88));
    border:1px solid rgba(255,255,255,.50);
    border-radius:24px;
    box-shadow:var(--shadow);
    padding:22px;
    overflow:hidden;
    backdrop-filter:blur(18px) saturate(145%);
    -webkit-backdrop-filter:blur(18px) saturate(145%);
}

.rcard-title{
    font-size:13px;
    font-weight:950;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--muted);
    margin-bottom:14px;
    display:flex;
    align-items:center;
    gap:8px;
}

.rcard-title-icon{
    font-size:18px;
}

.rank-list,
.streak-list{
    list-style:none;
}

.rank-item{
    display:flex;
    align-items:flex-start;
    gap:14px;
    padding:11px 0;
    border-bottom:1px solid var(--border);
}

.rank-item:last-child{
    border-bottom:none;
}

.rank-num{
    font-size:22px;
    font-weight:950;
    min-width:34px;
    line-height:1;
    flex-shrink:0;
}

.rank-num.gold{ color:var(--records-gold); }
.rank-num.silver{ color:var(--records-silver); }
.rank-num.bronze{ color:var(--records-bronze); }
.rank-num.other{ color:var(--muted); font-size:16px; }

.rank-value{
    font-size:24px;
    font-weight:950;
    letter-spacing:-.03em;
    line-height:1;
}

.rank-meta{
    font-size:13px;
    color:var(--muted);
    margin-top:4px;
}

.streak-item{
    display:flex;
    align-items:center;
    gap:14px;
    padding:11px 0;
    border-bottom:1px solid var(--border);
}

.streak-item:last-child{
    border-bottom:none;
}

.streak-days{
    font-size:30px;
    font-weight:950;
    letter-spacing:-.04em;
    min-width:78px;
    line-height:1;
}

.streak-days .unit{
    font-size:14px;
    font-weight:800;
    color:var(--muted);
}

.streak-dates{
    font-size:13px;
    color:var(--muted);
}

.streak-dates strong{
    color:var(--text);
    font-weight:850;
}

.simple-table{
    width:100%;
    border-collapse:collapse;
    font-size:14px;
}

.simple-table th{
    text-align:left;
    padding:9px 12px;
    border-bottom:2px solid var(--border);
    color:var(--muted);
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.07em;
    white-space:nowrap;
}

.simple-table td{
    padding:11px 12px;
    border-bottom:1px solid var(--border);
    white-space:nowrap;
}

.simple-table tbody tr:last-child td{
    border-bottom:none;
}

.simple-table tbody tr:hover{
    background:rgba(15,23,42,.035);
}

.rank-badge{
    display:inline-block;
    width:22px;
    height:22px;
    line-height:22px;
    text-align:center;
    border-radius:50%;
    font-size:12px;
    font-weight:950;
    margin-right:6px;
}

.rank-badge.gold{ background:#fef3c7; color:var(--records-gold); }
.rank-badge.silver{ background:#f1f5f9; color:var(--records-silver); }
.rank-badge.bronze{ background:#ffedd5; color:var(--records-bronze); }

.current-streak{
    background:linear-gradient(135deg,#f0fdf4,#dcfce7);
    border:2px solid #86efac;
    border-radius:24px;
    padding:22px 24px;
    display:flex;
    align-items:center;
    gap:20px;
    margin-bottom:18px;
    box-shadow:0 18px 45px rgba(0,0,0,.16);
}

.cs-number{
    font-size:64px;
    font-weight:950;
    letter-spacing:-.06em;
    color:#16a34a;
    line-height:1;
}

.cs-label{
    font-size:17px;
    font-weight:900;
    color:#166534;
}

.cs-sub{
    font-size:14px;
    color:#15803d;
    margin-top:4px;
}

.records-error{
    background:rgba(255,255,255,.92);
    border:1px solid rgba(255,255,255,.45);
    border-radius:20px;
    padding:24px;
    margin-bottom:18px;
    color:#991b1b;
    box-shadow:var(--shadow);
}

@media (max-width:760px){
    .two-col{
        grid-template-columns:1fr;
    }

    .db-strip{
        grid-template-columns:repeat(2,1fr);
    }

    .current-streak{
        align-items:flex-start;
        flex-direction:column;
        gap:10px;
    }

    .cs-number{
        font-size:52px;
    }

    .rcard{
        padding:18px;
        border-radius:22px;
    }

    .rank-value{
        font-size:21px;
    }
}

@media (max-width:480px){
    .db-strip{
        grid-template-columns:1fr;
    }

    .simple-table{
        font-size:13px;
    }
}