/* —— تم مخمل / وسوسه — شبانه، اروتیک، سکسی —— */
html[data-theme="velvet"] {
    --ink: #060308;
    --ink-soft: #16060e;
    --panel: #1f0a16;
    --panel-2: #321020;
    --line: rgba(255, 80, 140, 0.26);
    --text: #ffe8f2;
    --muted: #d49ab0;
    --saffron: #ff3d7a;
    --saffron-hot: #ff7aa8;
    --coral: #ff1f4b;
    --mint: #f0b4c8; /* blush / skin-silk accent */
    --shadow: 0 22px 50px rgba(255, 20, 80, 0.28), 0 8px 28px rgba(0, 0, 0, 0.6);
    --theme-color: #1a0410;
    --surface-inset: rgba(255, 60, 120, 0.08);
    --surface-inset-soft: rgba(255, 140, 180, 0.06);
    --surface-mid: rgba(255, 60, 120, 0.1);
    --surface-deep: rgba(0, 0, 0, 0.4);
    --surface-faint: rgba(255, 180, 210, 0.05);
    --surface-strong: rgba(0, 0, 0, 0.48);
    --card-face: linear-gradient(165deg, rgba(52, 14, 32, 0.98) 0%, rgba(18, 6, 14, 0.99) 55%, rgba(40, 10, 24, 0.97) 100%);
    --sheet-face: linear-gradient(165deg, #3a1224 0%, #16060e 52%, #080308 100%);
    --profile-face-bg: linear-gradient(160deg, #4a1830, #1f0a16);
    --profile-ring-hole: #1f0a16;
    --profile-sheet-face:
        radial-gradient(ellipse 90% 55% at 50% -10%, rgba(255, 60, 120, 0.48), transparent 55%),
        radial-gradient(ellipse 60% 40% at 100% 20%, rgba(255, 30, 80, 0.28), transparent 50%),
        radial-gradient(ellipse 50% 35% at 0% 80%, rgba(240, 180, 200, 0.12), transparent 50%),
        linear-gradient(180deg, #4a1830 0%, #1f0a16 45%, #0a0408 100%);
    --overlay-scrim: rgba(24, 4, 14, 0.76);
    --overlay-heavy: rgba(6, 1, 4, 0.95);
    --chip-text: #ffe8f2;
    --heading-strong: #ffd6e6;
    --glow-a: rgba(255, 40, 100, 0.55);
    --glow-b: rgba(255, 120, 170, 0.07);
    --brand-grad: linear-gradient(120deg, #fff0f5 0%, #ff7aa8 18%, #ff3d7a 42%, #ff1f4b 68%, #f0b4c8 100%);
    --cal-win: #5eead4;
    --cal-loss: #fb7185;
    --cal-plan: #ff7aa8;
    --cal-win-soft: rgba(94, 234, 212, 0.16);
    --cal-loss-soft: rgba(251, 113, 133, 0.18);
    --cal-plan-soft: rgba(255, 122, 168, 0.16);
    --cal-win-text: #99f6e4;
    --cal-loss-text: #fecdd3;
    --cal-today-fg: #ffd6e6;
    --cal-today-tag-bg: rgba(255, 77, 141, 0.32);
    --cal-today-tag-fg: #ffe8f2;
    --cal-cell-bg: rgba(255, 60, 120, 0.08);
    --cal-panel-bg: rgba(0, 0, 0, 0.28);
    --honor-card-border: rgba(255, 60, 120, 0.28);
    --honor-card-bg:
        radial-gradient(ellipse 90% 60% at 50% -20%, rgba(255, 40, 100, 0.22), transparent 55%),
        radial-gradient(ellipse 120% 80% at 100% 0%, rgba(255, 122, 168, 0.14), transparent 58%),
        linear-gradient(168deg, rgba(52, 14, 32, 0.98) 0%, rgba(8, 3, 8, 1) 100%);
    --honor-card-shadow: 0 18px 44px rgba(255, 20, 80, 0.22), 0 0 0 1px rgba(255, 60, 120, 0.1) inset;
    --honor-card-bar: linear-gradient(
        90deg,
        rgba(255, 31, 75, 0.15) 0%,
        rgba(255, 90, 154, 0.85) 18%,
        rgba(255, 214, 230, 1) 50%,
        rgba(255, 90, 154, 0.85) 82%,
        rgba(255, 31, 75, 0.15) 100%
    );
    --honor-head-border: rgba(255, 60, 120, 0.18);
    --honor-title-shadow: rgba(255, 60, 120, 0.22);
    --honor-hint: rgba(212, 154, 176, 0.92);
    --honor-kicker-fg: #ffb8d4;
    --honor-kicker-bg: rgba(255, 60, 120, 0.16);
    --honor-kicker-border: rgba(255, 60, 120, 0.32);
    --honor-live-dot: var(--saffron-hot);
    --honor-live-pulse: rgba(255, 122, 168, 0.55);
    --honor-command-bg: rgba(0, 0, 0, 0.32);
    --honor-command-border: rgba(255, 80, 140, 0.18);
    --honor-cta-bg: linear-gradient(135deg, #ff5a9a 0%, #ff1f4b 40%, #c2185b 78%, #8b0a3a 100%);
    --honor-cta-color: #fff5f8;
    --honor-cta-ring: rgba(255, 122, 168, 0.35);
    --honor-cta-glow: rgba(255, 60, 120, 0.42);
    --honor-cta-shadow: 0 0 0 1px var(--honor-cta-ring), 0 0 22px var(--honor-cta-glow), 0 12px 30px rgba(255, 20, 80, 0.35), inset 0 1px 0 rgba(255, 220, 230, 0.35);
    --honor-cta-shadow-hover: 0 0 0 1px rgba(255, 122, 168, 0.48), 0 0 34px rgba(255, 60, 120, 0.52), 0 16px 36px rgba(255, 20, 80, 0.42), inset 0 1px 0 rgba(255, 220, 230, 0.42);
    --honor-rank-color: var(--text);
    --honor-gap: var(--saffron-hot);
    --honor-gap-glow: rgba(255, 122, 168, 0.55);
    --honor-bar-track: rgba(255, 60, 120, 0.12);
    --honor-bar-track-border: rgba(255, 60, 120, 0.08);
    --honor-bar-fill: linear-gradient(90deg, #c2185b, #ff3d7a, #ff7aa8);
    --honor-bar-glow: rgba(255, 60, 120, 0.55);
    --honor-tile-border: rgba(255, 80, 140, 0.16);
    --honor-tile-bg: linear-gradient(155deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 60, 120, 0.04) 100%);
    --honor-tile-fg: var(--text);
    --honor-tile-name: rgba(255, 232, 242, 0.62);
    --honor-tile-sub: rgba(255, 232, 242, 0.72);
    --honor-tile-sub-muted: rgba(212, 154, 176, 0.72);
    --honor-leader: var(--saffron-hot);
    --honor-leader-glow: rgba(255, 122, 168, 0.45);
    --honor-rank: var(--saffron-hot);
    --honor-rank-glow: rgba(255, 122, 168, 0.32);
    --honor-score-strong: #ffd6e6;
    --honor-tile-hover-border: rgba(255, 122, 168, 0.38);
    --honor-tile-hover-bg: linear-gradient(155deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 60, 120, 0.08) 100%);
    --honor-leader-pulse: rgba(255, 122, 168, 0.2);
    --honor-strip-line: rgba(255, 60, 120, 0.05);
    --honor-empty: var(--muted);

    /* نقشه رقابت — تم velvet */
    --arm-bg:
        linear-gradient(180deg, rgba(255, 60, 120, 0.04), transparent 42%),
        linear-gradient(165deg, rgba(52, 14, 32, 0.94), rgba(18, 4, 14, 0.97));
    --arm-border: rgba(255, 60, 120, 0.22);
    --arm-title: #ffd6e6;
    --arm-caption: rgba(212, 154, 176, 0.9);
    --arm-ends: rgba(212, 154, 176, 0.72);
    --arm-line: linear-gradient(90deg, rgba(255, 31, 75, 0.25), rgba(255, 90, 154, 0.85) 48%, rgba(255, 180, 210, 0.95));
    --arm-dot-start: rgba(255, 90, 154, 0.7);
    --arm-dot-end: rgba(240, 180, 200, 0.85);
    --arm-marker: #ff5a9a;
    --arm-marker-border: rgba(255, 220, 235, 0.55);
    --arm-marker-ring: rgba(255, 60, 120, 0.14);
    --arm-marker-glow: rgba(255, 60, 120, 0.3);
    --arm-leader: #f0b4c8;
    --arm-leader-border: rgba(255, 240, 248, 0.7);
    --arm-leader-ring: rgba(240, 180, 200, 0.18);
    --arm-leader-glow: rgba(240, 180, 200, 0.35);
    --arm-rank-fg: rgba(255, 232, 242, 0.92);
    --arm-rank-bg: rgba(32, 8, 20, 0.88);
    --arm-rank-border: rgba(255, 60, 120, 0.32);
    --arm-leader-rank-fg: #ffeef6;
    --arm-leader-rank-border: rgba(240, 180, 200, 0.45);
    --arm-leader-rank-bg: rgba(60, 16, 34, 0.9);
    --arm-row-bg: rgba(255, 255, 255, 0.025);
    --arm-row-border: rgba(255, 60, 120, 0.1);
    --arm-leader-row-bg: rgba(240, 180, 200, 0.1);
    --arm-leader-row-border: rgba(240, 180, 200, 0.28);
    --arm-row-rank-fg: rgba(212, 154, 176, 0.95);
    --arm-leader-row-rank-fg: #f0b4c8;
    --arm-row-name: rgba(255, 232, 242, 0.92);
    --arm-leader-row-name: #ffe8f2;
    --arm-bar-track: rgba(255, 60, 120, 0.1);
    --arm-bar-fill: linear-gradient(90deg, rgba(194, 24, 91, 0.6), rgba(255, 60, 120, 0.95));
    --arm-leader-bar-fill: linear-gradient(90deg, rgba(200, 100, 140, 0.65), rgba(240, 180, 200, 0.98));
    --arm-row-score: rgba(255, 232, 242, 0.85);
    --arm-leader-row-score: #ffd6e6;
    --arm-legend-item-fg: rgba(212, 154, 176, 0.88);
    --arm-legend-border: rgba(255, 60, 120, 0.1);
    --arm-swatch-peer: #ff5a9a;
    --arm-swatch-peer-ring: rgba(255, 60, 120, 0.2);
    --arm-swatch-lead: #f0b4c8;
    --arm-swatch-lead-ring: rgba(240, 180, 200, 0.22);
    --arm-focus-outline: rgba(255, 232, 242, 0.55);
    color-scheme: dark;
}

html[data-theme="velvet"] body {
    background: var(--ink);
}

html[data-theme="velvet"] body::before {
    background:
        radial-gradient(ellipse 85% 50% at 6% 0%, rgba(255, 30, 90, 0.42), transparent 58%),
        radial-gradient(ellipse 70% 45% at 98% 6%, rgba(190, 20, 80, 0.34), transparent 52%),
        radial-gradient(ellipse 55% 35% at 50% 0%, rgba(255, 120, 160, 0.16), transparent 52%),
        radial-gradient(ellipse 60% 40% at 72% 100%, rgba(240, 180, 200, 0.12), transparent 58%),
        radial-gradient(ellipse 90% 55% at 50% 58%, rgba(255, 40, 100, 0.1), transparent 72%),
        var(--ink);
}

html[data-theme="velvet"] .bg-glow {
    top: auto;
    left: auto;
    right: -8%;
    bottom: -6%;
    background:
        radial-gradient(circle, rgba(255, 40, 100, 0.62), transparent 68%),
        radial-gradient(circle at 40% 60%, rgba(255, 20, 70, 0.42), transparent 62%);
    width: min(92vw, 560px);
    height: min(92vw, 560px);
    filter: blur(2px);
    animation: velvetPulse 6s ease-in-out infinite alternate;
}

html[data-theme="velvet"] .bg-grid {
    background-image:
        radial-gradient(circle at 50% 42%, rgba(255, 60, 120, 0.22) 0 2px, transparent 2.5px),
        radial-gradient(circle at 50% 58%, rgba(255, 60, 120, 0.14) 0 1.5px, transparent 2px),
        radial-gradient(circle at 38% 50%, rgba(255, 60, 120, 0.16) 0 1.5px, transparent 2px),
        radial-gradient(circle at 62% 50%, rgba(255, 60, 120, 0.16) 0 1.5px, transparent 2px);
    background-size: 36px 36px;
    opacity: 0.62;
    -webkit-mask-image: radial-gradient(ellipse at 55% 42%, black 35%, transparent 90%);
    mask-image: radial-gradient(ellipse at 55% 42%, black 35%, transparent 90%);
}

/* —— لایه سمبل‌های اروتیک —— */
.velvet-erotica {
    display: none;
}

html[data-theme="velvet"] .velvet-erotica {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

html[data-theme="velvet"] .velvet-sym {
    position: absolute;
    line-height: 1;
    filter: drop-shadow(0 8px 18px rgba(255, 30, 80, 0.45));
    opacity: 0.55;
    user-select: none;
    animation: velvetSymFloat 8s ease-in-out infinite;
}

html[data-theme="velvet"] .velvet-sym--lips-a {
    right: 6%;
    top: 12%;
    font-size: clamp(2.2rem, 7vw, 3.4rem);
    opacity: 0.7;
    animation-duration: 7s;
}

html[data-theme="velvet"] .velvet-sym--lips-b {
    left: 8%;
    bottom: 22%;
    font-size: clamp(1.8rem, 5.5vw, 2.8rem);
    opacity: 0.5;
    animation-duration: 9s;
    animation-delay: -2s;
    transform: rotate(-18deg);
}

html[data-theme="velvet"] .velvet-sym--heart-a {
    left: 12%;
    top: 28%;
    font-size: clamp(1.6rem, 4.5vw, 2.4rem);
    color: #ff3d7a;
    opacity: 0.45;
    animation-duration: 6.5s;
    animation-delay: -1s;
}

html[data-theme="velvet"] .velvet-sym--heart-b {
    right: 14%;
    top: 42%;
    font-size: clamp(1.4rem, 4vw, 2rem);
    opacity: 0.5;
    animation-duration: 10s;
    animation-delay: -4s;
}

html[data-theme="velvet"] .velvet-sym--heart-c {
    left: 42%;
    top: 8%;
    font-size: clamp(1.2rem, 3.5vw, 1.7rem);
    opacity: 0.35;
    animation-duration: 8.5s;
    animation-delay: -3s;
}

html[data-theme="velvet"] .velvet-sym--cherry {
    right: 22%;
    bottom: 18%;
    font-size: clamp(1.8rem, 5vw, 2.6rem);
    opacity: 0.55;
    animation-duration: 7.5s;
    animation-delay: -1.5s;
}

html[data-theme="velvet"] .velvet-sym--rose {
    left: 4%;
    top: 58%;
    font-size: clamp(2rem, 6vw, 3rem);
    opacity: 0.48;
    animation-duration: 11s;
    animation-delay: -5s;
}

html[data-theme="velvet"] .velvet-sym--heel {
    right: 8%;
    bottom: 36%;
    font-size: clamp(1.7rem, 5vw, 2.5rem);
    opacity: 0.5;
    animation-duration: 9.5s;
    animation-delay: -2.5s;
}

html[data-theme="velvet"] .velvet-sym--glass {
    left: 18%;
    bottom: 8%;
    font-size: clamp(1.5rem, 4.5vw, 2.2rem);
    opacity: 0.42;
    animation-duration: 8s;
    animation-delay: -6s;
}

html[data-theme="velvet"] .velvet-sym--fire {
    right: 40%;
    top: 18%;
    font-size: clamp(1.3rem, 4vw, 1.9rem);
    opacity: 0.4;
    animation-duration: 5.5s;
}

html[data-theme="velvet"] .velvet-sym--spark {
    left: 55%;
    bottom: 30%;
    font-size: clamp(1.1rem, 3.5vw, 1.6rem);
    opacity: 0.45;
    animation-duration: 4.5s;
    animation-delay: -1s;
}

/* نوار توری / لیس ابریشمی */
html[data-theme="velvet"] .velvet-lace {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 52px;
    background:
        repeating-linear-gradient(
            90deg,
            transparent 0 10px,
            rgba(255, 80, 140, 0.08) 10px 12px
        ),
        radial-gradient(circle at 8px 28px, rgba(255, 100, 150, 0.35) 0 3px, transparent 3.5px),
        linear-gradient(180deg, rgba(255, 60, 120, 0.18), transparent 85%);
    background-size: auto, 24px 52px, auto;
    opacity: 0.7;
    mask-image: linear-gradient(180deg, black, transparent);
}

html[data-theme="velvet"] .velvet-lace--b {
    top: auto;
    bottom: 0;
    transform: scaleY(-1);
    opacity: 0.45;
}

@keyframes velvetSymFloat {
    0%, 100% { transform: translateY(0) rotate(var(--r, -6deg)) scale(1); }
    50% { transform: translateY(-12px) rotate(calc(var(--r, -6deg) + 6deg)) scale(1.06); }
}

/* —— دکوراسیون گل ماریجوانا + دود —— */
.velvet-deco {
    display: none;
    position: fixed;
    z-index: 0;
    pointer-events: none;
    width: min(220px, 42vw);
    height: auto;
    opacity: 0;
    filter: drop-shadow(0 12px 28px rgba(255, 30, 80, 0.45));
}

html[data-theme="velvet"] .velvet-deco {
    display: block;
    opacity: 0.82;
    object-fit: contain;
    border-radius: 18px;
    mix-blend-mode: screen;
}

html[data-theme="velvet"] .velvet-deco--a {
    right: -2%;
    bottom: 6%;
    animation: velvetFloatA 9s ease-in-out infinite;
}

html[data-theme="velvet"] .velvet-deco--b {
    left: -2%;
    top: 18%;
    width: min(150px, 32vw);
    opacity: 0.42;
    animation: velvetFloatB 11s ease-in-out infinite;
    animation-delay: -3.5s;
    filter: drop-shadow(0 8px 20px rgba(255, 80, 140, 0.25)) blur(0.4px);
}

html[data-theme="velvet"] .velvet-deco .velvet-smoke {
    animation: velvetSmoke 5.5s ease-in-out infinite;
    transform-origin: 160px 220px;
}

@keyframes velvetPulse {
    from { opacity: 0.75; transform: scale(1); }
    to { opacity: 1; transform: scale(1.08); }
}

@keyframes velvetFloatA {
    0%, 100% { transform: translateY(0) rotate(-8deg); }
    50% { transform: translateY(-14px) rotate(-4deg); }
}

@keyframes velvetFloatB {
    0%, 100% { transform: scaleX(-1) rotate(12deg) translateY(0); }
    50% { transform: scaleX(-1) rotate(8deg) translateY(-10px); }
}

@keyframes velvetSmoke {
    0%, 100% { opacity: 0.75; transform: translateY(0) scaleY(1); }
    50% { opacity: 1; transform: translateY(-10px) scaleY(1.06); }
}

html[data-theme="velvet"] .brand-avatar {
    background: transparent;
    border: none;
    box-shadow: none;
}

html[data-theme="velvet"] .brand-mark {
    filter: drop-shadow(0 2px 16px rgba(255, 40, 100, 0.65));
}

html[data-theme="velvet"] .btn-guide {
    border-color: rgba(255, 80, 140, 0.65);
    background: linear-gradient(180deg, #4a1830, #1f0a16);
    color: #ff7aa8;
    box-shadow: 0 4px 16px rgba(255, 30, 80, 0.35);
}

html[data-theme="velvet"] .btn-guide:hover {
    border-color: rgba(255, 122, 176, 0.9);
    box-shadow: 0 6px 22px rgba(255, 77, 141, 0.4);
}

html[data-theme="velvet"] .btn-rules {
    border-color: rgba(255, 140, 100, 0.6);
    background: linear-gradient(180deg, #4a2018, #1f0c0a);
    color: #ffb090;
    box-shadow: 0 4px 16px rgba(255, 90, 60, 0.3);
}

html[data-theme="velvet"] .btn-rules:hover {
    border-color: rgba(255, 170, 130, 0.9);
    box-shadow: 0 6px 22px rgba(255, 100, 70, 0.4);
}

html[data-theme="velvet"] .btn-support {
    border-color: rgba(120, 180, 255, 0.55);
    background: linear-gradient(180deg, #182840, #0a1220);
    color: #a8d0ff;
    box-shadow: 0 4px 16px rgba(80, 140, 255, 0.28);
}

html[data-theme="velvet"] .btn-support:hover {
    border-color: rgba(160, 200, 255, 0.9);
    box-shadow: 0 6px 22px rgba(90, 150, 255, 0.4);
}

html[data-theme="velvet"] .btn-dash {
    border-color: rgba(190, 150, 255, 0.55);
    background: linear-gradient(180deg, #2a1840, #12081e);
    color: #d8c4ff;
    box-shadow: 0 4px 16px rgba(140, 90, 255, 0.28);
}
html[data-theme="velvet"] .btn-dash:hover,
html[data-theme="velvet"] .btn-dash.is-on {
    border-color: rgba(210, 180, 255, 0.9);
    box-shadow: 0 6px 22px rgba(160, 110, 255, 0.4);
}

html[data-theme="velvet"] .btn-leaderboard {
    border-color: rgba(255, 122, 176, 0.5);
    background: linear-gradient(180deg, #3a1224, #16060e);
    color: #ffb3d0;
    box-shadow: 0 4px 14px rgba(255, 60, 120, 0.22);
}

html[data-theme="velvet"] .btn-leaderboard:hover {
    border-color: rgba(255, 160, 200, 0.85);
    box-shadow: 0 6px 18px rgba(255, 80, 140, 0.35);
}

html[data-theme="velvet"] .user-chip {
    background: linear-gradient(135deg, rgba(255, 77, 141, 0.22), rgba(194, 24, 91, 0.14));
    border-color: rgba(255, 77, 141, 0.4);
}

html[data-theme="velvet"] .user-chip:hover {
    border-color: rgba(255, 122, 176, 0.7);
    background: linear-gradient(135deg, rgba(255, 77, 141, 0.32), rgba(194, 24, 91, 0.2));
    box-shadow: 0 6px 18px rgba(255, 45, 100, 0.28);
}

html[data-theme="velvet"] .sfx-toggle-fab {
    border-color: rgba(255, 122, 176, 0.5);
    background: linear-gradient(180deg, #2a101c, #14080f);
    color: #ff7ab0;
    box-shadow: 0 4px 14px rgba(255, 77, 141, 0.22);
}

html[data-theme="velvet"] .sfx-toggle-fab:hover {
    border-color: rgba(255, 122, 176, 0.85);
    box-shadow: 0 6px 18px rgba(255, 77, 141, 0.32);
}

html[data-theme="velvet"] .sfx-toggle-fab.is-off {
    border-color: rgba(255, 45, 85, 0.55);
    color: #ff2d55;
}

html[data-theme="velvet"] .btn-theme {
    border-color: rgba(255, 77, 141, 0.65);
    background: linear-gradient(135deg, #ff4d8d, #c2185b 55%, #3a1528);
    color: #fff0f5;
    box-shadow: 0 4px 18px rgba(255, 45, 100, 0.4);
}

html[data-theme="velvet"] .btn-theme:hover {
    border-color: rgba(255, 122, 176, 0.9);
    box-shadow: 0 6px 22px rgba(255, 77, 141, 0.5);
}

html[data-theme="velvet"] .btn-theme.is-velvet {
    box-shadow:
        0 0 0 1px rgba(255, 180, 210, 0.25),
        0 6px 22px rgba(255, 45, 100, 0.45);
}

html[data-theme="velvet"] .btn-dict {
    border-color: rgba(255, 180, 210, 0.45);
    background: linear-gradient(180deg, #2a1420, #180a12);
    color: #ffd0e4;
    box-shadow: 0 4px 14px rgba(255, 77, 141, 0.22);
}

html[data-theme="velvet"] .btn-dict:hover {
    border-color: rgba(255, 180, 210, 0.8);
    box-shadow: 0 6px 18px rgba(255, 77, 141, 0.34);
    color: #fff0f5;
}

html[data-theme="velvet"] .btn-logout-mini {
    border-color: rgba(255, 45, 85, 0.45);
    background: linear-gradient(180deg, #2a1018, #14080c);
    color: #ff6b8a;
    box-shadow: 0 3px 12px rgba(255, 45, 85, 0.22);
}

html[data-theme="velvet"] .card {
    border-color: rgba(255, 80, 140, 0.32);
    box-shadow: var(--shadow);
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

html[data-theme="velvet"] .card.play-card {
    overflow: visible;
}

html[data-theme="velvet"] .card::after {
    content: "♥";
    position: absolute;
    top: 10px;
    left: 14px;
    font-size: 0.85rem;
    color: #ff3d7a;
    opacity: 0.35;
    pointer-events: none;
    text-shadow: 0 0 12px rgba(255, 40, 100, 0.5);
}

html[data-theme="velvet"] .card.rule-maker {
    border-color: rgba(255, 80, 140, 0.55);
    background:
        radial-gradient(ellipse 120% 80% at 100% 0%, rgba(255, 60, 120, 0.28), transparent 55%),
        radial-gradient(ellipse 90% 70% at 0% 100%, rgba(240, 180, 200, 0.1), transparent 50%),
        linear-gradient(165deg, #3a1224 0%, #16060e 48%, #0a0408 100%);
    box-shadow:
        0 18px 48px rgba(255, 20, 80, 0.3),
        0 0 0 1px rgba(255, 180, 210, 0.12) inset,
        0 0 40px rgba(255, 40, 100, 0.12);
}

html[data-theme="velvet"] .card.rule-maker .rule-panel-title {
    color: #ff7aa8;
    text-shadow: 0 0 18px rgba(255, 60, 120, 0.45);
}

html[data-theme="velvet"] .field input,
html[data-theme="velvet"] .field select,
html[data-theme="velvet"] .rule-row select,
html[data-theme="velvet"] .rule-row input,
html[data-theme="velvet"] .capacity-bar-select,
html[data-theme="velvet"] .word-row-input {
    border-color: rgba(255, 77, 141, 0.28);
    background: rgba(8, 4, 10, 0.55);
    box-shadow: inset 0 1px 0 rgba(255, 180, 210, 0.06);
    color: var(--text);
}

html[data-theme="velvet"] .field input:focus,
html[data-theme="velvet"] .field select:focus,
html[data-theme="velvet"] .word-row-input:focus {
    border-color: rgba(255, 122, 176, 0.75);
    box-shadow: 0 0 0 3px rgba(255, 77, 141, 0.2), 0 0 20px rgba(255, 45, 100, 0.15);
}

html[data-theme="velvet"] .capacity-bar {
    border-color: rgba(255, 77, 141, 0.22);
    background: linear-gradient(180deg, #1a0c14, #12080e);
}

html[data-theme="velvet"] .capacity-bar-label {
    color: #c492a6;
}

html[data-theme="velvet"] .soft-select-trigger {
    background: #1a0c14;
    border-color: rgba(255, 77, 141, 0.35);
    color: var(--text);
    box-shadow: 0 4px 14px rgba(255, 45, 100, 0.12);
}

html[data-theme="velvet"] .soft-select-trigger::after {
    border-right-color: #c492a6;
    border-bottom-color: #c492a6;
}

html[data-theme="velvet"] .soft-select-trigger:hover,
html[data-theme="velvet"] .soft-select.is-open .soft-select-trigger {
    border-color: rgba(255, 122, 176, 0.7);
    background: linear-gradient(180deg, #2a101c, #1a0c14);
    box-shadow: 0 0 0 3px rgba(255, 77, 141, 0.16);
}

html[data-theme="velvet"] .soft-select--char .soft-select-trigger {
    background: linear-gradient(180deg, #2a101c, #1a0c14);
    border-color: rgba(255, 77, 141, 0.4);
    color: #ffe6ef;
    box-shadow: 0 4px 14px rgba(255, 45, 100, 0.16);
}

html[data-theme="velvet"] .soft-select--char.is-locked-all .soft-select-trigger {
    background: linear-gradient(180deg, #181018, #100810);
    border-color: rgba(196, 146, 166, 0.28);
    color: #c492a6;
}

html[data-theme="velvet"] .soft-select-menu,
html[data-theme="velvet"] .soft-select-menu.is-portal {
    border-color: rgba(255, 77, 141, 0.35);
    background: linear-gradient(180deg, #2a101c, #14080f);
    box-shadow: 0 18px 40px rgba(255, 45, 100, 0.28);
}

html[data-theme="velvet"] .soft-select-option:hover {
    background: rgba(255, 77, 141, 0.14);
}

html[data-theme="velvet"] .soft-select-option.is-on {
    background: linear-gradient(135deg, rgba(255, 77, 141, 0.35), rgba(194, 24, 91, 0.25));
    color: #ffd0e0;
}

html[data-theme="velvet"] .capacity-bar-select,
html[data-theme="velvet"] .capacity-bar-select option {
    background: #1a0c14;
    color: var(--text);
}

html[data-theme="velvet"] .btn-main {
    background: linear-gradient(135deg, #ff5a9a 0%, #ff1f4b 40%, #c2185b 78%, #8b0a3a 100%);
    color: #fff5f8;
    box-shadow:
        0 12px 30px rgba(255, 20, 80, 0.5),
        0 0 28px rgba(255, 60, 120, 0.28),
        inset 0 1px 0 rgba(255, 220, 230, 0.35);
    text-shadow: 0 1px 0 rgba(80, 0, 30, 0.3);
    letter-spacing: 0.01em;
}

html[data-theme="velvet"] .btn-main:hover {
    filter: brightness(1.08) saturate(1.08);
    box-shadow:
        0 16px 36px rgba(255, 20, 80, 0.58),
        0 0 40px rgba(255, 60, 120, 0.38),
        inset 0 1px 0 rgba(255, 220, 230, 0.4);
}

html[data-theme="velvet"] .btn-soft {
    background: rgba(26, 12, 20, 0.9);
    border-color: rgba(255, 77, 141, 0.35);
    color: #ffb3d0;
}

html[data-theme="velvet"] .btn-soft.is-acted,
html[data-theme="velvet"] .btn-sm.is-acted {
    background: rgba(255, 77, 141, 0.22);
    border-color: rgba(255, 122, 176, 0.75);
    color: #ffe0ec;
    box-shadow: 0 0 0 2px rgba(255, 77, 141, 0.18);
}

html[data-theme="velvet"] .mode-pick .mode-btn {
    background: rgba(20, 8, 14, 0.9);
    border: 2px solid rgba(255, 77, 141, 0.22);
    color: #c492a6;
    box-shadow: none;
    font-weight: 700;
}

html[data-theme="velvet"] .mode-pick .mode-btn.is-system-mode {
    color: #8ff0e4;
    border-color: rgba(94, 232, 214, 0.35);
}
html[data-theme="velvet"] .mode-pick .mode-btn.is-system-mode.is-on {
    background: linear-gradient(135deg, #5ee8d6, #1aa89a);
    border-color: transparent;
    color: #042824;
    box-shadow:
        0 10px 24px rgba(40, 200, 180, 0.32),
        0 0 0 2px rgba(180, 255, 240, 0.22) inset;
    transform: translateY(-1px);
}
html[data-theme="velvet"] .mode-pick .mode-btn.is-self-mode {
    color: #d7c6ff;
    border-color: rgba(155, 125, 255, 0.38);
}
html[data-theme="velvet"] .mode-pick .mode-btn.is-self-mode.is-on {
    background: linear-gradient(135deg, #9b7dff, #6d4ad6);
    border-color: transparent;
    color: #f8f4ff;
    box-shadow:
        0 10px 24px rgba(109, 74, 214, 0.38),
        0 0 0 2px rgba(220, 200, 255, 0.22) inset;
    transform: translateY(-1px);
}

html[data-theme="velvet"] .mode-pick .mode-btn.is-system-mode:not(.is-on):hover {
    border-color: rgba(94, 232, 214, 0.6);
    color: #b8fff4;
    background: rgba(16, 28, 26, 0.95);
}
html[data-theme="velvet"] .mode-pick .mode-btn.is-self-mode:not(.is-on):hover {
    border-color: rgba(155, 125, 255, 0.6);
    color: #e8dcff;
    background: rgba(28, 16, 42, 0.95);
}

html[data-theme="velvet"] .btn-coral {
    background: linear-gradient(135deg, #ff2d55, #ff4d8d);
    color: #fff8fa;
}

html[data-theme="velvet"] .alert {
    background: rgba(255, 45, 85, 0.12);
    border-color: rgba(255, 45, 85, 0.45);
    color: #ff8aa8;
}

html[data-theme="velvet"] .seg-btn.is-on {
    background: linear-gradient(180deg, rgba(255, 77, 141, 0.3), rgba(42, 16, 28, 0.95));
    box-shadow: 0 0 0 1px rgba(255, 77, 141, 0.5);
}

html[data-theme="velvet"] .seg-btn.is-join-tab {
    color: #ffd28a;
}
html[data-theme="velvet"] .seg-btn.is-join-tab.is-on {
    color: #2a1608;
    background: linear-gradient(135deg, #ffb347, #e08a1a);
    box-shadow: 0 8px 18px rgba(224, 138, 26, 0.36);
}
html[data-theme="velvet"] .seg-btn.is-create-tab {
    color: #d7c6ff;
}
html[data-theme="velvet"] .seg-btn.is-create-tab.is-on {
    color: #f8f4ff;
    background: linear-gradient(135deg, #9b7dff, #6d4ad6);
    box-shadow: 0 8px 18px rgba(109, 74, 214, 0.4);
}

html[data-theme="velvet"] .btn-join-group {
    background: linear-gradient(135deg, #ffb347, #e08a1a);
    color: #2a1608;
    box-shadow: 0 12px 28px rgba(224, 138, 26, 0.32);
}
html[data-theme="velvet"] .btn-create-group {
    background: linear-gradient(135deg, #9b7dff, #6d4ad6);
    color: #f8f4ff;
    box-shadow: 0 12px 28px rgba(109, 74, 214, 0.34);
}

html[data-theme="velvet"] .avatar-cat.is-on,
html[data-theme="velvet"] .avatar-grid button.is-on {
    border-color: #ff4d8d;
    background: rgba(255, 77, 141, 0.18);
    color: #ffd0e0;
}

html[data-theme="velvet"] .guide-overlay,
html[data-theme="velvet"] .rules-overlay,
html[data-theme="velvet"] .logout-overlay {
    background: rgba(20, 4, 12, 0.62);
}

html[data-theme="velvet"] .profile-overlay.is-open {
    background: rgba(20, 4, 12, 0.7);
}

html[data-theme="velvet"] .guide-card {
    background: linear-gradient(180deg, #2a101c, #14080f);
    border-color: rgba(255, 77, 141, 0.4);
}

html[data-theme="velvet"] .rules-sheet {
    background:
        radial-gradient(120% 80% at 100% 0%, rgba(255, 100, 70, 0.18), transparent 55%),
        linear-gradient(180deg, #2a1410, #120808);
    border-color: rgba(255, 120, 90, 0.35);
}

html[data-theme="velvet"] .rules-value {
    color: #ffd0c0;
    background: linear-gradient(180deg, rgba(255, 120, 90, 0.28), rgba(255, 80, 60, 0.12));
    border-color: rgba(255, 140, 100, 0.4);
}

html[data-theme="velvet"] .logout-dialog {
    background:
        radial-gradient(ellipse 90% 70% at 50% -20%, rgba(255, 45, 85, 0.28), transparent 58%),
        linear-gradient(180deg, #2a101c 0%, #14080f 100%);
    border-color: rgba(255, 45, 85, 0.35);
    box-shadow: 0 28px 60px rgba(255, 45, 100, 0.3);
}

html[data-theme="velvet"] .logout-title {
    color: #ff7ab0;
}

html[data-theme="velvet"] .profile-sheet {
    scrollbar-color: rgba(255, 77, 141, 0.45) transparent;
}

html[data-theme="velvet"] .profile-close {
    background: rgba(26, 12, 20, 0.9);
    border: 1px solid rgba(255, 77, 141, 0.35);
    color: #c492a6;
}

html[data-theme="velvet"] .leaderboard-sheet {
    border-color: rgba(255, 77, 141, 0.28);
    box-shadow: 0 -8px 44px rgba(255, 45, 100, 0.28);
}

html[data-theme="velvet"] .profile-face {
    border-color: rgba(255, 77, 141, 0.45);
    box-shadow: 0 10px 32px rgba(255, 45, 100, 0.35), 0 0 20px rgba(255, 77, 141, 0.15);
}

html[data-theme="velvet"] .difficulty-track {
    background: rgba(255, 77, 141, 0.18);
}

html[data-theme="velvet"] .lb-handle {
    background: rgba(255, 77, 141, 0.4);
}

html[data-theme="velvet"] .leaderboard-head {
    border-bottom-color: rgba(255, 77, 141, 0.2);
}

html[data-theme="velvet"] .lb-city-bar {
    border-bottom-color: rgba(255, 77, 141, 0.16);
}

html[data-theme="velvet"] .lb-city-chip,
html[data-theme="velvet"] .lb-scope-tabs {
    background: rgba(26, 12, 20, 0.92);
    border-color: rgba(255, 77, 141, 0.28);
    color: var(--text);
}

html[data-theme="velvet"] .lb-city-chip.is-on {
    background: linear-gradient(135deg, rgba(255, 77, 141, 0.35), rgba(194, 24, 91, 0.28));
    border-color: rgba(255, 122, 176, 0.6);
    color: #ffe0ec;
}

html[data-theme="velvet"] .lb-coin.is-bronze { background: rgba(184, 115, 51, 0.22); color: #f0c078; }
html[data-theme="velvet"] .lb-coin.is-silver { background: rgba(148, 163, 184, 0.22); color: #d0d8e4; }
html[data-theme="velvet"] .lb-coin.is-gold { background: rgba(250, 204, 21, 0.2); color: #ffe08a; }

html[data-theme="velvet"] .play-mode-block,
html[data-theme="velvet"] .extra-words-block,
html[data-theme="velvet"] .refresh-bar,
html[data-theme="velvet"] .difficulty-box {
    background: linear-gradient(180deg, #1a0c14, #12080e);
    border-color: rgba(255, 77, 141, 0.22);
}

html[data-theme="velvet"] .play-mode-option {
    background: #14080f;
    border-color: rgba(255, 77, 141, 0.22);
}

html[data-theme="velvet"] .play-mode-option.is-on,
html[data-theme="velvet"] .play-mode-option:has(input:checked) {
    border-color: rgba(255, 122, 176, 0.6);
    background: linear-gradient(135deg, rgba(255, 77, 141, 0.25), rgba(194, 24, 91, 0.18));
    box-shadow: 0 0 0 1px rgba(255, 77, 141, 0.14);
}

html[data-theme="velvet"] .play-mode-preview {
    border: 1px solid rgba(255, 77, 141, 0.3);
    background:
        linear-gradient(165deg, rgba(255, 77, 141, 0.18) 0%, transparent 46%),
        linear-gradient(180deg, #1a0c14 0%, #12080e 100%);
    box-shadow:
        0 14px 32px rgba(255, 45, 100, 0.2),
        inset 0 1px 0 rgba(255, 180, 210, 0.08);
}

html[data-theme="velvet"] .pm-brief-head {
    border-bottom: 1px solid rgba(255, 77, 141, 0.18);
    background: linear-gradient(120deg, rgba(255, 77, 141, 0.22), rgba(194, 24, 91, 0.14) 50%, rgba(110, 231, 168, 0.08));
}

html[data-theme="velvet"] .pm-brief.is-timed .pm-brief-head {
    background: linear-gradient(120deg, rgba(255, 45, 85, 0.22), rgba(255, 77, 141, 0.16) 50%, rgba(255, 122, 176, 0.1));
}

html[data-theme="velvet"] .pm-brief.is-quota .pm-brief-head {
    background: linear-gradient(120deg, rgba(110, 231, 168, 0.14), rgba(255, 77, 141, 0.12) 50%, rgba(194, 24, 91, 0.1));
}

html[data-theme="velvet"] .pm-brief-kicker {
    color: #ff7ab0;
    letter-spacing: 0.04em;
}

html[data-theme="velvet"] .pm-brief-title {
    color: #ffe6ef;
}

html[data-theme="velvet"] .pm-brief-badge {
    background: linear-gradient(160deg, #3a1528, #ff4d8d);
    border: 1px solid rgba(255, 122, 176, 0.4);
    box-shadow: 0 6px 16px rgba(255, 45, 100, 0.28);
}

html[data-theme="velvet"] .pm-brief-badge::before {
    border-color: rgba(255, 122, 176, 0.35);
}

html[data-theme="velvet"] .pm-brief-badge-num {
    color: #fff5f8;
}

html[data-theme="velvet"] .pm-brief-badge-unit {
    color: #ffd0e0;
    letter-spacing: 0.06em;
}

html[data-theme="velvet"] .pm-brief-metric {
    background: #14080f;
    border: 1px solid rgba(255, 77, 141, 0.18);
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(255, 45, 100, 0.1);
    padding: 12px 12px 13px;
    position: relative;
    overflow: hidden;
}

html[data-theme="velvet"] .pm-brief-metric::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    border-radius: 14px 14px 0 0;
}

html[data-theme="velvet"] .pm-brief-metric:nth-child(1)::before {
    background: linear-gradient(90deg, #ff4d8d, #ff2d55);
}

html[data-theme="velvet"] .pm-brief-metric:nth-child(2)::before {
    background: linear-gradient(90deg, #6ee7a8, #ff7ab0);
}

html[data-theme="velvet"] .pm-brief-metric:nth-child(3)::before {
    background: linear-gradient(90deg, #ff7ab0, #c2185b);
}

html[data-theme="velvet"] .pm-brief-metric:nth-child(4)::before {
    background: linear-gradient(90deg, #c2185b, #ff4d8d);
}

html[data-theme="velvet"] .pm-brief-label {
    color: #c492a6;
}

html[data-theme="velvet"] .pm-brief-value {
    color: #ffe6ef;
}

html[data-theme="velvet"] .pm-brief-sub {
    color: #a87890;
}

html[data-theme="velvet"] .word-row {
    background: rgba(20, 8, 14, 0.85);
    border-color: rgba(255, 77, 141, 0.2);
}

html[data-theme="velvet"] .word-row.is-in-dict .word-row-input {
    background: rgba(110, 231, 168, 0.12);
    border-color: rgba(110, 231, 168, 0.45);
}

html[data-theme="velvet"] .word-row.is-rule-bad .word-row-input,
html[data-theme="velvet"] .word-row.is-len-short .word-row-input {
    background: rgba(255, 45, 85, 0.12);
}

html[data-theme="velvet"] .word-row.is-dup .word-row-input {
    background: rgba(255, 122, 176, 0.12);
}

html[data-theme="velvet"] .iran-map-tip {
    background: rgba(26, 12, 20, 0.97);
    border-color: rgba(255, 77, 141, 0.4);
    color: var(--text);
}

html[data-theme="velvet"] .iran-map-tip-ranks {
    color: rgba(255, 230, 239, 0.88);
}

html[data-theme="velvet"] .iran-map-svg-wrap g.province > a path {
    stroke: rgba(255, 180, 210, 0.45);
    fill: #ff4d8d;
    fill-opacity: 0.16;
}

html[data-theme="velvet"] .iran-map-svg-wrap g.province > a path.is-hot {
    stroke: #ff4d8d;
}

html[data-theme="velvet"] .iran-map-svg-wrap g.sea path,
html[data-theme="velvet"] .iran-map-svg-wrap g.lake path {
    fill: #6ee7a8;
    fill-opacity: 0.35;
}

html[data-theme="velvet"] .switch {
    background: rgba(255, 77, 141, 0.25);
}

html[data-theme="velvet"] .switch.is-on {
    background: var(--saffron);
}

html[data-theme="velvet"] .mode-switch-plain {
    background: rgba(26, 12, 20, 0.92);
    border-color: rgba(255, 77, 141, 0.28);
}

html[data-theme="velvet"] .mode-switch-plain > span {
    color: #ffe6ef;
    font-weight: 700;
}

html[data-theme="velvet"] .rule-panel {
    background: linear-gradient(180deg, #1a0c14, #12080e);
    border: 1px solid rgba(255, 77, 141, 0.28);
    box-shadow: 0 8px 22px rgba(255, 45, 100, 0.12);
}

html[data-theme="velvet"] .rule-panel-title {
    color: #ff7ab0;
    font-weight: 800;
}

html[data-theme="velvet"] .rule-ui-mode-btn {
    background: #14080f;
    border-color: rgba(255, 77, 141, 0.4);
    color: #ffb3d0;
}

html[data-theme="velvet"] .rule-ui-mode-btn.is-on {
    background: linear-gradient(135deg, rgba(255, 77, 141, 0.35), rgba(194, 24, 91, 0.25));
    border-color: rgba(255, 122, 176, 0.6);
    color: #ffe0ec;
    box-shadow: 0 0 0 1px rgba(255, 77, 141, 0.14);
}

html[data-theme="velvet"] .rule-ui-mode-hint {
    color: #c492a6;
}

html[data-theme="velvet"] .rule-sentence-box {
    background: linear-gradient(180deg, #1a0c14, #12080e);
    border: 1px solid rgba(255, 77, 141, 0.28);
    box-shadow: 0 4px 14px rgba(255, 45, 100, 0.1);
}

html[data-theme="velvet"] .rule-sentence-row {
    background: transparent;
    border: 0;
    color: #ffe6ef;
}

html[data-theme="velvet"] .rule-sentence-label {
    color: #ffb3d0;
    font-weight: 800;
    font-size: 0.9rem;
}

html[data-theme="velvet"] .rule-lock-hint {
    color: #ff7ab0;
    font-weight: 600;
}

html[data-theme="velvet"] .mode-toggle-wrap {
    border-color: rgba(255, 77, 141, 0.4);
    box-shadow: 0 0 0 1px rgba(255, 77, 141, 0.08);
}

html[data-theme="velvet"] .mode-toggle-wrap button {
    background: #1a0c14;
    color: #c492a6;
}

html[data-theme="velvet"] .mode-toggle-wrap button.mode-btn-yes.is-active {
    background: linear-gradient(180deg, rgba(110, 231, 168, 0.35), rgba(110, 231, 168, 0.18));
    color: #6ee7a8;
    font-weight: 800;
}

html[data-theme="velvet"] .mode-toggle-wrap button.mode-btn-no.is-active {
    background: linear-gradient(180deg, rgba(255, 45, 85, 0.4), rgba(255, 45, 85, 0.18));
    color: #ff6b8a;
    font-weight: 800;
}

html[data-theme="velvet"] .mode-toggle-wrap.is-locked-mode button.mode-btn-yes {
    background: linear-gradient(180deg, rgba(110, 231, 168, 0.35), rgba(110, 231, 168, 0.18));
    color: #6ee7a8;
}

html[data-theme="velvet"] .soft-select--char .soft-select-trigger {
    color: #ffe6ef;
    font-weight: 800;
}

html[data-theme="velvet"] .rule-lamp > span,
html[data-theme="velvet"] .state-switch {
    color: #ffb3d0;
}

html[data-theme="velvet"] .word-mode-label {
    color: #ffd0e0;
    font-weight: 700;
}

html[data-theme="velvet"] .matched-words-preview,
html[data-theme="velvet"] .dict-count-box {
    background: linear-gradient(180deg, #1a0c14, #12080e);
    border-color: rgba(255, 77, 141, 0.22);
}

html[data-theme="velvet"] .foot {
    color: rgba(196, 146, 166, 0.55);
}

html[data-theme="velvet"] .quota-banner {
    background: linear-gradient(135deg, rgba(110, 231, 168, 0.18) 0%, rgba(255, 77, 141, 0.2) 55%, rgba(194, 24, 91, 0.22) 100%);
    border: 1px solid rgba(255, 122, 176, 0.4);
    color: #ffe0ec;
    font-weight: 800;
    font-size: 0.95rem;
    box-shadow:
        0 6px 18px rgba(255, 45, 100, 0.2),
        inset 0 1px 0 rgba(255, 180, 210, 0.12);
}

html[data-theme="velvet"] .play-card > .hint {
    color: #ffb3d0;
    font-weight: 600;
}

html[data-theme="velvet"] .picker-live {
    background:
        radial-gradient(ellipse 80% 70% at 50% 0%, rgba(255, 77, 141, 0.28), transparent 58%),
        radial-gradient(ellipse 60% 50% at 100% 100%, rgba(240, 180, 200, 0.1), transparent 50%),
        linear-gradient(180deg, #2a101c, #12080e);
    border-color: rgba(255, 77, 141, 0.4);
}

html[data-theme="velvet"] .picker-live-avatar {
    background: linear-gradient(165deg, #3a1224, #16060e);
    border-color: rgba(255, 77, 141, 0.65);
}

html[data-theme="velvet"] .picker-chip {
    background: rgba(0, 0, 0, 0.35);
    border-color: rgba(255, 77, 141, 0.22);
}

html[data-theme="velvet"] .play-heart {
    color: #ff4d8d;
}

html[data-theme="velvet"] .hand-rule {
    --hr-accent: #ff4d8d;
    background:
        radial-gradient(120% 80% at 100% 0%, rgba(255, 77, 141, 0.22), transparent 55%),
        radial-gradient(90% 70% at 0% 100%, rgba(110, 231, 168, 0.1), transparent 50%),
        linear-gradient(165deg, #2a101c 0%, #14080f 48%, #0c0509 100%);
    border: 1px solid rgba(255, 77, 141, 0.4);
    box-shadow:
        0 14px 36px rgba(255, 45, 100, 0.22),
        inset 0 1px 0 rgba(255, 180, 210, 0.1);
}

html[data-theme="velvet"] .hand-rule-mark {
    background: radial-gradient(circle at 35% 35%, #ff7ab0, #ff4d8d 55%, #c2185b);
    box-shadow: 0 0 0 4px rgba(255, 77, 141, 0.22), 0 0 20px rgba(255, 45, 100, 0.35);
}

html[data-theme="velvet"] .hand-rule-label {
    color: #ff7ab0;
    font-size: 1.02rem;
    letter-spacing: 0;
}

html[data-theme="velvet"] .hand-rule-diff {
    background: rgba(8, 2, 6, 0.45);
    border-color: rgba(255, 77, 141, 0.22);
}

html[data-theme="velvet"] .hand-rule-diff-label {
    color: #ffb3d0;
}

html[data-theme="velvet"] .hand-rule-pattern {
    background: #14080f;
    border: 1px solid rgba(255, 77, 141, 0.28);
    box-shadow: 0 4px 14px rgba(255, 45, 100, 0.12);
    gap: 6px;
    padding: 12px 10px;
}

html[data-theme="velvet"] .hand-rule-axis-plus {
    color: #ff4d8d;
    opacity: 0.9;
    font-size: 1.25rem;
}

html[data-theme="velvet"] .hand-rule-axis {
    gap: 8px;
    padding: 8px 6px;
    border-radius: 12px;
    border: 1px solid transparent;
    min-height: 64px;
}

html[data-theme="velvet"] .hand-rule-axis-title {
    color: #c492a6;
    font-size: 0.76rem;
    font-weight: 700;
}

html[data-theme="velvet"] .hand-rule-axis-value {
    color: #ffe6ef;
    font-size: 1.2rem;
}

html[data-theme="velvet"] .hand-rule-axis.is-any {
    background: rgba(26, 12, 20, 0.8);
    border-color: rgba(255, 77, 141, 0.14);
}

html[data-theme="velvet"] .hand-rule-axis.is-any .hand-rule-axis-title {
    color: #a87890;
}

html[data-theme="velvet"] .hand-rule-axis.is-any .hand-rule-axis-value {
    color: #c492a6;
    font-size: 0.9rem;
    font-weight: 700;
}

html[data-theme="velvet"] .hand-rule-axis.is-active {
    background: linear-gradient(180deg, rgba(110, 231, 168, 0.2), rgba(20, 40, 30, 0.9));
    border: 2px solid rgba(110, 231, 168, 0.55);
    box-shadow:
        0 6px 18px rgba(110, 231, 168, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

html[data-theme="velvet"] .hand-rule-axis.is-active .hand-rule-axis-title {
    color: #6ee7a8;
    font-weight: 800;
}

html[data-theme="velvet"] .hand-rule-axis.is-active .hand-rule-axis-value {
    color: #b8f5d4;
    font-size: 1.55rem;
    font-weight: 800;
    line-height: 1.1;
}

html[data-theme="velvet"] .hand-rule-axis.is-forbid {
    background: linear-gradient(180deg, rgba(255, 45, 85, 0.22), rgba(40, 10, 18, 0.95));
    border: 2px solid rgba(255, 45, 85, 0.45);
    box-shadow: 0 6px 16px rgba(255, 45, 85, 0.2);
}

html[data-theme="velvet"] .hand-rule-axis.is-forbid .hand-rule-axis-title,
html[data-theme="velvet"] .hand-rule-axis.is-forbid .hand-rule-axis-value {
    color: #ff6b8a;
}

html[data-theme="velvet"] .hand-rule-axis.is-forbid .hand-rule-axis-value {
    font-size: 1.55rem;
}

html[data-theme="velvet"] .hand-rule-form {
    background: linear-gradient(135deg, rgba(110, 231, 168, 0.14), rgba(255, 77, 141, 0.14));
    border: 1px solid rgba(255, 122, 176, 0.35);
    box-shadow: 0 4px 14px rgba(255, 45, 100, 0.12);
    padding: 12px 14px;
}

html[data-theme="velvet"] .hand-rule-form-label {
    color: #ffb3d0;
    font-weight: 700;
    font-size: 0.82rem;
}

html[data-theme="velvet"] .hand-rule-form-value {
    color: #ffe6ef;
    font-size: 0.98rem;
    background: rgba(8, 4, 10, 0.55);
    border: 1px solid rgba(255, 77, 141, 0.28);
    border-radius: 999px;
    padding: 5px 12px;
}

html[data-theme="velvet"] .hand-rule-form.is-single {
    background: linear-gradient(135deg, rgba(255, 77, 141, 0.22), rgba(194, 24, 91, 0.18));
    border-color: rgba(255, 122, 176, 0.45);
    box-shadow: 0 4px 14px rgba(255, 45, 100, 0.18);
}

html[data-theme="velvet"] .hand-rule-form.is-single .hand-rule-form-label {
    color: #ff7ab0;
}

html[data-theme="velvet"] .hand-rule-form.is-single .hand-rule-form-value {
    color: #ffe0ec;
    border-color: rgba(255, 122, 176, 0.4);
}

html[data-theme="velvet"] .hand-rule-form.is-multi {
    background: linear-gradient(135deg, rgba(110, 231, 168, 0.14), rgba(255, 77, 141, 0.12));
    border-color: rgba(110, 231, 168, 0.35);
}

html[data-theme="velvet"] .hand-rule-form.is-both {
    background: linear-gradient(135deg, rgba(110, 231, 168, 0.12) 0%, rgba(255, 77, 141, 0.16) 50%, rgba(194, 24, 91, 0.16) 100%);
    border-color: rgba(255, 122, 176, 0.35);
}

html[data-theme="velvet"] .hand-rule-item {
    background: #14080f;
    border: 1px solid rgba(255, 77, 141, 0.22);
    color: #ffe6ef;
    box-shadow: 0 3px 12px rgba(255, 45, 100, 0.1);
}

html[data-theme="velvet"] .hand-rule-ico {
    color: #ff4d8d;
}

html[data-theme="velvet"] .hand-rule-item-meta {
    color: #ff7ab0;
}

html[data-theme="velvet"] .hand-rule-item.is-letter {
    background: linear-gradient(105deg, rgba(255, 77, 141, 0.22), rgba(42, 16, 28, 0.95) 55%, #14080f);
    border-color: rgba(255, 122, 176, 0.4);
}

html[data-theme="velvet"] .hand-rule-letter {
    color: #fff5f8;
    background: linear-gradient(145deg, #ff7ab0, #ff4d8d 55%, #c2185b);
    box-shadow:
        0 6px 16px rgba(255, 45, 100, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

html[data-theme="velvet"] .hand-rule-item.is-forbid {
    background: linear-gradient(105deg, rgba(255, 45, 85, 0.2), #14080c);
    border-color: rgba(255, 45, 85, 0.35);
}

html[data-theme="velvet"] .hand-rule-item.is-forbid .hand-rule-letter {
    color: #fff8f8;
    background: linear-gradient(145deg, #ff6b8a, #ff2d55);
    box-shadow: 0 6px 14px rgba(255, 45, 85, 0.32);
}

html[data-theme="velvet"] .hand-rule-item.is-forbid .hand-rule-ico,
html[data-theme="velvet"] .hand-rule-item.is-forbid .hand-rule-item-meta {
    color: #ff2d55;
}

html[data-theme="velvet"] .hand-rule-item.is-form {
    background: linear-gradient(180deg, rgba(110, 231, 168, 0.12), #14080f);
    border-color: rgba(110, 231, 168, 0.28);
}

html[data-theme="velvet"] .hand-rule-item.is-form .hand-rule-ico {
    color: #6ee7a8;
}

html[data-theme="velvet"] .hand-rule-item.is-tag {
    background: linear-gradient(180deg, rgba(255, 122, 176, 0.12), #14080f);
    border-color: rgba(255, 122, 176, 0.28);
}

html[data-theme="velvet"] .hand-rule-item.is-length {
    background: linear-gradient(180deg, rgba(255, 77, 141, 0.1), #14080f);
    border-color: rgba(255, 77, 141, 0.28);
}

html[data-theme="velvet"] .hand-rule-range-val {
    color: #ff7ab0;
}

html[data-theme="velvet"] .hand-rule-range-track {
    background: rgba(255, 77, 141, 0.18);
}

html[data-theme="velvet"] .hand-rule-range-fill {
    background: linear-gradient(90deg, #ff4d8d, #ff2d55, #6ee7a8);
}

html[data-theme="velvet"] .hand-rule-range-dot {
    background: #ffe6ef;
    border-color: #ff4d8d;
    box-shadow: 0 0 0 3px rgba(255, 77, 141, 0.25);
}

html[data-theme="velvet"] .hand-rule-range-caption {
    color: #c492a6;
}

@media (max-width: 520px) {
    html[data-theme="velvet"] body::before {
        background:
            radial-gradient(ellipse 100% 55% at 4% 0%, rgba(255, 30, 90, 0.46), transparent 60%),
            radial-gradient(ellipse 90% 50% at 100% 4%, rgba(190, 20, 80, 0.36), transparent 55%),
            radial-gradient(ellipse 70% 40% at 50% 0%, rgba(255, 120, 160, 0.18), transparent 55%),
            radial-gradient(ellipse 75% 45% at 70% 100%, rgba(240, 180, 200, 0.14), transparent 60%),
            radial-gradient(ellipse 100% 60% at 50% 55%, rgba(255, 40, 100, 0.12), transparent 75%),
            var(--ink);
    }

    html[data-theme="velvet"] .bg-glow {
        right: -4%;
        bottom: -4%;
        width: min(96vw, 480px);
        height: min(96vw, 480px);
    }

    html[data-theme="velvet"] .velvet-deco--b {
        display: block;
        left: 0;
        top: 14%;
        width: min(120px, 30vw);
        opacity: 0.4;
    }

    html[data-theme="velvet"] .velvet-deco--a {
        width: min(168px, 44vw);
        opacity: 0.78;
        bottom: 4%;
        right: 0;
    }

    html[data-theme="velvet"] .velvet-sym--heel,
    html[data-theme="velvet"] .velvet-sym--glass {
        display: none;
    }

    html[data-theme="velvet"] .velvet-sym {
        opacity: 0.48;
    }

    html[data-theme="velvet"] .velvet-lace {
        height: 40px;
        opacity: 0.65;
    }
}

/* تقویم — تم مخمل */
html[data-theme="velvet"] .cal-sheet {
    border-color: rgba(255, 77, 141, 0.3);
    box-shadow: 0 -8px 44px rgba(255, 45, 100, 0.28);
}

html[data-theme="velvet"] .cal-nav-btn {
    background: rgba(26, 12, 20, 0.9);
    border-color: rgba(255, 77, 141, 0.3);
}

html[data-theme="velvet"] .cal-cell.is-future {
    opacity: 0.42;
}

html[data-theme="velvet"] .btn-calendar {
    border-color: rgba(255, 77, 141, 0.45);
    background: linear-gradient(180deg, rgba(255, 77, 141, 0.28), rgba(255, 45, 100, 0.12));
    color: #ffe8f2;
    box-shadow: 0 4px 14px rgba(255, 45, 100, 0.22);
}

html[data-theme="velvet"] .btn-calendar:hover {
    border-color: rgba(255, 122, 168, 0.65);
}