/* ============================================================
   main.css — Design tokens, reset, typography, utilities
   dusuncelerde.com — Vanilla CSS, no framework
   ============================================================ */

/* ── 1. DESIGN TOKENS ──────────────────────────────────── */
:root {
  /* Brand — canlı yeşil paleti */
  --green-50:   #e8f5e9;
  --green-100:  #c8e6c9;
  --green-200:  #a5d6a7;
  --green-300:  #66bb6a;
  --green-500:  #2e7d32;
  --green-600:  #1b5e20;
  --green-700:  #1a5c1a;
  --green-800:  #145214;
  --green-900:  #0d3b0d;

  /* Semantic — Light */
  --color-accent:         #2e7d32;
  --color-accent-hover:   #1b5e20;
  --color-accent-light:   #e8f5e9;
  --color-accent-border:  #a5d6a7;
  --color-accent-text:    #ffffff;

  --color-bg:             #ffffff;
  --color-bg-subtle:      #f9f9f9;
  --color-bg-muted:       #f2f2f2;
  --color-bg-card:        #ffffff;
  --color-card:           #ffffff;
  --color-bg-overlay:     rgba(0, 0, 0, 0.45);

  --color-border:         #e5e5e5;
  --color-border-strong:  #d0d0d0;
  --color-border-subtle:  #f0f0f0;

  --color-text-primary:   #0f1f0f;
  --color-text-secondary: #374837;
  --color-text-muted:     #6b826b;
  --color-text-disabled:  #c5d5c5;
  --color-text-inverse:   #ffffff;
  --color-text-link:      #2e7d32;
  --color-text-link-hover:#1b5e20;
  --color-text:           var(--color-text-primary);

  --color-success:        #16a34a;
  --color-success-bg:     #f0fdf4;
  --color-success-border: #bbf7d0;
  --color-error:          #dc2626;
  --color-error-bg:       #fef2f2;
  --color-error-border:   #fecaca;
  --color-warning:        #d97706;
  --color-warning-bg:     #fffbeb;
  --color-warning-border: #fde68a;
  --color-info:           #2563eb;
  --color-info-bg:        #eff6ff;
  --color-info-border:    #bfdbfe;

  /* Typography */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "Source Code Pro",
               Menlo, Consolas, monospace;

  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.8125rem;  /* 13px */
  --text-base: 0.9375rem;  /* 15px */
  --text-md:   1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */

  --leading-tight:  1.25;
  --leading-snug:   1.375;
  --leading-normal: 1.5;
  --leading-relaxed:1.65;
  --leading-loose:  2;

  --weight-normal:  400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;

  /* Spacing (4px base) */
  --sp-1:  0.25rem;   /* 4px  */
  --sp-2:  0.5rem;    /* 8px  */
  --sp-3:  0.75rem;   /* 12px */
  --sp-4:  1rem;      /* 16px */
  --sp-5:  1.25rem;   /* 20px */
  --sp-6:  1.5rem;    /* 24px */
  --sp-8:  2rem;      /* 32px */
  --sp-10: 2.5rem;    /* 40px */
  --sp-12: 3rem;      /* 48px */
  --sp-16: 4rem;      /* 64px */
  --sp-20: 5rem;      /* 80px */
  --sp-24: 6rem;      /* 96px */

  /* Border radius */
  --radius-sm:   0.25rem;  /* 4px  */
  --radius-md:   0.5rem;   /* 8px  */
  --radius-lg:   0.75rem;  /* 12px */
  --radius-xl:   1rem;     /* 16px */
  --radius-2xl:  1.5rem;   /* 24px */
  --radius-full: 9999px;

  /* Shadow */
  --shadow-xs:  0 1px 2px 0 rgb(0 0 0 / .05);
  --shadow-sm:  0 1px 3px 0 rgb(0 0 0 / .08),
                0 1px 2px -1px rgb(0 0 0 / .06);
  --shadow-md:  0 4px 6px -1px rgb(0 0 0 / .08),
                0 2px 4px -2px rgb(0 0 0 / .06);
  --shadow-lg:  0 10px 15px -3px rgb(0 0 0 / .08),
                0 4px 6px -4px rgb(0 0 0 / .05);
  --shadow-xl:  0 20px 25px -5px rgb(0 0 0 / .08),
                0 8px 10px -6px rgb(0 0 0 / .04);

  /* Transition */
  --ease:       cubic-bezier(.4, 0, .2, 1);
  --duration:   150ms;
  --transition: var(--duration) var(--ease);
  --transition-fast: 100ms var(--ease);

  /* Z-index scale */
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;

  /* Layout */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1200px;
  --navbar-h:      60px;
  --sidebar-w:     300px;
}

/* ── 2. DARK MODE ──────────────────────────────────────── */
[data-theme="dark"],
.dark {
  --color-bg:             #0f1117;
  --color-bg-subtle:      #161b22;
  --color-bg-muted:       #1c2128;
  --color-bg-card:        #161b22;
  --color-bg-overlay:     rgba(0, 0, 0, 0.65);

  --color-border:         #30363d;
  --color-border-strong:  #484f58;
  --color-border-subtle:  #21262d;

  --color-text-primary:   #e6edf3;
  --color-text-secondary: #8b949e;
  --color-text-muted:     #6e7681;
  --color-text-disabled:  #484f58;
  --color-text:           var(--color-text-primary);

  --color-accent:         #4caf50;
  --color-accent-hover:   #66bb6a;
  --color-accent-light:   rgba(76, 175, 80, .12);
  --color-accent-border:  rgba(76, 175, 80, .35);

  --color-success-bg:     rgba(22, 163, 74, .12);
  --color-success-border: rgba(22, 163, 74, .35);
  --color-error-bg:       rgba(220, 38, 38, .12);
  --color-error-border:   rgba(220, 38, 38, .35);
  --color-warning-bg:     rgba(217, 119, 6, .12);
  --color-warning-border: rgba(217, 119, 6, .35);
  --color-info-bg:        rgba(37, 99, 235, .12);
  --color-info-border:    rgba(37, 99, 235, .35);

  --shadow-xs:  0 1px 2px 0 rgb(0 0 0 / .3);
  --shadow-sm:  0 1px 3px 0 rgb(0 0 0 / .35), 0 1px 2px -1px rgb(0 0 0 / .3);
  --shadow-md:  0 4px 6px -1px rgb(0 0 0 / .35), 0 2px 4px -2px rgb(0 0 0 / .3);
  --shadow-lg:  0 10px 15px -3px rgb(0 0 0 / .4), 0 4px 6px -4px rgb(0 0 0 / .3);
}

/* ── 3. CSS RESET ──────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing:  border-box;
  margin:      0;
  padding:     0;
  min-width:   0; /* prevent flex overflow */
}

html {
  font-size:               16px;
  scroll-behavior:         smooth;
  text-rendering:          optimizeLegibility;
  -webkit-text-size-adjust:100%;
  -moz-tab-size:           4;
  tab-size:                4;
  hanging-punctuation:     first last;
  overflow-x:              hidden;
}

body {
  font-family:      var(--font-sans);
  font-size:        var(--text-base);
  font-weight:      var(--weight-normal);
  line-height:      var(--leading-relaxed);
  color:            var(--color-text-primary);
  background-color: var(--color-bg);
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x:       hidden;
  max-width:        100vw;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:   0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:  0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* Focus visible — keyboard only */
:focus { outline: none; }
:focus-visible {
  outline:        2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius:  var(--radius-sm);
}

/* Lists */
ul, ol { list-style: none; }

/* Media */
img, svg, video {
  display:   block;
  max-width: 100%;
}
img { height: auto; }

/* Marka / UI ikonları — global img kuralını ez */
img.navbar-brand-img {
  width:       32px;
  height:      32px;
  max-width:   32px;
  min-width:   32px;
  object-fit:  contain;
  flex-shrink: 0;
}

/* Interactive */
button, [role="button"] {
  font-family: inherit;
  font-size:   inherit;
  cursor:      pointer;
  border:      none;
  background:  none;
  color:       inherit;
}
button:disabled, [aria-disabled="true"] {
  cursor:  not-allowed;
  opacity: 0.55;
}

input, textarea, select {
  font-family: inherit;
  font-size:   inherit;
  color:       inherit;
}

/* Links */
a {
  color:           var(--color-text-link);
  text-decoration: none;
  transition:      color var(--transition);
}
a:hover { color: var(--color-text-link-hover); }

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-weight:  var(--weight-bold);
  line-height:  var(--leading-snug);
  color:        var(--color-text-primary);
  letter-spacing: -0.01em;
}
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl);  }
h4 { font-size: var(--text-lg);  }
h5 { font-size: var(--text-base);}
h6 { font-size: var(--text-sm);  }

p { margin-bottom: var(--sp-4); }
p:last-child { margin-bottom: 0; }

hr {
  border:     none;
  border-top: 1px solid var(--color-border);
  margin:     var(--sp-6) 0;
}

/* Tables */
table { border-collapse: collapse; width: 100%; }
th, td {
  padding:      var(--sp-3) var(--sp-4);
  text-align:   left;
  border-bottom:1px solid var(--color-border);
}
th {
  font-weight: var(--weight-semibold);
  font-size:   var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color:       var(--color-text-muted);
}

/* ── 4. SKIP LINK ─────────────────────────────────────── */
.skip-to-content {
  position:      absolute;
  top:          -100%;
  left:          var(--sp-4);
  z-index:       var(--z-toast);
  padding:       var(--sp-2) var(--sp-4);
  background:    var(--color-accent);
  color:         var(--color-accent-text);
  border-radius: var(--radius-md);
  font-weight:   var(--weight-semibold);
  font-size:     var(--text-sm);
  text-decoration: none;
  transition:    top var(--transition);
}
.skip-to-content:focus-visible {
  top:     var(--sp-3);
  outline: 3px solid white;
}

/* ── 5. TYPOGRAPHY ─────────────────────────────────────── */
.prose {
  max-width:   68ch;
  color:       var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}
.prose h2, .prose h3, .prose h4 {
  margin-top:    var(--sp-8);
  margin-bottom: var(--sp-3);
  color:         var(--color-text-primary);
}
.prose p  { margin-bottom: var(--sp-4); }
.prose ul { list-style: disc;   padding-left: var(--sp-6); }
.prose ol { list-style: decimal;padding-left: var(--sp-6); }
.prose li { margin-bottom: var(--sp-2); }
.prose blockquote {
  border-left: 3px solid var(--color-accent);
  padding-left: var(--sp-5);
  color:        var(--color-text-muted);
  font-style:   italic;
  margin:       var(--sp-6) 0;
}

/* Truncate helpers */
.truncate {
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}
.line-clamp-3 {
  display:            -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow:           hidden;
}
.line-clamp-4 {
  display:            -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow:           hidden;
}

/* ── 6. BUTTONS ─────────────────────────────────────────── */
.btn {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  gap:              var(--sp-2);
  padding:          0.4375rem var(--sp-5);
  border-radius:    var(--radius-full);
  font-size:        var(--text-sm);
  font-weight:      var(--weight-semibold);
  line-height:      1.25;
  white-space:      nowrap;
  border:           1.5px solid transparent;
  cursor:           pointer;
  text-decoration:  none;
  transition:       background-color var(--transition),
                    color var(--transition),
                    border-color var(--transition),
                    box-shadow var(--transition),
                    transform 80ms var(--ease);
  user-select:      none;
  -webkit-tap-highlight-color: transparent;
}
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn:disabled { pointer-events: none; }

/* Variants */
.btn-primary {
  background:   var(--color-accent);
  color:        var(--color-accent-text);
  border-color: var(--color-accent);
}
.btn-primary:hover {
  background:   var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  color:        var(--color-accent-text);
}

.btn-secondary {
  background:   var(--color-bg-card);
  color:        var(--color-text-primary);
  border-color: var(--color-border-strong);
}
.btn-secondary:hover {
  background:   var(--color-bg-subtle);
  border-color: var(--color-text-muted);
  color:        var(--color-text-primary);
}

.btn-ghost {
  background:   transparent;
  color:        var(--color-text-secondary);
  border-color: transparent;
}
.btn-ghost:hover {
  background:   var(--color-bg-muted);
  color:        var(--color-text-primary);
}

.btn-danger {
  background:   var(--color-error);
  color:        #fff;
  border-color: var(--color-error);
}
.btn-danger:hover { filter: brightness(1.1); }

.btn-link {
  background:  transparent;
  color:       var(--color-text-link);
  border-color:transparent;
  padding-left:0;
  padding-right:0;
  border-radius:0;
  border-bottom:1px solid currentColor;
  border-radius:0;
}
.btn-link:hover { color: var(--color-text-link-hover); }

/* Sizes */
.btn-xs  { padding: 0.2rem var(--sp-3); font-size: var(--text-xs); }
.btn-sm  { padding: 0.3rem var(--sp-4); font-size: var(--text-xs); }
.btn-lg  { padding: 0.65rem var(--sp-8); font-size: var(--text-md); }
.btn-xl  { padding: 0.875rem var(--sp-10); font-size: var(--text-lg); }
.btn-full { width: 100%; }

/* Icon button */
.btn-icon {
  padding:       var(--sp-2);
  border-radius: var(--radius-md);
  color:         var(--color-text-secondary);
}
.btn-icon:hover {
  background: var(--color-bg-muted);
  color:      var(--color-text-primary);
}

/* Loading state */
.btn[aria-busy="true"] {
  pointer-events: none;
  opacity:        0.75;
}
.btn[aria-busy="true"]::after {
  content:       '';
  display:       inline-block;
  width:         0.875em;
  height:        0.875em;
  border:        2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation:     spin .65s linear infinite;
  margin-left:   var(--sp-2);
}

/* ── 7. FORM ELEMENTS ──────────────────────────────────── */
.form-field {
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-2);
}

.form-label {
  font-size:   var(--text-sm);
  font-weight: var(--weight-semibold);
  color:       var(--color-text-primary);
  line-height: 1.3;
}
.form-label-hint {
  font-size:   var(--text-xs);
  font-weight: var(--weight-normal);
  color:       var(--color-text-muted);
}

.form-control {
  width:         100%;
  padding:       0.5625rem var(--sp-4);
  background:    var(--color-bg);
  border:        1.5px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  font-size:     var(--text-base);
  font-family:   var(--font-sans);
  color:         var(--color-text-primary);
  transition:    border-color var(--transition),
                 box-shadow var(--transition);
  appearance:    none;
}
.form-control::placeholder { color: var(--color-text-muted); }
.form-control:hover:not(:disabled):not([readonly]) {
  border-color: var(--color-text-muted);
}
.form-control:focus {
  outline:      none;
  border-color: var(--color-accent);
  box-shadow:   0 0 0 3px var(--color-accent-light);
}
.form-control[aria-invalid="true"],
.form-control.is-invalid {
  border-color: var(--color-error);
}
.form-control[aria-invalid="true"]:focus,
.form-control.is-invalid:focus {
  box-shadow: 0 0 0 3px var(--color-error-bg);
}
.form-control:disabled,
.form-control[readonly] {
  background: var(--color-bg-muted);
  color:      var(--color-text-muted);
}

textarea.form-control {
  resize:     vertical;
  min-height: 100px;
  line-height:var(--leading-relaxed);
}

select.form-control {
  padding-right: var(--sp-10);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236b7280' stroke-width='1.5' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right var(--sp-4) center;
}

.form-message {
  display:     flex;
  align-items: center;
  gap:         var(--sp-2);
  font-size:   var(--text-xs);
  line-height: 1.4;
  color:       var(--color-text-muted);
}
.form-message--error  { color: var(--color-error); }
.form-message--success{ color: var(--color-success); }

/* Checkbox & Radio */
.form-check {
  display:     flex;
  align-items: flex-start;
  gap:         var(--sp-3);
  cursor:      pointer;
}
.form-check-input {
  flex-shrink:   0;
  width:         1rem;
  height:        1rem;
  margin-top:    0.125rem;
  accent-color:  var(--color-accent);
  cursor:        pointer;
}
.form-check-label {
  font-size:   var(--text-sm);
  color:       var(--color-text-secondary);
  line-height: 1.4;
  cursor:      pointer;
}

/* ── 8. BADGES / PILLS ────────────────────────────────── */
.badge {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--sp-1);
  padding:         0.1875rem var(--sp-3);
  border-radius:   var(--radius-full);
  font-size:       var(--text-xs);
  font-weight:     var(--weight-semibold);
  line-height:     1.4;
  white-space:     nowrap;
  text-decoration: none;
  border:          1.5px solid transparent;
  transition:      background var(--transition), color var(--transition);
}

/* Category pills — match screenshot's green pills */
.badge-category {
  background:   var(--color-accent-light);
  color:        var(--color-accent);
  border-color: var(--color-accent-border);
}
.badge-category:hover,
a.badge-category:hover {
  background:  var(--color-accent);
  color:       var(--color-accent-text);
  border-color:var(--color-accent);
  text-decoration: none;
}

.badge-gray   { background: var(--color-bg-muted); color: var(--color-text-secondary); border-color: var(--color-border); }
.badge-success{ background: var(--color-success-bg); color: var(--color-success); border-color: var(--color-success-border); }
.badge-error  { background: var(--color-error-bg);   color: var(--color-error);   border-color: var(--color-error-border); }

/* ── 9. AVATARS ─────────────────────────────────────────── */
.avatar {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  border-radius:    var(--radius-full);
  overflow:         hidden;
  flex-shrink:      0;
  background-color: var(--color-accent-light);
  color:            var(--color-accent);
  font-weight:      var(--weight-bold);
  text-transform:   uppercase;
  line-height:      1;
  border:           1.5px solid var(--color-border);
  user-select:      none;
}
.avatar img {
  width:      100%;
  height:     100%;
  object-fit: cover;
}
.avatar-xs { width: 24px;  height: 24px;  font-size: 0.625rem; }
.avatar-sm { width: 32px;  height: 32px;  font-size: var(--text-xs); }
.avatar-md { width: 40px;  height: 40px;  font-size: var(--text-sm); }
.avatar-lg { width: 64px;  height: 64px;  font-size: var(--text-xl); }
.avatar-xl { width: 96px;  height: 96px;  font-size: var(--text-2xl); }
.avatar-2xl{ width: 128px; height: 128px; font-size: var(--text-3xl); }

/* ── 10. SPINNERS ──────────────────────────────────────── */
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .4; }
}
@keyframes shimmer {
  0%   { background-position:  200% 0; }
  100% { background-position: -200% 0; }
}
@keyframes fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slide-down {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.spinner {
  display:      inline-block;
  width:        1.25em;
  height:       1.25em;
  border:       2px solid var(--color-border-strong);
  border-top-color: var(--color-accent);
  border-radius:50%;
  animation:    spin .7s linear infinite;
  flex-shrink:  0;
}
.spinner-sm { width: .875em; height: .875em; }
.spinner-lg { width: 2em;    height: 2em; border-width: 3px; }

/* Skeleton */
.skeleton {
  background:      linear-gradient(
    90deg,
    var(--color-bg-muted) 25%,
    var(--color-border)   50%,
    var(--color-bg-muted) 75%
  );
  background-size: 200% 100%;
  animation:       shimmer 1.6s ease-in-out infinite;
  border-radius:   var(--radius-md);
}

/* ── 11. UTILITY CLASSES ──────────────────────────────── */
/* Display */
.d-none   { display: none !important; }
.d-block  { display: block; }
.d-flex   { display: flex; }
.d-grid   { display: grid; }
.d-inline { display: inline; }
.d-inline-flex { display: inline-flex; }

/* Flex helpers */
.flex-1    { flex: 1; }
.flex-none { flex-shrink: 0; }
.flex-col  { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center   { align-items: center; }
.items-start    { align-items: flex-start; }
.justify-between{ justify-content: space-between; }
.justify-center { justify-content: center; }
.justify-end    { justify-content: flex-end; }
.gap-1  { gap: var(--sp-1); }
.gap-2  { gap: var(--sp-2); }
.gap-3  { gap: var(--sp-3); }
.gap-4  { gap: var(--sp-4); }
.gap-6  { gap: var(--sp-6); }
.gap-8  { gap: var(--sp-8); }

/* Text */
.text-xs      { font-size: var(--text-xs); }
.text-sm      { font-size: var(--text-sm); }
.text-base    { font-size: var(--text-base); }
.text-lg      { font-size: var(--text-lg); }
.text-xl      { font-size: var(--text-xl); }
.text-center  { text-align: center; }
.text-right   { text-align: right; }
.text-muted   { color: var(--color-text-muted); }
.text-secondary{color: var(--color-text-secondary); }
.text-primary { color: var(--color-text-primary); }
.text-accent  { color: var(--color-accent); }
.text-error   { color: var(--color-error); }
.font-medium  { font-weight: var(--weight-medium); }
.font-semibold{ font-weight: var(--weight-semibold); }
.font-bold    { font-weight: var(--weight-bold); }

/* Spacing */
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--sp-2); }
.mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-6 { margin-bottom: var(--sp-6); }
.mb-8 { margin-bottom: var(--sp-8); }
.p-4  { padding: var(--sp-4); }
.p-6  { padding: var(--sp-6); }

/* Visual */
.rounded    { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full{ border-radius: var(--radius-full); }
.w-full     { width: 100%; }
.min-w-0    { min-width: 0; }
.overflow-hidden { overflow: hidden; }

/* Accessibility */
.sr-only {
  position:   absolute;
  width:      1px;
  height:     1px;
  padding:    0;
  margin:     -1px;
  overflow:   hidden;
  clip:       rect(0,0,0,0);
  white-space:nowrap;
  border:     0;
}

/* Divider */
.divider {
  display:    flex;
  align-items:center;
  gap:        var(--sp-4);
  color:      var(--color-text-muted);
  font-size:  var(--text-xs);
}
.divider::before,
.divider::after {
  content:    '';
  flex:       1;
  height:     1px;
  background: var(--color-border);
}

/* Empty state */
.empty-state {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  justify-content:center;
  text-align:     center;
  padding:        var(--sp-16) var(--sp-6);
  gap:            var(--sp-4);
  color:          var(--color-text-muted);
}
.empty-state__icon  { font-size: 3rem; line-height: 1; }
.empty-state__title { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--color-text-secondary); }
.empty-state__desc  { font-size: var(--text-sm); max-width: 40ch; }

/* Section heading */
.section-title {
  font-size:     var(--text-lg);
  font-weight:   var(--weight-bold);
  color:         var(--color-text-primary);
  display:       flex;
  align-items:   center;
  gap:           var(--sp-3);
  padding-bottom:var(--sp-3);
  border-bottom: 2px solid var(--color-border);
  margin-bottom: var(--sp-5);
}
.section-title-sm {
  font-size:   var(--text-sm);
  font-weight: var(--weight-semibold);
  color:       var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--sp-4);
}