/* --- BUTTONS --- */
.text-btn {
    background: transparent; 
    border: 1px solid var(--border-color);
    color: var(--text-dim); 
    height: 30px;
    padding: 0 15px; 
    border-radius: 20px;
    font-size: 0.85rem; 
    cursor: pointer; 
    transition: 0.2s; 
    font-weight: 500;
    display: flex; align-items: center; justify-content: center;
}
.text-btn:hover { background: var(--btn-hover); color: var(--text-main); border-color: var(--text-main); }

.icon-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-dim);
    width: 30px; height: 30px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: 0.2s;
    padding: 0;
}
.icon-btn:hover { background: var(--btn-hover); color: var(--text-main); border-color: var(--text-main); }

.btn-primary { background: var(--accent-color); color: white; border: none; padding: 12px 25px; border-radius: 8px; font-size: 1rem; cursor: pointer; transition: 0.2s; margin-top: 15px; width: 100%; }
.btn-primary:hover { background: #5568d3; }

.btn-text-only { background: transparent; color: var(--text-dim); border: none; font-size: 0.85rem; cursor: pointer; text-decoration: underline; padding: 0; }
.btn-text-only:hover { color: var(--text-main); }

/* --- PILLS & BADGES --- */
.profile-pill {
    background: var(--box-bg); padding: 5px 15px; border-radius: 50px;
    box-shadow: 0 2px 10px var(--shadow-color); font-weight: 600; color: var(--text-main);
    display: flex; align-items: center; gap: 8px; font-size: 0.85rem; 
    transition: transform 0.2s; cursor: pointer; user-select: none;
}
.profile-pill:hover { transform: scale(1.05); }
.profile-icon { color: var(--text-dim); transition: 0.3s; }

.rainbow-pill {
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    background-size: 400%; animation: glowing 100s linear infinite;
    color: white; border: none; padding: 6px 16px; border-radius: 50px; font-weight: bold; font-size: 0.85rem;
    cursor: pointer; box-shadow: 0 0 10px rgba(255,255,255,0.3);
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.rainbow-btn {
    background: linear-gradient(45deg, #667eea, #764ba2);
    color: white; border: none; padding: 12px 25px; border-radius: 8px; font-size: 1.1rem; cursor: pointer;
    width: 100%; margin-top: 15px; box-shadow: 0 4px 15px rgba(118, 75, 162, 0.4);
}
.rainbow-icon { animation: hueRotate 60s infinite linear; color: #00ff00; }

/* --- TOOLTIPS (UNIFIED) --- */
#guest-tooltip, #premium-tooltip, #input-tooltip {
    position: absolute;
    background: white; 
    color: #333; 
    padding: 6px 14px;
    border-radius: 10px; 
    font-size: 0.9rem;
    font-weight: bold; 
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    white-space: nowrap;
    opacity: 0; 
    pointer-events: none; 
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    z-index: 200;
}

#guest-tooltip, #premium-tooltip { top: 125%; transform: translateY(-10px); }
#guest-tooltip.visible, #premium-tooltip.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
#guest-tooltip { right: 0; }
#premium-tooltip { right: 120px; }
#guest-tooltip::after { content: ''; position: absolute; bottom: 100%; right: 25px; border: 8px solid transparent; border-bottom-color: white; }
#premium-tooltip::after { content: ''; position: absolute; bottom: 100%; right: 40px; border: 8px solid transparent; border-bottom-color: white; }

#input-tooltip { bottom: 115%; left: 50%; transform: translateX(-50%) translateY(10px); }
#input-tooltip.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
#input-tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 8px solid transparent; border-top-color: white; }

#copy-tooltip {
    position: fixed; background: white; color: #333; padding: 10px 18px;
    border-radius: 12px; font-size: 0.9rem; font-weight: bold;
    pointer-events: none; opacity: 0; transform: translateY(10px);
    transition: opacity 0.2s, transform 0.2s; z-index: 9999;
    box-shadow: 0 5px 20px rgba(0,0,0,0.4);
}
#copy-tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 8px solid transparent; border-top-color: white; }
#copy-tooltip.visible { opacity: 1; transform: translateY(0); }


/* --- HISTORY ITEMS --- */
.history-item { 
    display: flex; 
    flex-direction: column; 
    padding: 10px 0; 
    border-bottom: 1px solid var(--border-color); 
    animation: slideUp 0.3s ease; 
    margin-right: 10px; 
}
.history-item:last-child { border-bottom: none; }

.history-row {
    display: flex;
    align-items: center; 
    gap: 12px;
    flex-wrap: wrap;
}

.history-question { 
    font-size: 1.1rem; 
    font-weight: bold; 
    color: var(--text-main); 
    cursor: pointer; 
    transition: opacity 0.2s; 
}
.history-question:hover { opacity: 0.8; }

.history-answer { 
    font-size: 0.95rem; 
    display: inline-flex; 
    align-items: center; 
    gap: 8px; 
    color: var(--text-dim); 
}
.history-answer.correct { color: #4caf50; }
.history-answer.incorrect { color: #ff4757; }

.history-correction {
    font-weight: 800; 
    margin-top: 4px; 
    color: var(--text-dim); /* Changed to gray */
    font-size: 0.9rem;
    padding-left: 2px;
}

.level-badge { font-size: 0.7rem; background: var(--border-color); padding: 2px 6px; border-radius: 4px; color: var(--text-dim); }
.history-milestone { text-align: center; color: var(--accent-color); font-weight: bold; font-size: 0.9rem; padding: 10px; background: rgba(102, 126, 234, 0.1); border-radius: 10px; margin: 15px 10px 15px 0; animation: slideUp 0.3s ease; border: 1px dashed var(--accent-color); }

/* --- INPUTS --- */
#input-wrapper {
    position: relative; background: var(--box-bg);
    border-radius: 15px; box-shadow: 0 10px 30px var(--shadow-color);
    display: flex; align-items: center; padding: 5px; transition: box-shadow 0.2s; z-index: 10;
}
#input-wrapper:focus-within { box-shadow: 0 15px 40px var(--shadow-color); }
#command-input { width: 100%; height: 100%; border: none; outline: none; font-size: 1.1rem; padding: 0 20px; background: transparent; color: var(--text-main); border-radius: 12px; }
#command-input::placeholder { color: var(--text-dim); font-size: 1rem; opacity: 0.4; }

.input-correct { animation: popSuccess 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.input-incorrect { animation: shake 0.3s ease-in-out; }

/* --- FLOATING FEEDBACK --- */
.floating-feedback { 
    position: fixed; 
    pointer-events: none; 
    z-index: 10000; 
    font-weight: bold; 
    font-size: 1.2rem; 
    text-shadow: 0 2px 4px rgba(0,0,0,0.5); 
    white-space: nowrap; 
    animation: floatUpFade 10s ease-out forwards; 
}
@keyframes floatUpFade { 0% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -100px); } }

/* --- MODALS --- */
.modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.6); align-items: center; justify-content: center; }
.modal.visible { display: flex !important; }
.modal-content { background-color: var(--modal-bg); color: var(--text-main); margin: auto; padding: 30px; border-radius: 20px; width: 90%; max-width: 600px; box-shadow: 0 10px 40px rgba(0,0,0,0.3); position: relative; }
.close-modal { color: var(--text-dim); float: right; font-size: 28px; font-weight: bold; cursor: pointer; }
.close-modal:hover { color: var(--text-main); }

/* Profile Stats */
.profile-stats {
    display: flex; justify-content: center; align-items: center;
    padding: 10px 0 20px 0; margin-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}
.stat-item { display: flex; flex-direction: column; align-items: center; }
.stat-value { font-size: 2.5rem; font-weight: 800; color: var(--accent-color); line-height: 1; margin-bottom: 5px; }
.stat-label { font-size: 0.8rem; color: var(--text-dim); font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; }

/* --- PROGRESS BARS --- */
.progress-section { margin: 20px 0; }
.hsk-level-row { display: flex; align-items: center; margin-bottom: 12px; font-size: 0.9rem; }
.hsk-label { width: 50px; font-weight: bold; color: var(--text-main); }
.hsk-track { flex-grow: 1; background: var(--border-color); height: 10px; border-radius: 10px; overflow: hidden; margin: 0 15px; }
.hsk-fill { height: 100%; background: var(--accent-color); transition: width 0.5s ease; }
.hsk-fill[data-level="1"] { background: #4caf50; }
.hsk-fill[data-level="2"] { background: #8bc34a; }
.hsk-fill[data-level="3"] { background: #ffeb3b; }
.hsk-fill[data-level="4"] { background: #ff9800; }
.hsk-fill[data-level="5"] { background: #ff5722; }
.hsk-fill[data-level="6"] { background: #f44336; }
.hsk-count { width: 80px; text-align: right; color: var(--text-dim); font-size: 0.8rem; font-family: monospace; }

.instruction-block { margin-bottom: 20px; border-bottom: 1px solid var(--border-color); padding-bottom: 15px; }
.instruction-block:last-child { border-bottom: none; }
.instruction-block h3 { color: var(--accent-color); margin-bottom: 10px; }
.example-box { background: var(--border-color); padding: 10px; border-radius: 8px; font-family: monospace; margin-top: 10px; color: var(--text-main); }

/* --- RESPONSIVE UTILS --- */
.show-compact { display: none; }
@media (max-width: 500px) {
    .hide-compact { display: none; }
    .show-compact { display: inline; }
    #btn-instructions { width: 30px; padding: 0; border-radius: 50%; }
}