:root{
  --bg:#0C1C1F;
  --fg:#E6F1F4;
  --link:#49A2C8;
  --cta:#FF6B6B;
  --accent:#C2F970;
  --on-color:#0C1C1F;
  --warn:#FFC24D;     /* main warning (amber) */
  --warn-ink:#0C1C1F;     /* text/icon on warning surfaces */
  --warn-border: color-mix(in oklab, var(--warn) 55%, black); /* ~#A66C00-ish */
  --warn-surface: color-mix(in oklab, var(--warn) 18%, var(--bg)); /* subtle panel bg */

  /* derived tones for dark surfaces */
  --surface-1: color-mix(in oklab, var(--fg) 6%, var(--bg));
  --surface-2: color-mix(in oklab, var(--fg) 10%, var(--bg));
  --border:    color-mix(in oklab, var(--fg) 24%, var(--bg));
  --muted:     color-mix(in oklab, var(--fg) 55%, transparent);
  --tranparent:     color-mix(in oklab, var(--accent) 55%, transparent);

  /* rhythm */
  --radius: 14px;
  --field-h: 2em;
  --pad-y: 6px;
  --pad-x: 12px;
  --row-gap: 22px;
  --col-gap: 18px;
  --focus: var(--link); /* swap to --accent for lime focus ring */
}

body{
	background:var(--bg);
	color:var(--fg);
	font-family: system-ui, sans-serif;
	font-size: 1.1em; 
}

h1, h2, h3, h4 {
	color: var(--cta);
}

.form{
  max-width: 720px; margin-inline:auto; padding: 28px 20px;
  display:grid; gap: var(--row-gap);
}

.field{ display:grid; gap: 10px; }
.label{
  font-size: .95rem; letter-spacing:.02em; color:var(--fg);
}
.hint{ color: var(--muted); font-size: .9rem; }
.error{ color: var(--cta); font-size: .9rem; }

input, select, textarea, .quoted{
  border-radius: var(--radius);
  border:1px solid var(--border);
  background: var(--surface-1);
  color: var(--fg);
  padding: var(--pad-y) var(--pad-x);
  margin-right: var(--pad-x);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
  outline: none;
  font-size: 1em;
}
input, select{ height: var(--field-h); }
textarea{ min-height: 140px; resize: vertical; }

input::placeholder, textarea::placeholder{
  color: color-mix(in oklab, var(--fg) 45%, transparent);
}

/* hover + focus */
input:hover, select:hover, textarea:hover{
  border-color: color-mix(in oklab, var(--fg) 40%, var(--bg));
  background: var(--surface-2);
}
input:focus-visible, select:focus-visible, textarea:focus-visible{
  border-color: var(--focus);
  box-shadow:
    0 0 0 3px color-mix(in oklab, var(--focus) 45%, transparent),
    0 1px 1px rgba(0,0,0,.35);
}

/* invalid/valid states */
input[aria-invalid="true"], textarea[aria-invalid="true"]{
  border-color: var(--cta);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--cta) 40%, transparent);
}
.field.success input, .field.success textarea{
  border-color: var(--accent);
}

/*selects: present a custom chevron */
select{
  appearance:none;
  background:
    linear-gradient(180deg, transparent 0 70%, rgba(0,0,0,.06) 100%) no-repeat,
    var(--surface-1);
  background-position: left top;
}
.select-wrap{ position:relative; }
.select-wrap::after{
  content:"▾"; pointer-events:none; position:absolute; inset-block:0; right:14px;
  display:grid; place-items:center; color: var(--muted); font-size: 16px;
}

/* checkboxes/radios with 44px hit-area */
.choice{
  display:flex; align-items:center; gap:12px;
  min-height: 44px; cursor:pointer; userselect:none;
}
.choiceinput{
  appearance:none; width:22px; height:22px; border-radius:6px;
  border:1px solid var(--border); background:var(--surface-1);
  display:grid; place-items:center;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.choiceinput[type="radio"]{ border-radius:50%; }
.choiceinput:focus-visible{
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--focus) 45%, transparent);
  border-color: var(--focus);
}
.choiceinput:checked{
  border-color: var(--accent);
  background: radial-gradient(circle at 50% 50%, var(--accent) 0 45%, transparent 46% 100%);
}
.choice span{ font-size: 1rem; color: var(--fg); }

/*button */
button{
  height: var(--field-h);
  border-radius: var(--radius);
  padding: 0 22px;
  background: var(--cta);
  color: var(--on-color);
  border: none;
  font-weight: 700; letter-spacing:.02em;
  cursor:pointer;
  box-shadow: 0 2px 0 rgba(0,0,0,.35);
  transition: transform .06s ease, box-shadow .15s ease, filter .15s ease;
  font-size: 1em;
}
button:hover{ filter: brightness(1.05); }
button:active{ transform: translateY(1px); box-shadow: 0 1px 0 rgba(0,0,0,.35); }
button:focus-visible{
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

/* layout: optional 2-col on wide screens for short fields */
@media (min-width: 900px){
  .grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--col-gap); }
}

/* motion respect */
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; }
}

#notifications {
  border-radius: var(--radius);
  border:1px solid var(--warn-border);
  background: var(--warn-surface); 
  color: var(--warn);
  padding: var(--pad-y) var(--pad-x);
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 99;
  visibility: hidden;
  opacity: 0; transform: translateY(8px);
  box-shadow:
    0 0 0 3px color-mix(in oklab, var(--warn-border) 45%, transparent),
    0 1px 1px rgba(0,0,0,.35);
  transition:
    opacity 260ms cubic-bezier(.22,.61,.36,1),
    transform 260ms cubic-bezier(.22,.61,.36,1),
    visibility 0s linear 260ms; /* delay hiding until fade finishes */
  /*will-change: opacity, transform;*/
  font-size: 1.2em;
}

#notifications.is-visible{
  opacity: 1; transform: translateY(0);
  visibility: visible; pointer-events: auto;
  transition:
    opacity 260ms cubic-bezier(.22,.61,.36,1),
    transform 260ms cubic-bezier(.22,.61,.36,1),
    visibility 0s linear 0s; /* show immediately */
}

._modalTitle {
	width: 100%;
	text-align: center;
	margin: 0 auto;
	font-size: 2.5em;
	color: var(--cta);
	display: block;
	margin-top: .25em;
	margin-bottom: .25em;
}

._dashDisp {
	margin: 0 auto;
	width: calc(100% - 1em);
	max-width: 900px;
	background: rgba(10, 10, 10, 0.3);
	border-radius: .5em;
	border: 1px solid rgb(0, 0, 0, .5);
	padding-bottom: .25em;
	padding-left: .25em;
	padding-right: .25em;
}