:root { color-scheme: dark; --ink:#f5f5f7; --muted:#a1a1ae; --surface:#1f2028; --surface2:#282934; --line:#343541; --accent:#ff7865; --bg:#141518; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; min-width:930px; min-height:100vh; color:var(--ink); background:var(--bg); font-family:"Yu Gothic UI","Meiryo",system-ui,sans-serif; }
button,input,select { font:inherit; }
button { color:inherit; cursor:pointer; }
.app-shell { min-height:100vh; background:radial-gradient(900px 500px at 72% 28%,#1a1c25 0%,var(--bg) 65%); }
.window-bar { height:44px; display:flex; align-items:center; gap:28px; padding:0 13px; background:#1c1c1f; border-top:1px solid #35363d; border-bottom:1px solid #26272d; }
.brand { width:106px; color:#c5c5c9; font-size:13px; white-space:nowrap; }.brand-mark{display:inline-grid;place-items:center;width:17px;height:17px;margin-right:4px;background:#f36758;color:white;font-size:11px;font-weight:900;border-radius:3px;transform:skew(-7deg)}
.app-status{display:flex;align-items:center;gap:7px;color:#9899a4;font-size:11px}.app-status span{width:7px;height:7px;border-radius:50%;background:#69c895}
.workspace { display:grid; grid-template-columns:190px 1fr; min-height:calc(100vh - 44px); }.sidebar { position:relative; padding:10px 7px; background:#151618; border-right:1px solid #292a2e; }.nav-section { margin-top:21px; }.nav-item { position:relative; width:100%; display:flex; align-items:center; gap:12px; padding:10px 13px; border:0; border-radius:7px; background:transparent; color:#aeb0b8; font-size:13px; text-align:left; }.nav-item span { width:14px; color:#c8c9cf; text-align:center; font-size:18px; line-height:14px; }.nav-item:hover { background:#24242a; color:#fff; }.nav-item.selected { background:#2b2c35; color:#ff9a8c; font-weight:700; }.nav-item.selected:after { content:""; position:absolute; right:0; top:11px; bottom:11px; width:4px; background:#ff7462; border-radius:6px 0 0 6px; }.nav-item.active { color:#e5e5e8; font-weight:600; }
.storage { position:absolute; bottom:21px; left:17px; right:17px; display:flex; gap:8px; color:#b6b6bd; font-size:10px; }.storage small{display:block;margin-top:3px;color:#73747e}.storage-dot{display:block;width:8px;height:8px;margin-top:3px;border-radius:50%;background:#73c998;box-shadow:0 0 0 3px #23372c}
.main-content { min-width:0; }.tab-strip { height:34px; padding-left:12px; background:#252630; border-bottom:1px solid #30313a; }.new-tab { height:33px; width:33px; border:0; border-left:1px solid #343540; background:transparent; color:#a8a8b2; font-size:23px; font-weight:200; }.new-tab:hover{background:#343541;color:white}
.tools-page { padding:25px 18px 50px; max-width:1800px; margin:auto; }.page-heading{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:28px}.eyebrow{margin:0 0 6px;color:#8f91a0;font-size:10px;font-weight:800;letter-spacing:.13em}.page-heading h1{margin:0;font-size:25px;letter-spacing:-.05em}.subhead{margin:8px 0 0;color:#91929d;font-size:13px}.heading-actions{display:flex;align-items:center;gap:14px}.search{height:34px;display:flex;align-items:center;gap:7px;padding:0 11px;border:1px solid #3a3b45;border-radius:6px;background:#1e1f26;color:#92939f}.search input{width:142px;border:0;outline:0;background:transparent;color:#eee;font-size:12px}.search input::placeholder{color:#7e808c}.sort-label{display:flex;align-items:center;gap:8px;color:#a7a8b0;font-size:12px;white-space:nowrap}.sort-label select{width:104px;height:31px;padding:0 7px;border:1px solid #51525d;border-radius:5px;background:#1a1b20;color:#d6d6dc;font-size:12px;outline:none}
.tool-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:19px; }.tool-card { position:relative; min-height:109px; padding:17px 8px 12px; border:1px solid transparent; border-radius:10px; background:var(--surface2); text-align:center; transition:transform .16s ease,background .16s ease,border-color .16s ease; }.tool-card:hover,.tool-card:focus-visible { transform:translateY(-4px); outline:none; background:#30313e; border-color:#4a4b58; }.tool-icon { position:relative; width:36px; height:36px; display:grid; place-items:center; margin:0 auto 12px; border-radius:5px; background:var(--tint); color:var(--accent-color); font-size:18px; font-weight:900; }.tool-icon::after{content:"";position:absolute;width:15px;height:15px;right:-8px;bottom:-5px;border-radius:3px;background:var(--accent-color);opacity:.85;box-shadow:0 0 0 2px var(--surface2)}.tool-card:hover .tool-icon::after{box-shadow:0 0 0 2px #30313e}.tool-name{display:block;color:#d3d3d9;font-size:11px;line-height:1.45}.badge{position:absolute;right:9px;top:9px;color:#90929f;font-size:13px}.empty-state{padding:48px;text-align:center;color:#9596a2}
.tool-dialog{width:min(500px,calc(100vw - 40px));padding:34px;border:1px solid #484955;border-radius:16px;background:#24252d;color:#f3f3f6;box-shadow:0 24px 90px #0008;text-align:center}.tool-dialog::backdrop{background:#050509aa;backdrop-filter:blur(3px)}.dialog-close{position:absolute;right:13px;top:10px;border:0;background:transparent;color:#a9aab5;font-size:25px}.dialog-icon{width:52px;height:52px;display:grid;place-items:center;margin:auto auto 17px;border-radius:10px;font-size:25px;font-weight:900}.tool-dialog h2{margin:0 0 10px;font-size:23px}.tool-dialog p:not(.eyebrow){margin:0;color:#a5a6b1;font-size:13px}.drop-zone{display:flex;flex-direction:column;align-items:center;gap:7px;margin:24px 0 15px;padding:22px;border:1px dashed #686a78;border-radius:10px;color:#d9d9df;cursor:pointer}.drop-zone:hover{border-color:#ff8d7d;background:#302c32}.drop-zone input{display:none}.drop-zone span{font-size:26px;color:#ff9586}.drop-zone small{color:#898b98;font-size:11px}.primary-button{width:100%;border:0;border-radius:7px;background:#ff7967;color:white;font-weight:700;padding:11px}.primary-button:hover{background:#ff8c7d}
@media (max-width:1100px){.tool-grid{grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:14px}.page-heading{align-items:flex-start;flex-direction:column}.heading-actions{align-self:stretch;justify-content:space-between}.search{flex:1}.search input{width:100%}}

/* Functional-tool state and processing dialog */
.tool-card.planned{opacity:.55}.tool-card.planned:hover{transform:none;background:var(--surface2);border-color:transparent}.availability{position:absolute;left:8px;top:8px;color:#7bd09d;font-size:9px;font-weight:700}.tool-card.planned .availability{color:#9b9ca6}.tool-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px;text-align:left}.tool-options label{display:grid;gap:5px;color:#b5b6c0;font-size:11px}.tool-options input,.tool-options select{height:34px;border:1px solid #4a4b56;border-radius:6px;background:#1a1b21;color:#eee;padding:0 9px}.file-summary{min-height:17px;font-size:11px}.drop-zone{margin:20px 0 7px}.drop-zone.drag-over{border-color:#ff8d7d;background:#302c32;box-shadow:0 0 0 3px #ff796722}.primary-button:disabled{background:#6c5553;color:#c6b7b4;cursor:not-allowed}.primary-button:hover:not(:disabled){background:#ff8c7d}.process-status{min-height:18px;margin-top:12px!important;font-size:12px!important}.process-status.error{color:#ff9b91!important}.process-status.success{color:#8cddac!important}.local-note{margin:13px 0 0!important;color:#7d7f8d!important;font-size:10px!important}

/* Image-to-PDF editor */
.tab-strip{display:flex;align-items:stretch}.work-tab{min-width:150px;padding:0 17px;border:0;border-right:1px solid #3b3c46;background:transparent;color:#a6a7b2;font-size:12px;text-align:left}.work-tab.active{background:#1a1b20;color:#f4f4f6;font-weight:700}.work-tab.image-tab span{margin-left:28px;color:#8a8b95;font-size:15px}.image-workspace{display:grid;grid-template-columns:minmax(0,1fr) 322px;min-height:calc(100vh - 78px);background:#151619}.image-canvas{position:relative;margin:34px 30px 30px 20px;min-height:690px;padding:23px;border:1px dashed #4a4b57;border-radius:6px;background:#292a33}.image-settings{display:flex;min-height:calc(100vh - 78px);flex-direction:column;padding:27px 16px 22px;border-left:1px solid #41424b;background:#151619}.image-settings h2{margin:0;color:#f0f0f3;font-size:19px;text-align:center}.image-settings h3{margin:21px 0 10px;color:#d9d9df;font-size:12px}.image-settings hr{width:100%;border:0;border-top:1px solid #3c3d46;margin:18px 0 0}.image-drop-area{display:none;place-items:center;min-height:160px;border:1px dashed #6a6b78;border-radius:8px;color:#babcc5;text-align:center;cursor:pointer}.image-drop-area.visible{display:grid}.image-drop-area input{display:none}.image-drop-area span{display:block;color:#ff8270;font-size:32px}.image-drop-area strong,.image-drop-area small{display:block}.image-drop-area small{margin-top:4px;color:#858793;font-size:11px}.image-card-grid{display:grid;grid-template-columns:repeat(auto-fill,156px);gap:24px}.image-card{position:relative;min-height:193px;padding:18px 12px 12px;border-radius:8px;background:#151619;text-align:center;cursor:grab}.image-card.dragging{opacity:.35}.image-card img{display:block;width:72px;height:92px;object-fit:contain;margin:0 auto 10px;background:white}.image-card strong{display:block;overflow:hidden;color:#c7c8d0;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.image-card small{display:block;margin-top:7px;color:#7f818e;font-size:10px}.remove-image{position:absolute;right:7px;top:6px;width:21px;height:21px;border:0;border-radius:50%;background:#3f404a;color:#c4c5cc;line-height:18px}.remove-image:hover{background:#ff7564;color:#fff}.canvas-actions{position:absolute;right:13px;top:12px;display:grid;gap:12px}.canvas-actions button{width:42px;height:42px;border:0;border-radius:50%;background:#ff6d5c;color:#fff;font-size:27px}.canvas-actions button+button{background:#60616b;color:#d8d9df;font-size:16px}.orientation-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}.orientation-options input{display:none}.orientation-options span{display:grid;place-items:center;height:96px;border:2px solid #83838e;border-radius:8px;color:#aeafb9;font-size:31px;cursor:pointer}.orientation-options b{margin-top:5px;font-size:12px}.orientation-options input:checked+span{border-color:#f09b91;background:#3e3b42;color:#f2a69d}.image-settings select{width:100%;height:39px;border:1px solid #93939e;border-radius:5px;background:#202128;color:#e5e5e9;padding:0 10px}.setting-choice{display:block;margin:10px 0;padding:13px;border:2px solid #686975;border-radius:7px;color:#c1c2cb;font-size:12px}.setting-choice input{accent-color:#45cb90}.combine-choice{display:flex;align-items:flex-start;gap:8px;margin-top:22px;color:#d0d1d8;font-size:12px;line-height:1.45}.combine-choice input{accent-color:#42cb8a}.create-image-pdf{margin-top:auto;width:100%;height:78px;border:0;border-radius:11px;background:#ff6b5a;color:white;font-size:17px;font-weight:800}.create-image-pdf:disabled{background:#6b4f4c;color:#c7b3b0;cursor:not-allowed}.image-process-status{min-height:18px;margin:13px 0 0;color:#a5a6af;font-size:11px}.image-process-status.error{color:#ff9990}.image-process-status.success{color:#85dca7}
.workspace:has(#image-workspace:not([hidden])){grid-template-columns:0 minmax(0,1fr)}.workspace:has(#image-workspace:not([hidden])) .sidebar{display:none}.workspace:has(#image-workspace:not([hidden])) .main-content{width:100%}
.workspace:has(#tool-workspace:not([hidden])){grid-template-columns:0 minmax(0,1fr)}.workspace:has(#tool-workspace:not([hidden])) .sidebar{display:none}.workspace:has(#tool-workspace:not([hidden])) .main-content{width:100%}.tool-workspace{display:grid;grid-template-columns:minmax(0,1fr) 322px;min-height:calc(100vh - 78px);background:#151619}.tool-canvas{position:relative;margin:34px 30px 30px 20px;min-height:690px;padding:23px;border:1px dashed #4a4b57;border-radius:6px;background:#292a33}.tool-drop-area{display:none;place-items:center;min-height:180px;border:1px dashed #6a6b78;border-radius:8px;color:#babcc5;text-align:center;cursor:pointer}.tool-drop-area.visible{display:grid}.tool-drop-area input{display:none}.tool-drop-area span{display:block;color:#ff8270;font-size:32px}.tool-drop-area strong,.tool-drop-area small{display:block}.tool-drop-area small{margin-top:4px;color:#858793;font-size:11px}.tool-file-grid{display:grid;grid-template-columns:repeat(auto-fill,156px);gap:24px}.tool-file-card{position:relative;min-height:193px;padding:18px 12px 12px;border-radius:8px;background:#151619;text-align:center;cursor:grab}.tool-file-card.dragging{opacity:.35}.tool-file-card .file-art{display:grid;place-items:center;width:76px;height:94px;margin:0 auto 10px;border-radius:3px;background:#f8f8f6;color:#ff7462;font-size:24px;font-weight:900}.tool-file-card .file-art.image-preview{overflow:hidden;background:#fff}.tool-file-card .file-art img{width:100%;height:100%;object-fit:contain}.tool-file-card strong{display:block;overflow:hidden;color:#c7c8d0;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.tool-file-card small{display:block;margin-top:7px;color:#7f818e;font-size:10px}.tool-settings{display:flex;min-height:calc(100vh - 78px);flex-direction:column;padding:27px 16px 22px;border-left:1px solid #41424b;background:#151619}.tool-settings h2{margin:0;color:#f0f0f3;font-size:19px;text-align:center}.tool-settings hr{width:100%;border:0;border-top:1px solid #3c3d46;margin:18px 0}.tool-settings>p{color:#a6a7b1;font-size:12px;line-height:1.6}.workspace-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}.workspace-options label{display:grid;gap:5px;color:#d0d1d8;font-size:11px}.workspace-options input,.workspace-options select{height:38px;border:1px solid #8a8b97;border-radius:6px;background:#24252d;color:#f3f3f5;padding:0 9px}.workspace-options label:has(input[type="checkbox"]){display:flex;grid-column:1 / -1;align-items:center}.workspace-options input[type="checkbox"]{height:auto;accent-color:#45cb90}.work-tab i{margin-left:24px;color:#8a8b95;font-size:15px;font-style:normal}
.workspace.workspace-mode{display:block;min-height:calc(100vh - 44px)}.workspace.workspace-mode>.sidebar{display:none}.workspace.workspace-mode>.main-content{width:100%;min-width:0}.workspace.workspace-mode .image-workspace,.workspace.workspace-mode .tool-workspace{width:100%;grid-template-columns:minmax(0,1fr) 322px}.workspace.workspace-mode .image-canvas,.workspace.workspace-mode .tool-canvas{min-width:0}
.result-preview-dialog{width:min(1100px,calc(100vw - 38px));height:min(860px,calc(100vh - 38px));padding:20px;border:1px solid #50515d;border-radius:12px;background:#202126;color:#f3f3f5;box-shadow:0 24px 90px #000b}.result-preview-dialog::backdrop{background:#050509b8;backdrop-filter:blur(3px)}.result-preview-header{display:flex;align-items:flex-start;justify-content:space-between;padding-right:32px}.result-preview-header h2{margin:0;font-size:19px}.result-preview-header .dialog-close{right:15px;top:11px}.result-preview-dialog>p{margin:9px 0 13px;color:#a8a9b3;font-size:12px}.result-preview-dialog iframe{width:100%;height:calc(100% - 128px);border:1px solid #454650;border-radius:7px;background:#fff}.result-preview-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:13px}.result-preview-actions .primary-button{width:auto;padding:11px 22px}.preview-secondary{border:1px solid #62636e;border-radius:7px;background:#2c2d35;color:#d6d7dd;padding:0 20px}.preview-secondary:hover{background:#383943}
.source-pdf-dialog{width:min(1180px,calc(100vw - 38px));height:min(860px,calc(100vh - 38px));padding:20px;border:1px solid #50515d;border-radius:12px;background:#202126;color:#f3f3f5;box-shadow:0 24px 90px #000b}.source-pdf-dialog::backdrop{background:#050509b8;backdrop-filter:blur(3px)}.source-pdf-dialog>p{margin:9px 0 13px;color:#a8a9b3;font-size:12px}.source-pdf-body{display:grid;grid-template-columns:175px minmax(0,1fr);height:calc(100% - 86px);border:1px solid #454650;border-radius:7px;overflow:hidden;background:#17181d}.source-page-list{overflow:auto;padding:10px;border-right:1px solid #41424c}.source-page-button{display:grid;width:100%;gap:5px;margin-bottom:10px;padding:7px;border:1px solid transparent;border-radius:6px;background:#292a33;color:#cfd0d7;text-align:center;font-size:11px}.source-page-button:hover,.source-page-button.selected{border-color:#ff897a;background:#3b3032;color:#fff}.source-page-button img{width:100%;max-height:165px;object-fit:contain;background:#fff}.source-pdf-body iframe{width:100%;height:100%;border:0;background:#fff}.tool-file-card.pdf-file-card{cursor:pointer}.tool-file-card .file-art.pdf-preview{overflow:hidden;background:#fff}.tool-file-card .file-art.pdf-preview img{width:100%;height:100%;object-fit:contain}.page-count{display:block;margin-top:5px;color:#ff9a8d;font-size:10px;font-weight:700}