/*
 * KivTools legacy-tool modernization layer.
 *
 * The old tools keep their proven JavaScript hooks and field names. This
 * stylesheet replaces their fixed-width, Bootstrap-era presentation with the
 * same quiet developer-workbench language used by current KivTools modules.
 */

html[data-kiv-tool] {
    --kiv-legacy-ink: #263b34;
    --kiv-legacy-muted: #667a70;
    --kiv-legacy-line: rgba(50, 86, 68, .14);
    --kiv-legacy-surface: #ffffff;
    --kiv-legacy-soft: #f1f7f3;
    --kiv-legacy-soft-2: #e8f2ec;
    --kiv-legacy-accent: #178b58;
    --kiv-legacy-accent-strong: #106d44;
    --kiv-legacy-terminal: #17231e;
    --kiv-legacy-terminal-ink: #ddf7e6;
}

html.kiv-shell-dark[data-kiv-tool] {
    --kiv-legacy-ink: #dfebe4;
    --kiv-legacy-muted: #9fb6aa;
    --kiv-legacy-line: rgba(190, 222, 203, .15);
    --kiv-legacy-surface: #17221d;
    --kiv-legacy-soft: #1b2b24;
    --kiv-legacy-soft-2: #21362c;
    --kiv-legacy-accent: #55bd7e;
    --kiv-legacy-accent-strong: #77d49a;
    --kiv-legacy-terminal: #0d1512;
    --kiv-legacy-terminal-ink: #dff8e7;
}

body.kiv-modern-legacy-tool .col10main.kiv-legacy-modern-root {
    min-width: 0;
}

body.kiv-modern-legacy-tool .kiv-legacy-intro {
    position: relative;
    max-width: 980px;
    margin: 12px 0 14px;
    padding: 7px 0 16px 18px;
    border: 0;
    border-left: 3px solid var(--kiv-legacy-accent);
    border-bottom: 1px solid var(--kiv-legacy-line);
    background: transparent;
}

body.kiv-modern-legacy-tool .kiv-legacy-intro-kicker {
    display: block;
    margin: 0 0 5px;
    color: var(--kiv-legacy-accent);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .085em;
    line-height: 1.25;
    text-transform: uppercase;
}

body.kiv-modern-legacy-tool .kiv-legacy-intro h1 {
    margin: 0 0 6px;
    color: var(--kiv-legacy-ink);
    font-size: clamp(23px, 2.4vw, 30px);
    font-weight: 740;
    letter-spacing: -.028em;
    line-height: 1.15;
}

body.kiv-modern-legacy-tool .kiv-legacy-intro p {
    max-width: 900px;
    margin: 0 auto;
    color: var(--kiv-legacy-muted);
    font-size: 14px;
    line-height: 1.62;
}

body.kiv-modern-legacy-tool .kiv-legacy-intro-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 16px;
    margin-top: 10px;
    color: var(--kiv-legacy-muted);
    font-size: 11px;
    font-weight: 650;
}

body.kiv-modern-legacy-tool .kiv-legacy-intro-meta span {
    position: relative;
    padding-left: 11px;
}

body.kiv-modern-legacy-tool .kiv-legacy-intro-meta span::before {
    position: absolute;
    top: .52em;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--kiv-legacy-accent);
    content: "";
}

body.kiv-modern-legacy-tool .kiv-page-explainer {
    margin: 24px 0 10px;
    padding: 16px 18px 17px;
    border: 0;
    border-left: 3px solid color-mix(in srgb, var(--kiv-legacy-accent) 68%, transparent);
    border-radius: 0;
    background: var(--kiv-legacy-soft);
    box-shadow: none;
    color: var(--kiv-legacy-muted);
}

body.kiv-modern-legacy-tool .kiv-page-explainer h4,
body.kiv-modern-legacy-tool .kiv-page-explainer h2 {
    margin: 0 0 7px;
    color: var(--kiv-legacy-ink);
    font-size: 16px;
    font-weight: 720;
    letter-spacing: -.012em;
    line-height: 1.3;
}

body.kiv-modern-legacy-tool .kiv-page-explainer p,
body.kiv-modern-legacy-tool .kiv-page-explainer li {
    color: var(--kiv-legacy-muted);
    font-size: 13px;
    line-height: 1.65;
}

body.kiv-modern-legacy-tool .kiv-page-explainer p:last-child,
body.kiv-modern-legacy-tool .kiv-page-explainer ul:last-child {
    margin-bottom: 0;
}

body.kiv-modern-legacy-tool .kiv-page-explainer ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px 28px;
    margin: 10px 0 0;
    padding-left: 19px;
}

/* Recent history is navigation metadata, not a second row of primary CTAs. */
#foot-history {
    margin-top: 18px;
    margin-bottom: 15px;
}

#foot-history .row > .col-md-12:first-child {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 8px;
    padding-top: 10px;
    border-top: 1px solid var(--kiv-legacy-line, rgba(50, 86, 68, .14));
}

#visit-history-label {
    color: var(--kiv-legacy-muted, #667a70);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .035em;
}

#visit_history {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
}

#visit_history > a.btn,
#visit_history > a.btn.btn-success.btn-xs {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    margin: 0 !important;
    padding: 4px 8px;
    border: 0;
    border-radius: 3px;
    background: var(--kiv-legacy-soft, #f1f7f3);
    box-shadow: none;
    color: var(--kiv-legacy-muted, #52685e);
    font-size: 11px;
    font-weight: 650;
    line-height: 1.25;
    text-shadow: none;
}

#visit_history > a.btn:hover,
#visit_history > a.btn:focus {
    background: var(--kiv-legacy-soft-2, #e8f2ec);
    color: var(--kiv-legacy-accent, #178b58);
    outline: 2px solid color-mix(in srgb, var(--kiv-legacy-accent, #178b58) 25%, transparent);
    outline-offset: 1px;
}

/* Shared form rhythm for the remaining Bootstrap-era utility pages. */
body.kiv-modern-legacy-tool .panel,
body.kiv-modern-legacy-tool .panel-default {
    min-width: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body.kiv-modern-legacy-tool input[type="text"],
body.kiv-modern-legacy-tool input[type="number"],
body.kiv-modern-legacy-tool select,
body.kiv-modern-legacy-tool textarea {
    color-scheme: light;
}

html.kiv-shell-dark body.kiv-modern-legacy-tool input[type="text"],
html.kiv-shell-dark body.kiv-modern-legacy-tool input[type="number"],
html.kiv-shell-dark body.kiv-modern-legacy-tool select,
html.kiv-shell-dark body.kiv-modern-legacy-tool textarea {
    color-scheme: dark;
}

/* Scientific calculator: keep the existing calculation engine, replace the
 * 880px painted widget with a responsive, keyboard-like instrument. */
html[data-kiv-tool="calculator"] .CalculatorWrap {
    width: 100%;
    margin: 0;
    color: var(--kiv-legacy-ink);
    font-family: inherit;
}

html[data-kiv-tool="calculator"] .CalculatorWrap .CalculTable {
    width: 100%;
    max-width: 1040px;
    height: auto;
    margin: 0 auto;
    padding: 18px;
    border: 0;
    border-top: 2px solid var(--kiv-legacy-accent);
    border-radius: 0;
    background: var(--kiv-legacy-surface);
    box-shadow: 0 12px 30px rgba(30, 58, 44, .07);
}

html[data-kiv-tool="calculator"] .CalculatorWrap .ShowAreaWrap {
    margin-bottom: 13px;
}

html[data-kiv-tool="calculator"] .CalculatorWrap .ShowArea {
    width: 100%;
    height: 68px;
    padding: 10px 15px;
    border: 0;
    border-radius: 4px;
    background: var(--kiv-legacy-terminal);
    box-shadow: inset 0 0 0 1px rgba(137, 213, 166, .16);
    color: var(--kiv-legacy-terminal-ink) !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: clamp(23px, 4vw, 34px);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    text-align: right;
}

html[data-kiv-tool="calculator"] .CalculatorWrap .heachackWrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px 14px;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 9px 0;
    overflow: visible;
    font-size: 12px;
}

html[data-kiv-tool="calculator"] .CalculatorWrap .heachackWrap + .heachackWrap {
    margin-bottom: 11px;
    padding-top: 2px;
    border-bottom: 1px solid var(--kiv-legacy-line);
}

html[data-kiv-tool="calculator"] .CalculatorWrap .heachackWrap li {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    float: none;
    width: auto;
    height: auto;
    padding: 0;
    color: var(--kiv-legacy-muted);
    line-height: 1.35;
}

html[data-kiv-tool="calculator"] .CalculatorWrap .heachackWrap li.fr {
    margin-left: 0;
}

html[data-kiv-tool="calculator"] .CalculatorWrap input[type="radio"],
html[data-kiv-tool="calculator"] .CalculatorWrap input[type="checkbox"] {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--kiv-legacy-accent);
}

html[data-kiv-tool="calculator"] .CalculatorWrap .heachackWrap input[type="text"],
html[data-kiv-tool="calculator"] .CalculatorWrap .heachackWrap input[readonly] {
    width: 42px;
    height: 28px;
    margin: 0;
    padding: 3px 5px;
    border: 0;
    background: var(--kiv-legacy-soft);
    color: var(--kiv-legacy-muted) !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 11px;
    text-align: center;
}

html[data-kiv-tool="calculator"] .CalculatorWrap .heachackWrap input[type="button"] {
    width: auto;
    min-width: 46px;
    height: 34px;
    margin: 0;
    padding: 5px 9px;
    border: 0;
    border-radius: 3px;
    background: var(--kiv-legacy-soft-2);
    box-shadow: inset 0 -1px 0 var(--kiv-legacy-line);
    color: var(--kiv-legacy-ink);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 11px;
    font-weight: 750;
}

html[data-kiv-tool="calculator"] .CalculatorWrap .CentChackBox {
    display: grid;
    grid-template-columns: minmax(210px, 1.15fr) minmax(72px, .38fr) minmax(420px, 2.5fr);
    grid-template-areas: "scientific memory keypad";
    gap: 10px;
}

html[data-kiv-tool="calculator"] .CalculatorWrap .CentChackLeft {
    grid-area: scientific;
}

html[data-kiv-tool="calculator"] .CalculatorWrap .CentChackSide {
    grid-area: memory;
}

html[data-kiv-tool="calculator"] .CalculatorWrap .CentChackRight {
    grid-area: keypad;
}

html[data-kiv-tool="calculator"] .CalculatorWrap .CentChackLeft,
html[data-kiv-tool="calculator"] .CalculatorWrap .CentChackSide,
html[data-kiv-tool="calculator"] .CalculatorWrap .CentChackRight {
    float: none;
    width: auto;
    height: auto;
    margin: 0;
}

html[data-kiv-tool="calculator"] .CalculatorWrap .CentChackLeft,
html[data-kiv-tool="calculator"] .CalculatorWrap .CentChackRight {
    display: grid;
    gap: 8px;
}

html[data-kiv-tool="calculator"] .CalculatorWrap .CentChackLeft li,
html[data-kiv-tool="calculator"] .CalculatorWrap .CentChackRight li {
    display: grid;
    gap: 8px;
}

html[data-kiv-tool="calculator"] .CalculatorWrap .CentChackLeft li {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

html[data-kiv-tool="calculator"] .CalculatorWrap .CentChackRight li {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

html[data-kiv-tool="calculator"] .CalculatorWrap .CentChackSide {
    display: grid;
    align-content: start;
    gap: 8px;
}

html[data-kiv-tool="calculator"] .CalculatorWrap .CentChackBox input,
html[data-kiv-tool="calculator"] .CalculatorWrap .CentChackLeft li input,
html[data-kiv-tool="calculator"] .CalculatorWrap .CentChackRight li input,
html[data-kiv-tool="calculator"] .CalculatorWrap .CentChackSide input {
    float: none;
    width: 100%;
    min-width: 0;
    height: 44px;
    margin: 0;
    padding: 6px;
    border: 0;
    border-radius: 4px;
    background: var(--kiv-legacy-soft-2);
    box-shadow: inset 0 -1px 0 var(--kiv-legacy-line);
    color: var(--kiv-legacy-ink);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

html[data-kiv-tool="calculator"] .CalculatorWrap .CentChackRight li input.Rcolor01 {
    background: var(--kiv-legacy-surface);
    box-shadow: inset 0 0 0 1px var(--kiv-legacy-line), 0 2px 5px rgba(31, 61, 46, .05);
    color: var(--kiv-legacy-ink);
    font-size: 15px;
}

html[data-kiv-tool="calculator"] .CalculatorWrap .CentChackRight li input[value="="],
html[data-kiv-tool="calculator"] .CalculatorWrap .CentChackRight li input[value="＝"] {
    background: var(--kiv-legacy-accent);
    box-shadow: none;
    color: #fff;
}

html[data-kiv-tool="calculator"] .CalculatorWrap .CentChackBox input:hover,
html[data-kiv-tool="calculator"] .CalculatorWrap .CentChackBox input:focus {
    background: color-mix(in srgb, var(--kiv-legacy-accent) 14%, var(--kiv-legacy-surface));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kiv-legacy-accent) 42%, transparent);
    color: var(--kiv-legacy-accent-strong);
    opacity: 1;
    outline: 0;
}

html[data-kiv-tool="calculator"] .CalculatorWrap input:disabled {
    cursor: not-allowed;
    opacity: .42;
}

/* Subnet tools: their field names and calculations remain untouched; every
 * calculator becomes a responsive workbench section instead of a fixed pair
 * of narrow legacy columns. */
html[data-kiv-tool="subnetmask"] .NetWorkWrap {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    width: 100%;
    padding-bottom: 4px;
}

html[data-kiv-tool="subnetmask"] .NetWork-left,
html[data-kiv-tool="subnetmask"] .NetWork-right {
    float: none !important;
    width: auto;
    min-width: 0;
    padding: 0;
}

html[data-kiv-tool="subnetmask"] .NetWork-left {
    grid-column: 1;
    grid-row: 1;
}

html[data-kiv-tool="subnetmask"] .NetWork-right {
    grid-column: 2;
    grid-row: 1;
}

html[data-kiv-tool="subnetmask"] .NetWork-main01 {
    width: 100%;
    margin: 0 0 14px;
    border: 0;
    border-top: 2px solid color-mix(in srgb, var(--kiv-legacy-accent) 60%, transparent);
    background: var(--kiv-legacy-surface);
    box-shadow: 0 8px 22px rgba(30, 58, 44, .05);
}

html[data-kiv-tool="subnetmask"] .NetWorkWrap .MainHead {
    margin: 0;
    padding: 11px 13px 9px;
    border: 0;
    border-bottom: 1px solid var(--kiv-legacy-line);
    background: transparent;
    color: var(--kiv-legacy-ink);
    font-family: inherit;
    font-size: 13px;
    font-weight: 740;
    letter-spacing: -.008em;
    line-height: 1.35;
}

html[data-kiv-tool="subnetmask"] .NetWorkWrap .MainCent .MCentlist {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    min-height: 0;
    padding: 9px 12px;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--kiv-legacy-line) 65%, transparent);
    background: transparent;
}

html[data-kiv-tool="subnetmask"] .NetWorkWrap .MainCent .MCentlist:last-child {
    border-bottom: 0;
}

html[data-kiv-tool="subnetmask"] .NetWorkWrap .MainCent .MCentlist label {
    float: none;
    flex: 0 0 112px;
    width: auto !important;
    margin: 0;
    padding: 0 4px 0 0;
    color: var(--kiv-legacy-muted);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
    text-align: left;
}

html[data-kiv-tool="subnetmask"] .NetWorkWrap .MainCent .MCentlist input.Intxt {
    float: none;
    flex: 0 1 58px;
    width: 58px !important;
    min-width: 48px;
    height: 35px;
    margin: 0;
    padding: 6px 7px;
    border: 1px solid var(--kiv-legacy-line);
    border-radius: 3px;
    background: var(--kiv-legacy-soft);
    color: var(--kiv-legacy-ink);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    text-align: center;
}

html[data-kiv-tool="subnetmask"] .NetWorkWrap .MainCent .MCentlist input.Intxt.w100 {
    flex-basis: 118px;
    width: 118px !important;
}

html[data-kiv-tool="subnetmask"] .NetWorkWrap .MainCent .MCentlist input.Intxt.w60 {
    flex-basis: 78px;
    width: 78px !important;
}

html[data-kiv-tool="subnetmask"] .NetWorkWrap .MainCent .MCentlist input.Inbtn,
html[data-kiv-tool="subnetmask"] .NetWorkWrap .MainCent .MCentlist .ObtLBtN {
    float: none;
    width: auto !important;
    min-width: 0;
    height: 35px;
    margin: 0;
    padding: 6px 10px;
    border: 0;
    border-radius: 3px;
    background: var(--kiv-legacy-soft-2);
    color: var(--kiv-legacy-accent-strong);
    font-size: 11px;
    font-weight: 750;
    line-height: 1;
}

html[data-kiv-tool="subnetmask"] .NetWorkWrap .MainCent .MCentlist input.Inbtn:first-of-type {
    background: var(--kiv-legacy-accent);
    color: #fff;
}

html[data-kiv-tool="subnetmask"] .NetWorkWrap .MainCent .MCentlist p {
    width: 100%;
    margin: 0 0 5px;
    color: var(--kiv-legacy-muted);
    font-size: 11px;
    line-height: 1.55;
}

html[data-kiv-tool="subnetmask"] .NetWork-choese,
html[data-kiv-tool="subnetmask"] .ToolChoese,
html[data-kiv-tool="subnetmask"] .NetWorkW-choese {
    float: none;
    width: auto !important;
    min-width: 100px;
    height: 35px;
    margin: 0;
}

html[data-kiv-tool="subnetmask"] .NetWorkW-cont {
    width: 100% !important;
    min-width: 100px;
    height: 35px;
    padding: 7px 25px 7px 8px;
    border: 1px solid var(--kiv-legacy-line);
    background: var(--kiv-legacy-soft);
    color: var(--kiv-legacy-ink);
    line-height: 19px;
}

html[data-kiv-tool="subnetmask"] .NetWorkC-down {
    top: 35px;
    width: max-content !important;
    min-width: 100%;
    max-width: 240px;
    border-color: var(--kiv-legacy-line);
    background: var(--kiv-legacy-surface);
}

html[data-kiv-tool="subnetmask"] .ObtainList {
    position: static;
    width: 100%;
    overflow-x: auto;
    background: var(--kiv-legacy-surface);
}

/* Interest calculator: labels become labels again instead of fixed white
 * input add-ons. The two related workflows stay side by side on desktop. */
html[data-kiv-tool="nianlvli"] #form1 > .form-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 0;
}

html[data-kiv-tool="nianlvli"] #form1 > .form-group > .alert {
    grid-column: 1 / -1;
    margin: 0;
    padding: 10px 12px;
    border: 0;
    border-left: 3px solid var(--kiv-legacy-accent);
    border-radius: 0;
    background: var(--kiv-legacy-soft);
    color: var(--kiv-legacy-muted);
    font-size: 12px;
    font-weight: 650;
    text-align: left;
}

html[data-kiv-tool="nianlvli"] #form1 > .form-group > .col-md-6 {
    width: auto;
    padding: 16px 16px 12px;
    border: 0;
    border-top: 2px solid color-mix(in srgb, var(--kiv-legacy-accent) 58%, transparent);
    background: var(--kiv-legacy-surface);
    box-shadow: 0 8px 22px rgba(30, 58, 44, .05);
}

html[data-kiv-tool="nianlvli"] #form1 .col-sm-10 {
    float: none;
    width: 100%;
    padding: 0;
}

html[data-kiv-tool="nianlvli"] #form1 .col-md-6 > .col-sm-10:first-child .form-group {
    margin: 0 0 12px;
    color: var(--kiv-legacy-ink);
    font-size: 14px;
    font-weight: 740;
    text-align: left;
}

html[data-kiv-tool="nianlvli"] #form1 .form-group.input-group {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0 0 11px;
}

html[data-kiv-tool="nianlvli"] #form1 .input-group-addon {
    width: auto;
    padding: 0 0 5px;
    border: 0;
    background: transparent;
    color: var(--kiv-legacy-muted);
    font-size: 11px;
    font-weight: 720;
    line-height: 1.35;
    text-align: left;
    white-space: normal;
}

html[data-kiv-tool="nianlvli"] #form1 .form-control {
    float: none;
    width: 100%;
    height: 41px;
    padding: 8px 10px;
    border: 1px solid var(--kiv-legacy-line);
    border-radius: 3px;
    background: var(--kiv-legacy-soft);
    color: var(--kiv-legacy-ink);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-variant-numeric: tabular-nums;
}

html[data-kiv-tool="nianlvli"] #form1 .red[readonly] {
    border-color: color-mix(in srgb, var(--kiv-legacy-accent) 45%, transparent);
    background: color-mix(in srgb, var(--kiv-legacy-accent) 8%, var(--kiv-legacy-surface));
    color: var(--kiv-legacy-accent-strong);
}

html[data-kiv-tool="nianlvli"] #form1 .btn-success {
    min-width: 120px;
    margin-top: 2px;
}

/* Drawing board: the palette is a compact command bar above the canvas. */
html[data-kiv-tool="tuya"] .panel {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    overflow: hidden;
    border-top: 2px solid var(--kiv-legacy-accent);
    background: var(--kiv-legacy-surface);
    box-shadow: 0 10px 26px rgba(30, 58, 44, .06);
}

html[data-kiv-tool="tuya"] .panel > div:first-child {
    order: 2;
    width: 100% !important;
    padding: 0 14px 14px;
}

html[data-kiv-tool="tuya"] #canvas {
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    cursor: crosshair;
    border: 1px solid var(--kiv-legacy-line);
    border-radius: 2px;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(35, 64, 49, .03);
    touch-action: none;
}

html[data-kiv-tool="tuya"] .tool {
    position: static;
    order: 1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 16px;
    width: 100%;
    margin: 0;
    padding: 11px 14px;
    border: 0;
    border-bottom: 1px solid var(--kiv-legacy-line);
    border-radius: 0;
    background: var(--kiv-legacy-soft);
}

html[data-kiv-tool="tuya"] .tool .color,
html[data-kiv-tool="tuya"] .tool .size {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    float: none;
    width: auto;
    margin: 0;
}

html[data-kiv-tool="tuya"] .tool .color div,
html[data-kiv-tool="tuya"] .tool .size div {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: 0;
    border: 2px solid transparent;
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--kiv-legacy-line);
    opacity: .72;
}

html[data-kiv-tool="tuya"] .tool .color div.active,
html[data-kiv-tool="tuya"] .tool .size div.active {
    border-color: var(--kiv-legacy-accent);
    box-shadow: 0 0 0 2px var(--kiv-legacy-surface), 0 0 0 4px var(--kiv-legacy-accent);
    opacity: 1;
}

html[data-kiv-tool="tuya"] .tool .size div {
    border-radius: 3px;
    background: var(--kiv-legacy-surface);
}

html[data-kiv-tool="tuya"] .tool .size span {
    height: 20px;
    margin: 0 auto;
    background: var(--kiv-legacy-ink);
}

html[data-kiv-tool="tuya"] .btntool {
    clear: none;
    margin: 0;
}

html[data-kiv-tool="tuya"] .btntool input.btn {
    min-height: 34px;
    padding: 6px 10px;
    border: 0;
    border-radius: 3px;
    background: var(--kiv-legacy-surface);
    box-shadow: inset 0 0 0 1px var(--kiv-legacy-line);
    color: var(--kiv-legacy-muted);
    font-size: 11px;
}

html[data-kiv-tool="tuya"] .btntool input.btn-danger {
    color: #a84d4d;
}

/* Unit converters share a recognizable family treatment. Labels, input and
 * action align as compact data rows; long converters split into columns. */
html[data-kiv-tool^="calc"]:not([data-kiv-tool="calculator"]) ul[class$="CountCent"] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px 18px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left !important;
}

html[data-kiv-tool^="calc"]:not([data-kiv-tool="calculator"]) ul[class$="CountCent"] > li {
    display: grid;
    grid-template-columns: minmax(128px, .95fr) minmax(130px, 1.15fr) auto;
    align-items: center;
    gap: 8px;
    min-width: 0;
    min-height: 54px;
    padding: 7px 0;
    border-bottom: 1px solid var(--kiv-legacy-line);
}

html[data-kiv-tool^="calc"]:not([data-kiv-tool="calculator"]) ul[class$="CountCent"] > li label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 7px;
    min-width: 0;
    margin: 0;
    color: var(--kiv-legacy-ink);
    font-size: 12px;
    font-weight: 680;
    line-height: 1.35;
}

html[data-kiv-tool^="calc"]:not([data-kiv-tool="calculator"]) ul[class$="CountCent"] .mathunit {
    flex: 0 0 auto;
    color: var(--kiv-legacy-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 10px;
    font-weight: 600;
}

html[data-kiv-tool^="calc"]:not([data-kiv-tool="calculator"]) ul[class$="CountCent"] .form-control {
    width: 100%;
    min-width: 0;
    height: 38px;
    padding: 7px 9px;
    border: 1px solid var(--kiv-legacy-line);
    border-radius: 3px;
    background: var(--kiv-legacy-surface);
    color: var(--kiv-legacy-ink);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-variant-numeric: tabular-nums;
}

html[data-kiv-tool^="calc"]:not([data-kiv-tool="calculator"]) ul[class$="CountCent"] .BtnHS {
    min-width: 64px;
    min-height: 38px;
    margin: 0;
    padding: 7px 9px;
    border: 0;
    border-radius: 3px;
    background: var(--kiv-legacy-soft-2);
    color: var(--kiv-legacy-accent-strong);
    font-size: 11px;
    font-weight: 720;
}

html[data-kiv-tool^="calc"]:not([data-kiv-tool="calculator"]) .form-inline {
    width: 100% !important;
    padding: 14px 16px 12px;
    border-top: 2px solid var(--kiv-legacy-accent);
    background: var(--kiv-legacy-surface);
    box-shadow: 0 10px 26px rgba(30, 58, 44, .05);
}

html[data-kiv-tool^="calc"]:not([data-kiv-tool="calculator"]) .form-inline > .form-group {
    width: 100%;
}

html[data-kiv-tool^="calc"]:not([data-kiv-tool="calculator"]) .form-inline hr {
    margin: 12px 0;
    border-color: var(--kiv-legacy-line);
}

html[data-kiv-tool^="calc"]:not([data-kiv-tool="calculator"]) .UccAllBtn {
    min-height: 36px;
    border: 0;
    border-radius: 3px;
    background: var(--kiv-legacy-soft-2);
    color: var(--kiv-legacy-muted);
    font-size: 11px;
    font-weight: 720;
}

/* Formatter controls no longer look like unstyled browser defaults. */
body.kiv-modern-legacy-tool .form-horizontal input[type="checkbox"],
body.kiv-modern-legacy-tool .form-horizontal input[type="radio"] {
    width: 16px;
    height: 16px;
    margin-top: 0;
    accent-color: var(--kiv-legacy-accent);
    vertical-align: -3px;
}

@media (max-width: 991px) {
    html[data-kiv-tool="calculator"] .CalculatorWrap .CentChackBox {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
        grid-template-areas:
            "scientific keypad"
            "memory keypad";
    }

    html[data-kiv-tool="calculator"] .CalculatorWrap .CentChackSide {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    html[data-kiv-tool="subnetmask"] .NetWorkWrap {
        grid-template-columns: 1fr;
    }

    html[data-kiv-tool="subnetmask"] .NetWork-left,
    html[data-kiv-tool="subnetmask"] .NetWork-right {
        grid-column: 1;
        grid-row: auto;
    }

    html[data-kiv-tool^="calc"]:not([data-kiv-tool="calculator"]) ul[class$="CountCent"] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    body.kiv-modern-legacy-tool .kiv-legacy-intro {
        margin-top: 8px;
        padding: 4px 0 13px 13px;
        border-left-width: 2px;
    }

    body.kiv-modern-legacy-tool .kiv-legacy-intro h1 {
        font-size: 23px;
    }

    body.kiv-modern-legacy-tool .kiv-page-explainer {
        padding: 13px 14px;
        border-left-width: 2px;
    }

    body.kiv-modern-legacy-tool .kiv-page-explainer ul {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    #foot-history .row > .col-md-12:first-child {
        align-items: flex-start;
        flex-direction: column;
    }

    #visit_history {
        flex-wrap: nowrap;
        width: 100%;
        padding-bottom: 3px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    #visit_history > a.btn {
        flex: 0 0 auto;
    }

    html[data-kiv-tool="calculator"] .CalculatorWrap .CalculTable {
        padding: 10px;
    }

    html[data-kiv-tool="calculator"] .CalculatorWrap .ShowArea {
        height: 58px;
        font-size: 24px;
    }

    html[data-kiv-tool="calculator"] .CalculatorWrap .heachackWrap {
        gap: 7px 10px;
        font-size: 11px;
    }

    html[data-kiv-tool="calculator"] .CalculatorWrap .CentChackBox {
        grid-template-columns: 1fr;
        grid-template-areas:
            "keypad"
            "scientific"
            "memory";
    }

    html[data-kiv-tool="calculator"] .CalculatorWrap .CentChackSide {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    html[data-kiv-tool="calculator"] .CalculatorWrap .CentChackRight li input,
    html[data-kiv-tool="calculator"] .CalculatorWrap .CentChackLeft li input,
    html[data-kiv-tool="calculator"] .CalculatorWrap .CentChackSide input {
        height: 42px;
        padding: 4px 2px;
        font-size: 11px;
    }

    html[data-kiv-tool="calculator"] .CalculatorWrap .CentChackRight li input.Rcolor01 {
        font-size: 14px;
    }

    html[data-kiv-tool="subnetmask"] .NetWorkWrap .MainCent .MCentlist {
        align-items: stretch;
        gap: 6px;
        padding: 10px;
    }

    html[data-kiv-tool="subnetmask"] .NetWorkWrap .MainCent .MCentlist label {
        flex: 1 0 100%;
        padding-bottom: 1px;
    }

    html[data-kiv-tool="subnetmask"] .NetWorkWrap .MainCent .MCentlist input.Intxt {
        flex: 1 1 54px;
        width: auto !important;
        min-width: 44px;
    }

    html[data-kiv-tool="subnetmask"] .NetWorkWrap .MainCent .MCentlist input.Intxt.w100,
    html[data-kiv-tool="subnetmask"] .NetWorkWrap .MainCent .MCentlist input.Intxt.w60 {
        flex: 1 1 110px;
        width: auto !important;
    }

    html[data-kiv-tool="subnetmask"] .NetWorkWrap .MainCent .MCentlist input.Inbtn {
        flex: 1 1 auto;
    }

    html[data-kiv-tool="nianlvli"] #form1 > .form-group {
        grid-template-columns: 1fr;
    }

    html[data-kiv-tool="tuya"] .tool {
        gap: 9px 12px;
        padding: 10px;
    }

    html[data-kiv-tool="tuya"] .tool .color,
    html[data-kiv-tool="tuya"] .tool .size {
        flex: 1 0 100%;
    }

    html[data-kiv-tool="tuya"] .panel > div:first-child {
        padding: 0 10px 10px;
    }

    html[data-kiv-tool="tuya"] #canvas {
        height: auto;
        min-height: 0;
    }

    html[data-kiv-tool^="calc"]:not([data-kiv-tool="calculator"]) .form-inline {
        padding: 10px;
    }

    html[data-kiv-tool^="calc"]:not([data-kiv-tool="calculator"]) ul[class$="CountCent"] > li {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 6px 8px;
        padding: 9px 0;
    }

    html[data-kiv-tool^="calc"]:not([data-kiv-tool="calculator"]) ul[class$="CountCent"] > li label {
        grid-column: 1 / -1;
    }

    html[data-kiv-tool^="calc"]:not([data-kiv-tool="calculator"]) ul[class$="CountCent"] .BtnHS {
        min-width: 68px;
    }
}

@media (max-width: 430px) {
    html[data-kiv-tool="calculator"] .CalculatorWrap .CentChackRight li {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 5px;
    }

    html[data-kiv-tool="calculator"] .CalculatorWrap .CentChackLeft li,
    html[data-kiv-tool="calculator"] .CalculatorWrap .CentChackSide {
        gap: 5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #visit_history > a.btn,
    html[data-kiv-tool="calculator"] .CalculatorWrap input {
        transition: none;
    }
}