#app{min-height:100vh}:root{--color-primary: #2563eb;--color-primary-dark: #1d4ed8;--color-primary-light: #dbeafe;--color-secondary: #f9fafb;--color-secondary-dark: #f3f4f6;--color-success: #059669;--color-success-dark: #047857;--color-success-light: #d1fae5;--color-danger: #dc2626;--color-danger-dark: #991b1b;--color-danger-light: #fee2e2;--color-warning: #f59e0b;--color-warning-dark: #d97706;--color-warning-light: #fef3c7;--color-info: #3b82f6;--color-info-dark: #2563eb;--color-info-light: #dbeafe;--color-white: #ffffff;--color-black: #000000;--color-gray-50: #f9fafb;--color-gray-100: #f3f4f6;--color-gray-200: #e5e7eb;--color-gray-300: #d1d5db;--color-gray-400: #9ca3af;--color-gray-500: #6b7280;--color-gray-600: #4b5563;--color-gray-700: #374151;--color-gray-800: #1f2937;--color-gray-900: #111827;--color-text: #1f2937;--color-text-light: #6b7280;--color-text-muted: #9ca3af;--color-bg: #f3f4f6;--color-bg-light: #f9fafb;--color-bg-secondary: #edf2f7;--color-bg-overlay: rgba(0, 0, 0, .5);--color-border: #e5e7eb;--color-border-light: #f3f4f6;--color-border-dark: #d1d5db;--space-0: 0;--space-xs: .25rem;--space-sm: .5rem;--space-md: .75rem;--space-lg: 1rem;--space-xl: 1.25rem;--space-2xl: 1.5rem;--space-3xl: 2rem;--radius-none: 0;--radius-sm: 3px;--radius-md: 4px;--radius-lg: 6px;--radius-xl: 8px;--radius-2xl: 12px;--radius-full: 9999px;--shadow-none: none;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);--shadow-lg: 0 2px 8px rgba(0, 0, 0, .08);--shadow-xl: 0 4px 12px rgba(0, 0, 0, .1);--shadow-2xl: 0 10px 25px rgba(0, 0, 0, .2);--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-mono: "Courier New", Courier, monospace;--font-size-xs: .6875rem;--font-size-sm: .8125rem;--font-size-base: .875rem;--font-size-lg: .9375rem;--font-size-xl: 1rem;--font-size-2xl: 1.125rem;--font-size-3xl: 1.5rem;--font-size-4xl: 2rem;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--line-height-tight: 1.25;--line-height-normal: 1.5;--line-height-relaxed: 1.6;--transition-fast: .15s;--transition-base: .2s;--transition-slow: .3s;--transition-all: all var(--transition-base) ease;--transition-colors: color var(--transition-base) ease, background-color var(--transition-base) ease, border-color var(--transition-base) ease;--transition-transform: transform var(--transition-base) ease;--z-dropdown: 100;--z-sticky: 200;--z-fixed: 300;--z-modal-backdrop: 900;--z-modal: 1000;--z-popover: 1100;--z-tooltip: 1200}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-y:scroll}body{font-family:var(--font-sans);font-size:var(--font-size-base);line-height:var(--line-height-normal);color:var(--color-text);background:var(--color-bg);min-height:100vh;overflow-x:hidden}h1,h2,h3,h4,h5,h6{color:var(--color-text);line-height:var(--line-height-tight);font-weight:var(--font-weight-semibold);margin-bottom:var(--space-sm)}h1{font-size:var(--font-size-3xl)}h2{font-size:var(--font-size-2xl)}h3{font-size:var(--font-size-xl)}h4{font-size:var(--font-size-lg)}h5{font-size:var(--font-size-base)}h6{font-size:var(--font-size-sm)}p{margin-bottom:var(--space-md);line-height:var(--line-height-relaxed)}a{color:var(--color-primary);text-decoration:none;transition:var(--transition-colors)}a:hover{color:var(--color-primary-dark)}ul,ol{padding-left:var(--space-lg);margin-bottom:var(--space-md)}li{margin-bottom:var(--space-xs)}code,pre{font-family:var(--font-mono);background:var(--color-gray-100);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);font-size:var(--font-size-sm)}pre{padding:var(--space-md);overflow-x:auto;margin-bottom:var(--space-md)}button{font-family:inherit;cursor:pointer}input,textarea,select{font-family:inherit;font-size:inherit}img{max-width:100%;height:auto;display:block}*:focus{outline:2px solid var(--color-primary);outline-offset:2px}*:focus:not(:focus-visible){outline:none}::selection{background:var(--color-primary);color:#fff}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--color-gray-300);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--color-gray-400)}.hidden{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);border:none;border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);cursor:pointer;transition:var(--transition-all);text-decoration:none;white-space:nowrap}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--color-primary);color:#fff}.btn-primary:hover:not(:disabled){background:var(--color-primary-dark);transform:translateY(-1px);box-shadow:var(--shadow-md)}.btn-secondary{background:var(--color-gray-200);color:var(--color-text)}.btn-secondary:hover:not(:disabled){background:var(--color-gray-300)}.btn-success{background:var(--color-success);color:#fff}.btn-success:hover:not(:disabled){background:var(--color-success-dark)}.btn-danger{background:var(--color-danger-light);color:var(--color-danger-dark)}.btn-danger:hover:not(:disabled){background:var(--color-danger);color:#fff}.btn-warning{background:var(--color-warning);color:#fff}.btn-warning:hover:not(:disabled){background:var(--color-warning-dark)}.btn-info{background:var(--color-info);color:#fff}.btn-info:hover:not(:disabled){background:var(--color-info-dark)}.btn-ghost{background:transparent;color:var(--color-text)}.btn-ghost:hover:not(:disabled){background:var(--color-gray-100)}.btn-link{background:transparent;color:var(--color-primary);text-decoration:underline;padding:0}.btn-link:hover:not(:disabled){color:var(--color-primary-dark)}.btn-xs{padding:var(--space-xs) var(--space-sm);font-size:var(--font-size-xs)}.btn-sm{padding:var(--space-xs) var(--space-md);font-size:var(--font-size-sm)}.btn-lg{padding:var(--space-md) var(--space-xl);font-size:var(--font-size-lg)}.btn-xl{padding:var(--space-lg) var(--space-2xl);font-size:var(--font-size-xl)}.btn-block{width:100%}.input,.textarea,.select{width:100%;padding:var(--space-sm);border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:var(--font-size-base);background:#fff;transition:var(--transition-colors)}.input:focus,.textarea:focus,.select:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #667eea1a}.input:disabled,.textarea:disabled,.select:disabled{background:var(--color-gray-100);cursor:not-allowed}.input::placeholder,.textarea::placeholder{color:var(--color-text-muted)}.input-sm{padding:var(--space-xs) var(--space-sm);font-size:var(--font-size-sm)}.input-lg{padding:var(--space-md);font-size:var(--font-size-lg)}.label{display:block;margin-bottom:var(--space-xs);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text)}.form-group{margin-bottom:var(--space-md)}.form-error{color:var(--color-danger);font-size:var(--font-size-sm);margin-top:var(--space-xs)}.form-help{color:var(--color-text-light);font-size:var(--font-size-sm);margin-top:var(--space-xs)}.search-input{padding-left:var(--space-xl);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:var(--space-sm) center}.card{background:#fff;padding:var(--space-lg);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);transition:var(--transition-all)}.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}.card-header{padding:var(--space-lg);border-bottom:1px solid var(--color-border);margin:calc(var(--space-lg) * -1) calc(var(--space-lg) * -1) var(--space-lg)}.card-body{padding:var(--space-lg)}.card-footer{padding:var(--space-lg);border-top:1px solid var(--color-border);margin:var(--space-lg) calc(var(--space-lg) * -1) calc(var(--space-lg) * -1)}.card-compact{padding:var(--space-md)}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--color-bg-overlay);display:flex;align-items:center;justify-content:center;z-index:var(--z-modal-backdrop);padding:var(--space-md)}.modal{background:#fff;padding:var(--space-xl);border-radius:var(--radius-xl);width:90%;max-width:500px;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-3xl);z-index:var(--z-modal)}.modal-lg{max-width:800px}.modal-sm{max-width:400px}.modal-header{margin-bottom:var(--space-lg)}.modal-title{font-size:var(--font-size-2xl);color:var(--color-text);margin-bottom:var(--space-sm)}.modal-actions{display:flex;gap:var(--space-md);justify-content:flex-end;margin-top:var(--space-lg)}.container{max-width:1200px;margin:0 auto;padding:var(--space-md)}.container-sm{max-width:640px}.container-lg{max-width:1400px}.container-fluid{max-width:100%;padding-left:var(--space-md);padding-right:var(--space-md)}.section{padding:var(--space-2xl) 0}.page-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:var(--space-xl)}.page-title{font-size:var(--font-size-3xl);color:var(--color-text);margin-bottom:var(--space-xs)}.page-subtitle{color:var(--color-text-light);font-size:var(--font-size-sm)}.grid{display:grid;gap:var(--space-lg)}.grid-cols-1{grid-template-columns:repeat(1,1fr)}.grid-cols-2{grid-template-columns:repeat(2,1fr)}.grid-cols-3{grid-template-columns:repeat(3,1fr)}.grid-cols-4{grid-template-columns:repeat(4,1fr)}.grid-auto-fit{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.grid-auto-fill{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}.gap-xs{gap:var(--space-xs)}.gap-sm{gap:var(--space-sm)}.gap-md{gap:var(--space-md)}.gap-lg{gap:var(--space-lg)}.gap-xl{gap:var(--space-xl)}.flex{display:flex}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.justify-end{justify-content:flex-end}.gap-0{gap:0}.gap-1{gap:var(--space-xs)}.gap-2{gap:var(--space-sm)}.gap-3{gap:var(--space-md)}.gap-4{gap:var(--space-lg)}.gap-5{gap:var(--space-xl)}.m-0{margin:0}.m-auto{margin:auto}.mt-0{margin-top:0}.mb-0{margin-bottom:0}.ml-0{margin-left:0}.mr-0{margin-right:0}.m-1{margin:var(--space-xs)}.mt-1{margin-top:var(--space-xs)}.mb-1{margin-bottom:var(--space-xs)}.ml-1{margin-left:var(--space-xs)}.mr-1{margin-right:var(--space-xs)}.m-2{margin:var(--space-sm)}.mt-2{margin-top:var(--space-sm)}.mb-2{margin-bottom:var(--space-sm)}.ml-2{margin-left:var(--space-sm)}.mr-2{margin-right:var(--space-sm)}.m-3{margin:var(--space-md)}.mt-3{margin-top:var(--space-md)}.mb-3{margin-bottom:var(--space-md)}.ml-3{margin-left:var(--space-md)}.mr-3{margin-right:var(--space-md)}.m-4{margin:var(--space-lg)}.mt-4{margin-top:var(--space-lg)}.mb-4{margin-bottom:var(--space-lg)}.ml-4{margin-left:var(--space-lg)}.mr-4{margin-right:var(--space-lg)}.m-5{margin:var(--space-xl)}.mt-5{margin-top:var(--space-xl)}.mb-5{margin-bottom:var(--space-xl)}.ml-5{margin-left:var(--space-xl)}.mr-5{margin-right:var(--space-xl)}.p-0{padding:0}.pt-0{padding-top:0}.pb-0{padding-bottom:0}.pl-0{padding-left:0}.pr-0{padding-right:0}.p-1{padding:var(--space-xs)}.pt-1{padding-top:var(--space-xs)}.pb-1{padding-bottom:var(--space-xs)}.pl-1{padding-left:var(--space-xs)}.pr-1{padding-right:var(--space-xs)}.p-2{padding:var(--space-sm)}.pt-2{padding-top:var(--space-sm)}.pb-2{padding-bottom:var(--space-sm)}.pl-2{padding-left:var(--space-sm)}.pr-2{padding-right:var(--space-sm)}.p-3{padding:var(--space-md)}.pt-3{padding-top:var(--space-md)}.pb-3{padding-bottom:var(--space-md)}.pl-3{padding-left:var(--space-md)}.pr-3{padding-right:var(--space-md)}.p-4{padding:var(--space-lg)}.pt-4{padding-top:var(--space-lg)}.pb-4{padding-bottom:var(--space-lg)}.pl-4{padding-left:var(--space-lg)}.pr-4{padding-right:var(--space-lg)}.p-5{padding:var(--space-xl)}.pt-5{padding-top:var(--space-xl)}.pb-5{padding-bottom:var(--space-xl)}.pl-5{padding-left:var(--space-xl)}.pr-5{padding-right:var(--space-xl)}.text-xs{font-size:var(--font-size-xs)}.text-sm{font-size:var(--font-size-sm)}.text-base{font-size:var(--font-size-base)}.text-lg{font-size:var(--font-size-lg)}.text-xl{font-size:var(--font-size-xl)}.text-2xl{font-size:var(--font-size-2xl)}.text-3xl{font-size:var(--font-size-3xl)}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-normal{font-weight:var(--font-weight-normal)}.text-medium{font-weight:var(--font-weight-medium)}.text-semibold{font-weight:var(--font-weight-semibold)}.text-bold{font-weight:var(--font-weight-bold)}.text-muted{color:var(--color-text-light)}.text-light{color:var(--color-text-muted)}.text-primary{color:var(--color-primary)}.text-success{color:var(--color-success)}.text-danger{color:var(--color-danger)}.text-warning{color:var(--color-warning)}.text-info{color:var(--color-info)}.text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.alert{padding:var(--space-md);border-radius:var(--radius-md);margin-bottom:var(--space-md);border:1px solid}.alert-success{background:var(--color-success-light);color:var(--color-success-dark);border-color:var(--color-success)}.alert-danger{background:var(--color-danger-light);color:var(--color-danger-dark);border-color:var(--color-danger)}.alert-warning{background:var(--color-warning-light);color:var(--color-warning-dark);border-color:var(--color-warning)}.alert-info{background:var(--color-info-light);color:var(--color-info-dark);border-color:var(--color-info)}.badge{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)}.badge-primary{background:var(--color-primary);color:#fff}.badge-secondary{background:var(--color-gray-200);color:var(--color-text)}.badge-success{background:var(--color-success);color:#fff}.badge-danger{background:var(--color-danger);color:#fff}.loading,.empty-state{text-align:center;color:var(--color-text-light);padding:var(--space-2xl)}.spinner{display:inline-block;width:24px;height:24px;border:3px solid var(--color-gray-200);border-top-color:var(--color-primary);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.divider{height:1px;background:var(--color-border);margin:var(--space-md) 0}.divider-lg{margin:var(--space-xl) 0}.shadow-none{box-shadow:var(--shadow-none)}.shadow-sm{box-shadow:var(--shadow-sm)}.shadow-md{box-shadow:var(--shadow-md)}.shadow-lg{box-shadow:var(--shadow-lg)}.shadow-xl{box-shadow:var(--shadow-xl)}.transition-all{transition:var(--transition-all)}.transition-colors{transition:var(--transition-colors)}.transition-transform{transition:var(--transition-transform)}@media (max-width: 768px){.hide-mobile{display:none!important}.show-mobile{display:block!important}.grid-cols-2,.grid-cols-3,.grid-cols-4{grid-template-columns:1fr}.container{padding:var(--space-sm)}.modal{padding:var(--space-lg)}}@media (min-width: 769px){.hide-desktop{display:none!important}.show-desktop{display:block!important}}.note-card{background:#fff;padding:16px;border-radius:0;border:none;border-bottom:2px solid #e5e7eb;transition:all .2s ease;position:relative;display:flex;flex-direction:column}.note-card:hover{background:#f9fafb}.note-card:last-child{border-bottom:none}.note-card h3{font-size:15px;font-weight:600;color:#1f2937;margin:0 0 8px;line-height:1.4}.note-card p{color:#4b5563;line-height:1.6;font-size:13px;margin:0;flex:1}.note-footer{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding-top:12px;border-top:1px solid #f3f4f6;gap:8px}.note-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.note-tags .badge{background:#fef3c7;color:#92400e;padding:4px 8px;border-radius:4px;font-size:11px;font-weight:500;cursor:pointer;transition:all .15s ease;border:1px solid #fde68a}.note-tags .badge:hover{background:#fde68a;border-color:#fcd34d}.btn{padding:6px 12px;font-size:12px;font-weight:500;border-radius:4px;transition:all .2s ease}.btn-xs{padding:4px 8px;font-size:11px}.btn-sm{padding:6px 12px;font-size:12px}.btn-primary{background:#2563eb;color:#fff;border:1px solid #2563eb}.btn-primary:hover{background:#1d4ed8;border-color:#1d4ed8}.btn-secondary{background:#f9fafb;color:#374151;border:1px solid #d1d5db}.btn-secondary:hover{background:#f3f4f6;border-color:#9ca3af}.btn-danger{background:#fff;color:#dc2626;border:1px solid #fecaca}.btn-danger:hover{background:#fee2e2;border-color:#dc2626}.btn-success{background:#059669;color:#fff;border:1px solid #059669}.btn-success:hover{background:#047857}.input,.textarea,.select{padding:9px 12px;font-size:13px;border:1px solid #d1d5db;border-radius:4px;background:#fff;transition:all .2s ease}.input:focus,.textarea:focus,.select:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px #2563eb1a}.textarea{resize:vertical;min-height:80px;line-height:1.5}.page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;flex-wrap:wrap;gap:10px}.page-title{font-size:18px;color:#1f2937;margin:0;font-weight:600}.page-subtitle{color:#6b7280;font-size:12px;margin-top:2px}.filters-section{background:#fff;padding:12px;border-radius:6px;border:1px solid #e5e7eb;margin-bottom:12px}.filters-section .input{margin-bottom:10px}.quick-filters{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}.filter-btn{background:#fff;border:1px solid #d1d5db;padding:6px 12px;border-radius:4px;font-size:12px;font-weight:500;color:#374151;cursor:pointer;transition:all .2s ease}.filter-btn:hover{background:#f9fafb;border-color:#9ca3af}.filter-btn.active{background:#2563eb;border-color:#2563eb;color:#fff}.badge{display:inline-flex;align-items:center;padding:4px 8px;font-size:11px;font-weight:500;border-radius:4px}.badge-primary{background:#dbeafe;color:#1e40af}.badge-secondary{background:#f3f4f6;color:#4b5563}.modal{max-width:500px;padding:20px}.modal-header{margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid #e5e7eb}.modal-title{font-size:16px;font-weight:600;color:#1f2937;margin:0}.modal-actions{display:flex;gap:10px;margin-top:16px;justify-content:flex-end}.modal-actions button{flex:1}.form-group{margin-bottom:12px}.form-label{display:block;font-size:13px;font-weight:500;color:#374151;margin-bottom:6px}.container{max-width:100%;margin:0;padding:0}.grid-auto-fit{display:block;padding:0}@media (min-width: 769px){.grid-auto-fit{max-width:800px;margin:0 auto;padding:0}}.text-xs{font-size:11px}.text-sm{font-size:12px}.text-base{font-size:13px}.text-lg{font-size:15px}.text-xl{font-size:16px}.text-muted{color:#6b7280}.text-light{color:#9ca3af}.loading,.empty-state{text-align:center;padding:48px 20px;color:#6b7280;font-size:13px}.empty-state p{background:#fff;padding:20px;border-radius:6px;display:inline-block;border:1px solid #e5e7eb}@media (max-width: 640px){.note-card{padding:10px}.modal{padding:16px}.modal-actions button{flex:1}}