:root{
  color-scheme: light;
  --bg: #f6f7fb;
  --card: #ffffff;
  --text: #1f2937;
  --muted: #5b6472;
  --border: rgba(34, 91, 132, 0.18);

  /* From logo */
  --blue: #225b84;
  --blue2: #509dcb;
  --orange: #dc5a31;

  --shadow: rgba(15, 23, 42, 0.10);
  --shadow2: rgba(15, 23, 42, 0.06);
  --radius: 14px;
}

*{ box-sizing: border-box; }

body{
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.45;
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 18% -10%, rgba(80,157,203,0.20), transparent 60%),
    radial-gradient(900px 560px at 92% 0%, rgba(220,90,49,0.18), transparent 55%),
    var(--bg);
}

a{ color: var(--blue); }

.wrap{ max-width: 900px; margin: 0 auto; padding: 28px 18px 64px; }

.card{
  background: var(--card);
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: 0 14px 30px var(--shadow), 0 4px 10px var(--shadow2);
}

.brandline{ display:flex; justify-content:space-between; align-items:center; gap: 12px; flex-wrap: wrap; }
.brand{ display:flex; align-items:center; gap: 12px; min-width: 240px; }
.logo{ width: 46px; height: auto; display:block; filter: drop-shadow(0 6px 10px rgba(15,23,42,0.10)); }
.brandname{ font-weight: 800; font-size: 20px; letter-spacing: 0.2px; }
.brandtag{ color: var(--muted); font-size: 13px; }

h1{ margin: 0 0 8px; font-size: 28px; letter-spacing: 0.2px; }
.sub{ color: var(--muted); margin: 0 0 18px; }

label{ display:block; font-weight: 700; margin: 14px 0 6px; color: rgba(17,24,39,0.92); }

textarea, select, input[type="password"], input[type="text"]{
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(17, 24, 39, 0.14);
  background: rgba(246, 247, 251, 0.9);
  color: var(--text);
  outline: none;
}

textarea{ min-height: 130px; resize: vertical; }
textarea:focus, select:focus, input:focus{
  border-color: rgba(34, 91, 132, 0.55);
  box-shadow: 0 0 0 4px rgba(80, 157, 203, 0.22);
}

.row{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.btn{
  appearance: none;
  border: 1px solid rgba(17, 24, 39, 0.16);
  background: #fff;
  color: rgba(17,24,39,0.92);
  padding: 11px 14px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 750;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.07);
}

.btn:hover{ filter: brightness(0.99); }

.btn.primary{
  border: none;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--orange));
}

.btn:disabled{ opacity: 0.55; cursor:not-allowed; box-shadow: none; }

.actions{ display:flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

.hint{ font-size: 13px; color: rgba(31,41,55,0.72); margin-top: 6px; }

.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

.outbox{
  margin-top: 14px;
  padding: 12px;
  border-radius: 12px;
  border: 1px dashed rgba(34, 91, 132, 0.35);
  background: rgba(80, 157, 203, 0.08);
}

.msg{ white-space: pre-wrap; }

.ok{ color: #0a7a2c; }
.err{ color: #b42318; }
.small{ font-size: 13px; color: rgba(31,41,55,0.82); }

.hr{ height: 1px; background: rgba(17, 24, 39, 0.10); margin: 18px 0; }

.pill{
  display:inline-block;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid rgba(17,24,39,0.12);
  background: rgba(255,255,255,0.9);
  font-size: 12px;
  color: rgba(31,41,55,0.75);
}

@media (max-width: 760px){
  .row{ grid-template-columns: 1fr; }
}


/* ---- How-it-works icon cards ---- */
.how{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 10px;
}
.howItem{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(17, 24, 39, 0.10);
  background: rgba(255,255,255,0.92);
}
.howItem img{
  width: 34px;
  height: 34px;
  object-fit: contain;
  flex: 0 0 auto;
}
.howTitle{
  font-weight: 900;
  font-size: 13px;
  margin-bottom: 4px;
}
.howDesc{
  font-size: 13px;
  color: rgba(31,41,55,0.78);
  line-height: 1.25;
}
@media (max-width: 760px){
  .how{ grid-template-columns: 1fr; }
}



/* ---- Layout tweaks: How-it-works full width + Tone next to Rewrite ---- */
.howWide{ margin-top: 14px; }
.howWide > label{ margin-top: 0; }

.toneActions{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: end;
  margin-top: 14px;
}
.toneActions .toneBox label{ margin-top: 0; }
.toneActions .btnBox{ display:flex; justify-content:flex-end; }

/* Right-align primary action rows */
.actions{ justify-content: flex-end; }

@media (max-width: 760px){
  .toneActions{ grid-template-columns: 1fr; }
  .toneActions .btnBox{ justify-content: stretch; }
  .toneActions .btnBox .btn{ width: 100%; }
  .actions .btn{ width: 100%; }
}

/* bp-bg-fix: prevent gradient tiling + ensure full-height */
html, body{
  height: 100%;
  min-height: 100%;
}

body{
  min-height: 100vh;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
}

/* bp-step1: custom instructions + link recovery UI */
#customTone{ min-height: 56px; resize: vertical; }
#recoveredNote{ opacity: 0.85; }
/* bp-step2: accessibility (dark mode + font size), fullscreen background, prefs UI */
html, body{ height: 100%; }
body{
  min-height: 100vh;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Dark mode (opt-in via prefs button) */
html.bp-dark{
  color-scheme: dark;
  --bg: #0b1220;
  --card: rgba(17,24,39,0.92);
  --text: #e5e7eb;
  --muted: rgba(229,231,235,0.72);
  --border: rgba(148,163,184,0.20);
  --shadow: rgba(0,0,0,0.40);
  --shadow2: rgba(0,0,0,0.22);
}

html.bp-dark body{
  background:
    radial-gradient(1200px 600px at 18% -10%, rgba(80,157,203,0.18), transparent 60%),
    radial-gradient(900px 560px at 92% 0%, rgba(220,90,49,0.14), transparent 55%),
    var(--bg);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

html.bp-dark .card{
  border-color: rgba(226,232,240,0.10);
}

html.bp-dark textarea,
html.bp-dark select,
html.bp-dark input[type="password"],
html.bp-dark input[type="text"]{
  background: rgba(15,23,42,0.72);
  border-color: rgba(226,232,240,0.14);
  color: var(--text);
}

html.bp-dark .outbox{
  border-color: rgba(80,157,203,0.30);
  background: rgba(80,157,203,0.12);
}

html.bp-dark .hint{ color: rgba(226,232,240,0.72); }
html.bp-dark .pill{
  background: rgba(15,23,42,0.72);
  border-color: rgba(226,232,240,0.14);
  color: rgba(226,232,240,0.78);
}
html.bp-dark a{ color: rgba(147,197,253,0.95); }

/* Larger text options */
html.bp-font-lg body{ font-size: 18px; }
html.bp-font-xl body{ font-size: 20px; }
html.bp-font-lg .hint, html.bp-font-lg .small, html.bp-font-lg .brandtag{ font-size: 14px; }
html.bp-font-xl .hint, html.bp-font-xl .small, html.bp-font-xl .brandtag{ font-size: 15px; }

/* Floating preferences button + panel */
.bpPrefsBtn{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  border-radius: 999px;
  padding: 10px 12px;
  line-height: 1;
  box-shadow: 0 12px 22px rgba(15,23,42,0.14);
}

.bpPrefsPanel{
  position: fixed;
  right: 16px;
  bottom: 70px;
  width: 300px;
  max-width: calc(100vw - 32px);
  z-index: 10000;
  background: var(--card);
  border: 1px solid rgba(17,24,39,0.12);
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 14px 30px var(--shadow), 0 4px 10px var(--shadow2);
}

.bpPrefsTitle{
  font-weight: 900;
  font-size: 14px;
  margin-bottom: 10px;
}

.bpPrefsRow{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  margin: 10px 0;
}

.bpPrefsLabel{
  margin: 0;
  font-weight: 800;
  font-size: 13px;
  color: rgba(17,24,39,0.92);
}

html.bp-dark .bpPrefsLabel{ color: rgba(226,232,240,0.90); }

.bpPrefsPanel select{
  padding: 8px 10px;
  border-radius: 10px;
}

.bpPrefsHint{
  margin-top: 8px;
  font-size: 12px;
  color: rgba(31,41,55,0.70);
  line-height: 1.25;
}
html.bp-dark .bpPrefsHint{ color: rgba(226,232,240,0.70); }

.bpPrefsActions{
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

/* bp-darkfix: improve dark-mode contrast + placeholder readability */
html.bp-dark{
  /* slightly brighter muted text than step2 */
  --muted: rgba(226,232,240,0.78);
}

/* Fix hard-coded light-theme text colors */
html.bp-dark label{
  color: rgba(226,232,240,0.92) !important;
}
html.bp-dark .small{
  color: rgba(226,232,240,0.82) !important;
}
html.bp-dark .sub,
html.bp-dark .brandtag{
  color: var(--muted) !important;
}

/* Placeholders (inputs/textarea) */
html.bp-dark ::placeholder{ color: rgba(226,232,240,0.48); }
html.bp-dark textarea::placeholder{ color: rgba(226,232,240,0.48); }
html.bp-dark input::placeholder{ color: rgba(226,232,240,0.48); }

/* Divider line */
html.bp-dark .hr{ background: rgba(226,232,240,0.12) !important; }

/* Make "How it works" tiles look right in dark mode (no more light cards) */
html.bp-dark .howItem{
  background: rgba(15,23,42,0.72) !important;
  border-color: rgba(226,232,240,0.14) !important;
}
html.bp-dark .howTitle{
  color: rgba(226,232,240,0.92) !important;
}
html.bp-dark .howDesc{
  color: rgba(226,232,240,0.72) !important;
}

/* Keep hint text readable */
html.bp-dark .hint{
  color: rgba(226,232,240,0.78) !important;
}