:root {
   --primary-color: #117D4A;
   --primary-hover: #3BB665;
   --primary-light: rgba(17, 125, 74, 0.1);

   --secondary-color: #ffffff;
   --secondary-hover: #f1f5f9;

   --accent-color: #F26A55;
   --danger-color: #ED1C24;
   --success-color: #117D4A;

   --bg-body: #0f172a;
   --bg-surface: #1e293b;
   --bg-sidebar: #022c22;
   --input-bg: #1e293b;

   --text-main: #f1f5f9;
   --text-muted: #94a3b8;
   --text-light: #ffffff;

   --border-color: #334155;
   --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
   --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5);
   --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5);
   --radius-md: 0.5rem;
   --radius-lg: 0.75rem;

   --spacing-xs: 0.25rem;
   --spacing-sm: 0.5rem;
   --spacing-md: 1rem;
   --spacing-lg: 1.5rem;
   --spacing-xl: 2rem;

   --table-hover: rgba(255, 255, 255, 0.05);
   --table-stripe: rgba(255, 255, 255, 0.02);
   --btn-ghost-hover: rgba(255, 255, 255, 0.05);
 }

 [data-theme="light"] {
   --bg-body: #f8fafc;
   --bg-surface: #ffffff;
   --bg-sidebar: #022c22;
   --text-main: #000000;
   --text-muted: #334155;
   --text-light: #ffffff;
   --border-color: #cbd5e1;
   --primary-color: #117D4A;
   --primary-hover: #3BB665;
   --input-bg: #ffffff;
   --table-hover: rgba(0, 0, 0, 0.05);
   --table-stripe: rgba(0, 0, 0, 0.02);
   --btn-ghost-hover: rgba(0, 0, 0, 0.05);
 }

 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");

 * {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
 }

 body {
   font-family: "Inter", sans-serif;
   background-color: var(--bg-body);
   color: var(--text-main);
   line-height: 1.6;
   -webkit-font-smoothing: antialiased;
 }

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

 .form-field {
   margin-bottom: var(--spacing-lg);
   display: flex;
   flex-direction: column;
   gap: var(--spacing-xs);
 }

 .form-field label {
   font-size: 0.85rem;
   font-weight: 600;
   color: var(--text-muted);
   text-transform: uppercase;
   letter-spacing: 0.05em;
 }

 input,
 select,
 textarea {
   width: 100%;
   padding: 0.75rem 1rem;
   border: 1px solid var(--border-color);
   border-radius: var(--radius-md);
   font-family: inherit;
   font-size: 0.95rem;
   transition: all 0.2s;
   background-color: var(--input-bg);
   color: var(--text-main);
 }

 select option {
   background-color: var(--bg-surface);
   color: var(--text-main);
 }

 input:focus,
 select:focus,
 textarea:focus {
   outline: none;
   border-color: var(--primary-color);
   box-shadow: 0 0 0 2px rgba(17, 125, 74, 0.2);
 }

 button {
   cursor: pointer;
   font-family: inherit;
   font-weight: 600;
   border: none;
   border-radius: var(--radius-md);
   padding: 0.75rem 1.5rem;
   transition: all 0.2s ease;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 0.5rem;
   letter-spacing: 0.025em;
 }

 button:active {
   transform: translateY(1px);
 }

 button:disabled {
   opacity: 0.5;
   cursor: not-allowed;
   filter: grayscale(1);
 }

 .solid,
 button.primary {
   background: linear-gradient(135deg,
       var(--primary-color),
       var(--primary-hover));
   color: white;
   box-shadow: 0 4px 6px -1px rgba(17, 125, 74, 0.3);
   border: 1px solid rgba(255, 255, 255, 0.1);
 }

 .solid:hover,
 button.primary:hover {
   filter: brightness(1.1);
   box-shadow: 0 6px 8px -1px rgba(17, 125, 74, 0.4);
 }

 .outline,
 button.secondary {
   background-color: rgba(255, 255, 255, 0.02);
   border: 1px solid var(--border-color);
   color: var(--text-main);
 }

 .outline:hover,
 button.secondary:hover {
   background-color: rgba(255, 255, 255, 0.08);
   color: var(--text-main);
   border-color: var(--text-muted);
 }

 .clear,
 button.ghost {
   background: transparent;
   color: var(--text-muted);
 }

 .clear:hover,
 button.ghost:hover {
   background-color: rgba(255, 255, 255, 0.05);
   color: var(--text-main);
 }

 .error-msg {
   background-color: rgba(239, 68, 68, 0.1);
   color: #fca5a5;
   padding: 0.75rem;
   border-radius: var(--radius-md);
   font-size: 0.875rem;
   margin-top: 0.5rem;
   display: none;
   border: 1px solid rgba(239, 68, 68, 0.2);
 }

 .loading {
   background: rgba(15, 23, 42, 0.9);
   backdrop-filter: blur(4px);
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 9999;
   display: flex;
   justify-content: center;
   align-items: center;
 }

 .loading label {
   font-size: 1.5rem;
   font-weight: 600;
   color: var(--primary-color);
   text-shadow: 0 0 20px rgba(17, 125, 74, 0.5);
 }


 .modal-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(15, 23, 42, 0.8);
   backdrop-filter: blur(4px);
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 10000;
   opacity: 0;
   transition: opacity 0.3s ease;
   pointer-events: none;
 }

 .modal-overlay.active {
   opacity: 1;
   pointer-events: auto;
 }

 .modal-content {
   background: var(--bg-surface);
   padding: 2rem;
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-lg);
   max-width: 450px;
   width: 90%;
   text-align: center;
   transform: translateY(20px);
   transition: transform 0.3s ease;
   border: 1px solid var(--border-color);
 }

 .modal-overlay.active .modal-content {
   transform: translateY(0);
 }

 .modal-icon {
   font-size: 3rem;
   margin-bottom: 1rem;
   display: block;
 }

 .modal-title {
   font-size: 1.25rem;
   font-weight: 700;
   margin-bottom: 0.75rem;
   color: var(--text-main);
 }

 .modal-message {
   color: var(--text-muted);
   margin-bottom: 1.5rem;
   font-size: 1rem;
   line-height: 1.5;
 }

 .modal-btn {
   width: 100%;
   padding: 0.75rem;
   border-radius: var(--radius-md);
   font-weight: 600;
   cursor: pointer;
   transition: all 0.2s;
   border: none;
 }

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

 .modal-btn-primary:hover {
   background: var(--primary-hover);
 }

 .modal-success .modal-icon {
   color: var(--success-color);
 }

 .modal-error .modal-icon {
   color: var(--danger-color);
 }

 .modal-info .modal-icon {
   color: var(--accent-color);
 }

 .form-card {
   background: var(--bg-surface);
   border-radius: var(--radius-lg);
   padding: var(--spacing-xl);
   box-shadow: var(--shadow-lg);
   border: 1px solid var(--border-color);
   margin-bottom: var(--spacing-xl);
 }

 .form-header {
   margin-bottom: var(--spacing-xl);
   border-bottom: 1px solid var(--border-color);
   padding-bottom: var(--spacing-md);
   display: flex;
   justify-content: space-between;
   align-items: center;
 }

 .form-header h2 {
   font-size: 1.5rem;
   color: var(--primary-color);
   font-weight: 700;
 }

 .form-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
   gap: var(--spacing-lg);
   margin-bottom: var(--spacing-xl);
 }

 .form-actions {
   display: flex;
   justify-content: flex-end;
   gap: var(--spacing-md);
   padding-top: var(--spacing-xl);
   border-top: 1px solid var(--border-color);
 }

 .input-group {
   position: relative;
   display: flex;
   gap: var(--spacing-sm);
 }

 .input-group input {
   flex: 1;
 }

 .section-title {
   font-size: 1.1rem;
   font-weight: 600;
   color: var(--text-main);
   margin: var(--spacing-xl) 0 var(--spacing-md);
   display: flex;
   align-items: center;
   gap: var(--spacing-sm);
 }

 .section-title::before {
   content: "";
   display: inline-block;
   width: 4px;
   height: 1.2rem;
   background: var(--primary-color);
   border-radius: 2px;
 }

 .search-grid {
   display: grid;
   grid-template-columns: 1fr 1fr auto;
   gap: var(--spacing-lg);
   align-items: flex-end;
   margin-bottom: var(--spacing-xl);
 }

 @media (max-width: 640px) {
   .search-grid {
     grid-template-columns: 1fr;
   }
 }

 @media (max-width: 640px) {
   .form-header {
     flex-direction: column;
     align-items: flex-start;
     gap: var(--spacing-sm);
     text-align: left;
   }

   .form-grid {
     grid-template-columns: 1fr !important;
   }

   .form-actions {
     flex-direction: column-reverse;
   }

   .form-actions button {
     width: 100%;
   }
 }