/* =============================================
FILE: /assets/03-tools-page/css/01-utils/08-calc/03-calc-std-scientific.css
LINK: <link rel="stylesheet" href="/assets/03-tools-page/css/01-utils/08-calc/03-calc-std-scientific.css">
PURPOSE: UI for Calculator Suite (v6.0 Logic-UI) - Age Calculator
VERSION: v1.0  DATE CREATED: 2026-04-25 - Age Calculator
============================================== */

    /* ===========================================
    SECTION: LOCALIZED THEME ENGINE (DNA)
    =========================================== */
    :root {
        --jux-tool-accent: var(--jzn-hover, #00ff88);
    }

    /* ===========================================
    SECTION: PREMIUM UI STRUCTURE
    =========================================== */

    /* Mode Switcher (Standard vs Scientific) */
    .jux-sci-switcher-grid {
        display: flex;
        max-width: 400px;
        margin: 0 auto 20px auto;
        background: rgba(255, 255, 255, 0.03);
        border-radius: 8px;
        padding: 4px;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .jux-sci-mode-btn {
        flex: 1;
        background: transparent;
        border: 1px solid transparent;
        color: rgba(255, 255, 255, 0.5);
        padding: 10px;
        font-size: 0.75rem;
        cursor: pointer;
        border-radius: 6px;
        transition: all 0.3s ease;
        text-transform: uppercase;
        font-weight: 700;
        font-family: var(--jzn-active-font);
    }

    .jux-sci-mode-btn.active {
        background: color-mix(in srgb, var(--jux-tool-accent), transparent 85%);
        color: var(--jux-tool-accent);
        border: 1px solid var(--jux-tool-accent);
    }

    /* THE DISPLAY: Full span auto with 20px margin and 2px border */
    .jux-sci-display-wrap {
        margin: 0 20px 20px 20px; /* <-- Brat Tweak: 20px left/right margins */
        border: 2px solid var(--jux-tool-accent); /* <-- Brat Tweak: 2px DNA border */
        border-radius: 12px; /* <-- Brat Tweak: Rounded corners */
        background: rgba(0, 0, 0, 0.4);
        padding: 20px;
        text-align: right;
        box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.6);
        position: relative;
    }

    .jux-calc-result-sub {
        font-family: monospace;
        color: rgba(255,255,255,0.5);
        font-size: 1rem;
        min-height: 1.5rem;
        margin-bottom: 5px;
    }

    .jux-calc-result-main {
        color: var(--jux-tool-accent) !important;
        font-size: 3rem; /* Massive premium text */
        font-weight: 700;
        font-family: var(--jzn-active-font);
        overflow-x: auto;
        white-space: nowrap;
    }

    /* Angle Toggle (DEG/RAD) placed inside the display */
    .jux-angle-toggle {
        position: absolute;
        top: 15px;
        left: 15px;
        display: flex;
        gap: 5px;
    }

    .jux-angle-btn {
        background: transparent;
        border: 1px solid rgba(255,255,255,0.2);
        color: rgba(255,255,255,0.5);
        padding: 4px 8px;
        font-size: 0.65rem;
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.2s;
    }

    .jux-angle-btn.active {
        color: var(--jux-tool-accent);
        border-color: var(--jux-tool-accent);
        background: color-mix(in srgb, var(--jux-tool-accent), transparent 90%);
        font-weight: bold;
    }

    /* THE KEYBOARD WRAPPER: 1px bounding border */
    .jux-calc-keyboard-wrap {
        margin: 0 20px; /* Aligns with display margins */
        border: 1px solid rgba(255, 255, 255, 0.15); /* <-- Brat Tweak: Bounding border */
        border-radius: 12px;
        padding: 15px;
        background: rgba(255, 255, 255, 0.02);
        display: flex;
        gap: 15px;
        transition: max-width 0.3s ease;
        justify-content: center;
    }

    /* The Split Pads */
    .jux-keypad-half {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
        width: 100%;
        max-width: 400px;
    }

    /* Hidden state for Sci-pad when in standard mode */
    #jux-sci-pad {
        display: none; /* Default standard mode */
        animation: fadeInPad 0.3s ease;
    }
    #jux-sci-pad.active {
        display: grid;
    }

    @keyframes fadeInPad {
        from { opacity: 0; transform: translateX(-10px); }
        to { opacity: 1; transform: translateX(0); }
    }

    /* THE BUTTONS: Square rounded with 1px border */
    .jux-key {
        height: 60px; /* <-- Brat Tweak: Forces the square-ish premium feel */
        background: rgba(255,255,255,0.03);
        border: 1px solid rgba(255,255,255,0.1); /* <-- Brat Tweak: 1px border on buttons */
        color: #fff;
        border-radius: 8px;
        font-size: 1.1rem;
        cursor: pointer;
        transition: all 0.15s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        user-select: none;
        font-family: var(--jzn-active-font);
    }

    .jux-key:hover {
        background: rgba(255,255,255,0.1);
        border-color: rgba(255,255,255,0.3);
        transform: translateY(-2px);
    }
    .jux-key:active { transform: scale(0.95); }

    /* Button Variations */
    .jux-key-op {
        color: var(--jux-tool-accent);
        font-weight: bold;
        background: color-mix(in srgb, var(--jux-tool-accent), transparent 95%);
        font-size: 1.3rem;
    }

    .jux-key-sci {
        font-size: 0.9rem;
        color: rgba(255,255,255,0.7);
        background: rgba(0,0,0,0.2);
        font-family: monospace;
    }

    .jux-key-clear {
        color: #ff4d4d;
        border-color: rgba(255, 77, 77, 0.3);
        font-weight: bold;
    }

    /* The EQUALS Button - Holy Grail Treatment */
    .jux-key-eq {
        background: var(--jux-tool-accent) !important;
        color: #000 !important;
        font-weight: 800;
        font-size: 1.5rem;
        border-color: #fff !important;
        box-shadow: 0 0 15px color-mix(in srgb, var(--jux-tool-accent), transparent 50%);
    }
    .jux-key-eq:hover {
        background: #fff !important;
        color: #000 !important;
        box-shadow: 0 0 25px rgba(255, 255, 255, 0.5);
    }

    /* Mobile Responsiveness */
    @media (max-width: 768px) {
        .jux-calc-keyboard-wrap {
            flex-direction: column-reverse; /* Stacks Sci-pad above Std-pad */
            margin: 0 10px;
            padding: 10px;
        }
        .jux-sci-display-wrap {
            margin: 0 10px 15px 10px;
        }
        .jux-key { height: 50px; font-size: 1rem; }
    }