:root{
  --bg:#f8fafc;--panel:#ffffff;--panel2:#e2e8f0;--text:#0f172a;--muted:#475569;--line:rgba(15,23,42,.12);
  --accent:#38bdf8;--accent-2:#0ea5e9;--primary-text:#082f49;--good:#166534;--danger:#ef4444;--warn:#f59e0b;
  --shadow:0 18px 40px rgba(15,23,42,.10);--body-grad-1:radial-gradient(circle at top right,rgba(56,189,248,.14),transparent 28%);
  --body-grad-2:radial-gradient(circle at top left,rgba(34,197,94,.10),transparent 22%);--body-grad-3:linear-gradient(180deg,#f8fafc 0%,#e2e8f0 100%);
  --panel-bg:linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,250,252,.98));--surface:rgba(15,23,42,.04);--surface-hover:rgba(15,23,42,.07);
  --dropzone-bg:rgba(56,189,248,.08);--dropzone-bg-hover:rgba(56,189,248,.14);--dropzone-border:rgba(14,165,233,.45);--dropzone-border-hover:rgba(14,165,233,.85)
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--text);background:var(--bg)}
body{background:var(--body-grad-1),var(--body-grad-2),var(--body-grad-3)}
header{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:17px 22px;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(10px)}
h1{margin:0;font-size:21px}header p{margin:4px 0 0;color:var(--muted);font-size:13px}.top-actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
button,.button{appearance:none;border:1px solid var(--line);border-radius:10px;padding:10px 13px;background:rgba(255,255,255,.9);color:var(--text);font-weight:700;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:7px;font:inherit;transition:160ms ease}.button.small{font-size:13px;padding:9px 11px}button:hover,.button:hover{background:var(--surface-hover)}.primary{background:linear-gradient(180deg,rgba(56,189,248,.95),rgba(14,165,233,.9));color:var(--primary-text);border-color:transparent}.primary:hover{background:linear-gradient(180deg,rgba(56,189,248,1),rgba(14,165,233,1))}button:disabled{opacity:.45;cursor:not-allowed}input[type=file]{display:none}
main{display:grid;grid-template-columns:420px minmax(0,1fr);gap:20px;padding:20px;align-items:start}aside{position:sticky;top:92px;max-height:calc(100vh - 112px);overflow:auto;background:var(--panel-bg);border:1px solid var(--line);border-radius:18px;padding:15px;box-shadow:var(--shadow)}
.section{border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:13px;margin-bottom:12px}.section h2{margin:0 0 11px;font-size:15px}.section.upload{min-height:94px;border:2px dashed var(--dropzone-border);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;cursor:pointer;background:var(--dropzone-bg)}.section.upload:hover{background:var(--dropzone-bg-hover);border-color:var(--dropzone-border-hover)}.section.upload strong{font-size:14px}.section.upload span{font-size:12px;color:var(--muted)}
label{display:block;font-size:12px;color:var(--muted);font-weight:700;margin:0 0 9px}input,select{width:100%;margin-top:5px;border:1px solid var(--line);border-radius:9px;background:rgba(255,255,255,.9);color:var(--text);padding:9px 10px;min-height:39px;font:inherit}input:focus,select:focus{outline:2px solid rgba(56,189,248,.22);border-color:rgba(14,165,233,.65)}.check{display:flex;align-items:flex-start;gap:8px;color:var(--text);font-weight:600}.check input{width:auto;min-height:0;margin:2px 0 0}.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}.three{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.hint{font-size:12px;line-height:1.45;color:var(--muted)}.scaled-box{border:1px solid rgba(14,165,233,.24);background:rgba(56,189,248,.07);border-radius:11px;padding:10px;margin:4px 0 10px}.bleed-option{margin-top:3px}.bleed-hint{margin:-3px 0 12px 25px}.actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:0}
.preset-section{border-color:rgba(14,165,233,.25);background:rgba(56,189,248,.06)}.preset-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.preset-actions button{width:100%}.page-shift-box{margin-top:12px;padding:10px;border:1px solid var(--line);border-radius:11px;background:rgba(255,255,255,.62)}.page-shift-box>strong{display:block;font-size:12px;margin-bottom:8px;color:var(--text)}
.workspace{min-width:0;background:var(--panel-bg);border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:var(--shadow);min-height:calc(100vh - 122px)}.status{border:1px solid rgba(14,165,233,.32);background:rgba(56,189,248,.09);color:#0c4a6e;border-radius:12px;padding:11px 13px;font-size:13px;line-height:1.45}.status.error{border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.08);color:#991b1b}.status.busy{border-color:rgba(245,158,11,.38);background:rgba(245,158,11,.10);color:#92400e}.stats{display:grid;grid-template-columns:repeat(4,minmax(130px,1fr));gap:10px;margin:12px 0}.stats>div{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:11px}.stats span{display:block;font-size:11px;color:var(--muted);font-weight:800}.stats b{display:block;margin-top:4px;font-size:17px}.warnings{display:none;border:1px solid rgba(245,158,11,.38);background:rgba(245,158,11,.10);color:#92400e;border-radius:12px;padding:10px 12px;font-size:12px;line-height:1.5;margin-bottom:12px}.warnings.show{display:block}
.badge{display:inline-flex;white-space:nowrap;border-radius:999px;border:1px solid #c9d7e5;background:#f7fbff;padding:6px 9px;font-size:11px;color:#48647d;font-weight:800}
#dropOverlay{display:none;position:fixed;inset:12px;z-index:9999;pointer-events:none;border:3px dashed var(--dropzone-border-hover);border-radius:22px;background:rgba(224,242,254,.94);align-items:center;justify-content:center;text-align:center;font-weight:900;font-size:clamp(20px,3vw,34px);color:#082f49;backdrop-filter:blur(3px)}body.page-drag #dropOverlay{display:flex}
.cut-list-panel{border:1px solid var(--line);border-radius:14px;background:var(--panel-bg);padding:14px;margin:12px 0 18px;box-shadow:var(--shadow)}.cut-list-panel[hidden]{display:none}.cut-list-heading{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.cut-list-heading h2{margin:0 0 4px;font-size:17px}.cut-list-heading p{margin:0;color:var(--muted);font-size:12px}.cut-summary{margin:12px 0;padding:10px 12px;border:1px solid rgba(14,165,233,.25);background:var(--dropzone-bg);border-radius:10px;font-size:12px;line-height:1.55}.cut-plan-warning{margin-top:8px;color:#991b1b;font-weight:800}.guillotine-diagrams{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0}.g-diagram{border:1px solid var(--line);border-radius:12px;padding:10px;background:var(--surface)}.g-diagram>strong{font-size:12px}.g-diagram>p{font-size:11px;color:var(--muted);margin:7px 0 0}.machine{height:150px;position:relative;margin-top:8px;border:1px solid var(--line);border-radius:8px;background:var(--panel2);overflow:hidden}.blade{position:absolute;left:8px;right:8px;top:10px;border-bottom:4px solid #b42318;text-align:center;font-size:9px;font-weight:800;padding-bottom:3px}.paper-shape{position:absolute;width:58%;height:74px;left:21%;bottom:18px;border:2px solid #0284c7;background:var(--panel);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:900}.paper-shape.rotated{width:42%;height:90px;left:29%}.feed-arrow{position:absolute;left:calc(50% - 10px);top:34px;font-size:37px;line-height:1;font-weight:900}.cut-table-wrap{margin-top:14px}.cut-table-wrap h3{font-size:13px;margin:0 0 4px}.cut-table-wrap p{font-size:11px;color:var(--muted);margin:0 0 8px;line-height:1.45}.cut-table{width:100%;border-collapse:collapse;font-size:11px}.cut-table th,.cut-table td{border:1px solid var(--line);padding:7px 8px;text-align:left;vertical-align:top}.cut-table th{background:var(--panel2);font-size:10px}.cut-table td:nth-child(1){width:55px}.cut-table td:nth-child(3){white-space:nowrap;width:120px}.cut-invalid{background:rgba(239,68,68,.08);color:#7f1d1d}.cut-reason{margin-top:4px;font-size:10px;font-weight:700}
.preview-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:16px 0 10px}.preview-heading h2{margin:0;font-size:17px}.preview-zoom{display:inline-flex;align-items:center;gap:6px;margin:0;color:#48647d;font-size:11px;font-weight:800}.preview-zoom select{width:auto;min-height:30px;margin:0;padding:4px 7px;border-radius:8px;font-size:11px;background:#fff}
.main-preview-card{border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden;margin-bottom:14px}.main-preview-card>header{position:static;padding:10px 12px;background:#fff;border-bottom:1px solid var(--line);font-size:13px;font-weight:800}.main-preview-wrap{display:block;position:relative;min-height:520px;max-height:72vh;overflow:auto;padding:12px;background:#dfe4e9;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}.main-preview-wrap.panning{cursor:grabbing}.main-preview-wrap .preview-loading{display:none!important}.preview-sheet-shell{position:relative;margin:0 auto;background:#fff;box-shadow:0 10px 30px rgba(17,31,45,.18);overflow:hidden}.preview-sheet-shell[hidden]{display:none}.preview-tile-stage{position:absolute;left:0;top:0;background:#fff;overflow:hidden;min-width:1px;min-height:1px;will-change:transform}.preview-tile{position:absolute;display:block;margin:0;padding:0;border:0;max-width:none!important;object-fit:fill;background:#fff;image-rendering:auto;pointer-events:none;user-select:none;-webkit-user-select:none;-webkit-user-drag:none}
.page-preview-heading{display:flex;justify-content:space-between;gap:12px;align-items:end;margin:16px 0 8px}.page-preview-heading h3{margin:0;font-size:14px}.preview-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;align-items:start}.preview-card{cursor:pointer;transition:160ms ease;border:1px solid var(--line);border-radius:14px;background:#f5f7f9;overflow:hidden}.preview-card:hover{transform:translateY(-1px);border-color:rgba(14,165,233,.45)}.preview-card.selected{border-color:var(--accent-2);box-shadow:0 0 0 2px rgba(14,165,233,.12)}.preview-card header{position:static;padding:9px 11px;background:#fff;border-bottom:1px solid var(--line);font-size:12px;font-weight:800}.preview-card .thumb-wrap{height:220px;display:flex;align-items:center;justify-content:center;padding:8px;overflow:hidden;background:#dfe4e9}.preview-card .preview-thumb{display:block;max-width:100%;max-height:100%;width:auto;height:auto;background:#fff;box-shadow:0 5px 14px rgba(17,31,45,.14)}.preview-card .preview-loading,.empty-preview{display:flex;align-items:center;justify-content:center;min-height:0;height:100%;width:100%;padding:10px;text-align:center;color:var(--muted);font-weight:700;font-size:11px}.empty-preview{min-height:220px}.preview-card .preview-note{min-height:42px;padding:8px 11px;background:#fff;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}
@media(max-width:1000px){main{grid-template-columns:1fr}aside{position:static;max-height:none}.stats{grid-template-columns:1fr 1fr}.preview-gallery{grid-template-columns:1fr}}
@media(max-width:760px){.guillotine-diagrams{grid-template-columns:1fr}.cut-table{font-size:10px}.cut-table th,.cut-table td{padding:6px}.main-preview-wrap{min-height:360px;max-height:65vh;padding:7px}.preview-gallery{grid-template-columns:repeat(auto-fit,minmax(145px,1fr))}.preview-card .thumb-wrap{height:180px}.preview-heading{align-items:flex-start;flex-direction:column}.preview-zoom{width:100%;justify-content:flex-start}}
@media(max-width:560px){header{align-items:flex-start;flex-direction:column}.top-actions{justify-content:flex-start}main{padding:10px}.two,.three,.preset-actions{grid-template-columns:1fr}.stats{grid-template-columns:1fr}.workspace,aside{border-radius:12px}}