:root {
      --cream: #f5f0e8;
      --cream2: #ede7d9;
      --cream3: #e3dcd0;
      --ink: #1a1612;
      --ink2: #3d3630;
      --ink3: #7a6f65;
      --ink4: #a89d93;
      --rust: #c84b2f;
      --rust2: #e05a3a;
      --rust-light: rgba(200, 75, 47, 0.1);
      --green: #2d6a4f;
      --green-light: rgba(45, 106, 79, 0.1);
      --amber: #c07d2a;
      --amber-light: rgba(192, 125, 42, 0.1);
      --blue: #1e4d8c;
      --blue-light: rgba(30, 77, 140, 0.1);
      --white: #ffffff;
      --shadow-sm: 0 1px 4px rgba(26, 22, 18, 0.08);
      --shadow: 0 4px 20px rgba(26, 22, 18, 0.12);
      --shadow-lg: 0 12px 40px rgba(26, 22, 18, 0.18);
      --radius: 16px;
      --radius-lg: 24px;
      --radius-full: 999px;
      --serif: 'Fraunces', Georgia, serif;
      --sans: 'DM Sans', sans-serif;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
    }

    html,
    body {
      background: var(--cream);
      color: var(--ink);
      font-family: var(--sans);
      height: 100%;
      overflow: auto;
      font-size: 15px;
    }

    /* ── VIEWS ── */
    .view {
      display: none;
      position: absolute;
      inset: 0;
      overflow-y: auto;
      background: var(--cream);
    }

    .view.active {
      display: flex;
      flex-direction: column;
    }

    .app-icon {
      width: 1em;
      height: 1em;
      display: inline-block;
      vertical-align: -0.16em;
      stroke: currentColor;
      fill: none;
      flex-shrink: 0;
    }

    .empty-icon .app-icon,
    .empty-icon.app-icon {
      width: 44px;
      height: 44px;
    }