:root{
    --vk-bg:#ffffff;
    --vk-accent:#7A944A;
    --vk-accent-dark:#3A4A1F;
    --vk-key-bg:#F7F9F4;
    --vk-key-shadow: 0 4px 10px rgba(0,0,0,0.06);
}
body{font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; background: linear-gradient(135deg, #A3B087 0%, #313647 100%);}
.vk-page{padding:12px 20px 60px 20px;}
.vk-card{background:var(--vk-bg); max-width:1200px; margin:8px auto; border-radius:24px; padding:22px; box-shadow:0 10px 40px rgba(0,0,0,0.08);}
.vk-header{display:flex; justify-content:center; align-items:center; gap:12px; flex-wrap:wrap;}
.vk-header h2{color:var(--vk-accent-dark); margin:0; font-size:1.6rem}
.vk-controls{display:flex; gap:12px; justify-content:center; width:100%; margin-top:14px}
.vk-btn{background:#fff;border:1px solid rgba(0,0,0,0.06); padding:12px 16px; border-radius:10px; cursor:pointer; font-weight:600}
.vk-textarea{width:100%; min-height:80px; max-width:100%; padding:14px; font-size:1.25rem; border-radius:12px; border:1.5px solid #D6E2C6; resize:vertical; box-sizing:border-box; direction:rtl; text-align:right; font-family: 'Noto Naskh Arabic', 'Amiri', 'Scheherazade', 'Segoe UI Arabic', 'Arial', sans-serif;}
.vk-textarea-wrap{position:relative}
.vk-textarea-wrap .vk-textarea{padding-left:56px; padding-top:18px}
.vk-clear-field{position:absolute; left:12px; top:8px; background:rgba(0,0,0,0.06); border:0; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:1.05rem; z-index:3}
.vk-clear-field:hover{background:rgba(0,0,0,0.12)}
.vk-keyboard{margin-top:18px}
.vk-row{display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-bottom:12px}
.vk-key{background:var(--vk-key-bg); border:0; padding:12px 12px; border-radius:12px; min-width:56px; cursor:pointer; box-shadow:var(--vk-key-shadow); font-size:1.2rem; font-weight:700; font-family: 'Noto Naskh Arabic', 'Amiri', 'Scheherazade', 'Segoe UI Arabic', 'Arial', sans-serif}
.vk-key:active,.vk-key.active{transform:translateY(2px); box-shadow:none}
.vk-num{min-width:54px}
.vk-actions .vk-key{background:linear-gradient(90deg,#9aae7b,#3c4441); color:#fff; min-width:140px; padding:12px 18px; font-size:1.05rem}
.vk-footer{display:flex; justify-content:center; align-items:center; margin-top:18px}
.vk-counter{color:var(--vk-accent-dark)}
.vk-controls-bottom{margin-top:18px}

/* Inline actions area: place control buttons beside action row */
.vk-actions-area{display:flex; gap:18px; align-items:center; justify-content:space-between; margin-top:12px; flex-wrap:wrap}
.vk-controls-inline{display:flex; gap:12px; align-items:center}
.vk-controls-inline .vk-btn{min-width:110px}
.vk-row.vk-actions{margin-bottom:0}
.vk-counter-inline{color:var(--vk-accent-dark); font-weight:600; margin-inline-start:12px}

@media (min-width:900px){
    .vk-actions-area{justify-content:space-between}
    .vk-controls-inline .vk-btn{min-width:140px}
}

/* Ensure navbar shows logo on the left even on RTL pages */
nav.navbar .navbar-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    direction: ltr; /* force layout left-to-right so logo appears on the left */
}
nav.navbar .titleHed { flex: 1; text-align: center; }
nav.navbar .titleHed h1 { direction: rtl; margin: 0; }
nav.navbar .nav-menu { display: flex; gap: 22px; }

/* Footer styles removed from this page (kept in global CSS). */

@media (max-width:520px){
    .vk-actions-area{flex-direction:column; align-items:center}
    .vk-counter-inline{margin-inline-start:0}
}
.vk-controls-bottom{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
.vk-controls-bottom .vk-btn{background:#fff; border:1px solid rgba(0,0,0,0.06); padding:12px 20px; border-radius:12px; cursor:pointer; font-weight:700; font-size:1.05rem; min-width:120px; box-shadow:0 8px 20px rgba(0,0,0,0.06); text-align:center; color:#1d1d1f}
.vk-controls-bottom .vk-btn:active{transform:translateY(2px)}
.vk-btn--primary{background:linear-gradient(90deg,#7A944A,#5f7a3f); color:#fff; border:none; box-shadow:0 10px 24px rgba(122,148,74,0.18)}
.vk-btn--secondary{background:#fff; border:1px solid #d6e2c6}
.vk-btn--muted{background:#fff; border:1px solid #eee; color:#333}
@media (max-width:600px){.vk-card{padding:18px;border-radius:18px}.vk-header h2{font-size:1.25rem}.vk-key{padding:10px 8px; font-size:1.05rem; min-width:50px}
.vk-textarea-wrap .vk-textarea{padding-left:48px; padding-top:14px}
.vk-clear-field{left:10px; top:10px; width:30px; height:30px; font-size:0.95rem}
.vk-controls-bottom .vk-btn{min-width:88px; padding:10px 14px; font-size:0.98rem}
}