.cutting-page { background: #f7f8f5; }
.cutting-tool { padding-bottom: 70px; }
.cutting-hero { padding: 72px 0 46px; background: #e9eee6; border-bottom: 1px solid #dfe5dc; }
.cutting-hero h1 { max-width: 720px; margin: 10px 0 14px; color: #17211b; font: 600 clamp(36px, 5vw, 62px)/.98 "Fira Sans Extra Condensed", sans-serif; }
.cutting-kicker { margin: 0; color: #687269; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.cutting-lead { max-width: 680px; margin: 0; color: #536056; font-size: 17px; line-height: 1.55; }
.cutting-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .86fr); gap: 26px; align-items: start; padding-top: 32px; }
.cutting-controls { display: grid; gap: 18px; }
.cutting-panel, .cutting-result { padding: 25px; border: 1px solid #dce3da; border-radius: 7px; background: #fff; box-shadow: 0 10px 28px rgba(23, 33, 27, .05); }
.cutting-result { position: sticky; top: 24px; background: #e2eadf; border-color: #ccd9c9; }
.cutting-panel-heading, .cutting-result-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 21px; }
.cutting-panel-heading > div, .cutting-result-heading > div { display: flex; align-items: center; gap: 11px; }
.cutting-panel h2, .cutting-result h2 { margin: 0; color: #17211b; font-size: 22px; line-height: 1.1; }
.cutting-step { display: grid; place-items: center; width: 31px; height: 31px; border: 1px solid #cbd4c8; border-radius: 50%; color: #657266; font-size: 11px; font-weight: 800; }
.cutting-step-light { border-color: #b9c8b5; }
.cutting-hint { color: #7a867c; font-size: 12px; }
.cutting-grid { display: grid; gap: 12px; }
.cutting-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cutting-grid label, .cut-number-field { color: #58645b; font-size: 12px; font-weight: 600; }
.cutting-grid input, .cut-part-row input, .cutting-import-panel textarea { width: 100%; box-sizing: border-box; margin-top: 7px; padding: 0 12px; border: 1px solid #d4ddd2; border-radius: 4px; outline: 0; background: #fbfcfa; color: #17211b; font: inherit; }
.cutting-grid input, .cut-part-row input { height: 44px; }
.cutting-grid input:focus, .cut-part-row input:focus, .cutting-import-panel textarea:focus { border-color: #8ca779; box-shadow: 0 0 0 3px rgba(140, 167, 121, .16); }
.cutting-toggle { display: flex; align-items: center; gap: 15px; margin-top: 19px; padding-top: 18px; border-top: 1px solid #e5ebe3; cursor: pointer; }
.cutting-toggle span { flex: 1; }
.cutting-toggle strong, .cutting-toggle small { display: block; }
.cutting-toggle strong { color: #273228; font-size: 13px; }
.cutting-toggle small { margin-top: 4px; color: #7a867c; font-size: 11px; font-weight: 400; }
.cutting-toggle input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.cutting-toggle i { width: 42px; height: 24px; padding: 3px; border-radius: 99px; background: #c8d0c6; transition: background .2s ease; }
.cutting-toggle i::after { content: ""; display: block; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.15); transition: transform .2s ease; }
.cutting-toggle input:checked + i { background: #17211b; }
.cutting-toggle input:checked + i::after { transform: translateX(18px); }
.cutting-button { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; border: 0; border-radius: 4px; font: 700 12px "Fira Sans", sans-serif; cursor: pointer; }
.cutting-button-dark { color: #fff; background: #17211b; }
.cutting-button-accent { min-height: 50px; color: #17211b; background: #d8ff3e; font-size: 14px; }
.cutting-button:hover { opacity: .84; }
.cutting-parts-head, .cut-part-row { display: grid; grid-template-columns: 28px minmax(100px, 1fr) minmax(100px, 1fr) 62px 30px; gap: 10px; align-items: center; }
.cutting-parts-head { padding: 0 4px 8px; color: #7a867c; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.cut-part-row { padding: 10px 0; border-top: 1px solid #e5ebe3; }
.cut-part-number { color: #7a867c; font-size: 12px; font-weight: 800; text-align: center; }
.cut-part-row input { margin: 0; height: 42px; }
.cut-number-field { position: relative; }
.cut-number-field input { padding-right: 35px; }
.cut-number-field span { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: #9ca79e; font-size: 10px; }
.cut-remove-part { height: 34px; border: 0; border-radius: 4px; color: #8a978d; background: transparent; font-size: 22px; cursor: pointer; }
.cut-remove-part:hover { color: #a53b32; background: #fff0ed; }
.cutting-import-panel p { margin: -4px 0 12px; color: #667268; font-size: 12px; line-height: 1.5; }
.cutting-import-panel textarea { min-height: 102px; padding: 12px; resize: vertical; line-height: 1.5; }
.cutting-import-actions { display: flex; align-items: center; gap: 12px; margin-top: 11px; }
#cutImportStatus { color: #6e7a70; font-size: 11px; }
.cutting-result-heading { margin-bottom: 20px; }
.cutting-result-actions { display: flex; align-items: center; gap: 8px; }
.cutting-icon-button, .cutting-sheet-nav button { border: 1px solid #c4d1c0; border-radius: 50%; color: #17211b; background: transparent; cursor: pointer; }
.cutting-icon-button { width: 38px; height: 38px; font-size: 18px; }
.cutting-summary { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 18px; border: 1px solid #c8d5c5; border-radius: 5px; background: rgba(255,255,255,.46); }
.cutting-summary div { min-width: 0; padding: 13px 12px; }
.cutting-summary div + div { border-left: 1px solid #c8d5c5; }
.cutting-summary span, .cutting-summary strong { display: block; }
.cutting-summary span { margin-bottom: 5px; color: #6e7a70; font-size: 10px; text-transform: uppercase; }
.cutting-summary strong { color: #17211b; font-size: 19px; }
.cutting-empty { min-height: 295px; display: grid; place-items: center; align-content: center; text-align: center; }
.cutting-empty h3 { margin: 18px 0 6px; color: #17211b; font-size: 17px; }
.cutting-empty p { max-width: 255px; margin: 0; color: #667268; font-size: 12px; line-height: 1.5; }
.cutting-empty-mark { width: 132px; height: 90px; padding: 8px; display: flex; align-items: flex-end; gap: 7px; border: 1px solid #becdbb; background: rgba(255,255,255,.38); }
.cutting-empty-mark i { display: block; flex: 1; border: 1px solid #17211b; background: #d8ff3e; }
.cutting-empty-mark i:nth-child(1) { height: 50%; }.cutting-empty-mark i:nth-child(2) { height: 82%; background: #78dce8; }.cutting-empty-mark i:nth-child(3) { height: 65%; background: #ffb86b; }
.cutting-result-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.cutting-result-toolbar p { margin: 0; color: #536056; font-size: 12px; }
.cutting-sheet-nav { display: flex; align-items: center; gap: 8px; color: #536056; font-size: 12px; }
.cutting-sheet-nav button { width: 30px; height: 30px; font-size: 16px; }.cutting-sheet-nav button:disabled { opacity: .35; cursor: default; }
.cutting-canvas-wrap { padding: 9px; border: 1px solid #bdcdb9; background: #fff; overflow: hidden; }
#cutCanvas { display: block; width: 100%; }
.cutting-unplaced { margin-top: 10px; padding: 10px 12px; border-left: 3px solid #b46b54; color: #70483d; background: #fff4ef; font-size: 12px; line-height: 1.45; }
.cutting-note { margin: 17px 0 19px; color: #667268; font-size: 11px; line-height: 1.5; }
.cutting-privacy { margin: -8px 0 16px; color: #667268; font-size: 11px; line-height: 1.5; }
.cutting-seo { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr); gap: 36px; margin-top: 44px; padding-top: 38px; border-top: 1px solid #dce3da; }
.cutting-seo h2 { margin: 9px 0 15px; color: #17211b; font-size: 28px; line-height: 1.12; }
.cutting-seo p { margin: 0 0 14px; color: #536056; font-size: 15px; line-height: 1.65; }
.cutting-seo-copy .cutting-kicker { margin-top: 0; }
.cutting-faq { padding: 23px; border: 1px solid #dce3da; border-radius: 7px; background: #fff; }
.cutting-faq h2 { margin-top: 0; font-size: 22px; }
.cutting-faq details { border-top: 1px solid #e5ebe3; }
.cutting-faq summary { padding: 15px 24px 15px 0; color: #273228; font-size: 14px; font-weight: 700; line-height: 1.35; cursor: pointer; }
.cutting-faq details p { margin: 0 0 15px; color: #667268; font-size: 13px; line-height: 1.5; }
@media (max-width: 960px) { .cutting-workspace { grid-template-columns: 1fr; } .cutting-result { position: static; } }
@media (max-width: 640px) { .cutting-hero { padding: 44px 0 32px; } .cutting-lead { font-size: 15px; } .cutting-workspace { padding-top: 20px; } .cutting-panel, .cutting-result { min-width: 0; padding: 18px; } .cutting-grid-4 { grid-template-columns: repeat(2, 1fr); } .cutting-parts-head, .cut-part-row { grid-template-columns: 18px minmax(0, 1fr) minmax(0, 1fr) 48px 40px; gap: 4px; } .cutting-import-actions { flex-wrap: wrap; } #cutImportStatus { flex: 1 1 100%; min-width: 0; overflow-wrap: anywhere; } .cut-remove-part { width: 40px; height: 40px; padding: 0; justify-self: end; } .cutting-hint { display: none; } .cutting-summary strong { font-size: 16px; } .cutting-seo { grid-template-columns: 1fr; gap: 20px; margin-top: 30px; padding-top: 28px; } .cutting-seo h2 { font-size: 24px; } .cutting-faq { padding: 18px; } }
@media print { header, footer, .cutting-hero, .cutting-controls, .cutting-result-heading, .cutting-result-toolbar, .cutting-summary, .cutting-note, #cutCalculate, #cutUnplaced { display: none !important; } .cutting-workspace { display: block; padding: 0; } .cutting-result { border: 0; box-shadow: none; background: #fff; } #cutResultContent { display: block !important; } .cutting-canvas-wrap { border: 0; } }