/* Calculator widget: fills the iframe (320×230 suggested); style.css supplies the tokens and fonts. */
body { background: transparent; max-width: none; min-height: 0; padding: 0; margin: 0; }
.c-card { box-sizing: border-box; height: 100vh; min-height: 200px; display: flex; flex-direction: column; gap: .5rem; justify-content: space-between; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: .75rem .85rem .55rem; overflow: hidden; }
.c-title { font-size: .78rem; font-weight: 800; color: var(--ink); }
.c-in { display: flex; align-items: center; border: 1px solid var(--line-strong); border-radius: 10px; padding: 0 .6rem; background: var(--bg-soft); direction: ltr; }
.c-in span { font-family: var(--mono); color: var(--sub); font-weight: 700; }
.c-in input { flex: 1; min-width: 0; border: 0; background: transparent; font-family: var(--mono); font-size: 1rem; font-weight: 700; color: var(--ink); padding: .45rem .4rem; }
.c-in:focus-within { outline: 2px solid var(--btc); outline-offset: 1px; }
.c-in input:focus { outline: none; }
.c-pre { display: flex; gap: .3rem; flex-wrap: wrap; direction: ltr; }
.c-pre button { flex: 1; border: 1px solid var(--line-strong); background: var(--card); color: var(--sub); border-radius: 100px; font-family: var(--mono); font-size: .62rem; font-weight: 700; padding: .25rem .2rem; cursor: pointer; }
.c-pre button.on { border-color: var(--btc); color: var(--btc-deep); background: var(--cream); }
.c-res { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.c-res > div { background: var(--bg-soft); border-radius: 10px; padding: .4rem .5rem; min-width: 0; }
.c-k { font-size: .56rem; font-weight: 700; color: var(--dim); text-transform: uppercase; letter-spacing: .5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[dir="rtl"] .c-k { text-transform: none; letter-spacing: 0; font-size: .62rem; }
.c-v { font-family: var(--mono); font-weight: 700; font-size: .92rem; color: var(--ink); white-space: nowrap; }
.c-v.btc { color: var(--btc); }
.c-foot { display: flex; justify-content: space-between; align-items: center; gap: .5rem; text-decoration: none; border-top: 1px solid var(--line-soft); padding-top: .35rem; font-size: .56rem; color: var(--dim); }
.c-foot b { color: var(--btc); font-size: .62rem; direction: ltr; unicode-bidi: isolate; }
.c-foot:hover b { text-decoration: underline; }
[dir="rtl"] body, [dir="rtl"] .c-card { font-family: 'IBM Plex Sans Arabic', 'Inter', sans-serif; }