/* === Overlay / Modal === */
.vk-overlay {
    position: fixed; 
    inset: 0; 
    background: rgba(0,0,0,.35); 
    display: none; 
    z-index: 9999; 
}
.vk-overlay.is-open { display: block; }

.vk-modal {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: min(96vw, 360px); background: #fff; border-radius: 12px; box-shadow: 0 12px 28px rgba(0,0,0,.25);
    font-family: system-ui, -apple-system, Segoe UI, Arial, sans-serif;
}

.vk-header {
    display: flex; 
    align-items: center; 
    justify-content: center; 
    position: relative;
    padding: 10px 12px; 
    border-bottom: 1px solid #eee; 
    font-weight: 600;
}
.vk-close {
    position: absolute; 
    right: 8px; top: 6px; border: 0;
    background: transparent;
    color: #111827;     
        
    font-size: 18px; 
    cursor: pointer; 
    padding: 6px; 
    line-height: 1;
}

.vk-display {
    position: relative;
    display: flex;    
    align-items: center; 
    margin: 12px; 
    padding: 12px; 
    height: 48px;
    border: 1px solid #e5e7eb; 
    border-radius: 8px; 
    background: #f8f9fa;
    color: #111827;     
    font-size: 22px; 
    line-height: 24px; 


    overflow: hidden;
}

.vk-keys .vk-topbar { 
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding: 8px 12px 6px;
}
.vk-keys.more { 
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 8px 12px 6px;
} 
.vk-topbar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding: 8px 12px 0;
}


.vk-key.is-back {
    background: #eef2ff;
    border-color: #c7d2fe;
    font-weight: 700;
}



.vk-grid {
    display: grid; 
    gap: 8px; 
    grid-template-columns: repeat(3, 1fr);
    padding: 12px;
}
.vk-key {
    height: 44px; 
    border-radius: 10px; 
    border: 1px solid #e5e7eb; 
    background: #fafafa;
    color: #111827;     
    cursor: pointer; 
    font-size: 18px;
}

.vk-key:active { 
    transform: translateY(1px); 
}
.vk-fkey{
    font-size: 14px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,.08);
    background: #eef3ff;        
    color: #1f3a8a;                 
    box-shadow: 0 1px 0 rgba(0,0,0,.03);
    cursor: pointer;
    user-select: none;
}
.vk-fkey.del {
    color: #61131d;    
}
.vk-fkey.ac {
    background: #ef4444;
    color: #fff;    
}
.vk-fkey:hover{ background:#e2ecff; }
.vk-fkey:active{ transform: translateY(1px); }
.vk-fkey.is-back{ grid-column: span 2;   background:#e9eef5; color:#1f2937; } 

.vk-tick-button {
    margin-left: 8px;
    background: #E6F9ED;
    border: 2px solid #A5D6A7; 
    color: #2E7D32;
    font-size: 16px;
    padding: 2px 6px;
    border-radius: 4px;
    cursor: pointer;
}
.vk-tick-button:hover {
     background:#C8E6C9;
}
.vk-actions { 
    padding: 0 12px 12px; 
    display: flex; 
    gap: 8px; 
}
.vk-confirm {
    flex: 1; 
    height: 44px; 
    border: 0; 
    border-radius: 10px; 
    cursor: pointer;
    background: #22c55e; 
    color: #fff; 
    font-weight: 600; 
    font-size: 16px;
}

[class*="vk-exp"] {
    background: #eee;    
    border-radius: .25rem;
    padding: 0 .15rem;
}

.vk-caret {
    display: inline-block;
    margin-left: 2px;
    animation: vk-blink 1s steps(1) infinite;
    opacity: 1;
}
@keyframes vk-blink { 50% { opacity: 0; } }



.vk-fkey[data-key="ROOT"] {
    font-size: 0.82em;    
}

.vk-fkey[data-key="n√"] {
    font-size: 0.82em;
}
.vk-tick-button.from-exp{
    font-size: 0.5em;
    transform: translateY(calc(-50% ));
}
.vk-tick-button.from-root{
    font-size: 0.7em;
    transform: translateY(calc(-50% ));
}
.vk-tick-button.from-frac-num{
    font-size: 0.5em;
    transform: translateY(calc(-80% ));
}
.vk-tick-button.from-frac-den{
    font-size: 0.5em;
    transform: translateY(calc(85% ));
}
.vk-fkey.op {
  background: #ffe8d6;  
  border-color: #f5c6a5;
}

/* Algebra variables */
.vk-fkey.var {
  background: #e6f5e6;   
  border-color: #b5d9f2;
}
.vk-fkey.const {
  background: #f0f0f0;   
  border-color: #b2d8b2;
}