:root{--ink:#111317;--muted:#6c717b;--line:#dfe2e7;--paper:#f3f4f6;--white:#fff;--red:#e1262f;--red-dark:#b5121b;--soft-red:#fff0f1;--green:#1c8b5b;--radius:18px;--shadow:0 18px 45px rgba(17,19,23,.08)}
*{box-sizing:border-box}html{font-family:Inter,"Noto Sans Thai",system-ui,-apple-system,sans-serif;background:var(--paper);color:var(--ink)}body{margin:0;min-height:100vh}.topbar{height:72px;padding:0 max(24px,calc((100vw - 1280px)/2));display:flex;align-items:center;justify-content:space-between;background:var(--ink);color:#fff}.brand{display:flex;align-items:center;gap:12px}.brand-mark{display:grid;place-items:center;width:38px;height:38px;background:var(--red);font-weight:900;font-size:13px;letter-spacing:-.5px;clip-path:polygon(0 0,100% 0,100% 75%,75% 100%,0 100%)}.brand div{display:flex;flex-direction:column;line-height:1}.brand strong{font-size:20px;letter-spacing:-.6px}.brand small{margin-top:5px;font-size:10px;color:#aeb2bb;letter-spacing:1.6px}.status{font-size:13px;color:#c3c6cd;display:flex;gap:8px;align-items:center}.status span{width:8px;height:8px;border-radius:50%;background:#4dd497;box-shadow:0 0 0 4px rgba(77,212,151,.13)}main{max-width:1280px;margin:auto;padding:52px 24px 80px}.intro{display:grid;grid-template-columns:1.3fr .7fr;align-items:end;gap:48px;margin-bottom:34px}.eyebrow{font-size:12px;letter-spacing:2.2px;font-weight:800;color:var(--red);margin:0 0 13px}.intro h1{font-size:clamp(38px,5vw,70px);letter-spacing:-3.5px;line-height:.98;margin:0;font-weight:800}.intro h1 em{font-style:normal;color:var(--red)}.intro-copy{font-size:16px;line-height:1.75;color:var(--muted);margin:0 0 4px;max-width:500px}.workspace{display:grid;grid-template-columns:360px 1fr;gap:20px}.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.settings{padding:25px;height:max-content}.section-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:20px}.section-head>div:first-child{display:flex;align-items:center;gap:10px}.section-head span{font-size:11px;color:var(--red);font-weight:900;border:1px solid #ffbdc1;padding:5px 6px;border-radius:6px}.section-head h2{font-size:18px;margin:0;letter-spacing:-.3px}label{display:block;font-size:13px;font-weight:700;color:#555b65;margin-bottom:16px}input,textarea{width:100%;border:1px solid #d7dae0;border-radius:9px;padding:11px 12px;font:inherit;font-size:15px;color:var(--ink);background:#fff;outline:none;transition:.2s}input:focus,textarea:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(225,38,47,.09)}.two-cols{display:grid;grid-template-columns:1fr 1fr;gap:10px}.hint{background:#f5f6f8;border-left:3px solid var(--ink);padding:13px 14px;margin-top:5px}.hint strong{font-size:12px}.hint p{font-size:12px;line-height:1.55;color:var(--muted);margin:5px 0 0}.parts{padding:25px;min-width:0}.table-head{margin-bottom:8px}.head-actions{display:flex;gap:8px}.ghost{border:1px solid var(--line);background:#fff;color:#343840;border-radius:8px;padding:8px 11px;font:inherit;font-size:12px;font-weight:700;cursor:pointer}.ghost:hover{border-color:#aeb3bc}.ghost.danger{color:var(--red)}.table-wrap{max-height:450px;overflow:auto}table{width:100%;border-collapse:collapse}th{text-align:left;color:#80858e;font-size:11px;letter-spacing:.5px;text-transform:uppercase;padding:10px 6px;border-bottom:1px solid var(--line)}td{padding:6px}td:first-child,th:first-child{padding-left:0}td:nth-child(2),th:nth-child(2){width:180px}td:nth-child(3),th:nth-child(3){width:100px}td:last-child,th:last-child{width:40px}td input{padding:9px 10px}.remove{border:0;background:transparent;color:#a6abb4;font-size:23px;cursor:pointer}.remove:hover{color:var(--red)}.add-row{width:100%;margin-top:8px;border:1px dashed #c8cbd1;background:#fafafa;color:#555b65;padding:10px;border-radius:9px;font:inherit;font-size:13px;font-weight:700;cursor:pointer}.add-row:hover{border-color:var(--red);color:var(--red)}.paste-box{margin-top:10px}.text-button{border:0;background:transparent;padding:5px 0;color:#555b65;text-decoration:underline;text-underline-offset:3px;font:inherit;font-size:12px;cursor:pointer}textarea{min-height:110px;margin-top:8px;resize:vertical;font-size:13px}.paste-actions{display:flex;align-items:center;justify-content:space-between;margin-top:7px;color:var(--muted)}.small-primary{border:0;background:var(--ink);color:#fff;padding:8px 12px;border-radius:7px;font:inherit;font-size:12px;font-weight:700;cursor:pointer}.optimize{width:100%;display:flex;justify-content:space-between;align-items:center;margin:20px 0 48px;border:0;border-radius:13px;padding:19px 24px;background:var(--red);color:#fff;font:inherit;cursor:pointer;box-shadow:0 13px 30px rgba(225,38,47,.23);transition:.2s}.optimize:hover{background:var(--red-dark);transform:translateY(-1px)}.optimize span{font-size:17px;font-weight:800}.optimize b{font-size:12px;letter-spacing:1.4px}.optimize:disabled{opacity:.65;cursor:wait}.result-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:20px}.result-header h2{font-size:30px;margin:0 0 4px;letter-spacing:-1px}.result-header>div>p:last-child{color:var(--muted);margin:0;font-size:13px}.result-actions{display:flex;gap:8px}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.metric{position:relative;background:#fff;border:1px solid var(--line);padding:20px;border-radius:13px}.metric small{display:block;color:var(--muted);font-size:12px;margin-bottom:15px}.metric strong{font-size:34px;letter-spacing:-1.5px}.metric span{font-size:13px;margin-left:5px;color:var(--muted)}.metric.primary{background:var(--ink);color:#fff;border-color:var(--ink)}.metric.primary small,.metric.primary span{color:#b9bdc5}.metric.primary:after{content:"";position:absolute;top:0;right:0;border-top:28px solid var(--red);border-left:28px solid transparent}.summary-line{display:flex;gap:28px;padding:15px 18px;background:#e7e9ed;border-radius:10px;margin:12px 0 22px}.summary-line div{display:flex;gap:8px;font-size:12px;color:var(--muted)}.summary-line b{color:var(--ink)}.plans{display:grid;gap:10px}.plan-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px}.plan-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.plan-top strong{font-size:14px}.plan-top span{font-size:12px;color:var(--muted)}.bar{display:flex;height:44px;background:#eceef1;border-radius:7px;overflow:hidden;position:relative}.cut{position:relative;display:grid;place-items:center;min-width:4px;color:#fff;border-right:1px solid rgba(255,255,255,.45);font-size:11px;font-weight:800;overflow:hidden;white-space:nowrap}.cut:nth-child(5n+1){background:#252930}.cut:nth-child(5n+2){background:#4a505b}.cut:nth-child(5n+3){background:#717783}.cut:nth-child(5n+4){background:#9da2ab;color:#17191d}.cut:nth-child(5n){background:#c3c6cc;color:#17191d}.scrap{display:grid;place-items:center;background:repeating-linear-gradient(135deg,#ffe7e8,#ffe7e8 5px,#ffd5d8 5px,#ffd5d8 10px);color:var(--red-dark);font-size:10px;font-weight:800;min-width:2px}.cut-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.chip{font-size:11px;background:#f1f2f4;border-radius:6px;padding:5px 7px;color:#4e535d}.chip b{color:var(--ink)}.plan-card.near-empty{border-color:#f3b4b8}.notice{background:var(--soft-red);color:var(--red-dark);border:1px solid #ffc9cc;padding:12px 14px;border-radius:10px;font-size:13px;margin-bottom:15px}
.source-badge{display:flex;align-items:center;gap:10px;background:#f5f6f8;border:1px solid #e3e5e9;border-radius:9px;padding:10px 12px;margin:10px 0 8px}.source-badge>span{width:8px;height:8px;border-radius:50%;background:var(--green);flex:0 0 auto}.source-badge div{display:flex;flex-direction:column;gap:2px}.source-badge strong{font-size:12px}.source-badge small{font-size:11px;color:var(--muted)}.pdf-upload{display:flex;align-items:center;gap:11px;border:1px dashed #b9bec7;border-radius:10px;padding:11px 12px;margin:10px 0 12px;background:#fafbfc;cursor:pointer;transition:.2s}.pdf-upload:hover,.pdf-upload.dragging{border-color:var(--red);background:var(--soft-red)}.pdf-upload>span:nth-child(2){display:flex;flex-direction:column;gap:2px;min-width:0}.pdf-upload strong{font-size:13px;color:var(--ink)}.pdf-upload small{font-size:11px;color:var(--muted);font-weight:400;white-space:normal}.pdf-upload>b{margin-left:auto;font-size:11px;color:var(--red);white-space:nowrap}.upload-icon{display:grid!important;place-items:center;width:37px;height:37px;flex:0 0 37px;border-radius:7px;background:var(--red);color:#fff;font-size:10px;font-weight:900}.upload-progress{display:flex;align-items:center;gap:8px;background:#fff7e8;border:1px solid #f2dab0;border-radius:8px;padding:8px 10px;margin-bottom:10px}.upload-progress span{width:13px;height:13px;border:2px solid #e0bd7c;border-top-color:#8d5a00;border-radius:50%;animation:spin .75s linear infinite}.upload-progress p{margin:0;font-size:12px;color:#78521a}@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:900px){main{padding-top:35px}.intro{grid-template-columns:1fr;gap:18px}.intro h1{letter-spacing:-2px}.workspace{grid-template-columns:1fr}.settings{width:100%}.metrics{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.topbar{padding:0 16px}.status{display:none}main{padding:30px 14px 60px}.intro h1{font-size:42px}.card{border-radius:13px}.settings,.parts{padding:18px}.two-cols{grid-template-columns:1fr 1fr}.table-head{align-items:flex-start;gap:12px}.table-head,.result-header{flex-direction:column;align-items:stretch}.head-actions,.result-actions{margin-top:10px}.table-wrap{overflow-x:auto}table{min-width:560px}.optimize{margin-bottom:38px}.metrics{grid-template-columns:1fr 1fr}.metric{padding:16px}.metric strong{font-size:28px}.summary-line{display:grid;gap:8px}.bar{height:38px}.cut{font-size:9px}.result-actions .ghost{flex:1}}
@media print{.topbar,.intro,.workspace,.optimize,.result-actions{display:none!important}body,html{background:#fff}main{padding:0;max-width:none}.results{display:block!important}.plan-card{break-inside:avoid}.metrics{grid-template-columns:repeat(4,1fr)}.plans{gap:7px}.bar{print-color-adjust:exact;-webkit-print-color-adjust:exact}}
