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

    :root {
      --bg: #0f172a;
      --surface: rgba(255, 255, 255, 0.06);
      --surface-solid: #ffffff;
      --border: rgba(255, 255, 255, 0.08);

      --text: #0f172a;
      --text-light: #64748b;

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

      --success: #22c55e;
      --danger: #ef4444;

      --radius: 1.25rem;
      --transition: 180ms ease;

      --shadow:
        0 10px 40px rgba(0, 0, 0, 0.18);
    }

    body {
      margin: 0;

      min-height: 100vh;

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

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

      color: white;
    }

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

    /* ======================================================
       APP LAYOUT
    ====================================================== */
    .app {
      display: grid;
      grid-template-columns: 380px 1fr;

      min-height: 100vh;
    }

    /* ======================================================
       SIDEBAR
    ====================================================== */
    .sidebar {
      backdrop-filter: blur(18px);

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

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

      padding: 1.5rem;

      overflow-y: auto;
    }

    .brand {
      margin-bottom: 2rem;
    }

    .brand h1 {
      margin: 0;

      font-size: 1.8rem;
      font-weight: 800;

      letter-spacing: -0.04em;
    }

    .brand p {
      margin-top: 0.5rem;

      color: #94a3b8;
      line-height: 1.5;
    }

    /* ======================================================
       TABS
    ====================================================== */
    .tabs {
      display: flex;
      gap: 0.5rem;

      margin-bottom: 1.5rem;

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

      padding: 0.4rem;

      border-radius: 999px;
    }

    .tab-button {
      flex: 1;

      border: none;

      padding: 0.8rem 1rem;

      border-radius: 999px;

      background: transparent;

      color: #cbd5e1;

      cursor: pointer;

      transition: var(--transition);
    }

    .tab-button.active {
      background: white;
      color: #0f172a;
      font-weight: 700;
    }

    .tab-panel {
      display: none;
    }

    .tab-panel.active {
      display: block;
    }

    /* ======================================================
       FORM STYLES
    ====================================================== */
    .section {
      margin-bottom: 2rem;
    }

    .section-title {
      margin-bottom: 1rem;

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

      color: #f8fafc;
    }

    .button-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 0.75rem;
    }

    .btn {
      border: none;

      padding: 0.9rem 1rem;

      border-radius: 1rem;

      cursor: pointer;

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

      font-weight: 600;
    }

    .btn:hover {
      transform: translateY(-2px);
    }

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

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

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

    .btn-secondary {
      background: rgba(255,255,255,0.08);
      color: white;
    }

    .field {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;

      margin-bottom: 1rem;
    }

    .field label {
      color: #cbd5e1;
      font-size: 0.9rem;
    }

    .input,
    .select {
      width: 100%;

      padding: 0.9rem 1rem;

      border-radius: 1rem;

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

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

      color: white;
    }

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

      border-color: var(--primary);

      box-shadow:
        0 0 0 4px rgba(99,102,241,0.2);
    }

    /* ======================================================
       MAIN AREA
    ====================================================== */
    .workspace {
      padding: 2rem;

      overflow-y: auto;
    }

    .workspace-header {
      margin-bottom: 1.5rem;
    }

    .workspace-header h2 {
      margin: 0;

      font-size: 2rem;
      font-weight: 800;

      letter-spacing: -0.04em;
    }

    .workspace-header p {
      color: #cbd5e1;
    }

    a {
      float: right;
      -webkit-text-decoration: none;
      -moz-text-decoration: none;
      text-decoration: none;
      color: #ffffff;
      font-size: 16px;
    }

    /* ======================================================
       PREVIEW
    ====================================================== */
    .preview-card {
      background: white;

      border-radius: 1.5rem;

      padding: 2rem;

      box-shadow: var(--shadow);

      margin-bottom: 2rem;
    }

    .newsletter {
      min-height: 500px;

      border: 2px dashed #dbe2ea;

      border-radius: 1rem;

      padding: 1rem;

      background: #f8fafc;
    }

    .newsletter-element {
      position: relative;

      margin-bottom: 1rem;

      padding: 1rem;

      border-radius: 1rem;

      background: white;

      border: 2px solid transparent;

      transition: var(--transition);
    }

    .newsletter-element:hover {
      border-color: #cbd5e1;
    }

    .newsletter-element.selected {
      border-color: var(--primary);

      box-shadow:
        0 0 0 4px rgba(99,102,241,0.15);
    }

    .newsletter-element img {
      width: 100%;
      border-radius: 1rem;
    }

    /* ======================================================
       TOOLBAR
    ====================================================== */
    .element-toolbar {
      position: absolute;

      top: 0.75rem;
      right: 0.75rem;

      display: flex;
      gap: 0.5rem;

      opacity: 0;

      transition: var(--transition);
    }

    .newsletter-element:hover
    .element-toolbar {
      opacity: 1;
    }

    .toolbar-btn {
      border: none;

      width: 36px;
      height: 36px;

      border-radius: 50%;

      cursor: pointer;

      background: #0f172a;

      color: white;
    }

    /* ======================================================
       COLUMNS
    ====================================================== */
    .columns {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1rem;
    }

    .column {
      padding: 1rem;

      border-radius: 1rem;

      background: #f1f5f9;

      min-height: 120px;
    }

    /* ======================================================
       CODE OUTPUT
    ====================================================== */
    .code-panel {
      background: #020617;

      border-radius: 1.5rem;

      overflow: hidden;

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

    .code-header {
      display: flex;
      justify-content: space-between;
      align-items: center;

      padding: 1rem 1.25rem;

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

    .code-header h3 {
      margin: 0;

      color: white;
    }

    pre {
      margin: 0;

      padding: 1.5rem;

      overflow-x: auto;

      color: #cbd5e1;

      font-size: 0.9rem;
      line-height: 1.6;
    }

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

      .sidebar {
        border-right: none;
        border-bottom: 1px solid var(--border);
      }
    }

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

      .columns {
        grid-template-columns: 1fr;
      }
    }