body {
      display: flex;
      flex-direction: column;
      height: 100dvh;
      margin: 0;
      overflow: hidden;
      background: #0d0d0d;
      color: #fff;
    }
    body.light { background: #f8f8f5; }
    body.dark { background: #0d0d0d; }
    .wrap { display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
    #viewer {
      position: relative !important;
      left: auto !important;
      top: auto !important;
      transform: none !important;
      width: 100%;
      max-width: 980px;
      background: #111;
      overflow: hidden;
      cursor: grab;
      touch-action: none;
      box-shadow: 0 8px 40px rgba(0,0,0,.45);
    }
    #viewer:active { cursor: grabbing; }
    #composeCanvas { display: block; width: 100%; height: 100%; }
    .empty-state {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 18px;
      padding: 24px;
      background: radial-gradient(circle at 50% 30%, #26384f, #0d0d0d 72%);
    }
    body.has-image .empty-state { display: none; }
    .pick-btn {
      min-width: min(320px, 82vw);
      min-height: 58px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.32);
      background: rgba(255,255,255,.14);
      color: #fff;
      font-size: 17px;
      font-weight: 800;
      cursor: pointer;
    }
    .empty-title { font-size: 34px; font-weight: 800; letter-spacing: .03em; }
    .empty-copy { max-width: 420px; color: rgba(255,255,255,.72); font-size: 14px; text-align: center; }
    #imageInput { display: none; }
    #zoomBtns {
      position: absolute;
      right: 12px;
      bottom: 12px;
      z-index: 20;
      display: none;
      flex-direction: column;
      overflow: hidden;
      border-radius: 6px;
      box-shadow: 0 2px 8px rgba(0,0,0,.3);
      touch-action: manipulation;
    }
    body.has-image #zoomBtns { display: flex; }
    #zoomBtns button {
      width: 46px;
      height: 46px;
      border: 0;
      background: #fff;
      color: #111;
      font-size: 26px;
      font-weight: 800;
      line-height: 1;
      cursor: pointer;
    }
    .zbDivider { height: 1px; background: rgba(0,0,0,.12); }
    #controls {
      position: static !important;
      left: auto !important;
      right: auto !important;
      bottom: auto !important;
      transform: none !important;
      width: 100% !important;
      max-width: 980px !important;
      min-height: 0 !important;
      max-height: 38vh;
      margin: 0 auto;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
      touch-action: pan-y;
      flex-shrink: 0;
      border-radius: 8px 8px 0 0 !important;
      flex-direction: column !important;
      gap: 10px !important;
      scrollbar-width: auto;
    }
    #controls::-webkit-scrollbar, .seg::-webkit-scrollbar, .font-seg::-webkit-scrollbar, .swatches::-webkit-scrollbar {
      width: 18px;
      height: 18px;
    }
    #controls::-webkit-scrollbar-thumb, .seg::-webkit-scrollbar-thumb, .font-seg::-webkit-scrollbar-thumb, .swatches::-webkit-scrollbar-thumb {
      background: rgba(255,255,255,.34);
      border: 5px solid rgba(0,0,0,.25);
      border-radius: 999px;
    }
    .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
    .field span, .section-label { color: rgba(255,255,255,.62); font-size: 11px; }
    .control-section { display: flex; flex-direction: column; gap: 8px; }
    .control-row { display: flex; gap: 10px; align-items: end; }
    .control-row > * { min-width: 0; }
    input, select {
      width: 100%;
      min-height: 38px;
      border: 1px solid rgba(255,255,255,.34);
      background: rgba(255,255,255,.1);
      color: #fff;
      padding: 7px 10px;
      font: inherit;
      outline: none;
    }
    select option { color: #111; }
    .code { font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
    .airport-name { height: 14px; overflow: hidden; color: rgba(255,255,255,.48); font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
    .hint {
      color: rgba(255,255,255,.58);
      font-size: 12px;
      line-height: 1.45;
    }
    .seg, .font-seg, .swatches { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
    #modeSeg {
      display: grid;
      grid-template-columns: 1fr 1fr;
      overflow: visible;
    }
    .seg button {
      flex: 1 0 auto;
      min-height: 34px;
      padding: 0 12px;
      border: 1px solid rgba(255,255,255,.26);
      border-radius: 999px;
      background: rgba(255,255,255,.08);
      color: #fff;
      cursor: pointer;
    }
    #modeSeg button {
      min-width: 0;
      width: 100%;
      padding: 0 8px;
    }
    .seg button.active { background: #fff; color: #111; border-color: #fff; }
    .seg button:disabled {
      opacity: .46;
      cursor: not-allowed;
    }
    .font-seg button {
      flex: 1 0 auto;
      min-height: 42px;
      padding: 0 14px;
      border: 1px solid rgba(255,255,255,.26);
      border-radius: 8px;
      background: rgba(255,255,255,.08);
      color: #fff;
      cursor: pointer;
    }
    .font-seg button.active { background: #fff; color: #111; border-color: #fff; }
    .swatch {
      flex: 0 0 auto;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: 2px solid rgba(255,255,255,.28);
      cursor: pointer;
    }
    .swatch.active { outline: 2px solid #fff; outline-offset: 2px; }
    .actions { display: flex; gap: 8px; justify-content: flex-end; }
    .actions button { flex: 1; max-width: 180px; }
    #modeBtn {
      position: fixed;
      top: 14px;
      right: 14px;
      left: auto;
      z-index: 320;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    @media (max-width: 640px) {
      .wrap {
        flex: 0 0 60dvh;
        height: 60dvh !important;
        padding: 56px 7px 8px;
        box-sizing: border-box;
      }
      #controls {
        flex: 0 0 40dvh;
        height: 40dvh;
        max-height: none;
        padding-bottom: max(10px, env(safe-area-inset-bottom));
      }
      #viewer { box-shadow: none; }
      #zoomBtns {
        right: 8px;
        bottom: 8px;
      }
      #zoomBtns button {
        width: 42px;
        height: 42px;
        font-size: 24px;
      }
      input, select { min-height: 34px; padding: 5px 9px; }
      .grid { grid-template-columns: 1fr 1fr; }
      .control-row { gap: 8px; }
      .actions button { max-width: none; }
    }
    @media (min-width: 900px) {
      body {
        display: flex;
        flex-direction: column;
      }
      .wrap {
        flex: 1 1 auto;
        min-height: 0;
        width: 100% !important;
        padding: 28px 32px;
        box-sizing: border-box;
      }
      #viewer {
        max-width: min(100%, 1280px);
      }
      #controls {
        width: 100% !important;
        max-width: 1280px !important;
        max-height: 30dvh;
        margin: 0 auto;
        padding: 14px 16px;
        border-radius: 8px 8px 0 0 !important;
        box-sizing: border-box;
      }
      .actions button {
        max-width: none;
      }
    }