/* --- Global & Utilities --- */
body { 
    background-color: #f8fafc; 
}

/* Custom scrollbar for textareas */
textarea::-webkit-scrollbar { width: 8px; }
textarea::-webkit-scrollbar-track { background: #f1f1f1; }
textarea::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
textarea::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

.tab-active { border-bottom: 2px solid #2563eb; color: #2563eb; font-weight: 600; }
.tab-inactive { border-bottom: 2px solid transparent; color: #64748b; }
.tab-inactive:hover { color: #334155; border-bottom-color: #cbd5e1; }

.code-block {
    font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
    font-size: 0.85rem;
}

/* --- Toggle Checkbox Styles --- */
.toggle-checkbox:checked { right: 0; border-color: #2563eb; }
.toggle-checkbox:checked + .toggle-label { background-color: #2563eb; }
.toggle-checkbox { right: 20px; transition: all 0.3s; }

/* --- Raw Tree Editor --- */
.tree-root { font-family: 'Menlo', 'Monaco', monospace; font-size: 0.85rem; }
.tree-node { margin-left: 1.5rem; border-left: 1px solid #e2e8f0; padding-left: 0.5rem; }
.tree-entry { margin: 0.25rem 0; }
.tree-key { color: #7c3aed; font-weight: 600; margin-right: 0.5rem; cursor: pointer; }
.tree-val-string { width: 100%; max-width: 400px; padding: 2px 6px; border: 1px solid #cbd5e1; border-radius: 4px; color: #0f172a; }
.tree-val-number { width: 100px; padding: 2px 6px; border: 1px solid #cbd5e1; border-radius: 4px; color: #059669; }
.tree-type { font-size: 0.7rem; color: #94a3b8; margin-left: 0.5rem; user-select: none; }
details > summary { cursor: pointer; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary:hover .tree-key { text-decoration: underline; }

/* --- Hex Editor Styles --- */
.hex-grid {
    display: grid;
    grid-template-columns: 60px 1fr 1fr;
    gap: 1rem;
    font-family: 'Menlo', 'Monaco', monospace;
    font-size: 12px;
    line-height: 1.5;
}
.hex-offset { color: #64748b; user-select: none; text-align: right; border-right: 1px solid #e2e8f0; padding-right: 10px; }
.hex-bytes { color: #334155; letter-spacing: 1px; }
.hex-ascii { color: #059669; letter-spacing: 1px; border-left: 1px solid #e2e8f0; padding-left: 10px; }
.hex-byte { display: inline-block; width: 20px; text-align: center; cursor: pointer; border-radius: 2px; }
.hex-byte:hover { background-color: #bfdbfe; font-weight: bold; }
.hex-byte.selected { background-color: #2563eb; color: white; }
.hex-byte.changed { color: #dc2626; font-weight: bold; }

/* --- Clock Picker Styles --- */
.clock-modal { border: none; padding: 0; border-radius: 16px; overflow: hidden; box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1); width: 280px; user-select: none; }
.clock-modal::backdrop { background: rgba(0,0,0,0.5); }
.clock-header { background: #3b82f6; padding: 24px; color: white; display: flex; align-items: center; justify-content: center; gap: 4px; }
.clock-time-big { font-size: 3rem; line-height: 1; font-weight: 500; cursor: pointer; opacity: 0.7; transition: opacity 0.2s; }
.clock-time-big.active { opacity: 1; }
.clock-sep { font-size: 3rem; line-height: 1; opacity: 0.7; padding-bottom: 6px; }
.clock-face-area { background: white; padding: 20px; height: 300px; display: flex; align-items: center; justify-content: center; }
.clock-face { width: 240px; height: 240px; background: #f1f5f9; border-radius: 50%; position: relative; cursor: pointer; touch-action: none; }
.clock-num { position: absolute; width: 32px; height: 32px; margin-left: -16px; margin-top: -16px; border-radius: 50%; text-align: center; line-height: 32px; font-size: 14px; color: #64748b; pointer-events: none; z-index: 2; transition: color 0.2s; }
.clock-num.inner { font-size: 12px; color: #94a3b8; }
.clock-num.active { color: white; }
.clock-center { position: absolute; top: 50%; left: 50%; width: 4px; height: 4px; background: #3b82f6; border-radius: 50%; transform: translate(-50%, -50%); }
.clock-hand { position: absolute; top: 50%; left: 50%; height: 2px; background: #3b82f6; transform-origin: 0 50%; z-index: 1; pointer-events: none; }
.clock-knob { position: absolute; width: 32px; height: 32px; border-radius: 50%; background: #3b82f6; right: 0; top: 50%; transform: translate(50%, -50%); display: flex; align-items: center; justify-content: center; }
.clock-knob::after { content: ''; width: 4px; height: 4px; background: white; border-radius: 50%; }
.clock-footer { display: flex; justify-content: flex-end; padding: 8px 16px 16px; gap: 8px; background: white; }
.clock-btn { padding: 8px 16px; border-radius: 8px; font-weight: 500; font-size: 0.875rem; color: #3b82f6; background: transparent; transition: background 0.2s; }
.clock-btn:hover { background: #eff6ff; }

/* --- Language Switcher --- */
.lang-switch {
    font-size: 0.75rem;
    font-weight: 700;
    color: #64748b;
    border: 1px solid #cbd5e1;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
}
.lang-switch:hover { background: #e2e8f0; color: #334155; }

/* --- Animations --- */
@keyframes fade-in-up {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up { animation: fade-in-up 0.3s ease-out forwards; }