#aspect-ratio-calculator { color:#182b45; }
#aspect-ratio-calculator .tool-intro { margin-bottom:18px; }
.aspect-workspace { display:grid; grid-template-columns:minmax(0,2fr) minmax(240px,1fr); gap:14px; align-items:stretch; }
.aspect-calculators,.aspect-size-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.aspect-card,.aspect-size-card { min-width:0; padding:16px; border:1px solid #dce4ed; border-radius:12px; background:#fff; }
.aspect-calculators .aspect-card { display:flex; flex-direction:column; background:#f5f9fe; }
#aspect-tool h2 { margin:0 0 12px; color:#163b68; font-size:18px; line-height:1.5; }
.aspect-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:12px; }
.aspect-fields label,.aspect-known-side legend { min-width:0; color:#43536a; font-size:12px; font-weight:700; }
.aspect-fields input[type="text"] { box-sizing:border-box; display:block; width:100%; min-width:0; min-height:44px; margin-top:6px; padding:9px; border:1px solid #bdcad9; border-radius:8px; background:#fff; color:#182b45; font:inherit; font-size:16px; }
.aspect-known-fields { grid-template-columns:1fr; gap:10px; }
.aspect-known-side { min-width:0; margin:0; padding:0; border:0; }
.aspect-known-side legend { float:inline-start; margin:7px 12px 0 0; }
.aspect-radio-options { display:flex; gap:16px; min-width:0; }
.aspect-radio-options label { display:flex; align-items:center; gap:6px; min-height:32px; cursor:pointer; }
.aspect-radio-options input { width:17px; height:17px; margin:0; accent-color:#1769e0; }
#aspect-tool input[aria-invalid="true"] { border-color:#b42318; }
#aspect-tool :is(input,button,a):focus-visible { outline:3px solid #8ab0f8; outline-offset:3px; }
.aspect-error { margin:8px 0; color:#b42318; font-size:12px; line-height:1.6; }
.aspect-error:empty,.aspect-note:empty,#preview-requested:empty { display:none; }
.aspect-result { display:flex; flex:1; align-items:center; justify-content:center; min-height:76px; margin-top:2px; padding:14px 10px; border:1px solid #c9ddfa; border-radius:9px; background:#eaf2ff; text-align:center; white-space:pre-line; font-size:22px; line-height:1.5; font-weight:700; color:#095ac7; overflow-wrap:anywhere; }
#pixels-result { font-size:28px; }
.aspect-result:empty { display:none; }
#rounding-note { text-align:center; margin-bottom:0; }
.aspect-note { color:#52657d; font-size:12px; line-height:1.65; }
#aspect-limits { margin:10px 0 0; }
.aspect-preview-note { margin:3px 0 0; }
.aspect-preview { display:flex; flex-direction:column; text-align:center; }
.aspect-preview h2 { margin-bottom:5px!important; }
#preview-source { margin:0; color:#52657d; font-size:12px; }
#preview-svg { display:block; width:100%; height:160px; flex:1 1 160px; min-height:120px; max-height:200px; margin:5px 0; }
.aspect-preview-info { display:grid; gap:5px; overflow-wrap:anywhere; font-size:12px; }
.aspect-preview-info strong { font-size:20px; color:#095ac7; }
.aspect-presets,.aspect-list { margin-top:24px; }
#aspect-tool button { min-height:44px; padding:8px 12px; border:1px solid #a9c8ef; border-radius:8px; background:#edf5ff; color:#095ac7; font:inherit; font-size:13px; font-weight:700; cursor:pointer; }
#aspect-tool button:hover { background:#dceaff; }
.aspect-presets button { margin:0 5px 6px 0; }
.aspect-size-card { display:grid; grid-template-columns:104px minmax(0,1fr); gap:14px; align-items:center; }
.aspect-size-shape { display:grid; place-items:center; width:104px; height:100%; min-height:100px; border-radius:9px; background:#f5f9fe; }
.aspect-size-shape svg { display:block; width:104px; height:84px; }
.aspect-size-shape rect { fill:#e6f0ff; stroke:#1769e0; stroke-width:1; }
.aspect-size-details { min-width:0; }
.aspect-size-card h3 { margin:0 0 8px; color:#243d5d; font-size:14px; line-height:1.6; }
.aspect-size-card p { margin:7px 0; overflow-wrap:anywhere; font-size:13px; }
.aspect-size-card small { display:block; color:#52657d; font-size:11px; line-height:1.6; }
@media(max-width:1050px) {
  .aspect-workspace { grid-template-columns:1fr; }
  .aspect-preview { display:grid; grid-template-columns:180px minmax(0,1fr); gap:4px 14px; align-items:center; }
  .aspect-preview h2,#preview-source,.aspect-preview-info { grid-column:2; }
  #preview-svg { grid-column:1; grid-row:1/4; height:130px; min-height:0; margin:0; }
}
@media(max-width:700px) {
  .aspect-calculators,.aspect-size-grid { grid-template-columns:1fr; }
  .aspect-card,.aspect-size-card { padding:14px; }
  .aspect-preview { grid-template-columns:100px minmax(0,1fr); gap:4px 10px; }
  #preview-svg { height:110px; }
  .aspect-preview-info strong { font-size:17px; }
  .aspect-size-card { grid-template-columns:80px minmax(0,1fr); gap:12px; }
  .aspect-size-shape,.aspect-size-shape svg { width:80px; }
}

.aspect-table-scroll { max-width:100%; overflow-x:auto; border:1px solid #dce4ed; border-radius:12px; }
.aspect-table-scroll:focus-visible { outline:3px solid #8ab0f8; outline-offset:3px; }
.aspect-resolution-table { width:100%; min-width:680px; border-collapse:collapse; text-align:start; font-size:13px; line-height:1.6; }
.aspect-resolution-table th,.aspect-resolution-table td { padding:5px 12px; border-bottom:1px solid #e3eaf3; vertical-align:middle; }
.aspect-resolution-table thead { background:#edf5ff; color:#163b68; }
.aspect-resolution-table tbody th { font-weight:700; }
.aspect-resolution-table tbody tr:nth-child(even) { background:#f7f9fc; }
.aspect-resolution-table tbody tr:last-child > * { border-bottom:0; }
.aspect-resolution-table :is(th,td):nth-child(2) { white-space:nowrap; }
.aspect-resolution-table td:nth-child(3) { min-width:90px; }
.aspect-resolution-table td:last-child { min-width:150px; color:#52657d; }

#aspect-tool .aspect-resolution-table button { min-height:0; padding:2px 0; border:0; border-radius:3px; background:transparent; color:#095ac7; font:inherit; font-weight:600; line-height:1.5; text-decoration:underline; text-decoration-color:#a9c8ef; text-underline-offset:3px; }
#aspect-tool .aspect-resolution-table button:hover { background:transparent; color:#06418f; text-decoration-color:currentColor; }

#aspect-tool .aspect-resolution-table thead button { color:#163b68; font-weight:700; text-decoration:none; }
#aspect-tool .aspect-resolution-table thead button:hover { color:#095ac7; }
.aspect-resolution-table [data-sort-arrow] { margin-inline-start:5px; color:#1769e0; }

#pixels-result { flex-direction:column; gap:4px; }
.aspect-ratio-exact,.aspect-ratio-supplement { white-space:nowrap; }
#pixels-result .aspect-ratio-exact { font-size:28px; }
#pixels-result .aspect-ratio-supplement { color:#52657d; font-size:14px; font-weight:500; }
#preview-ratio { display:inline-flex; flex-wrap:wrap; justify-content:center; gap:2px 5px; }
#preview-ratio .aspect-ratio-exact { font-weight:700; }
#preview-ratio .aspect-ratio-supplement { color:#52657d; font-size:11px; }
@media(max-width:700px) { #pixels-result .aspect-ratio-exact { font-size:26px; } }

.aspect-fields input[type="text"],.aspect-ratio-exact,.aspect-ratio-supplement,#ratio-result,#preview-dimensions,[data-size-ratio],#preview-requested { direction:ltr; unicode-bidi:isolate; }
html[dir="rtl"] .aspect-radio-options { flex-wrap:wrap; }
html[dir="rtl"] .aspect-resolution-table td:nth-child(2) button { direction:ltr; unicode-bidi:isolate; }

#aspect-tool [data-width],#aspect-tool [data-ratio-width] { direction:ltr; unicode-bidi:isolate; }
#aspect-ratio-calculator .tool-intro h1 { hyphens:auto; }