/* Soft Pastel Neobrutalist CSS Theme */
@import url("https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&display=swap");

:root {
  /* Soft Pastel Colors */
  --bg-cream: #faf9f7;
  --bg-subtle: #f7f5f2;
  --text-dark: #2d2d2d;
  --pastel-blue: #a8c8ec;
  --pastel-pink: #f4a6cd;
  --pastel-green: #b8e6b8;
  --pastel-yellow: #f5d982;
  --pastel-purple: #d4b5f7;
  --pastel-purple-light: #e8d9f9;
  --pastel-peach: #ffcab0;
  --white: #ffffff;
  --muted-gray: #e8e5e1;
  /* The quieter ink: a note, a hint, a date beside a name. */
  --text-muted: #6b6372;
  /* The two emphasis colours a page writes with: a kicker, an index, a link that matters. */
  --accent-purple: #8050ca;
  --accent-pink: #d53879;
  /* A heading's colour and the hard shadow behind it. */
  --heading: var(--pastel-blue);
  --heading-shadow: var(--pastel-pink);
  /* The ink the hard shadows are cast in and the borders are drawn with: the ink itself by day, a dimmer
     one by night, so a control's outline does not glare on a dark page. */
  --ink-shadow: var(--text-dark);
  --ink-border: var(--ink-shadow);
  /* What is written on a fill of the ink itself (an inverted chip, a pressed segment): white by day,
     the page by night, when the ink is pale. */
  --on-ink: #fff;
  /* A soft line: a divider, a dashed frame around what is not there yet. */
  --line: #cbbfcb;
  /* The pale tints a page washes a note, a hint or a highlighted row with; the pastels are their louder siblings. */
  --tint-yellow: #fff3bc;
  --tint-green: #e8fff5;
  --tint-blue: #e8f5ff;
  --tint-pink: #ffe0ec;
  --tint-peach: #fff6ef;
  /* A refusal and a success, written in words. */
  --danger: #b21f3d;
  --success: #1f7a3a;
  /* A translucent surface over the page (a glass panel, a hover tint). */
  --glass: rgba(255, 255, 255, 0.6);
  /* The surface's channels, for a translucent panel: rgba(var(--surface-rgb), .9). */
  --surface-rgb: 255, 255, 255;
  --dim: rgba(0, 0, 0, 0.08);
  color-scheme: light;

  /* Shadows and borders */
  --border-width: 2px;
  --shadow-sm: 2px 2px 0px var(--ink-shadow);
  --shadow-md: 3px 3px 0px var(--ink-shadow);
  --shadow-lg: 6px 6px 0px var(--ink-shadow);
  --radius: 12px;
}

/* The dark theme (docs/design-system.md, Themes): the same tokens, by night. The page is a neutral
   near-black, its surfaces sit barely above it, the ink is pale, the controls' fills are the seven
   accents deepened to tones the pale ink reads on, borders are a mid grey and the hard shadows are
   cast in translucent black, so a page is never a lattice of light.
   `theme-preferences.js` sets `data-theme` on <html>; layout.html sets it before the first paint. */
html[data-theme="dark"] {
  --bg-cream: #181a1b;
  --bg-subtle: #1c1e20;
  --text-dark: #dcd7e0;
  --pastel-blue: #3a5a8f;
  --pastel-pink: #9c3a6e;
  --pastel-green: #2f6b47;
  --pastel-yellow: #80601a;
  --pastel-purple: #5f3f9f;
  --pastel-purple-light: #2f2645;
  --pastel-peach: #8e4a30;
  --white: #1f2124;
  --muted-gray: #2a2c2f;
  --text-muted: #a8a3ad;
  --accent-purple: #b793f5;
  --accent-pink: #ff82b5;
  --heading: #b9d1f4;
  --heading-shadow: #8a3560;
  --ink-shadow: #0000004d;
  --ink-border: #66636c;
  --on-ink: #181a1b;
  --line: #3a3c3f;
  --tint-yellow: #2a2412;
  --tint-green: #182a20;
  --tint-blue: #192433;
  --tint-pink: #2f1d29;
  --tint-peach: #2e201b;
  --danger: #ff8aa0;
  --success: #7ad69a;
  --glass: rgba(31, 33, 36, 0.72);
  --surface-rgb: 31, 33, 36;
  --dim: rgba(255, 255, 255, 0.08);
  color-scheme: dark;
}

/* A page that carries no script (error.html) cannot read the saved choice, so it follows the
   device: the same tokens again, under the media query, for an <html> no boot script marked. */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    --bg-cream: #181a1b;
    --bg-subtle: #1c1e20;
    --text-dark: #dcd7e0;
    --pastel-blue: #3a5a8f;
    --pastel-pink: #9c3a6e;
    --pastel-green: #2f6b47;
    --pastel-yellow: #80601a;
    --pastel-purple: #5f3f9f;
    --pastel-purple-light: #2f2645;
    --pastel-peach: #8e4a30;
    --white: #1f2124;
    --muted-gray: #2a2c2f;
    --text-muted: #a8a3ad;
    --accent-purple: #b793f5;
    --accent-pink: #ff82b5;
    --heading: #b9d1f4;
    --heading-shadow: #8a3560;
    --ink-shadow: #0000004d;
    --ink-border: #66636c;
  --on-ink: #181a1b;
    --line: #3a3c3f;
    --tint-yellow: #2a2412;
    --tint-green: #182a20;
    --tint-blue: #192433;
    --tint-pink: #2f1d29;
    --tint-peach: #2e201b;
    --danger: #ff8aa0;
    --success: #7ad69a;
    --glass: rgba(31, 33, 36, 0.72);
    --surface-rgb: 31, 33, 36;
    --dim: rgba(255, 255, 255, 0.08);
    color-scheme: dark;
  }
}

/* Override existing gradient backgrounds */
body {
  background: var(--bg-cream);
  color: var(--text-dark);
  font-family: "Sora", -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Headings with neobrutalist style */
h1, h2, h3, h4, h5, h6 {
  font-family: "Sora", sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}

h1 {
  color: var(--heading);
  text-shadow: 3px 3px 0px var(--heading-shadow);
}

/* Cards and panels - override existing styles */
.character-detail,
.card {
  background: var(--white);
  border: var(--border-width) solid var(--ink-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  backdrop-filter: none;
  transition: all 0.2s ease;
}

/* Photo panel - subtle background */
.photo-panel {
  background: var(--bg-cream);
  border: var(--border-width) solid var(--ink-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  backdrop-filter: none;
  transition: all 0.2s ease;
}

/* Selections panel - subtle background */
.selections-panel {
  background: var(--bg-cream);
  border: var(--border-width) solid var(--ink-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  backdrop-filter: none;
  transition: all 0.2s ease;
}

/* Character cards base style */
.character-card {
  background: var(--white);
  border: var(--border-width) solid var(--ink-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  backdrop-filter: none;
  transition: all 0.2s ease;
}

/* Alternating character card backgrounds for variety */
.character-card:nth-child(5n+1) {
  background: var(--pastel-blue);
}

.character-card:nth-child(5n+2) {
  background: var(--pastel-pink);
}

.character-card:nth-child(5n+3) {
  background: var(--pastel-green);
}

.character-card:nth-child(5n+4) {
  background: var(--pastel-yellow);
}

.character-card:nth-child(5n+5) {
  background: var(--pastel-purple);
}

.character-card:hover,
.card:hover,
.modifier-button:hover {
  transform: translate(3px, 3px);
  box-shadow: 3px 3px 0px var(--ink-shadow);
}

/* Navigation links as buttons */
.nav-link {
  background: var(--pastel-pink);
  color: var(--text-dark);
  border: var(--border-width) solid var(--ink-border);
  border-radius: var(--radius);
  padding: 12px 24px;
  text-transform: uppercase;
  font-weight: 600;
  box-shadow: var(--shadow-md);
  transition: all 0.2s ease;
  text-decoration: none;
}

.nav-link:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0px var(--ink-shadow);
  background: var(--pastel-blue);
}

/* Buttons */
button, .btn, input[type="submit"] {
  background: var(--pastel-blue);
  color: var(--text-dark);
  border: var(--border-width) solid var(--ink-border);
  border-radius: var(--radius);
  padding: 6px 12px;
  font-weight: 700;
  font-size: 16px;
  box-shadow: 4px 4px 0px var(--ink-shadow);
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: "Sora", sans-serif;
  position: relative;
  top: 0;
  left: 0;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* A link acting as a control keeps the control's look, not a link's underline. */
a.btn {
  text-decoration: none;
}

button:hover, .btn:hover, input[type="submit"]:hover {
  transform: translate(-2px, -2px);
  background: var(--pastel-green);
}

button:active, .btn:active, input[type="submit"]:active {
  transform: translate(2px, 2px);
}

/* Primary button variant */
.btn-primary, button.primary {
  background: var(--pastel-pink);
}

.btn-primary:hover, button.primary:hover {
  background: var(--pastel-purple);
}

/* Secondary button variant */
.btn-secondary, button.secondary {
  background: var(--pastel-yellow);
}

.btn-secondary:hover, button.secondary:hover {
  background: var(--pastel-peach);
}

/* Success button variant */
.btn-success, button.success {
  background: var(--pastel-green);
}

.btn-success:hover, button.success:hover {
  background: var(--pastel-blue);
}

/* Large action buttons like Generate Character */
button.btn-lg,
.btn-lg,
button[onclick*="generate"],
button[onclick*="save"] {
  background: var(--pastel-pink);
  color: var(--text-dark);
  border: 3px solid var(--ink-border);
  padding: 10px 20px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1px;
  box-shadow: 6px 6px 0px var(--ink-shadow);
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

button.btn-lg:hover,
.btn-lg:hover,
button[onclick*="generate"]:hover,
button[onclick*="save"]:hover {
  background: var(--pastel-green);
  transform: translate(-3px, -3px);
}

button.btn-lg:active,
.btn-lg:active,
button[onclick*="generate"]:active,
button[onclick*="save"]:active {
  transform: translate(3px, 3px);
}

/* Plus/Add buttons specifically */
button[onclick*="addCustom"], 
.add-btn,
button:has(.plus-icon),
button:contains("+") {
  background: var(--pastel-purple);
  color: var(--text-dark);
  border: var(--border-width) solid var(--ink-border);
  border-radius: var(--radius);
  padding: 6px 12px;
  font-weight: 700;
  font-size: 16px;
  box-shadow: 4px 4px 0px var(--ink-shadow);
  min-width: auto;
  transition: all 0.15s ease;
}

button[onclick*="addCustom"]:hover,
.add-btn:hover {
  background: var(--pastel-pink);
  transform: translate(-2px, -2px);
}

button[onclick*="addCustom"]:active,
.add-btn:active {
  transform: translate(2px, 2px);
}

/* Vote buttons */
.vote-btn {
  background: var(--white);
  border: 2px solid var(--ink-border);
  padding: 8px 16px;
  border-radius: var(--radius);
  box-shadow: 3px 3px 0px var(--ink-shadow);
  transition: all 0.15s ease;
}

.vote-btn:hover {
  transform: translate(-1px, -1px);
}

.vote-btn:active {
  transform: translate(1px, 1px);
}

.vote-btn.upvote.active {
  background: var(--pastel-green);
}

.vote-btn.downvote.active {
  background: var(--pastel-pink);
}

.vote-count {
  background: var(--pastel-yellow);
  color: var(--text-dark);
  border: 2px solid var(--ink-border);
  border-radius: var(--radius);
  padding: 4px 12px;
  font-weight: 700;
}

/* Form inputs */
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select,
.form-input,
.form-textarea,
.form-select {
  background: var(--white);
  border: var(--border-width) solid var(--ink-border);
  border-radius: var(--radius);
  padding: 12px 16px;
  box-shadow: var(--shadow-md);
  transition: all 0.2s ease;
  font-family: "Sora", sans-serif;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0px var(--ink-shadow);
  border-color: var(--pastel-blue);
}

/* Character specific styles */
.character-name {
  color: var(--pastel-blue);
  text-transform: uppercase;
  font-family: "Sora", sans-serif;
  text-shadow: 2px 2px 0px var(--pastel-pink);
}

.character-catchphrase {
  background: var(--pastel-purple);
  color: var(--text-dark);
  border: var(--border-width) solid var(--ink-border);
  border-radius: var(--radius);
  padding: 10px 20px;
  box-shadow: var(--shadow-sm);
}

.character-details {
  background: var(--pastel-peach);
  color: var(--text-dark);
  border: var(--border-width) solid var(--ink-border);
  border-radius: var(--radius);
  padding: 15px;
  box-shadow: var(--shadow-sm);
}

/* Upload section wrapper */
.upload-section {
  background: var(--pastel-purple);
  border: var(--border-width) solid var(--ink-border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-md);
}

/* Default images section */
.default-images-grid {
  background: var(--pastel-blue);
  border: var(--border-width) solid var(--ink-border);
  border-radius: var(--radius);
  padding: 16px;
  margin-top: 16px;
  box-shadow: var(--shadow-md);
}

/* Upload label */
.file-upload-label {
  background: var(--white);
  color: var(--text-dark);
  border: var(--border-width) solid var(--ink-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  text-transform: uppercase;
  font-weight: 600;
}

.file-upload-label:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0px var(--ink-shadow);
  background: var(--pastel-yellow);
}

/* Modifier cards */
.modifier-button {
  background: var(--white);
  border: var(--border-width) solid var(--ink-border);
  border-radius: var(--radius);
  padding: 0;
  box-shadow: var(--shadow-md);
  transition: all 0.2s ease;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 45px;
  width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
  line-height: 1;
  cursor: pointer;
}


.modifier-button:hover {
  transform: translateY(-2px); /* lift up */
  box-shadow: 3px 5px 0 var(--ink-shadow); /* bigger shadow below */
}

.modifier-button:active {
  transform: translateY(1px); /* push down */
  box-shadow: 3px 2px 0 var(--ink-shadow); /* smaller shadow */
}

.modifier-button.selected {
  background: var(--pastel-green);
  color: var(--text-dark);
  transform: translate(0, 0); /* keep position */
  box-shadow: var(--shadow-md); /* constant shadow */
}

/* Tabs */
.tab-trigger {
  background: var(--pastel-yellow);
  border: var(--border-width) solid var(--ink-border);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 12px 24px;
  font-weight: 600;
  text-transform: uppercase;
  box-shadow: var(--shadow-sm);
  margin-right: 4px;
}

.tab-trigger:hover {
  background: var(--pastel-peach);
  transform: translateY(-2px);
}

.tab-trigger.active {
  background: var(--pastel-green);
  color: var(--text-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Loading and messages */
.loading {
  color: var(--text-dark);
  text-transform: uppercase;
  font-weight: 600;
}

.error {
  background: var(--pastel-pink);
  color: var(--text-dark);
  border: var(--border-width) solid var(--ink-border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-md);
}

/* Tab content wrappers - each with different colors */
.tab-content {
  border: var(--border-width) solid var(--ink-border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-md);
}

/* Haircut tab - blue */
#haircut-tab {
  background: var(--pastel-blue);
}

/* Outfit tab - pink */
#outfit-tab {
  background: var(--pastel-pink);
}

/* Accessories tab - purple */
#accessories-tab {
  background: var(--pastel-purple);
}

.no-image {
  background: var(--muted-gray);
  border: var(--border-width) solid var(--ink-border);
  border-radius: var(--radius);
  color: var(--text-dark);
  font-weight: 600;
  text-transform: uppercase;
}

/* Filter controls */
.filter-controls {
  background: var(--white);
  border: var(--border-width) solid var(--ink-border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-md);
}

/* Sidebars */
.base-image-picker, .modifiers-picker {
  background: var(--white);
  border: none;
  box-shadow: none;
}

.base-image-picker {
  border-right: 3px solid var(--ink-border);
}

.modifiers-picker {
  border-left: 3px solid var(--ink-border);
}

.sidebar-toggle {
  background: var(--pastel-yellow);
  border: 3px solid var(--ink-border);
  box-shadow: var(--shadow-md);
  font-family: "Sora", sans-serif;
  color: var(--text-dark);
}

.sidebar-toggle:hover {
  background: var(--pastel-green);
  transform: scale(1.1);
  box-shadow: var(--shadow-lg);
}

.sidebar-content h3 {
  color: var(--text-dark);
  font-family: "Sora", sans-serif;
  font-weight: 700;
}

.sidebar-images-grid img {
  border: 3px solid var(--ink-border);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius);
}

.sidebar-images-grid img:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-md);
  border-color: var(--pastel-blue);
}

.sidebar-images-grid img.selected {
  border-color: var(--pastel-green);
  box-shadow: var(--shadow-lg);
}

.sidebar-images-grid .upload-photo-btn {
  border: 3px solid var(--ink-border);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius);
  background: var(--white);
  cursor: pointer;
  transition: all 0.2s ease;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-images-grid .upload-photo-btn:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-md);
  border-color: var(--pastel-purple);
  background: var(--pastel-purple-light);
}

.sidebar-section {
  background: var(--bg-subtle);
  border: var(--border-width) solid var(--ink-border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}


/* Override any remaining gradient backgrounds */
.container {
  background: transparent;
}

/* Success/info messages */
.success-message {
  background: var(--pastel-green);
  color: var(--text-dark);
  border: var(--border-width) solid var(--ink-border);
  border-radius: var(--radius);
  padding: 15px;
  box-shadow: var(--shadow-md);
}

/* Make images fit better */
.character-image,
.file-preview img,
img.result-image {
  /* Border hugs the image edge with no gap */
  border: var(--border-width) solid var(--ink-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  box-sizing: border-box; /* include border in element size */
  display: block;         /* avoid inline gaps affecting layout */
}

/* When the wrapper uses .result-image, make the inner img respect the wrapper radius */
.result-image img { 
  border-radius: inherit; 
}

/* Ensure the photo scales to fit while preserving aspect ratio, so the border matches the visible photo edges */
.result-image img,
.result-area img,
img.result-image {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

/* Only for wrapper divs with class .result-image: center content and avoid extra styling */
.result-image:not(img) {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
}

/* Custom Scrollbar Styling */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: var(--bg-cream);
  border: var(--border-width) solid var(--ink-border);
}

::-webkit-scrollbar-thumb {
  background: var(--pastel-pink);
  border: var(--border-width) solid var(--ink-border);
  border-radius: var(--radius);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--pastel-purple);
}

::-webkit-scrollbar-corner {
  background: var(--bg-cream);
}

/* Firefox scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--pastel-pink) var(--bg-cream);
}

/* Custom option input sections */
.custom-modifier {
  background: rgba(255, 255, 255, 0.5);
  border: var(--border-width) solid var(--ink-border);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-md);
}

/* Custom modifiers in each category get a slightly different tint */
#haircut-tab .custom-modifier {
  background: rgba(255, 255, 255, 0.6);
  border-color: var(--ink-border);
}

#outfit-tab .custom-modifier {
  background: rgba(255, 255, 255, 0.6);
  border-color: var(--ink-border);
}

#accessories-tab .custom-modifier {
  background: rgba(255, 255, 255, 0.6);
  border-color: var(--ink-border);
}

/* Action buttons wrapper */
.action-buttons {
  background: var(--pastel-peach);
  border: var(--border-width) solid var(--ink-border);
  border-radius: var(--radius);
  padding: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-md);
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.custom-modifier input[type="text"] {
  background: var(--white);
  border: var(--border-width) solid var(--ink-border);
  border-radius: var(--radius);
  padding: 8px 12px;
  margin-right: 8px;
  flex: 1;
}

.custom-modifier button {
  background: var(--pastel-purple);
  color: var(--text-dark);
  border: var(--border-width) solid var(--ink-border);
  border-radius: var(--radius);
  padding: 8px 16px;
  font-weight: 600;
  text-transform: uppercase;
  box-shadow: 3px 3px 0px var(--ink-shadow);
  transition: all 0.15s ease;
}

.custom-modifier button:hover {
  background: var(--pastel-pink);
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0px var(--ink-shadow);
}

.custom-modifier button:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0px var(--ink-shadow);
}

/* Section titles with color */
.section-title {
  color: var(--text-dark);
  font-weight: 700;
  font-family: "Sora", sans-serif;
  padding: 0 0 8px 0;
  background: transparent;
  border: none;
  margin-bottom: 16px;
  box-shadow: none;
  display: block;
}

/* A dialog: a native <dialog> with this class, opened with showModal(). Its header carries the title and
   the way out, its footer the actions with the primary one last (docs/design-system.md). */
dialog.dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100dvh - 40px);
  padding: 24px;
  border: 3px solid var(--ink-border);
  border-radius: 16px;
  background: var(--bg-cream);
  color: var(--text-dark);
  box-shadow: 7px 7px 0 var(--ink-shadow);
}

dialog.dialog::backdrop {
  background: rgba(45, 45, 45, 0.45);
}

dialog.dialog > form {
  display: grid;
  gap: 16px;
}

dialog.dialog header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
}

dialog.dialog header h2 {
  margin: 0;
  font-size: 1.5rem;
}

dialog.dialog header button {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  padding: 0;
  font-size: 1.2rem;
}

dialog.dialog p {
  margin: 0;
  line-height: 1.55;
}

dialog.dialog label {
  display: grid;
  gap: 6px;
  font-weight: 800;
}

dialog.dialog footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
}