:root{--brand:#4f46e5;--brand-dark:#4338ca;--brand-soft:#eef2ff;--brand-line:#c7d2fe;--text:#111827;--muted:#6b7280;--line:#e5e7eb;--soft:#f9fafb;--white:#fff;--danger:#dc2626;--danger-soft:#fef2f2;--success:#047857;--success-soft:#ecfdf5}*,:before,:after{box-sizing:border-box}html,body,#app{width:100%;max-width:100%}html{margin:0;padding:0;overflow-x:hidden}body{text-rendering:optimizelegibility;margin:0;padding:0;overflow-x:hidden}img,canvas,svg,video{max-width:100%}button,input,select,textarea{min-width:0}.site-header,.header-inner,.navbar,.nav-menu,.nav-links,.tool-layout,.tool-panel,main,footer{min-width:0;max-width:100%}.site-header{width:100%}.header-inner{justify-content:space-between;align-items:center;gap:1rem;width:100%;display:flex;position:relative}.logo{flex-shrink:0;align-items:center;gap:.625rem;min-width:0;display:inline-flex}.nav-menu,.nav-links{min-width:0;max-width:100%}.nav-menu:not(.hidden),.nav-links:not(.hidden){flex-wrap:nowrap;align-items:center;gap:.75rem}.nav-menu a,.nav-menu button,.nav-links a,.nav-links button{white-space:nowrap;max-width:100%}.brand-link{min-width:0;max-width:calc(100% - 3.5rem)}.brand-link span:last-child{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.ui-container{width:100%;max-width:75rem;margin-inline:auto;padding-inline:1rem}.tool-layout{grid-template-columns:1fr;align-items:start;gap:1.25rem;width:100%;display:grid}.tool-panel{flex-direction:column;gap:1rem;min-width:0;display:flex}.ui-section{padding-block:2.5rem}.ui-card{border:1px solid var(--line);background:var(--white);border-radius:1rem;min-width:0;padding:1.25rem}.ui-card-soft{border:1px solid var(--line);background:var(--soft);border-radius:1rem;min-width:0;padding:1.25rem}.ui-card-link{transition:border-color .16s,background-color .16s}.ui-card-link:hover,.ui-card-link:focus{border-color:var(--brand-line);background:#fbfcff;outline:none}.ui-page-title{color:var(--text);letter-spacing:-.025em;font-size:1.875rem;font-weight:600;line-height:1.15}.ui-section-title{color:var(--text);letter-spacing:-.02em;font-size:1.5rem;font-weight:600;line-height:1.25}.ui-lead{color:var(--muted);font-size:1rem;line-height:1.75}.ui-text{color:var(--muted);font-size:.875rem;line-height:1.65}.ui-kicker,.ui-badge{border:1px solid var(--brand-line);background:var(--brand-soft);width:fit-content;max-width:100%;color:var(--brand);border-radius:999px;align-items:center;gap:.5rem;padding:.375rem .75rem;font-size:.875rem;font-weight:500;line-height:1.25;display:inline-flex}.btn{text-align:center;border-radius:.75rem;justify-content:center;align-items:center;gap:.5rem;min-height:2.75rem;padding:.625rem 1.25rem;font-size:.875rem;font-weight:600;line-height:1.2;transition:border-color .16s,background-color .16s,color .16s;display:inline-flex}.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline-offset:2px;outline:2px solid #4f46e547}.btn:disabled,button:disabled{cursor:not-allowed;opacity:.55}.btn-primary{border:1px solid var(--brand);background:var(--brand);color:#fff}.btn-primary:hover:not(:disabled),.btn-primary:focus:not(:disabled){border-color:var(--brand-dark);background:var(--brand-dark)}.btn-secondary{border:1px solid var(--line);color:#374151;background:#fff}.btn-secondary:hover:not(:disabled),.btn-secondary:focus:not(:disabled){border-color:var(--brand-line);background:var(--brand-soft);color:var(--brand)}.btn-danger{border:1px solid var(--danger);background:var(--danger);color:#fff}.btn-danger:hover:not(:disabled),.btn-danger:focus:not(:disabled){background:#b91c1c;border-color:#b91c1c}.settings-grid{grid-template-columns:1fr;gap:.875rem;width:100%;display:grid}.field-group{border:1px solid var(--line);background:#fafafa;border-radius:.875rem;flex-direction:column;gap:.5rem;width:100%;min-width:0;padding:.875rem;display:flex}.field-group-full{grid-column:1/-1}.field-label{color:#374151;font-size:.875rem;font-weight:600;display:block}.field-helper{color:var(--muted);font-size:.8125rem;line-height:1.5}.tool-control{width:100%;min-width:0;height:2.75rem;color:var(--text);background:#fff;border:1px solid #d1d5db;border-radius:.75rem;padding:0 1rem;font-size:.875rem}.tool-control:focus{border-color:var(--brand);outline-offset:0;outline:2px solid #4f46e529}.range-control{width:100%;min-width:0;height:2.75rem}.option-box{border:1px solid var(--brand-line);background:var(--brand-soft);color:#374151;border-radius:1rem;grid-column:1/-1;align-items:flex-start;gap:.75rem;min-width:0;padding:1rem;font-size:.875rem;font-weight:500;display:flex}.option-box input[type=checkbox]{flex:none;width:1rem;height:1rem;margin-top:.125rem}.paired-control{grid-template-columns:minmax(0,1fr) minmax(6.5rem,.42fr);gap:.75rem;width:100%;display:grid}.action-group,.actions{grid-template-columns:1fr;gap:.75rem;width:100%;display:grid}.action-group .btn,.actions .btn,.actions button{width:100%}.upload-drop{width:100%;min-width:0}.alert-box,.alert-info{border:1px solid var(--brand-line);background:var(--brand-soft);color:#4b5563;overflow-wrap:anywhere;border-radius:.75rem;grid-column:1/-1;width:100%;padding:.875rem 1rem;font-size:.875rem;line-height:1.6}.alert-success{background:var(--success-soft);color:var(--success);border-color:#a7f3d0}.alert-warning{color:#92400e;background:#fffbeb;border-color:#fde68a}.alert-error{background:var(--danger-soft);color:#991b1b;border-color:#fecaca}.result-box{border:1px solid var(--line);background:var(--soft);text-align:center;border-radius:.75rem;min-width:0;padding:1rem}.preview-box{border:1px solid var(--line);background:var(--soft);border-radius:1rem;justify-content:center;align-items:center;min-width:0;min-height:16rem;padding:1rem;display:flex;overflow:hidden}.preview-box img,.preview-box canvas,[data-preview] img,[data-source-preview] img{object-fit:contain;max-width:100%;max-height:100%}.cropper-container,.cropper-wrap img{max-width:100%}.min-w-0>*{min-width:0}@media (width>=640px){.ui-container{padding-inline:1.5rem}.settings-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.action-group,.actions{grid-template-columns:repeat(auto-fit,minmax(9rem,1fr))}}@media (width>=768px){.ui-section{padding-block:3.5rem}.ui-card,.ui-card-soft{padding:1.5rem}.ui-page-title{font-size:2.25rem}.ui-section-title{font-size:1.875rem}}@media (width>=1024px){.ui-container{padding-inline:2rem}.tool-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.5rem}}@media (width<=1279px){.header-inner{flex-wrap:nowrap}.nav-menu.nav-links:not(.hidden){width:auto;max-width:100%;overflow-x:hidden}}@media (width>=1280px){.nav-menu,.nav-links{flex-wrap:nowrap;justify-content:flex-end}}@media (width<=420px){.paired-control{grid-template-columns:1fr}}