/*==================================================
    EHOC DESIGN SYSTEM
    Version : 2.0
    Author  : EHOC
==================================================*/

/* Logo Image Styling */
.logo-image {
    height: 40px;
    width: auto;
    display: block;
}

:root{

/*==================================================
|=                    BRAND COLORS
==================================================*/

/* GREEN - Primary Brand Color */
--brand-green-50:#EAF9F2;
--brand-green-100:#D6F4E5;
--brand-green-300:#7CDBB1;
--brand-green-500:#22B573;
--brand-green-600:#189C61;
--brand-green-700:#138552;
--brand-green-800:#0F6B43;

/* BLUE - Secondary Brand Color */
--brand-blue-50:#EEF8FF;
--brand-blue-100:#DCEFFF;
--brand-blue-300:#8CCCF2;
--brand-blue-500:#2D8FD5;
--brand-blue-600:#2379BB;
--brand-blue-700:#1B669F;

/* ORANGE - Accent Color */
--brand-orange-50:#FFF7E9;
--brand-orange-100:#FEECD0;
--brand-orange-300:#F8C274;
--brand-orange-500:#F4A23B;
--brand-orange-600:#D98625;
--brand-orange-700:#B96B17;
--brand-orange-800:#965312;

/* PURPLE - Special Color */
--brand-purple-50:#F4F1FF;
--brand-purple-100:#E9E2FF;
--brand-purple-300:#BEABFF;
--brand-purple-500:#7357CF;
--brand-purple-600:#6248BA;
--brand-purple-700:#50399B;

/* RED - Danger/Error Color */
--brand-red-50:#FFF0F2;
--brand-red-100:#FFE0E4;
--brand-red-300:#FC95A1;
--brand-red-500:#E14B59;
--brand-red-600:#C93645;
--brand-red-700:#AA2C39;

/* NEUTRAL COLORS */
--neutral-0:#FFFFFF;
--neutral-50:#F7F9FB;
--neutral-100:#F4F7FA;
--neutral-150:#EDF1F5;
--neutral-200:#E2E8EE;
--neutral-300:#CDD6DE;
--neutral-400:#A7B2BC;
--neutral-500:#7C8791;
--neutral-600:#6D7882;
--neutral-700:#4F5A64;
--neutral-800:#37434D;
--neutral-900:#27313A;


/*==================================================
|=                    SEMANTIC COLORS
==================================================*/

--color-primary:var(--brand-green-500);
--color-primary-hover:var(--brand-green-600);
--color-primary-active:var(--brand-green-700);
--color-primary-soft:var(--brand-green-50);

--color-secondary:var(--brand-blue-500);
--color-secondary-hover:var(--brand-blue-600);
--color-secondary-soft:var(--brand-blue-50);

--color-accent:var(--brand-orange-500);
--color-accent-hover:var(--brand-orange-600);
--color-accent-soft:var(--brand-orange-50);

--color-success:var(--brand-green-500);
--color-success-soft:var(--brand-green-50);
--color-info:var(--brand-blue-500);
--color-info-soft:var(--brand-blue-50);
--color-warning:var(--brand-orange-500);
--color-warning-soft:var(--brand-orange-50);
--color-danger:var(--brand-red-500);
--color-danger-hover:var(--brand-red-600);
--color-danger-soft:var(--brand-red-50);


/*==================================================
|=                    BACKGROUND
==================================================*/

--bg-body:var(--neutral-100);
--bg-page:var(--neutral-0);
--bg-surface:var(--neutral-0);
--bg-surface-soft:var(--neutral-50);
--bg-disabled:var(--neutral-150);
--bg-hover:var(--brand-blue-50);
--bg-selected:var(--brand-blue-100);
--bg-overlay:rgba(0,0,0,.55);

--bg-card:var(--bg-surface);
--bg-sidebar:var(--bg-surface);
--bg-modal:var(--bg-surface);
--bg-header:var(--bg-surface);
--bg-footer:var(--bg-surface);


/*==================================================
|=                    TEXT
==================================================*/

--text-primary:var(--neutral-900);
--text-secondary:var(--neutral-600);
--text-muted:var(--neutral-500);
--text-placeholder:var(--neutral-400);
--text-disabled:var(--neutral-300);
--text-inverse:var(--neutral-0);
--text-brand:var(--brand-green-700);
--text-link:var(--brand-blue-600);
--text-link-hover:var(--brand-blue-700);

--text-title:var(--text-primary);
--text-white:var(--text-inverse);
--text-success:var(--brand-green-600);
--text-warning:var(--brand-orange-700);
--text-danger:var(--brand-red-600);


/*==================================================
|=                    BORDER
==================================================*/

--border-default:var(--neutral-200);
--border-light:var(--neutral-150);
--border-strong:var(--neutral-300);
--border-primary:var(--brand-green-500);
--border-focus:var(--brand-blue-500);
--border-warning:var(--brand-orange-500);
--border-danger:var(--brand-red-500);

--border:var(--border-default);
--border-dark:var(--border-strong);


/*==================================================
|=                    LESSON STATUS
==================================================*/

--lesson-done:var(--brand-green-500);
--lesson-current:var(--brand-blue-500);
--lesson-lock:var(--neutral-300);
--lesson-shadow:rgba(0,0,0,.13);


/*==================================================
|=                    BUTTON
==================================================*/

--btn-primary-bg:var(--color-primary);
--btn-primary-hover:var(--color-primary-hover);
--btn-primary-active:var(--color-primary-active);
--btn-primary-text:var(--text-inverse);

--btn-secondary-bg:var(--color-secondary);
--btn-secondary-hover:var(--color-secondary-hover);
--btn-secondary-active:var(--brand-blue-700);
--btn-secondary-text:var(--text-inverse);

--btn-outline-bg:var(--bg-surface);
--btn-outline-border:var(--border-default);
--btn-outline-text:var(--text-primary);

--btn-danger-bg:var(--color-danger);
--btn-danger-hover:var(--color-danger-hover);
--btn-danger-text:var(--text-inverse);

--btn-disabled-bg:var(--bg-disabled);
--btn-disabled-text:var(--text-muted);


/*==================================================
|=                    INPUT
==================================================*/

--input-bg:var(--bg-surface);
--input-border:var(--border-default);
--input-border-focus:var(--border-focus);
--input-placeholder:var(--text-muted);
--input-text:var(--text-primary);
--input-disabled:var(--bg-disabled);


/*==================================================
|=                    STATUS
==================================================*/

--success:var(--color-success);
--warning:var(--color-warning);
--danger:var(--color-danger);
--info:var(--color-info);


/*==================================================
|=                    GAME ELEMENTS
==================================================*/

--xp:var(--brand-orange-500);
--coin:var(--brand-orange-400);
--diamond:var(--brand-blue-400);
--energy:var(--brand-purple-400);
--heart:var(--brand-red-400);


/*==================================================
|=                    MENU
==================================================*/

--menu-bg:var(--bg-surface);
--menu-icon:var(--text-muted);
--menu-active:var(--color-secondary);
--menu-active-bg:var(--color-secondary-soft);
--menu-divider:var(--border-light);


/*==================================================
|=                    CARD
==================================================*/

--card-bg:var(--bg-surface);
--card-title:var(--text-primary);
--card-shadow:var(--shadow-md);
--card-hover-shadow:var(--shadow-lg);


/*==================================================
|=                    LINK
==================================================*/

--link:var(--text-link);
--link-hover:var(--text-link-hover);
--link-active:var(--brand-blue-800);
--link-visited:var(--brand-purple-500);


/*==================================================
|=                    ICON
==================================================*/

--icon:var(--text-muted);
--icon-active:var(--color-secondary);
--icon-success:var(--color-success);
--icon-warning:var(--color-warning);
--icon-danger:var(--color-danger);


/*==================================================
|=                    SHADOW
==================================================*/

--shadow-xs:0 2px 6px rgba(35,52,77,.06);
--shadow-sm:0 5px 13px rgba(35,52,77,.08);
--shadow-md:0 10px 30px rgba(35,52,77,.08);
--shadow-lg:0 18px 45px rgba(20,32,48,.16);
--shadow-primary:0 5px 14px rgba(34,181,115,.20);
--shadow-secondary:0 5px 14px rgba(45,143,213,.18);
--shadow-warning:0 5px 14px rgba(244,162,59,.18);
--shadow-danger:0 5px 14px rgba(225,75,89,.16);

--shadow-3d:
inset 0 3px 0 rgba(255,255,255,.35),
inset 0 -6px 0 rgba(0,0,0,.15),
0 6px 0 rgba(0,0,0,.12),
0 12px 20px rgba(0,0,0,.18);


/*==================================================
|=                    FOCUS RINGS
==================================================*/

--focus-ring-primary:0 0 0 4px rgba(34,181,115,.16);
--focus-ring-secondary:0 0 0 4px rgba(45,143,213,.15);
--focus-ring-warning:0 0 0 4px rgba(244,162,59,.16);
--focus-ring-danger:0 0 0 4px rgba(225,75,89,.14);


/*==================================================
|=                    RADIUS
==================================================*/

--radius-xs:6px;
--radius-sm:9px;
--radius-md:11px;
--radius-lg:14px;
--radius-xl:20px;
--radius-2xl:28px;
--radius-round:999px;


/*==================================================
|=                    TYPOGRAPHY
==================================================*/

--font-family:
"Be Vietnam Pro",
"Inter",
"Segoe UI",
sans-serif;

--font-size-xs:12px;
--font-size-sm:14px;
--font-size-md:16px;
--font-size-lg:18px;
--font-size-xl:22px;
--font-size-2xl:28px;
--font-size-3xl:36px;
--font-size-4xl:48px;

--font-weight-normal:400;
--font-weight-medium:500;
--font-weight-semibold:600;
--font-weight-bold:700;
--font-weight-extrabold:800;

--line-height-tight:1.2;
--line-height-normal:1.5;
--line-height-relaxed:1.7;


/*==================================================
|=                    SPACING
==================================================*/

--space-0:0;
--space-1:4px;
--space-2:8px;
--space-3:12px;
--space-4:16px;
--space-5:20px;
--space-6:24px;
--space-7:32px;
--space-8:40px;
--space-9:48px;
--space-10:64px;


/*==================================================
|=                    ANIMATION
==================================================*/

--duration-fast:120ms;
--duration-normal:180ms;
--duration-slow:280ms;
--ease-standard:cubic-bezier(.2,.8,.2,1);
--transition-fast:all var(--duration-fast) var(--ease-standard);
--transition-normal:all var(--duration-normal) var(--ease-standard);

--transition-fast:.15s;
--transition:.25s;
--transition-slow:.4s;
--transition-page:.5s;


/*==================================================
|=                    Z-INDEX
==================================================*/

--z-base:1;
--z-dropdown:100;
--z-sticky:200;
--z-overlay:900;
--z-modal:1000;
--z-toast:1100;

--z-header:100;
--z-sidebar:800;


/*==================================================
|=                    COMPONENT TOKENS
==================================================*/

--card-radius:var(--radius-xl);
--card-padding:var(--space-4);

--button-height-sm:36px;
--button-height-md:44px;
--button-height-lg:52px;
--button-radius:var(--radius-md);
--button-font-weight:var(--font-weight-extrabold);

--input-height:44px;
--input-radius:var(--radius-md);

--square-size-desktop:84px;
--square-size-mobile:72px;
--square-radius:var(--radius-lg);
--square-border-width:3px;
--square-default-bg:var(--brand-blue-50);
--square-default-border:var(--brand-blue-500);
--square-default-text:var(--brand-blue-700);
--square-locked-bg:var(--brand-orange-50);
--square-locked-border:var(--brand-orange-500);
--square-locked-text:var(--brand-orange-800);
--square-correct-bg:#E3FAEF;
--square-correct-border:var(--brand-green-500);
--square-correct-text:var(--brand-green-800);
--square-wrong-bg:var(--brand-red-50);
--square-wrong-border:var(--brand-red-500);
--square-wrong-text:var(--brand-red-700);

--keypad-bg:var(--bg-surface);
--keypad-radius:var(--radius-xl);
--keypad-shadow:var(--shadow-lg);
--key-bg:#F1F4F7;
--key-text:var(--neutral-800);
--key-op-bg:var(--brand-orange-50);
--key-op-text:var(--brand-orange-800);
--key-delete-bg:var(--brand-red-50);
--key-delete-text:var(--brand-red-700);
--key-done-bg:var(--brand-green-500);
--key-done-text:var(--neutral-0);

}

/*==================================================
    LOGO STYLING
==================================================*/

.logo-image {
    height: 40px;
    width: auto;
    display: block;
}

/*==================================================
    QUESTION EDITOR LAYOUT
==================================================*/

.question-editor-layout {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.editor-top-bar {
    background: var(--bg-card);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.editor-selectors {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
}

.editor-left-panel,
.editor-right-panel {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    min-height: 400px;
}

.editor-panels-wrapper {
    display: flex;
    gap: var(--space-4);
}

.panel-header {
    padding: var(--space-4);
    border-bottom: 1px solid var(--border-color);
}

.panel-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.panel-content {
    padding: var(--space-4);
}

.placeholder-text {
    color: var(--text-secondary);
    text-align: center;
    padding: var(--space-8) 0;
    margin: 0;
}

.editor-left-panel {
    flex: 1;
}

.editor-right-panel {
    flex: 1;
}

.editor-actions {
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
    padding: var(--space-4);
    background: var(--bg-card);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

@media (min-width: 1024px) {
    .question-editor-layout {
        flex-direction: column;
    }
    
    .editor-top-bar {
        flex: 0 0 auto;
    }
    
    .editor-left-panel {
        flex: 1;
    }
    
    .editor-right-panel {
        flex: 1;
    }
    
    .editor-actions {
        flex: 0 0 auto;
    }
}