/* Клавиши инструментов по макету Pen «проба 7» (владелец одобрил 24.09.2026):
   широкая клавиша — знак вверху справа и сокращение внизу справа, рядом
   квадратная со вторым знаком. Светлая тема — серебро, тёмная — чёрный глянец.
   Размеры считаются от --k (высота клавиши), перелив — полоса света в ::before. */
.dk-card{container-type:inline-size}
/* Пара клавиш шириной 3,9·k: k не больше четверти ширины карточки, иначе
   в узкой колонке рядом с флагманом клавиши вылезают за край. */
.rvk{--k:clamp(52px,24cqi,84px); display:flex; gap:calc(var(--k)*.125); align-items:flex-end; justify-content:center;
    height:150px; padding-bottom:22px; margin:0 0 6px; box-sizing:border-box}
/* высота сцены как у прежней схемы; клавиши прижаты вниз, чтобы плашка
   «флагман»/«новое» в левом верхнем углу их не закрывала */
.dk-card--lead .rvk, .dk-row--lead .rvk{height:200px}
.dk-card--lead .rvk{--k:clamp(52px,24cqi,112px)}
.rvk__key{display:block; position:relative; flex:0 0 auto; height:var(--k); width:var(--k);
    border-radius:calc(var(--k)*.2); padding:1.5px 1.5px 3px; box-sizing:border-box;
    background:var(--rvk-rim); box-shadow:0 calc(var(--k)*.16) calc(var(--k)*.36) var(--rvk-sh);
    transition:transform .25s ease}
.rvk__key--wide{width:calc(var(--k)*1.64)}
.rvk__face{display:block; position:relative; height:100%; border-radius:calc(var(--k)*.2 - 1.5px); overflow:hidden;
    background:var(--rvk-face); color:var(--rvk-ink)}
.rvk__face::before{content:""; position:absolute; inset:-60% -120%; pointer-events:none;
    background:linear-gradient(115deg,transparent 38%,var(--rvk-g1) 44%,var(--rvk-g2) 48%,var(--rvk-g1) 52%,transparent 56%,
        transparent 62%,var(--rvk-g1) 66%,transparent 70%);
    animation:rvk-shine 4.5s cubic-bezier(.45,.05,.25,1) infinite; mix-blend-mode:screen}
.rvk__face::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    background:linear-gradient(180deg,rgba(255,255,255,var(--rvk-top)),transparent 35%)}
.rvk__key + .rvk__key .rvk__face::before{animation-delay:.25s}
.rvk svg{position:absolute; fill:none; stroke:currentColor; stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round; z-index:1}
.rvk__key--wide svg{width:calc(var(--k)*.23); height:calc(var(--k)*.23); top:calc(var(--k)*.15); right:calc(var(--k)*.16)}
.rvk__key:not(.rvk__key--wide) svg{width:calc(var(--k)*.34); height:calc(var(--k)*.34); top:50%; left:50%; transform:translate(-50%,-50%)}
.rvk__lbl{position:absolute; z-index:1; right:calc(var(--k)*.16); bottom:calc(var(--k)*.11);
    font:300 calc(var(--k)*.24)/1 'Inter',system-ui,sans-serif; letter-spacing:-.02em}
.dk-card:hover .rvk__key{transform:translateY(-3px)}
@keyframes rvk-shine{0%{transform:translateX(-35%)}60%,100%{transform:translateX(35%)}}
@media (prefers-reduced-motion:reduce){.rvk__face::before{animation:none}.rvk__key{transition:none}}
@media (max-width:900px){.dk-card--lead .rvk, .dk-row--lead .rvk{height:170px}}
@media (max-width:600px){.rvk, .dk-card--lead .rvk, .dk-row--lead .rvk{height:130px}}

/* Тёмная тема — по умолчанию, как во всём кабинете */
html[data-theme="dark"], html:not([data-theme="light"]){
    --rvk-rim:linear-gradient(180deg,#F0F0F0 0%,#7A7A7A 30%,#D4D4D4 55%,#8A8A8A 85%,#3A3A3A 100%);
    --rvk-face:linear-gradient(135deg,#707070 0%,#2A2A2A 20%,#050505 38%,#484848 50%,#0A0A0A 62%,#000 82%,#3C3C3C 100%);
    --rvk-ink:#C8C8C8; --rvk-sh:rgba(0,0,0,.44); --rvk-g1:rgba(255,255,255,.12); --rvk-g2:rgba(255,255,255,.34); --rvk-top:.10}
html[data-theme="light"]{
    --rvk-rim:linear-gradient(180deg,#FFFFFF 0%,#C9C9C9 25%,#FFFFFF 50%,#9C9C9C 85%,#6A6A6A 100%);
    --rvk-face:linear-gradient(135deg,#7E7E7E 0%,#C4C4C4 22%,#8F8F8F 42%,#E6E6E6 58%,#9E9E9E 78%,#C8C8C8 100%);
    --rvk-ink:#3A3A3A; --rvk-sh:rgba(0,0,0,.11); --rvk-g1:rgba(255,255,255,.18); --rvk-g2:rgba(255,255,255,.55); --rvk-top:.25}