.tool-widget:has(.aspect-ratio-calc-app) { padding: 0; overflow: hidden; border: 0; background: transparent; box-shadow: none; }
.aspect-ratio-calc-app {
    --arc-accent: #38bdf8;
    --arc-border: rgba(148, 163, 184, .18);
    --arc-muted: #94a3b8;
    width: 100%;
}
.arc-shell {
    padding: 1.15rem;
    border: 1px solid var(--arc-border);
    border-radius: 20px;
    background: radial-gradient(circle at 0 0, rgba(14, 165, 233, .15), transparent 35%), linear-gradient(180deg, #111827, #0b1220);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
}
.arc-head, .arc-card-head, .arc-card-head > div, .arc-scale-actions {
    display: flex; align-items: center; justify-content: space-between; gap: .7rem; flex-wrap: wrap;
}
.arc-head { margin-bottom: 1rem; }
.arc-eyebrow { margin: 0 0 .2rem; color: var(--arc-accent); font-size: .68rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.arc-head h2 { margin: 0; color: #f8fafc; font-size: 1.2rem; }
.arc-text-btn { border: 0; background: transparent; color: #7dd3fc; font: inherit; font-size: .76rem; font-weight: 800; cursor: pointer; }
.arc-text-btn:hover { color: #e0f2fe; }
.arc-presets { margin-bottom: 1rem; padding: .85rem; border: 1px solid var(--arc-border); border-radius: 14px; background: rgba(2, 8, 20, .32); }
.arc-presets > span { display: block; margin-bottom: .55rem; color: #cbd5e1; font-size: .75rem; font-weight: 800; }
.arc-preset-list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .45rem; }
.arc-preset-list button {
    min-width: 0; padding: .55rem .45rem; border: 1px solid var(--arc-border); border-radius: 10px;
    background: rgba(30, 41, 59, .65); color: #e2e8f0; font: inherit; font-size: .78rem; font-weight: 800; cursor: pointer;
}
.arc-preset-list button small { display: block; margin-top: .16rem; overflow: hidden; color: var(--arc-muted); font-size: .6rem; font-weight: 650; text-overflow: ellipsis; }
.arc-preset-list button:hover, .arc-preset-list button.is-active { border-color: rgba(56, 189, 248, .55); background: rgba(14, 165, 233, .16); color: #7dd3fc; }
.arc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.arc-card { padding: 1rem; border: 1px solid var(--arc-border); border-radius: 16px; background: rgba(15, 23, 42, .76); }
.arc-card-head { margin-bottom: .8rem; }
.arc-card-head h3 { margin: 0; color: #f1f5f9; font-size: .9rem; }
.arc-step { width: 1.4rem; height: 1.4rem; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(145deg, #38bdf8, #0284c7); color: #07111f; font-size: .7rem; font-weight: 900; }
.arc-icon-btn { width: 36px; height: 36px; border: 1px solid var(--arc-border); border-radius: 9px; background: rgba(30, 41, 59, .65); color: #7dd3fc; font-size: 1.1rem; cursor: pointer; }
.arc-lock { padding: .25rem .55rem; border-radius: 999px; background: rgba(52, 211, 153, .09); color: #86efac; font-size: .66rem; font-weight: 800; }
.arc-dimension-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: .6rem; align-items: end; }
.arc-dimension-row label > span { display: block; margin-bottom: .35rem; color: #cbd5e1; font-size: .72rem; font-weight: 750; }
.arc-input-wrap { position: relative; }
.arc-input-wrap input {
    width: 100%; min-height: 48px; box-sizing: border-box; padding: .65rem 2.5rem .65rem .75rem;
    border: 1px solid var(--arc-border); border-radius: 11px; background: rgba(2, 8, 20, .6); color: #f8fafc;
    font: inherit; font-size: .95rem; font-weight: 700;
}
.arc-input-wrap input:focus { outline: 0; border-color: rgba(56, 189, 248, .65); box-shadow: 0 0 0 3px rgba(14, 165, 233, .14); }
.arc-input-wrap em { position: absolute; right: .7rem; top: 50%; transform: translateY(-50%); color: var(--arc-muted); font-size: .68rem; font-style: normal; }
.arc-dimension-x { padding-bottom: .75rem; color: var(--arc-muted); font-size: 1rem; font-weight: 800; }
.arc-help { margin: .5rem 0 0; color: var(--arc-muted); font-size: .68rem; line-height: 1.4; }
.arc-help--top { margin: -.25rem 0 .8rem; }
.arc-preview-stage { min-height: 190px; margin-top: .8rem; display: grid; place-items: center; border: 1px dashed rgba(56, 189, 248, .22); border-radius: 12px; background: rgba(2, 8, 20, .3); overflow: hidden; }
.arc-preview-shape { display: grid; place-items: center; min-width: 34px; min-height: 28px; border: 2px solid rgba(56, 189, 248, .7); border-radius: 8px; background: linear-gradient(145deg, rgba(14, 165, 233, .22), rgba(99, 102, 241, .15)); transition: width .2s ease, height .2s ease; }
.arc-preview-shape span { color: #e0f2fe; font-size: .7rem; font-weight: 850; }
.arc-scale-actions { justify-content: flex-start; margin-top: .8rem; }
.arc-scale-chip { padding: .35rem .65rem; border: 1px solid var(--arc-border); border-radius: 999px; background: rgba(30, 41, 59, .6); color: #cbd5e1; font-size: .7rem; font-weight: 800; cursor: pointer; }
.arc-scale-chip:hover { border-color: rgba(56, 189, 248, .45); color: #7dd3fc; }
.arc-primary-btn { width: 100%; min-height: 46px; margin-top: 1rem; border: 0; border-radius: 11px; background: linear-gradient(135deg, #0ea5e9, #6366f1); color: #fff; font: inherit; font-weight: 800; cursor: pointer; }
.arc-primary-btn:hover { filter: brightness(1.06); }
.arc-error { margin-top: .65rem; padding: .65rem .75rem; border: 1px solid rgba(248, 113, 113, .3); border-radius: 9px; background: rgba(248, 113, 113, .08); color: #fca5a5; font-size: .75rem; }
.arc-result { display: grid; grid-template-columns: minmax(150px, .7fr) 2fr; gap: 1rem; margin-top: 1rem; padding: 1rem; border: 1px solid rgba(52, 211, 153, .2); border-radius: 16px; background: rgba(6, 78, 59, .08); }
.arc-result-main { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding-right: 1rem; border-right: 1px solid var(--arc-border); }
.arc-result-main > span, .arc-result-stats span { color: var(--arc-muted); font-size: .68rem; }
.arc-result-main > strong { margin: .2rem 0 .35rem; color: #86efac; font-size: 1.8rem; letter-spacing: -.04em; }
.arc-result-main .arc-text-btn { padding: 0; }
.arc-result-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.arc-result-stats > div { padding: .65rem .75rem; border: 1px solid rgba(148, 163, 184, .1); border-radius: 10px; background: rgba(2, 8, 20, .28); }
.arc-result-stats span, .arc-result-stats strong { display: block; }
.arc-result-stats strong { margin-top: .2rem; color: #e2e8f0; font-size: .78rem; word-break: break-word; }
.aspect-ratio-calc-app button:focus-visible { outline: 3px solid rgba(56, 189, 248, .45); outline-offset: 3px; }
@media (max-width: 850px) { .arc-preset-list { grid-template-columns: repeat(3, 1fr); } .arc-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
    .arc-shell { padding: .85rem; border-radius: 16px; }
    .arc-preset-list { grid-template-columns: repeat(2, 1fr); }
    .arc-result { grid-template-columns: 1fr; }
    .arc-result-main { padding: 0 0 .75rem; border-right: 0; border-bottom: 1px solid var(--arc-border); }
    .arc-result-stats { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .aspect-ratio-calc-app *, .aspect-ratio-calc-app *::before, .aspect-ratio-calc-app *::after { transition-duration: .01ms !important; } }