/**
 * KP Word Webs - Neobrutalist/Retro Styling
 * Matches Korean Patch design system
 */

 :root {
    /* Typography */
    --font-mono: 'Neodgm Pro', 'Courier New', monospace;
    --font-sans: 'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif;
    
    /* Korean Traditional Colors - Enhanced for Pixel Aesthetic */
    --dancheong-red: #FF1744;        /* 빨강 - Crisp digital red */
    --dancheong-blue: #2196F3;       /* 파랑 - Bright digital blue */  
    --dancheong-coral: #FF5722;      /* 산호 - Vibrant coral */
    --dispatch-yellow: #FFDD1C;      /* 노랑 - Bright yellow */
    --dancheong-green: #00695C;      /* 초록 - Deep digital teal */
    --celadon-green: var(--celadon-green);        /* 청자 - Bright celadon */
    --dancheong-white: var(--celadon-green);           /* 연두 - Electric sage */
    --dancheong-white: var(--dancheong-white);      /* 흰색 - Pure white */
    --dancheong-black: #263238;      /* 검정 - Softer black */ 
    --clean-black: #000000;          /* Pure black */
  
    /* Semantic mapping */
    --kp-primary: var(--celadon-green);
    --kp-secondary: var(--dancheong-red);
    --kp-accent: var(--dancheong-white);
    --kp-info: var(--dancheong-blue);
    --kp-warm-accent: var(--dancheong-coral);
    
    /* Surface Colors */
    --kp-bg-main: #FAFAFA;
    --kp-bg-pattern: rgba(38, 50, 56, 0.12);
    --kp-surface-primary: var(--dancheong-white);
    --kp-surface-secondary: #F5F5F5;
    --kp-surface-tertiary: #EEEEEE;
    
    /* Text Colors */
    --kp-text-primary: #000000;
    --kp-text-secondary: #4A5568;
    --kp-text-tertiary: #718096;
    
    /* Border & Shadow */
    --kp-border: #000000;
    --kp-border-light: #E2E8F0;
    --kp-shadow: 4px 4px 0 var(--kp-border);
    --kp-shadow-hover: 6px 6px 0 var(--kp-border);
    
    /* Layout */
    --kp-radius: 8px;
    --kp-radius-large: 12px;
    --kp-spacing-xs: 0.25rem;
    --kp-spacing-sm: 0.5rem;
    --kp-spacing-md: 1rem;
    --kp-spacing-lg: 1.5rem;
    --kp-spacing-xl: 2rem;
    
    /* ================================================= */
    /* Elementor Global Variables - Semantic Mapping    */
    /* ================================================= */
    /* These variables provide full coverage for all    */
    /* Elementor global colors and typography settings. */
    /* They map to our Korean Patch design system for   */
    /* consistent theming across Elementor widgets.     */
    /* ================================================= */
    
    /* Elementor Core Colors */
    --e-global-color-primary: var(--kp-primary);
    --e-global-color-secondary: var(--kp-secondary);
    --e-global-color-accent: var(--dancheong-green);
    --e-global-color-text: var(--dancheong-black);
    
    /* Elementor Extended Color Palette */
    /* Light/Neutral Tones */
    --e-global-color-84f2372: #FBEEE1;           /* Warm cream - backgrounds */
    --e-global-color-92f4c66: var(--dancheong-white);
    --e-global-color-681a87f: var(--kp-bg-main);
    --e-global-color-128878f: var(--kp-surface-secondary);
    --e-global-color-8f9ef5e: var(--kp-surface-tertiary);
    --e-global-color-8ed2dde: var(--kp-surface-tertiary);
    --e-global-color-dd38f57: var(--kp-bg-main);
    
    /* Text & Gray Tones */
    --e-global-color-06599ba: var(--dancheong-black);
    --e-global-color-2cffbb6: var(--kp-text-secondary);
    --e-global-color-be4a6a3: var(--kp-text-tertiary);
    --e-global-color-e715190: var(--kp-text-tertiary);
    --e-global-color-41cd6b3: var(--kp-text-secondary);
    --e-global-color-3fe887b: var(--clean-black);
    --e-global-color-2ef740e: #37474F;           /* Dark blue-gray - headings */
    --e-global-color-39e27e1: #A0AEC0;           /* Cool gray - muted text */
    
    /* Dark Mode Specific */
    --e-global-color-fc515a1: #121212;           /* Near black - dark bg */
    --e-global-color-c909723: #1E1E1E;           /* Dark gray 1 - surfaces */
    --e-global-color-6962a6b: #2A2A2A;           /* Dark gray 2 - cards */
    --e-global-color-5bb6edf: #363636;           /* Dark gray 3 - borders */
    
    /* Brand Accent Colors */
    --e-global-color-faa4e3c: #E66A05;           /* Deep orange - emphasis */
    --e-global-color-624a526: var(--rover-orange);
    --e-global-color-fc66327: #5865F2;           /* Discord blue - social */
    --e-global-color-75869f9: var(--dancheong-blue);
    --e-global-color-1895b75: var(--dancheong-coral);
    --e-global-color-e29ce71: var(--dancheong-green);
    --e-global-color-40f7bd7: var(--dancheong-white);
    --e-global-color-5518538: #FF4569;           /* Hot pink accent - CTAs */
    --e-global-color-af6a528: #42A5F5;           /* Light blue - info */
    --e-global-color-f1f6661: #FF7043;           /* Soft coral - warm CTAs */
    --e-global-color-28c568e: #00897B;           /* Teal accent - success */
    --e-global-color-e50c7c7: #80CBC4;           /* Light teal - highlights */
    --e-global-color-80f6c29: #AED581;           /* Light sage - positive */
    
    /* ================================================= */
    /* Elementor Global Typography - Semantic Mapping   */
    /* ================================================= */
    
    /* Base Body Text (Sans Serif) */
    --e-global-typography-588cf2a-font-family: var(--font-sans);
    --e-global-typography-588cf2a-font-weight: 500;
    --e-global-typography-588cf2a-font-style: normal;
    --e-global-typography-588cf2a-letter-spacing: 0em;
    
    /* Body Text Bold (Sans Serif) - Labels, emphasis */
    --e-global-typography-0538e32-font-family: var(--font-sans);
    --e-global-typography-0538e32-font-size: 1rem;
    --e-global-typography-0538e32-font-weight: 600;
    --e-global-typography-0538e32-text-transform: none;
    --e-global-typography-0538e32-letter-spacing: 0.04em;
    
    /* Body Text Regular (Sans Serif) - Paragraphs */
    --e-global-typography-171adaa-font-family: var(--font-sans);
    --e-global-typography-171adaa-font-size: 1rem;
    --e-global-typography-171adaa-font-weight: 400;
    
    /* Display Heading (Mono) - Hero titles, major headings */
    --e-global-typography-cbb5b5e-font-family: var(--font-mono);
    --e-global-typography-cbb5b5e-font-size: 3rem;
    --e-global-typography-cbb5b5e-font-weight: 500;
    --e-global-typography-cbb5b5e-text-transform: lowercase;
    --e-global-typography-cbb5b5e-line-height: 1.9rem;
    
    /* H2 Heading (Mono) - Section titles */
    --e-global-typography-f8a09e9-font-family: var(--font-mono);
    --e-global-typography-f8a09e9-font-size: 1.5rem;
    --e-global-typography-f8a09e9-font-weight: 500;
    --e-global-typography-f8a09e9-text-transform: uppercase;
    --e-global-typography-f8a09e9-font-style: normal;
    --e-global-typography-f8a09e9-line-height: 1.4rem;
    
    /* H3 Heading (Mono) - Subsections */
    --e-global-typography-0eb1552-font-family: var(--font-mono);
    --e-global-typography-0eb1552-font-size: 1.25rem;
    --e-global-typography-0eb1552-font-weight: 500;
    --e-global-typography-0eb1552-line-height: 1.4rem;
    
    /* H4 Heading (Mono) - Card titles */
    --e-global-typography-316c378-font-family: var(--font-mono);
    --e-global-typography-316c378-font-size: 1.125rem;
    --e-global-typography-316c378-font-weight: 500;
    --e-global-typography-316c378-line-height: 1.5rem;
    
    /* H5 Heading (Mono) - Small titles */
    --e-global-typography-8eef336-font-family: var(--font-mono);
    --e-global-typography-8eef336-font-weight: 500;
    --e-global-typography-8eef336-line-height: 1.5rem;
    
    /* Button Text (Mono) - Primary buttons */
    --e-global-typography-d94655d-font-family: var(--font-mono);
    --e-global-typography-d94655d-font-size: 1rem;
    --e-global-typography-d94655d-font-weight: 600;
    --e-global-typography-d94655d-text-transform: lowercase;
    
    /* Small Button Text (Mono) - Secondary/small buttons */
    --e-global-typography-514a88a-font-family: var(--font-mono);
    --e-global-typography-514a88a-font-size: 0.875rem;
    --e-global-typography-514a88a-font-weight: 600;
    --e-global-typography-514a88a-text-transform: lowercase;
    --e-global-typography-514a88a-line-height: 1.4rem;
    
    /* Medium Button Text (Mono) - Navigation, tabs */
    --e-global-typography-66879b4-font-family: var(--font-mono);
    --e-global-typography-66879b4-font-size: 1.1rem;
    --e-global-typography-66879b4-font-weight: 600;
    --e-global-typography-66879b4-text-transform: lowercase;
    --e-global-typography-66879b4-line-height: 1.4rem;
    --e-global-typography-66879b4-letter-spacing: 0.05rem;
    
     /* Animation Settings */
     --axis-x: 1px;
     --axis-y: .1rem;
     --animation-speed: 5s;
     --delay-multiplier: 0.25s;
  }
  
  /* === DARK MODE VARIABLES === */
  html.dark,
  body.dark {
    /* Enhanced Dark Mode Colors */
    --dancheong-red: #FF4569;
    --dancheong-blue: #42A5F5;
    --dancheong-coral: #FF7043;
    --dancheong-green: #00897B;
    --celadon-green: #80CBC4;
    --dancheong-white: #AED581;
    --dancheong-green: #FFDD1C;
    --dancheong-white: #FAFAFA;
    --dancheong-black: #37474F;
  
    --dancheong-red-lt: #FF1744;        /* 빨강 - Crisp digital red */
    --dancheong-blue-lt: #2196F3;       /* 파랑 - Bright digital blue */  
    --dancheong-coral-lt: #FF5722;      /* 산호 - Vibrant coral */
    --dancheong-green-lt: #00695C;      /* 초록 - Deep digital teal */
    --celadon-green-lt: var(--celadon-green);        /* 청자 - Bright celadon */
    --dancheong-white-lt: var(--celadon-green);           /* 연두 - Electric sage */
    --dancheong-black-lt: #263238;      /* 검정 - Softer black */ 
    --clean-black: #000000;          /* Pure black */
  
    
    /* Dark Mode Surfaces */
    --kp-bg-main: #121212;
    --kp-bg-pattern: rgba(255, 255, 255, 0.06);
    --kp-surface-primary: #1E1E1E;
    --kp-surface-secondary: #2A2A2A;
    --kp-surface-tertiary: #363636;
    
    /* Dark Mode Text */
    --kp-text-primary: var(--dancheong-white);
    --kp-text-secondary: #A0AEC0;
    --kp-text-tertiary: #718096;
    
    /* Dark Mode Borders */
    --kp-border: #363636;
    --kp-border-light: #4A5568;
    --kp-shadow: 4px 4px 0 var(--kp-border);
    --kp-shadow-hover: 6px 6px 0 var(--kp-border);
    
    /* Elementor Global Color Overrides for Dark Mode */
    --e-global-color-primary: var(--kp-primary);
    --e-global-color-secondary: var(--kp-secondary);
    --e-global-color-accent: var(--dancheong-green);
    --e-global-color-text: var(--kp-text-primary);
    
    /* Elementor Extended Color Palette - Dark Mode Adjustments */
    --e-global-color-84f2372: #2A2520;           /* Dark warm cream */
    --e-global-color-faa4e3c: #E66A05;           /* Deep orange (kept) */
    --e-global-color-fc66327: #5865F2;           /* Discord blue (kept) */
    --e-global-color-624a526: var(--rover-orange);
    --e-global-color-8f9ef5e: var(--kp-surface-tertiary);
    --e-global-color-75869f9: var(--dancheong-blue);
    --e-global-color-1895b75: var(--dancheong-coral);
    --e-global-color-e29ce71: var(--dancheong-green);
    --e-global-color-40f7bd7: var(--dancheong-white);
    --e-global-color-92f4c66: var(--kp-surface-primary);
    --e-global-color-06599ba: var(--kp-text-primary);
    --e-global-color-681a87f: var(--kp-bg-main);
    --e-global-color-128878f: var(--kp-surface-secondary);
    --e-global-color-8ed2dde: var(--kp-surface-tertiary);
    --e-global-color-2cffbb6: var(--kp-text-secondary);
    --e-global-color-be4a6a3: var(--kp-text-tertiary);
    --e-global-color-5518538: #FF4569;           /* Hot pink accent (kept) */
    --e-global-color-af6a528: #42A5F5;           /* Light blue (kept) */
    --e-global-color-f1f6661: #FF7043;           /* Soft coral (kept) */
    --e-global-color-28c568e: #00897B;           /* Teal accent (kept) */
    --e-global-color-e50c7c7: #80CBC4;           /* Light teal (kept) */
    --e-global-color-80f6c29: #AED581;           /* Light sage (kept) */
    --e-global-color-dd38f57: var(--kp-bg-main);
    --e-global-color-2ef740e: #B0BEC5;           /* Lighter blue-gray for dark mode */
    --e-global-color-fc515a1: var(--kp-surface-primary);
    --e-global-color-c909723: var(--kp-surface-secondary);
    --e-global-color-6962a6b: var(--kp-surface-tertiary);
    --e-global-color-5bb6edf: #4A5568;           /* Adjusted for dark mode */
    --e-global-color-39e27e1: #A0AEC0;           /* Cool gray (kept) */
    --e-global-color-e715190: var(--kp-text-tertiary);
    --e-global-color-41cd6b3: var(--kp-text-secondary);
    --e-global-color-3fe887b: var(--dancheong-white);
    
    /* Elementor Global Typography - Inherited from Light Mode */
    /* Typography settings remain the same in dark mode */
  }

.kp-word-web-container {
    position: relative;
    margin: 2rem 0;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    background: var(--kp-surface-primary, #1E1E1E);
    border: 4px solid var(--kp-border, #000000);
    box-shadow: 6px 6px 0 var(--kp-border, #000000);
    font-family: var(--font-sans, 'Noto Sans KR', sans-serif);
    transition: all 0.2s ease;
}


/* Controls Panel */
.kp-word-web-controls {
    display: flex;
    gap: 8px;
    padding: 12px;
    background: var(--kp-surface-secondary, #F5F5F5);
    border-bottom: 4px solid var(--kp-border, #000000);
    flex-wrap: wrap;
    align-items: center;
}

.kp-web-btn {
    font-family: var(--font-mono, 'Courier New', monospace);
    font-size: 14px;
    font-weight: 600;
    padding: 8px 16px;
    background: var(--kp-surface-primary, #1E1E1E);
    border: 3px solid var(--kp-border, #000000);
    box-shadow: 3px 3px 0 var(--kp-border, #000000);
    cursor: pointer;
    transition: all 0.1s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--kp-text-primary, #000000);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.kp-web-btn:hover {
    background: var(--celadon-green, var(--celadon-green));
    color: var(--dancheong-white, var(--dancheong-white));
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 var(--kp-border, #000000);
}

.kp-web-btn:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 var(--kp-border, #000000);
}

.kp-web-btn span {
    font-size: 18px;
    line-height: 1;
}

.kp-web-reset {
    background: var(--dancheong-white, var(--celadon-green));
    color: var(--dancheong-black, #263238);
}

.kp-web-reset:hover {
    background: var(--celadon-green, var(--celadon-green));
    color: var(--dancheong-white, var(--dancheong-white));
}

/* Group Controls */
.kp-word-web-group-controls,
.kp-word-web-level-controls,
.kp-word-web-semantic-controls {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px;
    background: var(--kp-surface-secondary, #F5F5F5);
    border-bottom: 4px solid var(--kp-border, #000000);
    flex-wrap: wrap;
}

.kp-word-web-group-controls label,
.kp-word-web-level-controls label,
.kp-word-web-semantic-controls label {
    font-family: var(--font-mono, 'Courier New', monospace);
    font-size: 14px;
    font-weight: 600;
    color: var(--kp-text-primary, #000000);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.kp-word-web-group-controls .group-count,
.kp-word-web-level-controls .level-display {
    color: var(--celadon-green, var(--celadon-green));
    font-weight: 700;
}

/* Level Control Buttons */
.kp-level-buttons,
.kp-semantic-buttons {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.kp-level-btn,
.kp-semantic-btn {
    min-width: 50px;
}

.kp-level-btn.active,
.kp-semantic-btn.active {
    background: var(--celadon-green, var(--celadon-green)) !important;
    color: var(--dancheong-white, var(--dancheong-white)) !important;
}

/* Semantic color indicator */
.semantic-color-indicator {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid var(--kp-border, #000);
    margin-right: 6px;
    vertical-align: middle;
}

.kp-group-slider,
.kp-level-slider {
    flex: 1;
    min-width: 150px;
    height: 8px;
    background: var(--kp-surface-tertiary, #EEEEEE);
    border: 2px solid var(--kp-border, #000000);
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.kp-group-slider::-webkit-slider-thumb,
.kp-level-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    background: var(--celadon-green, var(--celadon-green));
    border: 3px solid var(--kp-border, #000000);
    cursor: pointer;
    box-shadow: 2px 2px 0 var(--kp-border, #000000);
}

.kp-group-slider::-webkit-slider-thumb:hover,
.kp-level-slider::-webkit-slider-thumb:hover {
    background: var(--dancheong-white, var(--celadon-green));
}

.kp-group-slider::-moz-range-thumb,
.kp-level-slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    background: var(--celadon-green, var(--celadon-green));
    border: 3px solid var(--kp-border, #000000);
    cursor: pointer;
    box-shadow: 2px 2px 0 var(--kp-border, #000000);
}

.kp-group-slider::-moz-range-thumb:hover,
.kp-level-slider::-moz-range-thumb:hover {
    background: var(--dancheong-white, var(--celadon-green));
}

/* SVG Canvas */
.kp-word-web {
    width: 100%;
    flex: 1;
    min-height: 400px;
    position: relative;
    background: var(--kp-surface-primary, #1E1E1E);
    background-image: 
        linear-gradient(var(--kp-border-light, #E2E8F0) 1px, transparent 1px),
        linear-gradient(90deg, var(--kp-border-light, #E2E8F0) 1px, transparent 1px);
    background-size: 20px 20px;
    cursor: grab;
    overflow: hidden;
}

.kp-word-web:active {
    cursor: grabbing;
}

.kp-word-web svg {
    display: block;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
}

/* Node Styles */
.word-web-node {
    cursor: pointer;
    transition: all 0.2s ease;
}

.word-web-node rect {
    transition: all 0.2s ease;
    stroke-width: 4px;
    rx: 5px;
    ry: 5px;
}

.word-web-node:hover rect {
    filter: brightness(1.15);
    stroke-width: 2px;
}

.word-web-node.active rect {
    stroke: var(--dancheong-green);
    stroke-width: 2px;
    filter: drop-shadow(0 0 3px var(--dancheong-green));
}

.word-web-node text {
    font-family: var(--font-sans, 'Noto Sans KR', sans-serif);
    font-weight: 700;
    fill: var(--clean-black, #000000);
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    pointer-events: none;
}

.word-web-node.center text {
    font-weight: 900;
    font-size: 1.1em;
}

/* Level badges on nodes */
.word-web-node .level-badge {
    transition: all 0.2s ease;
}

.word-web-node .level-badge-text {
    font-family: var(--font-mono, 'Courier New', monospace);
    text-shadow: none !important;
}

/* Shared character highlighting */
.word-web-node.highlight-shared rect {
    fill: var(--dancheong-red) !important;
    stroke: var(--dancheong-green);
    stroke-width: 6px;
    animation: pulse-highlight 1s ease-in-out infinite;
}

/* Child highlighting - nodes that are children of the clicked node */
.word-web-node.highlight-child rect {
    stroke: var(--dancheong-green);
    stroke-width: 5px;
    filter: brightness(1.2) drop-shadow(0 0 4px var(--dancheong-green));
}
/* Ancestor highlighting - nodes in the path to center */
.word-web-node.highlight-ancestor rect {
    stroke: var(--dancheong-blue);
    stroke-width: 5px;
    filter: brightness(1.2) drop-shadow(0 0 4px var(--dancheong-blue));
}

.word-web-node.dimmed {
    opacity: 0.15;
    transition: opacity 0.3s ease;
}

.word-web-node.dimmed rect {
    stroke-opacity: 0.2;
}

.word-web-node.dimmed text {
    opacity: 0.3;
}

@keyframes pulse-highlight {
    0%, 100% {
        filter: drop-shadow(0 0 6px var(--dancheong-red));
    }
    50% {
        filter: drop-shadow(0 0 12px var(--dancheong-red));
    }
}

/* Ring guide styles for morphological mode */
.ring-guides circle {
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.ring-guide.ring-1 {
    stroke: var(--celadon-green) !important;
    stroke-opacity: 0.5;
}

.ring-guide.ring-2 {
    stroke: var(--dancheong-blue) !important;
    stroke-opacity: 0.5;
}

.ring-guide.ring-3 {
    stroke: var(--dancheong-coral) !important;
    stroke-opacity: 0.5;
}

.ring-guide.ring-4 {
    stroke: var(--dancheong-white) !important;
    stroke-opacity: 0.5;
}

/* Ring-specific node styling with color differentiation */
.word-web-node[data-ring="0"] rect {
    stroke-width: 5px;
    fill: var(--dancheong-white) !important; /* Celadon green - center */
}

.word-web-node[data-ring="1"] rect {
    stroke-width: 4px;
    fill: var(--celadon-green) !important; /* Sage green - ring 1 */
}

.word-web-node[data-ring="2"] rect {
    stroke-width: 4px;
    fill: var(--dancheong-green) !important; /* Teal - ring 2 */
}

.word-web-node[data-ring="3"] rect {
    stroke-width: 3px;
    fill: #FF9800 !important; /* Orange - ring 3 */
}

.word-web-node[data-ring="4"] rect {
    stroke-width: 3px;
    fill: #FF1744 !important; /* Red - ring 4 */
}

/* Semantic reorganization button */
.kp-semantic-reorg.active {
    background: var(--dancheong-coral) !important;
    color: var(--dancheong-white) !important;
    box-shadow: 5px 5px 0 var(--kp-border);
}

.kp-toggle-ring-guides.active {
    background: var(--celadon-green) !important;
    color: var(--dancheong-white) !important;
}

/* Link Styles */
.word-web-link {
    transition: all 0.2s ease;
    stroke-width: 4px;
}

.word-web-link.highlighted {
    stroke: var(--dancheong-green);
    stroke-width: 6px;
    filter: drop-shadow(0 0 4px var(--dancheong-green));
}

/* Dim links when branch is focused - done via JS opacity control */
.links .word-web-link {
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* Definition Panel */
.kp-word-web-definition {
    padding: 16px;
    background: var(--kp-surface-secondary, #F5F5F5);
    border-top: 4px solid var(--kp-border, #000000);
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono, 'Courier New', monospace);
    font-size: 14px;
    color: var(--kp-text-secondary);
}

.kp-word-web-definition.active {
    background: var(--celadon-green);
    color: var(--clean-black);
    border-top: 4px solid var(--kp-border);
}

.kp-word-web-definition .def-word {
    font-size: 24px;
    font-weight: 900;
    margin-right: 16px;
    color: var(--clean-black);
    text-shadow: 1px 1px 0 var(--dancheong-green);
}

.kp-word-web-definition.active .def-word {
    color: var(--dancheong-white);
    text-shadow: 1px 1px 0 var(--dancheong-green);
}

.kp-word-web-definition .def-text {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.kp-word-web-definition .def-prompt {
    font-style: italic;
    opacity: 0.7;
}

/* Error State */
.kp-word-web-error {
    padding: 20px;
    background: var(--kp-surface-secondary);
    border: 4px solid var(--dancheong-red);
    box-shadow: 4px 4px 0 var(--kp-border);
    color: var(--dancheong-red);
    font-family: var(--font-mono, 'Courier New', monospace);
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Dark Mode Support */
html.dark .kp-word-web-container {
    background: var(--kp-surface-primary, #1E1E1E);
    border-color: var(--kp-surface-tertiary);
    box-shadow: 6px 6px 0 var(--celadon-green);
    border-radius: 8px !important
}

html.dark .kp-word-web-container:hover {
    box-shadow: 6px 6px 0 var(--celadon-green);
}

html.dark .kp-word-web-controls,
html.dark .kp-word-web-group-controls,
html.dark .kp-word-web-level-controls,
html.dark .kp-word-web-semantic-controls {
    background: var(--kp-surface-secondary);
    border-bottom-color: var(--celadon-green);
}

html.dark .kp-web-btn {
    background: var(--kp-surface-primary);
    border-color: var(--celadon-green);
    box-shadow: 3px 3px 0 var(--celadon-green);
    color: var(--kp-text-primary, var(--dancheong-white));
}

html.dark .kp-web-btn:hover {
    box-shadow: 5px 5px 0 var(--celadon-green);
}

html.dark .kp-web-btn:active {
    box-shadow: 1px 1px 0 var(--celadon-green);
}

html.dark .kp-word-web {
    background: var(--kp-surface-primary);
    background-image: 
        linear-gradient(#4A5568 1px, transparent 1px),
        linear-gradient(90deg, #4A5568 1px, transparent 1px);
}

html.dark .word-web-link {
    stroke: var(--celadon-green);
}

html.dark .word-web-node rect {
    stroke: var(--celadon-green);
    fill: var(--kp-surface-tertiary);
}

html.dark .kp-word-web-definition {
    background: var(--kp-surface-secondary);
    border-top-color: var(--celadon-green);
    color: var(--kp-text-secondary, #A0AEC0);
}

html.dark .kp-word-web-definition.active {
    background: var(--kp-surface-tertiary);
    color: var(--dancheong-white);
}

html.dark .kp-word-web-definition .def-word {
    color: var(--celadon-green);
}

html.dark .kp-word-web-definition.active .def-word {
    color: var(--dancheong-white);
    text-shadow: 1px 1px 0 var(--dancheong-green);
}

html.dark .kp-word-web-error {
    background: var(--kp-surface-secondary);
    box-shadow: 4px 4px 0 var(--dancheong-red, #FF1744);
}

html.dark .word-web-node text {
    fill: var(--dancheong-white, var(--dancheong-white));
    stroke: none;
    text-shadow: 
        2px 2px 0 var(--dancheong-black),
        -1px -1px 0 var(--dancheong-black),
        1px -1px 0 var(--dancheong-black),
        -1px 1px 0 var(--dancheong-black);
}

html.dark .kp-group-slider,
html.dark .kp-level-slider {
    background: var(--kp-surface-tertiary);
    border-color: var(--celadon-green);
}

html.dark .kp-group-slider::-webkit-slider-thumb,
html.dark .kp-level-slider::-webkit-slider-thumb {
    border-color: var(--celadon-green);
    box-shadow: 2px 2px 0 var(--celadon-green);
}

html.dark .kp-group-slider::-moz-range-thumb,
html.dark .kp-level-slider::-moz-range-thumb {
    border-color: var(--celadon-green);
    box-shadow: 2px 2px 0 var(--celadon-green);
}

/* Dark mode ring guides */
html.dark .ring-guide.ring-1 {
    stroke: var(--celadon-green) !important;
}

html.dark .ring-guide.ring-2 {
    stroke: var(--dancheong-blue) !important;
}

html.dark .ring-guide.ring-3 {
    stroke: var(--dancheong-coral) !important;
}

html.dark .ring-guide.ring-4 {
    stroke: var(--dancheong-green) !important;
}

/* Responsive Design */
@media (max-width: 768px) {
    .kp-word-web-container {
        margin: 1.5rem 0;
        box-shadow: 4px 4px 0 var(--kp-border);
    }
    
    .kp-word-web-container:hover {
        box-shadow: 5px 5px 0 var(--kp-border);
        transform: translate(-1px, -1px);
    }
    
    .kp-word-web-controls,
    .kp-word-web-group-controls {
        padding: 8px;
        gap: 6px;
    }
    
    .kp-web-btn {
        font-size: 12px;
        padding: 6px 12px;
    }
    
    .kp-word-web-group-controls label {
        font-size: 12px;
        width: 100%;
    }
    
    .kp-group-slider {
        min-width: 100%;
    }
    
    .word-web-node text {
        font-size: 12px !important;
    }
    
    .kp-word-web-definition {
        padding: 12px;
        min-height: 50px;
        font-size: 12px;
    }
    
    .kp-word-web-definition .def-word {
        font-size: 20px;
        margin-right: 12px;
    }
    
    .kp-word-web-definition .def-text {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .kp-word-web-container {
        min-height: 400px;
    }
    
    .word-web-node text {
        font-size: 10px !important;
    }
    
    .kp-web-btn span {
        display: none;
    }
    
    .kp-word-web-definition .def-word {
        font-size: 18px;
    }
    
    .kp-word-web-definition .def-text {
        font-size: 12px;
    }
}

/* Print Styles */
@media print {
    .kp-word-web-container {
        border: 2px solid #000;
        box-shadow: none;
        page-break-inside: avoid;
    }
    
    .kp-word-web-controls,
    .kp-word-web-group-controls {
        display: none;
    }
}

/* Accessibility */
.word-web-node:focus-visible {
    outline: 4px solid var(--dancheong-green);
    outline-offset: 4px;
}

.kp-web-btn:focus-visible {
    outline: 3px solid var(--dancheong-green);
    outline-offset: 2px;
}

/* Animation for initial load */
@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.kp-word-web svg {
    animation: fadeInScale 0.5s ease-out;
}

/* Hidden nodes (for group functionality) */
.word-web-node.hidden {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.word-web-link.hidden {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* TutorLMS Compatibility */
.tutor-lesson-wrapper .kp-word-web-container,
.tutor-course-content-wrapper .kp-word-web-container {
    margin: 2rem 0;
}

/* Elementor Compatibility */
.elementor-widget-container .kp-word-web-container {
    margin: 1rem 0;
}