/* Pro Home tab tools (ui/salon-home-tools.js): the salon link bar and the
   website request studio. The Refinelook logo gradient (violet, periwinkle,
   mint) runs through borders, glows and the send button. */

.salon-home-inline-editor {
  --rl-grad-a: #a374fa;
  --rl-grad-b: #93a2f7;
  --rl-grad-c: #8ff7d2;
  --rl-grad: linear-gradient(120deg, var(--rl-grad-a), var(--rl-grad-b) 50%, var(--rl-grad-c));
  --rl-home-ink: #1f1d2b;
  --rl-home-muted: #6b6878;
  --rl-home-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

@property --rl-spin {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* ---------- Link bar ---------- */
.rl-home-link {
  position: relative;
  margin: 18px clamp(14px, 3vw, 40px) 0;
  border-radius: 20px;
  padding: 1.5px;
  background: var(--rl-grad);
  box-shadow: 0 18px 40px -30px rgb(101 72 208 / 0.55);
  animation: rl-home-rise 0.7s var(--rl-home-ease) both;
}
.rl-home-link > * { border-radius: 18.5px; }
.rl-home-link-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 12px 12px 16px;
  background: linear-gradient(90deg, #fbf9ff, #f7fbff 55%, #f3fdf8);
}
.rl-home-link.is-open .rl-home-link-row { border-radius: 18.5px 18.5px 0 0; }
.rl-home-link-icon { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 12px; background: var(--rl-grad); color: #fff; box-shadow: 0 8px 18px -10px rgb(101 72 208 / 0.8); }
.rl-home-link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rl-home-link-copy { display: grid; gap: 2px; min-width: 0; }
.rl-home-link-copy > span { font-size: 12px; font-weight: 600; color: var(--rl-home-muted); }
.rl-home-link-copy a { display: flex; align-items: baseline; min-width: 0; color: var(--rl-home-ink); text-decoration: none; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rl-home-link-copy a span { color: var(--rl-home-muted); }
.rl-home-link-copy a strong { font-weight: 750; background: var(--rl-grad); -webkit-background-clip: text; background-clip: text; color: transparent; filter: saturate(1.4) brightness(0.8); }
.rl-home-link-copy a:hover strong { text-decoration: underline; }
.rl-home-link-actions { display: flex; gap: 8px; margin-left: auto; }
.rl-home-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgb(31 29 43 / 0.1);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.9);
  color: var(--rl-home-ink);
  font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.25s var(--rl-home-ease), box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.rl-home-chip:hover { transform: translateY(-1px); border-color: transparent; box-shadow: 0 0 0 1.5px var(--rl-grad-b), 0 10px 20px -14px rgb(101 72 208 / 0.7); }
.rl-home-chip:active { transform: translateY(0) scale(0.97); }
.rl-home-chip[disabled], .rl-home-chip[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
.rl-home-chip.is-done { background: #ebfbf4; color: #1c6b52; }
.rl-home-chip.is-settings { background: var(--rl-home-ink); color: #fff; border-color: transparent; }
.rl-home-chip.is-settings svg { transition: transform 0.8s var(--rl-home-ease); }
.rl-home-chip.is-settings:hover svg, .rl-home-chip.is-settings[aria-expanded="true"] svg { transform: rotate(90deg); }

.rl-home-link-panel { background: #fff; overflow: hidden; }
.rl-home-link-panel:not([hidden]) { border-radius: 0 0 18.5px 18.5px; animation: rl-home-unfold 0.55s var(--rl-home-ease) both; }
.rl-home-link-panel-inner { display: grid; gap: 10px; padding: 18px 18px 18px; }
.rl-home-link-label { font-size: 15px; font-weight: 700; color: var(--rl-home-ink); }
.rl-home-link-help { margin: -4px 0 4px; font-size: 13px; color: var(--rl-home-muted); }
.rl-home-link-field {
  display: flex;
  align-items: center;
  min-height: 50px;
  padding: 0 4px 0 16px;
  border-radius: 14px;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(120deg, #dcd6ef, #dde6f5) border-box;
  border: 1.5px solid transparent;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.rl-home-link-field:focus-within { background: linear-gradient(#fff, #fff) padding-box, var(--rl-grad) border-box; box-shadow: 0 0 0 5px rgb(147 162 247 / 0.16); }
.rl-home-link-field span { color: var(--rl-home-muted); font-size: 15px; white-space: nowrap; }
.rl-home-link-field input { flex: 1; min-width: 0; height: 46px; border: 0; outline: 0; background: none; color: var(--rl-home-ink); font-family: inherit; font-size: 16px; font-weight: 700; line-height: 1; }
.rl-link-status { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 26px; margin: 0; font-size: 13.5px; animation: rl-home-fade 0.35s ease both; }
.rl-link-status svg { width: 18px; height: 18px; flex: none; padding: 2px; border-radius: 50%; stroke-width: 2.4; }
.rl-link-status.is-ok { color: #19684f; }
.rl-link-status.is-ok svg { background: #d8f7ea; animation: rl-home-pop 0.5s var(--rl-home-ease) both; }
.rl-link-status.is-bad { color: #9b2c3a; }
.rl-link-status.is-bad svg { background: #fde4e7; animation: rl-home-shake 0.4s ease both; }
.rl-link-status.is-idle, .rl-link-status.is-checking { color: var(--rl-home-muted); }
.rl-link-suggestion { padding: 5px 12px; border: 0; border-radius: 999px; background: var(--rl-grad); color: #fff; font-family: inherit; font-size: 12.5px; font-weight: 700; line-height: 1; cursor: pointer; transition: transform 0.2s ease, filter 0.2s ease; }
.rl-link-suggestion:hover { transform: translateY(-1px); filter: saturate(1.3); }
.rl-link-spinner { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgb(147 162 247 / 0.3); border-top-color: var(--rl-grad-a); animation: rl-home-spin 0.7s linear infinite; }
.rl-home-link-buttons { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.rl-home-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  font-family: inherit; font-size: 14px; font-weight: 700; line-height: 1;
  cursor: pointer;
  transition: transform 0.25s var(--rl-home-ease), box-shadow 0.3s ease, filter 0.3s ease, opacity 0.3s ease;
}
.rl-home-button.is-quiet { background: #f1f0f6; color: var(--rl-home-ink); }
.rl-home-button.is-primary { background: var(--rl-home-ink); color: #fff; }
.rl-home-button.is-primary:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 12px 24px -14px rgb(31 29 43 / 0.8); }
.rl-home-button:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---------- The salon page inside Home ----------
   It is the customer page, so it uses the customer's type (the Pro-wide
   Figtree rule in refinelook.css leaves this canvas alone). */
body.pro-mode .salon-home-editor-canvas {
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --pro-ui-font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-family: var(--font-sans);
}

/* ---------- Custom website preview ---------- */
.salon-home-custom-canvas { padding: 18px clamp(14px, 3vw, 40px) 0; }
.salon-home-custom-frame {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  padding: 1.5px;
  background: var(--rl-grad);
  box-shadow: 0 30px 60px -40px rgb(31 29 43 / 0.5);
}
.salon-home-custom-frame > .salon-home-custom-inner { position: relative; overflow: hidden; border-radius: 22.5px; background: #fff; }
.salon-home-custom-bar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: #faf9fd; border-bottom: 1px solid #ecebf3; font-size: 12.5px; color: var(--rl-home-muted); }
.salon-home-custom-bar i { width: 10px; height: 10px; border-radius: 50%; background: #e2dff0; }
.salon-home-custom-bar strong { margin-left: 8px; padding: 5px 12px; border-radius: 999px; background: #fff; border: 1px solid #ecebf3; color: var(--rl-home-ink); font-weight: 600; }
.salon-home-custom-bar em { margin-left: auto; font-style: normal; padding: 4px 10px; border-radius: 999px; background: var(--rl-grad); color: #fff; font-weight: 700; }

/* ---------- Request studio ---------- */
.rl-request-studio {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.8fr);
  gap: 22px 36px;
  margin: 28px clamp(14px, 3vw, 40px) 40px;
  padding: clamp(22px, 3vw, 38px);
  border-radius: 28px;
  border: 2px solid transparent;
  background:
    linear-gradient(135deg, #fdfcff, #f7f9ff 45%, #f4fdf9) padding-box,
    conic-gradient(from var(--rl-spin), var(--rl-grad-a), var(--rl-grad-b), var(--rl-grad-c), var(--rl-grad-b), var(--rl-grad-a)) border-box;
  animation: rl-home-rise 0.8s var(--rl-home-ease) 0.1s both, rl-home-orbit 8s linear infinite;
  overflow: hidden;
}
.rl-request-glow { position: absolute; inset: -40% -10% auto auto; z-index: -1; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgb(163 116 250 / 0.22), rgb(143 247 210 / 0.12) 45%, transparent 70%); filter: blur(10px); animation: rl-home-drift 14s ease-in-out infinite alternate; pointer-events: none; }
.rl-request-head { grid-column: 1 / -1; display: grid; gap: 10px; max-width: 720px; }
.rl-request-badge { display: inline-flex; align-items: center; gap: 7px; justify-self: start; padding: 7px 13px; border-radius: 999px; background: var(--rl-grad); color: #fff; font-size: 12.5px; font-weight: 750; letter-spacing: 0.02em; box-shadow: 0 10px 22px -14px rgb(101 72 208 / 0.9); }
.rl-request-badge svg, .rl-request-send svg, .rl-request-kind svg, .rl-request-sent-mark svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rl-request-badge svg { width: 15px; height: 15px; }
.rl-request-head h2 { margin: 4px 0 0; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.1; letter-spacing: -0.02em; color: var(--rl-home-ink); }
.rl-request-head p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--rl-home-muted); }
.rl-request-body { display: grid; gap: 14px; align-content: start; }
.rl-request-kinds { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.rl-request-kinds legend { margin-bottom: 10px; padding: 0; font-size: 14px; font-weight: 700; color: var(--rl-home-ink); }
.rl-request-kind {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 15px 0 11px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(120deg, #e3def3, #dfe7f6) border-box;
  color: var(--rl-home-ink);
  font-family: inherit; font-size: 13.5px; font-weight: 600; line-height: 1;
  cursor: pointer;
  animation: rl-home-rise 0.6s var(--rl-home-ease) both;
  animation-delay: calc(0.25s + var(--i, 0) * 0.05s);
  transition: transform 0.25s var(--rl-home-ease), background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.rl-request-kind:hover { transform: translateY(-2px); background: linear-gradient(#fff, #fff) padding-box, var(--rl-grad) border-box; }
.rl-request-kind.is-on { background: var(--rl-grad) padding-box, var(--rl-grad) border-box; color: #fff; box-shadow: 0 10px 22px -14px rgb(101 72 208 / 0.9); }
.rl-request-kind-tick { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #f1eef9; color: transparent; transition: background 0.3s ease, color 0.3s ease, transform 0.4s var(--rl-home-ease); }
.rl-request-kind-tick svg { width: 13px; height: 13px; stroke-width: 2.6; }
.rl-request-kind.is-on .rl-request-kind-tick { background: rgb(255 255 255 / 0.28); color: #fff; transform: rotate(360deg); }
.rl-request-label { margin-top: 6px; font-size: 14px; font-weight: 700; color: var(--rl-home-ink); }
.rl-request-field { position: relative; border-radius: 18px; padding: 1.5px; background: linear-gradient(120deg, #e3def3, #dfe7f6); transition: background 0.3s ease, box-shadow 0.3s ease; }
.rl-request-field:focus-within { background: var(--rl-grad); box-shadow: 0 0 0 6px rgb(147 162 247 / 0.14); }
.rl-request-field textarea { display: block; width: 100%; min-height: 150px; padding: 16px 18px 30px; border: 0; border-radius: 16.5px; outline: 0; resize: vertical; background: #fff; color: var(--rl-home-ink); font-family: inherit; font-size: 15px; font-weight: 400; line-height: 1.6; }
.rl-request-field textarea::placeholder { color: #9a97a8; }
.rl-request-count { position: absolute; right: 14px; bottom: 10px; font-size: 12px; color: #9a97a8; }
.rl-request-count.is-near { color: #b7472a; }
.rl-request-soon { display: inline-flex; align-items: center; gap: 10px; justify-self: start; font-size: 14px; font-weight: 600; color: var(--rl-home-ink); cursor: pointer; }
.rl-request-soon input { position: absolute; opacity: 0; pointer-events: none; }
.rl-request-switch { position: relative; width: 40px; height: 24px; border-radius: 999px; background: #e5e3ee; transition: background 0.3s ease; }
.rl-request-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgb(31 29 43 / 0.25); transition: transform 0.4s var(--rl-home-ease); }
.rl-request-soon input:checked + .rl-request-switch { background: var(--rl-grad); }
.rl-request-soon input:checked + .rl-request-switch::after { transform: translateX(16px); }
.rl-request-soon input:focus-visible + .rl-request-switch { outline: 2px solid var(--rl-grad-a); outline-offset: 2px; }
.rl-request-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 4px; }
.rl-request-send {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 0 8px 0 24px;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  background: linear-gradient(120deg, #7b52f0, #6c7ff0 50%, #3fcf9e);
  background-size: 200% 100%;
  color: #fff;
  font-family: inherit; font-size: 15px; font-weight: 750; line-height: 1;
  cursor: pointer;
  box-shadow: 0 16px 30px -16px rgb(101 72 208 / 0.9);
  transition: background-position 0.8s var(--rl-home-ease), transform 0.25s var(--rl-home-ease), box-shadow 0.3s ease, opacity 0.3s ease;
}
.rl-request-send::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / 0.45) 50%, transparent 70%); transform: translateX(-120%); }
.rl-request-send:not(:disabled):hover { background-position: 100% 0; transform: translateY(-2px); box-shadow: 0 22px 36px -18px rgb(101 72 208 / 0.95); }
.rl-request-send:not(:disabled):hover::before { transform: translateX(120%); transition: transform 0.9s ease; }
.rl-request-send:not(:disabled):active { transform: translateY(0) scale(0.98); }
.rl-request-send:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.rl-request-send-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgb(255 255 255 / 0.22); transition: transform 0.5s var(--rl-home-ease); }
.rl-request-send-icon svg { width: 18px; height: 18px; }
.rl-request-send:not(:disabled):hover .rl-request-send-icon { transform: translateX(3px) rotate(-12deg); }
.rl-request-send.is-sending { opacity: 1; }
.rl-request-send.is-sending .rl-link-spinner { border-color: rgb(255 255 255 / 0.35); border-top-color: #fff; }
.rl-request-note { margin: 0; font-size: 13px; color: var(--rl-home-muted); }

.rl-request-history { align-self: start; padding: 18px; border-radius: 20px; background: rgb(255 255 255 / 0.72); border: 1px solid rgb(31 29 43 / 0.06); backdrop-filter: blur(8px); }
.rl-request-history h3 { margin: 0 0 12px; font-size: 14px; font-weight: 750; color: var(--rl-home-ink); }
.rl-request-history-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.rl-request-history-list li { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; padding: 12px; border-radius: 14px; background: #fff; box-shadow: 0 8px 20px -18px rgb(31 29 43 / 0.5); animation: rl-home-rise 0.5s var(--rl-home-ease) both; animation-delay: calc(var(--i, 0) * 0.06s); }
.rl-request-history-list p { grid-column: 1 / -1; margin: 0; font-size: 13px; line-height: 1.45; color: var(--rl-home-ink); }
.rl-request-history-list time { grid-row: 1; grid-column: 2; justify-self: end; font-size: 12px; color: var(--rl-home-muted); }
.rl-request-history-empty { margin: 0; font-size: 13px; line-height: 1.5; color: var(--rl-home-muted); }
.rl-request-pill { justify-self: start; padding: 4px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 750; background: #efedf8; color: #5b49a5; }
.rl-request-pill.is-in_review { background: #e9f0ff; color: #3656b3; }
.rl-request-pill.is-awaiting_user { background: #fff2dc; color: #8a5a0b; }
.rl-request-pill.is-completed { background: #dcf8ec; color: #1c6b52; }

.rl-request-studio.is-sent { align-items: center; }
.rl-request-sent { display: grid; gap: 12px; justify-items: start; }
.rl-request-sent-mark { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--rl-grad); color: #fff; box-shadow: 0 0 0 10px rgb(163 116 250 / 0.12), 0 18px 34px -16px rgb(101 72 208 / 0.9); animation: rl-home-pop 0.7s var(--rl-home-ease) both; }
.rl-request-sent-mark svg { width: 30px; height: 30px; stroke-width: 2.4; stroke-dasharray: 30; stroke-dashoffset: 30; animation: rl-home-draw 0.6s ease 0.35s forwards; }
.rl-request-sent h2 { margin: 6px 0 0; font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -0.02em; color: var(--rl-home-ink); animation: rl-home-rise 0.6s var(--rl-home-ease) 0.2s both; }
.rl-request-sent p { margin: 0; max-width: 520px; font-size: 15px; line-height: 1.6; color: var(--rl-home-muted); animation: rl-home-rise 0.6s var(--rl-home-ease) 0.3s both; }
.rl-request-sent .rl-request-actions { animation: rl-home-rise 0.6s var(--rl-home-ease) 0.4s both; }

@keyframes rl-home-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes rl-home-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rl-home-unfold { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes rl-home-pop { 0% { transform: scale(0.4); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }
@keyframes rl-home-shake { 0%, 100% { transform: none; } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@keyframes rl-home-spin { to { transform: rotate(360deg); } }
@keyframes rl-home-orbit { to { --rl-spin: 360deg; } }
@keyframes rl-home-drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(-18%, 22%) scale(1.15); } }
@keyframes rl-home-draw { to { stroke-dashoffset: 0; } }

@media (max-width: 900px) {
  .rl-request-studio { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .rl-home-link-row { flex-wrap: wrap; }
  .rl-home-link-actions { width: 100%; margin-left: 0; }
  .rl-home-link-actions > * { flex: 1; justify-content: center; }
  .rl-request-send { width: 100%; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
  .salon-home-inline-editor *, .salon-home-inline-editor *::before, .salon-home-inline-editor *::after { animation: none !important; transition-duration: 0.01ms !important; }
}

.rl-home-link-booking { font-size: 12px; color: var(--rl-home-muted); }
.rl-home-link-booking b { font-weight: 650; color: var(--rl-home-ink); }

/* ---------- Link settings panel (ui/salon-link-settings.js) ----------
   The dashboard's own right-hand drawer, with the salon's addresses, how many
   changes are left, a new link checked rule by rule as it is typed, and every
   past link with how long it keeps working. */
.rl-link-layer {
  --rl-grad: linear-gradient(120deg, #a374fa, #93a2f7 50%, #8ff7d2);
  --rl-ink: #1f1d2b;
  --rl-muted: #6b6878;
  --rl-line: #e6e3ee;
  --rl-ok: #1f9d6b;
  --rl-bad: #d0443a;
  --rl-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --rl-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}
.rl-link-drawer { width: min(520px, 100vw); }
.rl-link-body { display: grid; gap: 18px; align-content: start; padding: 20px 22px 28px; overflow-y: auto; color: var(--rl-ink); }
.rl-link-body svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rl-link-body > *, .rl-link-edit > * { animation: rl-link-rise 0.6s var(--rl-ease) both; }
.rl-link-body > :nth-child(2) { animation-delay: 0.05s; }
.rl-link-body > :nth-child(3) { animation-delay: 0.1s; }
.rl-link-body > :nth-child(4) { animation-delay: 0.15s; }
@keyframes rl-link-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* The two addresses */
.rl-link-now { display: grid; gap: 8px; padding: 14px; border-radius: 16px; background: linear-gradient(135deg, #f6f3ff, #eefbf6); }
.rl-link-now-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; gap: 10px; animation: rl-link-rise 0.6s var(--rl-ease) both; animation-delay: calc(var(--i) * 70ms + 0.1s); }
.rl-link-now-row > span { font-size: 12px; font-weight: 600; color: var(--rl-muted); }
.rl-link-now-row a { min-width: 0; overflow: hidden; color: var(--rl-muted); font-size: 14px; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.rl-link-now-row a strong { color: var(--rl-ink); font-weight: 750; }
.rl-link-now-row a:hover strong { text-decoration: underline; }
.rl-link-copy { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--rl-line); border-radius: 10px; background: #fff; color: var(--rl-ink); cursor: pointer; transition: transform 0.3s var(--rl-spring), border-color 0.3s ease, color 0.3s ease; }
.rl-link-copy:hover { transform: translateY(-1px); border-color: #b9aef0; }
.rl-link-copy.is-done { border-color: var(--rl-ok); color: var(--rl-ok); animation: rl-link-pop 0.45s var(--rl-spring); }

/* Changes left: one pip per change, filled as they are used */
.rl-link-allowance { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; }
.rl-link-allowance p { display: grid; gap: 2px; margin: 0; font-size: 13px; color: var(--rl-muted); }
.rl-link-allowance p strong { color: var(--rl-ink); font-size: 14px; }
.rl-link-meter { display: flex; gap: 6px; }
.rl-link-meter i { width: 34px; height: 8px; border-radius: 99px; background: var(--rl-grad); animation: rl-link-fill 0.8s var(--rl-ease) both; animation-delay: calc(var(--i) * 120ms + 0.2s); transform-origin: left; }
.rl-link-meter i.is-used { background: var(--rl-line); }
@keyframes rl-link-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.rl-link-allowance.is-loading span { display: block; height: 12px; border-radius: 99px; background: linear-gradient(90deg, #efedf4, #f8f7fb, #efedf4) 0 0 / 200% 100%; animation: rl-link-shimmer 1.2s linear infinite; }
.rl-link-allowance.is-loading span:first-child { width: 74px; }
@keyframes rl-link-shimmer { to { background-position: -200% 0; } }

/* The field: its edge turns with the verdict */
.rl-link-edit { display: grid; gap: 12px; }
.rl-link-edit.is-locked .rl-link-field { opacity: 0.55; }
.rl-link-label { font-size: 14px; font-weight: 700; }
.rl-link-field { display: flex; align-items: center; gap: 2px; min-height: 52px; padding: 0 14px; border: 1.5px solid var(--rl-line); border-radius: 14px; background: #fff; transition: border-color 0.4s var(--rl-ease), box-shadow 0.5s var(--rl-ease); }
.rl-link-field:focus-within { border-color: #a99df0; box-shadow: 0 0 0 5px rgb(147 162 247 / 0.16); }
.rl-link-field[data-tone="ok"] { border-color: var(--rl-ok); box-shadow: 0 0 0 5px rgb(31 157 107 / 0.12); }
.rl-link-field[data-tone="bad"] { border-color: var(--rl-bad); box-shadow: 0 0 0 5px rgb(208 68 58 / 0.1); animation: rl-link-shake 0.4s ease; }
.rl-link-field > span { color: var(--rl-muted); font-size: 15px; white-space: nowrap; }
.rl-link-layer .rl-link-field input,
.rl-link-layer .rl-link-field input:focus,
.rl-link-layer .rl-link-field input:disabled { flex: 1; min-width: 0; height: 48px; padding: 0; border: 0; border-radius: 0; outline: 0; background: transparent; box-shadow: none; -webkit-box-shadow: none; color: var(--rl-ink); font-family: inherit; font-size: 16px; font-weight: 700; line-height: 1; }
@keyframes rl-link-shake { 20%, 60% { transform: translateX(-3px); } 40%, 80% { transform: translateX(3px); } }

/* The verdict: one clear sentence, and a fix to try */
.rl-link-verdict { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 28px; margin: 0; font-size: 13.5px; line-height: 1.4; animation: rl-link-rise 0.4s var(--rl-ease) both; }
.rl-link-verdict-mark { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; }
.rl-link-verdict.is-ok { color: var(--rl-ok); }
.rl-link-verdict.is-ok .rl-link-verdict-mark { background: var(--rl-ok); color: #fff; animation: rl-link-pop 0.5s var(--rl-spring); }
.rl-link-verdict.is-bad { color: var(--rl-bad); }
.rl-link-verdict.is-bad .rl-link-verdict-mark { background: var(--rl-bad); color: #fff; }
.rl-link-verdict.is-checking, .rl-link-verdict.is-idle { color: var(--rl-muted); }
.rl-link-verdict .rl-link-verdict-mark svg { width: 13px; height: 13px; stroke-width: 2.6; }
.rl-link-suggestion { padding: 5px 11px; border: 1px solid #cfc6f5; border-radius: 99px; background: #f6f3ff; color: #5b43c4; font-family: inherit; font-size: 12.5px; font-weight: 600; line-height: 1; cursor: pointer; transition: transform 0.3s var(--rl-spring), background-color 0.3s ease; }
.rl-link-suggestion:hover { transform: translateY(-1px); background: #ede7ff; }
@keyframes rl-link-pop { 0% { transform: scale(0.4); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }

/* The rules, ticking themselves */
.rl-link-rules { display: grid; gap: 7px; margin: 0; padding: 14px; border: 1px solid var(--rl-line); border-radius: 14px; list-style: none; }
.rl-link-rules li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--rl-muted); transition: color 0.3s ease; }
.rl-link-rule-mark { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: #f1eff6; color: #b6b2c2; transition: background-color 0.35s var(--rl-ease), color 0.35s var(--rl-ease); }
.rl-link-rules li.is-ok { color: var(--rl-ink); }
.rl-link-rules li.is-ok .rl-link-rule-mark { background: var(--rl-ok); color: #fff; animation: rl-link-pop 0.45s var(--rl-spring); }
.rl-link-rules li.is-bad { color: var(--rl-bad); }
.rl-link-rules li.is-bad .rl-link-rule-mark { background: var(--rl-bad); color: #fff; animation: rl-link-shake 0.35s ease; }
.rl-link-rules .rl-link-rule-mark svg { width: 12px; height: 12px; stroke-width: 2.8; }
.rl-link-note { display: flex; gap: 10px; margin: 0; padding: 12px 14px; border-radius: 12px; background: #f7f6fa; color: var(--rl-muted); font-size: 12.5px; line-height: 1.5; }
.rl-link-note svg { flex: none; margin-top: 1px; }

/* Buttons and the confirm step */
.rl-link-buttons { display: flex; justify-content: flex-end; gap: 8px; }
.rl-link-button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px; border: 1px solid transparent; border-radius: 999px; font-family: inherit; font-size: 14px; font-weight: 650; line-height: 1; cursor: pointer; transition: transform 0.3s var(--rl-spring), box-shadow 0.4s ease, opacity 0.3s ease; }
.rl-link-button.is-quiet { border-color: var(--rl-line); background: #fff; color: var(--rl-ink); }
.rl-link-button.is-primary { background: var(--rl-ink); color: #fff; }
.rl-link-button.is-primary:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 12px 24px -14px rgb(31 29 43 / 0.7); }
.rl-link-button:disabled { opacity: 0.4; cursor: not-allowed; }
.rl-link-confirm { display: grid; gap: 10px; padding: 16px; border: 1px solid #d9d2f6; border-radius: 16px; background: linear-gradient(135deg, #faf8ff, #f1fcf8); animation: rl-link-up 0.5s var(--rl-ease) both; }
.rl-link-confirm h3 { margin: 0; font-size: 15px; }
.rl-link-confirm ul { display: grid; gap: 4px; margin: 0; padding-left: 18px; color: var(--rl-muted); font-size: 13px; }
@keyframes rl-link-up { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } }

/* Past links */
.rl-link-history h3 { margin: 0 0 10px; font-size: 14px; }
.rl-link-history ol { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.rl-link-history li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px 14px; overflow: hidden; border: 1px solid var(--rl-line); border-radius: 14px; background: #fff; animation: rl-link-rise 0.55s var(--rl-ease) both; animation-delay: calc(var(--i) * 70ms); }
.rl-link-history li.is-new { animation: rl-link-arrive 0.8s var(--rl-spring) both; border-color: #b9aef0; }
.rl-link-history li div { display: grid; gap: 2px; min-width: 0; }
.rl-link-history li strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.rl-link-history li small { color: var(--rl-muted); font-size: 12px; }
.rl-link-history li.is-stopped strong { color: var(--rl-muted); text-decoration: line-through; text-decoration-color: rgb(107 104 120 / 0.5); }
.rl-link-pill { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 99px; font-size: 12px; font-weight: 650; white-space: nowrap; }
.rl-link-pill svg { width: 13px; height: 13px; }
.rl-link-history li.is-active .rl-link-pill { background: #e7f7ef; color: var(--rl-ok); }
.rl-link-history li.is-stopped .rl-link-pill { background: #f1eff6; color: var(--rl-muted); }
.rl-link-life { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #eef7f2; }
.rl-link-life i { display: block; height: 100%; width: calc(var(--left) * 100%); background: var(--rl-ok); transform-origin: left; animation: rl-link-fill 1.1s var(--rl-ease) both 0.3s; }
.rl-link-history-empty { margin: 0; color: var(--rl-muted); font-size: 13px; }
@keyframes rl-link-arrive { from { opacity: 0; transform: translateY(-14px) scale(0.96); } to { opacity: 1; transform: none; } }

.rl-link-spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: rl-link-turn 0.7s linear infinite; }
@keyframes rl-link-turn { to { transform: rotate(360deg); } }

@media (max-width: 640px) {
  .rl-link-body { padding: 16px 16px 24px; }
  .rl-link-now-row { grid-template-columns: minmax(0, 1fr) auto; }
  .rl-link-now-row > span { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .rl-link-layer *, .rl-link-layer *::before { animation: none !important; transition-duration: 0.01ms !important; }
}

/* The field is one piece: the dashboard's own input tint and the browser's
   autofill colour never show inside it. */
.rl-link-layer .rl-link-field input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px #fff inset; -webkit-text-fill-color: var(--rl-ink); }
.rl-link-layer .rl-link-field input::selection { background: rgb(147 162 247 / 0.28); }