/* Takbeer counter styles */
.takbeer-page { min-height: calc(100vh - 120px); padding: 3rem 1rem; background: radial-gradient(circle at top left, rgba(220, 176, 104, 0.28), transparent 30%), linear-gradient(135deg, #f9f4ea 0%, #eef6f1 52%, #e3efe8 100%); }
.takbeer-counter { max-width: 760px; margin: 0 auto; }
.takbeer-display { position: relative; overflow: hidden; border: 1px solid rgba(122, 92, 54, 0.16); border-radius: 34px; background: linear-gradient(160deg, rgba(255, 255, 255, 0.95), rgba(249, 244, 231, 0.9)); box-shadow: 0 28px 70px rgba(23, 55, 43, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.88); }
.takbeer-display::before { content: ""; position: absolute; inset: 18px; border: 1px solid rgba(14, 90, 71, 0.08); border-radius: 26px; pointer-events: none; }
.takbeer-display .card-body { position: relative; padding: 2.5rem; }
.takbeer-reset-corner { position: absolute; top: 1.35rem; right: 1.35rem; z-index: 2; min-height: 42px; padding: 0.55rem 0.95rem; border: 1px solid rgba(157, 50, 47, 0.18); border-radius: 999px; background: rgba(255, 255, 255, 0.88); color: #9d322f; font: inherit; font-size: 0.88rem; font-weight: 800; box-shadow: 0 10px 24px rgba(29, 69, 55, 0.08); backdrop-filter: blur(12px); }
.takbeer-kicker { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 0.25rem 0.85rem; border-radius: 999px; background: rgba(14, 90, 71, 0.1); color: #0c5a46; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.takbeer-title { margin: 0.75rem 0 1.25rem; color: #163f34; font-size: clamp(1.75rem, 5vw, 2.6rem); font-weight: 800; letter-spacing: -0.04em; }
.counter-shell { width: min(100%, 420px); margin: 0 auto; padding: 1rem 1.25rem 1.25rem; border: 10px solid #153f34; border-radius: 32px; background: linear-gradient(180deg, #1d5947 0%, #0d3e31 100%); box-shadow: inset 0 8px 24px rgba(0, 0, 0, 0.35), 0 18px 36px rgba(13, 74, 58, 0.18); }
.counter-label { margin-bottom: 0.35rem; color: rgba(234, 247, 241, 0.72); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.counter-value { color: #e9fff6; font-size: clamp(4.25rem, 15vw, 6.8rem); font-weight: 800; letter-spacing: -0.07em; line-height: 0.95; font-variant-numeric: tabular-nums; text-shadow: 0 0 24px rgba(164, 230, 199, 0.3); }
.takbeer-save-note { margin-top: 0.85rem; color: #5e746d; font-size: 0.92rem; }
.btn-takbeer { touch-action: manipulation; user-select: none; -webkit-tap-highlight-color: transparent; background: radial-gradient(circle at 30% 20%, #23a982 0%, #0e765b 42%, #094534 100%); color: #fff; border: 0; padding: 1.35rem 2.4rem; font-size: 1.55rem; font-weight: 800; border-radius: 999px; box-shadow: inset 0 4px 10px rgba(255, 255, 255, 0.24), inset 0 -9px 18px rgba(0, 0, 0, 0.2), 0 18px 38px rgba(13, 74, 58, 0.28); display:inline-flex; justify-content:center; align-items:center; min-width:270px; min-height:76px; }
.controls { display:flex; gap:0.85rem; justify-content:center; align-items:center; flex-wrap: wrap; }
.controls button { font: inherit; }
.takbeer-icon-button { min-width: 72px; min-height: 60px; padding: 0.55rem 1rem; border: 1px solid rgba(21, 63, 52, 0.16); border-radius: 20px; background: rgba(255, 255, 255, 0.82); color: #153f34; font-weight: 800; box-shadow: 0 10px 24px rgba(29, 69, 55, 0.08); }
.takbeer-icon-button.danger { color: #9d322f; }
.counter-value.pulse { transform: scale(1.06); transition: transform 180ms ease; }
.btn-takbeer:active, .btn-takbeer.pressed { transform: translateY(2px) scale(0.985); box-shadow: inset 0 3px 9px rgba(0, 0, 0, 0.18), 0 8px 18px rgba(13,74,58,0.18); transition: transform 80ms ease, box-shadow 80ms ease; }

.takbeer-settings { display:flex; justify-content:center; gap:1rem; align-items:center; flex-wrap: wrap; color: #526a62; font-size: 0.92rem; }
.takbeer-settings .form-check-label { margin-left: 0.35rem; color: #526a62; font-weight: 700; }
.takbeer-tip { margin-top: 1rem; text-align: center; color: #62756e; font-size: 0.9rem; }

.dark .takbeer-page { background: radial-gradient(circle at top left, rgba(49, 168, 130, 0.2), transparent 32%), radial-gradient(circle at bottom right, rgba(220, 176, 104, 0.12), transparent 28%), linear-gradient(135deg, #07140f 0%, #0b2018 50%, #091813 100%); }
.dark .takbeer-display { border-color: rgba(164, 230, 199, 0.16); background: linear-gradient(160deg, rgba(13, 35, 27, 0.96), rgba(8, 24, 18, 0.94)); box-shadow: 0 28px 70px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.dark .takbeer-display::before { border-color: rgba(164, 230, 199, 0.1); }
.dark .takbeer-reset-corner { border-color: rgba(255, 149, 139, 0.28); background: rgba(38, 21, 20, 0.78); color: #ffb4ab; box-shadow: 0 12px 26px rgba(0, 0, 0, 0.28); }
.dark .takbeer-kicker { background: rgba(49, 168, 130, 0.16); color: #9fe6c9; }
.dark .takbeer-title { color: #edfdf7; }
.dark .counter-shell { border-color: #5fd2aa; background: linear-gradient(180deg, #164836 0%, #08281f 100%); box-shadow: inset 0 8px 26px rgba(0, 0, 0, 0.5), 0 18px 38px rgba(0, 0, 0, 0.32), 0 0 34px rgba(49, 168, 130, 0.13); }
.dark .counter-label { color: rgba(222, 255, 242, 0.68); }
.dark .counter-value { color: #f3fff9; text-shadow: 0 0 28px rgba(116, 229, 181, 0.42); }
.dark .takbeer-save-note,
.dark .takbeer-settings,
.dark .takbeer-settings .form-check-label,
.dark .takbeer-tip { color: #b7cbc2; }
.dark .takbeer-icon-button { border-color: rgba(164, 230, 199, 0.18); background: rgba(11, 35, 26, 0.86); color: #e7fff6; box-shadow: 0 12px 26px rgba(0, 0, 0, 0.26); }
.dark .btn-takbeer { background: radial-gradient(circle at 30% 20%, #56d9ad 0%, #168f6c 44%, #07513c 100%); box-shadow: inset 0 4px 10px rgba(255, 255, 255, 0.18), inset 0 -9px 18px rgba(0, 0, 0, 0.26), 0 18px 38px rgba(0, 0, 0, 0.34), 0 0 32px rgba(49, 168, 130, 0.16); }

@media (max-width: 720px) {
    .takbeer-page { padding: 1.25rem 0.75rem; }
    .takbeer-display .card-body { padding: 1.5rem 1rem; }
    .counter-shell { border-width: 8px; border-radius: 26px; }
    .btn-takbeer { min-width: 210px; font-size: 1.3rem; padding: 1rem 1.8rem; min-height: 68px; }
    .takbeer-icon-button { min-width: 62px; min-height: 56px; }
}

@media (max-width: 520px) {
    .takbeer-display { border-radius: 26px; }
    .takbeer-reset-corner { top: 0.85rem; right: 0.85rem; min-height: 36px; padding: 0.45rem 0.8rem; font-size: 0.82rem; }
    .takbeer-title { margin-bottom: 1rem; }
    .counter-shell { padding: 0.85rem 0.9rem 1rem; }
    .btn-takbeer { min-width: 100%; font-size: 1.18rem; padding: 0.95rem 1.5rem; order: -1; }
    .controls { gap: 0.65rem; }
    .takbeer-icon-button { flex: 1 1 0; min-width: 0; }
}

@media (max-width: 420px) {
    .takbeer-page { padding-inline: 0.5rem; }
    .takbeer-display .card-body { padding: 1.25rem 0.8rem; }
}

/* Tasbih beads */
.tasbih-wrap { max-width: 920px; margin: 0.5rem auto 0; }

.beads { position:relative; height:280px; }
.bead { position:absolute; left:50%; top:50%; transform-origin: center; width:60px; height:60px; border-radius:50%; background: radial-gradient(circle at 30% 25%, #fff7e6 0%, #d7a97b 30%, #8c5836 65%, #5e3a1f 100%); border: 1px solid rgba(0,0,0,0.1); box-shadow: 0 18px 36px rgba(8,26,20,0.36), inset 0 4px 14px rgba(255,255,255,0.22); opacity:0.24; transform: translate(-50%,-50%) scale(0.96); transition: transform 180ms cubic-bezier(.2,.9,.3,1), opacity 130ms, box-shadow 180ms;
}
.bead::after { content: ""; position: absolute; left: 16px; top: 12px; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.85), rgba(255,255,255,0) 70%); pointer-events: none; }
.bead.active { opacity:1; transform: translate(-50%,-50%) scale(1.22) rotate(-3deg); box-shadow: 0 26px 46px rgba(8,30,25,0.42), inset 0 5px 16px rgba(255,255,255,0.28); }
.bead.small { width:46px; height:46px; }
.bead.separator { background: radial-gradient(circle at 35% 30%, #fff2d4 0%, #f2b96a 38%, #d38a53 70%, #a25b32 100%); }

.rope { position:absolute; left:50%; top:50%; width:820px; height:820px; transform:translate(-50%,-50%) translateY(36px); border-radius:50%; background: radial-gradient(circle at 50% 45%, rgba(0,0,0,0.05), rgba(0,0,0,0) 55%); border: 1px solid rgba(0,0,0,0.06); pointer-events:none; mix-blend-mode:multiply; opacity:0.95; }

.hand-icon { position:absolute; left:50%; top:34%; transform:translate(-50%,-50%) scale(1); pointer-events:none; opacity:0; transition: transform 220ms cubic-bezier(.2,.9,.3,1), opacity 160ms ease; }
.hand-icon.visible { opacity:1; transform:translate(-50%,-135%) scale(1.18) rotate(-6deg); animation: hand-grab 420ms ease; }

@keyframes hand-grab {
    0% { transform: translate(-50%,-145%) scale(1.05) rotate(-3deg); }
    50% { transform: translate(-50%,-135%) scale(1.18) rotate(-6deg); }
    100% { transform: translate(-50%,-135%) scale(1.15) rotate(-5deg); }
}

.rounds-display { position:absolute; right:16px; top:16px; bottom:auto; background: rgba(255,255,255,0.96); padding:10px 12px; border-radius:18px; color:#102; font-weight:700; letter-spacing:0.01em; box-shadow: 0 8px 22px rgba(10,30,20,0.08); backdrop-filter: blur(8px); }

.dark .bead { background: radial-gradient(circle at 30% 25%, #fff0cf 0%, #c08b56 30%, #754927 66%, #321d11 100%); border-color: rgba(255,255,255,0.08); box-shadow: 0 18px 36px rgba(0,0,0,0.48), inset 0 4px 14px rgba(255,255,255,0.16); opacity: 0.34; }
.dark .bead.active { box-shadow: 0 26px 46px rgba(0,0,0,0.58), 0 0 28px rgba(220, 176, 104, 0.18), inset 0 5px 16px rgba(255,255,255,0.22); }
.dark .bead.separator { background: radial-gradient(circle at 35% 30%, #ffe8b8 0%, #d99c56 38%, #a26034 70%, #5d2f1b 100%); }
.dark .rope { background: radial-gradient(circle at 50% 45%, rgba(164,230,199,0.08), rgba(0,0,0,0) 55%); border-color: rgba(164,230,199,0.08); mix-blend-mode: normal; opacity: 0.7; }
.dark .rounds-display { background: rgba(10, 30, 23, 0.86); color: #e7fff6; box-shadow: 0 10px 24px rgba(0,0,0,0.3); }

@media (max-width: 920px) {
    .tasbih-wrap { max-width: 680px; }
}

@media (max-width: 600px) {
    .beads { height:160px; }
    .bead { width:44px; height:44px; }
    .hand-icon svg { width:44px; height:44px; }
    .rope { width:420px; height:420px; transform:translate(-50%,-50%) translateY(18px); }
}

@media (max-width: 420px) {
    .beads { height:140px; }
    .bead { width:36px; height:36px; }
    .hand-icon svg { width:36px; height:36px; }
}