/* site.css */
:root { --ink:#102a2a; --muted:#607675; --paper:#f7faf7; --line:#dfe8e4; --mint:#17a983; --mint-dark:#0c8a6a; --mint-pale:#e8f7f1; --white:#fff; }
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,"SF Pro Display","PingFang SC","Microsoft YaHei",system-ui,sans-serif;-webkit-font-smoothing:antialiased} a{color:inherit;text-decoration:none} button,input{font:inherit} button{cursor:pointer}.shell{width:min(1120px,calc(100% - 40px));margin-inline:auto}
main{min-height:100vh;position:relative;overflow:hidden}.ambient{position:absolute;border-radius:999px;filter:blur(2px);pointer-events:none}.ambient-one{width:460px;height:460px;left:-260px;top:190px;background:radial-gradient(circle,rgba(76,211,167,.11),transparent 67%)}.ambient-two{width:420px;height:420px;right:-190px;top:60px;background:radial-gradient(circle,rgba(49,168,206,.1),transparent 68%)}
.site-header{height:88px;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2}.brand{display:flex;align-items:center;font-size:20px;font-weight:760;letter-spacing:-.03em}.brand b{color:var(--mint)}.brand-mark{width:30px;height:30px;margin-right:10px;border:1.5px solid #afc5be;border-radius:9px;display:grid;place-items:center;position:relative;transform:rotate(-8deg)}.brand-mark span{width:11px;height:5px;position:absolute;border:1.7px solid var(--mint);border-radius:5px}.brand-mark span:first-child{transform:translate(-3px,-2px) rotate(-35deg)}.brand-mark span:last-child{transform:translate(3px,2px) rotate(-35deg)}nav{display:flex;align-items:center;gap:30px;color:#48615f;font-size:14px;font-weight:560}nav a{transition:color .2s,border-color .2s}nav a:hover{color:var(--mint-dark)}.nav-pill{border:1px solid #cddbd6;border-radius:10px;padding:9px 14px;background:rgba(255,255,255,.55)}
.hero{position:relative;z-index:1;padding:76px 0 72px;text-align:center}.eyebrow{display:inline-flex;align-items:center;gap:8px;color:#5f8178;font-size:11px;font-weight:800;letter-spacing:.2em}.eyebrow span{width:6px;height:6px;background:var(--mint);border-radius:99px;box-shadow:0 0 0 5px rgba(23,169,131,.09)}.hero h1{margin:22px auto 18px;font-size:clamp(48px,7vw,78px);line-height:1.04;letter-spacing:-.066em;font-weight:760}.hero h1 em{color:var(--mint);font-style:normal}.hero-copy{color:var(--muted);font-size:17px;line-height:1.85;margin:0}
.shorten-card{width:min(720px,100%);margin:44px auto 0;padding:25px;text-align:left;background:rgba(255,255,255,.94);border:1px solid rgba(207,223,216,.9);border-radius:20px;box-shadow:0 22px 70px rgba(30,75,64,.1),0 2px 8px rgba(30,75,64,.04);backdrop-filter:blur(12px)}.field-label{display:block;font-size:13px;font-weight:700;margin-bottom:10px}.url-row,.slug-field{display:flex;align-items:center;border:1.5px solid #d7e3df;background:#fbfdfc;border-radius:12px;transition:border-color .2s,box-shadow .2s}.url-row:focus-within,.slug-field:focus-within{border-color:var(--mint);box-shadow:0 0 0 4px rgba(23,169,131,.09)}.protocol-badge{margin-left:14px;width:30px;height:30px;border-radius:8px;background:var(--mint-pale);color:var(--mint-dark);display:grid;place-items:center;font-weight:800}.url-row input{width:100%;border:0;outline:0;background:transparent;padding:16px 15px;font-size:15px;color:var(--ink)}input::placeholder{color:#9aa9a5}.custom-row{padding-top:18px}.custom-heading{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}.custom-heading label{font-size:13px;font-weight:700}.custom-heading small{color:#80938e;font-weight:500;margin-left:5px}.custom-heading>span{font-size:11px;color:#8a9b97}.slug-field{padding-left:14px;color:#607974;font-size:14px}.slug-field>span:first-child{font-weight:650}.slug-field input{min-width:0;flex:1;border:0;outline:0;background:transparent;padding:13px 2px;color:var(--ink)}.slug-preview{margin-right:14px;color:var(--mint);font-size:18px}.primary-button{width:100%;margin-top:19px;border:0;border-radius:12px;padding:15px 20px;display:flex;align-items:center;justify-content:center;gap:12px;background:linear-gradient(110deg,#18a985,#138f76);color:white;font-weight:720;box-shadow:0 9px 24px rgba(18,146,114,.2);transition:transform .18s,box-shadow .18s,opacity .18s}.primary-button:hover{transform:translateY(-1px);box-shadow:0 12px 30px rgba(18,146,114,.27)}.primary-button:disabled{opacity:.65;cursor:wait;transform:none}.policy-note{text-align:center;margin:13px 0 0;color:#8a9c97;font-size:11px}.policy-note span{color:var(--mint);margin-right:4px}.form-message{display:none;margin-top:15px;padding:12px 14px;border-radius:10px;font-size:13px}.form-message.is-visible{display:block}.form-message.is-error{background:#fff1ef;color:#a44537;border:1px solid #f4d1ca}.result-card{display:none;margin-top:16px;padding:16px;border-radius:12px;background:#f0faf6;border:1px solid #cceadd;align-items:center;justify-content:space-between;gap:16px}.result-card.is-visible{display:flex}.result-card div{min-width:0;display:flex;flex-direction:column;gap:4px}.result-kicker{color:#5d8177;font-size:10px;font-weight:750;text-transform:uppercase;letter-spacing:.12em}.result-card strong{font-size:17px;color:#0a8064;overflow:hidden;text-overflow:ellipsis}.result-card small{color:#728782;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:470px}.result-card button{flex:0 0 auto;border:1px solid #b8ded0;color:#08755c;background:white;border-radius:9px;padding:10px 13px;font-weight:700}
.trust-row{width:min(820px,100%);margin:34px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;text-align:left}.trust-row article{display:flex;align-items:center;gap:12px;padding:13px 15px}.feature-icon{flex:0 0 auto;width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:#ecf7f3;color:var(--mint-dark);font-weight:800}.trust-row h2{font-size:13px;margin:0 0 3px}.trust-row p{font-size:10px;color:#7a8d88;margin:0;white-space:nowrap}.safety-strip{border-block:1px solid #dce7e3;background:rgba(239,247,243,.7)}.safety-inner{min-height:106px;display:flex;align-items:center;justify-content:space-between}.safety-copy{display:flex;align-items:center;gap:15px;text-align:left}.shield{width:38px;height:42px;display:grid;place-items:center;color:white;font-weight:800;background:var(--mint);clip-path:polygon(50% 0,92% 16%,86% 73%,50% 100%,14% 73%,8% 16%)}.safety-copy strong{font-size:14px}.safety-copy p{color:#70837e;font-size:11px;margin:5px 0 0}.safety-inner>a{color:#16795f;font-size:12px;font-weight:700}.safety-inner>a span{margin-left:5px}
.site-footer{min-height:100px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:22px;color:#7e8e8a;font-size:11px}.footer-brand{color:#47605c;font-weight:800;letter-spacing:.03em}.footer-brand small{display:block;margin:4px 0 0 12px;color:#94a39f;font-weight:500;letter-spacing:0}.brand-dot{display:inline-block;width:6px;height:6px;border-radius:99px;background:var(--mint);margin-right:4px}.site-footer>div:nth-child(2){display:flex;gap:22px}.site-footer>span{text-align:right}
@media(max-width:720px){.shell{width:min(100% - 28px,1120px)}.site-header{height:70px}nav a:not(.nav-pill){display:none}nav{gap:0}.hero{padding:55px 0 50px}.hero h1{font-size:48px}.hero-copy{font-size:15px}.desktop-break{display:none}.shorten-card{margin-top:34px;padding:18px;border-radius:17px}.custom-heading>span{display:none}.trust-row{grid-template-columns:1fr;gap:0;width:min(340px,100%)}.trust-row p{white-space:normal}.safety-inner{padding-block:22px;align-items:flex-start;gap:18px}.safety-inner>a{white-space:nowrap}.site-footer{padding-block:28px;grid-template-columns:1fr;justify-items:center}.site-footer>span{text-align:center}.result-card{align-items:stretch;flex-direction:column}.result-card button{width:100%}}
@media(max-width:460px){.hero h1{font-size:41px}.eyebrow{font-size:9px}.safety-inner{flex-direction:column}.site-footer>div:nth-child(2){flex-wrap:wrap;justify-content:center}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}

.dashboard-page{min-height:100vh;background:#f4f7f5}.dashboard-header{height:76px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1px solid #dfe8e4}.dashboard-header>.brand{font-size:18px}.dashboard-header>span{text-align:center;font-size:13px;font-weight:700}.dashboard-header>a:last-child{text-align:right;color:#607675;font-size:12px}.dashboard{padding-block:50px 80px}.dashboard-title{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:30px}.dashboard-title p{margin:0 0 8px;color:var(--mint);font-size:10px;font-weight:800;letter-spacing:.16em}.dashboard-title h1{font-size:36px;letter-spacing:-.04em;margin:0 0 8px}.dashboard-title span{color:#718580;font-size:13px}.outline-button{padding:10px 14px;border:1px solid #cbdad5;border-radius:9px;background:white;color:#315a51;font-size:12px;font-weight:700}.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}.metric-grid article{background:white;border:1px solid #dfe8e4;border-radius:14px;padding:19px;display:grid;grid-template-columns:1fr auto;gap:10px}.metric-grid article>span{color:#687d78;font-size:12px}.metric-grid strong{grid-column:1;font-size:28px;letter-spacing:-.04em}.metric-grid small{grid-column:2;grid-row:2;align-self:center;color:#8b9d98;font-size:9px}.metric-grid .good{color:#12916e}.metric-grid .warn{color:#d26850}.table-card{background:white;border:1px solid #dfe8e4;border-radius:16px;overflow:hidden}.table-toolbar{padding:18px 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e5ece9}.table-toolbar h2{font-size:15px;margin:0 0 3px}.table-toolbar>div>span{font-size:10px;color:#8a9c97}.filters{display:flex;gap:8px}.filters input,.filters select{border:1px solid #d6e1dd;background:#fafcfb;border-radius:8px;padding:9px 10px;color:#49625c;font-size:11px;outline:0}.filters input{width:220px}.table-scroll{overflow:auto}table{width:100%;border-collapse:collapse;min-width:900px}th{text-align:left;background:#f8faf9;color:#7d8f8a;font-size:9px;letter-spacing:.08em;text-transform:uppercase;padding:11px 15px;border-bottom:1px solid #e5ece9}td{padding:14px 15px;border-bottom:1px solid #edf1ef;color:#526b65;font-size:11px;vertical-align:middle}tbody tr:last-child td{border-bottom:0}.status-chip,.risk-chip{display:inline-flex;align-items:center;padding:5px 8px;border-radius:99px;font-size:9px;font-weight:750}.status-chip.active{background:#e8f7f1;color:#0f8867}.status-chip.blocked{background:#fff0ec;color:#b6503c}.status-chip.disabled{background:#f1f2f2;color:#6e7775}.risk-chip{background:#edf8f3;color:#287e67}.link-cell a{display:block;color:#0b8567;font-weight:750;font-size:12px}.link-cell small,td>small{display:block;color:#96a49f;margin-top:4px;max-width:280px;overflow:hidden;text-overflow:ellipsis}.row-actions{display:flex;gap:5px}.row-actions button{border:1px solid #d8e2df;background:white;border-radius:6px;padding:6px 8px;color:#4d665f;font-size:9px}.row-actions button:hover{border-color:#9fcabf;color:#08775c}.row-actions .danger{color:#b75443}.empty-row{text-align:center;padding:40px}.info-page{min-height:100vh;padding:34px 20px 70px;background:radial-gradient(circle at 20% 15%,rgba(52,191,149,.1),transparent 30%),#f7faf7}.mini-brand{display:block;width:min(620px,100%);margin:0 auto 30px;font-weight:800;letter-spacing:-.02em}.info-card{width:min(620px,100%);margin:auto;background:white;border:1px solid #dfe8e4;border-radius:18px;padding:34px;box-shadow:0 20px 60px rgba(30,75,64,.07)}.info-card h1{font-size:34px;letter-spacing:-.04em;margin:13px 0 12px}.info-card>p:not(.eyebrow){color:#687d78;line-height:1.8;font-size:14px}.report-form{display:grid;gap:17px;margin-top:26px}.report-form label{display:grid;gap:8px;color:#29443e;font-size:12px;font-weight:700}.report-form label small{font-weight:500;color:#82958f}.report-form input,.report-form select,.report-form textarea{width:100%;border:1px solid #d6e2de;border-radius:9px;padding:12px;background:#fbfdfc;color:#2d4942;outline:0}.report-form input:focus,.report-form select:focus,.report-form textarea:focus{border-color:var(--mint);box-shadow:0 0 0 3px rgba(23,169,131,.08)}.success-panel{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:24px;margin-top:24px;border-radius:12px;background:#edf9f4;color:#286b59}.success-panel strong{font-size:18px}.success-panel span{font-size:13px}.success-panel a,.text-link{margin-top:8px;color:#0b8265;font-size:12px;font-weight:750}.prose ul{color:#586f69;font-size:14px;line-height:1.9;padding-left:20px}.prose p{margin:16px 0}
@media(max-width:800px){.metric-grid{grid-template-columns:repeat(2,1fr)}.dashboard-title{align-items:flex-start;gap:18px}.filters{width:100%;margin-top:12px}.filters input{flex:1;width:auto}.table-toolbar{align-items:flex-start;flex-direction:column}.dashboard-header{grid-template-columns:1fr auto}.dashboard-header>span{display:none}}@media(max-width:520px){.metric-grid{grid-template-columns:1fr}.dashboard-title{flex-direction:column}.dashboard-title h1{font-size:31px}.info-card{padding:24px}.dashboard-header>a:last-child{font-size:0}.dashboard-header>a:last-child::after{content:"首页 ↗";font-size:11px}}

[hidden]{display:none!important}.turnstile-wrap{display:flex;justify-content:center;margin-top:18px}.login-page{min-height:100vh;display:grid;place-items:center;padding:30px;background:radial-gradient(circle at 20% 20%,rgba(23,169,131,.12),transparent 32%),#f6f9f7}.login-card{width:min(430px,100%);padding:34px;background:#fff;border:1px solid #dfe8e4;border-radius:18px;box-shadow:0 22px 70px rgba(30,75,64,.1)}.login-card .mini-brand{width:auto;margin:0 0 34px}.login-card h1{margin:14px 0 8px;font-size:31px;letter-spacing:-.04em}.login-card>p:not(.eyebrow){color:#718580;font-size:13px}.login-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.login-card-head .mini-brand{margin:0}.admin-badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:99px;background:var(--mint-pale);border:1px solid rgba(32,201,151,.35);color:var(--mint-dark);font-size:10px;font-weight:800;letter-spacing:.1em}.login-back-home{text-align:center;margin-top:16px}.login-back-home a{color:#718580;font-size:12px;text-decoration:none;transition:color .2s}.login-back-home a:hover{color:var(--mint)}@media(max-width:600px){.login-page{padding:16px}.login-card{padding:26px 18px;border-radius:18px}.login-card h1{font-size:22px;margin:8px 0 6px}.login-card>p:not(.eyebrow){font-size:12px}.report-form{gap:14px;margin-top:20px}.report-form input{font-size:16px!important;padding:11px 12px}.primary-button{min-height:44px;font-size:14px}}.dashboard-header form{justify-self:end}.link-button{border:0;background:none;color:#607675;font-size:12px}.filters button,.small-button{border:1px solid #cbdad5;border-radius:8px;padding:9px 11px;background:#fff;color:#315a51;font-size:10px;font-weight:700}.pagination{display:flex;justify-content:flex-end;align-items:center;gap:12px;padding:14px 18px;border-top:1px solid #e5ece9;color:#788b86;font-size:10px}.pagination a{color:#08775c;font-weight:700}.reports-card{margin-top:20px;scroll-margin-top:20px}.details-cell{white-space:normal;max-width:330px;line-height:1.6}.center-card{text-align:center}.large-shield{margin:0 auto 18px;width:62px;height:68px;display:grid;place-items:center;color:white;font-size:28px;font-weight:800;background:#e0715b;clip-path:polygon(50% 0,92% 16%,86% 73%,50% 100%,14% 73%,8% 16%)}.center-card p{max-width:450px;margin:0 auto 24px}.primary-inline{display:inline-block;margin:8px;padding:11px 16px;border-radius:9px;background:var(--mint);color:#fff;font-size:12px;font-weight:750}.center-card .text-link{display:block}.row-actions{margin:0}.row-actions button:disabled{opacity:.5}.dashboard-header .brand b{color:var(--mint)}

/* Public locale switcher and multilingual layout */
.brand{direction:ltr}.site-header nav{gap:20px}.language-switcher{height:38px;display:flex;align-items:center;gap:5px;padding:0 7px 0 9px;border:1px solid #d3dfdb;border-radius:10px;background:rgba(255,255,255,.62);color:#607675}.language-switcher span{color:var(--mint-dark);font-size:15px}.language-switcher select{max-width:120px;border:0;outline:0;background:transparent;color:#48615f;font-size:12px;cursor:pointer}.hero h1{max-width:1050px;font-size:clamp(43px,6.3vw,76px);line-height:1.08;letter-spacing:-.055em;text-wrap:balance}.hero-copy{max-width:760px;margin-inline:auto;text-wrap:balance}.shorten-card,.trust-row,.safety-copy{text-align:start}.url-row,.slug-field{direction:ltr}.trust-row{width:min(900px,100%)}main[dir="rtl"] .hero h1{letter-spacing:0}main[dir="rtl"] .brand-mark{margin-right:10px;margin-left:0}
@media(max-width:720px){.site-header nav{gap:7px}.language-switcher{height:36px;padding-inline:7px}.language-switcher span{display:none}.language-switcher select{max-width:96px}.hero h1{font-size:clamp(37px,11vw,48px)}}
/* Refined URL.ASIA wordmark and touch-friendly mobile layout */
.brand-copy{display:flex;flex-direction:column;align-items:flex-start;line-height:1}.brand-name{display:flex;align-items:baseline;font-size:21px;font-weight:780}.brand-copy small{margin-top:4px;color:#78908a;font-size:7.5px;font-weight:800;line-height:1;letter-spacing:.17em;white-space:nowrap}.site-header{gap:16px}.site-header nav{min-width:0}.language-switcher,.nav-auth-btn,.nav-auth-pill{min-height:38px}.result-card strong,.result-card small{overflow-wrap:anywhere}
@media(max-width:720px){body{overflow-x:hidden}.site-header{height:76px}.brand-mark{flex:0 0 30px}.brand-name{font-size:19px}.brand-copy small{font-size:7px;letter-spacing:.13em}.language-switcher,.nav-auth-btn,.nav-auth-pill{min-height:38px}.nav-auth-btn{padding:6px 12px;font-size:12px}.url-row input,.slug-field input{font-size:16px}.shorten-card{width:100%}.site-footer{width:100%;padding-inline:20px}}
@media(max-width:440px){.site-header{gap:8px}.site-header nav{gap:5px}.language-switcher{padding-inline:6px}.language-switcher select{max-width:78px}#open-register-btn{display:none}#open-login-btn{padding:6px 11px;font-size:12px;display:inline-flex;align-items:center;gap:4px;background:var(--mint-pale);border-color:rgba(32,201,151,.45);color:var(--mint-dark);font-weight:700}#open-login-btn::before{content:"👤";font-size:11px}.hero{padding-top:46px}.brand-mark{width:28px;height:28px;flex-basis:28px;margin-right:8px}.brand-name{font-size:18px}.brand-copy small{font-size:6.5px;letter-spacing:.1em}}
@media(max-width:350px){.language-switcher select{max-width:68px}.brand-copy small{display:none}}
.assurance-row{width:min(860px,100%);margin:24px auto 0;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px}.assurance-row span{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:7px 12px;border:1px solid #d8e7e1;border-radius:999px;background:rgba(255,255,255,.68);color:#5d756f;font-size:11px;font-weight:650;line-height:1.35;box-shadow:0 3px 12px rgba(30,75,64,.035)}.assurance-row b{width:16px;height:16px;display:grid;place-items:center;border-radius:99px;background:var(--mint-pale);color:var(--mint-dark);font-size:9px}.assurance-row+.shorten-card{margin-top:22px}
@media(max-width:720px){.assurance-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:22px}.assurance-row span{justify-content:center;padding:8px 7px;text-align:center;font-size:10px;text-wrap:balance}}

/* Search-friendly public information, kept light enough for the short-link landing page. */
.seo-content{position:relative;z-index:1;padding-block:92px 82px;text-align:start}.seo-intro{width:min(780px,100%);margin-inline:auto;text-align:center}.seo-intro h2,.how-section>h2,.faq-section>h2{margin:16px 0 14px;font-size:clamp(28px,4vw,42px);line-height:1.15;letter-spacing:-.04em;text-wrap:balance}.seo-intro>p:last-child{margin:0;color:var(--muted);font-size:15px;line-height:1.9;text-wrap:pretty}.how-section,.faq-section{width:min(940px,100%);margin:76px auto 0}.how-section>h2,.faq-section>h2{text-align:center;font-size:clamp(25px,3.2vw,34px)}.step-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:28px}.step-grid article{min-height:190px;padding:25px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.72);box-shadow:0 12px 34px rgba(30,75,64,.045)}.step-grid article>span{width:31px;height:31px;display:grid;place-items:center;border-radius:10px;background:var(--mint-pale);color:var(--mint-dark);font-size:12px;font-weight:800}.step-grid h3{margin:20px 0 9px;font-size:16px;line-height:1.4}.step-grid p{margin:0;color:#6c817c;font-size:12px;line-height:1.75}.faq-list{width:min(780px,100%);margin:28px auto 0;border-top:1px solid var(--line)}.faq-list details{border-bottom:1px solid var(--line)}.faq-list summary{min-height:66px;display:flex;align-items:center;justify-content:space-between;gap:20px;cursor:pointer;list-style:none;font-size:14px;font-weight:720}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary span{flex:0 0 auto;color:var(--mint-dark);font-size:18px;transition:transform .2s}.faq-list details[open] summary span{transform:rotate(45deg)}.faq-list details>p{margin:0;padding:0 46px 22px 0;color:#687d78;font-size:13px;line-height:1.8}.site-footer{border-top:1px solid rgba(223,232,228,.8)}main[dir="rtl"] .faq-list details>p{padding:0 0 22px 46px}
@media(max-width:720px){.seo-content{padding-block:68px 58px}.seo-intro{text-align:start}.seo-intro h2,.how-section>h2,.faq-section>h2{text-align:start;letter-spacing:-.025em}.step-grid{grid-template-columns:1fr}.step-grid article{min-height:auto}.how-section,.faq-section{margin-top:58px}.faq-list summary{font-size:13px;line-height:1.55;padding-block:6px}.faq-list details>p{padding-right:30px}.site-footer{margin-top:0}}

/* ===== Theme Toggle ===== */
.theme-toggle{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid #d3dfdb;border-radius:10px;background:rgba(255,255,255,.62);color:#607675;cursor:pointer;font-size:16px;transition:border-color .2s,background .2s}.theme-toggle:hover{border-color:var(--mint)}

/* ===== Expiry Segmented Track & Chips ===== */
.expiry-row{padding-top:18px}
.expiry-track{display:flex;gap:6px;padding:4px;background:#eef4f1;border-radius:12px;border:1px solid #dce8e3;flex-wrap:wrap;align-items:stretch}
.expiry-chip{position:relative;flex:1 1 calc(20% - 6px);min-width:62px;display:inline-flex;align-items:center;justify-content:center;padding:9px 10px;border-radius:8px;font-size:13px;font-weight:600;color:#53706a;cursor:pointer;user-select:none;transition:all .18s ease;text-align:center;border:1px solid transparent}
.expiry-chip:hover{color:var(--ink);background:rgba(255,255,255,.65)}
.expiry-chip input{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.expiry-chip.is-selected,.expiry-chip:has(input:checked){background:#ffffff;color:var(--mint-dark);font-weight:750;border-color:rgba(23,169,131,.35);box-shadow:0 2px 8px rgba(23,169,131,.14),0 1px 2px rgba(0,0,0,.04)}
.expiry-chip.is-selected .chip-glow,.expiry-chip:has(input:checked) .chip-glow{width:5px;height:5px;border-radius:50%;background:var(--mint);margin-right:6px;display:inline-block;box-shadow:0 0 6px var(--mint)}
@media(max-width:520px){.expiry-chip{flex:1 1 calc(33.33% - 6px);font-size:12px;padding:8px 6px}}

/* ===== Modern Result Deck: Dual-Cabin Architecture ===== */
.result-deck{display:none;margin-top:22px;flex-direction:column;gap:14px}
.result-deck.is-visible{display:flex;animation:fadeSlideIn .25s ease-out}
@keyframes fadeSlideIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.result-card--primary{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:20px 22px;background:linear-gradient(135deg,#f4faf7 0%,#e8f7f1 100%);border:1.5px solid #bce6d7;border-radius:16px;box-shadow:0 8px 24px rgba(23,169,131,.08)}
.result-main-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.result-badge-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.result-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:750;color:#0a7d62;text-transform:uppercase;letter-spacing:.08em}
.badge-dot{width:6px;height:6px;border-radius:50%;background:#17a983;box-shadow:0 0 0 3px rgba(23,169,131,.2)}
.result-target-label{font-size:11px;color:#627c75;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:320px}
.result-link-display strong{font-size:22px;font-weight:800;color:#086b53;letter-spacing:-.02em;word-break:break-all;margin:6px 0 10px;display:block}
.result-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.btn-copy-main{display:inline-flex;align-items:center;gap:7px;background:linear-gradient(110deg,#18a985,#129278);color:white;border:none;border-radius:10px;padding:10px 18px;font-size:13px;font-weight:700;box-shadow:0 4px 14px rgba(24,169,133,.28);transition:all .18s;cursor:pointer}
.btn-copy-main:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(24,169,133,.35)}
.btn-visit-main{display:inline-flex;align-items:center;gap:6px;background:white;color:#0f8568;border:1px solid #bce6d7;border-radius:10px;padding:10px 16px;font-size:13px;font-weight:700;transition:all .18s;cursor:pointer;text-decoration:none}
.btn-visit-main:hover{background:#f0faf6;border-color:#18a985}
.result-qr-box{display:flex;flex-direction:column;align-items:center;padding:12px 14px;background:white;border:1px solid #c7e8dc;border-radius:14px;box-shadow:0 4px 12px rgba(23,169,131,.06);flex:0 0 auto;text-align:center}
.qr-tag{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:750;color:#0a7d62;margin-bottom:8px}
.qr-canvas-wrap{width:120px;height:120px;display:grid;place-items:center;background:white;border-radius:8px;overflow:hidden}
.qr-hint{font-size:10px;color:#769189;font-weight:600;margin-top:6px}
.result-card--vault{padding:16px 20px;background:#faf9f5;border:1.5px dashed #dfd4be;border-radius:14px;display:flex;flex-direction:column;gap:8px}
.vault-head{display:flex;justify-content:space-between;align-items:center}
.vault-badge{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:750;color:#856417}
.vault-privacy{font-size:10.5px;font-weight:600;color:#a4812a;background:#fff1cc;padding:2px 8px;border-radius:99px}
.vault-link-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.vault-link-row strong{flex:1;font-size:13.5px;font-weight:700;color:#755610;word-break:break-all}
.btn-copy-vault{display:inline-flex;align-items:center;gap:5px;background:#fff8e8;border:1px solid #dccb99;border-radius:8px;color:#7b5b12;padding:7px 12px;font-size:12px;font-weight:700;cursor:pointer;transition:all .16s}
.btn-copy-vault:hover{background:#fdead0}
.btn-open-vault{display:inline-flex;align-items:center;gap:4px;background:#856417;color:white;border-radius:8px;padding:7px 12px;font-size:12px;font-weight:700;text-decoration:none;transition:all .16s}
.btn-open-vault:hover{background:#6b5010}
.vault-note{font-size:11px;color:#937324;margin:0;line-height:1.5}
.btn-dashboard-main{display:inline-flex;align-items:center;gap:6px;background:var(--paper,#fff);color:#0a7d62;border:1.5px solid #bce6d7;border-radius:10px;padding:10px 16px;font-size:13px;font-weight:700;transition:all .18s;cursor:pointer;text-decoration:none}
.btn-dashboard-main:hover{background:#f0faf6;border-color:#18a985;transform:translateY(-1px)}
.result-card--vault-user{background:linear-gradient(135deg,rgba(24,169,133,0.08) 0%,rgba(24,169,133,0.03) 100%)!important;border:1.5px solid #bce6d7!important}
.vault-badge-user{color:#0a7d62!important}
.vault-user-content{display:flex;flex-direction:column;gap:10px}
.vault-user-text{font-size:12.5px;color:#4a6860;margin:0;line-height:1.55}
.btn-dash-jump-card{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(110deg,#18a985,#10856d);color:#fff!important;border:none;border-radius:10px;padding:11px 20px;font-size:13.5px;font-weight:700;text-decoration:none;box-shadow:0 4px 14px rgba(24,169,133,.25);transition:all .18s ease;width:fit-content}
.btn-dash-jump-card:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(24,169,133,.35);background:linear-gradient(110deg,#1cb68f,#129278)}
@media(max-width:600px){.btn-dash-jump-card{width:100%}}
.nav-auth-state-wrap{display:inline-flex;align-items:center}
.nav-auth-group{display:inline-flex;align-items:center;gap:8px}
@media(max-width:680px){.result-card--primary{flex-direction:column;align-items:stretch}.result-qr-box{margin-top:10px}}

/* ===== Stats Page ===== */
.stats-card{text-align:center}.stats-link-row{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin:16px 0 24px}.stats-link-row strong{font-size:18px;color:#0a8064;word-break:break-all}.stats-metric{margin:20px 0}.stats-number{display:block;font-size:56px;font-weight:800;letter-spacing:-.04em;color:var(--ink)}.stats-label{display:block;margin-top:4px;color:var(--muted);font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.1em}.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:24px auto;max-width:420px;text-align:left}.stats-grid>div{padding:12px 14px;background:var(--mint-pale);border-radius:10px}.stats-grid span{display:block;color:var(--muted);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px}.stats-grid strong{font-size:14px;color:var(--ink)}
.qr-container{margin:28px auto;display:flex;flex-direction:column;align-items:center;gap:12px}.qr-container canvas{border-radius:10px;border:1px solid var(--line)}.qr-actions{display:flex;gap:8px}.qr-actions button{padding:8px 14px;font-size:11px}
.stats-warning{margin:20px auto;max-width:400px;padding:12px 16px;border-radius:10px;background:#fef9ec;border:1px solid #f0e4c0;color:#8a6d1b;font-size:12px;font-weight:600;display:flex;align-items:center;gap:8px}.stats-target{display:block;margin-top:16px;color:var(--muted);font-size:11px;word-break:break-all}
.expired-shield{background:#e0993c!important}

/* ===== Modern Recent Links Panel ===== */
.recent-panel{margin-top:36px;padding:22px 24px;background:rgba(255,255,255,.8);border:1px solid rgba(207,223,216,.8);border-radius:18px;backdrop-filter:blur(16px);box-shadow:0 10px 30px rgba(30,75,64,.04)}
.recent-header{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.recent-header-main{display:flex;align-items:center;justify-content:space-between;width:100%;gap:12px}
.recent-friendly-hint{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px;padding:6px 14px;border-radius:999px;background:rgba(23,169,131,.08);border:1px solid rgba(23,169,131,.24);font-size:12px;color:var(--ink,#2d3748);box-shadow:0 1px 3px rgba(23,169,131,.05);animation:hintPulse 3.5s infinite ease-in-out;transition:all .2s ease;width:fit-content;max-width:100%}
.recent-friendly-hint:hover{background:rgba(23,169,131,.13);border-color:rgba(23,169,131,.38)}
.recent-friendly-hint .hint-sparkle{font-size:13px}
.recent-friendly-hint .hint-text{color:var(--ink,#334155)}
.recent-friendly-hint .hint-text strong{color:var(--mint-dark,#0c8a6a)}
.recent-friendly-hint .hint-link{color:var(--mint-dark,#0c8a6a);font-weight:700;text-decoration:underline;text-underline-offset:2px;margin-left:2px;white-space:nowrap}
.recent-friendly-hint .hint-link:hover{color:var(--mint,#17a983)}
@keyframes hintPulse{0%,100%{border-color:rgba(23,169,131,.24);box-shadow:0 0 0 0 rgba(23,169,131,0)}50%{border-color:rgba(23,169,131,.45);box-shadow:0 0 8px rgba(23,169,131,.12)}}
html.theme-dark .recent-friendly-hint{background:rgba(23,169,131,.12);border-color:rgba(23,169,131,.3);color:#e2e8f0}
html.theme-dark .recent-friendly-hint .hint-text{color:#cbd5e1}
html.theme-dark .recent-friendly-hint .hint-text strong{color:#34d399}
html.theme-dark .recent-friendly-hint .hint-link{color:#34d399}
.recent-title-wrap{display:flex;align-items:center;gap:8px}
.recent-indicator{width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 3px rgba(23,169,131,.18)}
.recent-header h3{margin:0;font-size:14px;font-weight:750;color:var(--ink)}
.recent-badge{font-size:10px;font-weight:750;color:var(--mint-dark);background:var(--mint-pale);padding:2px 7px;border-radius:99px}
.recent-clear{display:inline-flex;align-items:center;gap:5px;border:1px solid #dce7e3;background:white;color:#768f89;font-size:11px;font-weight:600;cursor:pointer;padding:5px 10px;border-radius:8px;transition:all .18s}
.recent-clear:hover{color:#d1493b;border-color:#f3c2bc;background:#fff5f4}
.recent-list{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.recent-item{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 15px;border-radius:12px;background:rgba(255,255,255,.85);border:1px solid #e0eae5;transition:all .18s ease;box-shadow:0 1px 3px rgba(0,0,0,.02)}
.recent-item:hover{border-color:#b7dbd0;transform:translateY(-1px);box-shadow:0 6px 18px rgba(23,169,131,.08);background:#ffffff}
.recent-item-info{min-width:0;display:flex;flex-direction:column;gap:3px}
.recent-item-head{display:flex;align-items:center;gap:6px}
.recent-link-icon{color:var(--mint);flex:0 0 auto}
.recent-slug{font-size:13.5px;font-weight:750;color:#0c8a6a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-decoration:none}
.recent-target{font-size:11px;color:#7e948f;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:480px}
.recent-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.recent-btn{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:650;padding:6px 11px;border-radius:8px;border:1px solid #d5e3df;background:white;color:#49635d;cursor:pointer;transition:all .16s ease;text-decoration:none}
.recent-btn:hover{background:var(--mint-pale);border-color:var(--mint);color:var(--mint-dark)}
.recent-stats-btn{border-color:#cbe2da;color:#128e6f}
.recent-copy-btn.is-copied{background:#e8f7f1;border-color:#17a983;color:#0c8a6a;font-weight:700}
.recent-note{margin:12px 0 0;text-align:center;color:var(--muted);font-size:10px;font-weight:500}

/* ===== Theme Toggle Component ===== */
.theme-toggle{width:38px;height:38px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;position:relative;cursor:pointer;border:1px solid #d3dfdb;background:rgba(255,255,255,.62);color:#607675;transition:all .2s ease;padding:0}
.theme-toggle:hover{background:#ffffff;color:var(--mint-dark);border-color:var(--mint);box-shadow:0 4px 12px rgba(23,169,131,.12)}
.theme-icon{position:absolute;transition:transform .3s cubic-bezier(0.4,0,0.2,1),opacity .2s ease}
.theme-toggle .icon-sun{opacity:0;transform:rotate(-90deg) scale(0.6)}
.theme-toggle .icon-moon{opacity:1;transform:rotate(0deg) scale(1)}
html.theme-dark .theme-toggle .icon-sun{opacity:1;transform:rotate(0deg) scale(1)}
html.theme-dark .theme-toggle .icon-moon{opacity:0;transform:rotate(90deg) scale(0.6)}

/* ===== Dark Mode Engine (Manual & System Auto) ===== */
html.theme-dark,:root.theme-dark{--ink:#e2ece8;--muted:#8ca39d;--paper:#0c1614;--line:#1f322c;--mint:#20c997;--mint-dark:#3ddda9;--mint-pale:#132a23;--white:#141f1c}
html.theme-dark body{background:var(--paper);color:var(--ink)}
html.theme-dark .ambient-one{background:radial-gradient(circle,rgba(76,211,167,.06),transparent 67%)}
html.theme-dark .ambient-two{background:radial-gradient(circle,rgba(49,168,206,.05),transparent 68%)}
html.theme-dark .shorten-card{background:rgba(20,31,28,.94);border-color:rgba(31,50,44,.9);box-shadow:0 24px 70px rgba(0,0,0,.45)}
html.theme-dark .url-row,html.theme-dark .slug-field{background:#1a2a25;border-color:#2a3b35}
html.theme-dark .url-row input,html.theme-dark .slug-field input{color:var(--ink)}
html.theme-dark input::placeholder{color:#5a726c}
html.theme-dark .protocol-badge{background:#132a23;color:#3ddda9}
html.theme-dark .theme-toggle{background:rgba(20,31,28,.65);border-color:#1f322c;color:#8fa8a2}
html.theme-dark .theme-toggle:hover{background:#192a25;border-color:var(--mint);color:#3ddda9}
html.theme-dark .language-switcher{border-color:#1f322c;background:rgba(20,31,28,.62);color:#8fa8a2}
html.theme-dark .language-switcher select{color:#8fa8a2}
html.theme-dark .brand-mark{border-color:#2a3b35}
html.theme-dark .assurance-row span{border-color:#1f322c;background:rgba(20,31,28,.62);color:#7a948e;box-shadow:none}
html.theme-dark .assurance-row b{background:#132a23}
html.theme-dark .trust-row article{background:rgba(19,42,35,.4)}
html.theme-dark .feature-icon{background:#132a23}
html.theme-dark .safety-strip{border-color:#1f322c;background:rgba(19,42,35,.5)}
html.theme-dark .site-footer{color:#5a726c}
html.theme-dark .footer-brand{color:#7a948e}

/* Dark mode: Expiry track & chips */
html.theme-dark .expiry-track{background:#121e1b;border-color:#1e332c}
html.theme-dark .expiry-chip{color:#8ba59f}
html.theme-dark .expiry-chip:hover{color:#e2ece8;background:rgba(255,255,255,.05)}
html.theme-dark .expiry-chip.is-selected,html.theme-dark .expiry-chip:has(input:checked){background:#1a2c27;color:#3ddda9;border-color:var(--mint);box-shadow:0 0 12px rgba(32,201,151,.2)}

/* Dark mode: Result Deck */
html.theme-dark .result-card--primary{background:linear-gradient(135deg,#132722 0%,#0e1f1a 100%);border-color:#1f4237;box-shadow:0 8px 24px rgba(0,0,0,.3)}
html.theme-dark .result-link-display strong{color:#3ddda9}
html.theme-dark .result-target-label{color:#769189}
html.theme-dark .btn-visit-main{background:#192d27;border-color:#284c41;color:#3ddda9}
html.theme-dark .btn-visit-main:hover{background:#223d34;border-color:var(--mint)}
html.theme-dark .result-qr-box{background:#14221e;border-color:#213c34;box-shadow:none}
html.theme-dark .qr-tag{color:#3ddda9}
html.theme-dark .qr-canvas-wrap{background:#141f1c}
html.theme-dark .result-card--vault{background:#1c1912;border-color:#48381c}
html.theme-dark .vault-badge{color:#e5be65}
html.theme-dark .vault-privacy{background:#35270f;color:#e8c679}
html.theme-dark .vault-link-row strong{color:#f5d78e}
html.theme-dark .btn-copy-vault{background:#292214;border-color:#534120;color:#f5d78e}
html.theme-dark .btn-copy-vault:hover{background:#3a301c}
html.theme-dark .btn-open-vault{background:#9e7924}
html.theme-dark .btn-open-vault:hover{background:#ba8e2a}
html.theme-dark .vault-note{color:#c5a14d}
html.theme-dark .result-card--vault-user{background:linear-gradient(135deg,rgba(32,201,151,0.12) 0%,rgba(20,31,28,0.85) 100%)!important;border-color:rgba(32,201,151,0.3)!important}
html.theme-dark .vault-user-text{color:#9eb9b2}
html.theme-dark .btn-dashboard-main{background:#142420;color:#3ddda9;border-color:#24483e}
html.theme-dark .btn-dashboard-main:hover{background:#1b332d;border-color:#3ddda9}

/* Dark mode: Recent Panel */
html.theme-dark .recent-panel{background:rgba(20,31,28,.75);border-color:rgba(31,50,44,.8)}
html.theme-dark .recent-item{background:rgba(20,31,28,.6);border-color:#1f322c}
html.theme-dark .recent-item:hover{background:#182824;border-color:var(--mint)}
html.theme-dark .recent-slug{color:#3ddda9}
html.theme-dark .recent-target{color:#6c857f}
html.theme-dark .recent-btn{background:#182824;border-color:#2a443c;color:#8fa8a2}
html.theme-dark .recent-btn:hover{background:#20352f;border-color:var(--mint);color:#3ddda9}
html.theme-dark .recent-clear{border-color:#2a443c;background:#182824;color:#8fa8a2}
html.theme-dark .recent-clear:hover{background:#2a1917;color:#f08579;border-color:#4a2723}
html.theme-dark .recent-badge{background:#132a23;color:#3ddda9}

/* Dark mode: Admin / Info / SEO Pages */
html.theme-dark .info-page{background:radial-gradient(circle at 20% 15%,rgba(32,201,151,.06),transparent 30%),#0c1614}
html.theme-dark .info-card{background:#141f1c;border-color:#1f322c;box-shadow:0 20px 60px rgba(0,0,0,.25)}
html.theme-dark .info-card>p:not(.eyebrow){color:#7a948e}
html.theme-dark .stats-warning{background:#2a2310;border-color:#3d3418;color:#d4b94e}
html.theme-dark .nav-pill{border-color:#1f322c;background:rgba(20,31,28,.55);color:#8fa8a2}
html.theme-dark .seo-content{color:var(--ink)}
html.theme-dark .seo-intro>p:last-child{color:var(--muted)}
html.theme-dark .step-grid article{border-color:var(--line);background:rgba(20,31,28,.5);box-shadow:none}
html.theme-dark .step-grid p{color:#7a948e}
html.theme-dark .faq-list{border-color:var(--line)}
html.theme-dark .faq-list details{border-color:var(--line)}
html.theme-dark .faq-list details>p{color:#7a948e}
html.theme-dark .dashboard-page{background:#0c1614}
html.theme-dark .metric-grid article{background:#141f1c;border-color:#1f322c}
html.theme-dark .table-card{background:#141f1c;border-color:#1f322c}
html.theme-dark th{background:#111c19;color:#5a726c;border-color:#1f322c}
html.theme-dark td{color:#8fa8a2;border-color:#1a2a25}
html.theme-dark .outline-button{background:#1a2a25;border-color:#2a3b35;color:#8fa8a2}
html.theme-dark .login-page{background:radial-gradient(circle at 20% 20%,rgba(32,201,151,.08),transparent 32%),#0c1614}
html.theme-dark .login-card{background:#141f1c;border-color:#1f322c}
html.theme-dark .report-form input,html.theme-dark .report-form select,html.theme-dark .report-form textarea{background:#1a2a25;border-color:#2a3b35;color:var(--ink)}
html.theme-dark .filters input,html.theme-dark .filters select{background:#1a2a25;border-color:#2a3b35;color:#8fa8a2}

/* ===== Auto Dark Mode Support for system prefers ===== */
@media(prefers-color-scheme:dark){
  html:not(.theme-light){--ink:#e2ece8;--muted:#8ca39d;--paper:#0c1614;--line:#1f322c;--mint:#20c997;--mint-dark:#3ddda9;--mint-pale:#132a23;--white:#141f1c}
  html:not(.theme-light) body{background:var(--paper);color:var(--ink)}
  html:not(.theme-light) .shorten-card{background:rgba(20,31,28,.94);border-color:rgba(31,50,44,.9);box-shadow:0 24px 70px rgba(0,0,0,.45)}
  html:not(.theme-light) .url-row,html:not(.theme-light) .slug-field{background:#1a2a25;border-color:#2a3b35}
  html:not(.theme-light) .url-row input,html:not(.theme-light) .slug-field input{color:var(--ink)}
  html:not(.theme-light) input::placeholder{color:#5a726c}
  html:not(.theme-light) .protocol-badge{background:#132a23;color:#3ddda9}
  html:not(.theme-light) .theme-toggle{background:rgba(20,31,28,.65);border-color:#1f322c;color:#8fa8a2}
  html:not(.theme-light) .theme-toggle .icon-sun{opacity:1;transform:rotate(0deg) scale(1)}
  html:not(.theme-light) .theme-toggle .icon-moon{opacity:0;transform:rotate(90deg) scale(0.6)}
  html:not(.theme-light) .language-switcher{border-color:#1f322c;background:rgba(20,31,28,.62);color:#8fa8a2}
  html:not(.theme-light) .language-switcher select{color:#8fa8a2}
  html:not(.theme-light) .brand-mark{border-color:#2a3b35}
  html:not(.theme-light) .expiry-track{background:#121e1b;border-color:#1e332c}
  html:not(.theme-light) .expiry-chip{color:#8ba59f}
  html:not(.theme-light) .expiry-chip.is-selected,html:not(.theme-light) .expiry-chip:has(input:checked){background:#1a2c27;color:#3ddda9;border-color:var(--mint)}
  html:not(.theme-light) .result-card--primary{background:linear-gradient(135deg,#132722 0%,#0e1f1a 100%);border-color:#1f4237}
  html:not(.theme-light) .result-link-display strong{color:#3ddda9}
  html:not(.theme-light) .result-qr-box{background:#14221e;border-color:#213c34}
  html:not(.theme-light) .result-card--vault{background:#1c1912;border-color:#48381c}
  html:not(.theme-light) .vault-badge{color:#e5be65}
  html:not(.theme-light) .recent-panel{background:rgba(20,31,28,.75);border-color:rgba(31,50,44,.8)}
  html:not(.theme-light) .recent-item{background:rgba(20,31,28,.6);border-color:#1f322c}
  html:not(.theme-light) .recent-slug{color:#3ddda9}
  html:not(.theme-light) .recent-btn{background:#182824;border-color:#2a443c;color:#8fa8a2}
  html:not(.theme-light) .result-card--vault-user{background:linear-gradient(135deg,rgba(32,201,151,0.12) 0%,rgba(20,31,28,0.85) 100%)!important;border-color:rgba(32,201,151,0.3)!important}
  html:not(.theme-light) .vault-user-text{color:#9eb9b2}
  html:not(.theme-light) .btn-dashboard-main{background:#142420;color:#3ddda9;border-color:#24483e}
  html:not(.theme-light) .btn-dashboard-main:hover{background:#1b332d;border-color:#3ddda9}
}

/* ===== Authentication & Navbar Auth Buttons ===== */
.nav-auth-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.7);
  color: var(--ink);
  cursor: pointer;
  transition: all .2s ease;
  line-height: 1;
}
.nav-auth-btn:hover {
  border-color: var(--mint);
  color: var(--mint-dark);
  transform: translateY(-1px);
}
.nav-auth-primary {
  background: var(--mint);
  border-color: var(--mint);
  color: #071913 !important;
  font-weight: 700;
}
.nav-auth-primary:hover {
  background: #17b384;
  border-color: #17b384;
  color: #04100c !important;
}
.nav-auth-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  border: 1px solid var(--line);
  background: var(--mint-pale);
  color: var(--mint-dark);
  text-decoration: none;
  transition: all .2s ease;
}
.nav-auth-pill:hover {
  border-color: var(--mint);
  transform: translateY(-1px);
}
.avatar-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mint);
}
.nav-logout-inline {
  display: inline-flex;
  margin: 0;
  padding: 0;
}
.nav-logout-btn {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 10px;
  cursor: pointer;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .2s ease;
}
.nav-logout-btn:hover {
  color: #e54d4d;
  border-color: #e54d4d;
}

/* ===== Auth Modal Backdrop & Dialog ===== */
.auth-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.auth-modal-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}
.auth-modal-dialog {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 24px 28px 30px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.4);
  transform: translateY(12px) scale(0.98);
  transition: transform .25s ease;
  margin: auto;
}
.auth-modal-backdrop.is-open .auth-modal-dialog {
  transform: translateY(0) scale(1);
}
.auth-modal-dialog.modal-bounce {
  animation: modalShake 0.35s ease-in-out;
}
@keyframes modalShake {
  0%, 100% { transform: translateY(0) scale(1); }
  25% { transform: translateY(0) scale(1.018); }
  50% { transform: translateY(0) scale(0.992); }
  75% { transform: translateY(0) scale(1.008); }
}
.auth-modal-top-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
  width: 100%;
}
.auth-modal-top-bar .auth-tabs {
  flex: 1;
  margin-bottom: 0;
}
.auth-modal-close {
  position: static;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  transition: all .2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.auth-modal-close svg {
  display: block;
  pointer-events: none;
}
.auth-modal-close:hover {
  background: var(--line);
  color: var(--ink);
  transform: rotate(90deg) scale(1.08);
  border-color: rgba(32, 201, 151, 0.5);
}
.auth-modal-close:active {
  transform: rotate(90deg) scale(0.95);
}

/* ===== Auth Tabs & Panels ===== */
.auth-tabs {
  display: flex;
  background: var(--mint-pale);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 24px;
  gap: 4px;
}
.auth-tab {
  flex: 1;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.875rem;
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: all .2s ease;
}
.auth-tab.is-active {
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.auth-panel {
  display: none;
}
.auth-panel.is-active {
  display: block;
}
.auth-panel-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 20px;
  color: var(--ink);
}
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}
.auth-field label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted);
}
.auth-field input {
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-size: 0.9375rem;
  outline: none;
  transition: border-color .2s;
  box-sizing: border-box;
}
.auth-field input:focus {
  border-color: var(--mint);
}
.code-input-group {
  display: flex;
  gap: 8px;
}
.code-input-group input {
  flex: 1;
  letter-spacing: 2px;
  font-weight: 700;
}
.send-code-btn {
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid var(--mint);
  background: var(--mint-pale);
  color: var(--mint-dark);
  font-weight: 600;
  font-size: 0.8125rem;
  cursor: pointer;
  white-space: nowrap;
  transition: all .2s ease;
}
.send-code-btn:hover:not(:disabled) {
  background: var(--mint);
  color: #071913;
}
.send-code-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  border-color: var(--line);
  color: var(--muted);
}
.auth-error-banner {
  display: none;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(229,77,77,0.12);
  border: 1px solid rgba(229,77,77,0.3);
  color: #ff6b6b;
  font-size: 0.8125rem;
  line-height: 1.4;
}
.auth-error-banner.is-visible {
  display: block;
}
.auth-submit-btn {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: none;
  background: var(--mint);
  color: #071913;
  font-weight: 700;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: all .2s ease;
  margin-top: 4px;
}
.auth-submit-btn:hover:not(:disabled) {
  background: #17b384;
  transform: translateY(-1px);
}
.auth-submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.auth-switch-prompt {
  font-size: 0.8125rem;
  color: var(--muted);
  text-align: center;
  margin: 12px 0 0;
}
.auth-switch-prompt a {
  color: var(--mint);
  text-decoration: underline;
  cursor: pointer;
  transition: opacity 0.15s ease, color 0.15s ease;
}
.auth-switch-prompt a:hover {
  color: var(--mint-strong, #059669);
}
.auth-switch-split {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}
.auth-switch-sep {
  opacity: 0.35;
  user-select: none;
  font-weight: 600;
}
.auth-forgot-link {
  color: var(--mint) !important;
  text-decoration: none !important;
  font-weight: 500;
  transition: all 0.15s ease;
}
.auth-forgot-link:hover {
  text-decoration: underline !important;
  opacity: 0.85;
}
.auth-back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--muted) !important;
  text-decoration: none !important;
  font-weight: 500;
  transition: color 0.15s ease;
}
.auth-back-link:hover {
  color: var(--mint) !important;
  text-decoration: underline !important;
}
.turnstile-auth-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 6px 0;
  min-height: 65px;
  width: 100%;
}

/* ===== Standalone Auth Page ===== */
.auth-page-main {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.auth-standalone-card {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
}
.auth-card-inner {
  width: 100%;
  max-width: 440px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 36px 30px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.3);
}

/* ===== Mobile & Height Adaptive Ergonomics for Auth Modal & Standalone Cards ===== */
@media (max-width: 600px) {
  .auth-modal-backdrop {
    padding: 12px;
  }
  .auth-modal-dialog {
    padding: 24px 18px 20px;
    border-radius: 18px;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
  }
  .auth-modal-top-bar {
    gap: 8px;
    margin-bottom: 16px;
  }
  .auth-modal-close {
    width: 34px;
    height: 34px;
  }
  .auth-panel-title {
    font-size: 1.15rem;
    margin-bottom: 14px;
  }
  .auth-form {
    gap: 12px;
  }
  .auth-field {
    gap: 4px;
  }
  .auth-field label {
    font-size: 0.8rem;
  }
  .auth-field input {
    font-size: 16px !important; /* Critical: prevents iOS Safari automatic viewport zooming */
    padding: 10px 12px;
  }
  .send-code-btn {
    padding: 10px 12px;
    font-size: 0.8rem;
  }
  .auth-submit-btn {
    min-height: 44px;
    font-size: 0.95rem;
  }
  .auth-standalone-card {
    padding: 20px 12px;
  }
  .auth-card-inner {
    padding: 24px 18px 20px;
    border-radius: 18px;
  }
  .auth-card-inner .auth-field input {
    font-size: 16px !important;
  }
}

/* Height-adaptive: compact mode on laptops / shallow screens / open virtual keyboard */
@media (max-height: 720px) {
  .auth-modal-dialog {
    padding: 20px 20px 16px;
    max-height: calc(100vh - 20px);
    overflow-y: auto;
  }
  .auth-modal-top-bar {
    margin-bottom: 12px;
    gap: 8px;
  }
  .auth-panel-title {
    margin-bottom: 12px;
    font-size: 1.05rem;
  }
  .auth-form {
    gap: 10px;
  }
  .auth-field {
    gap: 3px;
  }
  .auth-field label {
    font-size: 0.75rem;
  }
  .auth-field input {
    padding: 8px 12px;
  }
  .turnstile-auth-wrap {
    margin: 2px 0;
  }
  .auth-submit-btn {
    min-height: 40px;
  }
}

/* ===== User Dashboard Layout ===== */
.dashboard-main {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.dashboard-hero {
  flex: 1;
  padding-top: 36px;
  padding-bottom: 60px;
}
.dash-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 32px;
  flex-wrap: wrap;
  gap: 16px;
}
.dash-header-row h1 {
  margin: 4px 0 0;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.btn-create-link {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--mint);
  color: #071913 !important;
  font-weight: 700;
  text-decoration: none;
  font-size: 0.875rem;
  transition: all .2s;
}
.btn-create-link:hover {
  background: #17b384;
  transform: translateY(-1px);
}
.user-profile-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--mint-pale);
  border: 1px solid var(--line);
  font-size: 0.8125rem;
  color: var(--mint-dark);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-email-text {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Metrics Grid */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}
.metric-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.metric-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.metric-value {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.1;
}
.metric-value small {
  font-size: 1rem;
  color: var(--muted);
  font-weight: 500;
}

/* In-Dashboard Shortlink Creator Card */
.dash-create-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px;
  margin-bottom: 32px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  transition: border-color .3s, box-shadow .3s;
}
.dash-create-card.is-highlighted {
  border-color: var(--mint);
  box-shadow: 0 0 0 3px rgba(32, 201, 151, 0.25);
}
.dash-create-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.dash-create-header h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
}
.dash-create-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.dash-create-url-row {
  display: flex;
  align-items: center;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 6px 14px;
  transition: border-color .2s;
}
.dash-create-url-row:focus-within {
  border-color: var(--mint);
}
.dash-create-url-row .protocol-badge {
  color: var(--mint);
  font-size: 1.1rem;
  margin-right: 10px;
  user-select: none;
}
.dash-create-url-row input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--ink);
  font-size: 1rem;
  padding: 8px 0;
}
.dash-create-options-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.dash-create-slug-field {
  display: flex;
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 4px 12px;
  flex: 1;
  min-width: 220px;
  transition: border-color .2s;
}
.dash-create-slug-field:focus-within {
  border-color: var(--mint);
}
.dash-create-slug-field span {
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 600;
  margin-right: 4px;
  user-select: none;
}
.dash-create-slug-field input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--ink);
  font-size: 0.9375rem;
  padding: 6px 0;
}
.dash-create-select-field {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 4px 12px;
  display: flex;
  align-items: center;
  transition: border-color .2s;
}
.dash-create-select-field:focus-within {
  border-color: var(--mint);
}
.dash-create-select-field select {
  background: transparent;
  border: none;
  outline: none;
  color: var(--ink);
  font-size: 0.875rem;
  padding: 6px 0;
  cursor: pointer;
}
.dash-create-submit-btn {
  background: var(--mint);
  color: #071913;
  border: none;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.9375rem;
  padding: 10px 24px;
  cursor: pointer;
  transition: all .2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.dash-create-submit-btn:hover {
  background: #2fe0aa;
  transform: translateY(-1px);
}
.dash-create-submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}
.dash-create-error {
  display: none;
  background: rgba(229, 77, 77, 0.12);
  border: 1px solid rgba(229, 77, 77, 0.3);
  color: #ff6b6b;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.875rem;
}
.dash-create-error.is-visible {
  display: block;
}

/* In-Dashboard Result Box */
.dash-create-result {
  display: none;
  margin-top: 20px;
  padding: 20px;
  background: rgba(32, 201, 151, 0.06);
  border: 1.5px solid rgba(32, 201, 151, 0.3);
  border-radius: 12px;
  animation: fadeIn 0.25s ease-out;
}
.dash-create-result.is-visible {
  display: block;
}
.dash-result-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
}
.dash-result-details {
  flex: 1;
  min-width: 260px;
}
.dash-result-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--mint);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.dash-result-link {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--mint-dark);
  text-decoration: none;
  display: block;
  margin-bottom: 12px;
  word-break: break-all;
}
.dash-result-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.dash-result-actions .btn-primary {
  background: var(--mint);
  color: #071913;
  padding: 7px 16px;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all .2s;
}
.dash-result-actions .btn-secondary {
  background: var(--paper);
  color: var(--ink);
  padding: 7px 16px;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  border: 1px solid var(--line);
  cursor: pointer;
  text-decoration: none;
  transition: all .2s;
}
.dash-result-actions .btn-primary:hover {
  background: #2fe0aa;
}
.dash-result-actions .btn-secondary:hover {
  border-color: var(--mint);
}
.dash-result-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.dash-result-qr canvas {
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #fff;
  padding: 6px;
}
.dash-result-qr span {
  font-size: 0.75rem;
  color: var(--muted);
}

/* API Key Card */
.api-key-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px;
  margin-bottom: 36px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}
.api-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
}
.api-card-header h3 {
  margin: 0 0 6px;
  font-size: 1.25rem;
  font-weight: 700;
}
.api-card-header p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--muted);
}
.api-card-actions {
  display: flex;
  gap: 8px;
}
.btn-api-action {
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--mint-pale);
  color: var(--mint-dark);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
}
.btn-api-action:hover {
  border-color: var(--mint);
  background: var(--mint);
  color: #071913;
}
.api-key-field {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 16px;
  overflow-x: auto;
}
.api-key-field code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.9375rem;
  color: var(--mint-dark);
  letter-spacing: 0.5px;
}
/* Beginner API Tutorial & Quickstart Section */
.btn-api-download {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(32, 201, 151, 0.12);
  color: #0d9468;
  border: 1px solid rgba(32, 201, 151, 0.3);
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  transition: all 0.2s ease;
}
.btn-api-download:hover {
  background: #20c997;
  color: #062b20;
  border-color: #20c997;
  transform: translateY(-1px);
}
html.theme-dark .btn-api-download {
  background: rgba(32, 201, 151, 0.15);
  color: #3ddda9;
  border-color: rgba(32, 201, 151, 0.35);
}
html.theme-dark .btn-api-download:hover {
  background: #3ddda9;
  color: #072a20;
}

.api-quickstart-section {
  margin: 22px 0 16px 0;
}
.api-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.05rem;
  font-weight: 700;
  color: #0c2c24;
  margin: 0 0 14px 0;
}
html.theme-dark .api-section-title {
  color: #e4f5f0;
}
.quickstart-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.quickstart-step-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid #dbe8e4;
  box-shadow: 0 2px 8px rgba(12, 44, 36, 0.03);
  transition: transform 0.2s, box-shadow 0.2s;
}
.quickstart-step-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(12, 44, 36, 0.06);
}
html.theme-dark .quickstart-step-card {
  background: #111e1b;
  border-color: #203830;
  box-shadow: none;
}
.step-card-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #20c997;
  color: #05261d;
  font-weight: 800;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.step-card-body strong {
  display: block;
  font-size: 0.88rem;
  color: #12332a;
  margin-bottom: 3px;
}
html.theme-dark .step-card-body strong {
  color: #e1f2ed;
}
.step-card-body p {
  margin: 0;
  font-size: 0.8rem;
  color: #5c7b73;
  line-height: 1.45;
}
html.theme-dark .step-card-body p {
  color: #8faea6;
}

/* Code Snippet Tabs */
.api-code-tabs-container {
  margin: 18px 0;
  border-radius: 14px;
  border: 1px solid #233b33;
  background: #0b1613;
  overflow: hidden;
}
.api-code-tabs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #0f1e1a;
  border-bottom: 1px solid #1c322b;
  flex-wrap: wrap;
  gap: 8px;
}
.api-code-tabs-list {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.api-tab-btn {
  padding: 6px 12px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: #8ba9a1;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.api-tab-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}
.api-tab-btn.is-active {
  color: #20c997;
  background: #172a24;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.btn-copy-code-snippet {
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid #29473e;
  background: #142420;
  color: #a4c9bf;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-copy-code-snippet:hover {
  background: #20c997;
  color: #062b20;
  border-color: #20c997;
}
.api-code-panel {
  display: none;
}
.api-code-panel.is-active {
  display: block;
}
.api-code-panel pre {
  margin: 0;
  padding: 16px 18px;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.83rem;
  line-height: 1.55;
  color: #c0ebe1;
  white-space: pre;
  word-break: normal;
  -webkit-overflow-scrolling: touch;
}

/* Beginner Guide Collapsible Wrapper & Toggle */
.api-guide-collapse-wrapper {
  margin-top: 18px;
  width: 100%;
}
.btn-toggle-guide {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 18px;
  background: linear-gradient(135deg, rgba(32, 201, 151, 0.08) 0%, rgba(20, 160, 120, 0.04) 100%);
  border: 1px solid rgba(32, 201, 151, 0.28);
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: all 0.22s ease;
  box-sizing: border-box;
}
.btn-toggle-guide:hover {
  background: linear-gradient(135deg, rgba(32, 201, 151, 0.14) 0%, rgba(20, 160, 120, 0.08) 100%);
  border-color: rgba(32, 201, 151, 0.45);
  box-shadow: 0 4px 16px rgba(32, 201, 151, 0.12);
  transform: translateY(-1px);
}
html.theme-dark .btn-toggle-guide {
  background: rgba(32, 201, 151, 0.06);
  border-color: rgba(32, 201, 151, 0.2);
}
html.theme-dark .btn-toggle-guide:hover {
  background: rgba(32, 201, 151, 0.12);
  border-color: rgba(32, 201, 151, 0.4);
}
.toggle-guide-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
.guide-sparkle {
  font-size: 1.15rem;
  flex-shrink: 0;
}
.guide-toggle-title {
  font-size: 0.94rem;
  font-weight: 700;
  color: #0c3d31;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html.theme-dark .guide-toggle-title {
  color: #4ee6b6;
}
.guide-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(32, 201, 151, 0.2);
  color: #076249;
  flex-shrink: 0;
}
html.theme-dark .guide-badge {
  background: rgba(32, 201, 151, 0.25);
  color: #4ee6b6;
}
.toggle-guide-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.guide-hint-text {
  font-size: 0.82rem;
  font-weight: 600;
  color: #1e7e63;
  transition: color 0.18s;
}
html.theme-dark .guide-hint-text {
  color: #38c89b;
}
.toggle-guide-arrow {
  color: #1e7e63;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}
html.theme-dark .toggle-guide-arrow {
  color: #38c89b;
}
.btn-toggle-guide[aria-expanded="true"] .toggle-guide-arrow {
  transform: rotate(180deg);
}
.api-guide-collapse-content {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
}
.api-guide-collapse-content.is-collapsed {
  display: none !important;
}

/* Beginner Guide Inner Cards: Parameter Table & FAQ Full Width */
.api-details-deck {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
.api-card-table-full,
.api-card-faq-full {
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  padding: 18px 20px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid #dbe8e4;
  box-shadow: 0 2px 10px rgba(12, 44, 36, 0.03);
  overflow: hidden;
}
html.theme-dark .api-card-table-full,
html.theme-dark .api-card-faq-full {
  background: #111e1b;
  border-color: #203830;
  box-shadow: none;
}
.guide-card-header h5 {
  margin: 0 0 14px 0;
  font-size: 0.96rem;
  font-weight: 700;
  color: #12332a;
}
html.theme-dark .guide-card-header h5 {
  color: #e4f5f0;
}
.api-params-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
  border: 1px solid #edf4f2;
}
html.theme-dark .api-params-table-wrap {
  border-color: #1a2f28;
}
.api-params-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.83rem;
  text-align: left;
}
.api-params-table th {
  padding: 10px 14px;
  background: #f6faf8;
  border-bottom: 1.5px solid #dbe8e4;
  color: #43635a;
  font-weight: 700;
  white-space: nowrap;
}
html.theme-dark .api-params-table th {
  background: #152420;
  border-bottom-color: #26433b;
  color: #8daea5;
}
.api-params-table td {
  padding: 11px 14px;
  border-bottom: 1px solid #edf4f2;
  color: #1c3b32;
  line-height: 1.45;
}
html.theme-dark .api-params-table td {
  border-bottom-color: #1a2e28;
  color: #b8ded5;
}
.api-params-table tr:last-child td {
  border-bottom: none;
}
.badge-req {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
  font-size: 0.72rem;
  font-weight: 700;
}
.badge-opt {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(100, 116, 139, 0.12);
  color: #475569;
  font-size: 0.72rem;
  font-weight: 600;
}
html.theme-dark .badge-opt {
  background: rgba(148, 163, 184, 0.14);
  color: #94a3b8;
}

/* FAQ Responsive Grid (Eliminating Text Overflow) */
.api-faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
  width: 100%;
  box-sizing: border-box;
}
.api-faq-card {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 10px;
  background: #f8fbfa;
  border: 1px solid #e2ece9;
  box-sizing: border-box;
  min-width: 0;
}
html.theme-dark .api-faq-card {
  background: #152420;
  border-color: #213a33;
}
.faq-icon {
  font-size: 1.15rem;
  flex-shrink: 0;
  line-height: 1.3;
}
.faq-content {
  flex: 1;
  min-width: 0;
  word-break: break-word;
  overflow-wrap: break-word;
}
.faq-content strong {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  color: #153b30;
  margin-bottom: 6px;
  line-height: 1.4;
  word-break: break-word;
}
html.theme-dark .faq-content strong {
  color: #d8eee7;
}
.faq-content p {
  margin: 0;
  font-size: 0.82rem;
  color: #53736a;
  line-height: 1.5;
  word-break: break-word;
}
html.theme-dark .faq-content p {
  color: #8faea6;
}

/* Offline Tutorial Banner */
.api-offline-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 18px 22px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(32, 201, 151, 0.08) 0%, rgba(23, 169, 131, 0.04) 100%);
  border: 1px dashed rgba(32, 201, 151, 0.35);
  box-sizing: border-box;
  min-width: 0;
}
html.theme-dark .api-offline-banner {
  background: rgba(32, 201, 151, 0.05);
  border-color: rgba(32, 201, 151, 0.25);
}
.offline-banner-text {
  min-width: 0;
  flex: 1;
}
.offline-banner-text h6 {
  margin: 0 0 4px 0;
  font-size: 0.94rem;
  font-weight: 700;
  color: #0e3b2f;
}
html.theme-dark .offline-banner-text h6 {
  color: #4ee6b6;
}
.offline-banner-text p {
  margin: 0;
  font-size: 0.82rem;
  color: #4e6f66;
  line-height: 1.4;
}
html.theme-dark .offline-banner-text p {
  color: #92b5ab;
}
.offline-banner-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.btn-view-online {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.18s;
  background: #ffffff;
  border: 1px solid #c9ded7;
  color: #164035;
}
html.theme-dark .btn-view-online {
  background: #111e1b;
  border-color: #2b473e;
  color: #c0ebe1;
}
.btn-view-online:hover {
  border-color: #20c997;
  color: #0d845e;
  transform: translateY(-1px);
}
.btn-api-download {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.18s;
  background: #20c997;
  border: 1px solid #1bb587;
  color: #062b20;
  box-shadow: 0 2px 8px rgba(32, 201, 151, 0.25);
}
.btn-api-download:hover {
  background: #1bb587;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(32, 201, 151, 0.35);
}

@media (max-width: 768px) {
  .quickstart-steps-grid {
    grid-template-columns: 1fr;
  }
  .api-faq-grid {
    grid-template-columns: 1fr;
  }
  .api-offline-banner {
    flex-direction: column;
    align-items: flex-start;
  }
  .api-code-tabs-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 10px;
    flex-wrap: nowrap;
  }
  .api-code-tabs-list {
    display: flex;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 4px;
    flex: 1;
    min-width: 0;
  }
  .api-code-tabs-list::-webkit-scrollbar {
    display: none;
  }
  .api-tab-btn {
    white-space: nowrap;
    flex-shrink: 0;
    padding: 5px 9px;
    font-size: 0.74rem;
  }
  .tab-lang-sub {
    display: none !important;
  }
  .btn-copy-code-snippet {
    padding: 4px 8px;
    font-size: 0.72rem;
    flex-shrink: 0;
  }
  .api-code-panel pre {
    padding: 12px 14px;
    font-size: 0.76rem;
    white-space: pre !important;
    word-break: normal !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .btn-toggle-guide {
    padding: 10px 12px;
    gap: 8px;
  }
  .guide-badge {
    display: none !important;
  }
  .guide-toggle-title {
    font-size: 0.825rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .guide-hint-text {
    font-size: 0.75rem;
  }
  .api-card-actions {
    width: 100%;
    display: flex;
    gap: 8px;
    margin-top: 8px;
  }
  .api-card-actions .btn-api-action {
    flex: 1;
    text-align: center;
    padding: 8px 10px;
    font-size: 0.8rem;
  }
}

/* Links Table */
.dash-links-section {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}
.dash-links-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 20px;
}
.dash-links-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}
.dash-links-header h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
}
.dash-links-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.dash-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 270px;
  max-width: 100%;
}
.dash-search-wrap .search-icon {
  position: absolute;
  left: 11px;
  color: var(--muted);
  pointer-events: none;
}
.dash-search-wrap input[type="search"] {
  width: 100%;
  height: 38px;
  box-sizing: border-box;
  padding: 8px 30px 8px 36px;
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 0.85rem;
  color: var(--ink, #111);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.dash-search-wrap input[type="search"]::placeholder {
  color: #8fa8a2;
  font-size: 0.825rem;
}
.dash-search-wrap input[type="search"]:focus {
  border-color: var(--mint, #10b981);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}
.dash-search-wrap .btn-clear-search {
  position: absolute;
  right: 8px;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  padding: 2px 4px;
}
/* Modern Table Page Size Dropdown */
.dash-pagesize-dropdown {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
}
.dash-pagesize-trigger {
  height: 38px;
  box-sizing: border-box;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--line);
  font-size: 0.84rem;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  color: var(--ink);
  transition: all 0.2s ease;
  user-select: none;
}
.dash-pagesize-trigger:hover {
  border-color: var(--mint, #10b981);
  background: rgba(32, 201, 151, 0.05);
}
.dash-pagesize-dropdown.is-open .dash-pagesize-trigger {
  border-color: var(--mint, #10b981);
  box-shadow: 0 0 0 3px rgba(32, 201, 151, 0.15);
}
.dash-pagesize-dropdown.is-open .chevron-icon {
  transform: rotate(180deg);
}
.pagesize-prefix {
  font-size: 0.825rem;
  color: var(--muted);
  font-weight: normal;
}
.pagesize-num {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink);
  min-width: 14px;
  text-align: center;
}
.dash-pagesize-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: auto;
  min-width: 120px;
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(0, 0, 0, 0.04);
  padding: 5px;
  z-index: 100;
  opacity: 0;
  transform: translateY(-5px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.dash-pagesize-dropdown.is-open .dash-pagesize-menu {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.dash-pagesize-menu .select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.84rem;
  cursor: pointer;
  color: var(--ink);
  transition: background 0.12s ease;
}
.dash-pagesize-menu .select-option:hover {
  background: rgba(32, 201, 151, 0.08);
}
.dash-pagesize-menu .select-option.is-selected {
  background: rgba(32, 201, 151, 0.14);
  color: var(--mint-dark, #059669);
  font-weight: 700;
}
.dash-pagesize-menu .opt-check {
  font-size: 0.85rem;
  color: var(--mint, #10b981);
  opacity: 0;
  transition: opacity 0.15s ease;
}
.dash-pagesize-menu .select-option.is-selected .opt-check {
  opacity: 1;
}
html.theme-dark .dash-pagesize-trigger {
  background: #0c1614;
  border-color: #1f322c;
  color: #e0f0ec;
}
html.theme-dark .dash-pagesize-menu {
  background: #121e1a;
  border-color: #1f352e;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(32, 201, 151, 0.2);
}
html.theme-dark .dash-pagesize-menu .select-option {
  color: #c0ded6;
}
html.theme-dark .dash-pagesize-menu .select-option:hover {
  background: rgba(32, 201, 151, 0.16);
  color: #ffffff;
}
html.theme-dark .dash-pagesize-menu .select-option.is-selected {
  background: rgba(32, 201, 151, 0.22);
  color: #2fe0aa;
}
.dash-search-empty {
  padding: 42px 16px;
  text-align: center;
  color: var(--muted);
}
.dash-search-empty .empty-icon {
  font-size: 1.8rem;
  margin-bottom: 8px;
}
.dash-pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.pagination-info {
  font-size: 0.825rem;
  color: var(--muted);
}
.pagination-info .metric-highlight {
  color: var(--mint-dark, #059669);
  font-weight: 700;
}
.pagination-controls {
  display: flex;
  align-items: center;
  gap: 5px;
}
.btn-page-nav, .btn-page-num {
  padding: 5px 10px;
  border: 1px solid var(--line);
  background: var(--bg-card, #ffffff);
  border-radius: 6px;
  font-size: 0.825rem;
  font-weight: 600;
  color: var(--ink, #333);
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-page-nav:hover:not(:disabled), .btn-page-num:hover:not(.is-active) {
  border-color: var(--mint, #10b981);
  color: var(--mint-dark, #059669);
}
.btn-page-nav:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.btn-page-num.is-active {
  background: var(--mint, #10b981);
  color: #fff;
  border-color: var(--mint, #10b981);
}
.page-ellipsis {
  padding: 0 4px;
  color: var(--muted);
}
@media (max-width: 600px) {
  .dash-pagination-bar {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
  }
  .pagination-controls {
    justify-content: center;
    width: 100%;
    flex-wrap: wrap;
    gap: 4px;
  }
  .btn-page-nav {
    padding: 5px 8px;
    font-size: 0.78rem;
  }
  .btn-page-num {
    min-width: 28px;
    height: 28px;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
  }
}
@media (max-width: 480px) {
  .page-nav-text {
    display: none !important;
  }
  .btn-page-nav {
    min-width: 32px;
    height: 28px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}
.links-count {
  background: var(--mint-pale);
  color: var(--mint-dark);
  font-weight: 700;
  font-size: 0.8125rem;
  padding: 2px 8px;
  border-radius: 999px;
}
.links-table-wrapper {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-card, #ffffff);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}
html.theme-dark .links-table-wrapper {
  border-color: #243c34;
  background: #121c19;
  box-shadow: none;
}
.dash-links-table {
  width: 100%;
  border-collapse: collapse;
}
.dash-links-table thead tr {
  background: #f7faf8;
}
html.theme-dark .dash-links-table thead tr {
  background: #172622;
}
.dash-links-table th {
  padding: 13px 16px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.dash-links-table td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 0.875rem;
  vertical-align: middle;
}
.dash-links-table tr:last-child td {
  border-bottom: none;
}
.dash-links-table tr:hover td {
  background: rgba(16, 185, 129, 0.025);
}
html.theme-dark .dash-links-table tr:hover td {
  background: rgba(32, 201, 151, 0.04);
}

/* Explicit Column Alignments & Widths */
.dash-links-table th.th-slug,
.dash-links-table td.col-slug {
  text-align: left;
  padding-left: 20px;
  width: 22%;
  white-space: nowrap;
}
.dash-links-table th.th-target,
.dash-links-table td.col-target {
  text-align: left;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 35%;
  color: var(--muted);
}
.dash-links-table th.th-clicks,
.dash-links-table td.col-clicks {
  text-align: center;
  width: 10%;
}
.dash-links-table th.th-created,
.dash-links-table td.col-date {
  text-align: center;
  width: 12%;
  white-space: nowrap;
}
.dash-links-table th.th-status,
.dash-links-table td.col-status {
  text-align: center;
  width: 10%;
}
.dash-links-table th.th-actions,
.dash-links-table td.col-actions {
  text-align: right;
  padding-right: 20px;
  width: 11%;
  white-space: nowrap;
}
.col-slug {
  white-space: nowrap;
}
.link-slug-url {
  font-weight: 700;
  color: var(--mint);
  text-decoration: none;
  margin-right: 6px;
}
.btn-mini-copy {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  padding: 2px 4px;
  border-radius: 4px;
  font-size: 0.9375rem;
}
.btn-mini-copy:hover {
  color: var(--ink);
}
.col-clicks strong {
  color: var(--ink);
  font-size: 1rem;
}
.col-date {
  color: var(--muted);
  white-space: nowrap;
  font-size: 0.8125rem;
}
.status-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: capitalize;
}
.status-tag.status-active {
  background: rgba(32,201,151,0.15);
  color: var(--mint-dark);
}
.status-tag.status-disabled {
  background: rgba(140,163,157,0.15);
  color: var(--muted);
}
.status-tag.status-blocked {
  background: rgba(229,77,77,0.15);
  color: #ff6b6b;
}
.col-actions {
  white-space: nowrap;
  text-align: right;
}
.btn-action-icon {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 8px;
  cursor: pointer;
  color: var(--muted);
  font-size: 0.875rem;
  margin-right: 4px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
}
.btn-action-icon:last-child {
  margin-right: 0;
}
.btn-action-icon:hover {
  border-color: var(--mint);
  color: var(--ink);
}
.btn-action-delete:hover {
  border-color: #e54d4d;
  color: #e54d4d;
}
.empty-links-card {
  text-align: center;
  padding: 48px 16px;
  color: var(--muted);
}
.empty-links-card p {
  margin-bottom: 16px;
  font-size: 1rem;
}

/* Dark mode adjustments */
html.theme-dark .nav-auth-btn {
  background: rgba(20,31,28,0.7);
  border-color: #1f322c;
  color: #8fa8a2;
}
html.theme-dark .nav-auth-primary {
  background: var(--mint);
  color: #071913 !important;
}
html.theme-dark .auth-modal-dialog,
html.theme-dark .auth-card-inner,
html.theme-dark .metric-card,
html.theme-dark .dash-create-card,
html.theme-dark .api-key-card,
html.theme-dark .dash-links-section {
  background: #141f1c;
  border-color: #1f322c;
}
html.theme-dark .auth-field input,
html.theme-dark .api-key-field,
html.theme-dark .dash-create-url-row,
html.theme-dark .dash-create-slug-field,
html.theme-dark .dash-create-select-field {
  background: #0c1614;
  border-color: #1f322c;
}
html.theme-dark .dash-result-link {
  color: #2fe0aa;
}
html.theme-dark .auth-modal-close {
  background: #192723;
  border-color: #243c34;
  color: #8fa8a2;
}
html.theme-dark .auth-modal-close:hover {
  background: #233731;
  color: #ffffff;
  border-color: var(--mint);
}

/* Strict Empty State Hiding Rule */
.empty-links-card[hidden],
.empty-links-card.is-hidden {
  display: none !important;
}

/* Modern Link Expiration Custom Dropdown */
.dash-custom-select {
  position: relative;
  min-width: 190px;
}
.dash-custom-select-trigger {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 10px 14px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.dash-custom-select-trigger:hover {
  border-color: var(--mint);
  background: rgba(32, 201, 151, 0.05);
}
.dash-custom-select.is-open .dash-custom-select-trigger {
  border-color: var(--mint);
  box-shadow: 0 0 0 3px rgba(32, 201, 151, 0.15);
}
.select-clock-icon {
  color: var(--mint);
  flex-shrink: 0;
}
.dash-custom-select-trigger .selected-text {
  flex: 1;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-custom-select-trigger .chevron-icon {
  color: var(--muted);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.dash-custom-select.is-open .chevron-icon {
  transform: rotate(180deg);
}

.dash-custom-select-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 200px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
  padding: 6px;
  z-index: 100;
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.dash-custom-select.is-open .dash-custom-select-menu {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.select-menu-header {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 6px 10px 4px;
}
.select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.875rem;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.select-option:hover {
  background: rgba(32, 201, 151, 0.1);
  color: var(--mint-dark);
}
.select-option.is-selected {
  background: rgba(32, 201, 151, 0.15);
  color: var(--mint-dark);
  font-weight: 600;
}
.select-option .opt-check {
  font-size: 0.875rem;
  color: var(--mint);
  opacity: 0;
  transition: opacity 0.15s ease;
}
.select-option.is-selected .opt-check {
  opacity: 1;
}

html.theme-dark .dash-custom-select-trigger {
  background: #0c1614;
  border-color: #1f322c;
  color: #e0f0ec;
}
html.theme-dark .dash-custom-select-trigger:hover {
  background: #142420;
  border-color: var(--mint);
}
html.theme-dark .dash-custom-select-menu {
  background: #121e1a;
  border-color: #1f352e;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(32, 201, 151, 0.2);
}
html.theme-dark .select-option {
  color: #c0ded6;
}
html.theme-dark .select-option:hover {
  background: rgba(32, 201, 151, 0.16);
  color: #ffffff;
}
html.theme-dark .select-option.is-selected {
  background: rgba(32, 201, 151, 0.22);
  color: #2fe0aa;
}

/* Modern Delete Confirmation Dialog Modal */
.custom-confirm-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 16px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.custom-confirm-modal.is-open,
.custom-confirm-modal.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.custom-confirm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 18, 14, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.custom-confirm-dialog {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 420px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.05);
  padding: 28px 24px 22px;
  text-align: center;
  transform: scale(0.94);
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.custom-confirm-modal.is-open .custom-confirm-dialog,
.custom-confirm-modal.is-visible .custom-confirm-dialog {
  transform: scale(1);
}
.confirm-dialog-icon {
  width: 54px;
  height: 54px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.confirm-dialog-icon--danger {
  background: rgba(229, 77, 77, 0.12);
  color: #e54d4d;
}
.confirm-dialog-title {
  margin: 0 0 8px;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink);
}
.confirm-dialog-text {
  margin: 0 0 24px;
  font-size: 0.9375rem;
  color: var(--muted);
  line-height: 1.5;
}
.confirm-dialog-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}
.btn-confirm-cancel {
  flex: 1;
  background: #f0f4f2;
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 11px 18px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.18s ease;
}
.btn-confirm-cancel:hover {
  background: #e2e8e5;
}
.btn-confirm-danger {
  flex: 1;
  background: #e54d4d;
  border: 1px solid #d43b3b;
  color: #ffffff;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 11px 18px;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(229, 77, 77, 0.35);
  transition: all 0.18s ease;
}
.btn-confirm-danger:hover {
  background: #d43b3b;
  box-shadow: 0 6px 18px rgba(229, 77, 77, 0.45);
}
.btn-confirm-primary {
  flex: 1;
  background: #20c997;
  border: 1px solid #1ba87d;
  color: #062b20;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  padding: 11px 18px;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(32, 201, 151, 0.35);
  transition: all 0.18s ease;
}
.btn-confirm-primary:hover {
  background: #1cb587;
  box-shadow: 0 6px 18px rgba(32, 201, 151, 0.45);
  transform: translateY(-1px);
}

html.theme-dark .custom-confirm-dialog {
  background: #141f1c;
  border-color: #243c34;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(229, 77, 77, 0.2);
}
html.theme-dark .confirm-dialog-title {
  color: #f0f7f5;
}
html.theme-dark .confirm-dialog-text {
  color: #8fa8a2;
}
html.theme-dark .btn-confirm-cancel {
  background: #192723;
  border-color: #243c34;
  color: #c0ded6;
}
html.theme-dark .btn-confirm-cancel:hover {
  background: #233731;
  color: #ffffff;
}
html.theme-dark .btn-confirm-primary {
  background: #20c997;
  color: #05271d;
  border-color: #1ba87d;
}


/* ========================================================= */
/* URL.ASIA Dashboard Guidance, Gated API & Admin Master CSS */
/* ========================================================= */

/* Dashboard Create Input Guidance */
.dash-create-helper {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: #55756c;
  margin: 6px 0 12px 4px;
}
.dash-create-helper .dash-helper-sparkle {
  color: #20c997;
  font-size: 0.95rem;
}
html.theme-dark .dash-create-helper {
  color: #8daea5;
}
.dash-create-url-row input::placeholder,
.dash-create-slug-field input::placeholder {
  color: #9cb8b0;
  opacity: 0.9;
  font-size: 0.95rem;
}
html.theme-dark .dash-create-url-row input::placeholder,
html.theme-dark .dash-create-slug-field input::placeholder {
  color: #5c7e75;
}

/* API Key Accordion Card */
.api-accordion-card {
  margin-top: 36px;
  border-radius: 18px;
  border: 1px solid var(--border-color, #d5e5e0);
  background: var(--card-bg, #ffffff);
  box-shadow: 0 4px 20px rgba(12, 44, 36, 0.05);
  overflow: hidden;
  transition: all 0.25s ease;
}
.api-accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  cursor: pointer;
  user-select: none;
  background: transparent;
  transition: background 0.2s ease;
}
.api-accordion-header:hover {
  background: rgba(32, 201, 151, 0.04);
}
.api-header-title-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.api-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.api-title-row .api-icon {
  font-size: 1.25rem;
}
.api-title-row h3 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: #0c2c24;
}
html.theme-dark .api-title-row h3 {
  color: #e6f5f0;
}
.api-header-desc {
  margin: 0;
  font-size: 0.85rem;
  color: #5a756e;
}
html.theme-dark .api-header-desc {
  color: #8faea6;
}
.api-accordion-chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #5a756e;
  transition: transform 0.25s ease, background 0.2s ease;
}
.api-accordion-header[aria-expanded="true"] .api-accordion-chevron {
  transform: rotate(180deg);
}
.api-accordion-body {
  padding: 0 24px 24px 24px;
  transition: all 0.25s ease;
}
.api-accordion-body.is-collapsed {
  display: none;
}

/* API Status Badges */
.api-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.api-status-badge.badge-none {
  background: #f0f4f3;
  color: #5d756f;
  border: 1px solid #d4e2de;
}
.api-status-badge.badge-pending {
  background: rgba(245, 158, 11, 0.12);
  color: #d97706;
  border: 1px solid rgba(245, 158, 11, 0.28);
}
.api-status-badge.badge-approved {
  background: rgba(32, 201, 151, 0.14);
  color: #0d9468;
  border: 1px solid rgba(32, 201, 151, 0.35);
}
.api-status-badge.badge-rejected {
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
  border: 1px solid rgba(239, 68, 68, 0.28);
}

/* API State Box */
.api-state-box {
  padding: 20px;
  border-radius: 12px;
  background: #f8fbfa;
  border: 1px solid #e3edea;
}
html.theme-dark .api-state-box {
  background: #14221e;
  border-color: #233c34;
}
.api-state-notice {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 16px;
}
.api-state-notice .notice-icon {
  font-size: 1.5rem;
  line-height: 1;
}
.api-state-notice p {
  margin: 0;
  font-size: 0.92rem;
  color: #405e56;
  line-height: 1.5;
}
html.theme-dark .api-state-notice p {
  color: #9cbdb5;
}
.btn-api-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 22px;
  border-radius: 999px;
  background: #20c997;
  color: #062b20;
  font-weight: 700;
  font-size: 0.92rem;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 14px rgba(32, 201, 151, 0.3);
}
.btn-api-primary:hover {
  background: #1cb587;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(32, 201, 151, 0.4);
}
.api-app-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed #d1e2dd;
}
html.theme-dark .api-app-summary {
  border-top-color: #26433b;
}
.api-app-summary .summary-item {
  font-size: 0.85rem;
}
.api-app-summary .label {
  color: #728f88;
  display: block;
  margin-bottom: 2px;
}
.api-app-summary .value {
  color: #1a3c33;
  font-weight: 600;
}
html.theme-dark .api-app-summary .value {
  color: #c9e4dc;
}
.reject-reason-quote {
  color: #e54d4d;
  font-weight: 600;
}

/* Modal Forms */
.api-apply-dialog, .admin-modal-dialog {
  max-width: 540px;
  width: 92%;
  position: relative;
  text-align: left;
}
.btn-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #728f88;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.btn-modal-close:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #1a3c33;
}
html.theme-dark .btn-modal-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}
.modal-form-group {
  margin-bottom: 16px;
}
.modal-form-group label {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  color: #1b3d34;
  margin-bottom: 6px;
}
html.theme-dark .modal-form-group label {
  color: #cbe3dc;
}
.modal-form-group input,
.modal-form-group textarea,
.modal-form-group select {
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid #cbded8;
  background: #ffffff;
  color: #0c2c24;
  font-size: 0.92rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}
html.theme-dark .modal-form-group input,
html.theme-dark .modal-form-group textarea,
html.theme-dark .modal-form-group select {
  background: #0f1916;
  border-color: #243c34;
  color: #eaf5f2;
}
.modal-form-group input:focus,
.modal-form-group textarea:focus,
.modal-form-group select:focus {
  border-color: #20c997;
  box-shadow: 0 0 0 3px rgba(32, 201, 151, 0.2);
}
.modal-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 600px) {
  .modal-form-row {
    grid-template-columns: 1fr;
  }
}
.modal-form-error {
  display: none;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #dc2626;
  font-size: 0.85rem;
  margin-bottom: 14px;
}

/* Calls Tier Track in API Apply Modal */
.calls-track {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 6px;
}
.calls-chip {
  position: relative;
  display: flex;
  align-items: center;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1.5px solid #cbded8;
  background: #fbfdfc;
  cursor: pointer;
  transition: all 0.18s ease;
  user-select: none;
}
.calls-chip input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.calls-chip .chip-glow {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #cbded8;
  margin-right: 10px;
  flex-shrink: 0;
  transition: all 0.2s ease;
}
.calls-chip .chip-label {
  font-size: 0.85rem;
  font-weight: 500;
  color: #1b3d34;
  line-height: 1.35;
  transition: color 0.18s;
}
.calls-chip:hover {
  border-color: #20c997;
  background: #f2fbf7;
  transform: translateY(-1px);
}
.calls-chip.is-selected,
.calls-chip:has(input:checked) {
  border-color: #17a983;
  background: #e8f8f2;
  box-shadow: 0 2px 10px rgba(23, 169, 131, 0.15);
}
.calls-chip.is-selected .chip-glow,
.calls-chip:has(input:checked) .chip-glow {
  background: #17a983;
  box-shadow: 0 0 8px #17a983;
}
.calls-chip.is-selected .chip-label,
.calls-chip:has(input:checked) .chip-label {
  color: #075f49;
  font-weight: 700;
}
.calls-chip.is-disabled {
  opacity: 0.62;
  cursor: not-allowed;
  border-style: dashed;
  border-color: #cbd5d1;
  background: #f8faf9;
}
.calls-chip.is-disabled:hover {
  border-color: #cbd5d1;
  background: #f8faf9;
  transform: none;
  box-shadow: none;
}
.calls-chip.is-disabled .chip-glow {
  background: #cbd5d1;
  box-shadow: none;
}
.calls-chip.is-disabled .chip-label {
  color: #7b938c;
}

/* Dark mode: Calls Tier Track */
html.theme-dark .calls-chip {
  background: #111e1b;
  border-color: #243c34;
}
html.theme-dark .calls-chip .chip-glow {
  background: #2d4c42;
}
html.theme-dark .calls-chip .chip-label {
  color: #a3c2b9;
}
html.theme-dark .calls-chip:hover {
  border-color: #3ddda9;
  background: #162723;
}
html.theme-dark .calls-chip.is-selected,
html.theme-dark .calls-chip:has(input:checked) {
  border-color: #3ddda9;
  background: #182e27;
  box-shadow: 0 0 14px rgba(32, 201, 151, 0.22);
}
html.theme-dark .calls-chip.is-selected .chip-glow,
html.theme-dark .calls-chip:has(input:checked) .chip-glow {
  background: #3ddda9;
  box-shadow: 0 0 10px #3ddda9;
}
html.theme-dark .calls-chip.is-selected .chip-label,
html.theme-dark .calls-chip:has(input:checked) .chip-label {
  color: #3ddda9;
  font-weight: 700;
}
html.theme-dark .calls-chip.is-disabled {
  opacity: 0.45;
  background: #141c19;
  border-color: #2a3833;
  border-style: dashed;
}
html.theme-dark .calls-chip.is-disabled:hover {
  border-color: #2a3833;
  background: #141c19;
  transform: none;
  box-shadow: none;
}
html.theme-dark .calls-chip.is-disabled .chip-glow {
  background: #2a3833;
  box-shadow: none;
}
html.theme-dark .calls-chip.is-disabled .chip-label {
  color: #607b74;
}

@media (max-width: 520px) {
  .calls-track {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* Admin Master Console Tabs */
.admin-tabs-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0 20px 0;
  border-bottom: 1px solid var(--border-color, #d5e5e0);
  padding-bottom: 12px;
}
.admin-tab-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 12px;
  font-size: 0.92rem;
  font-weight: 600;
  color: #4b6b62;
  text-decoration: none;
  background: transparent;
  transition: all 0.2s ease;
}
.admin-tab-item:hover {
  background: rgba(32, 201, 151, 0.08);
  color: #0e3b2f;
}
.admin-tab-item.is-active {
  background: #20c997;
  color: #062b20;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(32, 201, 151, 0.25);
}
.tab-counter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.08);
  color: inherit;
}
.tab-counter--alert {
  background: #e54d4d !important;
  color: #ffffff !important;
  animation: pulse-badge 2s infinite;
}
@keyframes pulse-badge {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* Admin Metrics Grid */
.admin-metrics-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

/* User & API Management Table Badges */
.perm-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.76rem;
  font-weight: 600;
}
.perm-allowed {
  background: rgba(32, 201, 151, 0.12);
  color: #0d9468;
}
.perm-denied {
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
}
.role-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.role-user {
  background: #e9f0ee;
  color: #4b6b62;
}
.role-pro {
  background: rgba(139, 92, 246, 0.15);
  color: #7c3aed;
}
.role-admin {
  background: rgba(245, 158, 11, 0.18);
  color: #b45309;
}
.user-action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.btn-user-action {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s ease;
}
.btn-user-action.good, button.btn-good {
  background: rgba(32, 201, 151, 0.15);
  color: #0c885f;
  border-color: rgba(32, 201, 151, 0.35);
}
.btn-user-action.good:hover, button.btn-good:hover {
  background: #20c997;
  color: #062b20;
}
.btn-user-action.danger, button.btn-warn {
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
  border-color: rgba(239, 68, 68, 0.3);
}
.btn-user-action.danger:hover, button.btn-warn:hover {
  background: #ef4444;
  color: #ffffff;
}
.btn-user-action.warn {
  background: rgba(245, 158, 11, 0.14);
  color: #b45309;
  border-color: rgba(245, 158, 11, 0.3);
}
.btn-user-action.warn:hover {
  background: #f59e0b;
  color: #ffffff;
}
.btn-user-action.outline {
  background: transparent;
  color: #4b6b62;
  border-color: #c9dbd5;
}
.btn-user-action.outline:hover {
  background: #eef5f3;
  color: #0e3b2f;
}
.btn-user-action.link {
  color: #20c997;
  text-decoration: underline;
  padding: 4px 6px;
}
.use-case-cell {
  max-width: 320px;
}
.use-case-text {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: #1a3c33;
}
html.theme-dark .use-case-text {
  color: #d1ece4;
}
.reject-reason-text {
  display: block;
  color: #dc2626;
  font-size: 0.78rem;
  margin-top: 4px;
}
.calls-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(32, 201, 151, 0.1);
  color: #0c885f;
  font-size: 0.78rem;
  font-weight: 600;
}
.audit-action-chip {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 6px;
  background: #edf3f1;
  color: #3b5750;
  font-family: monospace;
  font-size: 0.82rem;
  font-weight: 600;
}
html.theme-dark .audit-action-chip {
  background: #192b26;
  color: #a4ccc2;
}
.mini-token-preview {
  font-size: 0.8rem;
  background: rgba(0, 0, 0, 0.05);
  padding: 2px 6px;
  border-radius: 4px;
}
.admin-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 20px;
  background: #20c997;
  color: #062b20;
  font-size: 0.82rem;
  font-weight: 700;
}
.filter-pill a {
  color: inherit;
  text-decoration: none;
}
/* Admin Master Console Top Header */
.admin-site-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 72px;
  padding: 14px 24px;
  margin: 12px auto 20px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(207, 223, 216, 0.7);
  border-radius: 18px;
  box-shadow: 0 4px 20px rgba(12, 44, 36, 0.04);
}
html.theme-dark .admin-site-header {
  background: rgba(20, 31, 28, 0.88);
  border-color: #243c34;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
}
.admin-brand-group {
  display: flex;
  align-items: center;
  gap: 14px;
}
.admin-brand-group .brand {
  text-decoration: none;
}
.admin-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(32, 201, 151, 0.12);
  color: #0b8a62;
  font-size: 0.78rem;
  font-weight: 700;
  border: 1px solid rgba(32, 201, 151, 0.28);
  letter-spacing: 0.3px;
}
html.theme-dark .admin-badge {
  background: rgba(32, 201, 151, 0.18);
  color: #2fe0aa;
  border-color: rgba(32, 201, 151, 0.35);
}
.admin-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.admin-logout-form {
  margin: 0;
  display: inline-flex;
}
.admin-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}
.admin-nav-btn svg {
  flex-shrink: 0;
}
.admin-nav-btn--dashboard {
  background: #ffffff;
  color: #1a4237;
  border-color: #cbded8;
  box-shadow: 0 2px 6px rgba(12, 44, 36, 0.04);
}
.admin-nav-btn--dashboard:hover {
  background: rgba(32, 201, 151, 0.08);
  border-color: #20c997;
  color: #0c885f;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(32, 201, 151, 0.18);
}
.admin-nav-btn--logout {
  background: rgba(239, 68, 68, 0.08);
  color: #c93b3b;
  border-color: rgba(239, 68, 68, 0.22);
}
.admin-nav-btn--logout:hover {
  background: #ef4444;
  color: #ffffff;
  border-color: #dc2626;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25);
}
html.theme-dark .admin-nav-btn--dashboard {
  background: #152420;
  color: #c5ded7;
  border-color: #253d35;
}
html.theme-dark .admin-nav-btn--dashboard:hover {
  background: #1c322c;
  color: #2fe0aa;
  border-color: #20c997;
}
html.theme-dark .admin-nav-btn--logout {
  background: rgba(239, 68, 68, 0.14);
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.3);
}
html.theme-dark .admin-nav-btn--logout:hover {
  background: #ef4444;
  color: #ffffff;
}

/* ========================================================
   Top Announcement Bar (Closable, 24h dismissal memory)
   ======================================================== */
html.banner-dismissed .top-announcement-bar {
  display: none !important;
}

.top-announcement-bar {
  position: relative;
  z-index: 10;
  width: 100%;
  background: linear-gradient(90deg, #ecfdf5 0%, #f0fdf4 35%, #eff6ff 100%);
  border-bottom: 1px solid rgba(23, 169, 131, 0.22);
  color: #134e40;
  padding: 8px 46px 8px 16px;
  font-size: 13px;
  box-shadow: 0 1px 3px rgba(12, 44, 36, 0.03);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.announcement-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  text-align: center;
}

.announcement-content {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.announcement-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.02em;
  background: rgba(23, 169, 131, 0.14);
  color: #0c7558;
  border: 1px solid rgba(23, 169, 131, 0.28);
  white-space: nowrap;
  flex-shrink: 0;
}

.announcement-text {
  font-size: 13px;
  font-weight: 550;
  color: #1a4237;
  line-height: 1.45;
}

.announcement-actions {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.announcement-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 3px 14px;
  min-height: 28px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 750;
  text-decoration: none;
  background: #0f8867;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(15, 136, 103, 0.25);
  transition: all 0.18s ease;
  white-space: nowrap;
}

.announcement-cta:hover {
  background: #0b6f54;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 136, 103, 0.35);
  color: #ffffff !important;
}

.announcement-close {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #607675;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: all 0.15s ease;
}

.announcement-close:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #102a2a;
}

/* Dark theme overrides */
html.theme-dark .top-announcement-bar {
  background: linear-gradient(90deg, #0d2621 0%, #0f302a 45%, #112838 100%);
  border-bottom: 1px solid rgba(32, 201, 151, 0.28);
  color: #d1fae5;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

html.theme-dark .announcement-badge {
  background: rgba(32, 201, 151, 0.18);
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.32);
}

html.theme-dark .announcement-text {
  color: #e6f7f2;
}

html.theme-dark .announcement-cta {
  background: #10b981;
  color: #062b21 !important;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
}

html.theme-dark .announcement-cta:hover {
  background: #34d399;
  box-shadow: 0 4px 12px rgba(52, 211, 153, 0.4);
  color: #042018 !important;
}

html.theme-dark .announcement-close {
  color: #8da9a2;
}

html.theme-dark .announcement-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

@media (max-width: 680px) {
  .top-announcement-bar {
    padding: 9px 38px 9px 12px;
  }
  .announcement-inner {
    gap: 8px;
  }
  .announcement-badge {
    font-size: 10px;
    padding: 2px 8px;
  }
  .announcement-text {
    font-size: 12px;
  }
  .announcement-cta {
    font-size: 11px;
    padding: 2px 12px;
    min-height: 26px;
  }
  .announcement-close {
    right: 8px;
    font-size: 18px;
  }
}

/* ========================================================= */
/* Modern High-End Edit Target URL Dialog                    */
/* ========================================================= */
.edit-target-dialog {
  max-width: 500px;
  width: 92%;
  position: relative;
  text-align: left;
  padding: 30px 28px 26px;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid rgba(16, 185, 129, 0.2);
  box-shadow: 0 24px 60px rgba(7, 30, 23, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.04);
}
html.theme-dark .edit-target-dialog {
  background: #121c19;
  border-color: rgba(32, 201, 151, 0.25);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(32, 201, 151, 0.15);
}
.edit-target-dialog .btn-modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: #f1f6f4;
  color: #607972;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  transition: all 0.2s ease;
}
.edit-target-dialog .btn-modal-close:hover {
  background: #e2ede8;
  color: #0c2c24;
  transform: rotate(90deg);
}
html.theme-dark .edit-target-dialog .btn-modal-close {
  background: #1b2925;
  color: #8daea5;
}
html.theme-dark .edit-target-dialog .btn-modal-close:hover {
  background: #253a34;
  color: #ffffff;
}
.edit-dialog-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.edit-dialog-icon-badge {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(32, 201, 151, 0.16), rgba(16, 185, 129, 0.06));
  border: 1px solid rgba(32, 201, 151, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #059669;
  flex-shrink: 0;
}
html.theme-dark .edit-dialog-icon-badge {
  background: linear-gradient(135deg, rgba(32, 201, 151, 0.22), rgba(16, 185, 129, 0.08));
  color: #20c997;
  border-color: rgba(32, 201, 151, 0.35);
}
.edit-dialog-header-text {
  flex: 1;
  min-width: 0;
}
.edit-dialog-title {
  margin: 0 0 4px 0;
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--ink, #0c2c24);
  letter-spacing: -0.01em;
}
html.theme-dark .edit-dialog-title {
  color: #f0f7f5;
}
.edit-dialog-slug-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.8rem;
  font-weight: 600;
  color: #047857;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  padding: 2px 8px;
  border-radius: 6px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html.theme-dark .edit-dialog-slug-pill {
  color: #34d399;
  background: rgba(32, 201, 151, 0.12);
  border-color: rgba(32, 201, 151, 0.3);
}
.edit-dialog-desc {
  margin: 0 0 20px 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: #55756c;
}
html.theme-dark .edit-dialog-desc {
  color: #8daea5;
}
.edit-modal-form {
  margin: 0;
}
.edit-form-group {
  margin-bottom: 22px;
}
.edit-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.edit-form-label {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink, #1a3c33);
}
html.theme-dark .edit-form-label {
  color: #d1ece5;
}
.edit-label-badge {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
}
html.theme-dark .edit-label-badge {
  background: rgba(32, 201, 151, 0.15);
  color: #20c997;
}
.edit-input-box {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.edit-input-prefix-icon {
  position: absolute;
  left: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b8f84;
  pointer-events: none;
}
html.theme-dark .edit-input-prefix-icon {
  color: #588075;
}
.edit-target-input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 14px 11px 38px;
  font-size: 0.94rem;
  line-height: 1.4;
  color: var(--ink, #111827);
  background: #f8fbf9;
  border: 1.5px solid #cce2dc;
  border-radius: 10px;
  outline: none;
  font-family: inherit;
  transition: all 0.2s ease;
}
.edit-target-input:focus {
  background: #ffffff;
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
}
html.theme-dark .edit-target-input {
  background: #0d1613;
  border-color: #243c34;
  color: #f0f7f5;
}
html.theme-dark .edit-target-input:focus {
  background: #111d19;
  border-color: #20c997;
  box-shadow: 0 0 0 3px rgba(32, 201, 151, 0.2);
}
.edit-input-tip {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 0.78rem;
  color: #688c81;
}
.edit-input-tip svg {
  color: #10b981;
  flex-shrink: 0;
}
html.theme-dark .edit-input-tip {
  color: #8daea5;
}
.edit-modal-error {
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(229, 77, 77, 0.08);
  border: 1px solid rgba(229, 77, 77, 0.3);
  color: #e54d4d;
  font-size: 0.825rem;
  font-weight: 500;
}
.edit-dialog-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
}
.btn-edit-cancel {
  padding: 9px 18px;
  border-radius: 9px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  background: #f1f5f3;
  border: 1px solid #d5e2dc;
  color: #4b6b62;
  transition: all 0.18s ease;
}
.btn-edit-cancel:hover {
  background: #e4ece7;
  color: #1a3c33;
}
html.theme-dark .btn-edit-cancel {
  background: #182622;
  border-color: #263d35;
  color: #adc9c0;
}
html.theme-dark .btn-edit-cancel:hover {
  background: #223630;
  color: #ffffff;
}
.btn-edit-save {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 22px;
  border-radius: 9px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border: none;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
  transition: all 0.18s ease;
}
.btn-edit-save:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.45);
  filter: brightness(1.04);
}
.btn-edit-save:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* ========================================================= */
/* High-End Floating Toast Notification                      */
/* ========================================================= */
.dash-floating-toast {
  position: fixed;
  top: 28px;
  left: 50%;
  transform: translate(-50%, -24px) scale(0.96);
  opacity: 0;
  pointer-events: none;
  z-index: 10000;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 22px 10px 14px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(16, 185, 129, 0.28);
  border-radius: 9999px;
  box-shadow: 0 16px 44px -8px rgba(7, 30, 23, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.04);
  transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.22s ease;
}
.dash-floating-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
  pointer-events: auto;
}
.toast-icon-badge {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35);
}
.toast-content {
  display: flex;
  align-items: center;
  gap: 8px;
}
.toast-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: #0c2c24;
  letter-spacing: -0.01em;
}
.toast-subtext {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 600;
  color: #059669;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  padding: 1px 7px;
  border-radius: 4px;
}
.dash-floating-toast.toast-error {
  border-color: rgba(239, 68, 68, 0.3);
}
.dash-floating-toast.toast-error .toast-icon-badge {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.35);
}
.dash-floating-toast.toast-error .toast-title {
  color: #991b1b;
}
html.theme-dark .dash-floating-toast {
  background: rgba(18, 28, 24, 0.94);
  border-color: rgba(32, 201, 151, 0.3);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(32, 201, 151, 0.15);
}
html.theme-dark .toast-title {
  color: #f0f7f5;
}
html.theme-dark .toast-subtext {
  color: #34d399;
  background: rgba(32, 201, 151, 0.12);
  border-color: rgba(32, 201, 151, 0.28);
}

/* Smooth Table Row Glow on Target Update */
.row-updated-glow td {
  animation: rowUpdatedAnim 2.2s ease-out forwards;
}
@keyframes rowUpdatedAnim {
  0% {
    background-color: rgba(16, 185, 129, 0.14) !important;
  }
  100% {
    background-color: transparent;
  }
}




/* CSP-compatible template styles */
[data-style-id="repair-1"]{margin-top:24px;}
[data-style-id="repair-2"]{margin-bottom:12px;}
[data-style-id="repair-3"]{font-size:0.8rem; color:#dc2626; margin:0 0 16px 0; text-align:left;}
[data-style-id="repair-4"]{width:18px;height:18px;}
[data-style-id="repair-5"]{display:none;}
[data-style-id="repair-6"]{display: none;}
[data-style-id="repair-7"]{margin-bottom:1rem;}
.auth-reset-notice{font-size:12px;line-height:1.6;color:var(--muted,#748b85);margin:12px 0 0;}

/* auth-ui.css */
/* URL.ASIA account surfaces — auth-ui-1. Existing form IDs and flows are retained. */
.auth-modal-dialog,
.auth-card-inner {
  --auth-surface: #ffffff;
  --auth-input: #fbfcfb;
  --auth-soft: #f3f8f5;
  --auth-ink: #15382e;
  --auth-muted: #61766b;
  --auth-line: #dce7e0;
  --auth-accent: #087f60;
  --auth-focus: rgba(8, 127, 96, .12);
  width: 100%;
  max-width: 432px;
  padding: 28px 30px;
  border: 1px solid var(--auth-line);
  border-radius: 22px;
  background: var(--auth-surface);
  color: var(--auth-ink);
  box-shadow: 0 22px 70px rgba(17, 49, 38, .14), 0 2px 8px rgba(17, 49, 38, .04);
  text-align: start;
}
.auth-modal-backdrop {
  padding: 20px;
  background: rgba(14, 30, 24, .36);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  overscroll-behavior: contain;
}
.auth-modal-dialog {
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
html:has(.auth-modal-backdrop.is-open) { overflow: hidden; }
.auth-modal-dialog .auth-modal-top-bar {
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 16px;
}
.auth-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  direction: ltr;
  flex-shrink: 0;
}
.auth-brand-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid #d2eadd;
  border-radius: 11px;
  background: #edf8f1;
  color: #087f60;
}
.auth-brand-wordmark {
  color: var(--auth-ink);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.5px;
}
.auth-brand-wordmark > span { color: var(--auth-accent); }
.auth-modal-dialog .auth-modal-close {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--auth-muted);
  box-shadow: none;
  transform: none;
}
.auth-modal-dialog .auth-modal-close:hover {
  color: var(--auth-ink);
  background: var(--auth-soft);
  transform: none;
}
.auth-modal-dialog .auth-modal-close:focus-visible,
.auth-modal-dialog .auth-tab:focus-visible,
.auth-card-inner .auth-tab:focus-visible {
  outline: 2px solid var(--auth-accent);
  outline-offset: 3px;
}
.auth-modal-dialog .auth-tabs,
.auth-card-inner .auth-tabs {
  width: 100%;
  display: flex;
  gap: 24px;
  margin: 0 0 24px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--auth-line);
  border-radius: 0;
  background: transparent;
}
.auth-modal-dialog .auth-tab,
.auth-card-inner .auth-tab {
  position: relative;
  flex: 0 1 auto;
  min-height: 42px;
  padding: 8px 1px 12px;
  border-radius: 0;
  background: transparent;
  color: var(--auth-muted);
  box-shadow: none;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}
.auth-modal-dialog .auth-tab.is-active,
.auth-card-inner .auth-tab.is-active { color: var(--auth-accent); }
.auth-modal-dialog .auth-tab.is-active::after,
.auth-card-inner .auth-tab.is-active::after {
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--auth-accent);
  content: "";
}
.auth-card-inner > .auth-brand { margin-bottom: 20px; }
.auth-modal-dialog .auth-panel-title,
.auth-card-inner .auth-panel-title {
  margin: 0 0 7px;
  color: var(--auth-ink);
  font-size: 25px;
  font-weight: 750;
  line-height: 1.35;
  letter-spacing: -.7px;
  overflow-wrap: anywhere;
}
.auth-panel-description {
  margin: 0 0 24px;
  color: var(--auth-muted);
  font-size: 13px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.auth-modal-dialog .auth-form,
.auth-card-inner .auth-form { gap: 17px; }
.auth-modal-dialog .auth-field,
.auth-card-inner .auth-field { min-width: 0; gap: 7px; text-align: start; }
.auth-modal-dialog .auth-field label,
.auth-card-inner .auth-field label {
  color: var(--auth-ink);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}
.auth-field-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 5px 12px;
}
.auth-modal-dialog .auth-forgot-link,
.auth-card-inner .auth-forgot-link {
  color: var(--auth-accent) !important;
  font-size: 12px;
  line-height: 1.5;
}
.auth-modal-dialog .auth-field input,
.auth-card-inner .auth-field input {
  min-width: 0;
  min-height: 46px;
  padding: 11px 13px;
  border: 1px solid var(--auth-line);
  border-radius: 11px;
  background: var(--auth-input);
  color: var(--auth-ink);
  font-size: 15px;
  line-height: 1.45;
  box-shadow: none;
  transition: border-color .16s, box-shadow .16s;
}
.auth-modal-dialog .auth-field input:focus,
.auth-card-inner .auth-field input:focus {
  border-color: var(--auth-accent);
  box-shadow: 0 0 0 3px var(--auth-focus);
}
.auth-modal-dialog .auth-field input:-webkit-autofill,
.auth-card-inner .auth-field input:-webkit-autofill {
  -webkit-text-fill-color: var(--auth-ink);
  caret-color: var(--auth-ink);
  box-shadow: 0 0 0 1000px var(--auth-input) inset;
}
.auth-modal-dialog .auth-field input[type="email"],
.auth-card-inner .auth-field input[type="email"],
.auth-modal-dialog .code-input-group input,
.auth-card-inner .code-input-group input { direction: ltr; text-align: start; }
.auth-modal-dialog .code-input-group,
.auth-card-inner .code-input-group { min-width: 0; gap: 8px; }
.auth-modal-dialog .send-code-btn,
.auth-card-inner .send-code-btn {
  padding: 9px 12px;
  border: 1px solid var(--auth-line);
  border-radius: 11px;
  background: var(--auth-soft);
  color: var(--auth-accent);
  font-size: 12px;
  white-space: normal;
  max-width: 48%;
}
.auth-modal-dialog .send-code-btn:hover:not(:disabled),
.auth-card-inner .send-code-btn:hover:not(:disabled) {
  background: var(--auth-accent);
  color: #fff;
}
.auth-modal-dialog .turnstile-auth-wrap,
.auth-card-inner .turnstile-auth-wrap {
  margin: 0;
  padding: 10px 0;
  min-height: 87px;
  border: 1px solid var(--auth-line);
  border-radius: 12px;
  background: var(--auth-soft);
}
.auth-modal-dialog .auth-submit-btn,
.auth-card-inner .auth-submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: 0;
  padding: 12px 16px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: #087f60;
  color: #fff;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.5;
  box-shadow: 0 3px 8px rgba(8, 127, 96, .12);
}
.auth-modal-dialog .auth-submit-btn:hover:not(:disabled),
.auth-card-inner .auth-submit-btn:hover:not(:disabled) {
  background: #076d53;
  box-shadow: 0 4px 12px rgba(8, 127, 96, .18);
}
.auth-modal-dialog .auth-submit-btn:focus-visible,
.auth-card-inner .auth-submit-btn:focus-visible { outline: 3px solid var(--auth-focus); outline-offset: 3px; }
.auth-modal-dialog .auth-switch-prompt,
.auth-card-inner .auth-switch-prompt {
  margin: 0;
  padding-top: 3px;
  color: var(--auth-muted);
  font-size: 12px;
  line-height: 1.7;
}
.auth-modal-dialog .auth-switch-prompt a,
.auth-card-inner .auth-switch-prompt a {
  color: var(--auth-accent);
  font-weight: 600;
  text-decoration: none;
  text-underline-offset: 3px;
}
.auth-modal-dialog .auth-switch-prompt a:hover,
.auth-card-inner .auth-switch-prompt a:hover { text-decoration: underline; }
.auth-modal-dialog .auth-error-banner,
.auth-card-inner .auth-error-banner {
  border-color: #efd2cc;
  border-radius: 10px;
  background: #fff3f0;
  color: #a53626;
  line-height: 1.6;
}
.auth-modal-dialog .auth-reset-notice,
.auth-card-inner .auth-reset-notice {
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--auth-line);
  color: var(--auth-muted);
  font-size: 11px;
  line-height: 1.7;
}
.auth-standalone-card { padding-block: 44px 64px; }
html.theme-dark .auth-modal-dialog,
html.theme-dark .auth-card-inner {
  --auth-surface: #14251e;
  --auth-input: #102019;
  --auth-soft: #192e24;
  --auth-ink: #edf6ef;
  --auth-muted: #a3b9ab;
  --auth-line: #2f4639;
  --auth-accent: #6ad5a6;
  --auth-focus: rgba(106, 213, 166, .16);
  border-color: var(--auth-line);
  background: var(--auth-surface);
}
html.theme-dark .auth-brand-icon { color: #6ad5a6; background: #1d392a; border-color: #31573e; }
html.theme-dark .auth-modal-dialog .auth-error-banner,
html.theme-dark .auth-card-inner .auth-error-banner { color: #ffb5a7; background: #38241e; border-color: #664033; }
@media (max-width: 600px) {
  .auth-modal-backdrop { padding: 12px; }
  .auth-modal-dialog, .auth-card-inner { padding: 23px 20px; border-radius: 20px; }
  .auth-modal-dialog { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); }
  .auth-modal-dialog .auth-modal-close { width: 40px; height: 40px; }
  .auth-modal-dialog .auth-panel-title, .auth-card-inner .auth-panel-title { font-size: 23px; }
  .auth-panel-description { margin-bottom: 21px; }
  .auth-modal-dialog .auth-tabs, .auth-card-inner .auth-tabs { margin-bottom: 21px; }
  .auth-modal-dialog .auth-field input, .auth-card-inner .auth-field input { font-size: 16px !important; }
  .auth-standalone-card { width: 100%; padding: 24px 12px 40px; }
}
@media (max-width: 360px) {
  .auth-modal-backdrop { padding: 4px; }
  .auth-modal-dialog, .auth-card-inner { padding-inline: 4px; }
  .auth-modal-dialog .auth-modal-top-bar, .auth-card-inner > .auth-brand { padding-inline: 9px; }
  .auth-modal-dialog { max-height: calc(100vh - 8px); max-height: calc(100dvh - 8px); }
  .auth-standalone-card { padding-inline: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .auth-modal-backdrop, .auth-modal-dialog,
  .auth-modal-dialog .auth-submit-btn, .auth-card-inner .auth-submit-btn { transition: none; }
  .auth-modal-dialog.modal-bounce { animation: none; }
}

/* auth-ui-2: compact forms; the header never belongs to the scrolling body. */
.auth-modal-dialog,
.auth-card-inner { max-width: 480px; padding: 22px 24px; border-radius: 18px; }
.auth-modal-backdrop {
  inset: auto 0 auto;
  top: var(--auth-viewport-top, 0px);
  height: var(--auth-viewport-height, 100vh);
  height: var(--auth-viewport-height, 100dvh);
  padding: 12px;
}
.auth-modal-dialog {
  display: flex;
  flex-direction: column;
  padding: 0;
  max-height: calc(100vh - 24px);
  max-height: calc(var(--auth-viewport-height, 100dvh) - 24px);
  overflow: hidden;
}
.auth-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  gap: 12px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--auth-line);
  background: var(--auth-surface);
}
.auth-modal-header .auth-brand { gap: 8px; }
.auth-modal-header .auth-brand-icon { width: 28px; height: 28px; border-radius: 9px; }
.auth-modal-header .auth-brand-wordmark { font-size: 14px; }
.auth-modal-header .auth-tabs {
  flex: 0 1 auto;
  width: auto;
  gap: 16px;
  margin: 0;
  border: 0;
}
.auth-modal-header .auth-tab { min-height: 40px; padding: 10px 1px; }
.auth-modal-dialog .auth-modal-close { width: 40px; height: 40px; }
.auth-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 18px 24px 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scroll-padding-block: 14px;
}
.auth-modal-dialog .auth-panel-title,
.auth-card-inner .auth-panel-title {
  margin: 0 0 14px;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -.4px;
}
.auth-modal-dialog .auth-panel-title:focus { outline: none; }
.auth-modal-dialog .auth-panel-description,
.auth-card-inner .auth-panel-description { margin: -6px 0 14px; font-size: 12px; line-height: 1.6; }
.auth-modal-dialog .auth-form,
.auth-card-inner .auth-form { gap: 12px; }
.auth-modal-dialog .auth-field,
.auth-card-inner .auth-field { gap: 5px; }
.auth-modal-dialog .auth-field label,
.auth-card-inner .auth-field label { font-size: 13px; line-height: 1.4; }
.auth-modal-dialog .auth-field input,
.auth-card-inner .auth-field input {
  min-height: 44px;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 15px;
  line-height: 1.4;
}
.auth-password-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
}
.auth-modal-dialog .turnstile-auth-wrap,
.auth-card-inner .turnstile-auth-wrap {
  min-height: 65px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.auth-modal-dialog .auth-submit-btn,
.auth-card-inner .auth-submit-btn {
  min-height: 46px;
  padding: 10px 14px;
  border-radius: 10px;
}
.auth-modal-dialog .auth-switch-prompt,
.auth-card-inner .auth-switch-prompt { padding-top: 0; }
.auth-card-inner > .auth-tabs { margin-bottom: 16px; }
.auth-standalone-card { padding-block: 24px 36px; }

/* Short windows keep the compact spacing instead of restoring the previous roomy rules. */
@media (max-height: 720px) {
  .auth-modal-header { padding-block: 8px; }
  .auth-modal-body { padding-block: 14px 16px; }
  .auth-modal-dialog .auth-panel-title { margin-bottom: 12px; }
  .auth-modal-dialog .auth-form { gap: 10px; }
}
@media (max-width: 600px) {
  .auth-card-inner {
    max-width: 400px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  html.theme-dark .auth-card-inner { background: transparent; }
  .auth-standalone-card { width: 100%; padding: 16px 16px 32px; align-items: flex-start; }
  .auth-password-row { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .auth-modal-dialog .auth-field input,
  .auth-card-inner .auth-field input { font-size: 16px !important; }
  .auth-page-main > .site-header {
    width: calc(100% - 24px);
    min-height: 64px;
    height: auto;
    gap: 8px;
    padding-block: 10px;
  }
  .auth-page-main > .site-header nav { gap: 8px; }
  .auth-page-main > .site-header nav > a { display: none; }
  .auth-page-main > .site-header .brand-copy small { display: none; }
  .auth-page-main > .site-header .brand-name { font-size: 18px; }
  .auth-page-main > .site-header .language-switcher { max-width: 128px; padding-inline: 8px; }
  .auth-page-main > .site-header .theme-toggle { flex-shrink: 0; }
}
/* If an open desktop modal is resized/rotated, retain its fields in a full-height sheet. */
@media (max-width: 600px), (max-height: 480px) {
  .auth-modal-backdrop { padding: 0; align-items: stretch; }
  .auth-modal-dialog {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    margin: 0;
    border: 0;
    border-radius: 0;
  }
  .auth-modal-header { padding: max(8px, env(safe-area-inset-top)) 16px 8px; }
  .auth-modal-body { padding: 16px 16px max(20px, env(safe-area-inset-bottom)); }
  .auth-modal-body .auth-panel { width: 100%; max-width: 432px; margin-inline: auto; }
}
@media (max-width: 360px) {
  .auth-standalone-card { padding-inline: 10px; }
  .auth-modal-body { padding-inline: 10px; }
  .auth-modal-header { padding-inline: 10px; gap: 8px; }
  .auth-modal-header .auth-brand-wordmark { display: none; }
  .auth-modal-header .auth-tabs { gap: 14px; }
  .auth-page-main > .site-header .brand-copy { display: none; }
}

/* refined-ui.css */
/* Refined controls: shared across home, account and information pages. */
:root{--ref-surface:#fff;--ref-soft:#f7faf9;--ref-line:#dce7e2;--ref-text:#183d33;--ref-muted:#61796f;--ref-accent:#087e61}
.refined-password{position:relative;min-width:0}
.auth-modal-dialog .refined-password input,.auth-card-inner .refined-password input{width:100%;height:44px;min-height:44px;padding:10px 44px 10px 13px;border-radius:10px;background:var(--ref-soft);border:1px solid var(--ref-line);box-shadow:0 1px 2px #13382b03;transition:border-color .15s,box-shadow .15s}
.auth-modal-dialog .refined-password input:focus,.auth-card-inner .refined-password input:focus{outline:0;border-color:var(--ref-accent);box-shadow:0 0 0 3px #0c8a6a12;background:var(--ref-surface)}
.password-reveal{position:absolute;inset-inline-end:2px;top:0;width:42px;height:44px;border:0;border-radius:8px;background:transparent;color:var(--ref-muted);display:grid;place-items:center;cursor:pointer}
.password-reveal:hover{color:var(--ref-accent);background:#0c8a6a08}.password-reveal .eye-slash{display:none}.password-reveal[aria-pressed=true] .eye-slash{display:block}
.auth-password-row{gap:14px}.auth-password-row .auth-field{min-width:0}.auth-password-row label{font-size:12px!important;font-weight:600!important;color:var(--ref-muted)!important;letter-spacing:.01em}
.refined-languages{position:relative;flex-shrink:0;color:var(--ref-text)}
.language-trigger{display:flex;align-items:center;gap:9px;height:38px;max-width:184px;padding:0 11px;border:1px solid var(--ref-line);border-radius:10px;background:var(--ref-surface);color:var(--ref-text);font:inherit;font-size:12px;cursor:pointer}
.language-trigger span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.language-trigger>svg{flex-shrink:0;color:var(--ref-muted)}.language-trigger[aria-expanded=true]{border-color:var(--ref-accent);box-shadow:0 0 0 3px #0c8a6a0a}
.language-panel{position:absolute;inset-inline-end:0;top:calc(100% + 10px);width:320px;max-width:calc(100vw - 24px);padding:12px;border:1px solid var(--ref-line);border-radius:16px;background:var(--ref-surface);box-shadow:0 16px 48px #16382b20;z-index:1000}
.language-search{width:100%;height:40px;padding:0 12px;border:1px solid var(--ref-line);border-radius:9px;background:var(--ref-soft);color:var(--ref-text);font:inherit;font-size:16px;margin-bottom:8px;box-sizing:border-box}
.language-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px;max-height:min(350px,55dvh);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
.language-grid button{min-height:40px;border:0;border-radius:8px;padding:9px 10px;background:transparent;color:var(--ref-muted);text-align:start;font:inherit;font-size:13px;cursor:pointer;overflow-wrap:anywhere}
.language-grid button:hover{background:var(--ref-soft);color:var(--ref-text)}.language-grid button[aria-current=true]{background:#0c8a6a10;color:var(--ref-accent);font-weight:650}.language-grid button[hidden],.language-panel[hidden]{display:none}
.language-trigger:focus-visible,.language-grid button:focus-visible,.language-search:focus-visible,.password-reveal:focus-visible{outline:2px solid var(--ref-accent);outline-offset:3px}
.recent-friendly-hint{display:flex;flex-wrap:nowrap;align-items:center;gap:12px;width:100%;box-sizing:border-box;padding:12px 14px;border:1px solid var(--ref-line);border-radius:12px;background:var(--ref-soft);box-shadow:none;animation:none;color:var(--ref-muted);font-size:12px;line-height:1.7}
.recent-friendly-hint:hover{background:var(--ref-soft);border-color:var(--ref-line)}.recent-friendly-hint .hint-sparkle{width:32px;height:32px;flex:0 0 32px;display:grid;place-items:center;border-radius:9px;background:#0c8a6a0c;color:var(--ref-accent)}
.recent-friendly-hint .hint-text{flex:1;min-width:0;color:var(--ref-muted)}.recent-friendly-hint .hint-text strong{font-weight:600;color:var(--ref-text);margin-inline-end:5px}.recent-friendly-hint .hint-link{flex-shrink:0;margin:0;padding:6px 10px;border:1px solid var(--ref-line);border-radius:8px;text-decoration:none;font-size:12px;color:var(--ref-accent);background:var(--ref-surface);font-weight:600}
html.theme-dark{--ref-surface:#14231e;--ref-soft:#11201b;--ref-line:#2b4036;--ref-text:#e0ece5;--ref-muted:#a4b8ad;--ref-accent:#67d4ad}
html.theme-dark .recent-friendly-hint{background:var(--ref-soft);border-color:var(--ref-line)}html.theme-dark .recent-friendly-hint .hint-text{color:var(--ref-muted)}html.theme-dark .recent-friendly-hint .hint-text strong{color:var(--ref-text)}html.theme-dark .recent-friendly-hint .hint-link{color:var(--ref-accent)}
@media(prefers-color-scheme:dark){html:not(.theme-light){--ref-surface:#14231e;--ref-soft:#11201b;--ref-line:#2b4036;--ref-text:#e0ece5;--ref-muted:#a4b8ad;--ref-accent:#67d4ad}}
@media(max-width:600px){.language-trigger{max-width:128px;gap:6px;padding-inline:9px}.language-panel{width:290px}.recent-friendly-hint{flex-wrap:wrap;gap:8px 10px}.recent-friendly-hint .hint-text{flex-basis:calc(100% - 42px)}.recent-friendly-hint .hint-link{margin-inline-start:42px}.auth-password-row{gap:10px}}
@media(prefers-reduced-motion:reduce){.refined-password input{transition:none!important}}

/* Account layout v2: one field per row at every viewport width. */
.auth-modal-dialog .auth-password-row,
.auth-card-inner .auth-password-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  width: 100%;
}
.auth-modal-dialog .auth-field,
.auth-card-inner .auth-field { min-width: 0; gap: 6px; }
.auth-modal-dialog .auth-field label,
.auth-card-inner .auth-field label,
.auth-modal-dialog .auth-password-row label,
.auth-card-inner .auth-password-row label {
  color: var(--ref-text) !important;
  font-size: 13px !important;
  font-weight: 550 !important;
  line-height: 1.4;
  letter-spacing: 0;
}
.auth-modal-dialog .auth-field input,
.auth-card-inner .auth-field input {
  width: 100%;
  box-sizing: border-box;
  height: 44px;
  min-height: 44px;
  padding: 10px 13px;
  border: 1px solid var(--ref-line);
  border-radius: 9px;
  background: var(--ref-surface);
  color: var(--ref-text);
  box-shadow: 0 1px 2px #173e2c04;
  font-size: 15px !important;
  line-height: 22px;
}
.auth-modal-dialog .refined-password input,
.auth-card-inner .refined-password input { padding-inline-end: 46px; }
.auth-modal-dialog .auth-field input:focus,
.auth-card-inner .auth-field input:focus {
  outline: none;
  background: var(--ref-surface);
  border-color: var(--ref-accent);
  box-shadow: 0 0 0 3px #0c8a6a12;
}
.auth-modal-dialog .auth-form,
.auth-card-inner .auth-form { gap: 12px; }
.auth-modal-dialog .send-code-btn,
.auth-card-inner .send-code-btn {
  min-height: 44px;
  border-radius: 9px;
  box-shadow: none;
}
.auth-modal-dialog .auth-panel-title,
.auth-card-inner .auth-panel-title {
  margin-bottom: 16px;
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -.03em;
  font-weight: 650;
}
.auth-modal-dialog .auth-submit-btn,
.auth-card-inner .auth-submit-btn {
  min-height: 44px;
  border-radius: 9px;
  font-weight: 600;
  box-shadow: 0 2px 5px #087e6112;
}
.auth-modal-dialog .password-reveal,
.auth-card-inner .password-reveal {
  inset-inline-end: 1px;
  height: 44px;
  width: 44px;
  color: var(--ref-muted);
  opacity: .8;
}
.auth-modal-dialog .password-reveal:hover,
.auth-card-inner .password-reveal:hover { opacity: 1; color: var(--ref-accent); }
@media (max-height: 740px) and (min-width: 601px) {
  .auth-modal-dialog .auth-form,
  .auth-modal-dialog .auth-password-row { gap: 10px; }
  .auth-modal-dialog .auth-panel-title { margin-bottom: 12px; }
  .auth-modal-body { padding-block: 14px 16px; }
}
@media (max-width: 600px) {
  .auth-modal-dialog .auth-field input,
  .auth-card-inner .auth-field input { font-size: 16px !important; }
  .auth-modal-dialog .auth-password-row,
  .auth-card-inner .auth-password-row { gap: 12px; }
}
/* Account workspace v3: neutral surfaces, restrained brand accents, complete copy. */
.auth-modal-dialog,.auth-card-inner {
  --account-bg: #ffffff;
  --account-soft: #f3f5f6;
  --account-border: #e0e5e8;
  --account-text: #16212b;
  --account-muted: #66717d;
  --account-action: #16212b;
  --account-on-action: #ffffff;
  color: var(--account-text);
  background: var(--account-bg);
  border: 1px solid var(--account-border);
  border-radius: 18px;
  box-shadow: 0 24px 80px #07172424, 0 2px 8px #07172405;
  text-align: start;
}
.auth-modal-backdrop { background: #0a152a70; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.auth-modal-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px;
  gap: 16px 12px;
  padding: 20px 24px 0;
  border: 0;
  background: transparent;
}
.auth-modal-header .auth-brand { grid-column: 1; grid-row: 1; }
.auth-modal-header .auth-brand-wordmark { color: var(--account-text); font-size: 14px; letter-spacing: -.3px; font-weight: 650; }
.auth-modal-header .auth-brand-icon { width: 28px; height: 28px; border-radius: 8px; box-shadow: none; }
.auth-modal-header .auth-modal-close { grid-column: 2; grid-row: 1; width: 36px; height: 36px; color: var(--account-muted); border-radius: 9px; }
.auth-modal-header .auth-modal-close:hover { background: var(--account-soft); color: var(--account-text); }
.auth-modal-header .auth-tabs,
.auth-card-inner > .auth-tabs {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  grid-column: 1 / -1;
  gap: 4px;
  width: 100%;
  padding: 4px;
  margin: 0;
  border: 1px solid var(--account-border);
  border-radius: 11px;
  background: var(--account-soft);
  box-sizing: border-box;
}
.auth-modal-header .auth-tab,
.auth-card-inner > .auth-tabs .auth-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 34px;
  padding: 7px 12px;
  margin: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--account-muted);
  font-size: 13px;
  line-height: 20px;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  box-shadow: none;
}
.auth-modal-header .auth-tab::after,
.auth-card-inner > .auth-tabs .auth-tab::after { display: none; }
.auth-modal-header .auth-tab.is-active,
.auth-card-inner > .auth-tabs .auth-tab.is-active {
  background: var(--account-bg);
  color: var(--account-text);
  font-weight: 600;
  box-shadow: 0 1px 3px #10202b12;
}
.auth-modal-body { padding: 22px 24px 24px; }
.auth-card-inner { max-width: 456px; padding: 24px; }
.auth-card-inner > .auth-tabs { margin-bottom: 24px; }
.auth-modal-dialog .auth-panel-title,
.auth-card-inner .auth-panel-title {
  margin: 0 0 7px;
  color: var(--account-text);
  font-size: 25px;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -.035em;
}
.auth-intro { margin: 0 0 22px; color: var(--account-muted); font-size: 13px; line-height: 1.6; }
.auth-modal-dialog .auth-form,.auth-card-inner .auth-form { gap: 14px; }
.auth-modal-dialog .auth-password-row,.auth-card-inner .auth-password-row { grid-template-columns: minmax(0,1fr); gap: 14px; }
.auth-modal-dialog .auth-field label,.auth-card-inner .auth-field label,
.auth-modal-dialog .auth-password-row label,.auth-card-inner .auth-password-row label {
  color: var(--account-text) !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  line-height: 1.5;
}
.auth-modal-dialog .auth-field input,.auth-card-inner .auth-field input {
  height: 44px;
  min-height: 44px;
  background: var(--account-bg);
  color: var(--account-text);
  border-color: var(--account-border);
  border-radius: 9px;
  font-size: 15px !important;
  box-shadow: 0 1px 2px #152c3903;
}
.auth-modal-dialog .auth-field input:hover,.auth-card-inner .auth-field input:hover { border-color: #b1bdc6; }
.auth-modal-dialog .auth-field input:focus,.auth-card-inner .auth-field input:focus { background: var(--account-bg); border-color: #0b8b71; box-shadow: 0 0 0 3px #0b8b7110; }
.auth-modal-dialog .password-reveal,.auth-card-inner .password-reveal { color: var(--account-muted); }
.auth-modal-dialog .send-code-btn,.auth-card-inner .send-code-btn {
  background: var(--account-soft);
  color: var(--account-text);
  border: 1px solid var(--account-border);
  font-size: 12px;
  font-weight: 550;
}
.auth-modal-dialog .auth-submit-btn,.auth-card-inner .auth-submit-btn {
  min-height: 44px;
  background: var(--account-action);
  color: var(--account-on-action);
  border: 1px solid transparent;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 2px 4px #06172b10;
  transition: filter .15s, box-shadow .15s;
}
.auth-modal-dialog .auth-submit-btn:hover,.auth-card-inner .auth-submit-btn:hover { background: var(--account-action); filter: brightness(1.12); box-shadow: 0 3px 8px #06172b18; transform: none; }
.auth-modal-dialog .auth-submit-btn:disabled,.auth-card-inner .auth-submit-btn:disabled { opacity: .55; cursor: wait; }
.auth-modal-dialog .auth-forgot-link,.auth-card-inner .auth-forgot-link { color: #08785f; font-size: 12px; font-weight: 500; }
.auth-modal-dialog .auth-switch-prompt,.auth-card-inner .auth-switch-prompt { margin: 2px 0 0; color: var(--account-muted); font-size: 12px; line-height: 1.7; }
.auth-modal-dialog .auth-switch-prompt a,.auth-card-inner .auth-switch-prompt a { color: #08785f; font-weight: 600; margin-inline-start: 4px; }
.auth-modal-dialog .auth-submit-btn:focus-visible,.auth-card-inner .auth-submit-btn:focus-visible,
.auth-modal-dialog .auth-tab:focus-visible,.auth-card-inner .auth-tab:focus-visible { outline: 2px solid #0b8b71; outline-offset: 3px; }
.recent-friendly-hint { align-items: center; padding: 14px 16px; }
.recent-friendly-hint .hint-text strong { display: block; margin: 0 0 2px; font-size: 12px; }
.recent-friendly-hint .hint-text { font-size: 12px; line-height: 1.7; }
html.theme-dark .auth-modal-dialog,html.theme-dark .auth-card-inner {
  --account-bg: #141b23;
  --account-soft: #1b242e;
  --account-border: #303b47;
  --account-text: #edf2f7;
  --account-muted: #a2adba;
  --account-action: #e4edf5;
  --account-on-action: #15212d;
}
html.theme-dark .auth-modal-dialog .auth-forgot-link,html.theme-dark .auth-card-inner .auth-forgot-link,
html.theme-dark .auth-modal-dialog .auth-switch-prompt a,html.theme-dark .auth-card-inner .auth-switch-prompt a { color: #68d4b2; }
@media(prefers-color-scheme:dark){html:not(.theme-light) .auth-modal-dialog,html:not(.theme-light) .auth-card-inner {
  --account-bg:#141b23;--account-soft:#1b242e;--account-border:#303b47;--account-text:#edf2f7;--account-muted:#a2adba;--account-action:#e4edf5;--account-on-action:#15212d;
}}
@media(max-height:760px) and (min-width:601px){
  .auth-modal-header { padding-top: 12px; gap: 10px 12px; }
  .auth-modal-body { padding-block: 16px 18px; }
  .auth-intro { margin-bottom: 16px; }
  .auth-modal-dialog .auth-form,.auth-modal-dialog .auth-password-row { gap: 10px; }
}
@media(max-width:600px){
  .auth-modal-dialog { border-radius: 0; border: 0; }
  .auth-modal-header { padding: max(12px,env(safe-area-inset-top)) 16px 0; }
  .auth-modal-body { padding: 20px 16px max(24px,env(safe-area-inset-bottom)); }
  .auth-standalone-card { padding-top: 20px; }
  .auth-card-inner { max-width: 400px; padding: 0; border: 0; background: transparent; box-shadow: none; border-radius: 0; }
  .auth-card-inner > .auth-tabs { margin-bottom: 24px; }
  .auth-modal-dialog .auth-field input,.auth-card-inner .auth-field input { font-size: 16px !important; }
  .auth-page-main { background: #f8fafb; }
  html.theme-dark .auth-page-main { background: #0e151d; }
}
@media(max-width:360px){
  .auth-modal-header { padding-inline: 10px; }
  .auth-modal-header .auth-brand-wordmark { display: block; }
  .auth-modal-body { padding-inline: 10px; }
}
@media(prefers-reduced-motion:reduce){.auth-submit-btn { transition: none !important; }}

/* Second visual review: keep the register flow compact without reducing touch targets. */
@media(min-width:601px){
  .auth-modal-header { grid-template-columns: minmax(0,1fr) minmax(140px,180px) 36px; gap: 12px; padding: 16px 20px 0; }
  .auth-modal-header .auth-tabs { grid-column: 2; grid-row: 1; }
  .auth-modal-header .auth-modal-close { grid-column: 3; grid-row: 1; }
}
.auth-modal-dialog .auth-form,.auth-card-inner .auth-form { gap: 12px; }
.auth-modal-dialog .auth-password-row,.auth-card-inner .auth-password-row { gap: 12px; }
.auth-modal-dialog .auth-panel-title,.auth-card-inner .auth-panel-title { margin-bottom: 18px; }
.auth-modal-dialog .auth-panel-title:has(+ .auth-intro),.auth-card-inner .auth-panel-title:has(+ .auth-intro) { margin-bottom: 7px; }
@media(max-height:760px) and (min-width:601px){
  .auth-modal-dialog .auth-form,.auth-modal-dialog .auth-password-row { gap: 10px; }
  .auth-modal-header { padding-top: 12px; }
}

html.theme-dark .auth-modal-dialog,html.theme-dark .auth-card-inner {
  background: var(--account-bg); border-color: var(--account-border);
}
@media(max-width:600px){html.theme-dark .auth-card-inner {background:transparent;border:0}}
@media(prefers-color-scheme:dark){html:not(.theme-light) .auth-page-main{background:#0e151d}html:not(.theme-light) .auth-modal-dialog .auth-forgot-link,html:not(.theme-light) .auth-card-inner .auth-forgot-link,html:not(.theme-light) .auth-modal-dialog .auth-switch-prompt a,html:not(.theme-light) .auth-card-inner .auth-switch-prompt a{color:#68d4b2}}

html.theme-dark .auth-modal-dialog .auth-field input,
html.theme-dark .auth-card-inner .auth-field input { background: var(--account-bg); border-color: var(--account-border); color: var(--account-text); }
html.theme-dark .auth-modal-dialog .auth-field input:focus,
html.theme-dark .auth-card-inner .auth-field input:focus { border-color: #48c7a4; box-shadow: 0 0 0 3px #48c7a415; }
html.theme-dark .auth-modal-dialog .auth-field label,
html.theme-dark .auth-card-inner .auth-field label { color: var(--account-text) !important; }

/* auth-fields.css */
/* URL.ASIA account fields — depth-1
 * A quiet inset surface, with stable geometry across interaction states.
 * Scoped to account forms; creation and dashboard fields are unaffected.
 */
html :is(.auth-modal-dialog, .auth-card-inner) {
  --field-fill-top: #f0f4f6;
  --field-fill-bottom: #f8fafb;
  --field-border: #cbd6dc;
  --field-border-hover: #b3c3ca;
  --field-text: #1e303a;
  --field-placeholder: #72818c;
  --field-inset: rgba(24, 48, 65, .065);
  --field-edge: rgba(255, 255, 255, .9);
  --field-accent: #16876c;
  --field-ring: rgba(22, 135, 108, .12);
  --field-focus-fill: #ffffff;
  --field-invalid: #b7474e;
}

html.theme-dark :is(.auth-modal-dialog, .auth-card-inner) {
  --field-fill-top: #101820;
  --field-fill-bottom: #18232d;
  --field-border: #354653;
  --field-border-hover: #4a6272;
  --field-text: #edf3f6;
  --field-placeholder: #a4b2be;
  --field-inset: rgba(0, 0, 0, .2);
  --field-edge: rgba(255, 255, 255, .035);
  --field-accent: #6bd7b4;
  --field-ring: rgba(107, 215, 180, .13);
  --field-focus-fill: #172630;
  --field-invalid: #f09b9f;
}

html :is(.auth-modal-dialog, .auth-card-inner) .auth-form .auth-field input {
  width: 100%;
  height: 44px;
  min-height: 44px;
  box-sizing: border-box;
  padding: 10px 14px;
  border: 1px solid var(--field-border);
  border-radius: 11px;
  background: linear-gradient(180deg, var(--field-fill-top), var(--field-fill-bottom));
  color: var(--field-text);
  box-shadow:
    inset 0 2px 4px var(--field-inset),
    0 1px 0 var(--field-edge);
  caret-color: var(--field-accent);
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

html :is(.auth-modal-dialog, .auth-card-inner) .auth-form .auth-field input::placeholder {
  color: var(--field-placeholder);
  opacity: 1;
}

html :is(.auth-modal-dialog, .auth-card-inner) .auth-form .auth-field input:hover {
  border-color: var(--field-border-hover);
}

html :is(.auth-modal-dialog, .auth-card-inner) .auth-form .auth-field input:focus {
  outline: none;
  border-color: var(--field-accent);
  background: var(--field-focus-fill);
  box-shadow:
    inset 0 1px 2px var(--field-inset),
    0 0 0 3px var(--field-ring),
    0 1px 0 var(--field-edge);
}

/* Keep space for the existing reveal control, in both writing directions. */
html :is(.auth-modal-dialog, .auth-card-inner) .auth-form .refined-password input {
  padding-inline-end: 48px;
}

html :is(.auth-modal-dialog, .auth-card-inner) .auth-form .password-reveal {
  inset-inline-end: 1px;
  top: 0;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--field-placeholder);
  opacity: 1;
}

html :is(.auth-modal-dialog, .auth-card-inner) .auth-form .password-reveal::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 14px;
  bottom: 14px;
  width: 1px;
  background: var(--field-border);
  opacity: .7;
}

html :is(.auth-modal-dialog, .auth-card-inner) .auth-form .password-reveal:hover,
html :is(.auth-modal-dialog, .auth-card-inner) .auth-form .password-reveal[aria-pressed="true"] {
  color: var(--field-accent);
  background: transparent;
}

html :is(.auth-modal-dialog, .auth-card-inner) .auth-form .password-reveal:focus-visible {
  outline: 2px solid var(--field-accent);
  outline-offset: -5px;
}

html :is(.auth-modal-dialog, .auth-card-inner) .auth-form .auth-field input[aria-invalid="true"] {
  border-color: var(--field-invalid);
}

/* Autofill remains legible without inheriting the browser's default yellow. */
html :is(.auth-modal-dialog, .auth-card-inner) .auth-form .auth-field input:-webkit-autofill {
  -webkit-text-fill-color: var(--field-text);
  caret-color: var(--field-accent);
  -webkit-box-shadow: inset 0 0 0 1000px var(--field-fill-bottom);
  border-color: var(--field-border);
}

html :is(.auth-modal-dialog, .auth-card-inner) .auth-form .auth-field input:-webkit-autofill:focus {
  border-color: var(--field-accent);
  -webkit-box-shadow: inset 0 0 0 1000px var(--field-focus-fill), 0 0 0 3px var(--field-ring);
}

@media (prefers-color-scheme: dark) {
  html:not(.theme-light) :is(.auth-modal-dialog, .auth-card-inner) {
    --field-fill-top: #101820;
    --field-fill-bottom: #18232d;
    --field-border: #354653;
    --field-border-hover: #4a6272;
    --field-text: #edf3f6;
    --field-placeholder: #a4b2be;
    --field-inset: rgba(0, 0, 0, .2);
    --field-edge: rgba(255, 255, 255, .035);
    --field-accent: #6bd7b4;
    --field-ring: rgba(107, 215, 180, .13);
    --field-focus-fill: #172630;
    --field-invalid: #f09b9f;
  }
}

@media (max-width: 600px) {
  html :is(.auth-modal-dialog, .auth-card-inner) .auth-form .auth-field input {
    font-size: 16px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html :is(.auth-modal-dialog, .auth-card-inner) .auth-form .auth-field input {
    transition: none;
  }
}

@media (forced-colors: active) {
  html :is(.auth-modal-dialog, .auth-card-inner) .auth-form .auth-field input {
    border-color: CanvasText;
    background: Canvas;
    color: CanvasText;
    box-shadow: none;
    forced-color-adjust: auto;
  }
  html :is(.auth-modal-dialog, .auth-card-inner) .auth-form .auth-field input:focus {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }
}