body.service-page {
    --cici-bg: #fbf8ff;
    --cici-ink: #30243b;
    --cici-muted: #75687e;
    --cici-purple: #9b6bd1;
    --cici-purple-deep: #7147ac;
    --cici-pink: #df76b6;
    --cici-blue-violet: #a9b9f8;
    --cici-glass: rgba(255, 255, 255, .58);
    --cici-glass-strong: rgba(255, 255, 255, .74);
    --cici-line: rgba(255, 255, 255, .84);
    --cici-soft-line: rgba(105, 74, 128, .12);
    --cici-shadow: 0 18px 50px rgba(77, 49, 96, .11);
    --cici-shadow-soft: 0 10px 28px rgba(77, 49, 96, .07);
    --cici-radius-lg: 26px;
    --cici-radius-md: 18px;
    --cici-radius-sm: 14px;
    background:
        radial-gradient(ellipse at 84% -5%, rgba(224, 177, 246, .52), transparent 35%),
        radial-gradient(ellipse at -7% 58%, rgba(203, 220, 255, .44), transparent 36%),
        radial-gradient(ellipse at 78% 108%, rgba(248, 202, 229, .46), transparent 40%),
        linear-gradient(135deg, #fcf9ff 0%, #f8f4ff 52%, #fff8fc 100%);
    background-attachment: fixed;
    color: var(--cici-ink);
}

body.service-page::before {
    background: radial-gradient(circle at 18% 18%, rgba(255, 255, 255, .66), transparent 28%);
}

body.service-page .site-header {
    width: min(1180px, calc(100% - 36px));
    margin-top: 10px;
    padding: 11px 14px;
    border: 1px solid var(--cici-line);
    border-radius: 20px;
    background: rgba(255, 255, 255, .45);
    box-shadow: 0 8px 26px rgba(77, 49, 96, .06);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
}

body.service-page .brand-mark {
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, var(--cici-purple-deep), var(--cici-pink));
    box-shadow: 0 8px 18px rgba(113, 71, 172, .22);
}

body.service-page .brand strong { color: var(--cici-ink); }
body.service-page .brand small { color: var(--cici-muted); }

body.service-page .site-nav {
    border-color: rgba(255, 255, 255, .8);
    background: rgba(255, 255, 255, .52);
    box-shadow: 0 7px 20px rgba(77, 49, 96, .07);
}

body.service-page .site-nav a { color: #5d4a68; font-weight: 680; transition: background .2s ease, color .2s ease, transform .2s ease; }
body.service-page .site-nav a.active,
body.service-page .site-nav a:hover { background: linear-gradient(135deg, #7147ac, #c35bab); color: #fff; }
body.service-page .site-nav .lang-switch { border-color: rgba(113, 71, 172, .28); background: rgba(113, 71, 172, .09); color: var(--cici-purple-deep); }
body.service-page .site-nav .lang-switch:hover { background: linear-gradient(135deg, #7147ac, #c35bab); color: #fff; }

body.service-page .page-shell { padding-top: 42px; }
body.service-page .eyebrow { display: inline-flex; width: fit-content; padding: 5px 9px; border-radius: 999px; background: rgba(113, 71, 172, .1); color: var(--cici-purple-deep); font-weight: 800; letter-spacing: .045em; }
body.service-page h1,
body.service-page h2,
body.service-page h3 { color: var(--cici-ink); }
body.service-page .lead,
body.service-page .step-list p,
body.service-page .notice,
body.service-page .muted,
body.service-page .refresh-meta { color: var(--cici-muted); }

body.service-page .home-hero { min-height: calc(100vh - 168px); }
body.service-page .home-hero > div:first-child { position: relative; z-index: 0; }
body.service-page .home-hero > div:first-child::before { content: ""; position: absolute; z-index: -1; top: -48px; left: -60px; width: 270px; height: 230px; border-radius: 50%; background: rgba(225, 168, 239, .28); filter: blur(38px); }
body.service-page .home-hero h1 { letter-spacing: -.04em; }

body.service-page .entry-card,
body.service-page .service-card,
body.service-page .guide-panel,
body.service-page .result-card,
body.service-page .modal-panel {
    border-color: var(--cici-line);
    border-radius: var(--cici-radius-lg);
    background: var(--cici-glass);
    box-shadow: var(--cici-shadow);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
}

body.service-page .entry-card { border-radius: 22px; }
body.service-page .entry-card:hover { border-color: rgba(192, 104, 196, .42); box-shadow: 0 22px 48px rgba(109, 61, 134, .15); }
body.service-page .entry-card span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, rgba(155, 107, 209, .22), rgba(223, 118, 182, .27)); color: var(--cici-purple-deep); }
body.service-page .entry-card strong { color: var(--cici-ink); }
body.service-page .entry-card small { color: var(--cici-muted); }

body.service-page .guide-panel { border-color: rgba(221, 154, 213, .34); background: rgba(255, 249, 255, .6); }
body.service-page .service-card { border-color: rgba(255, 255, 255, .92); background: var(--cici-glass-strong); }
body.service-page .service-card::before,
body.service-page .guide-panel::before { height: 3px; background: linear-gradient(90deg, transparent, rgba(155, 107, 209, .7), rgba(223, 118, 182, .7), transparent); }
body.service-page .step-list article,
body.service-page .detail-grid div { border-color: rgba(255, 255, 255, .78); border-radius: var(--cici-radius-md); background: rgba(255, 255, 255, .55); }
body.service-page .step-list article > span { background: linear-gradient(135deg, var(--cici-purple), var(--cici-pink)); box-shadow: 0 6px 14px rgba(113, 71, 172, .18); }
body.service-page .notice { border-left-color: var(--cici-purple); border-radius: 0 var(--cici-radius-sm) var(--cici-radius-sm) 0; background: rgba(113, 71, 172, .07); }
body.service-page .text-link { color: var(--cici-purple-deep); }

body.service-page .service-tag { border-color: rgba(223, 118, 182, .3); background: rgba(223, 118, 182, .13); color: #974879; }
body.service-page .state-chip,
body.service-page .status-topline strong { border: 1px solid rgba(113, 71, 172, .16); background: rgba(255, 255, 255, .62); color: #5f4676; }

body.service-page input,
body.service-page textarea,
body.service-page select { border-color: rgba(105, 74, 128, .16); border-radius: 15px; background: rgba(255, 255, 255, .72); color: var(--cici-ink); }
body.service-page input:focus,
body.service-page textarea:focus,
body.service-page select:focus { border-color: rgba(113, 71, 172, .5); background: rgba(255, 255, 255, .9); box-shadow: 0 0 0 4px rgba(113, 71, 172, .11); }
body.service-page label span { color: #5e4e68; }

body.service-page .primary-button,
body.service-page .secondary-button { background: linear-gradient(135deg, #7147ac, #c35bab); box-shadow: 0 10px 22px rgba(102, 58, 155, .2); transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; }
body.service-page .primary-button.dark { background: linear-gradient(135deg, #633b99, #9b6bd1); }
body.service-page .primary-button:hover,
body.service-page .secondary-button:hover,
body.service-page .ghost-button:hover { transform: translateY(-1px); filter: brightness(1.02); }
body.service-page .primary-button:active,
body.service-page .secondary-button:active,
body.service-page .ghost-button:active { transform: scale(.98); }
body.service-page .ghost-button { border-color: rgba(113, 71, 172, .2); border-radius: 14px; background: rgba(255, 255, 255, .64); color: var(--cici-purple-deep); }
body.service-page .guide-modal-trigger { border: 0; background: linear-gradient(135deg, #7147ac, #c35bab); }

body.service-page .single-panel { width: min(900px, 100%); margin-top: 10px; }
body.service-page .result-card { border-radius: var(--cici-radius-md); background: rgba(255, 255, 255, .5); box-shadow: var(--cici-shadow-soft); }
body.service-page .status-panel.info .status-topline strong,
body.service-page .status-panel.queued .status-topline strong,
body.service-page .status-panel.processing .status-topline strong { color: #6559bd; }
body.service-page .status-dot.info,
body.service-page .status-dot.queued,
body.service-page .status-dot.pending,
body.service-page .status-dot.processing { background: #7668ce; }

body.service-page .refresh-card { border-color: rgba(133, 117, 208, .2); border-radius: var(--cici-radius-md); background: rgba(235, 233, 255, .54); }
body.service-page .switch-row { border-color: rgba(113, 71, 172, .18); background: rgba(255, 255, 255, .58); }
body.service-page .switch-row input { accent-color: var(--cici-purple); }
body.service-page .refresh-status strong { background: linear-gradient(135deg, #7147ac, #c35bab); box-shadow: 0 8px 18px rgba(102, 58, 155, .18); }
body.service-page .refresh-track { background: rgba(113, 71, 172, .12); }
body.service-page .refresh-track span { background: linear-gradient(90deg, #7147ac, #df76b6); box-shadow: 0 0 18px rgba(113, 71, 172, .22); }

body.service-page .modal-backdrop { background: rgba(45, 31, 53, .54); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
body.service-page .modal-panel { background: rgba(255, 255, 255, .82); box-shadow: 0 24px 90px rgba(45, 31, 53, .28); }
body.service-page .tutorial-images img { border-color: rgba(255, 255, 255, .86); border-radius: var(--cici-radius-md); box-shadow: var(--cici-shadow-soft); }

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    body.service-page .entry-card,
    body.service-page .service-card,
    body.service-page .guide-panel,
    body.service-page .result-card,
    body.service-page .modal-panel { background: rgba(255, 255, 255, .94); }
}

@media (max-width: 900px) {
    body.service-page { background-attachment: scroll; }
    body.service-page .home-hero { min-height: auto; }
}

@media (max-width: 520px) {
    body.service-page .site-header { width: calc(100% - 20px); align-items: flex-start; border-radius: 18px; }
    body.service-page .site-nav { max-width: 100%; overflow-x: auto; }
    body.service-page .page-shell { width: calc(100% - 28px); padding-top: 28px; }
    body.service-page .entry-card,
    body.service-page .service-card,
    body.service-page .guide-panel,
    body.service-page .modal-panel { border-radius: 20px; }
    body.service-page .entry-card,
    body.service-page .service-card,
    body.service-page .guide-panel { padding: 18px; }
    body.service-page h1 { font-size: clamp(32px, 10vw, 36px); }
    body.service-page .lookup-form { grid-template-columns: 1fr; }
    body.service-page .lookup-form .primary-button { width: 100%; min-height: 46px; }
    body.service-page .refresh-card { grid-template-columns: 1fr; }
    body.service-page .refresh-status > div:first-child { align-items: flex-start; }
    body.service-page .modal-backdrop { padding: 14px; }
    body.service-page .modal-panel { max-height: calc(100vh - 28px); padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    body.service-page *,
    body.service-page *::before,
    body.service-page *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}