:root {
  color-scheme: light;
  --bg: #f4f6f8;
  --ink: #151a22;
  --muted: #687383;
  --brand: #256fbc;
  --mint: #00a887;
  --danger: #c94857;
  --line: rgba(79, 111, 148, .16);
  --glass-bg: rgba(236, 246, 251, .78);
  --shadow: 0 30px 86px rgba(39, 64, 94, .18);
  --soft-card-shadow: 0 18px 48px rgba(47, 74, 112, .13), 0 4px 14px rgba(47, 74, 112, .05);
  --soft-ring: inset 0 0 0 1px rgba(255, 255, 255, .86);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #10151c;
  --ink: #edf4fb;
  --muted: #9eacbd;
  --line: rgba(143, 176, 211, .17);
  --glass-bg: rgba(25, 35, 47, .86);
  --shadow: 0 30px 86px rgba(0, 0, 0, .38);
  --soft-card-shadow: 0 18px 48px rgba(0, 0, 0, .25), 0 4px 14px rgba(0, 0, 0, .15);
  --soft-ring: inset 0 0 0 1px rgba(255, 255, 255, .05);
}

* { box-sizing: border-box; }
*[hidden] { display: none !important; }
html { min-width: 320px; scrollbar-width: none; scroll-behavior: smooth; }
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; }
body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 0%, rgba(37, 111, 188, .16), transparent 34%),
    radial-gradient(circle at 88% 8%, rgba(0, 168, 135, .12), transparent 30%),
    radial-gradient(circle at 50% 100%, rgba(191, 138, 22, .08), transparent 34%),
    linear-gradient(180deg, #eef6fb 0%, #f7fafc 44%, #eef4f7 100%),
    var(--bg);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "PingFang SC", "Hiragino Sans GB", "Segoe UI Variable", "Segoe UI", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;
}

:root[data-theme="dark"] body { background: radial-gradient(circle at 18% 0%, rgba(48, 124, 196, .16), transparent 34%), linear-gradient(#10151c, #131b24); }
button, input, textarea { font: inherit; }
button { color: inherit; cursor: pointer; }
button, a { -webkit-tap-highlight-color: transparent; }
svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.page-shell { width: min(100%, 920px); margin: 0 auto; padding: 26px 18px 12px; }
.hero { padding-bottom: 2px; text-align: center; }
.brand-line {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  width: fit-content;
  max-width: min(calc(100vw - 36px), 520px);
  min-height: 34px;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  padding: 4px 13px 4px 4px;
  border: 1px solid rgba(48, 115, 164, .17);
  border-radius: 999px;
  color: #365168;
  background: linear-gradient(135deg, rgba(255,255,255,.97), rgba(244,251,253,.91)), #fff;
  box-shadow: 0 5px 14px rgba(43,76,105,.067), inset 0 1px 0 rgba(255,255,255,.96);
  font-size: 12.3px;
  font-weight: 780;
  line-height: 1.15;
}
.brand-line::after { position: absolute; top: -70%; left: -36%; z-index: 0; width: 24%; height: 240%; border-radius: 50%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.62), transparent); transform: rotate(16deg); animation: brand-sheen 5.6s ease-in-out infinite; content: ""; }
.brand-line > * { position: relative; z-index: 1; }
.brand-chip { display: flex; min-width: 44px; min-height: 24px; align-items: center; justify-content: center; padding: 0 9px; border-radius: 999px; color: #fff; background: linear-gradient(135deg, #1b93b8, #12a28b); box-shadow: 0 3px 8px rgba(18,144,158,.18), inset 0 1px rgba(255,255,255,.28); font-size: 10.5px; font-weight: 900; }
@keyframes brand-sheen { 0%, 58% { opacity: 0; transform: translateX(0) rotate(16deg); } 72% { opacity: .75; } 88%,100% { opacity: 0; transform: translateX(620px) rotate(16deg); } }

.hero h1 { margin: 15px 0 0; color: #111827; background: linear-gradient(135deg, #111827 0%, #1f6fbc 52%, #07896f 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 38px; font-weight: 920; line-height: 1.14; text-wrap: balance; }
.hero p { width: min(100%, 620px); margin: 10px auto 0; color: #607286; font-size: 14px; font-weight: 680; line-height: 1.72; text-wrap: balance; }
.helper-actions { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; max-width: 100%; margin: 12px auto 0; gap: 10px; }
.helper-actions button { display: inline-flex; width: auto; min-width: 0; height: 38px; align-items: center; justify-content: center; gap: 7px; padding: 0 14px; border: 1px solid rgba(84,113,149,.18); border-radius: 999px; background: transparent; box-shadow: 0 3px 9px rgba(43,70,101,.055), inset 0 1px rgba(255,255,255,.9); font-size: 12.5px; font-weight: 780; white-space: nowrap; }
.helper-actions button:nth-child(1) { color: #2d655a; border-color: #cfe8df; }
.helper-actions button:nth-child(2) { color: #315f94; border-color: #d2e0f2; }
.helper-actions button:nth-child(3) { color: #806328; border-color: #eadcb8; }
.helper-mark { display: grid; width: 18px; height: 18px; place-items: center; }
.helper-mark svg { width: 18px; height: 18px; stroke-width: 1.85; }

.status-board { position: relative; margin-top: 10px; padding: 10px 12px 12px; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(235,246,252,.72)), rgba(226,238,246,.64); box-shadow: var(--soft-card-shadow), var(--soft-ring); }
.status-legend { display: grid; grid-template-columns: 102px 82px 96px 96px 96px; align-items: center; justify-content: center; gap: 0 24px; padding: 0 6px; }
.status-item { position: relative; display: flex; height: 22px; align-items: center; justify-content: center; gap: 7px; color: #687383; font-size: 13px; line-height: 13px; }
.status-item strong { color: #23384f; font-size: 15px; font-weight: 880; }
.status-item em { font-style: normal; font-weight: 700; white-space: nowrap; }
.status-pict { display: block; width: 10px; height: 10px; flex: 0 0 10px; border-radius: 50%; background: currentColor; }
.status-pict svg { display: none; }
.status-success { color: #19b77d; }
.status-wait { color: #e72a8a; }
.status-run { color: #20a3d2; }
.status-concurrency { color: #ee920a; }
.status-failed { color: #b9bec3; }
.heat-row { display: grid; min-height: 92px; grid-template-columns: repeat(48, minmax(0, 1fr)); align-content: center; gap: 4px; margin-top: 10px; padding: 8px; border: 1px solid rgba(84,113,149,.12); border-radius: 12px; background: rgba(255,255,255,.78); box-shadow: inset 0 1px rgba(255,255,255,.96), 0 8px 18px rgba(37,90,120,.043); }
.heat-row span { width: 100%; min-width: 0; aspect-ratio: 1; border-radius: 4px; background: #d3d9de; transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.heat-row span.pending { background: #d3d9de; }
.heat-row span.running { background: #3597df; box-shadow: 0 0 0 2px rgba(53,151,223,.11); animation: heat-pulse 1.1s ease-in-out infinite; }
.heat-row span.success { background: #20b794; }
.heat-row span.failed { background: #ef6978; }
.heat-row span.mixed { background: #efa019; }
.heat-row span.empty { background: rgba(211,217,222,.54); }
.heat-row span[data-tooltip] { cursor: help; }
.heat-row span[data-tooltip]:hover { z-index: 1; box-shadow: 0 0 0 3px rgba(35,56,79,.12); transform: translateY(-1px) scale(1.06); }
.heat-tooltip { position: fixed; z-index: 500; max-width: min(360px, calc(100vw - 24px)); padding: 8px 12px; border: 1px solid #405267; border-radius: 3px; color: #273649; background: rgba(255,255,255,.98); box-shadow: 0 8px 24px rgba(25,39,57,.16); font-size: 13px; font-weight: 650; line-height: 1.25; white-space: nowrap; pointer-events: none; }
.heat-tooltip[hidden] { display: none; }
@keyframes heat-pulse { 50% { opacity: .56; transform: scale(.9); } }

.tool-card { position: relative; contain: layout paint; margin-top: 12px; overflow: hidden; border: 1px solid rgba(76,111,151,.18); border-radius: 26px; background: linear-gradient(145deg, rgba(255,255,255,.86), rgba(231,245,250,.62) 46%, rgba(255,248,238,.58)), var(--glass-bg); box-shadow: var(--shadow), var(--soft-ring); }
.tool-card::before { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(135deg, rgba(255,255,255,.5), transparent 30%), linear-gradient(300deg, rgba(37,111,188,.06), transparent 42%); opacity: .42; content: ""; }
.tool-card::after { position: absolute; inset: 1px; z-index: 0; pointer-events: none; border: 1px solid rgba(255,255,255,.42); border-radius: 25px; content: ""; }
.tool-card > * { position: relative; z-index: 1; }
.card-toolbar { display: flex; height: 76px; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; background: linear-gradient(120deg, rgba(255,255,255,.7), rgba(232,247,251,.58)), rgba(246,251,253,.82); box-shadow: inset 0 -1px rgba(255,255,255,.58); }
.tabs { display: grid; width: 360px; height: 52px; grid-template-columns: repeat(2, minmax(0,1fr)); padding: 5px; border: 1px solid rgba(84,113,149,.18); border-radius: 20px; background: linear-gradient(145deg, rgba(255,255,255,.86), rgba(226,241,249,.7)), rgba(232,242,248,.82); box-shadow: 0 10px 22px rgba(47,74,112,.1), inset 0 1px rgba(255,255,255,.98); }
.tabs button { display: flex; height: 40px; align-items: center; justify-content: center; gap: 8px; padding: 0 12px; border: 0; border-radius: 15px; color: #5d6979; background: transparent; font-weight: 850; }
.tabs button.active { color: var(--brand); background: linear-gradient(145deg, #fff, rgba(239,248,253,.92)); box-shadow: 0 6px 15px rgba(47,74,112,.09), inset 0 1px rgba(255,255,255,.98); }
.purchase-cdk-button { display: inline-flex; min-width: 168px; height: 48px; align-items: center; justify-content: center; gap: 9px; margin-right: auto; padding: 0 20px; border: 1px solid rgba(33,139,205,.34); border-radius: 16px; color: #176fa9; background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(232,248,255,.9)); box-shadow: 0 9px 20px rgba(35,113,164,.12), inset 0 1px rgba(255,255,255,.98); font-size: 13px; font-weight: 900; text-decoration: none; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.purchase-cdk-button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.purchase-cdk-button:hover { border-color: rgba(23,111,169,.58); box-shadow: 0 12px 24px rgba(35,113,164,.18), inset 0 1px rgba(255,255,255,.98); transform: translateY(-1px); }
.tab-icon { width: 20px; height: 20px; stroke-width: 1.9; }
.task-count { display: grid; min-width: 21px; height: 21px; place-items: center; padding: 0 6px; border-radius: 999px; background: rgba(37,111,188,.1); font-size: 11px; }

.view { display: block; }
.extract-form { display: grid; grid-template-columns: minmax(0,1fr); gap: 15px; padding: 18px; background: linear-gradient(rgba(255,255,255,.42), rgba(255,255,255,.2)), rgba(255,255,255,.22); }
.method-row { display: grid; height: 96.333px; grid-template-columns: repeat(auto-fit, minmax(132px,1fr)); gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(145deg, rgba(255,255,255,.72), rgba(237,248,252,.54)), rgba(255,255,255,.46); box-shadow: var(--soft-card-shadow), var(--soft-ring); }
.method-row label { position: relative; cursor: pointer; user-select: none; }
.method-row input { position: absolute; opacity: 0; }
.method-option { position: relative; display: grid; height: 71px; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 3px 10px; padding: 14px 54px 14px 14px; overflow: hidden; border: 1px solid rgba(37,111,188,.38); border-radius: 18px; background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(235,246,252,.82)), rgba(255,255,255,.7); box-shadow: 0 18px 38px rgba(37,111,188,.12), 0 0 0 4px rgba(37,111,188,.045), inset 0 1px rgba(255,255,255,.98); }
.method-option::after { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, rgba(255,255,255,.74), transparent 34%), radial-gradient(circle at 92% 12%, rgba(37,111,188,.08), transparent 28%); opacity: .55; content: ""; }
.method-option > * { position: relative; z-index: 1; }
.method-option strong, .method-option small { display: block; }
.method-option strong { color: #26394c; font-size: 14px; font-weight: 880; }
.method-option small { margin-top: 4px; color: var(--muted); font-size: 13px; font-weight: 650; }
.method-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 14px; font-size: 11px; font-weight: 900; }
.method-kakao { color: #3c1e1e; background: linear-gradient(rgba(254,229,0,.34) 0 40%, rgba(255,255,255,.98) 40% 100%); box-shadow: inset 0 1px rgba(255,255,255,.72), inset 0 0 0 1px rgba(39,53,76,.06); }
.method-kakao svg { width: 23px; height: 23px; stroke-width: 1.8; }
.method-check { position: absolute; top: 50%; right: 18px; display: grid; width: 27px; height: 27px; place-items: center; border-radius: 999px; color: #fff; background: linear-gradient(145deg, #3e8dd7, #167fbd); box-shadow: 0 7px 15px rgba(37,111,188,.22); transform: translateY(-50%); }
.method-check svg { width: 17px; height: 17px; stroke-width: 2.4; }

.cdk-field { display: grid; height: 181.333px; grid-template-columns: minmax(0,1fr); gap: 10px; padding: 13px; border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(145deg, rgba(255,255,255,.76), rgba(246,251,254,.58)), rgba(255,255,255,.5); box-shadow: var(--soft-card-shadow), var(--soft-ring); }
.cdk-label { display: flex; height: 19px; align-items: center; justify-content: space-between; gap: 12px; color: #2f3948; }
.cdk-label strong { font-size: 14px; font-weight: 880; }
.cdk-label small { color: #718096; font-size: 11px; font-weight: 730; }
.cdk-input-wrap { display: grid; height: 50px; grid-template-columns: 58px minmax(0,1fr); overflow: hidden; border: 1px solid rgba(84,113,149,.24); border-radius: 15px; background: linear-gradient(145deg, #fff, rgba(244,250,253,.94)), #fff; box-shadow: 0 10px 22px rgba(47,74,112,.1), inset 0 1px rgba(255,255,255,.98); }
.cdk-input-wrap em { display: grid; place-items: center; border-right: 1px solid rgba(84,113,149,.14); color: #52657a; background: rgba(232,242,248,.58); font-size: 12px; font-style: normal; font-weight: 850; }
.cdk-input-wrap input { min-width: 0; padding: 0 14px; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 13px; }
.cdk-input-wrap input::placeholder { color: #9aa8b7; }
.cdk-input-wrap.verified { border-color: rgba(25,185,151,.48); box-shadow: 0 0 0 4px rgba(25,185,151,.08), 0 10px 22px rgba(47,74,112,.08); }
.cdk-input-wrap.invalid { border-color: rgba(201,72,87,.45); box-shadow: 0 0 0 4px rgba(201,72,87,.07); }
.cdk-help { display: flex; height: 20px; align-items: center; color: #6f7b8a; font-size: 12px; font-weight: 750; line-height: 16px; }
.cdk-verify-row { display: flex; height: 36px; align-items: center; justify-content: flex-start; gap: 8px; }
.cdk-verify-row button, .coupon-check-btn, .copy-all-result, .records-empty button { display: inline-flex; height: 36px; align-items: center; justify-content: center; gap: 7px; padding: 0 12px; border: 1px solid rgba(84,113,149,.19); border-radius: 11px; color: #45627e; background: linear-gradient(#fff, rgba(240,247,251,.9)); box-shadow: inset 0 1px rgba(255,255,255,.95); font-size: 12px; font-weight: 820; }
.cdk-verify-row button svg { width: 17px; height: 17px; }
.cdk-remaining { display: inline-flex; height: 32px; align-items: center; padding: 0 11px; border-radius: 10px; color: #6b7887; background: rgba(255,255,255,.48); font-size: 11.5px; font-weight: 780; }
.cdk-remaining.success { color: #14805f; background: rgba(226,250,242,.82); }
.cdk-remaining.error { color: #bd4352; background: rgba(255,238,241,.82); }
.session-copy { margin-left: auto; }

.session-panel { display: grid; height: auto; grid-template-columns: minmax(0,1fr); gap: 12px; padding: 13px; border: 1px solid var(--line); border-radius: 24px; background: linear-gradient(145deg, rgba(255,255,255,.7), rgba(239,248,252,.48)), rgba(255,255,255,.42); box-shadow: var(--soft-card-shadow), var(--soft-ring); }
.session-input { display: grid; height: 236px; grid-template-columns: minmax(0,1fr); grid-template-rows: 18px 164px 30px; gap: 12px; }
.session-title { display: flex; height: 18px; align-items: center; gap: 9px; color: #25384d; }
.session-title i { width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(#41bca0,#12936f); box-shadow: 0 0 0 4px rgba(18,147,111,.08); }
.session-title strong { font-size: 14px; font-weight: 890; }
.session-title small { padding: 2px 7px; border-radius: 999px; color: #256fbc; background: #e9f2ff; font-size: 10px; font-weight: 850; }
.session-textarea-wrap { display: block; height: 164px; overflow: hidden; border: 1px solid rgba(84,113,149,.22); border-radius: 18px; background: linear-gradient(145deg, #fff, rgba(248,251,254,.9)), linear-gradient(rgba(37,111,188,.035), transparent 44px), rgba(255,255,255,.92); box-shadow: 0 14px 30px rgba(35,49,73,.1), inset 0 1px #fff; }
.session-textarea-wrap textarea { width: 100%; height: 162px; resize: none; padding: 15px 16px; border: 0; outline: 0; color: var(--ink); background: transparent; font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; font-size: 13px; line-height: 1.6; }
.session-textarea-wrap textarea::placeholder { color: #9aa8b7; }
.session-textarea-wrap:focus-within { border-color: rgba(37,111,188,.5); box-shadow: 0 14px 30px rgba(35,49,73,.1), 0 0 0 3px rgba(37,111,188,.08), inset 0 1px #fff; }
.session-textarea-wrap textarea[aria-invalid="true"] { background: rgba(201,72,87,.035); }
.session-email-row { display: flex; height: 30px; align-items: center; gap: 8px; }
.token-profile { display: flex; width: fit-content; min-width: 0; max-width: 100%; height: 30px; align-items: center; gap: 8px; overflow: hidden; padding: 6px 12px; border: 1px solid rgba(120,134,150,.2); border-radius: 999px; color: #6b7785; background: rgba(120,134,150,.1); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.profile-dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #aab5c0; }
.token-profile.querying .profile-dot { background: #2788d0; box-shadow: 0 0 0 4px rgba(39,136,208,.09); }
.token-profile.valid .profile-dot, .token-profile.plus .profile-dot { background: #17956f; box-shadow: 0 0 0 4px rgba(23,149,111,.09); }
.token-profile.invalid .profile-dot, .token-profile.expired .profile-dot { background: #ca4b5a; }
.token-profile b { display: none; }
.token-profile .profile-main, .token-profile .profile-extra { display: inline-flex; min-width: 0; gap: 5px; }
.token-profile .profile-main span { overflow: hidden; text-overflow: ellipsis; }
.token-profile .profile-extra::before { color: #b2bcc6; content: "·"; }
.token-profile.empty .profile-extra { display: none; }
.token-profile.valid .profile-extra, .token-profile.plus .profile-extra { color: #16805e; font-weight: 850; }
.token-profile.invalid .profile-extra, .token-profile.expired .profile-extra { color: #c94857; font-weight: 850; }
.coupon-check-btn { height: 30px; flex: 0 0 auto; margin-left: auto; padding: 6px 14px; border-color: rgba(0,113,227,.35); border-radius: 999px; color: #0071e3; background: rgba(0,113,227,.08); box-shadow: none; font-size: 12.5px; }
.coupon-check-btn.danger { color: #b63c4b; border-color: rgba(201,72,87,.2); }

.result-area { position: relative; display: flow-root; min-height: 166px; overflow: visible; padding: 18px; border: 1px solid rgba(84,113,149,.14); border-radius: 24px; background: linear-gradient(145deg, rgba(255,255,255,.62), rgba(246,251,254,.46)), rgba(255,255,255,.36); box-shadow: inset 0 1px rgba(255,255,255,.72), 0 12px 28px rgba(35,49,73,.06); }
.extraction-progress { display: grid; gap: 10px; padding: 12px 13px; border: 1px solid rgba(47,140,255,.3); border-radius: 16px; background: linear-gradient(145deg, rgba(236,248,255,.96), rgba(243,252,249,.9)); box-shadow: inset 0 1px rgba(255,255,255,.96), 0 10px 24px rgba(37,111,188,.08); }
.progress-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #31465b; }
.progress-heading strong { min-width: 0; overflow: hidden; font-size: 13px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.progress-heading > span { flex: 0 0 auto; color: #718094; font-size: 11.5px; font-weight: 720; }
.progress-heading em { color: #16805e; font-style: normal; }.progress-heading b { color: #256fbc; }
.progress-track { height: 9px; overflow: hidden; border-radius: 999px; background: rgba(117,147,177,.16); box-shadow: inset 0 1px 2px rgba(38,65,90,.08); }
.progress-track > span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#1db3ed,#2d93e7 55%,#19b997); box-shadow: 0 0 12px rgba(45,147,231,.28); transition: width .38s ease; }
.progress-step-text { min-height: 16px; margin: -2px 0 0; overflow: hidden; color: #617489; font-size: 10.5px; font-weight: 720; text-overflow: ellipsis; white-space: nowrap; }
.progress-stages { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 7px; }
.progress-stages > span { display: flex; min-width: 0; height: 31px; align-items: center; gap: 6px; padding: 0 8px; overflow: hidden; border: 1px solid rgba(112,137,160,.2); border-radius: 999px; color: #8290a0; background: rgba(255,255,255,.68); font-size: 10px; font-weight: 780; }
.progress-stages i { display: grid; width: 20px; height: 20px; flex: 0 0 20px; place-items: center; border-radius: 50%; color: #fff; background: #a9b5c1; font-style: normal; font-weight: 900; }
.progress-stages b { min-width: 0; overflow: hidden; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.progress-stages > span.active { color: #1e669d; border-color: rgba(45,147,231,.38); background: rgba(232,246,255,.95); box-shadow: 0 5px 12px rgba(45,147,231,.08); }
.progress-stages > span.active i { background: linear-gradient(145deg,#28aee9,#2186d4); box-shadow: 0 4px 10px rgba(33,134,212,.22); }
.progress-stages > span.done { color: #16805e; border-color: rgba(25,185,151,.26); background: rgba(235,252,246,.92); }
.progress-stages > span.done i { background: linear-gradient(145deg,#27c29e,#14936f); }
.extraction-progress.success { border-color: rgba(25,185,151,.35); background: linear-gradient(145deg,rgba(236,253,247,.96),rgba(242,251,255,.92)); }
.extraction-progress.success .progress-track > span { background: linear-gradient(90deg,#20b792,#19a87f); }
.extraction-progress.error { border-color: rgba(201,72,87,.3); background: rgba(255,245,246,.9); }
.extraction-progress.error .progress-track > span { background: linear-gradient(90deg,#e07b88,#c94857); }
.empty-result { display: flex; height: 128px; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 16px; color: #8090a0; text-align: center; }
.empty-result strong { color: #40566c; font-size: 15px; font-weight: 880; }
.empty-result span { font-size: 12px; font-weight: 680; }
.result-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: result; }
.result-list:not(:empty) { margin-top: 10px; }
.result-item { display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 9px; padding: 10px; border: 1px solid rgba(84,113,149,.14); border-radius: 13px; background: rgba(255,255,255,.72); }
.result-index { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 10px; color: #256fbc; background: #e9f2ff; font-size: 11px; font-weight: 900; counter-increment: result; }
.result-index::after { content: counter(result); }
.result-details { min-width: 0; }
.result-link { display: block; overflow: hidden; color: #256fbc; font-size: 11.5px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.result-actions { display: flex; gap: 6px; margin-top: 7px; }
.button { display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(84,113,149,.16); border-radius: 9px; color: #4c6379; background: rgba(255,255,255,.68); text-decoration: none; }
.button-small { min-height: 27px; padding: 0 9px; font-size: 10.5px; font-weight: 800; }
.copy-all-result { position: static; float: none; width: fit-content; height: 30px; margin: 8px 0 0 auto; }

.session-submit-row { display: flex; min-height: 64px; align-items: center; justify-content: space-between; gap: 14px; padding: 0 13px; }
.submit-status { display: flex; min-width: 0; align-items: center; gap: 10px; color: #6d7b8b; }
.submit-status .state-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: #aab5c0; }
.submit-status > span { display: grid; gap: 3px; }
.submit-status strong { color: #465a6f; font-size: 12px; font-weight: 850; }
.submit-status small { overflow: hidden; max-width: 520px; font-size: 10.5px; font-weight: 680; text-overflow: ellipsis; white-space: nowrap; }
.submit-status.running .state-dot { background: #2788d0; box-shadow: 0 0 0 5px rgba(39,136,208,.09); animation: pulse 1.2s ease-in-out infinite; }
.submit-status.success .state-dot { background: #17956f; }.submit-status.error .state-dot { background: #ca4b5a; }.submit-status.stopping .state-dot { background: #c38a28; }
@keyframes pulse { 50% { box-shadow: 0 0 0 8px rgba(39,136,208,0); } }
.submit-actions { display: flex; align-items: center; gap: 8px; }
.primary-action, .stop-action, .clear-action { display: flex; height: 42px; align-items: center; justify-content: center; gap: 8px; padding: 0 12px; border-radius: 11px; font-size: 13px; font-weight: 850; }
.primary-action { min-width: 154px; border: 1px solid rgba(76,151,197,.42); color: #155f93; background: linear-gradient(rgba(255,255,255,.82), rgba(232,246,252,.72)), #e8f6fb; }
.primary-action svg { width: 19px; height: 19px; }
.primary-action:disabled { cursor: wait; opacity: .7; }
.stop-action { border: 1px solid rgba(201,72,87,.22); color: #b33e4c; background: rgba(255,245,246,.8); }
.clear-action { min-width: 72px; border: 1px solid rgba(84,113,149,.16); color: #68798a; background: linear-gradient(#fff,rgba(245,249,252,.8)); }
.stop-action:disabled { display: none; }
#copy-button:disabled { display: none; }

.records-view { min-height: 420px; padding: 18px; background: rgba(255,255,255,.2); }
.records-empty { display: flex; min-height: 384px; flex-direction: column; align-items: center; justify-content: center; gap: 9px; border: 1px solid var(--line); border-radius: 24px; color: #7b8998; background: rgba(255,255,255,.44); }
.records-empty strong { color: #40566c; font-size: 17px; }.records-empty span { font-size: 12px; }

.site-disclaimer { display: flex; justify-content: center; margin: 0 0 12px; padding: 0 132px; }
.site-disclaimer button { border: 0; color: #7a8795; background: transparent; font-size: 11.5px; font-weight: 720; text-decoration: underline; text-decoration-color: rgba(122,135,149,.35); text-underline-offset: 4px; }

.floating-tools { --floating-control-height: 40px; --floating-control-width: 110px; position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 90; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; pointer-events: none; }
.floating-tools > * { pointer-events: auto; }
.floating-online, .success-email-trigger, .language-switch, .telegram-float { box-sizing: border-box; width: var(--floating-control-width); min-width: var(--floating-control-width); height: 39.5px; min-height: 39.5px; border: 1px solid rgba(94,125,153,.17); border-radius: 999px; background: rgba(248,252,255,.94); box-shadow: none; backdrop-filter: blur(16px) saturate(1.08); }
.floating-online { display: flex; align-items: center; justify-content: center; gap: 7px; color: #52677d; font-size: 12px; font-weight: 820; }
.online-dot { width: 8px; height: 8px; border-radius: 50%; background: #1dbb83; box-shadow: 0 0 0 5px rgba(29,187,131,.09); animation: pulse-online 1.8s ease-in-out infinite; }
@keyframes pulse-online { 50% { box-shadow: 0 0 0 8px rgba(29,187,131,0); } }
.success-email-trigger { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 4px 11px 4px 8px; color: #4d6278; font-size: 12px; font-weight: 850; }
.success-email-trigger-icon { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 8px; color: #168aaa; background: rgba(17,145,171,.08); }
.success-email-trigger-icon svg { width: 16px; height: 16px; }
.language-switch { position: relative; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); padding: 4px; overflow: hidden; }
.language-switch::before { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: linear-gradient(135deg,#2881d2,#0aa987); box-shadow: 0 5px 12px rgba(37,111,188,.2), inset 0 1px rgba(255,255,255,.4); content: ""; }
.language-switch button { position: relative; z-index: 1; width: 100%; height: 30px; padding: 0; border: 0; color: #6f7f90; background: transparent; font-size: 11.5px; font-weight: 850; }
.language-switch button.active { color: #fff; }
.telegram-float { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 4px 11px 4px 8px; color: #536781; text-decoration: none; font-size: 12px; font-weight: 850; }
.telegram-icon { width: 17px; height: 17px; color: #229ed9; }.telegram-icon svg { width: 17px; height: 17px; }

.settings-backdrop { position: fixed; inset: 0; z-index: 110; border: 0; background: rgba(16,29,42,.28); backdrop-filter: blur(3px); }
.settings-panel { position: fixed; top: 18px; right: 18px; bottom: 18px; z-index: 120; width: min(460px, calc(100% - 36px)); overflow: hidden; border: 1px solid rgba(84,113,149,.22); border-radius: 25px; background: rgba(244,250,253,.96); box-shadow: 0 30px 90px rgba(27,49,72,.28), inset 0 1px #fff; }
.settings-panel > header { display: flex; height: 70px; align-items: center; justify-content: space-between; padding: 0 18px; border-bottom: 1px solid var(--line); }
.settings-panel > header div { display: grid; gap: 3px; }.settings-panel > header strong { font-size: 15px; }.settings-panel > header span { color: #758394; font-size: 11px; }
.settings-panel > header button { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 11px; color: #637386; background: rgba(255,255,255,.7); font-size: 22px; line-height: 1; }
.settings-scroll { position: absolute; top: 70px; right: 0; bottom: 54px; left: 0; display: grid; align-content: start; gap: 12px; overflow-y: auto; padding: 14px; }
.proxy-card, .log-section { padding: 13px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.65); box-shadow: 0 12px 28px rgba(35,49,73,.06), inset 0 1px rgba(255,255,255,.9); }
.proxy-card-head, .proxy-card-head label, .field-status-row, .log-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.proxy-card-head label { justify-content: flex-start; }.proxy-card-head label > span:last-child { display: grid; gap: 2px; }.proxy-card-head small { color: #788696; font-size: 10px; }
.proxy-country { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 11px; color: #fff; background: linear-gradient(145deg,#4b8ac9,#275f9e); font-size: 10px; font-weight: 900; }.proxy-country.vn { background: linear-gradient(145deg,#29a889,#14785f); }
.proxy-card-head button, .log-heading button, .settings-panel footer button { height: 31px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; color: #536b82; background: rgba(255,255,255,.76); font-size: 11px; font-weight: 800; }
.proxy-card textarea { width: 100%; min-height: 105px; margin-top: 11px; resize: vertical; padding: 11px; border: 1px solid rgba(84,113,149,.2); border-radius: 13px; outline: 0; color: var(--ink); background: rgba(255,255,255,.82); font: 11.5px/1.55 ui-monospace, Consolas, monospace; }
.field-status-row { margin-top: 7px; color: #7a8898; font-size: 10.5px; }
.log-output { display: grid; max-height: 240px; gap: 6px; overflow-y: auto; margin-top: 10px; padding: 10px; border-radius: 13px; color: #607286; background: #f1f6f9; font: 10.5px/1.5 ui-monospace, Consolas, monospace; }
.log-row { display: grid; grid-template-columns: 64px minmax(0,1fr); gap: 7px; }.log-row time { color: #93a0ad; }.log-row.success { color: #16805e; }.log-row.error { color: #c43f4f; }.log-row.warn { color: #9a7023; }
.settings-panel > footer { position: absolute; right: 0; bottom: 0; left: 0; display: flex; height: 54px; align-items: center; justify-content: space-between; padding: 0 14px; border-top: 1px solid var(--line); background: rgba(248,252,254,.94); }
.admin-panel-link { display: inline-flex; height: 31px; align-items: center; padding: 0 11px; border: 1px solid rgba(39,136,208,.2); border-radius: 10px; color: #1d6d9f; background: rgba(232,246,252,.8); font-size: 11px; font-weight: 850; text-decoration: none; }

.account-batch-panel { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.72); }
.account-batch-heading { display: flex; align-items: center; gap: 10px; padding: 10px; border-bottom: 1px solid var(--line); font-size: 11px; }.account-batch-heading > span { margin-left: auto; color: #758394; }.account-batch-heading button { height: 28px; border: 1px solid var(--line); border-radius: 9px; background: #fff; font-size: 10px; }
.account-table-wrap { overflow-x: auto; }.account-table { width: 100%; border-collapse: collapse; font-size: 10px; }.account-table th,.account-table td { padding: 7px 8px; border-bottom: 1px solid rgba(84,113,149,.1); text-align: left; white-space: nowrap; }
.toast-region { position: fixed; top: 18px; left: 50%; z-index: 200; display: grid; width: min(360px, calc(100% - 36px)); gap: 8px; transform: translateX(-50%); }
.toast { padding: 11px 13px; border: 1px solid var(--line); border-radius: 13px; color: var(--ink); background: rgba(255,255,255,.96); box-shadow: var(--soft-card-shadow); font-size: 12px; }.toast.success { color: #16805e; }.toast.error { color: #c43f4f; }

:root[data-theme="dark"] .status-board, :root[data-theme="dark"] .tool-card, :root[data-theme="dark"] .method-row, :root[data-theme="dark"] .cdk-field, :root[data-theme="dark"] .session-panel { background: rgba(24,34,46,.88); }
:root[data-theme="dark"] .hero p, :root[data-theme="dark"] .status-item, :root[data-theme="dark"] .method-option small { color: #9eacbd; }
:root[data-theme="dark"] .method-option, :root[data-theme="dark"] .cdk-input-wrap, :root[data-theme="dark"] .session-textarea-wrap, :root[data-theme="dark"] .result-area, :root[data-theme="dark"] .result-item { background: rgba(31,44,58,.92); }
:root[data-theme="dark"] .method-option strong, :root[data-theme="dark"] .cdk-label, :root[data-theme="dark"] .session-title, :root[data-theme="dark"] .empty-result strong { color: #edf4fb; }

@media (max-width: 980px) { .floating-tools { right: 10px; bottom: 10px; } }
@media (max-width: 760px) {
  .page-shell { padding: 18px 12px 8px; }
  .hero h1 { font-size: clamp(30px, 9vw, 38px); }
  .helper-actions { gap: 6px; }.helper-actions button { height: 36px; padding: 0 9px; font-size: 11px; }
  .status-legend { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }.status-board { height: auto; }.heat-row { grid-template-columns: repeat(24,minmax(0,1fr)); min-height: 96px; gap: 3px; }
  .card-toolbar { height: auto; flex-wrap: wrap; }.tabs { width: 100%; }.purchase-cdk-button { width: 100%; margin-right: 0; }
  .extract-form { padding: 12px; }.cdk-field, .session-panel { height: auto; min-height: 0; }.session-input { height: auto; grid-template-rows: auto 164px auto; }
  .session-email-row { height: auto; align-items: stretch; flex-direction: column; }.coupon-check-btn { align-self: flex-end; }
  .progress-heading { align-items: flex-start; flex-direction: column; gap: 3px; }.progress-stages { grid-template-columns: repeat(2,minmax(0,1fr)); }.progress-stages > span:last-child { grid-column: 1 / -1; }
  .session-submit-row { align-items: stretch; flex-direction: column; padding: 8px 2px; }.submit-status small { max-width: calc(100vw - 64px); }.submit-actions { justify-content: flex-end; }
  .site-disclaimer { padding: 0 100px 0 12px; }
  .floating-tools { --floating-control-width: 96px; transform: scale(.92); transform-origin: right bottom; }
}
@media (max-width: 480px) {
  .brand-line { max-width: 100%; }.hero p { font-size: 12.5px; }.helper-mark { display: none; }
  .helper-actions button { padding: 0 8px; font-size: 10.5px; }.status-item { font-size: 11px; }.heat-row { padding: 5px; gap: 2px; }
  .cdk-verify-row { flex-wrap: wrap; height: auto; }.session-copy { margin-left: 0; }.cdk-field { height: auto; }
  .primary-action { min-width: 0; flex: 1; }.floating-tools { gap: 6px; }
  .profile-extra { display: none !important; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; } }