/* ======================================================
       RESET
    ======================================================= */
    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    :root {
      --bg: #0f172a;
      --panel: rgba(255, 255, 255, 0.08);
      --panel-border: rgba(255, 255, 255, 0.1);

      --text: #f8fafc;
      --text-muted: #94a3b8;

      --primary: #6366f1;
      --primary-hover: #4f46e5;

      --radius: 1.25rem;
      --shadow:
        0 20px 60px rgba(0, 0, 0, 0.35);

      --transition: 180ms ease;
    }

    body {
      margin: 0;

      min-height: 100vh;

      font-family:
        Inter,
        system-ui,
        sans-serif;

      background:
        radial-gradient(
          circle at top left,
          #1e293b,
          #0f172a 55%
        );

      color: var(--text);

      overflow-x: hidden;
    }

    button,
    input,
    textarea,
    select {
      font: inherit;
    }

    /* ======================================================
       APP LAYOUT
    ======================================================= */
    .app-header {
      padding: 1.5rem 2rem;

      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1rem;

      border-bottom:
        1px solid rgba(255, 255, 255, 0.08);

      backdrop-filter: blur(10px);
    }

    .logo {
      margin: 0;

      font-size: clamp(1.5rem, 3vw, 2rem);
      font-weight: 800;

      letter-spacing: -0.04em;
    }

    .logo small {
      font-weight: 400;
      color: var(--text-muted);
    }

    .back-link {
      color: white;
      text-decoration: none;

      padding: 0.8rem 1rem;

      border-radius: 999px;

      background:
        rgba(255, 255, 255, 0.08);

      transition:
        background var(--transition),
        transform var(--transition);
    }

    .back-link:hover {
      background:
        rgba(255, 255, 255, 0.14);

      transform: translateY(-2px);
    }

    .app-layout {
      display: grid;
      grid-template-columns: 340px 1fr;

      gap: 1.5rem;

      padding: 1.5rem;

      min-height: calc(100vh - 90px);
    }

    .panel {
      background: var(--panel);

      border:
        1px solid var(--panel-border);

      backdrop-filter: blur(18px);

      border-radius: var(--radius);

      box-shadow: var(--shadow);
    }

    /* ======================================================
       SIDEBAR
    ======================================================= */
    .sidebar {
      padding: 1.5rem;

      overflow-y: auto;

      max-height: calc(100vh - 130px);
    }

    .panel-title {
      margin: 0 0 1.5rem;

      font-size: 1.3rem;
      font-weight: 700;
    }

    .control-group {
      margin-bottom: 1.5rem;

      padding-bottom: 1.5rem;

      border-bottom:
        1px solid rgba(255, 255, 255, 0.08);
    }

    .control-group:last-child {
      border-bottom: none;
      margin-bottom: 0;
      padding-bottom: 0;
    }

    .group-label {
      display: block;

      margin-bottom: 1rem;

      font-size: 0.85rem;
      font-weight: 700;

      text-transform: uppercase;
      letter-spacing: 0.08em;

      color: #cbd5e1;
    }

    .field {
      display: flex;
      flex-direction: column;

      gap: 0.45rem;

      margin-bottom: 1rem;
    }

    .field label {
      font-size: 0.9rem;
      color: var(--text-muted);
    }

    .input,
    .textarea,
    .select {
      width: 100%;

      padding: 0.85rem 1rem;

      border: 1px solid transparent;
      border-radius: 1rem;

      background:
        rgba(255, 255, 255, 0.08);

      color: white;

      transition:
        border-color var(--transition),
        background var(--transition);
    }

    .input:focus,
    .textarea:focus,
    .select:focus {
      outline: none;

      border-color:
        rgba(99, 102, 241, 0.8);

      background:
        rgba(255, 255, 255, 0.12);
    }

    .textarea {
      resize: vertical;
      min-height: 90px;
    }

    .color-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);

      gap: 0.75rem;
    }

    .inline-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);

      gap: 1rem;
    }

    .checkbox {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    /* ======================================================
       MAIN CONTENT
    ======================================================= */
    .content {
      display: flex;
      flex-direction: column;

      gap: 1.5rem;
    }

    /* ======================================================
       PREVIEW
    ======================================================= */
    .preview-card {
      padding: 1.5rem;
    }

    .preview-header {
      margin-bottom: 1rem;
    }

    .preview-title {
      margin: 0;

      font-size: 1.2rem;
      font-weight: 700;
    }

    .preview-description {
      margin-top: 0.4rem;

      color: var(--text-muted);
      font-size: 0.95rem;
    }

    .preview-stage {
      position: relative;

      min-height: 500px;

      display: flex;
      justify-content: center;
      align-items: center;

      overflow: hidden;

      border-radius: 1.25rem;

      background:
        linear-gradient(
          135deg,
          #312e81,
          #1e1b4b
        );
    }

    /* ======================================================
       CTA BUTTON
    ======================================================= */
    .cta-button {
      border: none;

      padding: 1rem 1.8rem;

      border-radius: 999px;

      font-weight: 700;

      color: white;

      cursor: pointer;

      box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.25);

      transition:
        transform var(--transition),
        opacity var(--transition);
    }

    .cta-button:hover {
      transform: translateY(-3px);
    }

    .cta-button:active {
      transform: scale(0.98);
    }

    /* ======================================================
       MODAL
    ======================================================= */
    .overlay {
      position: absolute;
      inset: 0;

      display: flex;
      justify-content: center;
      align-items: center;

      padding: 1rem;

      background:
        rgba(15, 23, 42, 0.7);

      backdrop-filter: blur(6px);

      opacity: 0;
      visibility: hidden;

      transition:
        opacity var(--transition),
        visibility var(--transition);
    }

    .overlay.active {
      opacity: 1;
      visibility: visible;
    }

    .modal {
      width: min(100%, 420px);

      overflow: hidden;

      border-radius: 1rem;

      background: white;

      color: #0f172a;

      transform: translateY(20px);

      transition:
        transform var(--transition);
    }

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

    .modal-header,
    .modal-footer {
      padding: 1rem 1.25rem;
    }

    .modal-body {
      padding: 1.5rem 1.25rem;
    }

    .modal-title {
      margin: 0 0 0.5rem;

      font-size: 1.3rem;
      font-weight: 700;
    }

    .modal-text {
      margin: 0;

      line-height: 1.6;
    }

    .close-button {
      border: none;

      padding: 0.7rem 1rem;

      border-radius: 0.8rem;

      background: #0f172a;

      color: white;

      cursor: pointer;
    }

    /* ======================================================
       CODE SECTION BELOW PREVIEW
    ======================================================= */
    .code-card {
      overflow: hidden;
    }

    .tabs {
      display: flex;
      flex-wrap: wrap;

      border-bottom:
        1px solid rgba(255, 255, 255, 0.08);
    }

    .tab-button {
      border: none;

      padding: 1rem 1.25rem;

      background: transparent;

      color: var(--text-muted);

      font-weight: 700;

      cursor: pointer;

      transition:
        background var(--transition),
        color var(--transition);
    }

    .tab-button.active {
      background:
        rgba(255, 255, 255, 0.08);

      color: white;
    }

    .copy-button {
      margin-left: auto;

      background: #10b981;
      color: white;
    }

    .code-container {
      padding: 1.5rem;

      background: #020617;

      max-height: 360px;
      overflow: auto;
    }

    .code-block {
      display: none;

      margin: 0;

      font-size: 0.85rem;
      line-height: 1.7;

      color: #93c5fd;
    }

    .code-block.active {
      display: block;
    }

    /* ======================================================
       RESPONSIVE
    ======================================================= */
    @media (max-width: 1024px) {
      .app-layout {
        grid-template-columns: 1fr;
      }

      .sidebar {
        max-height: none;
      }
    }

    @media (max-width: 640px) {
      .app-header {
        flex-direction: column;
        align-items: flex-start;
      }

      .inline-grid,
      .color-grid {
        grid-template-columns: 1fr;
      }
    }