/* ============================================================
   DynamicLayer Design System — CSS Tokens & Components
   ============================================================ */

/* --- CSS Custom Properties (Design Tokens) --- */
:root {
  /* Font Family */
  --dl-font: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Spacing Tokens */
  --dl-spacing-0: 0px;
  --dl-spacing-2: 2px;
  --dl-spacing-4: 4px;
  --dl-spacing-8: 8px;
  --dl-spacing-12: 12px;
  --dl-spacing-16: 16px;
  --dl-spacing-20: 20px;
  --dl-spacing-24: 24px;
  --dl-spacing-28: 28px;
  --dl-spacing-32: 32px;
  --dl-spacing-36: 36px;
  --dl-spacing-40: 40px;
  --dl-spacing-44: 44px;
  --dl-spacing-48: 48px;
  --dl-spacing-56: 56px;
  --dl-spacing-64: 64px;
  --dl-spacing-80: 80px;
  --dl-spacing-96: 96px;

  /* Radius Tokens */
  --dl-radius-none: 0px;
  --dl-radius-sm: 2px;
  --dl-radius: 4px;
  --dl-radius-md: 8px;
  --dl-radius-lg: 12px;
  --dl-radius-xl: 16px;
  --dl-radius-2xl: 20px;
  --dl-radius-3xl: 24px;
  --dl-radius-4xl: 28px;
  --dl-radius-5xl: 32px;
  --dl-radius-full: 9999px;

  /* Border Width Tokens */
  --dl-border-0: 0px;
  --dl-border-0-5: 0.5px;
  --dl-border-1: 1px;
  --dl-border-1-5: 1.5px;
  --dl-border-2: 2px;
  --dl-border-3: 3px;
  --dl-border-4: 4px;

  /* Typography — Font Sizes */
  --dl-text-xs: 12px;
  --dl-text-sm: 14px;
  --dl-text-base: 16px;
  --dl-text-lg: 18px;
  --dl-text-xl: 20px;
  --dl-text-2xl: 24px;
  --dl-text-3xl: 28px;
  --dl-text-4xl: 32px;
  --dl-text-5xl: 40px;

  /* Typography — Line Heights */
  --dl-leading-xs: 16px;
  --dl-leading-sm: 20px;
  --dl-leading-base: 24px;
  --dl-leading-lg: 28px;
  --dl-leading-xl: 28px;
  --dl-leading-2xl: 32px;
  --dl-leading-3xl: 36px;
  --dl-leading-4xl: 40px;
  --dl-leading-5xl: 48px;

  /* Typography — Font Weights */
  --dl-weight-light: 400;
  --dl-weight-regular: 500;
  --dl-weight-medium: 600;
  --dl-weight-semibold: 700;
  --dl-weight-bold: 800;

  /* Grey / Neutral */
  --dl-white: #FFFFFF;
  --dl-grey-50: #F6F6F6;
  --dl-grey-100: #EEEEEE;
  --dl-grey-200: #E2E2E2;
  --dl-grey-300: #CBCBCB;
  --dl-grey-400: #AFAFAF;
  --dl-grey-500: #757575;
  --dl-grey-600: #545454;
  --dl-grey-700: #333333;
  --dl-grey-800: #1F1F1F;
  --dl-grey-900: #141414;
  --dl-black: #000000;

  /* Platinum */
  --dl-platinum-50: #F8FAFC;
  --dl-platinum-100: #F1F5F9;
  --dl-platinum-200: #E2E8F0;
  --dl-platinum-300: #CBD5E1;
  --dl-platinum-400: #94A3B8;
  --dl-platinum-500: #64748B;
  --dl-platinum-600: #475569;
  --dl-platinum-700: #334155;
  --dl-platinum-800: #1E293B;
  --dl-platinum-900: #0F172A;
  --dl-platinum-950: #020617;

  /* Pink */
  --dl-pink-50: #FDF2F8;
  --dl-pink-100: #FCE7F3;
  --dl-pink-200: #FBCFE8;
  --dl-pink-300: #F9A8D4;
  --dl-pink-400: #F472B6;
  --dl-pink-500: #EC4899;
  --dl-pink-600: #DB2777;
  --dl-pink-700: #BE185D;
  --dl-pink-800: #9D174D;
  --dl-pink-900: #831843;
  --dl-pink-950: #500724;

  /* Brown */
  --dl-brown-50: #FBF6EF;
  --dl-brown-100: #F3E5D2;
  --dl-brown-200: #E5C9A2;
  --dl-brown-300: #D8A971;
  --dl-brown-400: #CF8E50;
  --dl-brown-500: #C5733B;
  --dl-brown-600: #B95E35;
  --dl-brown-700: #91412C;
  --dl-brown-800: #773529;
  --dl-brown-900: #622D25;
  --dl-brown-950: #371511;

  /* Sky */
  --dl-sky-50: #F0F9FF;
  --dl-sky-100: #E0F2FE;
  --dl-sky-200: #BAE6FD;
  --dl-sky-300: #7DD3FC;
  --dl-sky-400: #38BDF8;
  --dl-sky-500: #3B82F6;
  --dl-sky-600: #2563EB;
  --dl-sky-700: #1D4ED8;
  --dl-sky-800: #1E40AF;
  --dl-sky-900: #1E3A8A;
  --dl-sky-950: #172554;

  /* Yellow */
  --dl-yellow-50: #FFFFE7;
  --dl-yellow-100: #FEFFC1;
  --dl-yellow-200: #FFFD86;
  --dl-yellow-300: #FFF441;
  --dl-yellow-400: #FFE50D;
  --dl-yellow-500: #FFD600;
  --dl-yellow-600: #D19D00;
  --dl-yellow-700: #A67102;
  --dl-yellow-800: #89570A;
  --dl-yellow-900: #74470F;
  --dl-yellow-950: #442504;

  /* Rose */
  --dl-rose-50: #FFF1F2;
  --dl-rose-100: #FFE4E6;
  --dl-rose-200: #FECDD3;
  --dl-rose-300: #FDA4AF;
  --dl-rose-400: #FB7185;
  --dl-rose-500: #F43F5E;
  --dl-rose-600: #E11D48;
  --dl-rose-700: #BE123C;
  --dl-rose-800: #9F1239;
  --dl-rose-900: #881337;
  --dl-rose-950: #4C0519;

  /* Violet */
  --dl-violet-50: #F5F2FF;
  --dl-violet-100: #ECE8FF;
  --dl-violet-200: #DAD4FF;
  --dl-violet-300: #C1B1FF;
  --dl-violet-400: #A285FF;
  --dl-violet-500: #7E49FF;
  --dl-violet-600: #7630F7;
  --dl-violet-700: #681EE3;
  --dl-violet-800: #5718BF;
  --dl-violet-900: #48169C;
  --dl-violet-950: #2C0B6A;

  /* Blue */
  --dl-blue-50: #EDFAFF;
  --dl-blue-100: #D6F1FF;
  --dl-blue-200: #B5E9FF;
  --dl-blue-300: #83DCFF;
  --dl-blue-400: #48C7FF;
  --dl-blue-500: #1EA7FF;
  --dl-blue-600: #0689FF;
  --dl-blue-700: #0075FF;
  --dl-blue-800: #0859C5;
  --dl-blue-900: #0D4E9B;
  --dl-blue-950: #0E305D;

  /* Fuchsia */
  --dl-fuchsia-50: #FDF4FF;
  --dl-fuchsia-100: #FAE8FF;
  --dl-fuchsia-200: #F5D0FE;
  --dl-fuchsia-300: #F0ABFC;
  --dl-fuchsia-400: #E879F9;
  --dl-fuchsia-500: #D946EF;
  --dl-fuchsia-600: #C026D3;
  --dl-fuchsia-700: #A21CAF;
  --dl-fuchsia-800: #86198F;
  --dl-fuchsia-900: #701A75;
  --dl-fuchsia-950: #4A044E;

  /* Teal */
  --dl-teal-50: #F0FDFA;
  --dl-teal-100: #CCFBF1;
  --dl-teal-200: #99F6E4;
  --dl-teal-300: #5EEAD4;
  --dl-teal-400: #2DD4BF;
  --dl-teal-500: #14B8A6;
  --dl-teal-600: #0D9488;
  --dl-teal-700: #0F766E;
  --dl-teal-800: #115E59;
  --dl-teal-900: #134E4A;
  --dl-teal-950: #042F2E;

  /* Purple */
  --dl-purple-50: #FAF5FF;
  --dl-purple-100: #F3E8FF;
  --dl-purple-200: #E9D5FF;
  --dl-purple-300: #D8B4FE;
  --dl-purple-400: #C084FC;
  --dl-purple-500: #A855F7;
  --dl-purple-600: #9333EA;
  --dl-purple-700: #7E22CE;
  --dl-purple-800: #6B21A8;
  --dl-purple-900: #581C87;
  --dl-purple-950: #3B0764;

  /* Green */
  --dl-green-50: #E8FFE4;
  --dl-green-100: #CBFFC5;
  --dl-green-200: #9AFF92;
  --dl-green-300: #5BFF53;
  --dl-green-400: #24FB20;
  --dl-green-500: #00DD00;
  --dl-green-600: #00B505;
  --dl-green-700: #028907;
  --dl-green-800: #086C0C;
  --dl-green-900: #0C5B11;
  --dl-green-950: #003305;

  /* Magenta */
  --dl-magenta-50: #FEF1F9;
  --dl-magenta-100: #FEE5F5;
  --dl-magenta-200: #FFCAED;
  --dl-magenta-300: #FF9FDB;
  --dl-magenta-400: #FF63C1;
  --dl-magenta-500: #FF27A0;
  --dl-magenta-600: #F01284;
  --dl-magenta-700: #D10568;
  --dl-magenta-800: #AD0755;
  --dl-magenta-900: #8F0C4A;
  --dl-magenta-950: #580028;

  /* Orange */
  --dl-orange-50: #FFFAEC;
  --dl-orange-100: #FFF3D3;
  --dl-orange-200: #FFE3A5;
  --dl-orange-300: #FFCE6D;
  --dl-orange-400: #FFAD32;
  --dl-orange-500: #FF920A;
  --dl-orange-600: #FF7A00;
  --dl-orange-700: #CC5802;
  --dl-orange-800: #A1440B;
  --dl-orange-900: #823A0C;
  --dl-orange-950: #461B04;

  /* Cyan */
  --dl-cyan-50: #ECFEFF;
  --dl-cyan-100: #CFFAFE;
  --dl-cyan-200: #A5F3FC;
  --dl-cyan-300: #67E8F9;
  --dl-cyan-400: #22D3EE;
  --dl-cyan-500: #06B6D4;
  --dl-cyan-600: #0891B2;
  --dl-cyan-700: #0E7490;
  --dl-cyan-800: #155E75;
  --dl-cyan-900: #164E63;
  --dl-cyan-950: #083344;

  /* Emerald */
  --dl-emerald-50: #ECFDF5;
  --dl-emerald-100: #D1FAE5;
  --dl-emerald-200: #A7F3D0;
  --dl-emerald-300: #6EE7B7;
  --dl-emerald-400: #34D399;
  --dl-emerald-500: #10B981;
  --dl-emerald-600: #059669;
  --dl-emerald-700: #047857;
  --dl-emerald-800: #065F46;
  --dl-emerald-900: #064E3B;
  --dl-emerald-950: #022C22;

  /* Lime */
  --dl-lime-50: #F7FEE7;
  --dl-lime-100: #ECFCCB;
  --dl-lime-200: #D9F99D;
  --dl-lime-300: #BEF264;
  --dl-lime-400: #A3E635;
  --dl-lime-500: #84CC16;
  --dl-lime-600: #65A30D;
  --dl-lime-700: #4D7C0F;
  --dl-lime-800: #3F6212;
  --dl-lime-900: #365314;
  --dl-lime-950: #1A2E05;

  /* Red */
  --dl-red-50: #FFF2F1;
  --dl-red-100: #FFE1DF;
  --dl-red-200: #FFC8C5;
  --dl-red-300: #FFA29D;
  --dl-red-400: #FF6C64;
  --dl-red-500: #FF2C20;
  --dl-red-600: #ED2115;
  --dl-red-700: #C8170D;
  --dl-red-800: #A5170F;
  --dl-red-900: #881A14;
  --dl-red-950: #4B0804;

  /* Indigo */
  --dl-indigo-50: #EEF2FF;
  --dl-indigo-100: #E0E7FF;
  --dl-indigo-200: #C7D2FE;
  --dl-indigo-300: #A5B4FC;
  --dl-indigo-400: #818CF8;
  --dl-indigo-500: #6366F1;
  --dl-indigo-600: #4F46E5;
  --dl-indigo-700: #4338CA;
  --dl-indigo-800: #3730A3;
  --dl-indigo-900: #312E81;
  --dl-indigo-950: #1E1B4B;
}

/* ============================================================
   Base & Layout
   ============================================================ */

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

body {
  font-family: var(--dl-font);
  background: var(--dl-white);
  color: var(--dl-black);
  letter-spacing: 0.5px;
  -webkit-font-smoothing: antialiased;
}

.layout {
  display: flex;
  min-height: 100vh;
}

/* --- Sidebar --- */
.sidebar {
  width: 280px;
  border-right: 1px solid var(--dl-grey-200);
  padding: var(--dl-spacing-24);
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  overflow-y: auto;
  background: var(--dl-white);
  z-index: 100;
}

.sidebar h2 {
  font-size: var(--dl-text-xl);
  font-weight: var(--dl-weight-bold);
  line-height: var(--dl-leading-xl);
  margin-bottom: var(--dl-spacing-24);
}

.sidebar-section {
  margin-bottom: var(--dl-spacing-24);
}

.sidebar-section h3 {
  font-size: var(--dl-text-xs);
  font-weight: var(--dl-weight-semibold);
  line-height: var(--dl-leading-xs);
  color: var(--dl-grey-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--dl-spacing-8);
}

.sidebar-section a {
  display: block;
  padding: var(--dl-spacing-8) var(--dl-spacing-12);
  font-size: var(--dl-text-sm);
  font-weight: var(--dl-weight-medium);
  line-height: var(--dl-leading-sm);
  color: var(--dl-grey-700);
  text-decoration: none;
  border-radius: var(--dl-radius-md);
  transition: background 0.15s;
}

.sidebar-section a:hover {
  background: var(--dl-grey-100);
}

.sidebar-section a.active {
  background: var(--dl-grey-900);
  color: var(--dl-white);
}

/* --- Main Content --- */
/* --- Navbar --- */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  max-width: 800px;
  margin: 0 auto;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 100;
}

.section-wrapper {
  padding-top: 200px;
}

.container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 64px;
}

.max-width-800 {
  max-width: 800px;
  margin: 0 auto;
}

.max-width-640 {
  max-width: 640px;
  margin: 0 auto;
}

.section {
  margin-bottom: var(--dl-spacing-80);
}

.section-title {
  font-size: var(--dl-text-4xl);
  font-weight: var(--dl-weight-bold);
  line-height: var(--dl-leading-4xl);
  margin-bottom: var(--dl-spacing-8);
}

.section-desc {
  font-size: var(--dl-text-base);
  font-weight: var(--dl-weight-regular);
  line-height: var(--dl-leading-base);
  color: var(--dl-grey-500);
  margin-bottom: var(--dl-spacing-32);
}

.subsection {
  margin-bottom: var(--dl-spacing-48);
}

.subsection-title {
  font-size: var(--dl-text-xl);
  font-weight: var(--dl-weight-bold);
  line-height: var(--dl-leading-xl);
  margin-bottom: var(--dl-spacing-16);
}

.component-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dl-spacing-16);
  align-items: center;
  margin-bottom: var(--dl-spacing-16);
}

.component-col {
  display: flex;
  flex-direction: column;
  gap: var(--dl-spacing-16);
  margin-bottom: var(--dl-spacing-16);
}

.component-label {
  font-size: var(--dl-text-xs);
  font-weight: var(--dl-weight-semibold);
  color: var(--dl-grey-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--dl-spacing-8);
}

.component-box {
  background: var(--dl-grey-50);
  border-radius: var(--dl-radius-lg);
  padding: var(--dl-spacing-32);
  margin-bottom: var(--dl-spacing-16);
}

.component-box--dark {
  background: var(--dl-grey-900);
}

/* ============================================================
   Token Displays
   ============================================================ */

/* Color Swatches */
.color-scale {
  margin-bottom: var(--dl-spacing-24);
}

.color-scale-name {
  font-size: var(--dl-text-sm);
  font-weight: var(--dl-weight-semibold);
  margin-bottom: var(--dl-spacing-8);
  text-transform: capitalize;
}

.color-swatches {
  display: flex;
  gap: var(--dl-spacing-4);
}

.color-swatch {
  width: 48px;
  height: 48px;
  border-radius: var(--dl-radius-md);
  border: 1px solid var(--dl-grey-200);
  position: relative;
  cursor: default;
}

.color-swatch span {
  display: none;
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  color: var(--dl-grey-500);
  white-space: nowrap;
}

.color-swatch:hover span {
  display: block;
}

/* Spacing Display */
.spacing-item {
  display: flex;
  align-items: center;
  gap: var(--dl-spacing-16);
  margin-bottom: var(--dl-spacing-8);
}

.spacing-bar {
  height: 24px;
  background: var(--dl-grey-900);
  border-radius: var(--dl-radius);
}

.spacing-label {
  font-size: var(--dl-text-sm);
  font-weight: var(--dl-weight-medium);
  color: var(--dl-grey-700);
  min-width: 80px;
}

.spacing-value {
  font-size: var(--dl-text-sm);
  color: var(--dl-grey-500);
  min-width: 40px;
}

/* Radius Display */
.radius-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--dl-spacing-8);
}

.radius-box {
  width: 64px;
  height: 64px;
  background: var(--dl-grey-900);
}

.radius-name {
  font-size: var(--dl-text-xs);
  font-weight: var(--dl-weight-medium);
  color: var(--dl-grey-500);
  text-align: center;
}

/* Typography Display */
.type-sample {
  margin-bottom: var(--dl-spacing-16);
  display: flex;
  align-items: baseline;
  gap: var(--dl-spacing-24);
}

.type-meta {
  font-size: var(--dl-text-xs);
  color: var(--dl-grey-500);
  min-width: 200px;
  flex-shrink: 0;
}

/* ============================================================
   Components
   ============================================================ */

/* --- DlButton --- */
.dl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  cursor: pointer;
  font-family: var(--dl-font);
  font-size: var(--dl-text-base);
  font-weight: var(--dl-weight-semibold);
  line-height: var(--dl-leading-base);
  border-radius: var(--dl-radius-full);
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
  text-decoration: none;
}

.dl-btn svg { width: 24px; height: 24px; flex-shrink: 0; }

/* Sizes */
.dl-btn--lg { height: 56px; padding: 16px 24px; }
.dl-btn--md { height: 48px; padding: 12px 16px; }
.dl-btn--sm { height: 40px; padding: 8px 16px; }
.dl-btn--xs { height: 32px; padding: 4px 12px; gap: 4px; }

/* Types */
.dl-btn--primary {
  background: var(--dl-black);
  color: var(--dl-white);
}
.dl-btn--primary:hover { background: var(--dl-grey-700); }
.dl-btn--primary:disabled { background: var(--dl-grey-100); color: var(--dl-grey-600); }
.dl-btn--primary svg { fill: var(--dl-white); }

.dl-btn--secondary {
  background: var(--dl-grey-100);
  color: var(--dl-black);
}
.dl-btn--secondary:hover { background: var(--dl-grey-200); }
.dl-btn--secondary:disabled { background: var(--dl-grey-100); color: var(--dl-grey-600); }

.dl-btn--tertiary {
  background: var(--dl-white);
  color: var(--dl-black);
  border: 1px solid var(--dl-grey-200);
}
.dl-btn--tertiary:hover { background: var(--dl-grey-100); }
.dl-btn--tertiary:disabled { background: var(--dl-white); color: var(--dl-grey-600); }

.dl-btn--ghost {
  background: transparent;
  color: var(--dl-black);
}
.dl-btn--ghost:hover { background: var(--dl-grey-100); }
.dl-btn--ghost:disabled { color: var(--dl-grey-600); }

.dl-btn:disabled { cursor: not-allowed; }
.dl-btn--primary:disabled svg { fill: var(--dl-grey-600); }

/* --- DlButtonIcon --- */
.dl-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  border-radius: var(--dl-radius-full);
  transition: background 0.15s;
}

.dl-btn-icon svg { width: 24px; height: 24px; }

.dl-btn-icon--lg { width: 56px; height: 56px; padding: 16px; }
.dl-btn-icon--md { width: 48px; height: 48px; padding: 12px; }
.dl-btn-icon--sm { width: 40px; height: 40px; padding: 8px; }
.dl-btn-icon--xs { width: 32px; height: 32px; padding: 4px; }

.dl-btn-icon--primary { background: var(--dl-black); }
.dl-btn-icon--primary svg { fill: var(--dl-white); }
.dl-btn-icon--primary:hover { background: var(--dl-grey-700); }

.dl-btn-icon--secondary { background: var(--dl-grey-100); }
.dl-btn-icon--secondary svg { fill: var(--dl-black); }
.dl-btn-icon--secondary:hover { background: var(--dl-grey-200); }

.dl-btn-icon--tertiary { background: var(--dl-white); border: 1px solid var(--dl-grey-200); }
.dl-btn-icon--tertiary svg { fill: var(--dl-black); }
.dl-btn-icon--tertiary:hover { background: var(--dl-grey-100); }

.dl-btn-icon--ghost { background: transparent; }
.dl-btn-icon--ghost svg { fill: var(--dl-black); }
.dl-btn-icon--ghost:hover { background: var(--dl-grey-100); }

/* --- DlInput --- */
.dl-input {
  position: relative;
  width: 100%;
}

.dl-input__field {
  width: 100%;
  font-family: var(--dl-font);
  font-size: var(--dl-text-base);
  font-weight: var(--dl-weight-regular);
  line-height: var(--dl-leading-base);
  background: var(--dl-grey-100);
  border: 2px solid transparent;
  border-radius: var(--dl-radius-md);
  color: var(--dl-black);
  outline: none;
  transition: border-color 0.15s;
}

.dl-input__field::placeholder { color: var(--dl-grey-500); }
.dl-input__field:focus { border-color: var(--dl-black); }

.dl-input__field--lg { padding: 24px 16px 8px; }
.dl-input__field--md { padding: 20px 16px 4px; }
.dl-input__field--sm { padding: 8px 12px; }

.dl-input__label {
  position: absolute;
  left: 16px;
  top: 8px;
  font-size: var(--dl-text-xs);
  font-weight: var(--dl-weight-regular);
  color: var(--dl-grey-500);
  pointer-events: none;
}

.dl-input--error .dl-input__field { border-color: var(--dl-red-500); }
.dl-input--error .dl-input__label { color: var(--dl-red-500); }

.dl-input--success .dl-input__field { border-color: var(--dl-green-500); }
.dl-input--success .dl-input__label { color: var(--dl-green-500); }

.dl-input--disabled .dl-input__field {
  color: var(--dl-grey-300);
  cursor: not-allowed;
}
.dl-input--disabled .dl-input__label { color: var(--dl-grey-300); }

.dl-input__helper {
  font-size: var(--dl-text-sm);
  font-weight: var(--dl-weight-medium);
  color: var(--dl-red-500);
  margin-top: var(--dl-spacing-4);
}

/* --- DlTextarea --- */
.dl-textarea {
  width: 100%;
  height: 132px;
  font-family: var(--dl-font);
  font-size: var(--dl-text-base);
  font-weight: var(--dl-weight-regular);
  line-height: var(--dl-leading-base);
  background: var(--dl-grey-100);
  border: 2px solid transparent;
  border-radius: var(--dl-radius-md);
  padding: 16px;
  color: var(--dl-black);
  outline: none;
  resize: none;
  transition: border-color 0.15s;
}

.dl-textarea::placeholder { color: var(--dl-grey-500); }
.dl-textarea:focus { border-color: var(--dl-black); }

/* --- DlSearchField --- */
.dl-search {
  position: relative;
  width: 100%;
}

.dl-search__field {
  width: 100%;
  font-family: var(--dl-font);
  font-size: var(--dl-text-base);
  font-weight: var(--dl-weight-regular);
  line-height: var(--dl-leading-base);
  background: var(--dl-grey-100);
  border: 2px solid transparent;
  border-radius: var(--dl-radius-full);
  padding-left: 48px;
  padding-right: 16px;
  color: var(--dl-black);
  outline: none;
  transition: border-color 0.15s;
}

.dl-search__field::placeholder { color: var(--dl-grey-500); }
.dl-search__field:focus { border-color: var(--dl-black); }

.dl-search__field--lg { padding-top: 16px; padding-bottom: 16px; }
.dl-search__field--md { padding-top: 12px; padding-bottom: 12px; }
.dl-search__field--sm { padding-top: 8px; padding-bottom: 8px; }

.dl-search__icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
}

.dl-search__icon svg { fill: var(--dl-grey-500); }

/* --- DlCheckbox --- */
.dl-checkbox {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.dl-checkbox__box {
  width: 22px;
  height: 22px;
  border-radius: var(--dl-radius);
  border: 1px solid var(--dl-grey-200);
  background: var(--dl-white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
}

.dl-checkbox--active .dl-checkbox__box {
  background: var(--dl-black);
  border-color: var(--dl-black);
}

.dl-checkbox__check {
  display: none;
  width: 14px;
  height: 14px;
}

.dl-checkbox--active .dl-checkbox__check { display: block; }

.dl-checkbox--disabled .dl-checkbox__box {
  background: var(--dl-grey-50);
  cursor: not-allowed;
}

/* --- DlRadioButton --- */
.dl-radio {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.dl-radio__circle {
  width: 22px;
  height: 22px;
  border-radius: var(--dl-radius-full);
  border: 1px solid var(--dl-grey-200);
  background: var(--dl-white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
}

.dl-radio--active .dl-radio__circle {
  background: var(--dl-black);
  border-color: var(--dl-black);
}

.dl-radio__dot {
  width: 10px;
  height: 10px;
  border-radius: var(--dl-radius-full);
  background: var(--dl-white);
  display: none;
}

.dl-radio--active .dl-radio__dot { display: block; }

.dl-radio--disabled .dl-radio__circle {
  background: var(--dl-grey-50);
  cursor: not-allowed;
}

/* --- DlSwitch --- */
.dl-switch {
  width: 50px;
  height: 32px;
  border-radius: var(--dl-radius-full);
  background: var(--dl-grey-200);
  padding: 2px;
  cursor: pointer;
  transition: background 0.18s ease-in-out;
  position: relative;
}

.dl-switch--active { background: var(--dl-black); }

.dl-switch__thumb {
  width: 28px;
  height: 28px;
  border-radius: var(--dl-radius-full);
  background: var(--dl-white);
  transition: transform 0.18s ease-in-out;
}

.dl-switch--active .dl-switch__thumb {
  transform: translateX(18px);
}

/* --- DlChip --- */
.dl-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--dl-radius-full);
  background: var(--dl-grey-100);
  color: var(--dl-black);
  cursor: pointer;
  border: none;
  font-family: var(--dl-font);
  transition: background 0.15s, color 0.15s;
}

.dl-chip--lg { padding: 8px 16px; font-size: var(--dl-text-base); font-weight: var(--dl-weight-semibold); }
.dl-chip--md { padding: 4px 12px; font-size: var(--dl-text-sm); font-weight: var(--dl-weight-semibold); }
.dl-chip--sm { padding: 2px 8px; font-size: var(--dl-text-xs); font-weight: var(--dl-weight-semibold); }

.dl-chip--active { background: var(--dl-black); color: var(--dl-white); }
.dl-chip--disabled { color: var(--dl-grey-500); cursor: not-allowed; }

/* --- DlBadge --- */
.dl-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--dl-radius-full);
  background: var(--dl-red-500);
  color: var(--dl-white);
}

.dl-badge--sm { width: 8px; height: 8px; }
.dl-badge--md {
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: var(--dl-text-xs);
  font-weight: var(--dl-weight-semibold);
  line-height: var(--dl-leading-xs);
}

/* --- DlTag --- */
.dl-tag {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border-radius: var(--dl-radius-full);
  font-family: var(--dl-font);
}

.dl-tag--lg { padding: 2px 8px; font-size: var(--dl-text-base); font-weight: var(--dl-weight-semibold); }
.dl-tag--md { padding: 2px 8px; font-size: var(--dl-text-sm); font-weight: var(--dl-weight-semibold); }
.dl-tag--sm { padding: 2px 4px; font-size: var(--dl-text-xs); font-weight: var(--dl-weight-semibold); }

.dl-tag--default { background: var(--dl-grey-100); color: var(--dl-grey-600); }
.dl-tag--warning { background: var(--dl-yellow-300); color: var(--dl-yellow-700); }
.dl-tag--error { background: var(--dl-red-100); color: var(--dl-red-600); }
.dl-tag--success { background: var(--dl-green-100); color: var(--dl-green-700); }

.dl-tag--default.dl-tag--dark { background: var(--dl-grey-500); color: var(--dl-white); }
.dl-tag--warning.dl-tag--dark { background: var(--dl-yellow-500); color: var(--dl-black); }
.dl-tag--error.dl-tag--dark { background: var(--dl-red-500); color: var(--dl-white); }
.dl-tag--success.dl-tag--dark { background: var(--dl-green-600); color: var(--dl-white); }

.dl-tag svg { flex-shrink: 0; }
.dl-tag--lg svg { width: 24px; height: 24px; }
.dl-tag--md svg { width: 20px; height: 20px; }
.dl-tag--sm svg { width: 16px; height: 16px; }

/* --- DlCard --- */
.dl-card {
  background: var(--dl-grey-100);
  border-radius: var(--dl-radius-lg);
  cursor: pointer;
  border: 2px solid transparent;
  transition: background 0.15s, border-color 0.15s;
}

.dl-card:hover { background: var(--dl-grey-200); }
.dl-card--active { border-color: var(--dl-black); }

.dl-card--md {
  padding: 12px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

.dl-card--lg {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dl-card__icon { width: 24px; height: 24px; flex-shrink: 0; }
.dl-card__title {
  font-size: var(--dl-text-base);
  font-weight: var(--dl-weight-semibold);
  color: var(--dl-black);
}
.dl-card__desc {
  font-size: var(--dl-text-base);
  font-weight: var(--dl-weight-regular);
  color: var(--dl-grey-500);
}
.dl-card--disabled .dl-card__title,
.dl-card--disabled .dl-card__desc { color: var(--dl-grey-500); }

/* --- DlAvatar --- */
.dl-avatar {
  border-radius: var(--dl-radius-full);
  background: var(--dl-grey-100);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
}

.dl-avatar--xs { width: 32px; height: 32px; }
.dl-avatar--sm { width: 40px; height: 40px; }
.dl-avatar--md { width: 48px; height: 48px; }
.dl-avatar--lg { width: 56px; height: 56px; }
.dl-avatar--xl { width: 64px; height: 64px; }
.dl-avatar--2xl { width: 72px; height: 72px; }
.dl-avatar--3xl { width: 80px; height: 80px; }
.dl-avatar--4xl { width: 88px; height: 88px; }
.dl-avatar--5xl { width: 96px; height: 96px; }

.dl-avatar svg { fill: var(--dl-grey-500); }
.dl-avatar--xs svg { width: 16px; height: 16px; }
.dl-avatar--sm svg { width: 20px; height: 20px; }
.dl-avatar--md svg { width: 24px; height: 24px; }
.dl-avatar--lg svg { width: 24px; height: 24px; }
.dl-avatar--xl svg { width: 28px; height: 28px; }
.dl-avatar--2xl svg,
.dl-avatar--3xl svg { width: 32px; height: 32px; }
.dl-avatar--4xl svg,
.dl-avatar--5xl svg { width: 40px; height: 40px; }

.dl-avatar__initials {
  font-weight: var(--dl-weight-semibold);
  color: var(--dl-grey-500);
}

.dl-avatar__status {
  position: absolute;
  bottom: 0;
  right: 0;
  border-radius: var(--dl-radius-full);
  border: 2px solid var(--dl-white);
}

.dl-avatar__status--online { background: var(--dl-green-500); }
.dl-avatar__status--offline { background: var(--dl-grey-200); }

.dl-avatar--lg .dl-avatar__status { width: 16px; height: 16px; }
.dl-avatar--md .dl-avatar__status { width: 14px; height: 14px; }
.dl-avatar--sm .dl-avatar__status { width: 12px; height: 12px; }
.dl-avatar--xs .dl-avatar__status { width: 8px; height: 8px; }

/* --- DlAlert --- */
.dl-alert {
  display: flex;
  align-items: flex-start;
  width: 100%;
  border-radius: var(--dl-radius-lg);
  padding: 16px;
  gap: 16px;
}

.dl-alert__icon { width: 24px; height: 24px; flex-shrink: 0; }
.dl-alert__content { flex: 1; }
.dl-alert__title {
  font-size: var(--dl-text-base);
  font-weight: var(--dl-weight-semibold);
  color: var(--dl-black);
}
.dl-alert__desc {
  font-size: var(--dl-text-base);
  font-weight: var(--dl-weight-regular);
  color: var(--dl-black);
  margin-top: 4px;
}
.dl-alert__close {
  width: 24px;
  height: 24px;
  cursor: pointer;
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0;
}
.dl-alert__close svg { fill: var(--dl-black); }

.dl-alert--info { background: var(--dl-violet-50); }
.dl-alert--info .dl-alert__icon svg { fill: var(--dl-violet-500); }

.dl-alert--success { background: var(--dl-green-50); }
.dl-alert--success .dl-alert__icon svg { fill: var(--dl-green-600); }

.dl-alert--warning { background: var(--dl-yellow-50); }
.dl-alert--warning .dl-alert__icon svg { fill: var(--dl-yellow-500); }

.dl-alert--error { background: var(--dl-red-50); }
.dl-alert--error .dl-alert__icon svg { fill: var(--dl-red-500); }

/* --- DlSnackbar --- */
.dl-snackbar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px 12px 12px;
  border-radius: var(--dl-radius-full);
  border: 1px solid var(--dl-grey-200);
  background: var(--dl-white);
}

.dl-snackbar__icon { width: 24px; height: 24px; flex-shrink: 0; }
.dl-snackbar__label {
  font-size: var(--dl-text-base);
  font-weight: var(--dl-weight-semibold);
  color: var(--dl-black);
}

.dl-snackbar--success .dl-snackbar__icon svg { fill: var(--dl-green-600); }
.dl-snackbar--error .dl-snackbar__icon svg { fill: var(--dl-red-500); }
.dl-snackbar--warning .dl-snackbar__icon svg { fill: var(--dl-yellow-500); }
.dl-snackbar--info .dl-snackbar__icon svg { fill: var(--dl-violet-500); }

/* --- DlProgress --- */
.dl-progress {
  width: 100%;
  height: 8px;
  border-radius: var(--dl-radius-full);
  background: var(--dl-grey-200);
  overflow: hidden;
}

.dl-progress__fill {
  height: 100%;
  border-radius: var(--dl-radius-full);
  background: var(--dl-black);
  transition: width 0.3s ease;
}

/* --- DlSeparator --- */
.dl-separator {
  background: var(--dl-grey-200);
}

.dl-separator--horizontal { width: 100%; height: 1px; }
.dl-separator--vertical { width: 1px; height: 100%; }

/* --- DlSkeleton --- */
.dl-skeleton {
  border-radius: var(--dl-radius-full);
  animation: dl-skeleton-pulse 0.8s ease-in-out infinite alternate;
}

@keyframes dl-skeleton-pulse {
  0% { background: var(--dl-grey-50); }
  100% { background: var(--dl-grey-100); }
}

/* --- DlLoadingDots --- */
.dl-loading-dots {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  width: 48px;
  height: 16px;
}

.dl-loading-dots__dot {
  width: 10px;
  height: 10px;
  border-radius: var(--dl-radius-full);
  background: var(--dl-black);
  animation: dl-dot-bounce 0.9s ease-in-out infinite;
}

.dl-loading-dots__dot:nth-child(2) { animation-delay: 0.3s; }
.dl-loading-dots__dot:nth-child(3) { animation-delay: 0.6s; }

@keyframes dl-dot-bounce {
  0%, 100% { transform: translateY(3px); }
  50% { transform: translateY(-3px); }
}

/* --- DlPagination --- */
.dl-pagination {
  display: flex;
  align-items: center;
  gap: 4px;
}

.dl-pagination__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--dl-radius-full);
  background: var(--dl-black);
  opacity: 0.4;
  cursor: pointer;
  transition: opacity 0.15s;
}

.dl-pagination__dot--active { opacity: 1; }

/* --- DlSlider --- */
.dl-slider {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: var(--dl-grey-200);
  border-radius: var(--dl-radius-full);
  outline: none;
}

.dl-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  border-radius: var(--dl-radius-full);
  background: var(--dl-white);
  border: 2px solid var(--dl-grey-200);
  cursor: pointer;
}

/* --- DlOTPInput --- */
.dl-otp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--dl-radius-md);
  background: var(--dl-grey-100);
  border: 2px solid transparent;
  font-family: var(--dl-font);
  font-size: var(--dl-text-base);
  font-weight: var(--dl-weight-semibold);
  text-align: center;
  outline: none;
  color: var(--dl-black);
}

.dl-otp--lg { width: 56px; height: 56px; }
.dl-otp--md { width: 48px; height: 48px; }
.dl-otp--sm { width: 40px; height: 40px; }

.dl-otp:focus { border-color: var(--dl-black); }
.dl-otp--error { border-color: var(--dl-red-500); background: var(--dl-red-50); color: var(--dl-red-500); }
.dl-otp--success { border-color: var(--dl-green-500); background: var(--dl-green-50); color: var(--dl-green-500); }

/* --- DlSegmentedControl --- */
.dl-segmented {
  display: flex;
  background: var(--dl-grey-100);
  border-radius: var(--dl-radius-full);
  padding: 4px;
  gap: 0;
}

.dl-segmented__tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 2px 16px;
  border-radius: var(--dl-radius-full);
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--dl-font);
  font-size: var(--dl-text-base);
  font-weight: var(--dl-weight-medium);
  color: var(--dl-grey-500);
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
  height: 40px;
}

.dl-segmented__tab--active {
  background: var(--dl-white);
  color: var(--dl-black);
}

.dl-segmented__tab--disabled {
  color: var(--dl-grey-300);
  cursor: not-allowed;
}

/* --- DlTabControl --- */
.dl-tabs {
  display: flex;
  width: 100%;
}

.dl-tabs__tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 8px;
  border: none;
  border-bottom: 2px solid var(--dl-grey-200);
  background: var(--dl-white);
  cursor: pointer;
  font-family: var(--dl-font);
  font-size: var(--dl-text-base);
  font-weight: var(--dl-weight-medium);
  color: var(--dl-grey-500);
  transition: border-color 0.15s, color 0.15s;
}

.dl-tabs__tab--active {
  border-bottom-color: var(--dl-black);
  color: var(--dl-black);
}

.dl-tabs__tab--disabled {
  color: var(--dl-grey-300);
  cursor: not-allowed;
}

/* --- DlAccordion --- */
.dl-accordion {
  width: 100%;
  background: var(--dl-white);
  border-radius: var(--dl-radius-lg);
}

.dl-accordion__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  cursor: pointer;
  min-height: 24px;
  gap: 16px;
}

.dl-accordion__title {
  font-size: var(--dl-text-base);
  font-weight: var(--dl-weight-medium);
  color: var(--dl-black);
  flex: 1;
}

.dl-accordion--disabled .dl-accordion__title {
  text-decoration: line-through;
  color: var(--dl-grey-500);
}

.dl-accordion__icon {
  width: 24px;
  height: 24px;
  transition: transform 0.2s;
  flex-shrink: 0;
}

.dl-accordion--open .dl-accordion__icon { transform: rotate(180deg); }

.dl-accordion__content {
  padding-bottom: 12px;
  font-size: var(--dl-text-base);
  font-weight: var(--dl-weight-regular);
  color: var(--dl-black);
  display: none;
}

.dl-accordion--open .dl-accordion__content { display: block; }

/* --- DlTooltip --- */
.dl-tooltip {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

.dl-tooltip__box {
  padding: 8px 16px;
  border-radius: var(--dl-radius-md);
  background: var(--dl-grey-800);
  color: var(--dl-white);
  font-size: var(--dl-text-base);
  font-weight: var(--dl-weight-regular);
  white-space: nowrap;
}

.dl-tooltip__arrow {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid var(--dl-grey-800);
}

.dl-tooltip--top {
  flex-direction: column-reverse;
}

.dl-tooltip--top .dl-tooltip__arrow {
  border-top: none;
  border-bottom: 10px solid var(--dl-grey-800);
}

/* --- DlTopNavigation --- */
.dl-top-nav {
  display: flex;
  align-items: center;
  background: var(--dl-white);
  padding: 0 16px;
  position: relative;
}

.dl-top-nav__icon-box {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dl-top-nav__title {
  flex: 1;
  text-align: center;
  font-size: var(--dl-text-base);
  font-weight: var(--dl-weight-bold);
  color: var(--dl-black);
}

.dl-top-nav--lg {
  flex-direction: column;
  align-items: flex-start;
  padding: 16px;
}

.dl-top-nav--lg .dl-top-nav__title {
  text-align: left;
  font-size: var(--dl-text-4xl);
  font-weight: var(--dl-weight-bold);
  line-height: var(--dl-leading-4xl);
}

.dl-top-nav__separator {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--dl-grey-200);
}

/* --- DlBottomNavigation --- */
.dl-bottom-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  background: var(--dl-grey-100);
  border-radius: var(--dl-radius-full);
}

.dl-bottom-nav__tab {
  width: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 0;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: var(--dl-radius-full);
  transition: background 0.25s ease-in-out;
}

.dl-bottom-nav__tab--active {
  background: var(--dl-white);
}

.dl-bottom-nav__tab svg {
  width: 24px;
  height: 24px;
}

.dl-bottom-nav__tab span {
  font-family: var(--dl-font);
  font-size: var(--dl-text-xs);
  font-weight: var(--dl-weight-bold);
}

.dl-bottom-nav__tab svg { fill: var(--dl-grey-400); }
.dl-bottom-nav__tab span { color: var(--dl-grey-400); }
.dl-bottom-nav__tab--active svg { fill: var(--dl-black); }
.dl-bottom-nav__tab--active span { color: var(--dl-black); }

/* --- DlMessage --- */
.dl-message {
  max-width: 240px;
  padding: 12px;
  border-radius: var(--dl-radius-md);
}

.dl-message--received { background: var(--dl-grey-100); }
.dl-message--sent { background: var(--dl-grey-800); }

.dl-message__text {
  font-size: var(--dl-text-base);
  font-weight: var(--dl-weight-regular);
  line-height: var(--dl-leading-base);
}

.dl-message--received .dl-message__text { color: var(--dl-black); }
.dl-message--sent .dl-message__text { color: var(--dl-white); }

/* --- DlLineItem --- */
.dl-line-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  gap: 16px;
  width: 100%;
}

.dl-line-item__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.dl-line-item__icon svg { fill: var(--dl-grey-400); }

.dl-line-item__content { flex: 1; }

.dl-line-item__title {
  font-size: var(--dl-text-base);
  font-weight: var(--dl-weight-semibold);
  color: var(--dl-black);
}

.dl-line-item__desc {
  font-size: var(--dl-text-base);
  font-weight: var(--dl-weight-regular);
  color: var(--dl-grey-500);
  margin-top: 4px;
}

.dl-line-item__trailing {
  flex-shrink: 0;
}

.dl-line-item__separator {
  height: 1px;
  background: var(--dl-grey-200);
  width: 100%;
}

/* --- DlMessageLoading --- */
.dl-msg-loading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 8px;
  background: var(--dl-grey-100);
  border-radius: var(--dl-radius-md);
}

.dl-msg-loading__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--dl-radius-full);
  animation: dl-msg-dot 1.35s ease-in-out infinite;
}

.dl-msg-loading__dot:nth-child(1) { animation-delay: 0s; }
.dl-msg-loading__dot:nth-child(2) { animation-delay: 0.45s; }
.dl-msg-loading__dot:nth-child(3) { animation-delay: 0.9s; }

@keyframes dl-msg-dot {
  0%, 100% { background: var(--dl-grey-300); }
  50% { background: var(--dl-grey-500); }
}

/* --- DlPinKeyboard --- */
.dl-pin-key {
  width: 80px;
  height: 80px;
  border-radius: var(--dl-radius-full);
  background: var(--dl-grey-100);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-family: var(--dl-font);
  transition: background 0.15s;
}

.dl-pin-key:hover { background: var(--dl-grey-200); }

.dl-pin-key__number {
  font-size: var(--dl-text-3xl);
  font-weight: var(--dl-weight-regular);
  color: var(--dl-black);
  line-height: 1;
}

.dl-pin-key__letters {
  font-size: var(--dl-text-sm);
  font-weight: var(--dl-weight-regular);
  color: var(--dl-grey-500);
  line-height: 1;
  margin-top: 2px;
}

.dl-pin-grid {
  display: grid;
  grid-template-columns: repeat(3, 80px);
  gap: 16px;
  justify-content: center;
}

/* --- DlCoachMark --- */
.dl-coach-mark {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

.dl-coach-mark__box {
  padding: 16px;
  border-radius: var(--dl-radius-xl);
  background: var(--dl-grey-800);
  color: var(--dl-white);
  max-width: 280px;
}

.dl-coach-mark__title {
  font-size: var(--dl-text-base);
  font-weight: var(--dl-weight-semibold);
  margin-bottom: 4px;
}

.dl-coach-mark__desc {
  font-size: var(--dl-text-base);
  font-weight: var(--dl-weight-regular);
  margin-bottom: 8px;
}

.dl-coach-mark__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}

.dl-coach-mark__arrow {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid var(--dl-grey-800);
}

/* --- DlBottomSheet --- */
.dl-bottom-sheet {
  background: var(--dl-white);
  border-radius: var(--dl-radius-3xl) var(--dl-radius-3xl) 0 0;
  max-width: 400px;
  width: 100%;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.1);
}

.dl-bottom-sheet__header {
  display: flex;
  align-items: center;
  padding: 0 16px;
}

.dl-bottom-sheet__header-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dl-bottom-sheet__header-title {
  flex: 1;
  text-align: center;
  font-size: var(--dl-text-base);
  font-weight: var(--dl-weight-bold);
}

.dl-bottom-sheet__content {
  padding: 32px 16px;
}

.dl-bottom-sheet__content-title {
  font-size: var(--dl-text-xl);
  font-weight: var(--dl-weight-bold);
  margin-bottom: 8px;
}

.dl-bottom-sheet__content-desc {
  font-size: var(--dl-text-base);
  font-weight: var(--dl-weight-regular);
  color: var(--dl-grey-500);
}

.dl-bottom-sheet__buttons {
  padding: 0 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dl-bottom-sheet__buttons .dl-btn { width: 100%; }

/* --- Responsive --- */
@media (max-width: 768px) {
  .sidebar { display: none; }
  .main { margin-left: 0; padding: var(--dl-spacing-24); }
}