:root{color-scheme:light;--paper:#f6f4ed;--ink:#183b32;--muted:#77847c;--green:#58cc02;--green-dark:#47a900;--line:#e8e9df;--white:#fff;--mono:'DM Mono',monospace;--sans:'DM Sans',sans-serif;--display:'Manrope',sans-serif}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);min-height:100vh}
.shell{max-width:1240px;margin:auto;padding:0 48px}
.topbar{min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:12px 0;border-bottom:1px solid #e7e5dc}
.topbar-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.top-checkbox-label{display:inline-flex;align-items:center;gap:8px;margin:0;padding:7px 12px;border-radius:8px;border:1px solid #dce3d8;background:#fbfbf5;font-size:12px;font-weight:600;color:var(--ink);cursor:pointer;user-select:none}
.top-checkbox-label input{accent-color:var(--green-dark);width:15px;height:15px;margin:0;cursor:pointer}
.wordmark{display:flex;align-items:center;gap:11px;color:var(--ink);text-decoration:none;font-family:var(--display);font-size:15px;font-weight:800;letter-spacing:-.04em}
.mark{display:grid;place-items:center;background:var(--green);color:white;width:28px;height:28px;border-radius:9px 9px 9px 3px;font-family:var(--display);font-weight:800;font-size:20px}
.mode,.eyebrow,.card-kicker,footer{font:500 10px var(--mono);letter-spacing:.12em}
.mode{display:flex;align-items:center;gap:8px;color:#7b867e}
.mode i,.dot-pair i{width:6px;height:6px;border-radius:50%;background:var(--green);display:inline-block}
.nav-link{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:8px;border:1px solid #dce3d8;background:#fbfbf5;color:var(--ink);text-decoration:none;font-size:12px;font-weight:600;transition:background .15s,border-color .15s}
.nav-link:hover{background:#f0f4eb;border-color:#bdd1b4}

.layout{display:grid;grid-template-columns:1fr 440px;align-items:center;gap:8%;padding:76px 3% 76px}
.intro{max-width:530px}
.eyebrow{display:flex;align-items:center;gap:12px;color:#73847b}
.line{height:1px;width:28px;background:var(--green-dark)}
h1{font:700 clamp(44px,5.6vw,72px)/1.03 var(--display);letter-spacing:-.07em;margin:25px 0 20px}
h1 em{font-style:normal;color:#60b72a}
.lede{font-size:15px;line-height:1.75;color:#61736a;max-width:450px;margin:0}
.route{margin-top:36px;display:flex;align-items:center;gap:16px}
.route-step{display:flex;align-items:center;gap:10px}
.route-icon{width:35px;height:35px;border:1px solid #dce3d8;border-radius:11px;display:grid;place-items:center;color:#55ae24;background:#fbfbf5}
.route-step strong,.route-step small{display:block}
.route-step strong{font-size:12px;font-weight:700}
.route-step small{font-size:11px;color:#89948c;margin-top:3px}
.route-join{display:flex;align-items:center;justify-content:center;color:#7a9681}
.privacy{display:flex;gap:11px;align-items:center;margin-top:44px;color:#849087;font-size:11px;line-height:1.7}
.lock{color:#69ad45;display:inline-flex;align-items:center}

.card{background:var(--white);border:1px solid #eeeee7;border-radius:17px;padding:32px 32px 0;box-shadow:0 22px 55px rgba(38,66,47,.07),0 3px 10px rgba(38,66,47,.025)}
.card-head{display:flex;align-items:center;gap:13px;margin-bottom:22px}
.duo-badge{width:42px;height:42px;border-radius:13px;background:#e8f8db;color:#57b629;display:grid;place-items:center;font:800 31px var(--display);line-height:1}
.card-kicker{font-size:9px;color:#94a097;letter-spacing:.14em;display:block}
.card h2{font:700 19px var(--display);letter-spacing:-.04em;margin:3px 0 0}
.active-proxy-pill{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:8px;background:#f2faeb;border:1px solid #d5ecc3;color:#2f6817;font-size:11px;font-weight:600;margin-bottom:14px}
label{display:block;font-size:12px;font-weight:700;margin:16px 0 8px;color:#384f44}
.input-wrap{height:47px;border:1px solid #e3e8e0;border-radius:8px;display:flex;align-items:center;padding:0 12px;transition:border-color .15s,box-shadow .15s;background:#fff}
.input-wrap:focus-within{border-color:#74c740;box-shadow:0 0 0 3px rgba(88,204,2,.1)}
.input-icon{color:#9baa9d;width:24px;display:inline-flex;align-items:center}
.input-wrap input,.input-wrap select{border:0;outline:0;background:transparent;width:100%;min-width:0;color:var(--ink);font:13px var(--sans)}
.otp-input-wrap input{font:600 20px var(--mono);letter-spacing:.26em}
input::placeholder{color:#b0bab2}
.reveal{border:0;background:none;color:#75a25c;font:600 11px var(--sans);cursor:pointer;padding:6px}
.field-note{font-size:10.5px;color:#96a198;margin:8px 0 20px;line-height:1.5}
.submit{width:100%;height:48px;border:0;border-radius:8px;background:var(--green);box-shadow:0 3px 0 #46a900;color:white;font:700 13px var(--sans);display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;transition:background .15s,transform .15s}
.submit:hover{background:#63d50a}
.submit:active{transform:translateY(2px);box-shadow:0 1px 0 #46a900}
.submit:focus-visible,.reveal:focus-visible{outline:3px solid #a5dc80;outline-offset:3px}
.submit b{position:absolute;right:16px;display:inline-flex;align-items:center}
.submit:disabled{opacity:.65;cursor:not-allowed}
.admin-submit{margin-top:22px}

.status{margin-top:14px;border-radius:8px;padding:11px 13px;font-size:12px;line-height:1.5}
.status[data-kind=error]{background:#fff0ec;color:#a33d2a;border:1px solid #f7d0c6}
.status[data-kind=success]{background:#eff9e9;color:#3b7622;border:1px solid #cdeab9}
.status[data-kind=loading]{background:#f4f7f1;color:#546558;border:1px solid #dfe6da}
.card-foot{margin:24px -32px 0;border-top:1px solid #f0f1ec;min-height:52px;display:flex;align-items:center;justify-content:center;gap:9px;color:#88938b;font-size:10px}
.dot-pair{display:flex;gap:3px}
.dot-pair i{width:4px;height:4px}

/* ADMIN DASHBOARD */
.dashboard-wrap{padding:36px 0 56px}
.dashboard-grid{display:flex;flex-direction:column;gap:28px}
.panel-card{background:var(--white);border:1px solid #e8ebe2;border-radius:16px;padding:28px;box-shadow:0 14px 36px rgba(38,66,47,.05)}
.panel-header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-bottom:18px;border-bottom:1px solid #f0f1ec}
.panel-header h2{font:700 20px var(--display);letter-spacing:-.03em;margin:4px 0 6px}
.panel-sub{margin:0;font-size:12.5px;color:#6c7d73}
.panel-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.otp-generate-bar{flex:1;justify-content:flex-end}
.otp-url-input-wrap{height:38px;min-width:300px;max-width:420px;flex:1}

.btn-primary,.btn-outline,.btn-danger{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:8px;font:600 12.5px var(--sans);cursor:pointer;transition:all .15s}
.btn-primary{border:0;background:var(--green);color:#fff;box-shadow:0 2px 0 #46a900}
.btn-primary:hover{background:#63d50a}
.btn-primary:disabled,.btn-outline:disabled,.btn-danger:disabled{opacity:.45;cursor:not-allowed}
.btn-outline{border:1px solid #d5ddd2;background:#fbfbf7;color:var(--ink)}
.btn-outline:hover:not(:disabled){background:#f0f4ec;border-color:#b8c8b2}
.btn-danger{border:1px solid #f2c5ba;background:#fff5f2;color:#a83825}
.btn-danger:hover:not(:disabled){background:#ffe8e2}
.btn-sm{height:34px;padding:0 11px;font-size:12px}
.btn-xs{height:28px;padding:0 9px;font-size:11px;border-radius:6px}

.empty-state{text-align:center;padding:42px 20px;background:#fafaf5;border:1px dashed #dce3d6;border-radius:12px;margin-top:18px}
.empty-icon{width:52px;height:52px;border-radius:14px;background:#eaf8de;color:#4ea81d;display:inline-grid;place-items:center;margin-bottom:12px}
.empty-state h3{margin:0 0 6px;font:700 16px var(--display)}
.empty-state p{margin:0 auto 18px;max-width:440px;font-size:12.5px;color:#6f7f75;line-height:1.6}

.table-wrap{margin-top:18px;overflow-x:auto}
.data-table{width:100%;border-collapse:collapse;font-size:12.5px}
.data-table th{text-align:left;padding:10px 12px;font:600 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#78867d;border-bottom:1px solid #e8ebe2;background:#fafaf6}
.data-table td{padding:12px;border-bottom:1px solid #f0f2eb;vertical-align:middle}
.col-check{width:36px;text-align:center}
.mono-cell{font-family:var(--mono);font-size:12px}
.url-cell{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#415b4d}
.url-cell-compact{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#415b4d}
.url-cell-compact a{color:#2a7506;text-decoration:none}
.url-cell-compact a:hover{text-decoration:underline}
.col-redeem-link{max-width:180px;width:180px}
.cell-note-compact{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.table-responsive-fit{overflow-x:auto}
.data-table-fit{table-layout:auto;width:100%}
.otp-cell{font-size:15px;font-weight:600;letter-spacing:.14em;color:#1e4631}
.cell-primary{font-weight:600;color:var(--ink)}
.cell-sub{font-size:11px;color:#829087;margin-top:2px}
.text-err{color:#a33d2a}
.row-actions{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;white-space:nowrap}
.col-actions-redeem{min-width:240px;width:240px}
td:has(.row-actions){white-space:nowrap}

.badge{display:inline-flex;align-items:center;padding:3px 8px;border-radius:6px;font:600 10px var(--mono);letter-spacing:.06em}
.badge-main{background:#e6f7d6;color:#2f7c08;border:1px solid #c3e8a0}
.badge-backup{background:#eef4ff;color:#2457a7;border:1px solid #c8dcff}
.badge-live{background:#ecf9e8;color:#2e7318}
.badge-dead{background:#fff0ec;color:#a33d2a}
.badge-muted{background:#f2f3ee;color:#7a857d}

.otp-highlight{margin-top:18px;padding:18px 22px;border-radius:12px;background:#f3faec;border:1px solid #cce9b5;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.otp-code-display{font:700 30px var(--mono);letter-spacing:.22em;color:#225909;margin-top:4px}

/* CUSTOM CONFIRM & SCREENSHOT MODALS */
.modal-backdrop{position:fixed;inset:0;background:rgba(24,59,50,.48);backdrop-filter:blur(3px);z-index:10000;display:grid;place-items:center;padding:20px;overflow-y:auto}
.modal-card{background:#fff;border:1px solid #e4e8df;border-radius:16px;max-width:440px;width:100%;padding:24px;box-shadow:0 24px 60px rgba(0,0,0,.18)}
.modal-card-lg{max-width:600px}
.modal-card-xl{max-width:960px;padding:20px 24px 24px}
.modal-head{display:flex;align-items:flex-start;gap:14px}
.modal-icon-warn{width:40px;height:40px;border-radius:10px;background:#fff0ec;color:#a83825;display:grid;place-items:center;flex-shrink:0}
.modal-head h3{margin:0 0 6px;font:700 17px var(--display)}
.modal-head p{margin:0;font-size:13px;color:#5b6c62;line-height:1.5}
.modal-actions{margin-top:22px;display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}

.form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.select-input,.textarea-input{width:100%;border:1px solid #d5dbd0;border-radius:11px;background:#fbfbf8;padding:11px 13px;font:500 13px var(--sans);color:var(--ink);outline:none;transition:border-color .15s,box-shadow .15s}
.select-input:focus,.textarea-input:focus{border-color:#74c93b;box-shadow:0 0 0 3px rgba(116,201,59,.16);background:#fff}
.textarea-input{min-height:66px;resize:vertical}

.result-copy-box{margin-top:14px;padding:14px 16px;border-radius:12px;background:#f5faf0;border:1px solid #cde7b8}
.result-copy-label{font:600 11px var(--sans);color:#3b691c;text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.result-copy-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.result-otp-value{font:700 28px var(--mono);letter-spacing:.2em;color:#1e5208}
.result-link-value{font:500 12.5px var(--mono);color:#183b32;word-break:break-all;background:#fff;padding:9px 12px;border-radius:8px;border:1px solid #d8e5cd;flex:1;min-width:220px}

.admin-nav-tabs{display:flex;align-items:center;gap:10px;margin-bottom:20px;border-bottom:1px solid #e4e6dd;padding-bottom:14px;flex-wrap:wrap}
.admin-tab-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:10px;border:1px solid #d8ddd3;background:#fff;color:#425249;font:600 13px var(--sans);cursor:pointer;transition:all .15s}
.admin-tab-btn:hover{border-color:#8cc864;color:#183b32}
.admin-tab-btn.active{background:#183b32;color:#fff;border-color:#183b32}
.admin-tab-count{display:inline-flex;align-items:center;justify-content:center;padding:2px 7px;border-radius:999px;font:600 11px var(--mono);background:rgba(115,177,75,.18);color:#2a6b0c}
.admin-tab-btn.active .admin-tab-count{background:rgba(255,255,255,.18);color:#fff}

.redeem-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 0;flex-wrap:wrap}
.search-box{position:relative;flex:1;min-width:240px;max-width:400px}
.search-box input{width:100%;padding:9px 12px 9px 34px;border:1px solid #d5dbd0;border-radius:9px;background:#fbfbf8;font:500 13px var(--sans);color:var(--ink);outline:none}
.search-box input:focus{border-color:#74c93b;background:#fff}
.search-box svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:#7c8981;pointer-events:none}
.filter-pills{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.filter-pill{padding:7px 12px;border-radius:8px;border:1px solid #d8ddd3;background:#fff;color:#4f5e55;font:600 12px var(--sans);cursor:pointer;transition:all .15s}
.filter-pill:hover{border-color:#96c973}
.filter-pill.active{background:#eaf7de;border-color:#69b82f;color:#245e07}
.pagination-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:14px;margin-top:12px;border-top:1px solid #ecefe8;font-size:12.5px;color:#5a6960;flex-wrap:wrap}
.pagination-controls{display:flex;align-items:center;gap:8px}

.screenshot-modal-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:14px;border-bottom:1px solid #ecefe8}
.screenshot-modal-bar h3{margin:3px 0 0;font:700 16px var(--display)}
.screenshot-modal-body{margin-top:16px;max-height:76vh;overflow:auto;border-radius:10px;border:1px solid #e4e8df;background:#f7f8f4;display:grid;place-items:center}
.screenshot-modal-body img{max-width:100%;height:auto;display:block;border-radius:9px}

.shot-thumb-group{display:flex;align-items:center;gap:8px}
.shot-thumb-btn{display:inline-flex;flex-direction:column;align-items:center;gap:3px;padding:3px;border:1px solid #d7e0d2;border-radius:7px;background:#fafbf7;cursor:pointer;transition:border-color .15s,transform .15s}
.shot-thumb-btn:hover{border-color:#58cc02;transform:translateY(-1px)}
.shot-thumb-btn img{width:64px;height:40px;object-fit:cover;border-radius:4px;display:block;background:#eef1ea}
.shot-thumb-btn span{font:600 9.5px var(--mono);color:#46594d}

.toast-container{position:fixed;top:20px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:8px;max-width:360px}
.toast{padding:12px 16px;border-radius:10px;background:#183b32;color:#fff;font-size:12.5px;font-weight:600;box-shadow:0 10px 26px rgba(0,0,0,.14)}
.toast-error{background:#9e2f1c}

footer{display:flex;justify-content:space-between;color:#a0a79f;border-top:1px solid #e7e5dc;padding:19px 0;font-size:9px}
footer i{font-style:normal;padding:0 5px;color:#73b14b}

@media(max-width:900px){
  .shell{padding:0 24px}
  .layout{grid-template-columns:1fr;gap:36px;padding:48px 0}
  .card{max-width:500px;width:100%}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}

/* DUOLINGO CLEAN NATIVE SIGN-IN STYLING */
.duo-clean-card {
  padding: 36px 32px 28px !important;
  border-radius: 20px !important;
  border: 2px solid #e5e5e5 !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06) !important;
}
.duo-card-header {
  text-align: center;
  margin-bottom: 24px;
}
.duo-owl-badge {
  display: inline-flex;
  margin-bottom: 12px;
}
.duo-clean-title {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  color: #3c3c3c !important;
  margin: 0 0 6px 0 !important;
  letter-spacing: -0.02em;
}
.duo-clean-sub {
  font-size: 0.92rem;
  color: #777777;
  margin: 0;
  line-height: 1.4;
}
.duo-clean-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.duo-input-group {
  position: relative;
  width: 100%;
}
.duo-input-group input {
  width: 100%;
  padding: 14px 16px;
  background: #f7f7f7 !important;
  border: 2px solid #e5e5e5 !important;
  border-radius: 14px !important;
  font-size: 1rem !important;
  font-family: inherit !important;
  color: #3c3c3c !important;
  transition: all 0.2s ease;
  box-sizing: border-box;
}
.duo-input-group input:focus {
  outline: none;
  background: #ffffff !important;
  border-color: #58cc02 !important;
  box-shadow: 0 0 0 3px rgba(88, 204, 2, 0.18) !important;
}
.duo-password-group input {
  padding-right: 68px !important;
}
.duo-reveal-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  font-size: 0.78rem;
  font-weight: 800;
  color: #afafaf;
  letter-spacing: 0.05em;
  cursor: pointer;
  padding: 6px 8px;
}
.duo-reveal-btn:hover {
  color: #58cc02;
}
.duo-primary-btn {
  margin-top: 8px;
  width: 100%;
  padding: 14px;
  background: #58cc02 !important;
  color: #ffffff !important;
  border: none !important;
  border-bottom: 4px solid #46a302 !important;
  border-radius: 14px !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}
.duo-primary-btn:hover:not(:disabled) {
  filter: brightness(1.05);
}
.duo-primary-btn:active:not(:disabled) {
  transform: translateY(2px);
  border-bottom-width: 2px !important;
}
.duo-primary-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.duo-status-box {
  margin-top: 14px;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 0.9rem;
  font-weight: 600;
}
.duo-card-footer {
  margin-top: 18px;
  text-align: center;
  font-size: 0.82rem;
  color: #afafaf;
  font-weight: 600;
}