:root {
  color-scheme: dark;
  font-family: "Segoe UI", Arial, sans-serif;
  color: #f6f1ec;
  background: #15120f;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  --background: #15120f;
  --surface: #1d1915;
  --surface-raised: #252019;
  --text: #f6f1ec;
  --muted: #aaa098;
  --line: rgba(255, 239, 217, .1);
  --orange: #ff9e40;
  --orange-bright: #ffb35d;
  --orange-soft: #ffc883;
  --green: #81d3a3;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 85px; }
body { min-width: 320px; margin: 0; background: var(--background); color: var(--text); }
body, button, input { font-family: "Segoe UI", Arial, sans-serif; }
button, input { font-size: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
:is(a, button, input):focus-visible { outline: 3px solid #ffd099; outline-offset: 3px; }

.topbar { position: sticky; z-index: 10; top: 0; display: flex; min-height: 68px; align-items: center; justify-content: space-between; gap: 24px; padding: 0 max(calc((100vw - 1160px)/2), 30px); border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(21,18,15,.88); backdrop-filter: blur(18px); }
.brand { display: inline-flex; flex: none; align-items: center; gap: 10px; font-size: 18px; font-weight: 800; letter-spacing: -.65px; }
.brand-mark, .auth-brand-mark { position: relative; display: grid; width: 32px; height: 32px; place-items: center; border-radius: 10px; background: linear-gradient(145deg, #ffc572, #f17e2c); color: #20150e; font-size: 13px; font-weight: 900; letter-spacing: -2px; box-shadow: 0 0 17px #ff993d4a; }
.brand-mark span { font-size: 11px; }
.brand-highlight { color: var(--orange-bright); }
.top-nav { display: flex; align-self: stretch; align-items: center; gap: clamp(16px, 3vw, 36px); }
.top-nav a { position: relative; display: grid; align-items: center; color: #b9b0a8; font-size: 11px; font-weight: 600; transition: color .2s ease; }
.top-nav a::after { position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: var(--orange); content: ""; transform: scaleX(0); transform-origin: left; transition: transform .24s ease; }
.top-nav a:hover, .top-nav a:focus-visible { color: #fff3e5; }
.top-nav a:hover::after { transform: scaleX(1); }
.header-actions { display: flex; min-width: 128px; align-items: center; justify-content: flex-end; gap: 12px; }
.login-button, .logout-button { display: inline-flex; min-height: 36px; align-items: center; justify-content: center; gap: 10px; padding: 0 16px; border: 1px solid #ffad56; border-radius: 9px; background: linear-gradient(115deg, #ffc36f, #ff9a3d); color: #26180f; font-size: 11px; font-weight: 800; box-shadow: 0 0 17px #ff9b3d22; cursor: pointer; transition: .2s ease; }
.login-button:hover, .logout-button:hover { transform: translateY(-2px); box-shadow: 0 0 22px #ff9b3d55; }
.account-greeting { overflow: hidden; max-width: 145px; color: #f4dfc8; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.logout-button { border-color: var(--line); background: var(--surface-raised); color: var(--muted); box-shadow: none; }

.ambient { position: fixed; z-index: 0; inset: 67px 0 auto; height: 650px; overflow: hidden; pointer-events: none; }
.ambient-orb { position: absolute; display: block; width: 280px; height: 210px; border-radius: 50%; filter: blur(100px); opacity: .1; }
.orb-one { top: 85px; left: 8%; background: #f68a36; animation: orb-drift 14s ease-in-out infinite alternate; }
.orb-two { top: 180px; right: 13%; background: #ffb558; animation: orb-drift 17s ease-in-out -5s infinite alternate-reverse; }
.floating-spark { position: absolute; color: #ffb15f; text-shadow: 0 0 12px #ff941eaa; animation: float-spark 6s ease-in-out infinite; }
.spark-one { top: 15%; left: 21%; font-size: 18px; }
.spark-two { top: 41%; left: 46%; font-size: 14px; animation-delay: -3s; }
.spark-three { top: 26%; right: 18%; font-size: 22px; animation-delay: -2s; }
.spark-four { top: 62%; right: 31%; font-size: 34px; animation-delay: -4s; }
@keyframes orb-drift { to { transform: translate(65px, 50px) scale(1.22); opacity: .18; } }
@keyframes float-spark { 0%,100% { opacity: .32; transform: translateY(0) rotate(0deg) scale(.85); } 50% { opacity: 1; transform: translateY(-19px) rotate(75deg) scale(1.16); } }

.page-width { position: relative; z-index: 1; width: min(1120px, calc(100% - 48px)); margin-right: auto; margin-left: auto; }
.hero { display: grid; min-height: 440px; grid-template-columns: 1.02fr .98fr; align-items: center; gap: 55px; padding-top: 36px; padding-bottom: 45px; }
.hero-copy { position: relative; z-index: 1; }
.status-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 11px; border: 1px solid #e8953d45; border-radius: 30px; background: #ec8e2811; color: #ffbb6b; font-size: 9px; font-weight: 750; letter-spacing: .35px; box-shadow: inset 0 0 12px #fe9a2010; }
.status-pill span, .glass-top i, .public-pill span, .proof-stage-top i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px #7edca2a8; }
.hero h1 { margin: 23px 0 15px; font-size: clamp(42px, 5.2vw, 68px); font-weight: 800; letter-spacing: -3.2px; line-height: 1.06; }
.hero h1 span { color: var(--orange-bright); text-shadow: 0 0 26px #ff9d3630; }
.hero-description { max-width: 445px; margin: 0; color: #aaa098; font-size: 13px; line-height: 1.8; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 11px; margin-top: 25px; }
.primary-link, .secondary-link { display: inline-flex; min-height: 41px; align-items: center; justify-content: center; gap: 19px; padding: 0 16px; border: 1px solid transparent; border-radius: 8px; background: linear-gradient(105deg, #ffc16b, #ff973c); color: #291a0d; font-size: 10px; font-weight: 800; box-shadow: 0 5px 20px #f5823124; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }
.primary-link:hover, .secondary-link:hover { transform: translateY(-2px); box-shadow: 0 8px 22px #f5823145; }
.primary-link span { font-size: 14px; }
.secondary-link { gap: 8px; border-color: var(--line); background: #24201c; color: #eee4d9; box-shadow: none; }
.hero-note { display: flex; align-items: center; gap: 7px; margin-top: 19px; color: #9a9289; font-size: 9px; }
.note-check { display: grid; width: 17px; height: 17px; place-items: center; border-radius: 50%; background: #f8a34a22; color: var(--orange-bright); }

.hero-visual { position: relative; display: grid; min-height: 330px; place-items: center; }
.orbit { position: absolute; top: 50%; left: 50%; border: 1px solid #ffb56817; border-radius: 50%; transform: translate(-50%, -50%) rotate(-20deg); }
.orbit-outer { width: min(420px, 100%); height: 242px; animation: orbit-turn 34s linear infinite; }
.orbit-inner { width: min(340px, 82%); height: 187px; border-style: dashed; animation: orbit-turn 46s linear infinite reverse; }
.orbit::after { position: absolute; top: 15%; left: 13%; width: 8px; height: 8px; border-radius: 50%; background: #ffb461; box-shadow: 0 0 14px #ff9b3e; content: ""; }
@keyframes orbit-turn { to { transform: translate(-50%, -50%) rotate(340deg); } }
.hero-glass { position: relative; z-index: 1; width: min(355px, 94%); padding: 21px 23px 16px; border: 1px solid #ffc1792d; border-radius: 17px; background: linear-gradient(145deg, #28211beb, #1d1918ed); box-shadow: 0 20px 70px #0008, 0 0 35px #ff9d3623, inset 0 1px #fff1; backdrop-filter: blur(20px); animation: glass-hover 6s ease-in-out infinite; }
@keyframes glass-hover { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.glass-top, .glass-top > span:first-child, .glass-bottom { display: flex; align-items: center; justify-content: space-between; }
.glass-top > span:first-child { justify-content: flex-start; gap: 7px; color: #b9a996; font-size: 8px; font-weight: 700; letter-spacing: 1px; }
.mini-spark { color: #f7b65e; }
.glass-label { margin: 24px 0 5px; color: #aaa098; font-size: 9px; letter-spacing: .8px; }
.hero-glass > strong { font-size: 37px; font-weight: 800; letter-spacing: -1.3px; }
.sparkline { display: flex; height: 45px; align-items: end; gap: 8px; margin-top: 12px; border-bottom: 1px solid #ffb8582d; }
.sparkline span { width: 8%; height: 20%; border-radius: 5px 5px 0 0; background: linear-gradient(#ffd27d, #f58a34); box-shadow: 0 0 11px #ff993d38; animation: bar-breathe 2.5s ease-in-out infinite alternate; }
.sparkline span:nth-child(2n) { height: 48%; animation-delay: -.7s; }
.sparkline span:nth-child(3n) { height: 31%; animation-delay: -1.3s; }
.sparkline span:nth-child(4n) { height: 78%; animation-delay: -.3s; }
.sparkline span:nth-child(5n) { height: 57%; animation-delay: -1.6s; }
@keyframes bar-breathe { to { opacity: .5; transform: scaleY(.7); transform-origin: bottom; } }
.glass-bottom { gap: 12px; margin-top: 12px; color: #999086; font-size: 9px; }
.glass-badge { padding: 5px 7px; border: 1px solid #83d4a228; border-radius: 6px; color: #8fd5aa; font-size: 8px; white-space: nowrap; }
.float-chip { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; border: 1px solid #47372a; border-radius: 9px; background: #231d19ed; color: #f3e7d9; font-size: 9px; box-shadow: 0 10px 24px #0005; animation: chip-float 5s ease-in-out infinite; }
.float-chip > span { color: #ffb55e; }
.chip-top { top: 19%; right: 4%; }
.chip-bottom { bottom: 15%; left: 2%; animation-delay: -2s; }
@keyframes chip-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

.benefit-section, .work-area, .proof-section, .steps-section { padding-top: 45px; padding-bottom: 44px; }
.section-heading .eyebrow, .eyebrow { color: #d09a64; font-size: 9px; font-weight: 800; letter-spacing: 1.25px; }
.section-heading h2, .work-header h2 { margin: 10px 0 7px; font-size: clamp(23px, 3vw, 32px); font-weight: 750; letter-spacing: -1.05px; }
.section-heading h2 span { color: var(--orange-bright); }
.section-heading > p { max-width: 640px; margin: 0; color: #9f968d; font-size: 11px; line-height: 1.75; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 25px; }
.feature-card, .panel-surface, .step-card { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: linear-gradient(150deg, #211c18, #191613); }
.feature-card { min-height: 218px; padding: 19px; transition: transform .23s ease, border-color .23s ease, box-shadow .23s ease; }
.feature-card::after { position: absolute; right: -40px; bottom: -95px; width: 150px; height: 145px; border-radius: 50%; background: #fb913510; content: ""; filter: blur(22px); transition: opacity .2s ease; }
.feature-card:hover { transform: translateY(-5px); border-color: #ffb56c59; box-shadow: 0 14px 30px #0004, 0 0 20px #ff9a3311; }
.feature-top { display: flex; align-items: center; justify-content: space-between; }
.feature-icon, .form-heading > span, .upload-icon { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid #ffae552d; border-radius: 10px; background: #f594301a; color: #ffb761; font-size: 17px; }
.feature-icon-green { border-color: #84d59e22; background: #84d59e12; color: #91d8a5; }
.feature-icon-light { background: #ffe3c91a; color: #ffe2c4; }
.feature-index { color: #81786f; font-size: 8px; letter-spacing: 1px; }
.feature-card h3 { margin: 17px 0 7px; font-size: 14px; letter-spacing: -.2px; }
.feature-card > p { max-width: 285px; margin: 0; color: #a59c92; font-size: 10px; line-height: 1.7; }
.feature-wide { background: radial-gradient(ellipse at 88% 104%, #a9481734, transparent 48%), linear-gradient(145deg, #261d17, #1a1613); }
.link-decoration { position: absolute; right: 18px; bottom: 16px; display: flex; align-items: center; gap: 5px; max-width: calc(100% - 36px); overflow: hidden; padding: 9px 10px; border: 1px solid #ffffff12; border-radius: 7px; background: #171310b8; color: #a9a096; font-size: 8px; box-shadow: 0 0 16px #ff953714; }
.link-decoration b { overflow: hidden; color: #ffc17a; text-overflow: ellipsis; white-space: nowrap; }
.link-decoration i { color: var(--orange); font-style: normal; }
.feature-stat { display: flex; align-items: baseline; gap: 8px; margin-top: 17px; }
.feature-stat strong { color: #d7f0dc; font-size: 25px; }
.feature-stat span { color: #8d9d8c; font-size: 8px; }
.feature-accent { border-color: #fbb35d32; background: linear-gradient(150deg, #2b2017, #1e1915); }
.secure-stamp { display: flex; align-items: center; gap: 7px; margin-top: 17px; color: #a49a8e; font-size: 9px; }
.secure-stamp > span:first-child { color: #ffb85e; }
.secure-stamp b { color: #f5c995; font-size: 8px; letter-spacing: .8px; }
.stat-strip { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 14px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #1b1714; }
.stat-strip > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 17px; }
.stat-strip > div + div { border-left: 1px solid var(--line); }
.stat-strip > div > span { color: #a69b90; font-size: 8px; font-weight: 700; letter-spacing: .8px; }
.stat-strip strong { color: #ffc27d; font-size: 15px; }
.signin-prompt { display: flex; align-items: center; gap: 13px; margin-top: 14px; padding: 13px 16px; border: 1px solid #ffad5030; border-radius: 10px; background: linear-gradient(100deg, #2b1e143d, #211a153d); }
.prompt-icon { display: grid; width: 32px; height: 32px; flex: none; place-items: center; border: 1px solid #ffb56032; border-radius: 9px; color: #ffbd70; }
.signin-prompt > div { flex: 1; }
.signin-prompt strong { font-size: 10px; }
.signin-prompt p { margin: 3px 0 0; color: #a49a90; font-size: 9px; }
.text-button { flex: none; padding: 8px 11px; border: 0; border-radius: 7px; background: transparent; color: #ffc27d; font-size: 9px; font-weight: 700; cursor: pointer; }
.text-button:hover { background: #ffae5519; }

.work-area { padding-top: 32px; }
.work-header { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin-bottom: 17px; }
.work-header h2 { margin-bottom: 0; font-size: 24px; }
.link-total { color: #a79d93; font-size: 9px; }
.work-grid { display: grid; grid-template-columns: .82fr 1.18fr; align-items: start; gap: 14px; }
.panel-surface { padding: 18px; box-shadow: 0 9px 27px #0002; }
.form-heading, .upload-copy { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.form-heading h3, .upload-copy h3, .list-heading h3 { margin: 0; font-size: 12px; }
.form-heading p, .upload-copy p, .list-heading p { margin: 4px 0 0; color: #9c9288; font-size: 9px; }
.link-form label, .auth-form label { display: block; margin-bottom: 6px; color: #c1b5a8; font-size: 9px; font-weight: 650; }
.link-form input:not([type=checkbox]), .proof-upload input:not([type=file]):not([type=checkbox]), .auth-form input { width: 100%; min-height: 38px; padding: 0 10px; border: 1px solid #42382f; border-radius: 7px; outline: none; background: #181512; color: var(--text); font-size: 10px; transition: border-color .2s ease, box-shadow .2s ease; }
.link-form input:focus, .proof-upload input:focus, .auth-form input:focus { border-color: #f5a752; box-shadow: 0 0 0 3px #ff9d3020; }
.link-form input::placeholder, .proof-upload input::placeholder, .auth-form input::placeholder { color: #746c63; }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 12px; }
.orange-button { display: inline-flex; min-height: 37px; align-items: center; justify-content: center; gap: 8px; padding: 0 13px; border: 1px solid #f8ac5a; border-radius: 7px; background: linear-gradient(110deg, #ffc574, #ff9841); color: #291b10; font-size: 9px; font-weight: 800; cursor: pointer; box-shadow: 0 5px 18px #f18a3320; transition: .2s ease; }
.orange-button:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 7px 20px #f18a3347; }
.orange-button:disabled { opacity: .6; cursor: wait; }
.submit-link { width: 100%; margin-top: 13px; }
.submit-link > span { margin-right: 2px; }
.submit-link > b { margin-left: auto; font-size: 14px; }
.form-message, .proof-upload-message { min-height: 0; margin: 0; overflow-wrap: anywhere; color: #aca197; font-size: 9px; }
.form-message:not(:empty), .proof-upload-message:not(:empty) { margin-top: 9px; }
.message-success { color: #8ed7a5; }
.message-error { color: #ff9991; }
.list-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 11px; }
.refresh-button { display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: #1a1613; color: #ffb665; font-size: 16px; cursor: pointer; }
.refresh-button:hover { border-color: #f3a555; }
.is-refreshing { animation: spin .65s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.links-list-body { display: grid; gap: 8px; }
.link-empty { display: grid; min-height: 174px; align-content: center; justify-items: center; text-align: center; }
.link-empty > span { display: grid; width: 32px; height: 32px; margin-bottom: 8px; place-items: center; border: 1px solid #ffb4622b; border-radius: 9px; background: #ff9a2712; color: #ffba6c; font-size: 16px; }
.link-empty strong { font-size: 10px; }
.link-empty p { margin: 4px 0 0; color: #968c82; font-size: 9px; }
.link-row { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 11px; padding: 10px 8px; border: 1px solid #ffffff0d; border-radius: 8px; background: #191613; }
.link-row-details { display: grid; min-width: 0; gap: 4px; }
.link-row-details strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.short-link { overflow: hidden; color: #ffbd72; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.link-destination { overflow: hidden; color: #91877e; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.link-row-meta { display: grid; justify-items: end; gap: 5px; }
.link-click-pill { padding: 4px 6px; border: 1px solid #ffb45326; border-radius: 6px; color: #f9c178; font-size: 8px; }
.link-row-meta time { color: #8c837a; font-size: 8px; }
.copy-link-button { padding: 6px 8px; border: 1px solid #4a3c30; border-radius: 6px; background: #241c16; color: #ffc078; font-size: 8px; cursor: pointer; }
.copy-link-button:hover { border-color: #ffb464; }

.proof-section { padding-top: 36px; }
.proof-heading-row { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 19px; }
.proof-heading-row .section-heading > p { max-width: 720px; }
.public-pill { display: inline-flex; flex: none; align-items: center; gap: 7px; margin-bottom: 4px; padding: 8px 10px; border: 1px solid #ffb85b27; border-radius: 20px; background: #ff9d3810; color: #ffc782; font-size: 8px; white-space: nowrap; }
.public-pill span { width: 6px; height: 6px; background: #ffab51; box-shadow: 0 0 8px #ff9b4a; }
.proof-stage-shell { position: relative; display: flex; min-height: 490px; flex-direction: column; overflow: hidden; padding: 16px 20px 12px; border: 1px solid #59402b; border-radius: 17px; background: radial-gradient(ellipse at 48% 48%, #362518 0%, #211a15 40%, #1a1613 75%); box-shadow: 0 14px 36px #0003, 0 0 28px #ff97240d, inset 0 0 40px #0003; }
.proof-stage-glow { position: absolute; top: 28%; left: 50%; width: 46%; height: 40%; border-radius: 50%; background: #ef781818; filter: blur(74px); transform: translateX(-50%); pointer-events: none; }
.proof-stage-top, .proof-stage-bottom { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #b3a495; font-size: 8px; }
.proof-stage-top { letter-spacing: .8px; }
.proof-stage-top > span:first-child { display: flex; align-items: center; gap: 7px; }
.proof-stage-top i { width: 5px; height: 5px; background: #fdac55; box-shadow: 0 0 9px #ff9c48; }
.proof-counter { color: #edbb81; }
.proof-carousel { position: relative; z-index: 1; display: grid; min-height: 397px; flex: 1; grid-template-columns: 42px minmax(0,1fr) 42px; align-items: center; gap: 13px; }
.proof-view { display: grid; min-width: 0; min-height: 360px; place-items: center; touch-action: pan-y; }
.proof-figure { display: grid; width: 100%; height: 360px; grid-template-rows: minmax(0,1fr) auto; justify-items: center; margin: 0; animation: proof-arrive .35s ease-out both; }
@keyframes proof-arrive { from { opacity: .45; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.proof-figure img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 14px 25px #0008); }
.proof-figure figcaption { display: flex; width: min(620px, 100%); justify-content: space-between; gap: 10px; padding-top: 8px; color: #edc79f; font-size: 9px; }
.proof-figure figcaption span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proof-figure time { flex: none; color: #9b8976; }
.proof-delete { flex: none; padding: 5px 8px; border: 1px solid #79523a; border-radius: 6px; background: #39251b; color: #ffc08a; font-size: 8px; cursor: pointer; }
.proof-delete:hover:not(:disabled) { border-color: #ff9c66; }
.proof-delete:disabled { opacity: .6; cursor: wait; }
.proof-arrow { display: grid; width: 39px; height: 39px; place-items: center; border: 1px solid #796149; border-radius: 50%; background: #30251c; color: #ffca91; font-size: 18px; cursor: pointer; box-shadow: 0 4px 15px #0003; transition: .2s ease; }
.proof-arrow:hover:not(:disabled) { border-color: #ffc07a; background: #4b321f; box-shadow: 0 0 15px #ff9a3f4a; transform: scale(1.05); }
.proof-arrow:disabled { opacity: .45; cursor: default; }
.proof-empty { display: grid; justify-items: center; text-align: center; }
.proof-empty > span { display: grid; width: 54px; height: 54px; margin-bottom: 14px; place-items: center; border: 1px solid #ffc07336; border-radius: 16px; background: #ff9c2d13; color: #ffc079; font-size: 24px; box-shadow: 0 0 24px #ff9e361c; animation: empty-glow 3s ease-in-out infinite; }
@keyframes empty-glow { 50% { box-shadow: 0 0 33px #ff9e3650; } }
.proof-empty strong { font-size: 12px; }
.proof-empty p { margin: 6px 0 0; color: #a69a8d; font-size: 9px; }
.proof-dots { position: relative; z-index: 1; display: flex; min-height: 20px; align-items: center; justify-content: center; gap: 8px; }
.proof-dot { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 8px; background: #746453; cursor: pointer; transition: .2s ease; }
.proof-dot.is-active { width: 25px; background: #ffae60; box-shadow: 0 0 10px #ff963caa; }
.proof-stage-bottom { justify-content: center; padding-top: 7px; color: #a0907f; font-size: 8px; }
.proof-upload { display: grid; gap: 12px; margin-top: 13px; border-color: #ffab4c2b; background: linear-gradient(120deg, #251b14, #1c1814); }
.upload-copy { margin: 0; }
.upload-icon { width: 34px; height: 34px; flex: none; font-size: 16px; }
.upload-fields { display: grid; grid-template-columns: minmax(160px,.95fr) minmax(160px,1.2fr) auto; align-items: center; gap: 9px; }
.file-picker { display: flex; min-height: 37px; min-width: 0; align-items: center; gap: 8px; overflow: hidden; padding: 0 10px; border: 1px dashed #71583f; border-radius: 7px; color: #ffc581; font-size: 9px; cursor: pointer; }
.file-picker:hover { border-color: #ffc078; background: #ffb25c0b; }
.file-picker > span:first-child { flex: none; font-size: 14px; }
.file-picker > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proof-upload input:not([type=file]):not([type=checkbox]) { min-height: 37px; }
.consent-line { display: flex; align-items: start; gap: 8px; color: #aa9d90; font-size: 9px; line-height: 1.6; cursor: pointer; }
.consent-line input { width: 15px; height: 15px; flex: none; accent-color: #ff9e43; }
.proof-upload-message { color: #a99c90; }
.proof-signin { display: flex; justify-content: space-between; gap: 10px; padding: 13px 2px 0; color: #9e9285; font-size: 9px; }
.inline-auth-button { padding: 0; border: 0; background: transparent; color: #ffba70; font-size: inherit; font-weight: 750; cursor: pointer; }
.inline-auth-button:hover { color: #ffe0bb; text-decoration: underline; }

.steps-section { padding-top: 27px; padding-bottom: 57px; }
.steps-section .section-heading { margin-bottom: 17px; }
.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.step-card { min-height: 137px; padding: 16px; }
.step-card > b { display: grid; width: 29px; height: 29px; margin-bottom: 13px; place-items: center; border: 1px solid #ffb2582b; border-radius: 8px; color: #ffbf77; font-size: 14px; }
.step-number { position: absolute; top: 17px; right: 14px; color: #77685a; font-size: 8px; letter-spacing: .8px; }
.step-card h3 { margin: 0 0 6px; font-size: 10px; }
.step-card p { margin: 0; color: #a0968b; font-size: 9px; line-height: 1.6; }
.site-footer { position: relative; z-index: 1; display: flex; min-height: 64px; align-items: center; justify-content: space-between; gap: 14px; padding: 10px max(calc((100vw - 1120px)/2), 24px); border-top: 1px solid var(--line); background: #12100e; color: #93897f; font-size: 9px; }
.footer-brand { font-size: 13px; }
.footer-brand .brand-mark { width: 25px; height: 25px; border-radius: 8px; font-size: 11px; }
.site-footer > a:last-child { color: #ffb367; }

.auth-dialog { width: min(430px, calc(100% - 28px)); max-width: none; max-height: calc(100% - 28px); overflow: auto; padding: 0; border: 1px solid #5b4836; border-radius: 16px; background: #1d1915; color: var(--text); box-shadow: 0 24px 85px #000b, 0 0 32px #ff9b2823; }
.auth-dialog::backdrop { background: rgba(9,8,7,.76); backdrop-filter: blur(5px); }
.auth-card { position: relative; padding: 27px; }
.dialog-close { position: absolute; top: 13px; right: 14px; display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid #ffffff14; border-radius: 8px; background: #ffffff08; color: #c2b5a8; font-size: 20px; cursor: pointer; }
.auth-brand-mark { width: 36px; height: 36px; margin-bottom: 18px; font-size: 14px; letter-spacing: -1.5px; }
.auth-card > .eyebrow { font-size: 8px; }
.auth-card > h2 { margin: 8px 0 5px; font-size: 21px; letter-spacing: -.5px; }
.auth-description { margin: 0; color: #a3988d; font-size: 10px; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 19px 0 15px; padding: 4px; border: 1px solid #ffffff0d; border-radius: 8px; background: #15120f; }
.auth-tab { min-height: 32px; border: 0; border-radius: 6px; background: transparent; color: #a3978b; font-size: 9px; font-weight: 700; cursor: pointer; }
.auth-tab.is-active { background: linear-gradient(110deg, #f9bb6c, #ff9942); color: #261a10; }
.auth-form { display: grid; gap: 7px; }
.auth-form label { margin: 3px 0 0; }
.auth-form label span { color: #918477; font-weight: 400; }
.auth-form input { margin-bottom: 4px; }
.auth-submit { width: 100%; margin-top: 8px; }
.auth-submit span { margin-left: auto; }
.auth-message { min-height: 0; margin: 0; overflow-wrap: anywhere; color: #aaa095; font-size: 9px; }
.auth-message:not(:empty) { margin-top: 10px; }
.auth-privacy { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--line); color: #91877c; font-size: 8px; line-height: 1.6; }

.gate-body { min-height: 100vh; background: radial-gradient(ellipse at 50% 28%, #292019 0%, #17120f 74%); }
.gate-wrap { width: min(500px, calc(100% - 30px)); margin: 0 auto; padding: 32px 0 24px; }
.gate-brand { display: flex; justify-content: center; margin-bottom: 20px; }
.gate-card { padding: 27px 28px 22px; border: 1px solid #493c30; border-radius: 15px; background: linear-gradient(150deg, #231d18, #1a1613); box-shadow: 0 17px 48px #0007, 0 0 27px #ff9b241b; text-align: center; }
.gate-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid #51946b38; border-radius: 20px; background: #65bd8015; color: #9ce1ae; font-size: 8px; font-weight: 800; }
.gate-badge .status-dot { width: 6px; height: 6px; background: #81d3a3; box-shadow: 0 0 9px #81d3a3; }
.gate-icon { display: grid; width: 55px; height: 55px; margin: 18px auto 12px; place-items: center; border: 1px solid #ffab543c; border-radius: 16px; background: #ffac2818; color: #ffbb6d; font-size: 27px; }
.gate-card h1 { margin: 0 0 7px; font-size: 22px; }
.gate-description { margin-bottom: 18px; color: #aa9f94; font-size: 10px; }
.destination-card { display: flex; align-items: center; gap: 10px; padding: 11px; border: 1px solid #473a2d; border-radius: 9px; text-align: left; }
.destination-icon { display: grid; width: 32px; height: 32px; flex: none; place-items: center; border-radius: 8px; background: #ffae3216; color: #ffc373; font-size: 18px; }
.destination-card > div { display: grid; flex: 1; gap: 4px; min-width: 0; }
.destination-label { color: #9c9187; font-size: 7px; font-weight: 800; letter-spacing: .7px; }
.destination-card strong { overflow: hidden; color: #f1e5d8; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.destination-arrow { color: #ffc078; }
.ad-slot { margin-top: 15px; padding: 11px; border: 1px dashed #6b5540; border-radius: 8px; background: #171411; }
.ad-label { margin-bottom: 8px; color: #a29689; font-size: 7px; font-weight: 800; letter-spacing: .8px; }
.ad-placeholder { display: flex; min-height: 47px; align-items: center; justify-content: center; gap: 8px; border-radius: 6px; background: #231c17; color: #a89d91; }
.ad-placeholder > span { color: #ffb763; font-size: 15px; }
.ad-placeholder p { margin: 0; font-size: 8px; }
.gate-error { margin: 0; color: #ff9991; font-size: 9px; }
.gate-error:not(:empty) { margin-top: 10px; }
.gate-button { width: 100%; margin-top: 13px; }
.gate-button:disabled { opacity: .68; }
.gate-footnote { margin: 10px 0 0; color: #9e9489; font-size: 8px; }
.gate-footer { display: flex; justify-content: center; gap: 5px; margin-top: 15px; color: #9d9286; font-size: 9px; }
.gate-footer a { color: #ffc078; font-weight: 700; }
.gate-footer span { color: #ffad56; }
@media (max-width: 480px) { .gate-wrap { padding-top: 22px; } .gate-card { padding: 22px 16px 19px; } }

@media (max-width: 850px) {
  .topbar { gap: 14px; padding-right: 22px; padding-left: 22px; }
  .top-nav { gap: 15px; }
  .brand { gap: 7px; font-size: 15px; }
  .header-actions { min-width: 105px; }
  .hero { gap: 24px; }
  .hero h1 { letter-spacing: -2px; }
  .work-grid { grid-template-columns: 1fr; }
  .proof-stage-shell { min-height: 430px; }
  .proof-carousel { min-height: 343px; }
  .proof-view { min-height: 316px; }
  .proof-figure { height: 316px; }
  .upload-fields { grid-template-columns: minmax(130px,1fr) minmax(130px,1fr); }
  .upload-fields .orange-button { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  html { scroll-padding-top: 70px; }
  .topbar { min-height: 61px; padding: 0 14px; }
  .brand { font-size: 14px; }
  .brand-mark { width: 28px; height: 28px; }
  .top-nav { gap: 12px; }
  .top-nav a { font-size: 9px; }
  .top-nav a:nth-child(2) { display: none; }
  .header-actions { min-width: 0; gap: 6px; }
  .login-button, .logout-button { min-height: 31px; padding: 0 9px; font-size: 9px; }
  .account-greeting { max-width: 82px; font-size: 8px; }
  .page-width { width: calc(100% - 30px); }
  .hero { min-height: 0; grid-template-columns: 1fr; gap: 3px; padding-top: 58px; padding-bottom: 20px; }
  .hero h1 { margin-top: 18px; font-size: clamp(38px, 10vw, 53px); letter-spacing: -2.6px; }
  .hero-description { max-width: 410px; font-size: 11px; }
  .hero-actions { margin-top: 19px; }
  .hero-note { align-items: start; max-width: 350px; line-height: 1.6; }
  .hero-visual { min-height: 266px; }
  .hero-glass { width: min(350px, 88%); padding: 17px 18px 14px; }
  .orbit-outer { width: min(350px, 96%); height: 200px; }
  .orbit-inner { width: min(285px, 82%); height: 156px; }
  .chip-top { top: 12%; right: 1%; }
  .chip-bottom { bottom: 7%; left: 0; }
  .benefit-section, .work-area, .proof-section, .steps-section { padding-top: 30px; padding-bottom: 30px; }
  .section-heading h2, .work-header h2 { font-size: 23px; line-height: 1.3; }
  .section-heading > p { font-size: 10px; }
  .feature-grid { grid-template-columns: 1fr; gap: 9px; margin-top: 17px; }
  .feature-card { min-height: 166px; padding: 15px; }
  .feature-wide { min-height: 189px; }
  .feature-card h3 { margin-top: 12px; }
  .feature-card > p { max-width: 400px; }
  .feature-stat { margin-top: 11px; }
  .stat-strip > div { align-items: start; flex-direction: column; gap: 4px; padding: 10px; }
  .stat-strip > div > span { font-size: 7px; }
  .signin-prompt { align-items: start; flex-wrap: wrap; gap: 9px; padding: 12px; }
  .signin-prompt > div { min-width: calc(100% - 42px); }
  .text-button { margin-left: 40px; }
  .work-area { padding-top: 22px; }
  .work-header { align-items: start; flex-direction: column; gap: 6px; }
  .panel-surface { padding: 14px; }
  .field-pair { gap: 8px; }
  .link-row { grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
  .link-row-meta { display: none; }
  .proof-heading-row { align-items: start; flex-direction: column; gap: 10px; }
  .proof-heading-row .section-heading h2 { max-width: 440px; }
  .public-pill { margin: 0; }
  .proof-stage-shell { min-height: 400px; padding: 13px 10px 10px; border-radius: 13px; }
  .proof-carousel { min-height: 328px; grid-template-columns: 31px minmax(0,1fr) 31px; gap: 5px; }
  .proof-view { min-height: 292px; }
  .proof-figure { height: 292px; }
  .proof-arrow { width: 31px; height: 31px; font-size: 15px; }
  .proof-stage-top, .proof-stage-bottom { font-size: 7px; }
  .proof-stage-bottom { text-align: center; }
  .upload-fields { grid-template-columns: 1fr; }
  .upload-fields .orange-button { grid-column: auto; }
  .proof-signin { flex-direction: column; }
  .steps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step-card { min-height: 112px; }
  .site-footer { align-items: start; flex-wrap: wrap; padding: 13px 16px; }
  .site-footer > span { order: 3; width: 100%; }
}
@media (max-width: 390px) {
  .topbar { gap: 8px; }
  .top-nav { gap: 8px; }
  .top-nav a { font-size: 8px; }
  .login-button { gap: 5px; }
  .brand { font-size: 12px; }
  .brand-mark { width: 26px; height: 26px; }
  .header-actions { gap: 4px; }
  .account-greeting { max-width: 62px; }
  .hero h1 { font-size: 37px; }
  .field-pair { grid-template-columns: 1fr; }
  .proof-figure figcaption { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* FAQ, CTA và cột thông tin cuối trang */
[hidden] { display: none !important; }
.faq-section { margin: 12px auto 46px; }
.faq-list { display: grid; gap: 9px; margin-top: 20px; }
.faq-item { border: 1px solid #5a3a26; border-radius: 11px; background: linear-gradient(150deg, #221a13, #191410); transition: border-color .2s ease; }
.faq-item[open] { border-color: #b06f34; box-shadow: 0 0 22px #ff9d3c12; }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; color: #f6e3cc; font-size: 12px; font-weight: 750; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: #ffae62; font-size: 16px; font-weight: 400; }
.faq-item[open] summary::after { content: "−"; }
.faq-item p { margin: 0; padding: 0 16px 15px; color: #b4a390; font-size: 11px; line-height: 1.75; }
.cta-section { margin: 0 auto 40px; }
.cta-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding: 26px clamp(20px, 4vw, 34px); border: 1px solid #8b4d24; border-radius: 16px; background: radial-gradient(ellipse at 88% 0%, #ff9d3c26, transparent 46%), linear-gradient(120deg, #3d1f12, #241711 62%, #38190f); box-shadow: 0 18px 46px #0004, inset 0 0 40px #ff8b2e0f; }
.cta-card h2 { margin: 0 0 7px; font-size: clamp(20px, 3vw, 27px); letter-spacing: -.7px; }
.cta-card p { max-width: 620px; margin: 0; color: #c6ab92; font-size: 11px; line-height: 1.7; }
.cta-card .primary-link { flex: none; }
.site-columns { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 26px; margin-top: 30px; padding-top: 26px; border-top: 1px solid #3d2f24; }
.site-column { display: grid; align-content: start; gap: 8px; min-width: 0; }
.site-column h3 { margin: 0 0 3px; color: #f0d9bd; font-size: 9px; font-weight: 850; letter-spacing: .9px; }
.site-column a { color: #ae9c88; font-size: 10px; text-decoration: none; }
.site-column a:hover { color: #ffbf85; }
.site-note { margin: 0; color: #9c8d7c; font-size: 10px; line-height: 1.7; }
.brand-column p { margin: 8px 0 0; max-width: 300px; color: #a4947f; font-size: 10px; line-height: 1.75; }
.social-row { display: flex; gap: 7px; margin-top: 6px; }
.social-row a { display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid #4a3a2b; border-radius: 7px; background: #201a14; color: #ffc089; font-size: 10px; }
.social-row a:hover { border-color: #b87b3d; }
.site-copyright { margin: 24px 0 0; padding-top: 16px; border-top: 1px solid #33281f; color: #8b7d6e; font-size: 9px; text-align: center; }
@media (max-width: 860px) {
  .site-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .site-columns { grid-template-columns: 1fr; }
  .cta-card { flex-direction: column; align-items: flex-start; }
}

/* v8 — nút Discord và ghi chú trong hộp đăng nhập trang chủ */
.discord-login-button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 4px 0 2px;
  border-radius: 11px;
  background: linear-gradient(135deg, #5865f2, #4752c4) !important;
  box-shadow: 0 10px 24px #5865f23d;
  text-align: center;
  text-decoration: none;
}
.discord-login-button:hover { filter: brightness(1.07); }
.auth-discord-note { margin: 2px 0 8px; color: #a8927d; font-size: 10px; line-height: 1.6; }
.auth-fallback { border-top: 1px solid #4c3a2b; padding-top: 9px; }
.auth-fallback summary { color: #c0a78f; font-size: 10px; cursor: pointer; }
.auth-fallback .auth-form { margin-top: 9px; }
.pending-name { opacity: .55; }
.member-avatar { display: inline-grid; width: 30px; height: 30px; flex: none; place-items: center; overflow: hidden; border-radius: 50%; background: #6d351e; color: #ffcc97; font-size: 11px; font-weight: 850; }
.member-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Thanh cuộn đẹp theo chủ đề */
* { scrollbar-width: thin; scrollbar-color: #c07a2a #1b110c; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #1b110c; border-radius: 8px; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #a95810, #e08c1b); border: 2px solid #1b110c; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #e08c1b, #f2ab35); }
.brand-mark img, .auth-brand-mark img { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: contain; }