:root {
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --primary: #6366f1;
    --primary-strong: #4f46e5;
    --primary-soft: #eef2ff;
    --surface: #fff;
    --surface-soft: #f8fafc;
    --border: #e5e7eb;
    --border-soft: #eef2ff;
    --scrollbar-thumb: #d1d5db;
    --scrollbar-track: #f3f4f6;
}

#main-content { scroll-behavior: smooth; }

.percentage-counter {
    width: 0;
    height: 3px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    background: linear-gradient(90deg,#6366f1,#8b5cf6 50%,#ec4899);
    transition: width .3s cubic-bezier(.4,0,.2,1);
}

.terms-back-top {
    position: fixed;
    right: 20px;
    bottom: 24px;
    z-index: 9991;
    width: 48px;
    height: 48px;
    padding: 0;
    margin: 0;
    border: 1px solid #e5e7eb;
    border-radius: 9999px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #4f46e5;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease,visibility .25s ease,transform .25s ease,box-shadow .25s ease,background-color .3s ease,border-color .3s ease,color .3s ease;
}

.terms-back-top:hover {
    box-shadow: 0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);
    transform: translateY(-4px);
}

.terms-back-top.terms-back-top-show {
    opacity: 1;
    visibility: visible;
}

.terms-back-top i {
    font-size: 21px;
    line-height: 1;
    display: block;
}

html.dark .terms-back-top {
    background: #101a2e;
    border-color: #24314e;
    color: #a5b4fc;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,.45),0 4px 6px -4px rgba(0,0,0,.45);
}

html.dark .terms-back-top:hover {
    box-shadow: 0 20px 25px -5px rgba(0,0,0,.5),0 8px 10px -6px rgba(0,0,0,.5);
}

.terms-hero {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: clamp(1.75rem,4vw,3rem) clamp(1.25rem,3vw,2.5rem);
    margin-bottom: 1.25rem;
    border-radius: 1rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,.05),0 2px 4px -2px rgba(0,0,0,.05);
    text-align: center;
}

.terms-hero:before {
    content: "";
    position: absolute;
    top: -120px;
    left: -120px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle,rgba(99,102,241,.08),transparent 68%);
    pointer-events: none;
}

.terms-hero:after {
    content: "";
    position: absolute;
    bottom: -140px;
    right: -120px;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: radial-gradient(circle,rgba(168,85,247,.07),transparent 68%);
    pointer-events: none;
}

.terms-hero-badge {
    z-index: 1;
    align-items: center;
    gap: .5rem;
    padding: .3125rem .8125rem;
    margin-bottom: 1rem;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    color: #4f46e5;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.terms-hero-badge, .terms-hero-dot {
    position: relative;
    display: inline-flex;
    border-radius: 999px;
}

.terms-hero-dot {
    width: .5rem;
    height: .5rem;
    background: #6366f1;
}

.terms-hero-dot:after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: rgba(99,102,241,.45);
    animation: terms-ping 1.4s cubic-bezier(0,0,.2,1) infinite;
}

@keyframes terms-ping {
    75%, to {
        transform: scale(2.4);
        opacity: 0;
    }
}

.terms-hero-title {
    position: relative;
    z-index: 1;
    margin: 0 auto .875rem;
    max-width: 48rem;
    font-size: clamp(1.75rem,4.5vw,2.75rem);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.02em;
    color: #111827;
}

.terms-hero-title span {
    color: transparent;
    background: linear-gradient(135deg,#4f46e5,#7c3aed);
    -webkit-background-clip: text;
    background-clip: text;
}

.terms-hero-subtitle {
    position: relative;
    z-index: 1;
    margin: 0 auto 1.25rem;
    max-width: 46rem;
    font-size: clamp(.875rem,1.8vw,1rem);
    line-height: 1.85;
    color: #4b5563;
}

.terms-meta {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin-bottom: 0;
}

.terms-meta-item {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .3125rem .75rem;
    border-radius: .5rem;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    color: #6b7280;
    font-size: .7813rem;
    font-weight: 600;
}

.terms-meta-item i {
    color: #6366f1;
    font-size: .9375rem;
}

.terms-toc {
    width: 100%;
    padding: clamp(1.25rem,3vw,1.75rem);
    margin-bottom: 1.25rem;
    border-radius: 1rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,.05),0 2px 4px -2px rgba(0,0,0,.05);
}

.terms-toc-head {
    display: flex;
    align-items: center;
    gap: .625rem;
    margin-bottom: 1rem;
    font-size: 1rem;
    font-weight: 700;
    color: #1f2937;
}

.terms-toc-head i {
    color: #6366f1;
    font-size: 1.25rem;
}

.terms-toc-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: .5rem;
}

.terms-toc-link {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .625rem .75rem;
    border-radius: .625rem;
    color: #4b5563;
    font-size: .875rem;
    font-weight: 500;
    text-decoration: none;
    background: #f9fafb;
    border: 1px solid transparent;
    transition: all .2s ease;
}

.terms-toc-link:hover {
    color: #4f46e5;
    background: #eef2ff;
    border-color: #c7d2fe;
}

.terms-toc-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    border-radius: .5rem;
    background: #eef2ff;
    color: #6366f1;
    font-size: .7188rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    transition: background-color .2s ease,color .2s ease;
}

.terms-toc-link:hover .terms-toc-num {
    background: #4f46e5;
    color: #fff;
}

.agreement-card {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: clamp(1.5rem,4vw,2.5rem);
    margin-bottom: 2rem;
    border-radius: 1rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,.05),0 2px 4px -2px rgba(0,0,0,.05);
    transition: border-color .3s ease,box-shadow .3s ease;
}

.agreement-card:hover {
    border-color: #c7d2fe;
    box-shadow: 0 12px 20px -8px rgba(0,0,0,.1),0 4px 8px -4px rgba(0,0,0,.05);
}

.agreement-section {
    margin-bottom: 2.5rem;
    animation: terms-fade-in .5s ease-out backwards;
    scroll-margin-top: 1.25rem;
}

.agreement-section:last-child { margin-bottom: 0; }

.agreement-section h3 {
    display: flex;
    align-items: center;
    margin: 0 0 1.25rem;
    color: #1f2937;
    font-size: clamp(1.125rem,2.5vw,1.375rem);
    font-weight: 700;
    letter-spacing: -.01em;
}

.agreement-section h3 i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.375rem;
    height: 2.375rem;
    margin-right: .75rem;
    flex-shrink: 0;
    border-radius: .75rem;
    background: #eef2ff;
    color: #6366f1;
    font-size: 1.25rem;
}

.agreement-section p {
    margin: 0 0 1.25rem;
    color: #4b5563;
    font-size: clamp(1rem,2vw,1.0625rem);
    line-height: 1.85;
}

.agreement-section p:last-child { margin-bottom: 0; }

.agreement-section ul {
    margin: 0 0 1.25rem;
    padding-left: 1.5rem;
    list-style: none;
}

.agreement-section li {
    position: relative;
    margin-bottom: .75rem;
    padding-left: .375rem;
    color: #4b5563;
    font-size: clamp(.9375rem,1.8vw,1.0625rem);
    line-height: 1.75;
}

.agreement-section li:before {
    content: "";
    position: absolute;
    top: .72em;
    left: -1.125rem;
    width: .4375rem;
    height: .4375rem;
    border-radius: 999px;
    background: #6366f1;
}

.agreement-section strong {
    color: #1f2937;
    font-weight: 700;
}

.scroll-container {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 1.5rem 0 1.75rem;
    border-radius: .875rem;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 12px -6px rgba(15,23,42,.08);
}

.scroll-container::-webkit-scrollbar { height: 8px; }

.scroll-container::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb);
    border-radius: 4px;
}

.scroll-container::-webkit-scrollbar-track {
    background-color: var(--scrollbar-track);
    border-radius: 4px;
}

.agreement-section table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    border-spacing: 0;
    border-radius: .875rem .875rem 0 0;
    overflow: hidden;
}

.agreement-section td, .agreement-section th {
    padding: clamp(.75rem,1.5vw,1rem) 1rem;
    border: 1px solid #e5e7eb;
    border-bottom: none;
    text-align: left;
}

.agreement-section tbody tr:last-child td, .agreement-section tbody tr:last-child th {
    border-bottom: 1px solid #e5e7eb;
}

.agreement-section th {
    background-color: #f9fafb;
    color: #374151;
    font-size: clamp(.8438rem,1.5vw,.9375rem);
    font-weight: 700;
    white-space: nowrap;
}

.agreement-section th:first-child { border-left: none; }

.agreement-section th:last-child { border-right: none; }

.agreement-section tbody td {
    color: #4b5563;
    font-size: clamp(.8438rem,1.5vw,.9375rem);
    line-height: 1.6;
}

.agreement-section tbody td:first-child {
    color: #1f2937;
    font-weight: 600;
}

.agreement-section tbody tr:nth-child(2n) { background-color: #f9fafb; }

.agreement-section tbody tr:hover { background-color: #f5f5ff; }

.terms-table-caption {
    margin: 0 0 .75rem;
    color: #6b7280;
    font-size: .8125rem;
    line-height: 1.7;
}

.terms-footer {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e5e7eb;
    text-align: center;
}

.terms-footer-main {
    margin-bottom: .5rem;
    color: #6b7280;
    font-size: .9375rem;
    font-weight: 600;
}

.terms-footer-sub {
    color: #9ca3af;
    font-size: .8125rem;
    line-height: 1.8;
}

.terms-link {
    color: #4f46e5;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px dashed rgba(79,70,229,.45);
    transition: color .2s ease,border-color .2s ease;
}

.terms-link:hover {
    color: #4338ca;
    border-color: #4338ca;
}

@keyframes terms-fade-in {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

html.dark { color-scheme: dark; }

html.dark .terms-hero {
    background: #101a2e;
    border-color: #24314e;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,.4),0 2px 4px -1px rgba(0,0,0,.3);
}

html.dark .terms-hero-subtitle { color: #cbd5e1; }

html.dark .terms-hero-badge {
    background: rgba(99,102,241,.16);
    border-color: rgba(129,140,248,.35);
    color: #a5b4fc;
}

html.dark .terms-meta-item {
    background: #162136;
    border-color: #24314e;
    color: #a8b6cc;
}

html.dark .terms-meta-item i { color: #818cf8; }

html.dark .terms-toc {
    background: #101a2e;
    border-color: #24314e;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,.4),0 2px 4px -1px rgba(0,0,0,.3);
}

html.dark .terms-toc-head { color: #e6edf9; }

html.dark .terms-toc-head i { color: #818cf8; }

html.dark .terms-toc-link {
    background: #162136;
    color: #cbd5e1;
}

html.dark .terms-toc-link:hover {
    background: rgba(99,102,241,.12);
    border-color: rgba(129,140,248,.4);
    color: #a5b4fc;
}

html.dark .terms-toc-num {
    background: rgba(99,102,241,.16);
    color: #818cf8;
}

html.dark .terms-toc-link:hover .terms-toc-num {
    background: #6366f1;
    color: #fff;
}

html.dark .agreement-card {
    background: #101a2e;
    border-color: #24314e;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,.4),0 2px 4px -1px rgba(0,0,0,.3);
}

html.dark .agreement-card:hover {
    border-color: rgba(129,140,248,.4);
    box-shadow: 0 12px 20px -8px rgba(0,0,0,.55),0 4px 8px -4px rgba(0,0,0,.35);
}

html.dark .agreement-section h3 { color: #e6edf9; }

html.dark .agreement-section h3 i {
    background: rgba(99,102,241,.16);
    color: #818cf8;
}

html.dark .agreement-section li, html.dark .agreement-section p { color: #cbd5e1; }

html.dark .agreement-section strong { color: #e6edf9; }

html.dark .scroll-container {
    border-color: #24314e;
    box-shadow: 0 4px 12px -6px rgba(0,0,0,.5);
}

html.dark .scroll-container::-webkit-scrollbar-thumb { background-color: #2b3a58; }

html.dark .scroll-container::-webkit-scrollbar-track { background-color: #162136; }

html.dark .agreement-section td, html.dark .agreement-section th { border-color: #24314e; }

html.dark .agreement-section th {
    background-color: #162136;
    color: #e6edf9;
}

html.dark .agreement-section tbody td { color: #cbd5e1; }

html.dark .agreement-section tbody td:first-child { color: #e6edf9; }

html.dark .agreement-section tbody tr:nth-child(2n) { background-color: #131d35; }

html.dark .agreement-section tbody tr:hover { background-color: rgba(99,102,241,.12); }

html.dark .terms-table-caption { color: #a8b6cc; }

html.dark .terms-footer { border-top-color: #24314e; }

html.dark .terms-footer-main { color: #a8b6cc; }

html.dark .terms-footer-sub { color: #71839d; }

html.dark .terms-link {
    color: #a5b4fc;
    border-bottom-color: rgba(165,180,252,.45);
}

html.dark .terms-link:hover { color: #c7d2fe; }

@media (min-width:768px) {
    .terms-back-top { bottom: 28px; }
}

@media (min-width:1024px) {
    .agreement-card { padding: 2.5rem; }

    .terms-toc-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (max-width:768px) {
    .terms-hero { display: none; }

    .agreement-card {
        padding: 1.5rem .9rem;
        border-radius: 1rem;
        margin-bottom: 1.5rem;
    }

    .agreement-section { margin-bottom: 2rem; }

    .agreement-section ul { padding-left: 1.25rem; }

    .terms-toc-grid { grid-template-columns: 1fr; }
}

@media (max-width:480px) {
    .agreement-card { padding: 1.25rem; }

    .terms-toc { padding: 1rem .875rem 1.25rem; }

    .terms-toc-head { margin-bottom: .875rem; }

    .terms-back-top {
        right: 16px;
        bottom: 20px;
    }
}

@media (prefers-reduced-motion:reduce) {
    .terms-hero-dot:after { animation: none; }

    #main-content, .agreement-card {
        transition: none;
        scroll-behavior: auto;
    }

    .agreement-section { animation: none; }
}

@media (min-width:1024px) {
    .agreement-card, .terms-hero, .terms-toc {
        width: auto;
        margin-left: -24px;
        margin-right: -24px;
    }
}