:root {
    color-scheme: light;
    --ui-bg: #f3f6f5;
    --ui-surface: #ffffff;
    --ui-surface-muted: #f7f9f8;
    --ui-text: #17201f;
    --ui-text-muted: #66716f;
    --ui-border: #dce3e1;
    --ui-border-strong: #c8d2cf;
    --ui-primary: #0f766e;
    --ui-primary-hover: #0b5f59;
    --ui-primary-soft: #e7f4f1;
    --ui-success: #15803d;
    --ui-success-soft: #ecf8ef;
    --ui-warning: #a16207;
    --ui-warning-soft: #fff8e7;
    --ui-danger: #c2413a;
    --ui-danger-soft: #fff0ee;
    --ui-code: #10201e;
    --ui-code-text: #d8ebe7;
    --ui-shadow: 0 1px 2px rgba(20, 36, 33, .04), 0 10px 28px rgba(20, 36, 33, .07);

    /* Map every legacy page token to the shared design system. */
    --bg: var(--ui-bg);
    --bg-color: var(--ui-bg);
    --card: var(--ui-surface);
    --card-bg: var(--ui-surface);
    --input-bg: var(--ui-surface);
    --text: var(--ui-text);
    --text-color: var(--ui-text);
    --text-sec: var(--ui-text-muted);
    --text-secondary: var(--ui-text-muted);
    --text-placeholder: #98a29f;
    --border: var(--ui-border);
    --border-color: var(--ui-border);
    --border-focus: var(--ui-primary);
    --accent-color: var(--ui-primary);
    --primary: var(--ui-primary);
    --primary-hover: var(--ui-primary-hover);
    --accent-light: var(--ui-primary-soft);
    --tag-bg: var(--ui-primary-soft);
    --tag-text: var(--ui-primary);
    --hover-bg: var(--ui-surface-muted);
    --row-hover: var(--ui-surface-muted);
    --section-head-bg: var(--ui-surface-muted);
    --row-border: #edf1f0;
    --success: var(--ui-success);
    --success-color: var(--ui-success);
    --success-hover: #166534;
    --success-light: var(--ui-success-soft);
    --warning-bg: var(--ui-warning-soft);
    --warning-border: #d9a441;
    --warning-text: #7a4a04;
    --info-bg: var(--ui-primary-soft);
    --info-border: #5fa59e;
    --info-text: #0b5f59;
    --danger: var(--ui-danger);
    --danger-hover: #a6322d;
    --danger-bg: var(--ui-danger-soft);
    --error-color: var(--ui-danger);
    --error-light: var(--ui-danger-soft);
    --output-bg: var(--ui-code);
    --output-text: var(--ui-code-text);
    --radius: 7px;
    --shadow: var(--ui-shadow);
}

[data-theme="dark"] {
    color-scheme: dark;
    --ui-bg: #111615;
    --ui-surface: #1a211f;
    --ui-surface-muted: #202926;
    --ui-text: #eef4f2;
    --ui-text-muted: #9daaa7;
    --ui-border: #313d3a;
    --ui-border-strong: #44514e;
    --ui-primary: #48b8ad;
    --ui-primary-hover: #67c9bf;
    --ui-primary-soft: #183b37;
    --ui-success: #4ade80;
    --ui-success-soft: #183524;
    --ui-warning: #f0b84b;
    --ui-warning-soft: #3b2c12;
    --ui-danger: #ff7a70;
    --ui-danger-soft: #3c2220;
    --ui-code: #0b100f;
    --ui-code-text: #d8ebe7;
    --ui-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 14px 36px rgba(0, 0, 0, .28);
    --text-placeholder: #6f7c79;
    --row-border: #28322f;
    --warning-border: #795b22;
    --warning-text: #ffd985;
    --info-border: #34756e;
    --info-text: #8cd8d0;
}

html {
    min-width: 320px;
    background: var(--ui-bg);
}

body {
    min-height: 100vh;
    display: block !important;
    padding: 36px clamp(20px, 4vw, 52px) 48px !important;
    background: var(--ui-bg) !important;
    color: var(--ui-text) !important;
    font-family: Inter, "Segoe UI", "Microsoft YaHei", Arial, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.55;
    letter-spacing: 0;
}

body::before {
    content: "";
    position: fixed;
    inset: 0 0 auto;
    height: 3px;
    background: var(--ui-primary);
    z-index: 1000;
}

.container,
.main {
    width: 100% !important;
    max-width: 1080px !important;
    margin: 0 auto !important;
}

.container {
    padding: clamp(22px, 3vw, 34px) !important;
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: 8px !important;
    box-shadow: var(--ui-shadow) !important;
}

body:has(.container > .card) .container {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.container > .card,
.container > .results-card,
.section {
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: 8px !important;
    box-shadow: var(--ui-shadow) !important;
}

.container > .card {
    padding: clamp(22px, 3vw, 34px) !important;
}

.container > .results-card {
    margin-top: 18px !important;
    overflow: hidden;
}

h1,
.header h1 {
    margin: 0 !important;
    color: var(--ui-text) !important;
    font-size: clamp(22px, 2.4vw, 29px) !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
}

.container > h1,
.card > h1 {
    margin-bottom: 24px !important;
}

.container > h1:has(+ .subtitle),
.card > h1:has(+ .subtitle) {
    margin-bottom: 0 !important;
}

.subtitle,
.header p {
    margin: 7px 0 28px !important;
    color: var(--ui-text-muted) !important;
    font-size: 14px !important;
    text-align: left !important;
    opacity: 1 !important;
}

.header {
    padding: 0 0 24px !important;
    margin: 0 0 24px !important;
    background: transparent !important;
    color: var(--ui-text) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ui-border) !important;
    border-radius: 0 !important;
    text-align: left !important;
}

.header-icon {
    display: none !important;
}

label {
    display: block;
    margin-bottom: 8px !important;
    color: var(--ui-text) !important;
    font-size: 13px !important;
    font-weight: 650 !important;
}

input,
textarea,
select {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--ui-border-strong) !important;
    border-radius: 6px !important;
    background: var(--ui-surface) !important;
    color: var(--ui-text) !important;
    font-family: "Cascadia Code", Consolas, "Courier New", monospace !important;
    font-size: 14px !important;
    line-height: 1.55;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease !important;
}

input,
select {
    padding: 10px 12px !important;
}

textarea {
    min-height: 144px;
    padding: 12px 14px !important;
    resize: vertical;
}

input::placeholder,
textarea::placeholder {
    color: var(--text-placeholder) !important;
}

input:focus,
textarea:focus,
select:focus {
    outline: none !important;
    border-color: var(--ui-primary) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-primary) 16%, transparent) !important;
}

.input-group,
.form-group {
    margin-bottom: 20px !important;
}

.form-grid,
.form-row,
.control-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px !important;
}

.form-grid {
    grid-template-columns: minmax(240px, 1.4fr) minmax(160px, .7fr) minmax(180px, .8fr) !important;
}

.button-group,
.toolbar,
.result-actions {
    display: flex !important;
    align-items: center;
    gap: 10px !important;
    flex-wrap: wrap;
}

.button-group,
.toolbar {
    margin: 4px 0 24px !important;
}

button,
.btn-back {
    min-height: 42px;
    padding: 9px 16px !important;
    border: 1px solid transparent !important;
    border-radius: 6px !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    letter-spacing: 0 !important;
    line-height: 1.4;
    text-decoration: none !important;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease !important;
}

button:hover,
.btn-back:hover {
    opacity: 1 !important;
    transform: translateY(-1px);
}

button:focus-visible,
.btn-back:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--ui-primary) 25%, transparent);
    outline-offset: 2px;
}

.btn,
.btn-primary,
.btn-convert {
    background: var(--ui-primary) !important;
    color: #fff !important;
    border-color: var(--ui-primary) !important;
}

.btn:hover,
.btn-primary:hover,
.btn-convert:hover {
    background: var(--ui-primary-hover) !important;
    border-color: var(--ui-primary-hover) !important;
}

.btn-secondary,
.btn-reset,
.btn-ghost,
.btn-back {
    background: var(--ui-surface) !important;
    color: var(--ui-text) !important;
    border-color: var(--ui-border-strong) !important;
}

.btn-secondary:hover,
.btn-reset:hover,
.btn-ghost:hover,
.btn-back:hover {
    background: var(--ui-surface-muted) !important;
    border-color: var(--ui-primary) !important;
    color: var(--ui-primary) !important;
}

.btn-copy,
.btn-copy-all,
.copy-all-btn,
.btn-info,
.btn-success {
    background: #24413d !important;
    color: #fff !important;
    border-color: #24413d !important;
}

.btn-export,
.export-btn {
    background: var(--ui-warning-soft) !important;
    color: var(--ui-warning) !important;
    border-color: #d7b873 !important;
}

.hint,
.extra,
.version {
    color: var(--ui-text-muted) !important;
    font-size: 12px !important;
    line-height: 1.55;
}

.hint {
    margin-top: 7px !important;
}

.info-box,
.info-section,
.display-controls,
.mode-switch {
    margin: 22px 0 0 !important;
    padding: 16px 18px !important;
    background: var(--ui-surface-muted) !important;
    color: var(--ui-text) !important;
    border: 1px solid var(--ui-border) !important;
    border-left: 3px solid var(--ui-primary) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
}

.info-box h3,
.info-title {
    margin: 0 0 8px !important;
    color: var(--ui-text) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

.info-box p,
.info-box li,
.info-list li {
    color: var(--ui-text-muted) !important;
    font-size: 13px !important;
    line-height: 1.7 !important;
}

.info-box ul,
.info-list {
    margin: 0 !important;
    padding-left: 18px !important;
}

.mode-switch {
    display: grid !important;
    grid-template-columns: 100px minmax(0, 1fr);
    align-items: center;
    gap: 8px 16px;
    margin-bottom: 20px !important;
}

.mode-switch label,
.mode-switch .hint {
    margin: 0 !important;
}

.mode-switch .hint {
    grid-column: 2;
}

.mode-toggle-btn {
    justify-self: start;
    background: var(--ui-primary-soft) !important;
    color: var(--ui-primary) !important;
    border-color: color-mix(in srgb, var(--ui-primary) 35%, var(--ui-border)) !important;
}

.result-box,
.result-section,
.result-card,
.result,
#result {
    margin-top: 22px !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: 7px !important;
    background: var(--ui-surface) !important;
    box-shadow: none !important;
}

.result-box,
.result-section,
.result-card,
.result {
    padding: 20px !important;
}

.result-title,
.result-header,
.result h2,
#result h2 {
    color: var(--ui-text) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
}

.result-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 18px 0 8px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

.summary,
.stats {
    padding: 12px 14px !important;
    background: var(--ui-primary-soft) !important;
    color: var(--ui-text) !important;
    border: 1px solid color-mix(in srgb, var(--ui-primary) 22%, var(--ui-border)) !important;
    border-radius: 6px !important;
    line-height: 1.65;
}

.summary-grid,
.stats:has(.stat-card) {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1px !important;
    padding: 0 !important;
    overflow: hidden;
    background: var(--ui-border) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: 7px !important;
}

.stats:has(.stat-card) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.summary-card,
.stat-card {
    min-width: 0;
    padding: 18px 12px !important;
    background: var(--ui-surface) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-align: center;
}

.summary-value,
.stat-value {
    color: var(--ui-primary) !important;
    font-size: 22px !important;
    font-weight: 750 !important;
}

.summary-label,
.stat-label {
    color: var(--ui-text-muted) !important;
    font-size: 12px !important;
}

.result-item,
.cidr-item,
.subnet-item,
.address-line {
    border-color: var(--ui-border) !important;
    border-radius: 5px !important;
    background: var(--ui-surface-muted) !important;
    color: var(--ui-text) !important;
    box-shadow: none !important;
}

.result-item,
.cidr-item,
.subnet-item {
    padding: 12px 14px !important;
    margin-bottom: 8px !important;
}

.cidr-item:hover,
.subnet-item:hover,
.address-line:hover {
    background: var(--ui-primary-soft) !important;
    border-color: color-mix(in srgb, var(--ui-primary) 45%, var(--ui-border)) !important;
    transform: none !important;
}

.result-value,
.output-box {
    padding: 14px !important;
    background: var(--ui-code) !important;
    color: var(--ui-code-text) !important;
    border: 1px solid #253a36 !important;
    border-radius: 6px !important;
    font-family: "Cascadia Code", Consolas, monospace !important;
}

.address-line {
    padding: 8px 10px !important;
    background: rgba(255, 255, 255, .04) !important;
    color: var(--ui-code-text) !important;
}

.error,
.warning,
.special {
    padding: 12px 14px !important;
    border-radius: 6px !important;
    box-shadow: none !important;
}

.error,
.result-box.error {
    background: var(--ui-danger-soft) !important;
    color: var(--ui-danger) !important;
    border-color: color-mix(in srgb, var(--ui-danger) 45%, var(--ui-border)) !important;
}

.warning {
    background: var(--ui-warning-soft) !important;
    color: var(--warning-text) !important;
}

.special,
.result-box.success {
    background: var(--ui-success-soft) !important;
    color: var(--ui-success) !important;
    border-color: color-mix(in srgb, var(--ui-success) 35%, var(--ui-border)) !important;
}

.result-box.success {
    background: var(--ui-surface) !important;
    color: var(--ui-text) !important;
    border: 1px solid var(--ui-border) !important;
    border-top: 3px solid var(--ui-success) !important;
}

.info-item {
    min-height: 46px;
    padding: 10px 0 !important;
    border-bottom-color: var(--ui-border) !important;
}

.info-label {
    color: var(--ui-text-muted) !important;
    font-size: 13px !important;
}

.info-value,
.ip-box,
.subnet-cidr,
.subnet-address {
    color: var(--ui-text) !important;
    font-family: "Cascadia Code", Consolas, monospace !important;
}

.ip-box,
.subnet-label,
.relation-tag,
.tag,
.idx {
    background: var(--ui-primary-soft) !important;
    color: var(--ui-primary) !important;
    border-color: color-mix(in srgb, var(--ui-primary) 25%, var(--ui-border)) !important;
}

.table-wrapper,
.table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--ui-border);
    border-radius: 7px;
}

table {
    width: 100%;
    border-collapse: collapse !important;
    background: var(--ui-surface) !important;
    color: var(--ui-text) !important;
}

th {
    padding: 11px 12px !important;
    background: var(--ui-surface-muted) !important;
    color: var(--ui-text-muted) !important;
    border-color: var(--ui-border) !important;
    font-size: 12px !important;
    font-weight: 650 !important;
    text-align: left;
    white-space: nowrap;
}

td {
    padding: 11px 12px !important;
    color: var(--ui-text) !important;
    border-color: var(--ui-border) !important;
    font-family: "Cascadia Code", Consolas, monospace;
    font-size: 13px !important;
}

tr:hover td {
    background: var(--ui-surface-muted) !important;
}

.copy-btn,
.btn-del,
.toast-close {
    width: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    color: var(--ui-text-muted) !important;
    border-color: var(--ui-border) !important;
}

.section {
    margin-bottom: 16px !important;
    overflow: hidden;
}

.section-head {
    min-height: 48px;
    padding: 12px 16px !important;
    background: var(--ui-surface-muted) !important;
    border-bottom-color: var(--ui-border) !important;
}

.section-head .title {
    color: var(--ui-text) !important;
    font-size: 14px !important;
}

.section-head .title i {
    width: 3px !important;
    height: 16px !important;
    background: var(--ui-primary) !important;
}

.section-body {
    padding: 16px !important;
}

.var-table input[type="text"],
.var-table select,
.repeat-row input[type="number"] {
    width: 100% !important;
    min-height: 36px !important;
}

.repeat-row {
    display: grid !important;
    grid-template-columns: 92px 100px auto;
    margin-bottom: 12px;
}

.repeat-row label {
    margin: 0 !important;
}

.output-box {
    border-radius: 0 !important;
}

.hidden {
    display: none !important;
}

.version {
    margin-top: 20px !important;
    text-align: right !important;
}

@media (max-width: 760px) {
    body {
        padding: 22px 12px 32px !important;
    }

    .container,
    .container > .card {
        padding: 20px 16px !important;
    }

    h1,
    .header h1 {
        font-size: 22px !important;
    }

    .form-grid,
    .form-row,
    .control-row {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    .button-group > button,
    .button-group > .btn-back,
    .toolbar > button {
        flex: 1 1 140px !important;
    }

    .summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .stats:has(.stat-card) {
        grid-template-columns: 1fr !important;
    }

    .mode-switch {
        grid-template-columns: 1fr !important;
    }

    .mode-switch .hint {
        grid-column: 1;
    }

    .result-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .result-actions {
        width: 100%;
    }

    .result-actions button {
        flex: 1;
    }

    .info-item {
        align-items: flex-start !important;
        flex-direction: column !important;
    }

    .info-value,
    .ip-box {
        width: 100%;
        text-align: left !important;
        overflow-wrap: anywhere;
    }

    .cidr-main,
    .subnet-item {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 6px !important;
    }
}