@dytsou/shorten-url 2.4.3 → 2.4.5

package/frontend/src/styles/app.css

@@ -0,0 +1,2253 @@
+:root {
+  color: #202a25;
+  background: #f3f5f4;
+  color-scheme: light;
+  font-family:
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    sans-serif;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  --ink: #202a25;
+  --ink-soft: #3d4b43;
+  --surface: #fff;
+  --paper: #f3f5f4;
+  --paper-deep: #e8ece9;
+  --atlas-red: #13845f;
+  --atlas-red-dark: #116b4d;
+  --atlas-blue: #13845f;
+  --atlas-blue-deep: #116b4d;
+  --atlas-sage: #557a63;
+  --atlas-wash: #e8f3ed;
+  --muted: #68756e;
+  --muted-light: #859189;
+  --line: #d5ddd8;
+  --line-soft: #e4e9e6;
+  --shadow: rgba(24, 48, 71, 0.04);
+  --mono-size: 0.74rem;
+  --display-font: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  min-width: 320px;
+  background: var(--paper);
+}
+
+body {
+  min-width: 320px;
+  min-height: 100vh;
+  margin: 0;
+  overflow-x: hidden;
+  background: var(--paper);
+}
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+}
+
+button,
+a {
+  -webkit-tap-highlight-color: transparent;
+}
+
+a {
+  color: inherit;
+}
+
+button {
+  cursor: pointer;
+}
+
+button:disabled,
+fieldset:disabled button,
+fieldset:disabled input,
+fieldset:disabled select,
+fieldset:disabled textarea {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+button:focus-visible,
+a:focus-visible,
+input:focus-visible,
+select:focus-visible,
+textarea:focus-visible {
+  outline: 2px solid rgba(19, 132, 95, 0.55);
+  outline-offset: 2px;
+}
+
+.app-shell {
+  position: relative;
+  z-index: 1;
+  width: min(1240px, calc(100% - 40px));
+  min-height: 100vh;
+  margin: 0 auto;
+}
+
+.topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 94px;
+  border-bottom: 1px solid var(--line);
+}
+
+.brand {
+  display: inline-flex;
+  gap: 0.75rem;
+  align-items: center;
+  color: var(--ink);
+  font-family: var(--display-font);
+  font-size: 1.32rem;
+  font-weight: 700;
+  letter-spacing: -0.045em;
+  text-decoration: none;
+}
+
+.brand__mark {
+  display: grid;
+  width: 34px;
+  height: 34px;
+  border: 4px solid var(--surface);
+  border-radius: 50%;
+  color: var(--surface);
+  background: var(--atlas-blue-deep);
+  box-shadow:
+    0 0 0 1px var(--atlas-blue-deep),
+    0 0 0 6px rgba(53, 101, 140, 0.12);
+  place-items: center;
+  font-family: var(--display-font);
+  font-size: 1.15rem;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.topbar__meta {
+  display: flex;
+  gap: 1.25rem;
+  align-items: center;
+  color: var(--muted);
+  font-size: 0.63rem;
+  letter-spacing: 0.1em;
+}
+
+.online-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--atlas-sage);
+  box-shadow: 0 0 0 5px rgba(127, 154, 134, 0.15);
+}
+
+.topbar__tabs {
+  display: flex;
+  gap: 0.35rem;
+  align-self: stretch;
+}
+
+.topbar__tab {
+  position: relative;
+  min-height: 94px;
+  padding: 0.65rem 0.55rem;
+  border: 0;
+  color: var(--muted);
+  background: transparent;
+  font-size: 0.66rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  transition:
+    color 180ms ease,
+    background 180ms ease;
+}
+
+.topbar__tab::after {
+  position: absolute;
+  right: 0.55rem;
+  bottom: 0;
+  left: 0.55rem;
+  height: 3px;
+  background: transparent;
+  content: "";
+  transform: scaleX(0.35);
+  transform-origin: center;
+  transition:
+    background 180ms ease,
+    transform 180ms ease;
+}
+
+.topbar__tab:hover {
+  color: var(--atlas-red);
+  background: rgba(201, 81, 66, 0.045);
+}
+
+.topbar__tab[aria-selected="true"] {
+  color: var(--atlas-red-dark);
+}
+
+.topbar__tab[aria-selected="true"]::after {
+  background: var(--atlas-red);
+  transform: scaleX(1);
+}
+
+.main-content {
+  padding: 82px 0 62px;
+}
+
+.hero-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1.12fr) minmax(360px, 0.88fr);
+  gap: clamp(54px, 8vw, 116px);
+  align-items: end;
+}
+
+.eyebrow {
+  margin: 0 0 1.1rem;
+  color: var(--atlas-blue);
+  font-size: var(--mono-size);
+  font-weight: 700;
+  letter-spacing: 0.14em;
+  line-height: 1.4;
+}
+
+.hero-copy h1,
+.settings-heading h1 {
+  max-width: 700px;
+  margin: 0;
+  color: var(--ink);
+  font-family: var(--display-font);
+  font-size: clamp(3.65rem, 7vw, 7rem);
+  font-weight: 500;
+  letter-spacing: -0.075em;
+  line-height: 0.88;
+}
+
+.hero-copy h1 em,
+.settings-heading h1 em {
+  color: var(--atlas-red);
+  font-style: italic;
+}
+
+.hero-copy__lede {
+  max-width: 520px;
+  margin: 2rem 0 0;
+  color: var(--ink-soft);
+  font-family: var(--display-font);
+  font-size: 1.1rem;
+  line-height: 1.55;
+}
+
+.hero-notes {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.8rem 1.7rem;
+  margin-top: 3rem;
+  padding-top: 1.1rem;
+  border-top: 1px solid var(--line);
+  color: var(--muted);
+  font-size: 0.65rem;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
+.hero-notes strong {
+  margin-right: 0.35rem;
+  color: var(--atlas-blue-deep);
+}
+
+.shorten-card,
+.panel {
+  position: relative;
+  border: 1px solid var(--line);
+  border-radius: 14px;
+  background: rgba(255, 253, 248, 0.9);
+  box-shadow: 0 18px 42px var(--shadow);
+}
+
+.shorten-card {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 1rem;
+  padding: 18px;
+  border: 1px solid var(--line);
+  border-radius: 4px;
+  background: var(--surface);
+  box-shadow: none;
+}
+
+.card-topline,
+.panel-heading,
+.editor-section-heading {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.card-topline {
+  margin-bottom: 2.3rem;
+  color: var(--ink);
+  font-size: var(--mono-size);
+  font-weight: 700;
+  letter-spacing: 0.12em;
+}
+
+.field-group {
+  display: grid;
+  gap: 0.55rem;
+  margin-bottom: 1.3rem;
+}
+
+.field-group label {
+  color: var(--ink-soft);
+  font-size: 0.69rem;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
+.label-note {
+  color: var(--muted-light);
+  font-size: 0.63rem;
+  font-weight: 400;
+  letter-spacing: 0;
+  text-transform: lowercase;
+}
+
+input,
+select,
+textarea {
+  width: 100%;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  color: var(--ink);
+  background: rgba(255, 255, 255, 0.62);
+  outline: none;
+  transition:
+    border-color 180ms ease,
+    background 180ms ease,
+    box-shadow 180ms ease;
+}
+
+input,
+select {
+  min-height: 48px;
+  padding: 0 0.9rem;
+}
+
+textarea {
+  min-height: 82px;
+  padding: 0.85rem 0.9rem;
+  resize: vertical;
+}
+
+input::placeholder,
+textarea::placeholder {
+  color: var(--muted-light);
+}
+
+input:hover,
+select:hover,
+textarea:hover,
+input:focus,
+select:focus,
+textarea:focus {
+  border-color: var(--atlas-red);
+  background: var(--surface);
+  box-shadow: 0 0 0 4px rgba(201, 81, 66, 0.08);
+}
+
+select {
+  appearance: none;
+  background-image:
+    linear-gradient(45deg, transparent 50%, var(--atlas-red) 50%),
+    linear-gradient(135deg, var(--atlas-red) 50%, transparent 50%);
+  background-position:
+    calc(100% - 18px) 21px,
+    calc(100% - 13px) 21px;
+  background-repeat: no-repeat;
+  background-size:
+    5px 5px,
+    5px 5px;
+}
+
+option {
+  color: var(--ink);
+  background: var(--surface);
+}
+
+.slug-input {
+  display: grid;
+  align-items: center;
+  overflow: hidden;
+  border: 1px solid var(--line);
+  border-radius: 4px;
+  background: #fff;
+  transition:
+    border-color 180ms ease,
+    box-shadow 180ms ease;
+}
+
+.slug-input:focus-within {
+  border-color: #13845f;
+  box-shadow: 0 0 0 2px rgba(19, 132, 95, 0.12);
+}
+
+.slug-input > .slug-prefix {
+  min-width: 0;
+  padding: 0.4rem 0.65rem;
+  border-bottom: 1px solid var(--line);
+  color: var(--muted);
+  background: #f7f9f8;
+  font-size: 0.76rem;
+  font-weight: 400;
+  overflow-wrap: anywhere;
+}
+
+.slug-input input {
+  border: 0;
+  border-radius: 0;
+  background: #fff;
+  box-shadow: none;
+}
+
+.button {
+  display: inline-flex;
+  min-height: 44px;
+  gap: 0.75rem;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid transparent;
+  border-radius: 7px;
+  padding: 0.7rem 1rem;
+  font-size: 0.69rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-decoration: none;
+  text-transform: uppercase;
+  transition:
+    transform 180ms ease,
+    color 180ms ease,
+    background 180ms ease,
+    border-color 180ms ease,
+    box-shadow 180ms ease;
+}
+
+.button:not(:disabled):hover {
+  transform: translateY(-2px);
+}
+
+.button--wide {
+  width: 100%;
+}
+
+.button--primary {
+  color: var(--surface);
+  background: var(--atlas-red);
+  box-shadow: 0 6px 12px rgba(201, 81, 66, 0.17);
+}
+
+.button--primary:not(:disabled):hover {
+  background: var(--atlas-red-dark);
+  box-shadow: 0 8px 16px rgba(201, 81, 66, 0.22);
+}
+
+.button--dark {
+  color: var(--surface);
+  background: var(--ink);
+  border-color: var(--ink);
+}
+
+.button--dark:not(:disabled):hover {
+  background: var(--atlas-blue-deep);
+  border-color: var(--atlas-blue-deep);
+}
+
+.button--quiet {
+  color: var(--ink-soft);
+  background: transparent;
+  border-color: var(--line);
+}
+
+.button--quiet:not(:disabled):hover,
+.button--small:not(:disabled):hover {
+  color: var(--atlas-red-dark);
+  border-color: var(--atlas-red);
+  background: rgba(201, 81, 66, 0.045);
+}
+
+.button--small {
+  min-height: 36px;
+  padding: 0.5rem 0.7rem;
+  color: var(--atlas-blue-deep);
+  background: var(--atlas-wash);
+  border-color: rgba(53, 101, 140, 0.28);
+  font-size: 0.63rem;
+}
+
+.form-footnote,
+.helper-text,
+.status {
+  color: var(--muted);
+  font-size: 0.66rem;
+  line-height: 1.5;
+}
+
+.form-footnote {
+  margin: 1rem 0 0;
+}
+
+code {
+  color: var(--atlas-blue-deep);
+  font-family: inherit;
+}
+
+.status {
+  margin: 1rem 0 0;
+}
+
+.status--error {
+  color: var(--atlas-red-dark);
+}
+
+.status--success {
+  color: var(--atlas-sage);
+}
+
+.result-card {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-top: 0;
+  padding: 16px 18px;
+  border: 1px solid var(--line);
+  border-left: 1px solid var(--line);
+  border-radius: 4px;
+  color: var(--ink);
+  background: var(--surface);
+  box-shadow: none;
+}
+
+.result-card .eyebrow {
+  margin: 0 0 0.35rem;
+  color: var(--muted);
+  font-size: 0.7rem;
+}
+
+.result-url {
+  display: inline-block;
+  max-width: min(560px, 65vw);
+  overflow: hidden;
+  color: #116b4d;
+  font-family: inherit;
+  font-size: 0.95rem;
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.result-actions {
+  display: flex;
+  flex-shrink: 0;
+  gap: 0.45rem;
+}
+
+.result-card .button--quiet {
+  color: var(--ink-soft);
+  border-color: var(--line);
+}
+
+.process-strip {
+  display: grid;
+  grid-template-columns: 1.35fr repeat(3, 1fr);
+  margin-top: 78px;
+  border-top: 1px solid var(--line);
+  border-bottom: 1px solid var(--line);
+}
+
+.process-strip > * {
+  min-height: 148px;
+  padding: 24px;
+  border-right: 1px solid var(--line);
+}
+
+.process-strip > *:last-child {
+  border-right: 0;
+}
+
+.process-strip__intro {
+  background: rgba(255, 253, 248, 0.44);
+}
+
+.process-strip__intro p:last-child {
+  max-width: 250px;
+  margin: 0;
+  color: var(--ink-soft);
+  font-family: var(--display-font);
+  font-size: 0.96rem;
+  line-height: 1.45;
+}
+
+.process-step {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.process-step span {
+  margin-bottom: auto;
+  color: var(--atlas-blue);
+  font-size: 0.68rem;
+}
+
+.process-step strong {
+  color: var(--ink);
+  font-family: var(--display-font);
+  font-size: 1.3rem;
+  font-weight: 500;
+}
+
+.process-step p {
+  margin: 0.5rem 0 0;
+  color: var(--muted);
+  font-size: 0.65rem;
+  line-height: 1.4;
+}
+
+.footer {
+  display: flex;
+  justify-content: space-between;
+  padding: 22px 0 28px;
+  color: var(--muted-light);
+  font-size: 0.6rem;
+  letter-spacing: 0.08em;
+}
+
+.settings-heading {
+  display: flex;
+  align-items: end;
+  justify-content: space-between;
+  gap: 3rem;
+  margin-bottom: 64px;
+}
+
+.settings-heading h1 {
+  font-size: clamp(3.5rem, 6.8vw, 6.7rem);
+}
+
+.settings-status-card {
+  min-width: 222px;
+  padding: 20px;
+  border: 1px solid var(--line);
+  border-left: 3px solid var(--atlas-red);
+  border-radius: 10px;
+  background: rgba(255, 253, 248, 0.65);
+}
+
+.settings-status-card p,
+.settings-status-card small {
+  display: block;
+  margin: 0.9rem 0 0.35rem;
+  color: var(--muted);
+  font-size: 0.63rem;
+}
+
+.settings-status-card code {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.state-badge {
+  display: inline-block;
+  padding: 0.35rem 0.5rem;
+  border-radius: 999px;
+  color: var(--atlas-blue-deep);
+  background: var(--atlas-wash);
+  font-size: 0.6rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+}
+
+.state-badge--loading {
+  color: #765f2e;
+  background: #f3e5bd;
+}
+
+.state-badge--error {
+  color: var(--surface);
+  background: var(--atlas-red);
+}
+
+.settings-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 28px;
+  align-items: start;
+}
+
+.panel {
+  padding: clamp(24px, 4vw, 38px);
+}
+
+.panel-heading {
+  align-items: center;
+  margin-bottom: 2.5rem;
+  padding-bottom: 1.5rem;
+  border-bottom: 1px solid var(--line);
+}
+
+.panel-heading .eyebrow {
+  margin-bottom: 0.55rem;
+}
+
+.panel-heading h2 {
+  margin: 0;
+  color: var(--ink);
+  font-family: var(--display-font);
+  font-size: 1.9rem;
+  font-weight: 500;
+  letter-spacing: -0.04em;
+}
+
+.panel-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.45rem;
+  justify-content: flex-end;
+}
+
+.editor-fields {
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+.toggle-row {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  justify-content: space-between;
+  margin: 1.7rem 0 2.6rem;
+  padding: 1rem;
+  border: 1px solid var(--line-soft);
+  border-radius: 9px;
+  background: rgba(228, 235, 229, 0.42);
+}
+
+.toggle-row > span:first-child {
+  display: grid;
+  gap: 0.35rem;
+}
+
+.toggle-row strong {
+  color: var(--ink);
+  font-size: 0.73rem;
+}
+
+.toggle-row small {
+  color: var(--muted);
+  font-size: 0.64rem;
+}
+
+.toggle-row input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+}
+
+.toggle-control {
+  position: relative;
+  display: block;
+  width: 44px;
+  height: 24px;
+  flex-shrink: 0;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  background: var(--paper-deep);
+  transition:
+    background 180ms ease,
+    border-color 180ms ease;
+}
+
+.toggle-control::after {
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  content: "";
+  background: var(--muted-light);
+  transition:
+    transform 180ms ease,
+    background 180ms ease;
+}
+
+.toggle-row input:checked + .toggle-control {
+  border-color: var(--atlas-sage);
+  background: rgba(127, 154, 134, 0.28);
+}
+
+.toggle-row input:checked + .toggle-control::after {
+  background: var(--atlas-sage);
+  transform: translateX(20px);
+}
+
+.editor-section-heading {
+  align-items: end;
+  margin: 2.2rem 0 1rem;
+}
+
+.editor-section-heading .eyebrow {
+  margin-bottom: 0.35rem;
+}
+
+.helper-text {
+  margin: 0;
+}
+
+.repeat-list {
+  display: grid;
+  gap: 0.7rem;
+}
+
+.repeat-row {
+  display: grid;
+  grid-template-columns: minmax(110px, 0.3fr) minmax(0, 1fr) 32px;
+  gap: 0.7rem;
+  align-items: end;
+  padding: 0.9rem;
+  border: 1px solid var(--line-soft);
+  border-radius: 10px;
+  background: rgba(244, 238, 226, 0.55);
+}
+
+.repeat-row .field-group {
+  margin: 0;
+}
+
+.repeat-row .field-group label {
+  color: var(--muted);
+  font-size: 0.6rem;
+}
+
+.field-group--wide {
+  min-width: 0;
+}
+
+.icon-button {
+  display: grid;
+  width: 32px;
+  height: 48px;
+  border: 1px solid rgba(201, 81, 66, 0.4);
+  border-radius: 7px;
+  color: var(--atlas-red-dark);
+  background: transparent;
+  place-items: center;
+  font-size: 1.2rem;
+  transition:
+    background 180ms ease,
+    border-color 180ms ease;
+}
+
+.icon-button:not(:disabled):hover {
+  border-color: var(--atlas-red);
+  background: rgba(201, 81, 66, 0.08);
+}
+
+.repeat-list--rules {
+  gap: 0.5rem;
+}
+
+.repeat-row--rule {
+  grid-template-columns:
+    minmax(70px, 0.18fr) minmax(100px, 0.3fr) minmax(0, 1fr) minmax(100px, 0.2fr)
+    32px;
+}
+
+.field-group--rollout {
+  min-width: 100px;
+}
+
+.empty-state {
+  padding: 1rem;
+  border: 1px dashed rgba(53, 101, 140, 0.35);
+  border-radius: 9px;
+  color: var(--muted);
+  background: rgba(228, 235, 229, 0.35);
+  font-size: 0.68rem;
+  line-height: 1.5;
+}
+
+@media (max-width: 900px) {
+  .hero-grid,
+  .settings-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .settings-status-card {
+    min-width: 180px;
+  }
+
+  .process-strip {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .process-strip__intro {
+    grid-column: 1 / -1;
+    min-height: auto;
+    border-right: 0;
+    border-bottom: 1px solid var(--line);
+  }
+}
+
+@media (max-width: 620px) {
+  .app-shell {
+    width: min(100% - 28px, 1240px);
+  }
+
+  .topbar {
+    min-height: 72px;
+  }
+
+  .topbar__meta > span:not(.online-dot) {
+    display: none;
+  }
+
+  .topbar__meta {
+    gap: 0.75rem;
+  }
+
+  .topbar__tab {
+    min-height: 72px;
+    padding-inline: 0.55rem;
+    font-size: 0.59rem;
+  }
+
+  .topbar__tab::after {
+    right: 0.55rem;
+    left: 0.55rem;
+  }
+
+  .main-content {
+    padding-top: 48px;
+  }
+
+  .hero-copy h1,
+  .settings-heading h1 {
+    font-size: clamp(3.45rem, 18vw, 5.5rem);
+  }
+
+  .shorten-card,
+  .panel {
+    padding: 22px 18px;
+  }
+
+  .result-card,
+  .settings-heading {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .result-url {
+    max-width: 100%;
+  }
+
+  .result-actions {
+    width: 100%;
+  }
+
+  .result-actions .button {
+    flex: 1;
+  }
+
+  .settings-heading {
+    gap: 2rem;
+    margin-bottom: 42px;
+  }
+
+  .settings-status-card {
+    width: 100%;
+  }
+
+  .panel-heading {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .panel-actions {
+    width: 100%;
+    justify-content: stretch;
+  }
+
+  .panel-actions .button {
+    flex: 1;
+  }
+
+  .repeat-row,
+  .repeat-row--rule {
+    grid-template-columns: 1fr 1fr 32px;
+  }
+
+  .repeat-row .field-group--wide,
+  .repeat-row--rule .field-group--wide {
+    grid-column: 1 / -1;
+  }
+
+  .repeat-row--rule .field-group--rollout {
+    grid-column: 1 / -1;
+  }
+
+  .repeat-row--rule .icon-button {
+    grid-column: 3;
+    grid-row: 1;
+  }
+
+  .process-strip {
+    grid-template-columns: 1fr;
+  }
+
+  .process-strip__intro {
+    grid-column: auto;
+    border-bottom: 1px solid var(--line);
+  }
+
+  .process-strip > * {
+    min-height: auto;
+    border-right: 0;
+    border-bottom: 1px solid var(--line);
+  }
+
+  .process-strip > *:last-child {
+    border-bottom: 0;
+  }
+
+  .footer {
+    gap: 1rem;
+    flex-direction: column;
+  }
+}
+
+/* Flag management: compact, scan-first controls for one routing flag. */
+.main-content.main-content--settings {
+  --ink: #202a25;
+  --ink-soft: #3d4b43;
+  --surface: #fff;
+  --paper: #f3f5f4;
+  --atlas-blue: #13845f;
+  --atlas-blue-deep: #116b4d;
+  --atlas-wash: #e8f3ed;
+  --muted: #68756e;
+  --muted-light: #859189;
+  --line: #d5ddd8;
+  --line-soft: #e4e9e6;
+  --shadow: rgba(24, 48, 71, 0.04);
+  padding-top: 30px;
+  color: var(--ink);
+  font-family:
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    sans-serif;
+}
+
+.flag-manager {
+  display: grid;
+  gap: 0.8rem;
+  padding-bottom: 0;
+}
+
+.flag-breadcrumb {
+  display: flex;
+  gap: 0.6rem;
+  align-items: center;
+  color: var(--muted);
+  font-size: 0.78rem;
+}
+
+.flag-breadcrumb code {
+  font-weight: 700;
+}
+
+.flag-manager-header {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 1.5rem;
+  padding-bottom: 0.8rem;
+  border-bottom: 1px solid var(--line);
+}
+
+.flag-manager-title .eyebrow {
+  display: none;
+}
+
+.flag-manager-title h1 {
+  margin: 0;
+  color: var(--ink);
+  font-family: inherit;
+  font-size: clamp(1.45rem, 2.5vw, 1.8rem);
+  font-weight: 700;
+  letter-spacing: normal;
+  line-height: 1.15;
+  overflow-wrap: anywhere;
+}
+
+.flag-manager-title > p:last-child {
+  margin: 0.45rem 0 0;
+  color: var(--muted);
+  font-size: 0.88rem;
+  line-height: 1.5;
+}
+
+.flag-state-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.45rem;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.flag-state-chip,
+.count-chip {
+  display: inline-flex;
+  min-height: 28px;
+  align-items: center;
+  padding: 0.35rem 0.55rem;
+  border: 1px solid var(--line-soft);
+  border-radius: 4px;
+  color: var(--muted);
+  background: #f7f9f8;
+  font-size: 0.7rem;
+  font-weight: 700;
+  letter-spacing: 0.07em;
+  white-space: nowrap;
+}
+
+.flag-state-chip--enabled,
+.flag-state-chip--saved {
+  border-color: rgba(86, 125, 91, 0.25);
+  color: #456b4a;
+  background: #e8f3ed;
+}
+
+.flag-state-chip--disabled,
+.flag-state-chip--new {
+  color: var(--atlas-red-dark);
+  background: rgba(201, 81, 66, 0.08);
+}
+
+.flag-summary-strip {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  margin: 0;
+  overflow: hidden;
+  border: 1px solid var(--line);
+  border-radius: 4px;
+  background: var(--surface);
+}
+
+.flag-summary-strip > div {
+  min-width: 0;
+  padding: 0.8rem 1rem;
+}
+
+.flag-summary-strip > div + div {
+  border-inline-start: 1px solid var(--line-soft);
+}
+
+.flag-summary-strip dt {
+  margin-bottom: 0.35rem;
+  color: var(--muted-light);
+  font-size: 0.68rem;
+  font-weight: 700;
+  letter-spacing: 0.11em;
+}
+
+.flag-summary-strip dd {
+  min-width: 0;
+  margin: 0;
+  overflow: hidden;
+  color: var(--ink);
+  font-size: 0.82rem;
+  font-weight: 700;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.flag-section-nav {
+  display: flex;
+  gap: 0.25rem;
+  overflow-x: auto;
+  border-bottom: 1px solid var(--line);
+}
+
+.flag-section-nav a {
+  display: inline-flex;
+  min-height: 48px;
+  flex-shrink: 0;
+  gap: 0.45rem;
+  align-items: center;
+  padding-inline: 0.8rem;
+  border-bottom: 2px solid transparent;
+  color: var(--muted);
+  font-size: 0.9rem;
+  font-weight: 700;
+  text-decoration: none;
+}
+
+.flag-section-nav a:hover {
+  border-bottom-color: var(--atlas-blue);
+  color: var(--ink);
+}
+
+.flag-section-nav a span {
+  display: grid;
+  min-width: 24px;
+  min-height: 24px;
+  padding-inline: 0.3rem;
+  border-radius: 4px;
+  color: var(--atlas-blue-deep);
+  background: var(--atlas-wash);
+  font-size: 0.72rem;
+  place-items: center;
+}
+
+.flag-editor {
+  display: grid;
+  min-width: 0;
+  gap: 1rem;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 0.95rem;
+}
+
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.flag-section {
+  min-width: 0;
+  scroll-margin-top: 1rem;
+}
+
+.flag-section.panel {
+  padding: 18px;
+  border-radius: 4px;
+  background: var(--surface);
+  box-shadow: none;
+}
+
+.flag-section-heading {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-bottom: 0.85rem;
+}
+
+.flag-section-heading .eyebrow {
+  display: none;
+}
+
+.flag-section-heading h2 {
+  margin: 0;
+  color: var(--ink);
+  font-family: inherit;
+  font-size: 1.2rem;
+  font-weight: 650;
+  letter-spacing: normal;
+}
+
+.flag-section-heading .helper-text {
+  max-width: 70ch;
+  margin-top: 0.45rem;
+  font-size: 0.88rem;
+  line-height: 1.45;
+}
+
+.flag-section-note {
+  padding-top: 0.5rem;
+  color: var(--muted);
+  font-size: 0.78rem;
+}
+
+.flag-section-tools {
+  display: flex;
+  flex-shrink: 0;
+  gap: 0.55rem;
+  align-items: center;
+}
+
+.flag-section .field-group label {
+  color: var(--ink-soft);
+  font-size: 0.82rem;
+  font-weight: 700;
+}
+
+.flag-section input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
+.flag-section select,
+.flag-section textarea {
+  min-height: 48px;
+  border-radius: 4px;
+  background-color: var(--surface);
+  font-size: 0.95rem;
+}
+
+.flag-section input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):hover,
+.flag-section select:hover,
+.flag-section textarea:hover,
+.flag-section input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
+.flag-section select:focus,
+.flag-section textarea:focus {
+  border-color: var(--atlas-blue);
+  box-shadow: 0 0 0 2px rgba(19, 132, 95, 0.12);
+}
+
+.flag-section select {
+  appearance: auto;
+  background-image: none;
+}
+
+.flag-details-grid {
+  display: grid;
+  grid-template-columns: minmax(150px, 0.34fr) minmax(0, 1fr);
+  gap: 0 1rem;
+}
+
+.flag-key-field {
+  display: grid;
+  align-content: start;
+  gap: 0.55rem;
+  min-width: 0;
+}
+
+.flag-key-field > span {
+  color: var(--ink-soft);
+  font-size: 0.69rem;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
+.flag-key-field code {
+  min-height: 44px;
+  padding: 0.75rem 0.85rem;
+  border: 1px solid var(--line-soft);
+  border-radius: 4px;
+  background: #f7f9f8;
+  font-size: 0.8rem;
+}
+
+.flag-description-field {
+  margin: 0;
+}
+
+.flag-details-grid .toggle-row {
+  grid-column: 1 / -1;
+  margin: 0.9rem 0 0;
+}
+
+.toggle-row input:focus-visible + .toggle-control {
+  outline: 3px solid rgba(201, 81, 66, 0.38);
+  outline-offset: 3px;
+}
+
+.variation-list,
+.segment-list {
+  display: grid;
+  gap: 0.85rem;
+}
+
+.variation-row {
+  display: grid;
+  grid-template-columns: minmax(125px, 0.25fr) minmax(0, 1fr) auto 36px;
+  gap: 0.8rem;
+  align-items: end;
+  min-width: 0;
+  padding: 0.8rem;
+  border: 1px solid var(--line-soft);
+  border-radius: 4px;
+  background: var(--surface);
+}
+
+.variation-row .field-group {
+  min-width: 0;
+  margin: 0;
+}
+
+.variation-row .field-group label {
+  color: var(--muted);
+  font-size: 0.82rem;
+}
+
+.default-variation {
+  display: inline-flex;
+  min-height: 48px;
+  gap: 0.45rem;
+  align-items: center;
+  padding-inline: 0.4rem;
+  color: var(--muted);
+  font-size: 0.78rem;
+  font-weight: 700;
+  white-space: nowrap;
+}
+
+.default-variation input {
+  width: 1rem;
+  height: 1rem;
+  margin: 0;
+  accent-color: var(--atlas-blue);
+}
+
+.variation-row .icon-button {
+  width: 44px;
+  height: 48px;
+}
+
+.context-note {
+  display: flex;
+  gap: 0.7rem;
+  align-items: flex-start;
+  margin-bottom: 1rem;
+  padding: 0.85rem 1rem;
+  border: 1px solid var(--line);
+  border-left: 3px solid var(--atlas-blue);
+  border-radius: 4px;
+  color: var(--ink-soft);
+  background: #f7f9f8;
+}
+
+.context-note > span {
+  display: grid;
+  width: 1.35rem;
+  height: 1.35rem;
+  flex: 0 0 auto;
+  border: 0;
+  border-radius: 0;
+  font-family: inherit;
+  font-size: 0.9rem;
+  font-weight: 700;
+  place-items: center;
+}
+
+.context-note p {
+  margin: 0;
+  font-size: 0.85rem;
+  line-height: 1.5;
+}
+
+.segment-empty-state {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  padding: 1.15rem;
+  border: 1px dashed rgba(24, 48, 71, 0.25);
+  border-radius: 4px;
+  background: #fafbfa;
+}
+
+.segment-empty-state__step {
+  display: grid;
+  min-width: 74px;
+  min-height: 48px;
+  border-radius: 4px;
+  color: var(--atlas-blue-deep);
+  background: var(--atlas-wash);
+  font-size: 0.7rem;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  place-items: center;
+}
+
+.segment-empty-state strong {
+  color: var(--ink);
+  font-size: 0.95rem;
+}
+
+.segment-empty-state p {
+  margin: 0.25rem 0 0;
+  color: var(--muted);
+  font-size: 0.82rem;
+}
+
+.segment-card {
+  display: grid;
+  min-width: 0;
+  gap: 1rem;
+  padding: 14px;
+  border: 1px solid var(--line);
+  border-radius: 4px;
+  background: var(--surface);
+}
+
+.segment-card__header,
+.segment-card__identity,
+.segment-card__actions {
+  display: flex;
+  align-items: center;
+}
+
+.segment-card__header {
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.segment-card__identity {
+  min-width: 0;
+  gap: 0.8rem;
+}
+
+.segment-priority {
+  display: grid;
+  width: 1.8rem;
+  height: 1.8rem;
+  flex: 0 0 auto;
+  border-radius: 4px;
+  color: var(--atlas-blue-deep);
+  background: var(--atlas-wash);
+  font-size: 0.82rem;
+  font-weight: 800;
+  place-items: center;
+}
+
+.segment-card__identity h3 {
+  margin: 0;
+  color: var(--ink);
+  font-size: 1rem;
+}
+
+.segment-card__identity p {
+  margin: 0.2rem 0 0;
+  color: var(--muted);
+  font-size: 0.8rem;
+}
+
+.segment-card__actions {
+  gap: 0.35rem;
+}
+
+.segment-card__actions .icon-button {
+  width: 40px;
+  height: 40px;
+  border-color: var(--line-soft);
+  background: var(--surface);
+  font-size: 0.9rem;
+}
+
+.segment-card__actions .segment-remove-button {
+  margin-inline-start: 0.35rem;
+  color: var(--atlas-red-dark);
+}
+
+.segment-card__actions .icon-button:disabled {
+  opacity: 0.35;
+}
+
+.segment-stage {
+  min-width: 0;
+  margin: 0;
+  padding: 0.85rem;
+  border: 1px solid var(--line-soft);
+  border-radius: 4px;
+  background: var(--surface);
+}
+
+.segment-stage legend {
+  padding-inline: 0.4rem;
+  color: var(--ink);
+  font-size: 0.9rem;
+  font-weight: 650;
+}
+
+.segment-stage legend span {
+  margin-inline-end: 0.45rem;
+  color: var(--atlas-red-dark);
+  font-size: 0.68rem;
+  letter-spacing: 0.1em;
+}
+
+.segment-stage legend small {
+  margin-inline-start: 0.4rem;
+  color: var(--muted);
+  font-size: 0.72rem;
+  font-weight: 500;
+}
+
+.segment-all-visitors {
+  margin: 0 0 0.7rem;
+  color: var(--ink-soft);
+  font-size: 0.84rem;
+}
+
+.condition-list {
+  display: grid;
+  gap: 1.05rem;
+}
+
+.condition-row {
+  position: relative;
+  display: grid;
+  grid-template-columns: minmax(150px, 1.05fr) minmax(130px, 0.85fr) minmax(180px, 1.45fr) 44px;
+  gap: 0.75rem;
+  align-items: end;
+  min-width: 0;
+}
+
+.condition-row + .condition-row::before {
+  position: absolute;
+  top: -0.9rem;
+  left: 0.6rem;
+  padding-inline: 0.3rem;
+  color: var(--muted);
+  background: var(--surface);
+  content: "AND";
+  font-size: 0.64rem;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+}
+
+.condition-row .field-group {
+  min-width: 0;
+  margin: 0;
+}
+
+.condition-row .field-group label {
+  color: var(--muted);
+  font-size: 0.78rem;
+}
+
+.condition-row .field-group small {
+  display: block;
+  margin-top: 0.3rem;
+  color: var(--muted);
+  font-size: 0.74rem;
+  line-height: 1.4;
+}
+
+.condition-remove-button {
+  width: 44px;
+  height: 48px;
+  color: var(--atlas-red-dark);
+  border-radius: 4px;
+}
+
+.condition-add-button {
+  min-height: 44px;
+  margin-top: 0.75rem;
+  font-size: 0.82rem;
+}
+
+.segment-outcome-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1.2fr) minmax(240px, 0.8fr);
+  gap: 0.85rem;
+  align-items: stretch;
+}
+
+.rollout-toggle {
+  display: flex;
+  min-height: 44px;
+  gap: 0.65rem;
+  align-items: center;
+  color: var(--ink);
+  font-size: 0.86rem;
+  font-weight: 700;
+}
+
+.rollout-toggle input {
+  width: 1.15rem;
+  height: 1.15rem;
+  margin: 0;
+  accent-color: var(--atlas-blue);
+}
+
+.rollout-controls {
+  display: grid;
+  grid-template-columns: minmax(110px, 0.7fr) minmax(210px, 1.3fr);
+  gap: 0 1rem;
+  align-items: center;
+  padding-top: 0.55rem;
+}
+
+.rollout-slider {
+  width: 100%;
+  margin: 0;
+  accent-color: var(--atlas-blue);
+}
+
+.rollout-number-field {
+  min-width: 0;
+  margin: 0;
+}
+
+.rollout-number-input {
+  position: relative;
+}
+
+.rollout-number-input input {
+  padding-inline-end: 2rem;
+}
+
+.rollout-number-input span {
+  position: absolute;
+  top: 50%;
+  right: 0.8rem;
+  color: var(--muted);
+  transform: translateY(-50%);
+}
+
+.rollout-help {
+  grid-column: 1 / -1;
+  margin: 0.65rem 0 0;
+  color: var(--muted);
+  font-size: 0.76rem;
+  line-height: 1.5;
+}
+
+.segment-serve {
+  display: grid;
+  align-content: start;
+  gap: 0.6rem;
+}
+
+.segment-serve > label {
+  color: var(--ink-soft);
+  font-size: 0.8rem;
+  font-weight: 800;
+  letter-spacing: normal;
+}
+
+.segment-serve select {
+  align-self: start;
+}
+
+.rule-fallback {
+  display: flex;
+  gap: 0.7rem;
+  align-items: center;
+  margin-top: 0.85rem;
+  padding: 0.9rem 1rem;
+  border-left: 3px solid var(--atlas-blue);
+  border-radius: 0 4px 4px 0;
+  background: #f7f9f8;
+}
+
+.rule-fallback__marker {
+  color: var(--atlas-blue-deep);
+  font-size: 1rem;
+}
+
+.rule-fallback > div {
+  display: grid;
+  gap: 0.15rem;
+  flex-shrink: 0;
+}
+
+.rule-fallback > div span {
+  color: var(--muted);
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.rule-fallback > div strong {
+  color: var(--ink);
+  font-size: 0.9rem;
+}
+
+.rule-fallback p {
+  margin: 0 0 0 auto;
+  color: var(--muted);
+  font-size: 0.82rem;
+  text-align: end;
+}
+
+.flag-section .empty-state {
+  display: grid;
+  gap: 0.3rem;
+  padding: 1.2rem;
+  font-size: 0.82rem;
+}
+
+.flag-section .empty-state strong {
+  color: var(--ink);
+  font-size: 0.92rem;
+}
+
+.flag-section .empty-state span {
+  color: var(--muted);
+}
+
+.flag-action-bar {
+  position: static;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.65rem 0.8rem;
+  border: 1px solid var(--line);
+  border-radius: 4px;
+  background: rgba(255, 255, 255, 0.98);
+  box-shadow: none;
+}
+
+.flag-action-bar .status {
+  margin: 0;
+  font-size: 0.85rem;
+}
+
+.flag-manager .button {
+  border-radius: 4px;
+  font-family: inherit;
+  font-size: 0.88rem;
+  font-weight: 600;
+  letter-spacing: normal;
+}
+
+.flag-manager .button--dark,
+.flag-manager .button--primary {
+  color: #fff;
+  border-color: #117b57;
+  background: #13845f;
+}
+
+.flag-manager .button--dark:not(:disabled):hover,
+.flag-manager .button--primary:not(:disabled):hover {
+  background: #0e704f;
+}
+
+.flag-manager .button--quiet {
+  color: var(--ink-soft);
+  border-color: var(--line);
+  background: var(--surface);
+}
+
+.flag-manager .button:disabled {
+  color: var(--muted-light);
+  border-color: var(--line-soft);
+  background: #edf0ee;
+  opacity: 1;
+}
+
+.flag-manager .button--small {
+  min-height: 44px;
+  padding-inline: 0.8rem;
+  color: var(--atlas-blue-deep);
+  border-color: #bdd8ca;
+  background: var(--atlas-wash);
+}
+
+.flag-manager :focus-visible {
+  outline: 2px solid var(--atlas-blue);
+  outline-offset: 2px;
+}
+
+.flag-action-buttons {
+  display: flex;
+  flex-shrink: 0;
+  gap: 0.45rem;
+}
+
+@media (max-width: 900px) {
+  .flag-summary-strip {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .flag-summary-strip > div:nth-child(3) {
+    border-inline-start: 0;
+  }
+
+  .flag-summary-strip > div:nth-child(n + 3) {
+    border-top: 1px solid var(--line-soft);
+  }
+
+  .condition-row {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px;
+  }
+
+  .condition-value-field {
+    grid-column: 1 / 3;
+  }
+
+  .condition-remove-button {
+    grid-column: 3;
+    grid-row: 1;
+  }
+
+  .segment-outcome-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+@media (max-width: 620px) {
+  .main-content.main-content--settings {
+    padding-top: 36px;
+  }
+
+  .flag-manager-header {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 0.85rem;
+  }
+
+  .flag-state-list {
+    justify-content: flex-start;
+  }
+
+  .flag-summary-strip > div {
+    padding: 0.7rem;
+  }
+
+  .flag-summary-strip dd {
+    font-size: 0.61rem;
+  }
+
+  .flag-section-nav {
+    gap: 1rem;
+  }
+
+  .flag-section.panel {
+    padding: 18px;
+  }
+
+  .flag-section-heading {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .flag-section-tools {
+    width: 100%;
+    justify-content: space-between;
+  }
+
+  .flag-details-grid {
+    grid-template-columns: 1fr;
+    gap: 0.85rem;
+  }
+
+  .variation-row {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px;
+  }
+
+  .variation-key-field {
+    grid-column: 1 / 2;
+  }
+
+  .variation-url-field {
+    grid-column: 1 / -1;
+  }
+
+  .variation-row .default-variation {
+    grid-column: 2 / 3;
+  }
+
+  .variation-row .icon-button {
+    grid-column: 3;
+    grid-row: 1;
+  }
+
+  .segment-card {
+    padding: 14px;
+  }
+
+  .segment-card__header {
+    align-items: flex-start;
+  }
+
+  .segment-card__actions {
+    gap: 0.2rem;
+  }
+
+  .segment-card__actions .icon-button {
+    width: 38px;
+    height: 42px;
+  }
+
+  .condition-row {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px;
+    gap: 0.65rem;
+  }
+
+  .condition-value-field {
+    grid-column: 1 / 3;
+    grid-row: 2;
+  }
+
+  .condition-remove-button {
+    grid-column: 3;
+    grid-row: 1;
+  }
+
+  .rollout-controls {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 0.75rem;
+  }
+
+  .rule-fallback {
+    align-items: flex-start;
+    flex-wrap: wrap;
+  }
+
+  .rule-fallback p {
+    width: 100%;
+    margin: 0;
+    text-align: start;
+  }
+
+  .flag-action-bar {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .flag-action-buttons {
+    width: 100%;
+  }
+
+  .flag-action-buttons .button {
+    flex: 1;
+    padding-inline: 0.45rem;
+    min-height: 48px;
+  }
+}
+
+/* Shared layout for the short-link and flag pages. */
+.main-content,
+.main-content.main-content--settings {
+  padding: 28px 0 20px;
+}
+
+.shorten-page {
+  display: grid;
+  max-width: 600px;
+  gap: 1rem;
+  margin: 0 auto;
+}
+
+.page-heading {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.page-heading h1 {
+  margin: 0;
+  color: var(--ink);
+  font-family: inherit;
+  font-size: 1.55rem;
+  font-weight: 650;
+  letter-spacing: normal;
+  line-height: 1.25;
+}
+
+.page-heading p {
+  margin: 0.35rem 0 0;
+  color: var(--muted);
+  font-size: 0.9rem;
+  line-height: 1.45;
+}
+
+.page-link {
+  flex-shrink: 0;
+  padding-top: 0.3rem;
+  color: #116b4d;
+  font-size: 0.9rem;
+  font-weight: 600;
+  text-decoration: none;
+}
+
+.page-link:hover,
+.app-footer a:hover {
+  text-decoration: underline;
+}
+
+.shorten-page .field-group {
+  min-width: 0;
+  gap: 0.4rem;
+  margin: 0;
+}
+
+.shorten-page .field-group label {
+  color: var(--ink);
+  font-size: 0.86rem;
+  font-weight: 600;
+  letter-spacing: normal;
+  text-transform: none;
+}
+
+.shorten-page input {
+  min-height: 42px;
+  border: 1px solid var(--line);
+  border-radius: 4px;
+  color: var(--ink);
+  background: #fff;
+  box-shadow: none;
+}
+
+.shorten-page input:hover,
+.shorten-page input:focus {
+  border-color: #13845f;
+  background: #fff;
+  box-shadow: none;
+}
+
+.slug-input input:hover,
+.slug-input input:focus {
+  border: 0;
+  background: #fff;
+  box-shadow: none;
+}
+
+.field-help {
+  margin: 0;
+  color: var(--muted);
+  font-size: 0.78rem;
+  line-height: 1.45;
+}
+
+.shorten-form__actions {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.shorten-form__actions > .button {
+  align-self: flex-end;
+}
+
+.shorten-page .button {
+  min-height: 42px;
+  border-radius: 4px;
+  padding: 0.55rem 0.9rem;
+  font-family: inherit;
+  font-size: 0.9rem;
+  font-weight: 600;
+  letter-spacing: normal;
+  text-transform: none;
+  box-shadow: none;
+}
+
+.shorten-page .button:not(:disabled):hover {
+  transform: none;
+  box-shadow: none;
+}
+
+.shorten-page .button--wide {
+  width: auto;
+  min-width: 126px;
+}
+
+.shorten-page .button--primary {
+  color: #fff;
+  background: #13845f;
+}
+
+.shorten-page .button--primary:not(:disabled):hover {
+  background: #116b4d;
+}
+
+.shorten-page .status {
+  margin: 0;
+  font-size: 0.86rem;
+}
+
+.app-footer {
+  max-width: 600px;
+  margin: 22px auto 0;
+  padding: 22px 0 8px;
+  color: var(--muted);
+  text-align: center;
+}
+
+.app-footer nav {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 20px;
+  margin-bottom: 10px;
+}
+
+.app-footer a {
+  color: inherit;
+  font-size: 0.88rem;
+  text-decoration: none;
+}
+
+.app-footer p {
+  margin: 0;
+  font-size: 0.8rem;
+  line-height: 1.5;
+}
+
+.app-footer p a {
+  text-decoration: underline;
+}
+
+.main-content--settings .app-footer {
+  max-width: none;
+}
+
+@media (max-width: 620px) {
+  .app-shell {
+    width: min(100% - 28px, 600px);
+  }
+
+  .main-content,
+  .main-content.main-content--settings {
+    padding-top: 22px;
+  }
+
+  .page-heading {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 0.35rem;
+  }
+
+  .shorten-page .button--wide {
+    width: 100%;
+  }
+
+  .result-card {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .result-url {
+    max-width: calc(100vw - 64px);
+  }
+
+  .result-actions {
+    width: 100%;
+  }
+
+  .result-actions .button {
+    flex: 1;
+  }
+}