/* Home Screen with the medium and large widgets, from the interaction design canvas
   (WidgetHome / WidgetMedium / WidgetLarge artboards). Laid out at 390 × 844 and scaled. */

.wh {
  position: absolute; left: 0; top: 0; width: 390px; height: 844px; transform-origin: 0 0; overflow: hidden;
  background: linear-gradient(180deg, #5B8DEF, #A77BF3);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Rounded", "PingFang SC", "Hiragino Sans GB", sans-serif;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.wh button { font-family: inherit; border: none; padding: 0; margin: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.wh svg { flex: none; }
.wh svg.i { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.wg-cat { display: grid; place-items: center; }
.wh-status { position: absolute; left: 0; right: 0; top: 0; height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 6px 30px 0 44px; color: #fff; font-size: 17px; font-weight: 600; font-family: -apple-system, "SF Pro Text", sans-serif; }
.wh-status svg { height: 13px; fill: currentColor; }
.wh-status .icons { display: flex; gap: 6px; align-items: center; }
.wh-island { position: absolute; left: 50%; top: 11px; width: 126px; height: 37px; margin-left: -63px; border-radius: 20px; background: #000; }
.wh-home { position: absolute; left: 50%; bottom: 8px; width: 139px; height: 5px; margin-left: -70px; border-radius: 3px; background: #fff; }

.wg { position: absolute; left: 13px; width: 364px; box-sizing: border-box; padding: 13px 12px; border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; }
.wg-medium { top: 64px; height: 170px; gap: 6px; background: #FFFFFF; color: #1D1D1F; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .35); }
.wg-large { top: 256px; height: 382px; gap: 8px; background: linear-gradient(180deg, #26262B, #17171A); color: #FFFFFF; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .45); }
.wh.dark .wg-medium { background: #1C1C1E; color: #F5F5F7; }

.wg-brand { display: flex; align-items: center; gap: 5px; flex: none; }
.wg-brand img { width: 16px; height: 16px; border-radius: 4.5px; }
.wg-brand span { font-size: 11px; font-weight: 600; white-space: nowrap; color: #86868B; }
.wh.dark .wg-medium .wg-brand span { color: #98989F; }
.wg-large .wg-brand span { color: rgba(255, 255, 255, .75); }
.wg-row { display: flex; align-items: center; height: 26px; flex: none; }

/* Category buttons */
.wg-cats { flex-grow: 1; display: flex; align-items: center; gap: 5px; margin-left: 8px; }
.wg-cat { width: 26px; height: 26px; border-radius: 13px; font-size: 11px; font-weight: 800; background: var(--tint16); color: var(--ink); }
.wg-cat.on, .wg-lcat.on { background: linear-gradient(135deg, var(--s), var(--e)); color: #FFFFFF; }
.wg-more { width: 20px; height: 26px; border-radius: 13px; display: flex; align-items: center; justify-content: center; margin-left: auto; background: rgba(0, 0, 0, .07); color: inherit; }
.wh.dark .wg-medium .wg-more { background: rgba(255, 255, 255, .07); }
.wg-lcats { display: flex; align-items: center; gap: 4px; height: 26px; flex: none; }
.wg-lcat { flex: 1 1 0; min-width: 0; height: 26px; border-radius: 13px; font-size: 11px; font-weight: 700; background: var(--tint28); color: var(--e); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 4px; }
.wg-large .wg-more { width: 20px; height: 24px; border-radius: 12px; background: rgba(255, 255, 255, .1); }

/* Medium body */
.wg-mbody { flex-grow: 1; display: flex; gap: 6px; min-height: 0; }
.wg-mleft { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; }
.wg-mhead { display: flex; align-items: center; gap: 4px; }
.wg-mhead b { font-size: 12px; font-weight: 900; color: var(--deep); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wg-mhead .sp { flex-grow: 1; }
.wg-del { width: 28px; height: 26px; border-radius: 13px; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .07); color: inherit; }
.wh.dark .wg-medium .wg-del { background: rgba(255, 255, 255, .07); }
.wg-step { display: flex; align-items: center; height: 26px; border-radius: 13px; background: var(--tint18); color: var(--deep); flex: none; }
.wg-step button { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; background: transparent; color: inherit; }
.wg-step span { min-width: 22px; text-align: center; font-size: 11px; font-weight: 700; }
.wg-value { display: flex; align-items: baseline; gap: 3px; min-width: 0; white-space: nowrap; }
.wg-value .n { font-weight: 800; letter-spacing: -.5px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.wg-value .u { font-size: 11px; font-weight: 700; color: #86868B; }
.wh.dark .wg-value .u { color: #98989F; }
.wg-swap { height: 26px; border-radius: 13px; background: #1D1D1F; color: #FFFFFF; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 5px; white-space: nowrap; overflow: hidden; }
.wh.dark .wg-swap { background: #3A3A3C; }
.wg-swap svg { stroke: var(--e); }

/* Result tiles */
.wg-res { flex-shrink: 0; display: flex; flex-direction: column; gap: 4px; }
.wg-medium .wg-res { width: 96px; }
.wg-large .wg-res { width: 92px; }
.wg-r { box-sizing: border-box; padding: 0 7px; border-radius: 9px; display: flex; align-items: center; justify-content: flex-end; gap: 3px; background: rgba(0, 0, 0, .05); white-space: nowrap; overflow: hidden; }
.wg-medium .wg-r { height: 28px; }
.wg-large .wg-r { height: 30px; background: rgba(255, 255, 255, .08); }
.wh.dark .wg-medium .wg-r { background: rgba(255, 255, 255, .05); }
.wg-r b { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }
.wg-r i { font-style: normal; font-size: 10px; font-weight: 700; color: #86868B; overflow: hidden; text-overflow: ellipsis; max-width: 36px; }
.wg-large .wg-r i { color: rgba(255, 255, 255, .6); }
.wg-r.first { background: linear-gradient(135deg, var(--tint28), var(--etint28)); color: var(--deep); }
.wg-large .wg-r.first { background: linear-gradient(135deg, var(--tint30), var(--etint30)); color: var(--e); }
.wg-r.first b { font-size: 15px; }
.wg-r.first i { color: inherit; }
.wg-pager { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 28px; flex-shrink: 0; }
.wg-pager span, .wg-lpager span { font-size: 10px; font-weight: 600; color: #86868B; }
.wg-pg { width: 28px; height: 28px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .08); color: inherit; }
.wh.dark .wg-medium .wg-pg { background: rgba(255, 255, 255, .08); }
.wg-large .wg-pg { background: rgba(255, 255, 255, .14); color: #FFFFFF; }
.wg-lpager { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: auto; }
.wg-large .wg-lpager span { color: rgba(255, 255, 255, .7); }

/* Large body */
.wg-lval { display: flex; align-items: center; gap: 8px; flex: none; }
.wg-lval .wg-value { flex-grow: 1; }
.wg-lval .wg-value .u { font-size: 14px; color: rgba(255, 255, 255, .75); }
.wg-lstep { display: flex; align-items: center; height: 30px; border-radius: 15px; background: var(--tint30); color: var(--e); }
.wg-lstep button { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: transparent; color: inherit; }
.wg-lstep span { min-width: 22px; text-align: center; font-size: 11px; font-weight: 700; }
.wg-lbody { flex-grow: 1; min-height: 0; display: flex; gap: 8px; }
.wg-keys { flex-grow: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 6px; }
.wg-keys button { border-radius: 12px; background: rgba(255, 255, 255, .08); color: #FFFFFF; font-size: 20px; font-weight: 700; display: flex; align-items: center; justify-content: center; transition: filter .08s; }
.wg-keys button.fn { background: rgba(255, 255, 255, .16); font-size: 19px; }
.wg-keys button.unit { font-size: 13px; }
.wg-keys button.clr { font-size: 18px; }
.wg-keys button.swap { background: linear-gradient(135deg, var(--s), var(--e)); color: #2A0E00; }
.wg-keys button:active, .wg-keys button.hit { filter: brightness(1.6); }

/* Home Screen icons and dock */
.wh-apps { position: absolute; left: 13px; right: 13px; top: 662px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; justify-items: center; }
.wh-apps div { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.wh-apps .ic { width: 62px; height: 62px; border-radius: 15px; display: block; }
.wh-apps img.ic { box-shadow: 0 2px 6px rgba(0, 0, 0, .15); }
.wh-apps span.l { font-size: 12px; color: #FFFFFF; }
.wh-dock { position: absolute; left: 12px; right: 12px; bottom: 12px; height: 88px; border-radius: 32px; background: rgba(255, 255, 255, .28); }