/*
 * Horizon Design System v1.0.0
 * PlayCity's Glass Morphism Design Framework
 * https://github.com/playcity/horizon
 * 
 * Copyright (c) 2025 PlayCity
 * Licensed under MIT License
 */

/* CSS Reset - Remove user agent stylesheet margins */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Specifically target heading elements to override user agent styles */
h1, h2, h3, h4, h5, h6 {
    margin: 0 !important;
    padding: 0;
}

/* ====================================
   CSS CUSTOM PROPERTIES (CSS Variables)
   ==================================== */

:root {
    /* PlayCity Brand Colors */
    --pc-primary-blue: #0074ff;
    --pc-primary-red: #e04b4b;
    --pc-legacy-blue: #0857c3;
    --pc-horizon-green: #34a853;
    
    /* Backward compatibility aliases */
    --pc-blue: var(--pc-primary-blue);
    --pc-red: var(--pc-primary-red);
    --pc-green: var(--pc-horizon-green);
    
    /* Background Colors */
    --pc-bg-dark: #000000;
    --pc-bg-light: #ffffff;
    
    /* Glass Morphism Variables */
    --pc-glass-bg: rgba(30, 30, 30, 0.59);
    --pc-glass-bg-light: rgba(255, 255, 255, 0.85);
    --pc-glass-border: rgba(255, 255, 255, 0.1);
    --pc-glass-border-strong: rgba(255, 255, 255, 0.2);
    --pc-glass-hover: rgba(255, 255, 255, 0.08);
    
    /* Text Colors */
    --pc-text-primary: #e8eaed;
    --pc-text-secondary: #9aa0a6;
    --pc-text-tertiary: #5f6368;
    
    /* Spacing System (4px Grid) - Reduced */
    --pc-spacing-4: 3px;
    --pc-spacing-8: 6px;
    --pc-spacing-10: 8px;
    --pc-spacing-12: 10px;
    --pc-spacing-16: 12px;
    --pc-spacing-20: 16px;
    --pc-spacing-24: 18px;
    --pc-spacing-32: 24px;
    --pc-spacing-48: 36px;
    --pc-spacing-64: 48px;
    
    /* Global Gap System - Viewport Width responsive */
    --pc-gap-micro: clamp(4px, 0.5vw, 8px);      /* Small elements: 4px -> 8px */
    --pc-gap-small: clamp(8px, 1.2vw, 20px);     /* Component spacing: 8px -> 20px */
    --pc-gap-medium: clamp(16px, 2vw, 32px);     /* Grid layouts: 16px -> 32px */
    --pc-gap-large: clamp(24px, 3vw, 48px);      /* Section spacing: 24px -> 48px */
    --pc-gap-xl: clamp(32px, 4vw, 64px);         /* Major divisions: 32px -> 64px */
    
    /* Border System */
    --pc-border-grid: 1px solid rgba(255, 255, 255, 0.08);
    --pc-border-section: 1px solid rgba(255, 255, 255, 0.12);
    --pc-border-strong: 1px solid rgba(255, 255, 255, 0.2);
    
    /* Typography Scale */
    --pc-text-caption: 11px;    /* t0 - reduced */
    --pc-text-body: 14px;       /* t1 - reduced */
    --pc-text-subtitle: 18px;   /* t2 - reduced */
    --pc-text-title: 20px;      /* t3 - reduced */
    --pc-text-headline: 26px;   /* t4 - reduced */
    --pc-text-display: 32px;    /* t5 - reduced */
    
    /* Border Radius System */
    --pc-radius-small: 4px;
    --pc-radius-medium: 8px;
    --pc-radius-large: 12px;
    --pc-radius-xlarge: 18px;
    --pc-radius-pill: 24px;
    
    /* Hierarchical Border Radius */
    --pc-radius-section: var(--pc-radius-xlarge);
    --pc-radius-component: var(--pc-radius-large);
    --pc-radius-element: var(--pc-radius-medium);
    --pc-radius-detail: var(--pc-radius-small);
    
    /* Height-based Border Radius Rules */
    --pc-radius-low-height: var(--pc-radius-pill); /* For elements < 48px height */
    
    /* Animation Variables */
    --pc-duration-fast: 0.2s;
    --pc-duration-normal: 0.3s;
    --pc-duration-slow: 0.5s;
    --pc-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --pc-easing-decelerate: cubic-bezier(0.0, 0, 0.2, 1);
    --pc-easing-accelerate: cubic-bezier(0.4, 0, 1, 1);
}

/* Light Mode Variables - Subtle Soap Bubble Inspired */
.pc-light-mode {
    /* Background colors */
    --pc-bg-dark: #fafafa;
    --pc-bg-light: #ffffff;
    
    /* Light mode glass morphism variables with better border visibility */
    --pc-glass-bg: var(--pc-glass-bg-light);
    --pc-glass-border: rgba(0, 0, 0, 0.12);
    --pc-glass-border-strong: rgba(0, 0, 0, 0.18);
    --pc-glass-hover: rgba(255, 255, 255, 0.95);
    
    /* Text colors */
    --pc-text-primary: #1a1a1a;
    --pc-text-secondary: #4a4a4a;
    --pc-text-tertiary: #6a6a6a;
    
    /* Border system */
    --pc-border-grid: 1px solid rgba(0, 0, 0, 0.04);
    --pc-border-section: 1px solid rgba(0, 0, 0, 0.06);
    --pc-border-strong: 1px solid rgba(0, 0, 0, 0.1);
}

/* ====================================
   GLOBAL STYLES
   ==================================== */

body {
    font-family: 'Astra Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #000000;
    color: var(--pc-text-primary);
    line-height: 1.5;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    transition: background-color var(--pc-duration-normal) var(--pc-easing-standard), 
                color var(--pc-duration-normal) var(--pc-easing-standard);
}

.pc-container {
    font-family: 'Astra Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--pc-bg-dark);
    color: var(--pc-text-primary);
    line-height: 1.5;
    transition: background-color var(--pc-duration-normal) var(--pc-easing-standard), 
                color var(--pc-duration-normal) var(--pc-easing-standard);
}

.pc-light-mode .pc-container {
    background: linear-gradient(135deg, 
        #fafafa 0%, 
        #ffffff 25%, 
        #f8fafc 50%, 
        #ffffff 75%, 
        #fafafa 100%);
}

/* Light mode glass enhancements with subtle soap bubble effects */
.pc-light-mode .pc-glass {
    background: var(--pc-glass-bg);
    border: 1px solid var(--pc-glass-border);
    box-shadow: 
        0 1px 3px rgba(0, 0, 0, 0.02),
        0 8px 32px rgba(255, 255, 255, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.pc-light-mode .pc-glass:hover {
    background: var(--pc-glass-hover);
    border-color: var(--pc-glass-border-strong);
    box-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.04),
        0 12px 48px rgba(255, 255, 255, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* ====================================
   GLASS MORPHISM COMPONENTS
   ==================================== */

.pc-glass {
    background: var(--pc-glass-bg);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid var(--pc-glass-border);
    border-radius: var(--pc-radius-component);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.pc-glass-hover {
    transition: all var(--pc-duration-normal) var(--pc-easing-standard);
}

.pc-glass-hover:hover {
    background: var(--pc-glass-hover);
    border-color: var(--pc-glass-border-strong);
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.1);
}

/* Aurora effect for light mode */
.pc-light-mode .pc-glass::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    background: linear-gradient(
        135deg,
        rgba(0, 116, 255, 0.05) 0%,
        rgba(255, 255, 255, 0.9) 30%,
        rgba(52, 168, 83, 0.05) 50%,
        rgba(255, 255, 255, 0.9) 70%,
        rgba(0, 116, 255, 0.05) 100%
    );
    border-radius: inherit;
    z-index: -1;
    opacity: 0.8;
    animation: pc-aurora-shift 20s ease infinite;
}

@keyframes pc-aurora-shift {
    0%, 100% { 
        background-position: 0% 50%;
        opacity: 0.7;
    }
    50% { 
        background-position: 100% 50%;
        opacity: 0.9;
    }
}

/* ====================================
   BUTTON SYSTEM
   ==================================== */

.pc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--pc-spacing-10) var(--pc-spacing-24);
    border: none;
    border-radius: var(--pc-radius-pill);
    font-size: var(--pc-text-body);
    font-weight: 400;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--pc-duration-fast) var(--pc-easing-standard);
    font-family: inherit;
    gap: var(--pc-spacing-8);
    min-height: 44px;
    white-space: nowrap;
}

.pc-btn-primary {
    background: var(--pc-blue);
    color: white;
}

.pc-btn-primary:hover {
    background: var(--pc-legacy-blue);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 116, 255, 0.15);
}

.pc-btn-success {
    background: var(--pc-green);
    color: white;
}

.pc-btn-success:hover {
    filter: brightness(0.9);
    transform: translateY(-2px);
}

.pc-btn-danger {
    background: var(--pc-red);
    color: white;
}

.pc-btn-danger:hover {
    filter: brightness(0.9);
    transform: translateY(-2px);
}

.pc-btn-glass {
    background: var(--pc-glass-bg);
    border: 1px solid var(--pc-glass-border);
    color: var(--pc-text-primary);
}

.pc-btn-glass:hover {
    background: var(--pc-glass-hover);
    border-color: var(--pc-glass-border-strong);
    transform: translateY(-2px);
}

.pc-btn-outline {
    background: transparent;
    border: 1px solid var(--pc-blue);
    color: var(--pc-blue);
}

.pc-btn-outline:hover {
    background: rgba(0, 116, 255, 0.1);
    transform: translateY(-2px);
}

/* Button Sizes */
.pc-btn-small {
    padding: var(--pc-spacing-8) var(--pc-spacing-16);
    font-size: var(--pc-text-caption);
    min-height: 32px;
}

.pc-btn-large {
    padding: var(--pc-spacing-16) var(--pc-spacing-32);
    font-size: var(--pc-text-subtitle);
    min-height: 56px;
}

/* ====================================
   INPUT SYSTEM
   ==================================== */

.pc-input {
    width: 100%;
    padding: var(--pc-spacing-12) var(--pc-spacing-24);
    background: var(--pc-glass-bg);
    border: 1px solid var(--pc-glass-border);
    border-radius: var(--pc-radius-pill);
    color: var(--pc-text-primary);
    font-size: var(--pc-text-body);
    font-family: inherit;
    transition: all var(--pc-duration-fast) var(--pc-easing-standard);
    outline: none;
    min-height: 44px;
}

.pc-input:focus {
    border-color: var(--pc-blue);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 0 2px rgba(0, 116, 255, 0.1);
}

.pc-input::placeholder {
    color: var(--pc-text-tertiary);
}

.pc-input-label {
    display: block;
    font-size: var(--pc-text-body);
    color: var(--pc-text-secondary);
    font-weight: 500;
}

.pc-input-group {
    display: flex;
    flex-direction: column;
    gap: var(--pc-spacing-8);
}

/* ====================================
   CARD SYSTEM
   ==================================== */

.pc-card {
    background: var(--pc-glass-bg);
    border: 1px solid var(--pc-glass-border);
    border-radius: var(--pc-radius-component);
    padding: var(--pc-spacing-20) var(--pc-spacing-24);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden; /* 내용이 카드를 넘지 않도록 */
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.pc-card-hover {
    transition: all var(--pc-duration-normal) var(--pc-easing-standard);
}

.pc-card-hover:hover {
    background: var(--pc-glass-hover);
    border-color: var(--pc-glass-border-strong);
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.1);
}

.pc-card-title {
    font-size: var(--pc-text-title);
    font-weight: 500;
    color: var(--pc-text-primary);
}

.pc-card-description {
    font-size: var(--pc-text-body);
    color: var(--pc-text-secondary);
    line-height: 1.6;
}

/* ====================================
   TYPOGRAPHY SYSTEM
   ==================================== */

.pc-text-caption {
    font-size: var(--pc-text-caption);
    color: var(--pc-text-tertiary);
}

.pc-text-body {
    font-size: var(--pc-text-body);
    color: var(--pc-text-primary);
}

.pc-text-subtitle {
    font-size: var(--pc-text-subtitle);
    font-weight: 500;
    color: var(--pc-text-primary);
}

.pc-text-title {
    font-size: var(--pc-text-title);
    font-weight: 500;
    color: var(--pc-text-primary);
}

.pc-text-headline {
    font-size: var(--pc-text-headline);
    font-weight: 400;
    color: var(--pc-text-primary);
}

.pc-text-display {
    font-size: var(--pc-text-display);
    font-weight: 300;
    color: var(--pc-text-primary);
}

.pc-text-primary {
    color: var(--pc-text-primary);
}

.pc-text-secondary {
    color: var(--pc-text-secondary);
}

.pc-text-tertiary {
    color: var(--pc-text-tertiary);
}

.pc-text-brand {
    color: var(--pc-blue);
}

.pc-text-success {
    color: var(--pc-green);
}

.pc-text-danger {
    color: var(--pc-red);
}

/* ====================================
   LAYOUT SYSTEM
   ==================================== */

.pc-container-fluid {
    width: 100%;
    padding-left: var(--pc-spacing-16);
    padding-right: var(--pc-spacing-16);
    overflow-x: hidden; /* 가로 스크롤 방지 */
}

.pc-container-fixed {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: var(--pc-spacing-24);
    padding-right: var(--pc-spacing-24);
    overflow-x: hidden; /* 가로 스크롤 방지 */
}

.pc-grid {
    display: grid;
    gap: var(--pc-spacing-24);
    width: 100%;
    overflow-x: hidden; /* 그리드 오버플로우 방지 */
}

.pc-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.pc-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.pc-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* 그리드 아이템들이 부모를 넘지 않도록 */
.pc-grid > * {
    min-width: 0; /* 그리드 아이템의 최소 너비 제한 */
    overflow-wrap: break-word; /* 긴 텍스트 줄바꿈 */
    word-wrap: break-word;
}

.pc-flex {
    display: flex;
    min-width: 0; /* flex 아이템의 최소 너비 제한 */
}

.pc-flex-col {
    flex-direction: column;
}

.pc-flex-center {
    align-items: center;
    justify-content: center;
}

.pc-flex-between {
    justify-content: space-between;
}

/* Adaptive Gap Utilities */
.pc-gap-micro {
    gap: var(--pc-gap-micro);
}

.pc-gap-small {
    gap: var(--pc-gap-small);
}

.pc-gap-medium {
    gap: var(--pc-gap-medium);
}

.pc-gap-large {
    gap: var(--pc-gap-large);
}

.pc-gap-xl {
    gap: var(--pc-gap-xl);
}

/* Legacy Gap Utilities (for backward compatibility) */
.pc-flex-gap-small {
    gap: var(--pc-gap-small);
}

.pc-flex-gap {
    gap: var(--pc-gap-medium);
}

.pc-flex-gap-large {
    gap: var(--pc-gap-large);
}

/* Flex 아이템들이 부모를 넘지 않도록 */
.pc-flex > * {
    min-width: 0;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* ====================================
   SPACING UTILITIES
   ==================================== */

.pc-m-0 { margin: 0; }
.pc-m-4 { margin: var(--pc-spacing-4); }
.pc-m-8 { margin: var(--pc-spacing-8); }
.pc-m-12 { margin: var(--pc-spacing-12); }
.pc-m-16 { margin: var(--pc-spacing-16); }
.pc-m-20 { margin: var(--pc-spacing-20); }
.pc-m-24 { margin: var(--pc-spacing-24); }
.pc-m-32 { margin: var(--pc-spacing-32); }

.pc-p-0 { padding: 0; }
.pc-p-4 { padding: var(--pc-spacing-4); }
.pc-p-8 { padding: var(--pc-spacing-8); }
.pc-p-12 { padding: var(--pc-spacing-12); }
.pc-p-16 { padding: var(--pc-spacing-16); }
.pc-p-20 { padding: var(--pc-spacing-20); }
.pc-p-24 { padding: var(--pc-spacing-24); }
.pc-p-32 { padding: var(--pc-spacing-32); }

.pc-mt-0 { margin-top: 0; }
.pc-mt-4 { margin-top: var(--pc-spacing-4); }
.pc-mt-8 { margin-top: var(--pc-spacing-8); }
.pc-mt-12 { margin-top: var(--pc-spacing-12); }
.pc-mt-16 { margin-top: var(--pc-spacing-16); }
.pc-mt-20 { margin-top: var(--pc-spacing-20); }
.pc-mt-24 { margin-top: var(--pc-spacing-24); }
.pc-mt-32 { margin-top: var(--pc-spacing-32); }

.pc-mb-0 { margin-bottom: 0; }
.pc-mb-4 { margin-bottom: var(--pc-spacing-4); }
.pc-mb-8 { margin-bottom: var(--pc-spacing-8); }
.pc-mb-12 { margin-bottom: var(--pc-spacing-12); }
.pc-mb-16 { margin-bottom: var(--pc-spacing-16); }
.pc-mb-20 { margin-bottom: var(--pc-spacing-20); }
.pc-mb-24 { margin-bottom: var(--pc-spacing-24); }
.pc-mb-32 { margin-bottom: var(--pc-spacing-32); }

/* ====================================
   RESPONSIVE UTILITIES
   ==================================== */

/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
    /* Gap system is now automatically responsive via viewport-width clamp() */
    
    .pc-grid-2,
    .pc-grid-3,
    .pc-grid-4 {
        grid-template-columns: 1fr;
        gap: var(--pc-gap-medium);
    }
    
    .pc-container-fixed {
        padding-left: var(--pc-spacing-16);
        padding-right: var(--pc-spacing-16);
        max-width: 100%;
    }
    
    .pc-container-fluid {
        padding-left: var(--pc-spacing-12);
        padding-right: var(--pc-spacing-12);
    }
    
    /* Sidebar and Main Content Mobile Layout */
    .sidebar-nav {
        transform: translateX(-100%);
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.2);
    }
    
    .sidebar-nav.active {
        transform: translateX(0);
    }
    
    .main-content {
        margin-left: 0;
        padding-top: 80px;
    }
    
    .container {
        padding: var(--pc-spacing-16);
    }
    
    .section {
        padding: var(--pc-spacing-24);
    }
    
    /* 모바일에서 버튼들이 너무 크면 문제가 되므로 선택적으로 적용 */
    .pc-btn-mobile-full {
        width: 100%;
    }
    
    .pc-mobile-hidden {
        display: none;
    }
    
    /* 긴 텍스트 처리 */
    .pc-text-display,
    .pc-text-headline,
    .pc-text-title {
        word-break: keep-all;
        overflow-wrap: break-word;
        hyphens: auto;
    }
    
    /* 카드 패딩 조정 */
    .pc-card {
        padding: var(--pc-spacing-16) var(--pc-spacing-20);
    }
}

/* 중간 화면 */
@media (min-width: 769px) and (max-width: 1024px) {
    .pc-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .pc-container-fixed {
        padding-left: var(--pc-spacing-20);
        padding-right: var(--pc-spacing-20);
    }
}

/* 큰 화면 */
@media (min-width: 769px) {
    .pc-desktop-hidden {
        display: none;
    }
}

/* 매우 작은 화면 (320px 이하) */
@media (max-width: 320px) {
    .pc-container-fixed,
    .pc-container-fluid {
        padding-left: var(--pc-spacing-8);
        padding-right: var(--pc-spacing-8);
    }
    
    .pc-card {
        padding: var(--pc-spacing-12) var(--pc-spacing-16);
    }
    
    .pc-btn {
        padding: var(--pc-spacing-8) var(--pc-spacing-16);
        font-size: calc(var(--pc-text-body) - 1px);
    }
}

/* ====================================
   ANIMATION UTILITIES
   ==================================== */

.pc-fade-in {
    animation: pc-fade-in var(--pc-duration-normal) var(--pc-easing-standard);
}

@keyframes pc-fade-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pc-scale-in {
    animation: pc-scale-in var(--pc-duration-normal) var(--pc-easing-standard);
}

@keyframes pc-scale-in {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.pc-slide-in-left {
    animation: pc-slide-in-left var(--pc-duration-normal) var(--pc-easing-standard);
}

@keyframes pc-slide-in-left {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ====================================
   UTILITY CLASSES
   ==================================== */

.pc-rounded-small { border-radius: var(--pc-radius-small); }
.pc-rounded { border-radius: var(--pc-radius-medium); }
.pc-rounded-large { border-radius: var(--pc-radius-large); }
.pc-rounded-xl { border-radius: var(--pc-radius-xlarge); }
.pc-rounded-pill { border-radius: var(--pc-radius-pill); }
.pc-rounded-full { border-radius: 50%; }

/* Height-based Border Radius - Auto pill shape for low height elements */
.pc-low-height,
[style*="height: 32px"],
[style*="height: 40px"],
[style*="height: 44px"] {
    border-radius: var(--pc-radius-low-height) !important;
}

.pc-shadow-small { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); }
.pc-shadow { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08); }
.pc-shadow-large { box-shadow: 0 16px 64px rgba(0, 0, 0, 0.12); }

.pc-backdrop-blur { backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.pc-backdrop-blur-strong { backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }

.pc-transition { transition: all var(--pc-duration-fast) var(--pc-easing-standard); }
.pc-transition-slow { transition: all var(--pc-duration-slow) var(--pc-easing-standard); }

.pc-cursor-pointer { cursor: pointer; }
.pc-select-none { user-select: none; }

.pc-text-center { text-align: center; }
.pc-text-left { text-align: left; }
.pc-text-right { text-align: right; }

.pc-overflow-hidden { overflow: hidden; }
.pc-overflow-auto { overflow: auto; }
.pc-overflow-x-hidden { overflow-x: hidden; }
.pc-overflow-y-hidden { overflow-y: hidden; }
.pc-overflow-x-auto { overflow-x: auto; }
.pc-overflow-y-auto { overflow-y: auto; }

/* 텍스트 오버플로우 처리 */
.pc-text-ellipsis { 
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pc-text-break { 
    word-break: break-word;
    overflow-wrap: break-word;
}

.pc-text-no-wrap { 
    white-space: nowrap;
}

/* ====================================
   HORIZON LAYOUT COMPONENTS (from horizon-main.css)
   ==================================== */

/* Design Grid Layout - Simple flexbox approach */
.design-grid {
    display: flex;
    min-height: 100vh;
}

/* Sidebar Navigation */
.sidebar-nav {
    position: fixed;
    top: 80px;
    left: 0;
    bottom: 0;
    width: 280px;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-right: var(--pc-border-section);
    padding: var(--pc-spacing-24);
    display: flex;
    flex-direction: column;
    gap: var(--pc-gap-large);
    overflow-y: auto;
    z-index: 90;
    transition: transform 0.3s ease;
}

.pc-light-mode .sidebar-nav {
    background: rgba(255, 255, 255, 0.95);
}

.sidebar-section {
    display: flex;
    flex-direction: column;
    gap: var(--pc-gap-small);
}

.sidebar-title {
    font-size: var(--pc-text-caption);
    font-weight: 600;
    color: var(--pc-text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
    /* Margin removed - use flex gap instead */
}

.sidebar-link {
    display: block;
    padding: var(--pc-spacing-16);
    color: var(--pc-text-secondary);
    text-decoration: none;
    border-radius: var(--pc-radius-medium);
    transition: all 0.2s ease;
    /* Margin removed - use flex gap instead */
    font-size: var(--pc-text-body);
}

.sidebar-link:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--pc-text-primary);
    transform: translateX(4px);
}

.pc-light-mode .sidebar-link:hover {
    background: rgba(0, 116, 255, 0.05);
}

.sidebar-link.active {
    background: rgba(0, 116, 255, 0.1);
    color: var(--pc-primary-blue);
    border-left: 3px solid var(--pc-primary-blue);
    font-weight: 500;
}

/* Main Content Area - Simplified */
.main-content {
    margin-left: 280px;
    flex: 1;
    padding-top: 80px;
    background: radial-gradient(ellipse at top, rgba(0, 116, 255, 0.02) 0%, transparent 40%),
                radial-gradient(ellipse at bottom right, rgba(138, 43, 226, 0.02) 0%, transparent 40%);
    position: relative;
    z-index: 1;
}

/* Hero Section */
.hero-section {
    min-height: calc(100vh - 64px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--pc-spacing-48);
    background: 
        radial-gradient(ellipse 800px 600px at 20% 40%, rgba(0, 116, 255, 0.15), transparent),
        radial-gradient(ellipse 600px 400px at 80% 60%, rgba(224, 75, 75, 0.1), transparent),
        radial-gradient(ellipse 1000px 800px at 50% 50%, rgba(138, 43, 226, 0.08), transparent);
    position: relative;
    overflow: hidden;
}

.hero-content {
    text-align: center;
    max-width: 800px;
    z-index: 10;
    position: relative;
}

.hero-title {
    font-size: var(--pc-text-display);
    font-weight: 300;
    /* Margin removed - use flex gap instead */
    background: linear-gradient(135deg, 
        var(--pc-text-primary) 0%, 
        rgba(0, 116, 255, 0.8) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle {
    font-size: var(--pc-text-subtitle);
    color: var(--pc-text-secondary);
    /* Margin removed - use flex gap instead */
    line-height: 1.6;
}

/* Header Styles */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: var(--pc-border-section);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--pc-spacing-32);
}

.pc-light-mode .header {
    background: rgba(255, 255, 255, 0.95);
}

.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--pc-spacing-24);
}

.header-brand {
    display: flex;
    align-items: center;
    gap: var(--pc-spacing-16);
}

.header-logo {
    height: 24px;
    color: var(--pc-text-primary);
}

.header-title {
    display: flex;
    flex-direction: column;
}

.header-nav {
    display: flex;
    align-items: center;
    gap: var(--pc-spacing-32);
}

.header-nav-link {
    color: var(--pc-text-secondary);
    text-decoration: none;
    font-size: var(--pc-text-body);
    transition: color 0.2s ease;
}

.header-nav-link:hover {
    color: var(--pc-text-primary);
}

.header-nav-divider {
    width: 1px;
    height: 20px;
    background: var(--pc-border-grid);
}

/* Container Styles */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--pc-spacing-32);
    display: flex;
    flex-direction: column;
    gap: var(--pc-spacing-48);
}

/* Section Styles */
.section {
    background: var(--pc-glass-bg);
    border: var(--pc-border-section);
    border-radius: var(--pc-radius-section);
    padding: var(--pc-spacing-48);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    margin-bottom: 0;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: var(--pc-spacing-32);
}

.section-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--pc-spacing-16);
    text-align: left;
    /* Margin removed - use flex gap instead */
}

/* Removed redundant .align-left class - all headers are left-aligned by default */

.section-title {
    font-size: var(--pc-text-title);
    font-weight: 400;
    color: var(--pc-text-primary);
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.section-description {
    font-size: var(--pc-text-body);
    color: var(--pc-text-secondary);
    max-width: 600px;
    line-height: 1.5;
}

/* Removed redundant .align-left styling - all headers support full width descriptions */

/* Subsection Styles */
.subsection {
    display: flex;
    flex-direction: column;
    gap: var(--pc-spacing-20);
    /* Margin removed - use flex gap instead */
}

.subsection:last-child {
    margin-bottom: 0;
}

.subsection-title {
    font-size: var(--pc-text-subtitle);
    font-weight: 500;
    color: var(--pc-text-primary);
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: var(--pc-spacing-8);
}

/* Import Section Styles */
.import-section {
    background: var(--pc-glass-bg);
    border: var(--pc-border-section);
    border-radius: var(--pc-radius-xlarge);
    padding: var(--pc-spacing-32);
    margin: var(--pc-spacing-32) 0;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}


.import-card {
    background: var(--pc-glass-bg);
    border: var(--pc-border-grid);
    border-radius: var(--pc-radius-large);
    padding: var(--pc-spacing-20);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: all var(--pc-duration-fast) var(--pc-easing-standard);
}

.import-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--pc-primary-blue);
    transform: translateY(-2px);
}

.pc-light-mode .import-card:hover {
    background: rgba(0, 116, 255, 0.05);
}

/* Import Card Layout System */
.import-card-code,
.import-card-download {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 200px;
}

.import-card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-bottom: var(--pc-spacing-16);
}

.import-card-content .component-title {
    margin-bottom: var(--pc-spacing-8);
}

.import-card-content .component-description {
    margin-bottom: var(--pc-spacing-12);
}

/* Code blocks stick to bottom */
.import-card-code .code-block {
    margin-top: auto;
}

/* Download actions stick to bottom */
.import-card-actions {
    margin-top: auto;
    display: flex;
    gap: var(--pc-spacing-8);
    flex-wrap: wrap;
}

.import-card-actions .pc-btn {
    flex: 1;
    min-width: 120px;
}

/* Improved spacing for import grid */
.import-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--pc-spacing-20);
    margin: var(--pc-spacing-24) 0;
}

.pc-text-wrap { 
    white-space: normal;
}

.pc-position-relative { position: relative; }
.pc-position-absolute { position: absolute; }
.pc-position-fixed { position: fixed; }

.pc-z-0 { z-index: 0; }
.pc-z-10 { z-index: 10; }
.pc-z-20 { z-index: 20; }
.pc-z-30 { z-index: 30; }
.pc-z-40 { z-index: 40; }
.pc-z-50 { z-index: 50; }

.pc-w-full { width: 100%; }
.pc-h-full { height: 100%; }
.pc-min-h-screen { min-height: 100vh; }

.pc-opacity-0 { opacity: 0; }
.pc-opacity-50 { opacity: 0.5; }
.pc-opacity-75 { opacity: 0.75; }
.pc-opacity-100 { opacity: 1; }

/* ====================================
   COMPONENT MODIFIERS
   ==================================== */

.pc-glass-subtle {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.pc-glass-strong {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.pc-border-brand {
    border-color: var(--pc-blue);
}

.pc-border-success {
    border-color: var(--pc-green);
}

.pc-border-danger {
    border-color: var(--pc-red);
}

.pc-bg-brand {
    background-color: var(--pc-blue);
}

.pc-bg-success {
    background-color: var(--pc-green);
}

.pc-bg-danger {
    background-color: var(--pc-red);
}

/* ====================================
   COMPONENT DEMO STYLES
   ==================================== */

.component-demo {
    background: var(--pc-glass-bg);
    border: 1px solid var(--pc-glass-border);
    border-radius: var(--pc-radius-component);
    padding: var(--pc-spacing-32);
    display: flex;
    flex-direction: column;
    gap: var(--pc-spacing-20);
    position: relative;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.3s var(--pc-easing-standard);
}

.component-demo:hover {
    border-color: var(--pc-glass-border-strong);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.component-title {
    font-size: var(--pc-text-title);
    color: var(--pc-text-primary);
    font-weight: 500;
}

.component-description {
    font-size: var(--pc-text-body);
    color: var(--pc-text-secondary);
    line-height: 1.6;
}

/* Code Block */
.code-block {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--pc-glass-border);
    border-radius: var(--pc-radius-element);
    padding: var(--pc-spacing-16);
    overflow-x: auto;
    font-family: 'Roboto Mono', monospace;
    font-size: var(--pc-text-caption);
    color: var(--pc-text-primary);
    margin: 0;
    position: relative;
}

.pc-light-mode .code-block {
    background: rgba(0, 0, 0, 0.05);
}

.code-block pre {
    margin: 0;
    white-space: pre-wrap;
}

/* Copy Button */
.copy-button {
    position: absolute;
    top: var(--pc-spacing-8);
    right: var(--pc-spacing-8);
    background: transparent;
    border: 1px solid var(--pc-glass-border);
    color: var(--pc-text-secondary);
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s ease;
}

.copy-button:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--pc-text-primary);
}

.copy-button.copied {
    color: var(--pc-horizon-green);
    border-color: var(--pc-horizon-green);
}

/* Copy notification */
.copy-notification {
    position: fixed;
    bottom: var(--pc-spacing-32);
    right: var(--pc-spacing-32);
    background: var(--pc-glass-bg);
    border: 1px solid var(--pc-glass-border);
    padding: var(--pc-spacing-16) var(--pc-spacing-24);
    border-radius: var(--pc-radius-medium);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
    pointer-events: none;
    backdrop-filter: blur(10px);
    z-index: 1000;
}

.copy-notification.show {
    opacity: 1;
    transform: translateY(0);
}

/* Color Grid */
.color-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--pc-spacing-20);
}

.color-card {
    display: flex;
    flex-direction: column;
    gap: var(--pc-spacing-12);
    padding: var(--pc-spacing-16);
    background: var(--pc-glass-bg);
    border: 1px solid var(--pc-glass-border);
    border-radius: var(--pc-radius-component);
    cursor: pointer;
    transition: all 0.3s var(--pc-easing-standard);
}

.color-card:hover {
    transform: translateY(-4px);
    border-color: var(--pc-glass-border-strong);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

.color-swatch {
    width: 100%;
    height: 100px;
    border-radius: var(--pc-radius-element);
    position: relative;
    overflow: hidden;
}

.color-name {
    font-size: var(--pc-text-body);
    font-weight: 500;
    color: var(--pc-text-primary);
}

.color-value {
    font-size: var(--pc-text-caption);
    color: var(--pc-text-secondary);
    font-family: 'Roboto Mono', monospace;
}

.color-info {
    display: flex;
    flex-direction: column;
    gap: var(--pc-spacing-4);
}

/* Space Background Animation */
.star {
    position: absolute;
    background: white;
    border-radius: 50%;
    animation: twinkle 4s infinite;
}

@keyframes twinkle {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

/* Border Radius Examples */
.radius-examples {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pc-spacing-16);
    /* Margin removed - use flex gap instead */
}

.radius-box {
    height: 80px;
    background: var(--pc-glass-bg);
    border: 1px solid var(--pc-glass-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: var(--pc-text-caption);
    color: var(--pc-text-secondary);
    padding: var(--pc-spacing-12);
    gap: var(--pc-spacing-4);
    min-width: 100px;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

/* Spacing Showcase */
.spacing-showcase {
    display: flex;
    flex-direction: column;
    gap: var(--pc-spacing-16);
    padding: var(--pc-spacing-16);
    background: var(--pc-glass-bg);
    border: var(--pc-border-grid);
    border-radius: var(--pc-radius-large);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.spacing-row {
    display: flex;
    align-items: center;
    gap: var(--pc-spacing-16);
}

.spacing-dotted-line {
    height: 2px;
    background: repeating-linear-gradient(
        to right,
        var(--pc-text-secondary) 0px,
        var(--pc-text-secondary) 4px,
        transparent 4px,
        transparent 8px
    );
    opacity: 0.6;
    margin: 0 var(--pc-spacing-8);
}

.spacing-box {
    background: transparent;
    border: 2px dashed var(--pc-primary-blue);
    border-radius: var(--pc-radius-small);
    flex-shrink: 0;
    position: relative;
}

.spacing-label {
    font-size: var(--pc-text-body);
    font-family: 'Monaco', 'Menlo', monospace;
    color: var(--pc-text-secondary);
}

/* Button Grid */
.button-grid {
    display: flex;
    gap: var(--pc-spacing-12);
    flex-wrap: wrap;
}

/* ====================================
   SPACE BACKGROUND (from Auth Pages)
   ==================================== */

.space-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.stars {
    width: 100%;
    height: 100%;
    position: relative;
}

.star {
    position: absolute;
    background: #ffffff;
    border-radius: 50%;
    animation: twinkle 4s infinite;
    opacity: 0.8;
}

@keyframes twinkle {
    0%, 100% { 
        opacity: 0.2; 
        transform: scale(0.8);
    }
    50% { 
        opacity: 1; 
        transform: scale(1.2);
    }
}

/* ====================================
   PRINT STYLES
   ==================================== */

@media print {
    .pc-glass,
    .pc-glass-hover,
    .pc-card {
        background: white !important;
        border: 1px solid #ccc !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
    }
    
    .pc-btn {
        border: 1px solid #000 !important;
        background: white !important;
        color: #000 !important;
    }
}