*{box-sizing:border-box;margin:0;padding:0}:root,html.theme-pastel{--bg-gradient:linear-gradient(135deg, #fdf2f8 0%, #f5f0ff 55%, #eef4ff 100%);--surface:#ffffffa6;--surface-strong:#ffffffd9;--surface-border:#ec48992e;--accent:#ec4899;--accent-soft:#ec48991f;--accent-contrast:#fff;--accent-secondary:#a78bfa;--text-primary:#4a3a50;--text-secondary:#94808f;--danger:#e1567c;--success:#4fae8b;--radius-lg:22px;--radius-md:14px;--radius-sm:10px;--shadow-card:0 8px 32px #c471f51f;--sidebar-active-bg:linear-gradient(90deg, #ec489924, #a78bfa24)}html.theme-simple{--bg-gradient:linear-gradient(160deg, #f6f7f9 0%, #eef1f5 100%);--surface:#fffc;--surface-strong:#fffffff2;--surface-border:#3341551f;--accent:#33658a;--accent-soft:#33658a1a;--accent-contrast:#fff;--accent-secondary:#5b7c99;--text-primary:#2b3440;--text-secondary:#76818f;--danger:#c0504f;--success:#3d8b6e;--radius-lg:14px;--radius-md:10px;--radius-sm:8px;--shadow-card:0 4px 18px #2b344014;--sidebar-active-bg:#33658a1a}html,body{min-height:100%}body{font-family:var(--font-rounded), "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic UI", sans-serif;background:var(--bg-gradient);color:var(--text-primary);-webkit-font-smoothing:antialiased;background-attachment:fixed;line-height:1.7}button,input,select,textarea{font:inherit;color:inherit}img{max-width:100%;display:block}.app-shell{min-height:100vh;display:flex}.sidebar{background:var(--surface);-webkit-backdrop-filter:blur(18px);border-right:1px solid var(--surface-border);flex-direction:column;flex-shrink:0;gap:.4rem;width:264px;height:100vh;padding:1.5rem 1rem;display:flex;position:sticky;top:0;overflow-y:auto}.brand{align-items:center;gap:.6rem;padding:.25rem .5rem 1.1rem;display:flex}.brand-logo{background:linear-gradient(135deg, var(--accent), var(--accent-secondary));width:38px;height:38px;color:var(--accent-contrast);border-radius:12px;flex-shrink:0;place-items:center;display:grid}.brand-name{letter-spacing:.04em;font-size:1.3rem;font-weight:700;line-height:1.2}.brand-sub{color:var(--text-secondary);letter-spacing:.08em;font-size:.68rem}.nav-button{border-radius:var(--radius-md);cursor:pointer;text-align:left;width:100%;color:var(--text-secondary);background:0 0;border:none;align-items:center;gap:.65rem;padding:.7rem .85rem;font-size:.92rem;text-decoration:none;transition:background .18s,color .18s;display:flex}.nav-button:hover{background:var(--accent-soft);color:var(--text-primary)}.nav-button.active{background:var(--sidebar-active-bg);color:var(--accent);font-weight:700}.nav-divider{border:none;border-top:1px dashed var(--surface-border);margin:.6rem .5rem}.nav-group-toggle{padding-top:.5rem;padding-bottom:.5rem;font-size:.8rem}.nav-group-toggle .chevron{transition:transform .2s}.nav-group-toggle .chevron.open{transform:rotate(180deg)}.nav-sub{padding-left:1.9rem}.sidebar-footer{flex-direction:column;gap:.75rem;margin-top:auto;padding:1rem .5rem 0;display:flex}.theme-switch{background:var(--accent-soft);border-radius:var(--radius-md);gap:.4rem;padding:.3rem;display:flex}.theme-switch button{border-radius:var(--radius-sm);cursor:pointer;color:var(--text-secondary);background:0 0;border:none;flex:1;padding:.4rem .2rem;font-size:.78rem}.theme-switch button.active{background:var(--surface-strong);color:var(--accent);font-weight:700;box-shadow:0 1px 4px #00000014}.api-status{color:var(--text-secondary);align-items:center;gap:.5rem;font-size:.75rem;display:flex}.status-dot{background:var(--danger);border-radius:50%;flex-shrink:0;width:9px;height:9px}.status-dot.online{background:var(--success)}.main-content{flex:1;width:100%;max-width:980px;margin:0 auto;padding:2rem clamp(1rem,4vw,3rem)}.feature-header{margin-bottom:1.5rem}.feature-title-row{flex-wrap:wrap;align-items:center;gap:.75rem;display:flex}.feature-title{align-items:center;gap:.6rem;font-size:1.45rem;font-weight:700;display:flex}.feature-title svg{color:var(--accent)}.feature-description{color:var(--text-secondary);margin-top:.4rem;font-size:.9rem}.ai-badge{background:var(--accent-soft);color:var(--accent);white-space:nowrap;border-radius:999px;align-items:center;gap:.35rem;padding:.25rem .7rem;font-size:.72rem;font-weight:700;display:inline-flex}.ai-badge.uses-ai{color:var(--danger);background:#e1567c1f}.feature-grid{flex-direction:column;display:flex}.action-area{z-index:20;margin-bottom:1.25rem;position:sticky;bottom:.75rem}.action-area .primary-button{box-shadow:0 10px 28px #00000038}.action-area .notice{background:var(--surface-strong);box-shadow:var(--shadow-card)}@media (min-width:1080px){.main-content{max-width:1320px}.feature-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"main side""result side";align-items:start;column-gap:1.25rem;display:grid}.feature-main{grid-area:main}.feature-side{flex-direction:column;grid-area:side;height:100%;display:flex}.feature-side .action-area{margin-top:auto}.feature-result{grid-area:result}.feature-grid.single{grid-template-areas:"main main""result result"}}.card{background:var(--surface);-webkit-backdrop-filter:blur(18px);border:1px solid var(--surface-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);margin-bottom:1.25rem;padding:1.5rem}.card-heading{align-items:center;gap:.5rem;margin-bottom:1rem;font-size:.95rem;font-weight:700;display:flex}.dropzone{border:2px dashed var(--surface-border);border-radius:var(--radius-lg);text-align:center;cursor:pointer;color:var(--text-secondary);padding:2.5rem 1.5rem;transition:border-color .18s,background .18s}.dropzone:hover,.dropzone.drag-active{border-color:var(--accent);background:var(--accent-soft)}.dropzone svg{color:var(--accent);margin:0 auto .75rem}.dropzone-title{color:var(--text-primary);font-size:.95rem;font-weight:700}.dropzone-sub{margin-top:.3rem;font-size:.78rem}.preview-wrap{border-radius:var(--radius-lg);border:1px solid var(--surface-border);background:repeating-conic-gradient(#0000000b 0% 25%,#0000 0% 50%) 0 0/20px 20px;position:relative;overflow:hidden}.preview-wrap img{object-fit:contain;width:100%;max-height:420px;margin:0 auto}.preview-fallback{border-radius:var(--radius-lg);border:1px solid var(--surface-border);background:var(--surface-strong);color:var(--text-secondary);text-align:center;flex-direction:column;align-items:center;gap:.6rem;padding:2.5rem 1.5rem;font-size:.82rem;display:flex}.preview-fallback svg{color:var(--accent)}.format-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.6rem;display:grid}.format-card{border-radius:var(--radius-md);border:1px solid var(--surface-border);background:var(--surface-strong);cursor:pointer;text-align:left;flex-direction:column;gap:.2rem;padding:.8rem .9rem;transition:border-color .15s;display:flex}.format-card:hover:not(:disabled){border-color:var(--accent)}.format-card:disabled{opacity:.4;cursor:not-allowed}.lock-toggle{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:.4rem;font-size:.85rem;font-weight:700;display:inline-flex}.lock-toggle input[type=checkbox]{accent-color:var(--accent);width:15px;height:15px}.lock-toggle svg{color:var(--accent)}.pad-color-row{align-items:center;gap:1rem;display:flex}.color-input{border:1px solid var(--surface-border);border-radius:var(--radius-sm);background:var(--surface-strong);cursor:pointer;width:48px;height:32px;padding:2px}.color-input:disabled{opacity:.4;cursor:not-allowed}.format-card.active{border-color:var(--accent);background:var(--accent-soft)}.format-card-label{font-size:.95rem;font-weight:700}.format-card.active .format-card-label{color:var(--accent)}.format-card-desc{color:var(--text-secondary);font-size:.72rem;line-height:1.5}.size-inputs{align-items:center;gap:.5rem;display:flex}.size-inputs .text-input{width:110px}.size-x,.size-unit{color:var(--text-secondary);font-size:.85rem}.preview-meta{color:var(--text-secondary);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;margin-top:.6rem;font-size:.78rem;display:flex}.form-group{flex-direction:column;gap:.4rem;margin-bottom:1rem;display:flex}.form-group>label{font-size:.82rem;font-weight:700}.form-hint{color:var(--text-secondary);font-size:.75rem}.label-row{justify-content:space-between;align-items:baseline;gap:.5rem;display:flex}.label-row label{font-size:.82rem;font-weight:700}.byte-note{color:var(--text-secondary);font-size:.7rem}.text-input,.select-input{border-radius:var(--radius-md);border:1px solid var(--surface-border);background:var(--surface-strong);outline:none;width:100%;padding:.6rem .85rem;transition:border-color .15s}.text-input:focus,.select-input:focus{border-color:var(--accent)}.choice-row{flex-wrap:wrap;gap:.5rem;display:flex}.choice-btn{border:1px solid var(--surface-border);background:var(--surface-strong);cursor:pointer;color:var(--text-secondary);border-radius:999px;padding:.55rem 1.1rem;font-size:.88rem;transition:all .15s}.choice-btn:hover{border-color:var(--accent);color:var(--accent)}.choice-btn.active{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast);font-weight:700}.toggle-card{border-radius:var(--radius-md);border:1px solid var(--surface-border);background:var(--surface-strong);cursor:pointer;align-items:flex-start;gap:.75rem;padding:.9rem 1rem;transition:border-color .15s;display:flex}.toggle-card.checked{border-color:var(--accent)}.toggle-card input[type=checkbox]{accent-color:var(--accent);width:16px;height:16px;margin-top:.3rem}.toggle-card-label{font-size:.9rem;font-weight:700}.toggle-card-desc{color:var(--text-secondary);font-size:.76rem}input[type=range]{accent-color:var(--accent);width:100%}.advanced-settings{border-top:1px dashed var(--surface-border);margin-top:1.25rem;padding-top:.75rem}.advanced-toggle{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;align-items:center;gap:.4rem;padding:.4rem 0;font-size:.82rem;display:flex}.advanced-toggle:hover{color:var(--accent)}.advanced-toggle .chevron{transition:transform .2s}.advanced-toggle .chevron.open{transform:rotate(180deg)}.advanced-body{padding-top:.9rem}.primary-button{border-radius:var(--radius-md);background:linear-gradient(135deg, var(--accent), var(--accent-secondary));width:100%;color:var(--accent-contrast);cursor:pointer;border:none;justify-content:center;align-items:center;gap:.5rem;padding:.85rem 1.5rem;font-size:.95rem;font-weight:700;transition:opacity .15s,transform .15s;display:inline-flex}.primary-button:hover:not(:disabled){transform:translateY(-1px)}.primary-button:disabled{opacity:.45;cursor:not-allowed}.secondary-button{border-radius:var(--radius-md);border:1px solid var(--surface-border);background:var(--surface-strong);cursor:pointer;color:var(--text-secondary);align-items:center;gap:.4rem;padding:.5rem 1rem;font-size:.82rem;text-decoration:none;transition:all .15s;display:inline-flex}.secondary-button:hover{border-color:var(--accent);color:var(--accent)}.notice{border-radius:var(--radius-md);background:var(--accent-soft);color:var(--text-primary);align-items:flex-start;gap:.5rem;margin-bottom:1rem;padding:.75rem .9rem;font-size:.8rem;display:flex}.notice.error{color:var(--danger);background:#e1567c1a}.notice.success{color:var(--success);background:#4fae8b1f}.notice svg{flex-shrink:0;margin-top:.15rem}.result-text{text-align:center;border-radius:var(--radius-md);background:var(--surface-strong);border:1px solid var(--surface-border);word-break:break-all;padding:1.25rem;font-size:1.3rem;font-weight:700}.metadata-table{border-collapse:collapse;width:100%;font-size:.82rem}.metadata-table th,.metadata-table td{text-align:left;border-bottom:1px solid var(--surface-border);vertical-align:top;word-break:break-all;padding:.55rem .75rem}.metadata-table th{width:38%;color:var(--text-secondary);font-weight:600}.compare-grid{grid-template-columns:1fr 1fr;gap:1rem;display:grid}.compare-label{color:var(--text-secondary);text-align:center;margin-bottom:.4rem;font-size:.78rem;font-weight:700}.preview-wrap.zoomable{cursor:zoom-in}.zoom-hint{color:#fff;pointer-events:none;background:#0000008c;border-radius:999px;align-items:center;gap:.3rem;padding:.25rem .6rem;font-size:.7rem;font-weight:700;display:inline-flex;position:absolute;bottom:.6rem;right:.6rem}.lightbox{z-index:1000;-webkit-backdrop-filter:blur(10px);background:#201826b8;flex-direction:column;animation:.18s lightbox-in;display:flex;position:fixed;inset:0}@keyframes lightbox-in{0%{opacity:0}to{opacity:1}}.lightbox-bar{background:var(--surface);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--surface-border);justify-content:space-between;align-items:center;gap:1rem;padding:.7rem 1.25rem;display:flex}.lightbox-title{color:var(--text-primary);text-overflow:ellipsis;white-space:nowrap;align-items:center;gap:.5rem;min-width:0;font-size:.82rem;font-weight:700;display:inline-flex;overflow:hidden}.lightbox-title svg{color:var(--accent);flex-shrink:0}.lightbox-actions{flex-shrink:0;align-items:center;gap:.5rem;display:flex}.lightbox-close{cursor:pointer;background:linear-gradient(135deg, var(--accent), var(--accent-secondary));color:var(--accent-contrast);border:none;border-radius:999px;align-items:center;gap:.35rem;padding:.5rem 1.1rem;font-size:.8rem;font-weight:700;transition:transform .15s;display:inline-flex}.lightbox-close:hover{transform:translateY(-1px)}.lightbox-body{cursor:zoom-out;flex:1;padding:2rem;display:flex;overflow:auto}.lightbox-body img{cursor:default;border-radius:4px;width:auto;max-width:none;height:auto;max-height:none;margin:auto;box-shadow:0 12px 48px #00000073}.spinner{animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width:760px){.app-shell{flex-direction:column}.sidebar{border-right:none;border-bottom:1px solid var(--surface-border);width:100%;height:auto;padding:1rem;position:static}.sidebar nav{gap:.3rem;padding-bottom:.25rem;display:flex;overflow-x:auto}.nav-button{white-space:nowrap;width:auto}.nav-divider{display:none}.sidebar-footer{flex-direction:row;justify-content:space-between;align-items:center;padding-top:.75rem}.theme-switch{width:180px}.compare-grid{grid-template-columns:1fr}}