/* Visual direction: warm paper, night-green technical grid, restrained glass. */
:root {
  --ink: #111a15;
  --muted: #627066;
  --paper: #f2f5ef;
  --card: #fbfcf9;
  --line: #d7dfd4;
  --lime: #ddff68;
  --night: #101813;
  --night-soft: #19271e;
}

body { background: var(--paper); }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid #85ac27;
  outline-offset: 3px;
}

/* The grid uses one-pixel dots and two faint axes, like a drawing surface. */
.landing-hero {
  isolation: isolate;
  color: #f7faf3;
  border-bottom: 1px solid #34463a;
  background:
    radial-gradient(circle at 76% 32%, rgba(162, 231, 118, .16), transparent 34%),
    linear-gradient(90deg, transparent calc(50% - .5px), rgba(208, 242, 196, .085) 50%, transparent calc(50% + .5px)),
    linear-gradient(0deg, transparent calc(50% - .5px), rgba(208, 242, 196, .065) 50%, transparent calc(50% + .5px)),
    radial-gradient(circle, rgba(217, 247, 208, .15) .7px, transparent 1px),
    linear-gradient(145deg, #0d1711, #16251a 64%, #101b14);
  background-size: auto, 100% 100%, 100% 100%, 16px 16px, auto;
}
.landing-copy h1 { color: #fbfdf7; text-wrap: balance; }
.landing-copy h1 em { color: var(--lime); }
.landing-copy > p { color: #bfcebf; }
.landing-hero .eyebrow {
  border: 1px solid rgba(232, 255, 227, .25);
  background: rgba(255, 255, 255, .065);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #e8f4e6;
}
.landing-hero .spark { color: var(--lime); }
.landing-primary {
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 12px;
  background: var(--lime);
  color: var(--night);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .37), inset 0 1px 1px rgba(255, 255, 255, .55);
}
.landing-primary:hover { background: #e7ff94; }
.landing-secondary { color: #f1f8eb; }
.landing-secondary:hover { color: var(--lime); }
.landing-tags span {
  border-color: rgba(232, 255, 227, .22);
  background: rgba(255, 255, 255, .055);
  color: #d3e2d0;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .13);
  backdrop-filter: blur(8px);
}

.landing-topbar {
  background: #0e1711;
  border-color: rgba(232, 255, 227, .15);
}
.landing-topbar .landing-brand, .landing-nav a { color: #f2f8ee; }
.landing-topbar .landing-brand span { background: var(--lime); color: var(--night); }
.landing-topbar .language-control {
  background: rgba(255, 255, 255, .075);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 10px;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .2);
}
.landing-topbar .language-control .language-select { background: transparent; color: var(--lime); }
.landing-topbar .landing-login {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .27);
  border-radius: 10px;
  color: #fff;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .18);
}
.landing-topbar .landing-login:hover { background: rgba(221, 255, 104, .16); }

.preview-list {
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 20px;
  background:
    linear-gradient(150deg, rgba(30, 49, 36, .9), rgba(15, 29, 21, .85)) padding-box,
    linear-gradient(130deg, rgba(255, 255, 255, .76), rgba(221, 255, 104, .22) 42%, rgba(255, 255, 255, .16)) border-box;
  color: #f6fbf3;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .42), inset 0 1px 1px rgba(255, 255, 255, .24);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.preview-list-heading {
  background: rgba(221, 255, 104, .14);
  border-color: rgba(255, 255, 255, .17);
}
.preview-list-heading > span { color: var(--lime); }
.preview-list-heading small { color: #d3e6c6; }
.preview-list-row { border-color: rgba(255, 255, 255, .13); }
.preview-list-row > span, .preview-list-row small { color: #bdcdbc; }
.preview-list-row i { color: var(--lime); }
.preview-list-row:hover { background: rgba(255, 255, 255, .055); }

.landing-how, .inside-section, .login-section {
  background-image: radial-gradient(circle, rgba(53, 86, 59, .09) .7px, transparent 1px);
  background-size: 16px 16px;
}
.steps-grid article, .device-list > div {
  background: rgba(255, 255, 255, .6);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.device-list > div:first-child { background: #e9f7cc; box-shadow: 0 14px 32px rgba(31, 53, 32, .15), inset 0 1px 1px #fff; }
.public-home .auth-card {
  border: 1px solid transparent;
  border-radius: 20px;
  background:
    linear-gradient(rgba(255, 255, 255, .89), rgba(250, 252, 247, .84)) padding-box,
    linear-gradient(145deg, #fff, #bddbb7 55%, #fff) border-box;
  box-shadow: 0 20px 50px rgba(24, 48, 29, .18), inset 0 1px 1px #fff;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* The private library keeps its familiar list and controls. */
.topbar {
  background: rgba(14, 23, 17, .95);
  border-color: rgba(255, 255, 255, .15);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.topbar .wordmark, .topbar .desktop-nav button { color: #f5faf2; }
.topbar .desktop-nav button { font-size: 14px; font-weight: 800; }
.topbar .wordmark span { background: var(--lime); color: var(--night); }
.topbar .desktop-nav button.active { color: var(--lime); }
.topbar .language-control { border: 1px solid rgba(255, 255, 255, .22); border-radius: 10px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .18); }
.topbar .language-control .language-select { background: transparent; }
.topbar .account-button { border: 1px solid rgba(255, 255, 255, .6); border-radius: 10px; box-shadow: 0 9px 24px rgba(0, 0, 0, .24); }
.topbar .account-button .avatar { border-radius: 7px; }
.shell > main {
  background-image: radial-gradient(circle, rgba(53, 86, 59, .07) .7px, transparent 1px);
  background-size: 16px 16px;
}
.capture {
  padding: 25px;
  border: 1px solid transparent;
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(19, 32, 23, .95), rgba(15, 26, 19, .96)) padding-box,
    linear-gradient(120deg, rgba(255, 255, 255, .58), rgba(209, 255, 176, .12) 50%, rgba(255, 255, 255, .13)) border-box;
  box-shadow: 0 20px 50px rgba(14, 28, 18, .26), inset 0 1px 1px rgba(255, 255, 255, .22);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.capture > label { color: #f4f8ef; }
.capture-row {
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 12px;
  background: rgba(255, 255, 255, .09);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .18);
}
.capture .link-icon { color: var(--lime); }
.capture input { color: #fff; }
.capture input::placeholder { color: #aebfb0; opacity: 1; }
.capture .send { border: 0; border-radius: 8px; color: var(--night); }
.capture-actions .text-btn { color: #f3f8ed; }
.capture .capture-hint { color: #b7c8b6; }
.capture .demo-link { color: var(--lime); }
.capture .ai-availability { background: rgba(221, 255, 104, .1); color: #dcf2c1; border-color: rgba(221, 255, 104, .2); border-radius: 8px; }
.trial-status { margin: 8px 0 0; color: #4b6547; font-size: 12px; font-weight: 800; }
.capture .trial-status { color: var(--lime); }
.filters button { background: rgba(255, 255, 255, .66); box-shadow: inset 0 1px 1px #fff; }
.filters button.active { background: var(--night); border-color: var(--night); color: var(--lime); box-shadow: 0 10px 20px rgba(20, 40, 25, .16); }
.saved-list, .library-list { border-color: #9db39e; }
.saved-row { border-color: var(--line); background: rgba(255, 255, 255, .43); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.saved-row:hover { background: rgba(248, 255, 239, .95); box-shadow: inset 0 1px 1px #fff, 0 12px 26px rgba(22, 44, 25, .11); }
.saved-row-status { background: rgba(255, 255, 255, .65); }
.saved-row:focus-visible { outline-offset: -3px; }
.bottom-nav { background: rgba(15, 25, 18, .95); border-color: rgba(255, 255, 255, .16); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.bottom-nav button { color: #c1d1c1; }
.bottom-nav .active, .bottom-nav .account-nav, .bottom-nav .account-nav span { color: var(--lime); }
.bottom-nav .add-mobile { background: var(--lime); color: var(--night); box-shadow: 0 10px 25px rgba(0, 0, 0, .3); }

.sheet {
  border: 1px solid transparent;
  border-radius: 20px;
  background:
    linear-gradient(rgba(255, 255, 255, .95), rgba(248, 251, 246, .94)) padding-box,
    linear-gradient(145deg, #fff, #bdd9b9 55%, #fff) border-box;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .32), inset 0 1px 1px #fff;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.sheet::backdrop { background: rgba(9, 17, 11, .65); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.edit-form input, .edit-form select, .edit-form textarea { border-radius: 9px; background: rgba(255, 255, 255, .8); }
.done-toggle { border-color: #b7c9b6; border-radius: 10px; background: rgba(255, 255, 255, .5); }
.done-toggle[aria-pressed=true] { background: #e9f7cc; }
.done-check { border-radius: 5px; }
.primary { border-radius: 10px; box-shadow: 0 14px 30px rgba(17, 35, 22, .16); }
.account-sheet .profile-title { margin: 18px 0 12px; font-size: clamp(22px, 3vw, 30px); line-height: 1.35; }
.account-sheet .profile-username {
  display: table !important;
  max-width: 100%;
  margin: 12px 0 0;
  padding: 11px 15px;
  border: 1px solid #9fbe63;
  border-radius: 11px;
  background: var(--lime);
  color: var(--night) !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .8), 0 9px 21px rgba(52, 81, 32, .13);
  font: 700 clamp(17px, 3vw, 23px)/1.35 Unbounded;
  overflow-wrap: anywhere;
}
.account-sheet #profileStorageCopy { margin: 4px 0 20px; font-size: 13px; }
.account-sheet .email-panel { margin: 22px 0 0; padding: 20px 0; }
.email-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.email-panel-head b { font-size: 13px; }
.email-panel-head .text-btn { margin: 0; padding: 5px 0; color: #3e6436; font-size: 12px; white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }
.account-sheet #profileEmailStatus { overflow-wrap: anywhere; }
.account-sheet #cancelEmailChange { justify-self: center; margin: -3px 0 0; padding: 8px 12px; }
.account-sheet .logout-button {
  width: 100%;
  margin-top: 26px;
  padding: 14px;
  border: 1px solid #e3c0bc;
  border-radius: 10px;
  background: #fff5f3;
  color: #a8322c;
  font: 800 13px Manrope;
  text-align: center;
  cursor: pointer;
}
.account-sheet .logout-button:hover { background: #fdeae7; border-color: #c9665c; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .landing-primary, .landing-login, .language-control, .account-button, .filters button, .saved-row, .steps-grid article, .device-list > div, .primary, .send {
    transition: transform .3s ease-out, border-color .3s ease-out, background-color .3s ease-out, box-shadow .3s ease-out;
  }
  .landing-primary:hover, .primary:hover, .filters button:hover, .steps-grid article:hover, .device-list > div:hover { transform: translateY(-2px) scale(1.02); }
  .saved-row:hover { transform: scale(1.005); border-color: #a4c399; }
  .landing-login:hover, .account-button:hover, .language-control:hover, .send:hover { transform: scale(1.02); border-color: rgba(255, 255, 255, .5); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
@media (max-width: 620px) {
  .landing-hero { background-position: center, center, center, center, center; }
  .landing-copy h1 { font-size: clamp(36px, 9.5vw, 48px); }
  .landing-primary { width: 100%; }
  .preview-list { border-radius: 16px; }
  .capture { padding: 18px; border-radius: 16px; }
  .capture-row { padding-left: 12px; }
  .capture input { font-size: 13px; }
  .capture .send { flex: none; }
  .topbar .wordmark { display: inline-flex; align-items: center; gap: 4px; flex: none; white-space: nowrap; font-size: 14px !important; letter-spacing: -.6px; }
  .topbar .wordmark span { padding: 5px 5px !important; }
  .topbar .language-control { padding: 0 7px; }
  .topbar .language-control > span { display: none; }
  .public-home .auth-card, .sheet { border-radius: 16px; }
  .bottom-nav .add-mobile { color: var(--night); }
}