:root { color-scheme: light dark; --widget-bg: #f5f5f5; --widget-ink: #171717; --widget-card: #e7e0ec; --widget-button: #f7f2fa; --widget-line: #cac4d0; }
@media (prefers-color-scheme: dark) { :root { --widget-bg: #1e1e1e; --widget-ink: #f2f2f2; --widget-card: #49454f; --widget-button: #211f26; --widget-line: #49454f; } }
.widget-body { margin: 0; padding: 0; background: transparent; color: var(--widget-ink); font: 14px system-ui, sans-serif; }
.live-location-card { margin: 4px 8px; border: 1px solid var(--widget-line); border-radius: 16px; overflow: hidden; background: var(--widget-card); color: var(--widget-ink); }
.live-location-header { display: flex; align-items: center; gap: 8px; padding: 0 10px; min-height: 48px; }
.live-location-spacer { flex: 1; }
.live-location-button { border: 1px solid var(--widget-line); background: var(--widget-button); color: inherit; border-radius: 8px; padding: 8px 12px; min-height: 40px; font: 500 14px system-ui, sans-serif; cursor: pointer; white-space: nowrap; }
.live-location-button:disabled { opacity: .4; cursor: default; }
.live-location-close { border: 0; background: transparent; color: inherit; font-size: 22px; width: 40px; height: 40px; cursor: pointer; }
.live-location-viewport { position: relative; aspect-ratio: 1; width: 100%; }
.live-location-map { position: absolute; inset: 0; }
.live-location-status { position: absolute; left: 8px; right: 114px; top: 8px; max-height: 88px; overflow: auto; padding: 4px 8px; border-radius: 6px; color: var(--widget-bg); background: var(--widget-ink); font: 12px system-ui, sans-serif; }
.live-location-layer { position: absolute; right: 6px; top: 8px; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--widget-line); background: var(--widget-button); color: inherit; cursor: pointer; }
.live-location-layer[aria-pressed="true"] { box-shadow: inset 0 0 0 2px currentColor; }
.live-location-viewport[hidden], .live-location-status[hidden] { display: none; }
.gif-search { position: absolute; inset: 0; z-index: 40; display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--widget-bg); color: var(--widget-ink); font: 14px system-ui, sans-serif; box-sizing: border-box; }
.gif-search form { display: flex; gap: 8px; }
.gif-search input { flex: 1; width: 0; min-width: 0; border: 1px solid var(--widget-line); background: var(--widget-card); color: inherit; border-radius: 12px; padding: 14px; font: inherit; }
.gif-search button[type="submit"] { border: 0; border-radius: 24px; background: #1565c0; color: white; padding: 10px 16px; font: inherit; cursor: pointer; }
.gif-search button:disabled { opacity: .4; }
.gif-results { overflow: auto; flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, 1fr); align-content: start; gap: 8px; }
.gif-result { padding: 0; border: 0; background: transparent; cursor: pointer; min-width: 0; height: 90px; }
.gif-result img { width: 100%; height: 100%; object-fit: contain; }