:root{--blue:#2563eb;--navy:#172554;--ink:#172033;--muted:#64748b;--line:#e7edf5;--bg:#f7faff}*{box-sizing:border-box}body{font-family:Inter,system-ui,sans-serif;color:var(--ink);background:#fff}.navbar{min-height:70px}.navbar-brand{font-size:1.25rem;letter-spacing:-.5px}.brand-mark{display:inline-grid;place-items:center;background:var(--blue);color:#fff;width:30px;height:30px;border-radius:9px;margin-right:5px}.hero{background:radial-gradient(circle at 85% 20%,#dce9ff 0,transparent 30%),linear-gradient(120deg,#f8fbff,#eef5ff);overflow:hidden}.eyebrow{font-size:.72rem;letter-spacing:1.5px;font-weight:800;color:var(--blue)}.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#22c55e;margin-right:7px}.hero h1{font-size:clamp(2.5rem,5vw,4.3rem);font-weight:800;letter-spacing:-3px;line-height:1.08;color:#14213d}.hero h1 span{color:var(--blue)}.hero .lead{max-width:610px;font-size:1.08rem;line-height:1.7}.btn-primary{background:var(--blue);border-color:var(--blue);border-radius:10px;font-weight:600}.trust-note{font-size:.8rem;color:#64748b}.hero-art{height:310px;position:relative;display:grid;place-items:center}.art-sheet{width:220px;height:270px;background:white;border-radius:17px;box-shadow:0 25px 65px #1e40af25;padding:28px;transform:rotate(5deg);border:1px solid #e7eefb}.art-icon{width:55px;height:65px;background:#fee2e2;color:#dc2626;font-weight:800;display:grid;place-items:center;border-radius:9px;margin-bottom:25px}.art-line{height:8px;background:#e8eef7;border-radius:9px;margin:12px 0;width:100%}.art-chart{display:flex;align-items:end;gap:8px;height:55px;margin-top:22px}.art-chart i{display:block;flex:1;background:#bfdbfe;border-radius:5px 5px 0 0;height:60%}.art-chart i:nth-child(2){height:85%}.art-chart i:nth-child(3){height:48%}.art-chart i:nth-child(4){height:100%;background:#60a5fa}.art-chart i:nth-child(5){height:70%}.floating-chip{position:absolute;background:#fff;padding:12px 16px;border-radius:12px;box-shadow:0 12px 35px #1e3a8a18;font-size:.82rem;font-weight:700}.chip-one{top:38px;right:4%}.chip-two{bottom:35px;left:0}.section-heading h2{font-weight:800;letter-spacing:-1px;margin:9px 0}.section-heading p{color:var(--muted)}.tool-card{border:1px solid var(--line);background:#fff;border-radius:16px;padding:20px;min-height:205px;transition:.2s;display:flex;flex-direction:column;box-shadow:0 4px 15px #0f172a05}.tool-card:hover{border-color:#a9c5ff;transform:translateY(-3px);box-shadow:0 14px 35px #1e40af12}.tool-icon{width:43px;height:43px;border-radius:12px;background:#eff6ff;color:var(--blue);display:grid;place-items:center;font-size:1.5rem;margin-bottom:15px}.tool-title{font-weight:750;font-size:.97rem}.tool-desc{font-size:.79rem;color:var(--muted);line-height:1.5;margin-top:6px;flex:1}.tool-meta{font-size:.7rem;color:#2563eb;font-weight:700;margin-top:13px}.tool-meta span{float:right}.how-section{background:#f7faff}.step{background:white;border:1px solid var(--line);border-radius:15px;padding:23px;height:100%}.step b{color:var(--blue);font-size:1.6rem}.step h5{font-weight:750;margin-top:15px}.step p{color:var(--muted);font-size:.9rem;margin:0}.privacy-panel{display:flex;gap:18px;align-items:flex-start;padding:25px;border:1px solid #dbeafe;background:#f8fbff;border-radius:17px}.privacy-icon{font-size:1.8rem}.privacy-panel h4{font-weight:750}.privacy-panel p{color:var(--muted);font-size:.88rem;line-height:1.6}.footer{background:#101d3a;color:#fff}.modal-content{border:0;border-radius:18px}.modal-header{border-bottom:1px solid var(--line);padding:20px 24px}.modal-body{padding:24px}.upload-zone{border:2px dashed #b9c9e2;border-radius:14px;background:#f8fbff;padding:28px;text-align:center;cursor:pointer}.upload-zone:hover{border-color:var(--blue);background:#f1f6ff}.upload-zone .upload-symbol{font-size:2rem;color:var(--blue)}.upload-zone p{color:var(--muted);font-size:.85rem;margin:7px 0}.file-input{display:none}.tool-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.status{font-size:.85rem;color:var(--muted);margin-top:12px}.preview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:12px;margin-top:15px}.page-thumb{border:1px solid var(--line);border-radius:10px;padding:7px;text-align:center;font-size:.75rem}.page-thumb canvas{width:100%;height:auto;border-radius:5px}.form-control,.form-select{border-radius:9px}.btn{border-radius:9px}.result-link{display:inline-block;margin-top:14px}.small-help{font-size:.78rem;color:var(--muted)}@media(max-width:575px){.hero .container{padding-top:3rem!important;padding-bottom:2rem!important}.hero-art{height:245px}.art-sheet{transform:scale(.82) rotate(5deg)}.chip-one{right:0}.chip-two{left:0}.tool-card{padding:14px;min-height:195px}.tool-title{font-size:.86rem}.tool-desc{font-size:.74rem}.modal-body{padding:17px}.privacy-panel{padding:18px}}
.page-sort-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(115px,1fr));gap:12px;margin-top:15px}
.sort-page{border:1px solid var(--line);border-radius:10px;padding:8px;background:#fff;cursor:grab;text-align:center;font-size:.75rem}
.sort-page.dragging{opacity:.4;border:2px dashed var(--blue)}
.sort-page canvas{width:100%;height:auto;display:block;border:1px solid #eef2f7;margin-bottom:6px}
.editor-preview{max-width:100%;overflow:auto;border:1px solid var(--line);border-radius:10px;background:#f1f5f9;padding:10px;margin-top:12px}
.editor-preview canvas{display:block;max-width:100%;height:auto;margin:auto;background:white;cursor:crosshair;box-shadow:0 2px 10px #0f172a18}
.a4-sheet{width:100%;max-width:520px;aspect-ratio:210/297;border:1px solid #cbd5e1;background:white;padding:18px;display:grid;gap:8px;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr}
.a4-sheet img{width:100%;height:100%;object-fit:cover;border:1px solid #ddd}