:root {
  --dl-bg: #f6f8fc;
  --dl-card: #ffffff;
  --dl-card-soft: #f8fafc;
  --dl-text: #0f172a;
  --dl-muted: #64748b;
  --dl-line: #dbe4f0;
  --dl-blue: #2563eb;
  --dl-blue-dark: #1d4ed8;
  --dl-blue-soft: #eff6ff;
  --dl-green: #059669;
  --dl-green-soft: #ecfdf5;
  --dl-amber: #b45309;
  --dl-amber-soft: #fffbeb;
  --dl-red: #dc2626;
  --dl-red-soft: #fef2f2;
  --dl-shadow: 0 18px 45px rgba(15, 23, 42, .08), 0 3px 10px rgba(37, 99, 235, .05);
}

[data-theme="dark"] {
  --dl-bg: #07101f;
  --dl-card: #0f172a;
  --dl-card-soft: #111c31;
  --dl-text: #f8fafc;
  --dl-muted: #a8b4c8;
  --dl-line: #26364f;
  --dl-blue: #60a5fa;
  --dl-blue-dark: #93c5fd;
  --dl-blue-soft: #102445;
  --dl-green: #34d399;
  --dl-green-soft: #0c2d27;
  --dl-amber: #fbbf24;
  --dl-amber-soft: #34240b;
  --dl-red: #f87171;
  --dl-red-soft: #381719;
  --dl-shadow: 0 18px 45px rgba(0, 0, 0, .28);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--dl-bg);
  color: var(--dl-text);
  font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
svg { display: block; }

.mk-nav {
  width: min(1060px, calc(100% - 2rem));
  margin: .8rem auto 0;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .55rem .75rem;
}
.mk-nav-brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--dl-text);
  font-weight: 800;
  text-decoration: none;
  letter-spacing: -.02em;
}
.mk-nav-logo {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(145deg, #2563eb, #1d4ed8);
  border-radius: 10px;
  box-shadow: 0 8px 18px rgba(37, 99, 235, .25);
}
.mk-nav-links { display: flex; align-items: center; gap: 1.05rem; }
.mk-nav-links a { color: var(--dl-muted); text-decoration: none; font-size: .9rem; font-weight: 600; }
.mk-nav-links a:hover { color: var(--dl-blue); }

.container, .main-wrap {
  width: min(1060px, calc(100% - 2rem));
  margin-inline: auto;
}
.container { padding-top: .1rem; }
.main-wrap { padding: .06rem 0 3rem; }

.header {
  position: relative;
  overflow: hidden;
  margin: .38rem 0 .7rem;
  padding: 1rem 2rem 1.1rem;
  border: 1px solid rgba(191, 219, 254, .95);
  border-radius: 1.25rem;
  background:
    radial-gradient(circle at 10% 0%, rgba(59, 130, 246, .12), transparent 34%),
    radial-gradient(circle at 90% 10%, rgba(14, 165, 233, .1), transparent 30%),
    var(--dl-card-soft);
  box-shadow: var(--dl-shadow);
  text-align: center;
}
.header::after {
  content: "";
  position: absolute;
  left: 8%; right: 8%; bottom: -35px;
  height: 75px;
  background: rgba(37, 99, 235, .07);
  filter: blur(28px);
  pointer-events: none;
}
.hero-kicker, .section-kicker, .official-kicker {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: var(--dl-blue-dark);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.header h1 {
  margin: .32rem 0 .6rem;
  font-family: "Mukta", sans-serif;
  font-size: clamp(2.1rem, 4vw, 2.8rem);
  line-height: 1.02;
  letter-spacing: -.045em;
}
.header p {
  max-width: 880px;
  margin: 0 auto;
  color: #334155;
  font-size: 1rem;
  line-height: 1.75;
}
[data-theme="dark"] .header p { color: #dbeafe; }
.header-points {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  margin-top: .8rem;
}
.header-points span {
  padding: .38rem .68rem;
  border: 1px solid rgba(147, 197, 253, .75);
  border-radius: 999px;
  color: #1e3a8a;
  background: rgba(255, 255, 255, .68);
  font-size: .76rem;
  font-weight: 700;
}
[data-theme="dark"] .header-points span { color: #dbeafe; background: rgba(15, 23, 42, .68); border-color: rgba(96, 165, 250, .38); }

.card, .content-card {
  margin-top: .75rem;
  overflow: hidden;
  border: 1px solid var(--dl-line);
  border-radius: 1.15rem;
  background: var(--dl-card);
  box-shadow: 0 12px 32px rgba(15, 23, 42, .06);
}
.card-head {
  display: flex;
  align-items: center;
  gap: .8rem;
  min-height: 74px;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--dl-line);
  background: linear-gradient(180deg, var(--dl-card), var(--dl-card-soft));
}
.card-head-icon {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--dl-blue-soft);
  color: var(--dl-blue);
}
.card-head-icon svg { width: 23px; height: 23px; fill: currentColor; }
.card-head-copy { min-width: 0; }
.card-head h2 {
  margin: 0;
  font-family: "Mukta", sans-serif;
  font-size: 1.38rem;
  line-height: 1.1;
  letter-spacing: -.02em;
}
.card-head-sub { margin-top: .12rem; color: var(--dl-muted); font-size: .82rem; }
.card-body { padding: 1.25rem; }
.data-state {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  padding: .42rem .65rem;
  border-radius: 999px;
  color: var(--dl-muted);
  background: var(--dl-card-soft);
  border: 1px solid var(--dl-line);
  font-size: .75rem;
  font-weight: 700;
  white-space: nowrap;
}
.state-dot { width: 8px; height: 8px; border-radius: 50%; background: #94a3b8; box-shadow: 0 0 0 4px rgba(148, 163, 184, .14); }
.data-state.ready { color: var(--dl-green); background: var(--dl-green-soft); border-color: rgba(5, 150, 105, .22); }
.data-state.ready .state-dot { background: var(--dl-green); box-shadow: 0 0 0 4px rgba(5, 150, 105, .14); }
.data-state.error { color: var(--dl-red); background: var(--dl-red-soft); border-color: rgba(220, 38, 38, .22); }
.data-state.error .state-dot { background: var(--dl-red); box-shadow: 0 0 0 4px rgba(220, 38, 38, .14); }

.tool-layout { display: grid; grid-template-columns: minmax(0, 1.13fr) minmax(310px, .87fr); gap: 1.15rem; align-items: stretch; }
.tool-inputs { padding: .15rem .15rem .15rem 0; }
.tool-note {
  margin-bottom: 1rem;
  padding: .8rem .9rem;
  border-left: 4px solid var(--dl-blue);
  border-radius: .25rem .8rem .8rem .25rem;
  color: #334155;
  background: var(--dl-blue-soft);
  font-size: .84rem;
  line-height: 1.58;
}
[data-theme="dark"] .tool-note { color: #dbeafe; }
.field-group { margin-bottom: .95rem; }
.field-group label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .38rem;
  font-size: .86rem;
  font-weight: 800;
}
.field-group label span { color: var(--dl-muted); font-size: .72rem; font-weight: 600; }
.input-shell { position: relative; }
.input-shell svg {
  position: absolute;
  left: .85rem;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  fill: #94a3b8;
  pointer-events: none;
}
.input-shell input {
  width: 100%;
  height: 51px;
  padding: 0 .9rem 0 2.85rem;
  border: 1px solid #cbd5e1;
  border-radius: .8rem;
  outline: none;
  color: var(--dl-text);
  background: var(--dl-card);
  font-size: .98rem;
  font-weight: 600;
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.input-shell input::placeholder { color: #94a3b8; font-weight: 500; }
.input-shell input:focus { border-color: var(--dl-blue); box-shadow: 0 0 0 4px rgba(37, 99, 235, .12); }
.input-shell input.invalid { border-color: var(--dl-red); box-shadow: 0 0 0 4px rgba(220, 38, 38, .09); }
[data-theme="dark"] .input-shell input { border-color: #334155; }
.field-help { margin-top: .32rem; color: var(--dl-muted); font-size: .72rem; line-height: 1.45; }
.field-error { min-height: 1px; margin-top: .22rem; color: var(--dl-red); font-size: .73rem; font-weight: 700; }
.or-divider { display: flex; align-items: center; gap: .7rem; margin: .35rem 0 .9rem; color: #94a3b8; font-size: .66rem; font-weight: 800; letter-spacing: .08em; }
.or-divider::before, .or-divider::after { content: ""; height: 1px; flex: 1; background: var(--dl-line); }
.form-actions { display: flex; gap: .65rem; margin-top: .25rem; }
.check-btn, .clear-btn, .copy-result-btn, .official-btn {
  border: 0;
  border-radius: .8rem;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  transition: transform .15s, box-shadow .15s, background .15s;
}
.check-btn {
  min-height: 50px;
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: 0 1rem;
  color: #fff;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  box-shadow: 0 10px 22px rgba(37, 99, 235, .23);
}
.check-btn svg { width: 19px; height: 19px; fill: currentColor; }
.check-btn:hover, .official-btn:hover { transform: translateY(-1px); box-shadow: 0 13px 25px rgba(37, 99, 235, .28); }
.check-btn:disabled { opacity: .6; cursor: wait; transform: none; }
.clear-btn { min-height: 50px; padding: 0 1.05rem; color: var(--dl-text); border: 1px solid var(--dl-line); background: var(--dl-card-soft); }
.clear-btn:hover { background: var(--dl-blue-soft); color: var(--dl-blue-dark); }
.privacy-line { display: flex; align-items: flex-start; gap: .45rem; margin-top: .85rem; color: var(--dl-muted); font-size: .72rem; line-height: 1.45; }
.privacy-line svg { flex: 0 0 16px; width: 16px; height: 16px; fill: var(--dl-green); margin-top: .08rem; }

.result-panel {
  min-height: 420px;
  overflow: hidden;
  border: 1px solid rgba(147, 197, 253, .65);
  border-radius: 1rem;
  background: linear-gradient(160deg, var(--dl-blue-soft), var(--dl-card) 46%);
}
.result-empty { height: 100%; min-height: 420px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1.25rem; text-align: center; }
.empty-icon { width: 70px; height: 70px; display: grid; place-items: center; border-radius: 22px; color: var(--dl-blue); background: rgba(255, 255, 255, .8); border: 1px solid rgba(147, 197, 253, .65); box-shadow: 0 12px 26px rgba(37, 99, 235, .12); }
[data-theme="dark"] .empty-icon { background: #0f172a; }
.empty-icon svg { width: 34px; height: 34px; fill: currentColor; }
.result-empty h3 { margin: .9rem 0 .32rem; font-family: "Mukta", sans-serif; font-size: 1.45rem; }
.result-empty p { max-width: 300px; margin: 0; color: var(--dl-muted); font-size: .84rem; line-height: 1.58; }
.result-coverage { margin-top: .85rem; padding: .35rem .62rem; border-radius: 999px; color: var(--dl-blue-dark); background: var(--dl-blue-soft); font-size: .72rem; font-weight: 800; }
.result-content { padding: 1rem; }
.status-banner { display: flex; align-items: flex-start; gap: .65rem; padding: .82rem; border-radius: .85rem; }
.status-banner.success { background: var(--dl-green-soft); color: var(--dl-green); border: 1px solid rgba(5, 150, 105, .25); }
.status-banner.warning { background: var(--dl-amber-soft); color: var(--dl-amber); border: 1px solid rgba(180, 83, 9, .23); }
.status-banner.error { background: var(--dl-red-soft); color: var(--dl-red); border: 1px solid rgba(220, 38, 38, .22); }
.status-banner svg { flex: 0 0 24px; width: 24px; height: 24px; fill: currentColor; }
.status-banner strong { display: block; font-size: .9rem; }
.status-banner span { display: block; margin-top: .15rem; color: var(--dl-muted); font-size: .75rem; line-height: 1.45; }
.result-meta { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: .75rem 0 .45rem; color: var(--dl-muted); font-size: .72rem; font-weight: 700; }
.match-list { display: grid; gap: .65rem; }
.match-card { padding: .85rem; border: 1px solid var(--dl-line); border-radius: .85rem; background: var(--dl-card); }
.match-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .7rem; }
.match-name { margin: 0; font-family: "Mukta", sans-serif; font-size: 1.16rem; line-height: 1.1; }
.ready-badge { flex: 0 0 auto; padding: .26rem .48rem; border-radius: 999px; color: #047857; background: #d1fae5; font-size: .63rem; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; }
[data-theme="dark"] .ready-badge { color: #a7f3d0; background: #064e3b; }
.license-number-display { margin-top: .42rem; color: var(--dl-blue-dark); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .95rem; font-weight: 800; letter-spacing: .025em; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .72rem; }
.detail-item { padding: .58rem .62rem; border-radius: .65rem; background: var(--dl-card-soft); }
.detail-label { display: block; color: var(--dl-muted); font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.detail-value { display: block; margin-top: .12rem; font-size: .78rem; font-weight: 800; }
.source-note { margin-top: .6rem; padding: .55rem .62rem; border-radius: .6rem; color: var(--dl-amber); background: var(--dl-amber-soft); font-size: .69rem; line-height: 1.45; }
.match-actions { display: flex; gap: .5rem; margin-top: .72rem; }
.copy-result-btn { flex: 1; min-height: 39px; color: var(--dl-blue-dark); background: var(--dl-blue-soft); border: 1px solid rgba(37, 99, 235, .22); font-size: .73rem; }
.copy-result-btn:hover { background: rgba(37, 99, 235, .14); }
.verify-mini { min-height: 39px; display: inline-flex; align-items: center; justify-content: center; padding: 0 .7rem; border-radius: .7rem; color: var(--dl-text); border: 1px solid var(--dl-line); background: var(--dl-card-soft); text-decoration: none; font-size: .71rem; font-weight: 800; }
.verify-mini:hover { color: var(--dl-blue); }
.no-match-help { margin-top: .75rem; padding: .75rem; border-radius: .75rem; color: var(--dl-muted); background: var(--dl-card-soft); font-size: .75rem; line-height: 1.55; }
.no-match-help ul { margin: .4rem 0 0; padding-left: 1.1rem; }

.summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; margin-top: .75rem; }
.summary-card { padding: .95rem; border: 1px solid var(--dl-line); border-radius: .95rem; background: var(--dl-card); box-shadow: 0 8px 24px rgba(15, 23, 42, .045); }
.summary-label { display: block; color: var(--dl-muted); font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .065em; }
.summary-value { display: block; margin-top: .22rem; font-family: "Mukta", sans-serif; color: var(--dl-blue-dark); font-size: 1.72rem; line-height: 1.05; }
.summary-value.small { font-size: 1.38rem; }
.summary-note { display: block; margin-top: .25rem; color: var(--dl-muted); font-size: .69rem; line-height: 1.35; }
.compact-head { min-height: 68px; }
.batch-body { display: flex; align-items: center; gap: 1rem; }
.batch-list { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.batch-chip { padding: .75rem; border: 1px solid var(--dl-line); border-radius: .8rem; background: var(--dl-card-soft); }
.batch-chip strong, .batch-chip span { display: block; }
.batch-chip strong { font-size: .84rem; }
.batch-chip span { margin-top: .15rem; color: var(--dl-muted); font-size: .7rem; }
.important-box { flex: 1.2; padding: .8rem .9rem; border: 1px solid rgba(245, 158, 11, .28); border-radius: .8rem; color: #854d0e; background: var(--dl-amber-soft); font-size: .76rem; line-height: 1.55; }
[data-theme="dark"] .important-box { color: #fde68a; }

.steps-section { margin-top: 1.2rem; }
.section-title-wrap { text-align: center; margin-bottom: .7rem; }
.section-title-wrap h2 { margin: .12rem 0 0; font-family: "Mukta", sans-serif; font-size: 1.7rem; letter-spacing: -.025em; }
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.step-card { position: relative; padding: 1rem 1rem 1rem 3.3rem; border: 1px solid var(--dl-line); border-radius: .95rem; background: var(--dl-card); }
.step-num { position: absolute; left: 1rem; top: 1rem; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: var(--dl-blue); font-weight: 900; }
.step-card h3 { margin: 0; font-family: "Mukta", sans-serif; font-size: 1.08rem; }
.step-card p { margin: .2rem 0 0; color: var(--dl-muted); font-size: .76rem; line-height: 1.5; }

.official-card { margin-top: .8rem; display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; padding: 1.2rem; border: 1px solid rgba(147, 197, 253, .7); border-radius: 1rem; background: linear-gradient(125deg, var(--dl-blue-soft), var(--dl-card)); }
.official-card h2 { margin: .15rem 0 .2rem; font-family: "Mukta", sans-serif; font-size: 1.45rem; }
.official-card p { margin: 0; max-width: 650px; color: var(--dl-muted); font-size: .8rem; line-height: 1.55; }
.official-actions { display: flex; flex-direction: column; align-items: center; gap: .45rem; flex: 0 0 auto; }
.official-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .76rem .9rem; color: #fff; background: linear-gradient(135deg, #2563eb, #1d4ed8); font-size: .76rem; white-space: nowrap; }
.official-link { color: var(--dl-blue-dark); font-size: .71rem; font-weight: 800; text-decoration: none; }
.official-link:hover { text-decoration: underline; }

.seo-section { margin-top: .9rem; padding: clamp(1.1rem, 3vw, 2rem); }
.seo-section h2, .seo-section h3 { font-family: "Mukta", sans-serif; letter-spacing: -.02em; color: var(--dl-text); }
.seo-section h2 { margin: 1.6rem 0 .55rem; font-size: 1.65rem; }
.seo-section h2:first-child { margin-top: 0; }
.seo-section h3 { margin: 1.3rem 0 .38rem; font-size: 1.24rem; }
.seo-section p, .seo-section li { color: #475569; font-size: .91rem; line-height: 1.78; }
[data-theme="dark"] .seo-section p, [data-theme="dark"] .seo-section li { color: #cbd5e1; }
.seo-section p { margin: 0 0 .75rem; }
.seo-section ul { margin: .4rem 0 .9rem; padding-left: 1.25rem; }
.faq-item { border-top: 1px solid var(--dl-line); }
.faq-item:last-child { border-bottom: 1px solid var(--dl-line); }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .95rem 0; border: 0; color: var(--dl-text); background: transparent; text-align: left; font-weight: 800; cursor: pointer; }
.faq-chevron { flex: 0 0 auto; font-size: 1.25rem; color: var(--dl-blue); transition: transform .2s; }
.faq-q.open .faq-chevron { transform: rotate(180deg); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .22s ease; }
.faq-a > div { overflow: hidden; color: var(--dl-muted); font-size: .84rem; line-height: 1.65; }
.faq-a.open { grid-template-rows: 1fr; }
.faq-a.open > div { padding: 0 0 .95rem; }

.footer { width: min(1060px, calc(100% - 2rem)); margin: 0 auto; padding: 1.3rem 0 2rem; text-align: center; color: var(--dl-muted); }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem .85rem; }
.footer-links a { color: var(--dl-muted); text-decoration: none; font-size: .76rem; font-weight: 600; }
.footer-links a:hover { color: var(--dl-blue); }
.footer p { margin: .9rem 0 0; font-size: .73rem; }

@media (max-width: 860px) {
  .tool-layout { grid-template-columns: 1fr; }
  .result-panel, .result-empty { min-height: 330px; }
  .summary-grid { grid-template-columns: repeat(2, 1fr); }
  .batch-body, .official-card { align-items: stretch; flex-direction: column; }
  .official-actions { align-items: flex-start; }
}

@media (max-width: 680px) {
  .mk-nav { width: min(100% - 1rem, 1060px); padding-inline: .25rem; }
  .mk-nav-links { gap: .7rem; }
  .mk-nav-links a:nth-child(2) { display: none; }
  .container, .main-wrap, .footer { width: min(100% - 1rem, 1060px); }
  .header { margin-top: .25rem; padding: .95rem .9rem 1rem; border-radius: 1rem; }
  .hero-kicker { font-size: .65rem; }
  .header h1 { font-size: clamp(1.85rem, 9vw, 2.35rem); }
  .header p { font-size: .9rem; line-height: 1.65; }
  .header-points { gap: .35rem; }
  .header-points span { font-size: .68rem; padding: .32rem .5rem; }
  .card { border-radius: 1rem; }
  .card-head { align-items: flex-start; padding: .85rem; }
  .card-head-icon { width: 38px; height: 38px; flex-basis: 38px; border-radius: 11px; }
  .card-head h2 { font-size: 1.2rem; }
  .data-state { margin-left: 0; font-size: 0; padding: .5rem; }
  .data-state .state-dot { margin: 0; }
  .card-body { padding: .85rem; }
  .tool-note { font-size: .78rem; }
  .input-shell input { height: 50px; font-size: .92rem; }
  .result-panel, .result-empty { min-height: 310px; }
  .result-content { padding: .75rem; }
  .detail-grid { grid-template-columns: 1fr 1fr; }
  .summary-grid { gap: .5rem; }
  .summary-card { padding: .78rem; }
  .summary-value { font-size: 1.45rem; }
  .batch-list { grid-template-columns: 1fr; }
  .steps-grid { grid-template-columns: 1fr; }
  .official-btn { width: 100%; justify-content: center; }
  .official-actions { width: 100%; align-items: stretch; }
  .seo-section { padding: 1rem; }
  .seo-section p, .seo-section li { font-size: .86rem; }
}

@media (max-width: 410px) {
  .mk-nav-links a:last-child { display: none; }
  .form-actions, .match-actions { flex-direction: column; }
  .clear-btn, .verify-mini { width: 100%; }
  .detail-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}