* { box-sizing: border-box; }
:root {
  --bg: #0f1220;
  --panel: #161a2b;
  --panel-2: #1d2236;
  --text: #e7e9f5;
  --muted: #9aa3b2;
  --primary: #6c9ef8;
  --primary-2: #3f7af7;
  --border: #2a3048;
}
html, body { height: 100%; }
body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 700px at 70% -10%, #26304f33, transparent), var(--bg);
  color: var(--text);
}

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
  position: sticky;
  top: 0;
  z-index: 10;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand .logo { font-size: 22px; }
.brand h1 { font-size: 18px; margin: 0; font-weight: 700; letter-spacing: 0.2px; }

.container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  padding: 18px;
  max-width: 1100px;
  margin: 0 auto;
}

.controls {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.group { display: flex; flex-direction: column; gap: 6px; }
label { color: var(--muted); font-size: 13px; }
textarea, input[type="url"], input[type="password"] {
  width: 100%;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--text);
  outline: none;
}
textarea::placeholder, input::placeholder { color: #717a8c; }

.actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.download-group { display: flex; gap: 8px; margin-left: auto; }

.btn {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
}
.btn:hover { filter: brightness(1.1); }
.btn.primary {
  background: linear-gradient(180deg, var(--primary), var(--primary-2));
  border: 1px solid #2f5fcc;
}
.btn.secondary { background: var(--panel-2); }

/* Bigger primary action button */
.btn.giant {
  font-size: 20px;
  padding: 16px 28px;
  border-radius: 14px;
  width: 100%;
  max-width: 360px;
}

.preview {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
}
.canvas-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0b0d17;
  border: 1px dashed var(--border);
  border-radius: 12px;
  padding: 10px;
  min-height: 420px;
}
#memeCanvas { max-width: 100%; height: auto; border-radius: 8px; }

.status { margin-top: 10px; color: var(--muted); font-size: 13px; min-height: 20px; }

/* Dialog */
dialog::backdrop { background: #0008; }
#settingsDialog {
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  border-radius: 12px;
  padding: 0;
  width: min(640px, 92vw);
}
.settings-form { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
small { color: var(--muted); }