.ri-layout,.ri-panel{display:flex;flex-direction:column;gap:var(--space-6)}.ri-panel{animation:riFadeIn .3s ease-out}@keyframes riFadeIn{0%{opacity:0;transform:translateY(12px)}}.image-resizer-page .ri-upload__error{background:color-mix(in srgb,var(--color-error) 7%,var(--color-bg));border:1px solid var(--color-error);border-radius:var(--radius-md);color:var(--color-text);font-size:var(--text-sm);margin:0;padding:var(--space-3) var(--space-4)}.ri-preview{align-items:center;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-xl);display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-4)}.ri-preview__header{align-items:center;border-bottom:1px solid var(--color-border);display:flex;gap:var(--space-3);justify-content:space-between;padding-bottom:var(--space-3);width:100%}.ri-preview__file{align-items:center;display:flex;gap:10px;min-width:0}.ri-preview__file-icon{background:color-mix(in srgb,var(--color-primary) 9%,var(--color-bg));border-radius:11px;color:var(--color-primary);display:grid;flex-shrink:0;height:38px;place-items:center;width:38px}.ri-preview__file>span:last-child{display:flex;flex-direction:column;min-width:0}.ri-preview__file small,.ri-preview__file strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ri-preview__file strong{color:var(--color-text);font-size:var(--text-sm)}.ri-preview__file small{color:var(--color-text-muted);font-size:var(--text-xs)}.ri-preview__privacy{align-items:center;background:color-mix(in srgb,var(--color-success) 8%,transparent);border-radius:999px;color:var(--color-success);display:inline-flex;flex-shrink:0;font-size:var(--text-xs);font-weight:var(--font-semibold);gap:6px;padding:6px 10px}.ri-preview canvas{background-color:var(--color-bg-tertiary);background-image:linear-gradient(45deg,color-mix(in srgb,var(--color-text-muted) 9%,transparent) 25%,transparent 25%),linear-gradient(-45deg,color-mix(in srgb,var(--color-text-muted) 9%,transparent) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,color-mix(in srgb,var(--color-text-muted) 9%,transparent) 75%),linear-gradient(-45deg,transparent 75%,color-mix(in srgb,var(--color-text-muted) 9%,transparent) 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px;border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:0 8px 24px rgba(15,23,42,.08);max-height:360px;max-width:100%}.ri-preview__info{align-items:center;display:flex;gap:var(--space-4);justify-content:center;width:100%}.ri-preview__info>span:not(.ri-preview__sep){align-items:center;background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:12px;display:flex;flex-direction:column;min-width:130px;padding:9px 14px}.ri-preview__info small{color:var(--color-text-muted);font-size:10px;font-weight:var(--font-semibold);letter-spacing:.5px;text-transform:uppercase}.ri-preview__info strong{color:var(--color-text);font-family:var(--font-mono);font-size:var(--text-sm)}.ri-preview__info>span:last-child strong,.ri-preview__sep{color:var(--color-primary)}.ri-preview__sep{font-size:var(--text-xl)}.ri-controls{background:radial-gradient(circle at 100% 0,color-mix(in srgb,var(--color-primary) 9%,transparent),transparent 34%),var(--color-bg);border:1px solid color-mix(in srgb,var(--color-primary) 18%,var(--color-border));border-radius:var(--radius-xl);box-shadow:0 14px 36px rgba(15,23,42,.06);display:flex;flex-direction:column;gap:var(--space-4);padding:clamp(16px,3vw,24px)}.ri-control-title,.ri-control-title>span:last-child,.ri-controls__header,.ri-controls__header>div,.ri-controls__header>div>span:last-child{display:flex}.ri-control-title>span:not(.ri-control-step){display:flex;flex-direction:column;min-width:0}.ri-controls__header{align-items:center;gap:var(--space-3);justify-content:space-between;padding-bottom:var(--space-1)}.ri-controls__header>div{align-items:center;gap:11px;min-width:0}.ri-control-title>span:last-child,.ri-controls__header>div>span:last-child{flex-direction:column;min-width:0}.ri-control-title strong,.ri-controls__header strong{color:var(--color-text);font-weight:var(--font-bold)}.ri-controls__header strong{font-size:var(--text-base)}.ri-control-title strong{font-size:var(--text-sm)}.ri-control-title small,.ri-controls__header small{color:var(--color-text-muted);font-size:var(--text-xs)}.ri-controls__header-icon{background:linear-gradient(135deg,var(--color-primary),#7c3aed);border-radius:13px;box-shadow:0 8px 18px rgba(79,70,229,.23);color:#fff;display:grid;flex-shrink:0;height:42px;place-items:center;width:42px}.ri-original-btn{align-items:center;background:var(--color-bg);border:1px solid color-mix(in srgb,var(--color-primary) 28%,var(--color-border));border-radius:10px;color:var(--color-primary);cursor:pointer;display:inline-flex;flex-shrink:0;font:inherit;font-size:var(--text-xs);font-weight:var(--font-semibold);gap:6px;justify-content:center;min-height:36px;padding:0 12px}.ri-original-btn:hover{border-color:var(--color-primary)}.ri-control-card{background:color-mix(in srgb,var(--color-bg-secondary) 76%,var(--color-bg));border:1px solid var(--color-border);border-radius:16px;display:flex;flex-direction:column;gap:var(--space-4);min-width:0;padding:var(--space-4)}.ri-control-title{align-items:center;gap:10px;min-width:0}.ri-control-step{background:color-mix(in srgb,var(--color-primary) 10%,var(--color-bg));border:1px solid color-mix(in srgb,var(--color-primary) 20%,var(--color-border));border-radius:9px;color:var(--color-primary);display:grid;flex-shrink:0;font-size:var(--text-xs);font-weight:var(--font-bold);height:28px;place-items:center;width:28px}.ri-controls__row{align-items:end;display:grid;gap:var(--space-3);grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}.ri-input-group{display:flex;flex-direction:column;gap:7px;min-width:0}.ri-input-group label{color:var(--color-text-secondary);font-size:var(--text-xs);font-weight:var(--font-semibold)}.ri-input-wrap{position:relative}.ri-input-wrap .form-input{background:var(--color-bg);border:1px solid var(--color-border);border-radius:12px;color:var(--color-text);font-family:var(--font-mono);font-size:var(--text-base);font-weight:var(--font-semibold);height:48px;padding-right:42px;width:100%}.ri-input-wrap .form-input:focus{border-color:var(--color-primary);box-shadow:var(--shadow-focus)}.ri-input-wrap>span{color:var(--color-text-muted);font-size:var(--text-xs);pointer-events:none;position:absolute;right:13px;top:50%;transform:translateY(-50%)}.ri-lock-btn{align-items:center;background:var(--color-bg);border:1px solid var(--color-border);border-radius:12px;color:var(--color-text-secondary);cursor:pointer;display:inline-flex;font:inherit;font-size:var(--text-xs);font-weight:var(--font-semibold);gap:7px;height:48px;justify-content:center;padding:0 13px;transition:all var(--transition-fast)}.ri-lock-btn.locked{background:color-mix(in srgb,var(--color-primary) 9%,var(--color-bg));border-color:color-mix(in srgb,var(--color-primary) 55%,var(--color-border));color:var(--color-primary)}.ri-ratio-note{color:var(--color-text-muted);font-size:11px;margin:-3px 0 0;text-align:center}.ri-presets{display:grid;gap:8px;grid-template-columns:repeat(5,minmax(0,1fr))}.ri-preset-btn{align-items:flex-start;background:var(--color-bg);border:1px solid var(--color-border);border-radius:11px;color:var(--color-text-secondary);cursor:pointer;display:flex;flex-direction:column;font:inherit;gap:2px;min-width:0;padding:9px 10px;text-align:left;transition:all var(--transition-fast)}.ri-preset-btn strong{color:var(--color-text);font-size:var(--text-xs)}.ri-preset-btn span{color:var(--color-text-muted);font-family:var(--font-mono);font-size:10px}.ri-preset-btn.active,.ri-preset-btn:hover{background:color-mix(in srgb,var(--color-primary) 7%,var(--color-bg));border-color:var(--color-primary);transform:translateY(-1px)}.ri-control-grid{display:grid;gap:var(--space-4);grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}.ri-scale-row .ri-control-title{display:grid;grid-template-columns:auto 1fr auto}#riQualityVal,#riScaleVal{background:linear-gradient(135deg,var(--color-primary),#7c3aed);border-radius:9px;color:#fff;font-family:var(--font-mono);font-size:var(--text-sm);font-weight:var(--font-bold);min-width:56px;padding:5px 8px;text-align:center}.ri-quality-slider,.ri-scale-slider{-webkit-appearance:none;appearance:none;background:linear-gradient(to right,var(--color-primary) 0,var(--color-primary) var(--fill-pct,50%),var(--color-bg-tertiary) var(--fill-pct,50%),var(--color-bg-tertiary) 100%);border-radius:999px;box-shadow:none;cursor:pointer;height:7px;outline:none;width:100%}.ri-quality-slider::-webkit-slider-thumb,.ri-scale-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--color-primary);border:4px solid var(--color-bg);border-radius:50%;box-shadow:0 0 0 2px var(--color-primary),0 4px 9px rgba(79,70,229,.3);height:20px;width:20px}.ri-scale-quick{display:grid;gap:5px;grid-template-columns:repeat(6,1fr)}.ri-scale-quick button{background:var(--color-bg);border:1px solid var(--color-border);border-radius:7px;color:var(--color-text-muted);cursor:pointer;font:inherit;font-size:10px;font-weight:var(--font-semibold);min-width:0;padding:5px 3px}.ri-scale-quick button.active,.ri-scale-quick button:hover{border-color:var(--color-primary);color:var(--color-primary)}.ri-format-btns{display:grid;gap:8px;grid-template-columns:repeat(3,1fr)}.ri-format-btn{align-items:flex-start;background:var(--color-bg);border:1px solid var(--color-border);border-radius:10px;color:var(--color-text-secondary);cursor:pointer;display:flex;flex-direction:column;font:inherit;gap:1px;padding:9px 10px;text-align:left;transition:all var(--transition-fast)}.ri-format-btn strong{color:var(--color-text);font-size:var(--text-xs)}.ri-format-btn span{color:var(--color-text-muted);font-size:10px}.ri-format-btn.active,.ri-format-btn:hover{border-color:var(--color-primary)}.ri-format-btn.active{background:color-mix(in srgb,var(--color-primary) 9%,var(--color-bg));box-shadow:0 0 0 2px color-mix(in srgb,var(--color-primary) 10%,transparent)}.ri-format-btn.active strong{color:var(--color-primary)}.ri-quality-row{background:color-mix(in srgb,var(--color-primary) 4%,var(--color-bg));border:1px solid color-mix(in srgb,var(--color-primary) 16%,var(--color-border));border-radius:14px;display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-4)}.ri-quality-row>div{align-items:center;display:grid;gap:10px;grid-template-columns:auto 1fr auto 1fr}.ri-quality-row label{color:var(--color-text);font-size:var(--text-sm);font-weight:var(--font-semibold)}.ri-quality-row>div>span{color:var(--color-text-muted);font-size:10px;text-align:center}.ri-actions{border-top:1px solid var(--color-border);display:grid;gap:var(--space-3);grid-template-columns:minmax(150px,.42fr) minmax(220px,.58fr);padding-top:var(--space-2)}.ri-actions .btn{width:100%}.hidden{display:none!important}@media (max-width:820px){.ri-presets{grid-template-columns:repeat(3,minmax(0,1fr))}.ri-control-grid{grid-template-columns:1fr}}@media (max-width:600px){.ri-preview__privacy{display:none}.ri-preview__info{gap:8px}.ri-preview__info>span:not(.ri-preview__sep){flex:1;min-width:0;padding-inline:8px}.ri-controls__header{align-items:stretch;flex-direction:column}.ri-original-btn{width:100%}.ri-controls__row{grid-template-columns:1fr}.ri-lock-btn{height:40px}.ri-presets{display:flex;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}.ri-presets::-webkit-scrollbar{display:none}.ri-preset-btn{min-width:112px}.ri-quality-row>div{grid-template-columns:1fr auto}.ri-quality-row>div>span{display:none}.ri-actions{grid-template-columns:1fr}}@media (max-width:390px){.ri-scale-quick{grid-template-columns:repeat(3,1fr)}.ri-format-btns{grid-template-columns:1fr}.ri-format-btn{align-items:center;flex-direction:row;justify-content:space-between}}.image-resizer-page .ir-content{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-xl,24px);margin-top:var(--space-6);padding:var(--space-6)}.image-resizer-page .ir-content h2{color:var(--color-text);margin:0 0 var(--space-4)}.image-resizer-page .ir-content h3{color:var(--color-text);font-size:var(--text-lg);margin:0 0 var(--space-2)}.image-resizer-page .ir-content dd,.image-resizer-page .ir-content p{color:var(--color-text-secondary);line-height:1.65;margin:0}.image-resizer-page .ir-content__table-wrap{border:1px solid var(--color-border);border-radius:16px;max-width:100%;overflow-x:auto}.image-resizer-page .ir-content__table{border-collapse:collapse;min-width:640px;width:100%}.image-resizer-page .ir-content__table td,.image-resizer-page .ir-content__table th{border-bottom:1px solid var(--color-border);line-height:1.55;padding:14px 16px;text-align:left;vertical-align:top}.image-resizer-page .ir-content__table thead{background:color-mix(in srgb,var(--color-primary) 7%,var(--color-bg))}.image-resizer-page .ir-content__table tbody tr:last-child>*{border-bottom:0}.image-resizer-page .ir-content__table tbody th{color:var(--color-text);width:26%}.image-resizer-page .ir-content__grid,.image-resizer-page .ir-content__issues{display:grid;gap:var(--space-4);grid-template-columns:repeat(2,minmax(0,1fr))}.image-resizer-page .ir-content__issues>div,.image-resizer-page .ir-content__item{background:var(--color-bg-secondary,var(--color-bg));border:1px solid var(--color-border);border-radius:16px;padding:var(--space-4)}.image-resizer-page .ir-content__issues{margin:0}.image-resizer-page .ir-content__issues dt{color:var(--color-text);font-weight:var(--font-semibold);margin-bottom:var(--space-2)}.image-resizer-page .ir-content__issues dd{margin-left:0}@media (max-width:640px){.image-resizer-page .ir-content{padding:var(--space-4)}.image-resizer-page .ir-content__grid,.image-resizer-page .ir-content__issues{grid-template-columns:1fr}.image-resizer-page .ir-content__table{min-width:0}.image-resizer-page .ir-content__table thead{display:none}.image-resizer-page .ir-content__table tbody tr{border-bottom:1px solid var(--color-border);display:block;padding:var(--space-3)}.image-resizer-page .ir-content__table tbody tr:last-child{border-bottom:0}.image-resizer-page .ir-content__table tbody td,.image-resizer-page .ir-content__table tbody th{border:0;display:block;padding:var(--space-2);width:100%}.image-resizer-page .ir-content__table tbody td:before{color:var(--color-text);content:attr(data-label);display:block;font-size:var(--text-xs);font-weight:var(--font-semibold);margin-bottom:3px}}