.app-shell {
  --ink: #25332b;
  --green: #294838;
  min-height: 100svh;
  background: #b6c5a9;
  isolation: isolate;
}
.desk-landscape {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, #152a22c9 0%, #192f2496 45%, #23352a15 82%),
    url("assets/countryside.webp") 62% center / cover no-repeat;
}
.app-header.site-header {
  position: sticky;
  top: 0;
  left: auto;
  right: auto;
  max-width: none;
  min-height: 68px;
  border: 0;
  border-bottom: 1px solid #ffffff26;
  border-radius: 0;
  padding: 0 clamp(20px, 5vw, 84px);
  background: #192b23ef;
  color: #fffdf0;
}
.app-header .brand { gap: 6px; }
.app-header .brand svg { color: #cadca3; }
.app-header nav { display: flex; align-items: center; gap: clamp(14px, 3vw, 38px); font-size: .88rem; }
.app-header nav a:not(.header-action):hover { text-decoration: underline; text-underline-offset: .4em; }
.header-action {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  padding: .65rem .9rem;
  border: 1px solid #f1f3dd50;
  border-radius: 8px;
}
.header-action:hover, .header-action[aria-current] { background: #ffffff15; }
.desk { width: min(100%, 1600px); margin: auto; padding: clamp(30px, 5vw, 74px) clamp(20px, 5vw, 84px) 52px; }
.desk-home { max-width: 810px; }
.desk-intro, .mail-intro { color: #fffef2; text-shadow: 0 2px 12px #11281b90; }
.desk-intro > p:last-child, .mail-intro > p:last-child { font-size: 1rem; line-height: 1.55; margin: .8rem 0 0; }
.desk .eyebrow { margin: 0; text-transform: uppercase; }
.index-dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #d6e7a8; vertical-align: 1px; }
.desk h1 { font: 400 clamp(3.2rem, 6.4vw, 6.1rem)/.94 var(--serif); letter-spacing: -.035em; margin: .55rem 0 0; }
.tool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: clamp(22px, 4vw, 42px); }
.tool-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 195px;
  padding: clamp(16px, 2.2vw, 27px);
  color: #22352c;
  background: var(--card);
  border: 1px solid #fff8;
  border-radius: 15px;
  box-shadow: 0 6px 24px #13251b28;
  transition: transform .2s, box-shadow .2s;
}
.tool-card:hover { transform: translateY(-4px); box-shadow: 0 14px 28px #14251d66; }
.sage { --card: #edf0dd; --icon: #d9e4c4; }
.gold { --card: #f4ebd6; --icon: #ebd8ad; }
.rose { --card: #f2e6e0; --icon: #e9cec3; }
.blue { --card: #e3edf0; --icon: #cadfe5; }
.card-top, .card-action { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.card-top svg { width: 38px; height: 38px; padding: 8px; border-radius: 10px; background: var(--icon); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.card-number { font-size: .66rem; letter-spacing: .13em; font-weight: 700; }
.card-title { font: 400 clamp(2.15rem, 3.2vw, 3.05rem)/1 var(--serif); letter-spacing: -.03em; margin: .6rem 0 .35rem; }
.card-copyline { font-size: .9rem; line-height: 1.5; margin-bottom: 1rem; }
.card-action { margin-top: auto; padding-top: .7rem; border-top: 1px solid #22352c24; font-size: .77rem; font-weight: 700; }
.card-action > span { font-size: 1rem; line-height: 1; }
.desk-note { color: #fffef2; font-size: .79rem; width: fit-content; padding: .4rem .75rem; background: #182d24dc; border-radius: 6px; }
#workspace-tools, .mailbox-shell .desk { max-width: 1080px; }
.back-link { display: inline-block; padding: .6rem .9rem; border-radius: 8px; background: #20392d; color: #fffef2; }
.back-link:hover { text-decoration: underline; }
.desk-panel, .record {
  background: #fbfaf2;
  border: 1px solid #e2e7da;
  border-radius: 16px;
  padding: clamp(16px, 3vw, 32px);
  margin: 1rem 0;
}
.desk-panel { box-shadow: 0 10px 30px #10241a35; }
.desk-panel h2 { font-size: clamp(2rem, 5vw, 3.25rem); margin: .4rem 0 1rem; }
.desk-panel p { line-height: 1.55; }
.desk-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1rem 0; }
.wide { grid-column: 1 / -1; }
label { display: block; font-weight: 650; font-size: .9rem; }
input:not([type=checkbox]):not([type=hidden]), textarea, select {
  display: block;
  width: 100%;
  margin-top: .4rem;
  padding: .75rem;
  border: 1px solid #aab6a6;
  border-radius: 8px;
  background: #fffefa;
  color: var(--ink);
  font: inherit;
}
textarea { resize: vertical; }
input[type=checkbox] { margin-right: .45rem; accent-color: var(--green); }
fieldset { min-width: 0; border: 1px solid #c8d2bf; border-radius: 10px; padding: .85rem; }
fieldset label + label { margin-top: .6rem; }
legend, summary { font-weight: 700; }
details { margin: 1rem 0; }
summary { cursor: pointer; }
.record { overflow-wrap: anywhere; margin: .65rem 0; background: #f1f1e6; }
.record p { margin: .45rem 0; }
.record h3 { font-size: 1.25rem; margin: 0 0 .5rem; }
.record a, .desk-panel p a { text-decoration: underline; text-underline-offset: .2em; }
.actions { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; }
.record .actions { margin-top: .85rem; }
.actions button:not(.button), #refresh-inbox { border: 1px solid #a5b29e; background: #fffefa; padding: .65rem .85rem; border-radius: 8px; }
.actions button:not(.button):hover, #refresh-inbox:hover { background: #e8eddf; }
.draft-form { padding: 1.4rem; display: grid; gap: .85rem; }
#status:not(:empty) { padding: .75rem 1rem; border-radius: 8px; background: #fff8da; color: #29362c; }
.mail-intro { margin-bottom: 1.75rem; }
.mail-text { white-space: pre-wrap; }
@media (max-width: 650px) {
  .desk-landscape { background-image: linear-gradient(180deg, #182c23b0, #182c2350), url("assets/countryside.webp"); }
  .desk-form { grid-template-columns: minmax(0, 1fr); }
  .tool-card { min-height: 194px; }
}
@media (max-width: 460px) {
  .app-header.site-header { gap: 8px; padding-inline: 14px; }
  .app-header nav { gap: 10px; font-size: .8rem; }
  .header-action { gap: .4rem; padding: .55rem .65rem; }
  .tool-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .tool-card { min-height: 0; }
}

.setup-tools { margin-top: clamp(38px, 6vw, 74px); }
.setup-tools h2 { color: inherit; margin-top: .55rem; }
.setup-tools .tool-grid { margin-top: 1.25rem; }
.domain-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.domain-options .record { display: flex; flex-direction: column; align-items: flex-start; margin: 0; }
.domain-options .button { margin-top: auto; }
.domain-options p:last-of-type { margin-bottom: 1.2rem; }
.dns-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.dns-results .record { margin: 0; padding: 1rem; }
@media (max-width: 650px) {
  .domain-options, .dns-results { grid-template-columns: minmax(0, 1fr); }
}

.email-preflight { padding: 1rem; margin: 1.25rem 0; border: 1px solid #c8d2bf; border-radius: 12px; }
.email-preflight h3 { margin: 0; }
#email-check-status:empty { margin: 0; }
.record .email-check-label { display: inline-block; padding: .25rem .55rem; border-radius: 6px; background: #e3e9d8; font-size: .8rem; font-weight: 700; }

.outbound-desk { max-width: 1420px; }
.outbound-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 1.25rem 0; }
.outbound-tabs a { padding: .7rem 1rem; background: #263f30; color: #fffdf0; border: 1px solid #ffffff55; border-radius: 9px; font-size: .85rem; }
.outbound-tabs a[aria-current] { background: #e9edc8; color: #263f30; }
#outbound-status:not(:empty) { background: #fff8da; border-radius: 8px; padding: 1rem; }
.unibox-layout { display: grid; grid-template-columns: minmax(210px,.8fr) minmax(0,1.4fr); gap: 24px; }
.unibox-item { display: block; width: 100%; text-align: left; white-space: pre-wrap; overflow-wrap: anywhere; padding: 1rem; border: 1px solid #c9d3bf; border-radius: 10px; background: #edf0df; margin: .5rem 0; }
#unibox-message { min-width: 0; overflow-wrap: anywhere; }
#campaign-list-live .record label { margin: .6rem 0; }
#campaign-list-live fieldset label { padding: .4rem 0; overflow-wrap: anywhere; }
@media(max-width:700px) { .unibox-layout { grid-template-columns: minmax(0,1fr); } }