/* CSS Reset */
        *, *::before, *::after { box-sizing: border-box; }
        * { margin: 0; padding: 0; }
        div { display: flex; align-items: center; justify-content: center;flex-direction: column; }
        /* * { border: 1px solid red; } */
        @import url('https://fonts.cdnfonts.com/css/tt-fors-trial');
        html { font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
        body { font-family: 'TT Fors Trial Variable', sans-serif; line-height: 1.5; color: var(--text-primary); background-color: var(--bg-primary); transition: all 0.3s ease; width: 100vw;height: 100vh; }
        img, picture, video, canvas, svg { display: block; max-width: 100%; }
        input, button, textarea, select { font: inherit; color: inherit; }
        button { cursor: pointer; border: none; background: none; }
        a { text-decoration: none; color: inherit; }
        ul, ol { list-style: none; }

        /* CSS Variables - Light Theme */
        :root {
          --color-primary: #3b82f6;
          --color-primary-hover: #2563eb;
          --color-primary-light: #dbeafe;
          --color-success: #10b981;
          --color-success-light: #d1fae5;
          --color-warning: #f59e0b;
          --color-warning-light: #fef3c7;
          --color-error: #ef4444;
          --color-error-light: #fee2e2;
          --color-info: #06b6d4;
          --color-info-light: #cffafe;
          
          --gray-50: #f9fafb;
          --gray-100: #f3f4f6;
          --gray-200: #e5e7eb;
          --gray-300: #d1d5db;
          --gray-400: #9ca3af;
          --gray-500: #6b7280;
          --gray-600: #4b5563;
          --gray-700: #374151;
          --gray-800: #1f2937;
          --gray-900: #111827;
          
          --bg-primary: #ffffff;
          --bg-primary-transparent : rgba(255,255,255,0.7)
          --bg-secondary: var(--gray-50);
          --bg-tertiary: var(--gray-100);
          
          --text-primary: var(--gray-900);
          --text-secondary: var(--gray-600);
          --text-tertiary: var(--gray-400);
          --text-inverse: #ffffff;
          
          --border-primary: var(--gray-200);
          --border-secondary: var(--gray-300);
          --border-focus: var(--color-primary);
          
          --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
          --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
          --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
          
          --space-xxs: 0.125rem;
          --space-xs: 0.25rem;
          --space-sm: 0.5rem;
          --space-md: 1rem;
          --space-lg: 1.5rem;
          --space-xl: 2rem;
          --space-2xl: 3rem;
          
          --font-size-xs: 0.75rem;
          --font-size-sm: 0.875rem;
          --font-size-base: 1rem;
          --font-size-lg: 1.125rem;
          --font-size-xl: 1.25rem;
          --font-size-2xl: 1.5rem;
          --font-size-3xl: 1.875rem;
          --font-size-4xl: 2.25rem;
          
          --font-weight-normal: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
          
          --radius-sm: 0.25rem;
          --radius-md: 0.375rem;
          --radius-lg: 0.5rem;
          --radius-xl: 0.75rem;
          --radius-full: 9999px;
          
          --gap-md:10px;  

          --transition-fast: 0.15s ease;
          --transition-normal: 0.3s ease;
        }

        /* Dark Theme */
        [data-theme="dark"] {
          --bg-primary: #0f172a;
          --bg-primary-transparent : rgba(0,0,0,0.5)
          --bg-secondary: #1e293b;
          --bg-tertiary: #334155;
          --text-primary: #f1f5f9;
          --text-secondary: #cbd5e1;
          --text-tertiary: #64748b;
          --text-inverse: #0f172a;
          --border-primary: #334155;
          --border-secondary: #475569;
        }

        /* Typography */
        h1 { font-size: var(--font-size-4xl); font-weight: var(--font-weight-bold); color: var(--text-primary); margin-bottom: var(--space-lg); }
        h2 { font-size: var(--font-size-3xl); font-weight: var(--font-weight-semibold); color: var(--text-primary); margin-bottom: var(--space-md); }
        h3 { font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold); color: var(--text-primary); margin-bottom: var(--space-md); }
        h4 { font-size: var(--font-size-xl); font-weight: var(--font-weight-medium); color: var(--text-primary); margin-bottom: var(--space-sm); }
        .text-body { font-size: var(--font-size-base); color: var(--text-primary); }
        .text-body-sm { font-size: var(--font-size-sm); color: var(--text-secondary); }
        .text-caption { font-size: var(--font-size-xs); color: var(--text-tertiary); }

        .text-xs { font-size: var(--font-size-xs); color: var(--text-primary); }
        .text-sm { font-size: var(--font-size-sm); color: var(--text-primary); }
        
        /* Links */
        .link-sm{ font-size: var(--font-size-xs); color: var(--text-primary); cursor: pointer; margin-right: 5px; border-bottom: 1px solid var(--gray-400); }
        .link-sm:hover{
            border-bottom: 2px solid var(--gray-800);
        }

        .info-group { display: flex; flex-direction: column; align-items: start; gap: var(--space-xxs); margin-bottom: var(--space-sm); }
        /* Card */
        .card { background: var(--bg-primary); border: 1px solid var(--border-primary); border-radius: 1rem; box-shadow: var(--shadow-md); overflow: hidden; transition: box-shadow var(--transition-normal); }
        .card:hover { box-shadow: var(--shadow-md); }
        .card-header { padding: var(--space-md); border-bottom: 1px solid var(--border-primary); }
        .card-header-icon { width: 3rem; height: 3rem; }
        .card-body { padding: var(--space-md); }
        .card-footer { padding: var(--space-md); border-top: 1px solid var(--border-primary); background: var(--bg-secondary); }

        /* Buttons */
        .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); border-radius: var(--radius-md); border: 1px solid transparent; cursor: pointer; transition: all var(--transition-fast); white-space: nowrap; }
        .btn:disabled { opacity: 0.6; cursor: not-allowed; }
        .btn-primary { background: var(--color-primary); color: var(--text-inverse); border-color: var(--color-primary); }
        .btn-primary:hover:not(:disabled) { background: var(--color-primary-hover); }
        .btn-secondary { background: transparent; color: var(--color-primary); border-color: var(--color-primary); }
        .btn-secondary:hover:not(:disabled) { background: var(--color-primary-light); }
        .btn-ghost { background: transparent; color: var(--text-secondary); border-color: var(--gray-200); }
        .btn-ghost:hover:not(:disabled) { background: var(--bg-tertiary); color: var(--text-primary); }
        .btn-danger { background: var(--color-error); color: var(--text-inverse); }
        .btn-sm { padding: var(--space-xs) var(--space-sm); font-size: var(--font-size-xs); }
        .btn-lg { padding: var(--space-md) var(--space-lg); }
        .btn-full { width: 100%; }


        /* Dialog */
        .input-dialog { outline:none; max-width: 320px; background: var(--bg-primary); border: 1px solid var(--border-primary); border-radius: 1rem; box-shadow: var(--shadow-md); overflow: hidden; transition: box-shadow var(--transition-normal); }
        .input-dialog-header { padding: 10px; border-bottom: 1px solid #f3f4f6; display: flex; align-items: center; justify-content: space-between; cursor: pointer; user-select: none;}
        .input-dialog-title {font-size: var(--font-size-sm);font-weight: var(--font-weight-bold);color: var(--text-primary);}
        .input-dialog-description {font-size: var(--font-size-xs);color: var(--text-secondary);margin-top: 5px;}

        /* Forms */
        .optional { opacity : 0.5 }
        .form-group { display: flex; flex-direction: column; align-items: start; gap: var(--space-xxs); margin-bottom: var(--space-md); }
        .form-label { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--text-primary); }
        .form-input { padding: var(--space-sm) var(--space-md); font-size: var(--font-size-sm); color: var(--text-primary); background: var(--bg-primary); border: 1px solid var(--border-primary); border-radius: var(--radius-md); transition: all var(--transition-fast); }
        .form-input:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); }
        .form-input::placeholder { color: var(--text-tertiary); }
        .form-select { appearance: none; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e"); background-position: right var(--space-sm) center; background-repeat: no-repeat; background-size: 1.5em 1.5em; padding-right: 2.5rem; }

        /* Checkbox */
        .checkbox-group { display: flex; align-items: flex-start; gap: var(--space-sm); margin-bottom: var(--space-sm); }
        .checkbox-input { appearance: none; width: 1rem; height: 1rem; border: 2px solid var(--border-secondary); border-radius: var(--radius-sm); background: var(--bg-primary); cursor: pointer; transition: all var(--transition-fast); position: relative; flex-shrink: 0; margin-top: 2px; }
        .checkbox-input:checked { background: var(--color-primary); border-color: var(--color-primary); }
        .checkbox-input:checked::after { content: ''; position: absolute; left: 3px; top: 0px; width: 6px; height: 10px; border: solid var(--text-inverse); border-width: 0 2px 2px 0; transform: rotate(45deg); }
        .checkbox-label { font-size: var(--font-size-sm); color: var(--text-primary); cursor: pointer; }

        /* Avatar */
        .avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-full); overflow: hidden; background: var(--color-primary-light); color: var(--color-primary); font-weight: var(--font-weight-medium); flex-shrink: 0; }
        .avatar img { width: 100%; height: 100%; object-fit: cover; }
        .avatar-sm { width: 2rem; height: 2rem; font-size: var(--font-size-xs); }
        .avatar-md { width: 2.5rem; height: 2.5rem; font-size: var(--font-size-sm); }
        .avatar-lg { width: 3rem; height: 3rem; font-size: var(--font-size-base); }

        /* Badge */
        .badge { :hover { box-shadow: (var(--shadow-sm));} cursor: pointer; display: inline-flex; align-items: center; padding: var(--space-xs) var(--space-sm); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); border-radius: var(--radius-full); white-space: nowrap; }
        .badge-primary { background: var(--color-primary-light); color: var(--color-primary); }
        .badge-success { background: var(--color-success-light); color: var(--color-success); }
        .badge-warning { background: var(--color-warning-light); color: var(--color-warning); }
        .badge-error { background: var(--color-error-light); color: var(--color-error); }
        .badge-neutral { background: var(--bg-tertiary); color: var(--text-secondary); }
        .badge-alert { background: var(--color-error); color: var(--color-warning-light); top:17px;left: 17px;position: relative;}
        /* Utilities */
        .flex { display: flex; }
        .flex-col { flex-direction: column; }
        .items-center { align-items: center; }
        .justify-between { justify-content: space-between; }
        .gap-sm { gap: var(--space-sm); }
        .gap-md { gap: var(--space-md); }
        .gap-lg { gap: var(--space-lg); }
        .text-center { text-align: center; }
        .w-full { width: 100%; }
        .p-md { padding: var(--space-md); }
        .p-lg { padding: var(--space-lg); }
        .mb-md { margin-bottom: var(--space-md); }
        .mb-lg { margin-bottom: var(--space-lg); }

        /* Demo Layout */
        .demo-container { min-height: 100vh; background: var(--bg-secondary); }
        .demo-layout { display: grid; grid-template-columns: 280px 1fr; min-height: 100vh; }
        .demo-sidebar { background: var(--bg-primary); border-right: 1px solid var(--border-primary); padding: var(--space-lg); overflow-y: auto; }
        .demo-main { padding: var(--space-lg); overflow-y: auto; }
        .demo-section { margin-bottom: var(--space-2xl); }
        .demo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-lg); margin-bottom: var(--space-xl); }
        .component-showcase { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; margin-bottom: var(--space-lg); }

        /* Sidebar Navigation */
        .sidebar-nav { display: flex; flex-direction: column; gap: var(--space-xs); margin-bottom: var(--space-lg); }
        .sidebar-nav-item { padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); color: var(--text-secondary); cursor: pointer; transition: all var(--transition-fast); display: flex; align-items: center; gap: var(--space-sm); }
        .sidebar-nav-item:hover { background: var(--bg-tertiary); color: var(--text-primary); }
        .sidebar-nav-item.active { background: var(--color-primary-light); color: var(--color-primary); }

        /* Theme Toggle */
        .theme-toggle { position: fixed; top: var(--space-md); right: var(--space-md); z-index: 1000; }

        /* Progress Bar */
        .progress-bar { width: 100%; height: 8px; background: var(--bg-tertiary); border-radius: var(--radius-full); overflow: hidden; margin-bottom: var(--space-md); }
        .progress-fill { height: 100%; background: var(--color-primary); border-radius: var(--radius-full); transition: width var(--transition-normal); }

        /* Responsive */
        @media (max-width: 768px) {
          .demo-layout { grid-template-columns: 1fr; }
          .demo-sidebar { display: none; }
        }

        /* File Upload Progress */
        .file-upload { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-md); background: var(--bg-secondary); border-radius: var(--radius-md); margin-bottom: var(--space-sm); }
        .file-icon { width: 2rem; height: 2rem; background: var(--color-error); color: white; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: var(--font-size-xs); font-weight: bold; }
        .file-info { flex: 1; }
        .file-name { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--text-primary); }
        .file-size { font-size: var(--font-size-xs); color: var(--text-tertiary); }
        .file-progress { width: 100%; height: 4px; background: var(--bg-tertiary); border-radius: var(--radius-full); overflow: hidden; margin-top: var(--space-xs); }
        .file-progress-fill { height: 100%; background: var(--color-primary); border-radius: var(--radius-full); }

        /* Member List */
        .member-item { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) 0; }
        .member-info { flex: 1; }
        .member-name { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--text-primary); }
        .member-email { font-size: var(--font-size-xs); color: var(--text-tertiary); }
        .permission-dropdown { font-size: var(--font-size-xs); padding: var(--space-xs) var(--space-sm); }


        .radio-toggle input[type="radio"]:checked + .radio-toggle-label { 
         
          color: #ffffff; 
          transform: scale(1.02);
          
        }
        .radio-toggle-label:hover { 
          color: #d1d5db; 
        }
        .radio-toggle input[type="radio"]:checked + .radio-toggle-label:hover {
          color: #ffffff;
        }


        /* Radio Toggle Component */
        .radio-toggle-group { 
          display: inline-flex;
          flex-direction: row;
          background: var(--bg-tertiary); 
          border-radius: var(--radius-full); 
          padding: 2px; 
          border: 1px solid var(--border-primary); 
          box-shadow: 0 1px 2px var(--border-secondary);
        }
        .radio-toggle { position: relative; flex: 1; }
        .radio-toggle input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
        .radio-toggle-label { 
          display: block; 
          padding: 2px 8px; 
          font-size: var(--font-size-sm); 
          font-weight: var(--font-weight-normal); 
          color: var(--text-primary); 
          background: transparent; 
          border-radius: var(--radius-full); 
          cursor: pointer; 
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
          text-align: center;          
          white-space: nowrap;
        }
        .radio-toggle input[type="radio"]:checked + .radio-toggle-label { 
          background:  var(--gray-400) ; 
          color: var(--text-inverse);         
          
        }
        .radio-toggle-label:hover { 
          color: #d1d5db; 
        }
        .radio-toggle input[type="radio"]:checked + .radio-toggle-label:hover {
          color: #ffffff;
        }

        .ai-input { padding: var(--space-sm) var(--space-md); font-size: var(--font-size-xs); color: var(--text-tertiary); background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: var(--radius-md); transition: all var(--transition-fast); }