:root {
  
  --qf-primary:        #2B5CFF;   
  --qf-primary-hover:  #1E50E8;   
  --qf-primary-soft:   rgba(43, 92, 255, 0.12);
  --qf-primary-ring:   rgba(43, 92, 255, 0.35);
  --qf-accent:         #00C2FF;   

  
  --qf-success: #0E9F5B;
  --qf-warning: #B26A00;
  --qf-danger:  #D92D20;
  --qf-info:    #2B5CFF;

  
  --qf-bg:            #F6F7FA;
  --qf-surface:       #FFFFFF;
  --qf-surface-hover: #F0F2F7;
  --qf-border:        #E3E7EF;
  --qf-border-soft:   #EEF1F6;
  --qf-text:          #101828;
  --qf-text-muted:    #5A6478;

  
  --qf-space-1: 4px;  --qf-space-2: 8px;  --qf-space-3: 12px;
  --qf-space-4: 16px; --qf-space-5: 24px; --qf-space-6: 32px;
  --qf-radius-sm: 8px; --qf-radius-md: 12px; --qf-radius-lg: 16px;
  --qf-shadow-sm: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
  --qf-shadow-md: 0 4px 12px rgba(16,24,40,.08), 0 2px 4px rgba(16,24,40,.05);
  --qf-shadow-lg: 0 18px 44px rgba(16,24,40,.16), 0 4px 12px rgba(16,24,40,.08);

  
  --bp-sm: 640px;   
  --bp-md: 768px;   
  --bp-lg: 1024px;  
  --bp-xl: 1280px;  

  
  --qf-brand-grad: linear-gradient(135deg, #2B5CFF 0%, #00C2FF 100%);
  --qf-brand-grad-soft: linear-gradient(135deg, rgba(43,92,255,.12) 0%, rgba(0,194,255,.12) 100%);
  --qf-brand-glow: rgba(43, 92, 255, .28);

  
  --qf-success-soft: rgba(14, 159, 91, .12);
  --qf-warning-soft: rgba(178, 106, 0, .13);
  --qf-danger-soft:  rgba(217, 45, 32, .12);
  --qf-info-soft:    rgba(43, 92, 255, .10);

  
  --qf-info-note:        rgba(43, 92, 255, .07);
  --qf-info-note-ic:     var(--qf-primary);
  --qf-info-note-title:  #1E50E8;
  --qf-info-note-text:   var(--qf-text);

  --qf-success-note:      rgba(14, 159, 91, .08);
  --qf-success-note-ic:   var(--qf-success);
  --qf-success-note-title:#046C4E;
  --qf-success-note-text: var(--qf-text);

  --qf-warning-note:      rgba(178, 106, 0, .09);
  --qf-warning-note-ic:   var(--qf-warning);
  --qf-warning-note-title:#8A4B00;
  --qf-warning-note-text: var(--qf-text);

  --qf-danger-note:       rgba(217, 45, 32, .07);
  --qf-danger-note-ic:    var(--qf-danger);
  --qf-danger-note-title: #A81E14;
  --qf-danger-note-text:  var(--qf-text);

  
  --qf-note-neutral:      rgba(16, 24, 40, .035);

  
  --qf-code-bg:   #0D1B24;
  --qf-code-text: #C7E4F5;   
  --qf-code-border: rgba(37, 99, 235, .28);

  --qf-focus-ring: 0 0 0 3px var(--qf-primary-ring);

  
  --qf-z-base: 0;
  --qf-z-raised: 10;
  --qf-z-sticky: 100;
  --qf-z-header: 200;
  --qf-z-dropdown: 400;
  --qf-z-overlay: 800;
  --qf-z-modal: 900;
  --qf-z-toast: 1000;
  --qf-z-tooltip: 1100;
}


[data-theme="dark"] {
  --qf-primary:        #6C8FFF;          
  --qf-primary-hover:  #9FB5FF;          
  --qf-primary-soft:   rgba(108, 143, 255, .16);
  --qf-primary-ring:   rgba(108, 143, 255, .42);
  --qf-accent:         #4FD8FF;          

  --qf-success: #34D399;
  --qf-warning: #FBBF24;
  --qf-danger:  #F87171;
  --qf-info:    #6C8FFF;

  --qf-bg:            #0E1116;
  --qf-surface:       #1A2029;
  --qf-surface-hover: #222A35;
  --qf-border:        #262D38;
  --qf-border-soft:   #1E242E;
  --qf-text:          #E7ECF3;
  --qf-text-muted:    #97A4B8;

  --qf-shadow-sm: 0 1px 2px rgba(0,0,0,.40);
  --qf-shadow-md: 0 4px 12px rgba(0,0,0,.45);
  --qf-shadow-lg: 0 18px 44px rgba(0,0,0,.55);

  --qf-brand-grad:      linear-gradient(135deg, #6C8FFF 0%, #4FD8FF 100%);
  --qf-brand-grad-soft: linear-gradient(135deg, rgba(108,143,255,.16) 0%, rgba(79,216,255,.16) 100%);
  --qf-brand-glow:      rgba(108, 143, 255, .32);

  --qf-success-soft: rgba(52, 211, 153, .16);
  --qf-warning-soft: rgba(251, 191, 36, .16);
  --qf-danger-soft:  rgba(248, 113, 113, .16);
  --qf-info-soft:    rgba(108, 143, 255, .16);

  
  --qf-info-note:        rgba(108, 143, 255, .10);
  --qf-info-note-ic:     #9FB5FF;
  --qf-info-note-title:  #D2DDFF;
  --qf-info-note-text:   var(--qf-text);

  --qf-success-note:      rgba(52, 211, 153, .10);
  --qf-success-note-ic:   #6EE7B7;
  
  --qf-success-note-title:#86EFAC;
  --qf-success-note-text: var(--qf-text);

  --qf-warning-note:      rgba(251, 191, 36, .09);
  --qf-warning-note-ic:   #FCD34D;
  --qf-warning-note-title:#FDE68A;
  --qf-warning-note-text: var(--qf-text);

  --qf-danger-note:       rgba(248, 113, 113, .09);
  --qf-danger-note-ic:    #FCA5A5;
  --qf-danger-note-title: #FECACA;
  --qf-danger-note-text:  var(--qf-text);

  --qf-note-neutral:      rgba(255, 255, 255, .045);
}




.qf-skeleton {
  display: block;
  border-radius: var(--qf-radius-sm);
  background:
    linear-gradient(90deg, transparent 0%, var(--qf-surface-hover) 50%, transparent 100%)
      var(--qf-surface-hover);
  background-size: 220% 100%;
  animation: qf-skeleton-sweep 1.35s ease-in-out infinite;
  min-height: 1em;
}
@keyframes qf-skeleton-sweep {
  0%   { background-position: 140% 0; }
  100% { background-position: -40% 0; }
}
.qf-skeleton--title { height: 20px; width: 62%; margin-bottom: 10px; }
.qf-skeleton--line  { height: 13px; margin-bottom: 8px; }
.qf-skeleton--card  { height: 96px; border: 1px solid var(--qf-border); border-radius: var(--qf-radius-md); }
.qf-skeleton-stack   { display: grid; gap: 12px; }


.qf-spinner {
  display: inline-block; width: 18px; height: 18px;
  border: 2px solid var(--qf-primary-soft);
  border-top-color: var(--qf-primary);
  border-radius: 50%;
  animation: qf-spin .7s linear infinite;
  vertical-align: -3px;
}
@keyframes qf-spin { to { transform: rotate(360deg); } }

.qf-loading {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: var(--qf-space-5);
  color: var(--qf-text-muted); font-size: 14px;
}


.qf-empty, .qf-error {
  padding: var(--qf-space-5) var(--qf-space-4);
  text-align: center;
  border: 1px dashed var(--qf-border);
  border-radius: var(--qf-radius-md);
  background: var(--qf-surface);
}
.qf-empty-title, .qf-error-title {
  font-weight: 700; color: var(--qf-text);
  font-size: 15px; margin-bottom: 6px;
}
.qf-empty-body, .qf-error-body {
  font-size: 13.5px; color: var(--qf-text-muted);
  line-height: 1.7; margin-bottom: var(--qf-space-3);
}
.qf-empty-hint { font-size: 13px; color: var(--qf-text-muted); }


.qf-error {
  border-style: solid;
  border-color: var(--qf-danger-soft);
  background: var(--qf-danger-soft);
}
.qf-error-title { color: var(--qf-danger); }
.qf-error-title::before {
  content: "!"; display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; margin-right: 7px; border-radius: 50%;
  background: var(--qf-danger); color: var(--qf-surface);
  font-size: 12px; font-weight: 800; vertical-align: -3px;
}

@media (prefers-reduced-motion: reduce) {
  .qf-skeleton, .qf-spinner { animation: none; }
}


.qf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 22px;
  border-radius: var(--qf-radius-md);
  font-size: 14.5px; font-weight: 600; line-height: 1.4;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease,
              background .2s ease, color .2s ease, border-color .2s ease;
}
.qf-btn:active { transform: translateY(1px); }
.qf-btn--primary {
  background: var(--qf-brand-grad); color: #fff;
  box-shadow: 0 6px 18px -6px var(--qf-brand-glow);
}
.qf-btn--primary:hover { color: #fff; transform: translateY(-1px); }
.qf-btn--ghost {
  background: var(--qf-surface); color: var(--qf-text);
  border-color: var(--qf-border);
}
.qf-btn--ghost:hover { border-color: var(--qf-primary); color: var(--qf-primary); transform: translateY(-1px); }
.qf-btn--danger { background: var(--qf-danger); color: #fff; }
.qf-btn--danger:hover { color: #fff; transform: translateY(-1px); }
.qf-btn[disabled], .qf-btn.disabled { opacity: .55; cursor: not-allowed; pointer-events: none; }


.qf-field-error {
  display: block; margin-top: 5px;
  font-size: 12.5px; font-weight: 600; color: var(--qf-danger);
}
.qf-field-error:empty { display: none; }
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] {
  border-color: var(--qf-danger) !important;
  box-shadow: var(--qf-focus-ring);
}


:focus-visible {
  outline: 2px solid var(--qf-primary);
  outline-offset: 2px;
}


@media (max-width: 767px) {
  .btn, .btn-sm, .btn-lg, .qf-btn, .qf-btn--lg { min-height: 44px; }
  .icon-btn, .social-btn, .qf-icon-button { min-width: 44px; min-height: 44px; }
  .lang-switch { min-height: 44px; }
  .nav-links a { min-height: 44px; display: flex; align-items: center; }
  .footer-links a { min-height: 44px; display: flex; align-items: center; }
}