/* Telegram's palette wins when we are inside Telegram. Outside it those
     variables are simply absent, so the fallbacks have to carry the theme —
     and they must follow the SYSTEM, not assume light. */
  :root {
    color-scheme: light dark;
    --bg: var(--tg-theme-bg-color, #ffffff);
    --text: var(--tg-theme-text-color, #000000);
    --hint: var(--tg-theme-hint-color, #707579);
    --link: var(--tg-theme-link-color, #2481cc);
    --btn: var(--tg-theme-button-color, #2481cc);
    --btn-text: var(--tg-theme-button-text-color, #ffffff);
    --card: var(--tg-theme-secondary-bg-color, #f4f4f5);
    /* Neutral fills are derived, so they work on either background. */
    --fill: rgba(128, 128, 128, .16);
    --fill-strong: rgba(128, 128, 128, .28);
    --border: rgba(128, 128, 128, .22);
    --shadow: rgba(0, 0, 0, .35);
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: var(--tg-theme-bg-color, #17212b);
      --text: var(--tg-theme-text-color, #f5f5f5);
      --hint: var(--tg-theme-hint-color, #8b9398);
      --link: var(--tg-theme-link-color, #6ab3f3);
      --card: var(--tg-theme-secondary-bg-color, #232e39);
      --shadow: rgba(0, 0, 0, .6);
    }
  }
  * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  /* Nothing may make the page wider than the screen. On a phone, content
     that pokes out past the right edge widens the LAYOUT viewport itself
     (innerWidth doubles to the 200% track's width), and every fixed layer —
     the account sheet, the lightbox — then sizes to that: a page you can
     scroll a full screen sideways, a sheet two pages wide, a swipe that no
     longer switches tabs. body { overflow-x: hidden } alone does not stop it;
     clip on the root does. `hidden` first for WebViews without `clip`. */
  html, body { overflow-x: hidden; overflow-x: clip; overscroll-behavior-x: none; }
  /* The page itself never scrolls; the panes do. The body is exactly one
     screen, topbar on top and the viewport taking whatever is left, so no
     guessed topbar height can leave the page a few pixels too tall (the
     second, nearly empty scrollbar on desktop). */
  body {
    height: 100vh; display: flex; flex-direction: column;
    margin: 0; background: var(--bg); color: var(--text);
    font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .hidden { display: none !important; }

  .topbar { display: flex; align-items: center; gap: 8px; padding-inline-end: 8px;
            position: sticky; top: 0; z-index: 6; background: var(--bg); }
  .topbar .tabs { flex: 1; position: static; }
  .avatarwrap { position: relative; flex: none; }
  .avatar { width: 30px; height: 30px; border-radius: 50%; cursor: pointer; overflow: hidden;
            background: rgba(128,128,128,.25); display: flex; align-items: center;
            justify-content: center; font-size: 13px; font-weight: 700; color: var(--text); }
  .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
  /* A supporter's avatar glows, gently and always: the thank-you they see most. */
  .avatarwrap.supporter .avatar { animation: avatar-glow 2.8s ease-in-out infinite; }
  @keyframes avatar-glow {
    0%, 100% { box-shadow: 0 0 4px 1px rgba(246,195,67,.55); }
    50% { box-shadow: 0 0 10px 4px rgba(246,195,67,.95); }
  }
  /* Supporter status shows ON the avatar, so the entry point is also the status. */
  .crown { position: absolute; right: -3px; bottom: -3px; width: 14px; height: 14px; z-index: 2;
           border-radius: 50%; background: #f5b301; border: 2px solid var(--bg); }
  /* The donate heart: solid gold, breathing, and now and then a wiggle —
     visible enough to invite a tap, quiet enough not to nag. Only shown to
     users who do not support the bot yet. */
  .stars { flex: none; font-size: 17px; line-height: 1; cursor: pointer; padding: 4px; color: #f6c343;
           transform-origin: 50% 60%; border-radius: 50%;
           animation: breathe 2.8s ease-in-out infinite; }
  @keyframes breathe {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 2px rgba(246,195,67,.5)); }
    50% { transform: scale(1.12); filter: drop-shadow(0 0 7px rgba(246,195,67,.95)); }
  }
  .stars .icon { width: 22px; height: 22px; }
  .stars.wiggle { animation: wiggle .7s ease-in-out; }
  @keyframes wiggle {
    0%, 100% { transform: rotate(0) scale(1); }
    15% { transform: rotate(-14deg) scale(1.18); }
    35% { transform: rotate(11deg) scale(1.14); }
    55% { transform: rotate(-8deg) scale(1.1); }
    75% { transform: rotate(5deg) scale(1.05); }
  }
  @media (prefers-reduced-motion: reduce) {
    .stars, .stars.wiggle, .btn.buy.glow, .avatarwrap.supporter .avatar { animation: none; }
    .avatarwrap.supporter .avatar { box-shadow: 0 0 6px 2px rgba(246,195,67,.8); }
  }
  .gate { position: fixed; inset: 0; z-index: 60; background: var(--bg);
          display: flex; align-items: center; justify-content: center; padding: 24px; }
  .gatebox { max-width: 340px; text-align: center; }
  .gatetitle { font-size: 19px; font-weight: 700; margin-bottom: 8px; }
  .gatetext { font-size: 14px; opacity: .75; margin-bottom: 18px; line-height: 1.5; }
  .gatenote { font-size: 12px; opacity: .55; margin-top: 14px; line-height: 1.5; }
  .scrim { position: fixed; inset: 0; z-index: 46; background: rgba(0,0,0,.25); }
  .menu { position: fixed; top: 46px; inset-inline-end: 8px; z-index: 47; min-width: 190px;
          background: var(--bg); border-radius: 12px; overflow: hidden;
          box-shadow: 0 8px 28px rgba(0,0,0,.35); }
  .menu-item { padding: 12px 14px; font-size: 14px; cursor: pointer;
               display: flex; align-items: center; gap: 10px; }
  .menu-item:active { background: rgba(128,128,128,.18); }
  .menu-item .icon { flex: none; opacity: .8; }
  .sheet { position: fixed; inset: 0; z-index: 45; background: var(--bg);
           display: flex; flex-direction: column; }
  /* Same height and right edge as the topbar, so the avatar does not move
     when a page opens. Back on the left, page actions then account on the right. */
  .sheet-head { display: flex; align-items: center; gap: 8px; padding: 0 8px 0 4px; height: 45px;
                border-bottom: 1px solid rgba(128,128,128,.2); flex: none; }
  .sheet-title { font-size: 15px; font-weight: 700; flex: 1; min-width: 0;
                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sheet-back { color: var(--link); }
  .sheet-back:hover { color: var(--link); }
  .sheet-actions { display: flex; align-items: center; gap: 4px; }
  .sheet-body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 14px; min-width: 0;
                overflow-wrap: anywhere; }
  .sheet-foot { flex: none; text-align: center; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); }
  .sheet-foot:empty { display: none; }
  .sheet-foot a { color: var(--hint); font-size: 12px; text-decoration: none; }
  .card { background: rgba(128,128,128,.10); border-radius: 12px; padding: 12px; margin-bottom: 10px; }
  .card h4 { margin: 0 0 8px; font-size: 13px; }
  .kv { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 4px 0; }
  .kv span:last-child { opacity: .75; text-align: end; }
  .toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px;
            padding: 10px 4px; font-size: 14px; cursor: pointer; border-radius: 8px;
            user-select: none; -webkit-tap-highlight-color: transparent; }
  .toggle:active { background: rgba(128,128,128,.14); }
  .switch { width: 42px; height: 24px; border-radius: 999px; background: rgba(128,128,128,.4);
            position: relative; cursor: pointer; flex: none; transition: background .15s ease; }
  .switch i { position: absolute; top: 3px; inset-inline-start: 3px; width: 18px; height: 18px; border-radius: 50%;
              background: #fff; transition: transform .15s ease; }
  .switch.on { background: var(--link); }
  .switch.on i { transform: translateX(18px); }
  [dir="rtl"] .switch.on i { transform: translateX(-18px); }
  .switch.sm { width: 36px; height: 21px; }
  .switch.sm i { width: 15px; height: 15px; }
  .switch.sm.on i { transform: translateX(15px); }
  [dir="rtl"] .switch.sm.on i { transform: translateX(-15px); }
  .switch.locked { opacity: .45; cursor: not-allowed; }
  /* Engines × (Search, Button); a column's master switch sits under its title. */
  .etable { width: 100%; border-collapse: collapse; font-size: 14px; }
  .etable th { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
               color: var(--hint); text-align: center; padding: 0 4px 6px; white-space: nowrap; }
  .etable th:first-child { text-align: start; }
  .etable th.m { vertical-align: bottom; }
  .etable th.m .switch { margin: 6px auto 0; }
  .etable td { padding: 7px 4px; border-top: 1px solid rgba(128,128,128,.2); }
  .etable td.c { text-align: center; width: 72px; }
  .etable td.c .switch { margin: 0 auto; }
  .etable td.c svg, .etable .name svg { color: var(--hint); width: 16px; height: 16px; vertical-align: middle; }
  .etable .name { display: flex; align-items: center; gap: 8px; }
  .etable .name img { width: 14px; height: 14px; border-radius: 3px; }
  .etable tr.linkrow td { border-top: 2px solid rgba(128,128,128,.2); }
  .etable.searchoff td:nth-child(2) > *, .etable.buttonoff td:nth-child(3) > * { opacity: .35; pointer-events: none; }
  /* "Search off": the picture was stored, no engine asked. Opens Settings. */
  .offbtn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 9px; border: 0;
            background: rgba(128,128,128,.16); font: inherit; font-size: 13px; color: var(--text);
            white-space: nowrap; cursor: pointer; flex: none; }
  .offbtn svg { width: 16px; height: 16px; color: var(--hint); }
  .offbtn.compact { padding: 6px; }
  .btn { display: block; width: 100%; padding: 11px; border: 0; border-radius: 10px; cursor: pointer;
         font-size: 14px; font-weight: 600; margin-top: 8px; background: rgba(128,128,128,.18);
         color: var(--text); text-align: center; }
  .btn.buy { background: var(--link); color: #fff; }
  .btn.buy.glow { box-shadow: 0 0 0 0 rgba(246,195,67,.7); animation: glow 2.2s ease-in-out infinite; }
  @keyframes glow {
    0%, 100% { box-shadow: 0 0 6px 1px rgba(246,195,67,.45); }
    50% { box-shadow: 0 0 16px 5px rgba(246,195,67,.85); }
  }
  .btn.danger { background: #d3453b; color: #fff; }
  .tx { display: flex; justify-content: space-between; gap: 10px; font-size: 12px;
        padding: 7px 0; border-bottom: 1px solid rgba(128,128,128,.16); }
  .tx:last-child { border-bottom: 0; }
  .tx .amt { font-weight: 700; flex: none; }
  .badge { font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 4px;
           background: rgba(128,128,128,.25); margin-inline-start: 5px; }
  .badge.ok { background: #2e7d32; color: #fff; }
  /* The plan the user is on right now, unmistakable at a glance. */
  .tx.active { background: rgba(46,125,50,.12); border-radius: 8px; padding: 7px 8px; margin: 0 -8px; }
  .plan-status { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 12px;
                 font-weight: 600; font-size: 14px; }
  .plan-status.on { background: rgba(46,125,50,.14); }
  .plan-status.off { background: rgba(128,128,128,.12); }
  .plan-status .big { width: 22px; height: 22px; flex: none; }
  .plan-status .big.heart { color: #f6c343; fill: currentColor; stroke: none; }
  .plan-status small { display: block; font-weight: 400; opacity: .75; font-size: 12px; margin-top: 3px; }
  .plan-status + .kv { margin-top: 8px; }
  .perk-why { font-size: 13px; line-height: 1.45; opacity: .9; }
  .perk { display: flex; gap: 10px; padding: 7px 0; border-bottom: 1px solid rgba(128,128,128,.14); }
  .perk:last-child { border-bottom: 0; }
  .perk-icon { flex: none; width: 24px; display: flex; justify-content: center; padding-top: 1px; }
  .perk-icon .icon { width: 18px; height: 18px; }
  .icon.inline { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -0.17em;
                 margin-inline-end: 6px; }
  .icon.inline.heart { margin-inline: 2px 0; color: #e0a800; }
  .privacy-text { display: block; white-space: pre-wrap; font-size: 13px; line-height: 1.5; }
  /* richText makes every link a.plain (right for result fields); the policy
     is prose, so its links must look like links. */
  .privacy-text a.plain { color: var(--link); text-decoration: underline; }
  .perk-title { font-size: 13px; font-weight: 600; }
  .perk-sub { font-size: 12px; opacity: .7; margin-top: 1px; }
  .lang-select {
    width: 100%; margin-top: 6px; padding: 10px 12px; border-radius: 10px;
    border: 1px solid var(--line, rgba(128,128,128,.25));
    background: var(--tg-theme-secondary-bg-color, #f4f4f5);
    color: var(--tg-theme-text-color, #111); font: inherit;
  }
  /* Themed like every other link in the app; without a colour of its own it
     fell back to the browser default (blue, purple once visited). */
  .browser-url { display: block; margin-top: 6px; font-weight: 600; word-break: break-all;
                 color: var(--link); text-decoration: none; }
  .perk-thanks { font-size: 12px; opacity: .7; text-align: center; margin-top: 8px; }
  /* The thank-you popup after a purchase: above the sheet, below the confetti. */
  .pop { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center;
         justify-content: center; padding: 20px; background: rgba(0,0,0,.45); }
  .pop-card { width: 100%; max-width: 360px; border-radius: 14px; padding: 16px;
              background: var(--bg); box-shadow: 0 12px 40px rgba(0,0,0,.35); }
  .pop-title { font-size: 16px; font-weight: 700; margin-bottom: 10px; }
  .pop-line { font-size: 13px; line-height: 1.5; display: flex; gap: 8px; padding: 3px 0; }
  .pop-line .perk-icon { width: 22px; }
  .pop-card .btn { margin-top: 14px; }
  .pop-title.lockhead { display: flex; align-items: center; gap: 8px; }
  .pop-title.lockhead .eng { position: static; font-size: 10px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; display: flex; align-items: center; gap: 4px; padding: 3px 6px;
    border-radius: 6px; background: rgba(128,128,128,.18); }
  .pop-title.lockhead .eng img { width: 14px; height: 14px; border-radius: 3px; display: block; }
  .pop-line .hint { color: var(--hint); font-size: 12px; }
  /* Confetti after a purchase: fixed pieces that fall and fade, then are removed. */
  .confetti { position: fixed; top: -12px; width: 8px; height: 12px; pointer-events: none; z-index: 9999;
              animation: confetti-fall 2.4s ease-out forwards; }
  @keyframes confetti-fall {
    to { transform: translateY(110vh) rotate(720deg); opacity: 0; }
  }
  .enginelinks { margin: 12px 0 4px; }
  .elhead { font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
            opacity: .6; margin-bottom: 6px; font-weight: 700; }
  .elrow { display: flex; flex-wrap: wrap; gap: 6px; }
  /* Searched this picture: solid border; not searched: dashed. */
  .elbtn { display: flex; align-items: center; gap: 5px; padding: 6px 9px; border-radius: 9px;
           background: rgba(128,128,128,.16); color: var(--text); font-size: 12px;
           font-weight: 600; text-decoration: none; border: 1px dashed rgba(128,128,128,.45); }
  .elbtn.ran { border-style: solid; }
  .elbtn img { width: 13px; height: 13px; border-radius: 3px; display: block; }
  /* Compact: icon-only circles under a history entry. */
  .enginelinks.compact { margin: 8px 0 2px; }
  .compact .elrow { gap: 7px; }
  .compact .elbtn { width: 28px; height: 28px; padding: 0; border-radius: 50%;
                    justify-content: center; gap: 0; }
  .compact .elbtn img { width: 15px; height: 15px; border-radius: 50%; }
  .elinitial { font-size: 11px; font-weight: 700; opacity: .8; }
  .scopes { margin-inline-start: 5px; opacity: .55; white-space: nowrap; }
  .originicon { width: 11px; height: 11px; margin-inline-start: 5px; vertical-align: -1px; opacity: .5; }
  .scopeicon { width: 11px; height: 11px; vertical-align: middle; margin-inline-start: 2px; }
  /* Two classes on purpose: a bare .favicon loses to `.tile img`, which is how
     these ended up stretched to the full tile width. */
  .spinner {
    display: inline-block; width: 12px; height: 12px; margin-inline-end: 6px;
    vertical-align: -1px; border-radius: 50%;
    border: 2px solid var(--hint); border-top-color: transparent;
    animation: spin .7s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }
  /* Respect a user who asked for less motion: keep the shape, drop the spin. */
  @media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } }
  .withicon .favicon, .cap .favicon {
    width: 14px; height: 14px; min-width: 14px; max-width: 14px;
    border-radius: 3px; flex: none; object-fit: contain; display: block; }
  .withicon { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
  .withicon > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tabs { display: flex; position: sticky; top: 0; z-index: 5; background: var(--bg);
          border-bottom: 1px solid rgba(128,128,128,.2); }
  .tab { flex: 1; padding: 12px 8px; text-align: center; cursor: pointer;
         color: var(--hint); font-weight: 500; border-bottom: 2px solid transparent;
         transition: color .15s, border-color .15s; }
  .tab.on { color: var(--link); border-bottom-color: var(--link); }

  /* Two panes side by side; swiping slides the track. */
  /* Each pane scrolls on its own. With one shared scroller the short Search
     pane inherited the tall History pane's scroll height. */
  /* clip, not just hidden: a hidden box is still a scroll container, and a
     WebView scrolls it sideways on its own (focus, find-in-page), after which
     History shows through the scroll while the tabs still say Search and the
     swipe is a page off. A clipped box cannot scroll at all. Horizontal
     panning is ours (the swipe); the browser only pans vertically. */
  .viewport { overflow: hidden; overflow: clip; flex: 1; min-height: 0;
              touch-action: pan-y pinch-zoom; }
  .track { display: flex; width: 200%; height: 100%; transition: transform .25s ease; }
  .track.dragging { transition: none; }
  /* A pane scrolls up and down only. pan-y leaves the sideways gesture to
     the swipe handler instead of letting the browser start a native
     horizontal scroll that cancels it (the swipe to History "not working"). */
  .pane { width: 50%; min-width: 0; padding: 12px; height: 100%; overflow-y: auto; overflow-x: hidden;
          -webkit-overflow-scrolling: touch; touch-action: pan-y pinch-zoom; }
  /* While a dialog is open the page behind it must not scroll. */
  body.locked .pane { overflow: hidden; }

  .drop { border: 2px dashed rgba(128,128,128,.4); border-radius: 12px;
          padding: 22px 16px; text-align: center; color: var(--hint); cursor: pointer; }
  .drop.hot { border-color: var(--link); color: var(--link); }
  .row { display: flex; gap: 8px; margin-top: 10px; }
  input[type=url] { flex: 1; min-width: 0; padding: 11px 12px; border-radius: 10px; font-size: 15px;
    border: 1px solid rgba(128,128,128,.35); background: var(--bg); color: var(--text); }
  button.primary { background: var(--btn); color: var(--btn-text); border: 0; border-radius: 10px;
    padding: 11px 16px; font-size: 15px; font-weight: 600; cursor: pointer; }
  button.primary:disabled { opacity: .5; }
  .bar { height: 3px; border-radius: 3px; background: rgba(128,128,128,.25); overflow: hidden; margin-top: 10px; }
  .bar > i { display: block; height: 100%; width: 0; background: var(--btn); transition: width .2s; }

  .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 8px; }
  .tile { position: relative; border-radius: 10px; overflow: hidden; background: var(--card);
          aspect-ratio: 1/1; cursor: pointer; }
  /* The thumbnail fills the tile — but not the little icons inside the caption,
     which this rule used to stretch to the full tile width. */
  .tile > img, .tile > video { width: 100%; height: 100%; object-fit: cover; display: block; }
  .tile .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 6px 5px;
    font-size: 11px; line-height: 1.25; color: #fff;
    background: linear-gradient(transparent, rgba(0,0,0,.82));
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tile .eng { position: absolute; top: 5px; inset-inline-start: 5px; font-size: 9px; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase; color: #fff;
    background: rgba(0,0,0,.55); padding: 2px 5px; border-radius: 5px;
    display: flex; align-items: center; gap: 3px; }
  .tile .eng img { width: 10px; height: 10px; border-radius: 2px; display: block; }
  .tile .sim { position: absolute; top: 5px; inset-inline-end: 5px; font-size: 9px; font-weight: 700;
    color: #fff; background: rgba(0,0,0,.55); padding: 2px 5px; border-radius: 5px; }
  .tile.locked > img { filter: blur(11px); transform: scale(1.15); }
  /* Google, what supporters pay for first: a golden glow (the Donate button's). */
  .tile.locked.teaser { box-shadow: 0 0 0 2px rgba(246,195,67,.9), 0 0 14px 2px rgba(246,195,67,.55); }
  .tile.locked.teaser .lockwrap { color: #f6c343; }
  /* Nothing behind it to blur, so the tile supplies its own backdrop. */
  .tile.locked.standing { background: rgba(128,128,128,.18); }
  .tile.locked .lockwrap { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 4px;
    align-items: center; justify-content: center; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6);
    background: rgba(0,0,0,.25); font-size: 11px; font-weight: 600; }
  .tile.empty { display: flex; align-items: center; justify-content: center;
                color: var(--hint); font-size: 11px; text-align: center; padding: 8px; }

  .group { margin-bottom: 18px; }
  .ghead { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
  .ghead .src { width: 44px; height: 44px; border-radius: 8px; object-fit: cover;
                background: rgba(128,128,128,.18); flex: none; cursor: pointer; }
  .ghead .info { flex: 1; min-width: 0; }
  .ghead .when { font-size: 12px; color: var(--hint); }
  .ghead .cnt { font-size: 12px; color: var(--hint); }
  .ghead .cnt.old { display: inline-flex; align-items: center; gap: 2px; }
  .iconbtn { padding: 6px; cursor: pointer; background: none; border: 0; color: var(--hint);
             border-radius: 8px; line-height: 0; flex: none; }
  .iconbtn:hover { color: #e53935; background: rgba(128,128,128,.14); }
  .iconbtn.inline { padding: 2px; }
  .iconbtn.inline svg { width: 14px; height: 14px; }
  /* History rows fold: a caret turns, the row's own actions appear beside it
     only while open. Collapsed, the grid is one line of preview tiles. */
  .ghead .acts { display: flex; align-items: center; gap: 2px; flex: none; }
  .ghead .acts .iconbtn.hidden { display: none; }
  .caret .icon { transition: transform .2s ease; }
  .group.open .caret .icon { transform: rotate(180deg); }
  .caret:hover { color: var(--text); }
  .ghead.fold { cursor: pointer; }
  /* Three peek tiles. A third of a phone is a thumbnail; a third of a desktop
     pane is a poster, so the column is capped and the row stays left. */
  .group.folded .grid { grid-template-columns: repeat(3, minmax(0, 160px)); }

  /* A wide window is not a tall phone: the content is centred instead of
     stretched, and the history becomes a grid instead of one long column.
     The cap goes on the pane's CHILDREN, never on .pane itself — a pane is
     half of a 200%-wide track, so a percentage there resolves against the
     track and centres the column off-screen. */
  @media (min-width: 900px) {
    .pane > * { max-width: 1100px; margin-inline: auto; }
    .sheet-body > * { max-width: 1100px; margin-inline: auto; }
    /* The tabs sit over the same column, so the two edges line up. */
    /* width: the body is a flex column, where an auto-margined child
       shrinks to its content instead of filling the column. */
    .topbar { max-width: 1116px; margin-inline: auto; width: 100%; }
    .sheet-head { max-width: 1112px; margin-inline: auto; width: 100%; }
    #list { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
            gap: 16px; align-items: start; }
    #list > .group { margin-bottom: 0; }
    /* An opened row stays in its own column — the grid must not reflow around
       it. Its result tiles simply lay out inside that column. */
    #list > .rb, .centre { grid-column: 1 / -1; }
    /* In a column a capped tile leaves a gap, so the peek row fills it. */
    .group.folded .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  .group.folded .grid .tile { display: none; }
  .group.folded .grid .tile.peek { display: block; }
  .icon { width: 17px; height: 17px; display: block; }

  .again { margin-top: 8px; padding: 9px; border-radius: 10px; cursor: pointer;
           display: flex; align-items: center; justify-content: center; gap: 6px;
           background: rgba(128,128,128,.16); color: var(--text); font-size: 13px; font-weight: 600; }
  /* Same spot and shape as "Search again", but a state, not a button. */
  .again.pending { cursor: default; color: var(--hint); }
  .again.pending .spinner { margin-inline-end: 0; }
  .upsell { margin-top: 8px; padding: 10px; border-radius: 10px; cursor: pointer; text-align: center;
            background: var(--btn); color: var(--btn-text); font-weight: 600; font-size: 13px; }
  .centre { text-align: center; color: var(--hint); padding: 40px 16px; }
  .centre h2 { color: var(--text); font-size: 17px; margin: 0 0 6px; }
  .status { text-align: center; color: var(--hint); padding: 12px; font-size: 13px; }
  /* Nothing to say: no box. An empty status line under the search box added
     24px under the quota banner, so its bottom gap was three times its top. */
  .status:empty { display: none; }
  /* ...but that line was also the only gap between the search box and the
     result under it; with it gone the result sat flush against the URL field. */
  .status:empty + #search-results { margin-top: 12px; }
  .lastwrap { margin-top: 16px; }
  .lastwrap h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
                 color: var(--hint); margin: 0 0 8px; font-weight: 600; }

  /* --- lightbox --- */
  .box { position: fixed; inset: 0; background: rgba(0,0,0,.94); z-index: 50; display: flex; flex-direction: column; }
  .stage { flex: 1; min-height: 0; position: relative; display: flex; align-items: center; justify-content: center;
           overflow: hidden; }
  /* Fit inside the stage without stretching: contain preserves the aspect
     ratio, and min-width only pulls SMALL images up to two thirds of the
     viewport — max-width still caps it, so nothing overflows. */
  .stage video {
    max-width: 100%; max-height: 100%;
    min-width: min(66vw, 100%);
    width: auto; height: auto;
    object-fit: contain;
  }
  .stage img {
    max-width: 100%; max-height: 100%;
    min-width: min(66vw, 100%);
    width: auto; height: auto;
    object-fit: contain;
    user-select: none; -webkit-user-drag: none;
  }
  /* Click zones instead of arrow overlays: a quarter of the width each side,
     so the middle of the image stays tappable. */
  .nav { position: absolute; top: 0; bottom: 0; width: 25%; cursor: pointer;
         opacity: 0; transition: opacity .12s ease; }
  .nav.prev { inset-inline-start: 0; background: linear-gradient(to right, rgba(255,255,255,.22), transparent); }
  .nav.next { inset-inline-end: 0; background: linear-gradient(to left, rgba(255,255,255,.22), transparent); }
  [dir="rtl"] .nav.prev { background: linear-gradient(to left, rgba(255,255,255,.22), transparent); }
  [dir="rtl"] .nav.next { background: linear-gradient(to right, rgba(255,255,255,.22), transparent); }
  /* Pressing an edge slides a shadow inwards so the tap is acknowledged. */
  .nav.press { opacity: 1; }
  /* A result that plays in place (a YouTube video): a round play button over
     its still; the tap swaps in the player, which fills the stage and
     letterboxes itself (a Short stays upright). While it plays the side zones
     step aside, or they would swallow the player's own controls. */
  .stage .play, .tile .play, .partwrap .play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
                 z-index: 1; width: 68px; height: 68px; border-radius: 50%; border: 0; padding: 0;
                 display: flex; align-items: center; justify-content: center; cursor: pointer;
                 background: rgba(0,0,0,.6); color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.85); }
  /* The triangle points right in every script, so its optical nudge does too. */
  .stage .play svg, .tile .play svg, .partwrap .play svg { width: 30px; height: 30px; fill: currentColor; margin-left: 3px; }
  /* The note is a stroked outline, not a filled shape, and sits centred. */
  .play.audio svg { fill: none; margin-left: 0 !important; }
  .stage .play:hover, .partwrap .play:hover { background: rgba(0,0,0,.8); }
  .stage iframe.player { width: 100%; height: 100%; border: 0; display: block; background: #000; }
  /* A video player takes the video's shape (--r = width/height from the
     server, 16:9 if unknown), as large as fits the stage. */
  .stage:not(.audio) { container-type: size; }
  .stage:not(.audio) iframe.player { width: min(100cqw, 100cqh * var(--r, 16 / 9)); height: auto;
                                     aspect-ratio: var(--r, 16 / 9); }
  /* In a result tile the same icon, sized for a thumbnail, as a hint only: a
     tile is too small for a usable player, so the tap goes through the icon
     to the tile, which opens the viewer and its player. */
  .tile .play { width: 44px; height: 44px; pointer-events: none; }
  .tile .play svg { width: 20px; height: 20px; margin-left: 2px; }
  .stage.playing .nav { display: none; }
  /* In the viewer the same bar goes under the cover, which stays. */
  .stage.audio { flex-direction: column; gap: 10px; }
  .stage.audio.playing img { max-height: calc(100% - 130px); }
  .stage.audio iframe.player { flex: none; width: min(100%, 500px); height: 120px; background: #fff; }
  .box .meta { padding: 10px 14px; color: #fff; font-size: 13px; max-height: 34vh; overflow-y: auto;
               overflow-x: hidden; overflow-wrap: anywhere; }
  /* --- knowledge panel: art on the left, the facts and links on the right --- */
  .panel { display: flex; gap: 12px; align-items: flex-start; margin: 10px 0 12px;
           padding: 12px; border-radius: 14px; background: var(--card);
           box-shadow: 0 1px 3px rgba(0,0,0,.10); }
  /* Square until the picture loads; fitPanel() then gives it the picture's shape.
     align-items must not be stretch: a stretched flex item ignores aspect-ratio. */
  .partwrap { position: relative; flex: 0 0 42%; max-width: 190px; aspect-ratio: 1 / 1; border-radius: 10px;
              overflow: hidden; background: var(--fill); }
  .partwrap.noart { display: none; }
  .partwrap .play { width: 56px; height: 56px; }
  .partwrap .play svg { width: 24px; height: 24px; margin-left: 2px; }
  /* The card's player takes the picture's place. The picture area may be a
     portrait strip or a small square, so while it plays the card stacks and
     the area spans the card at 16:9 (over fitPanel's inline ratio); the still
     and its button step aside. */
  .panel.playing:not(.audio) { flex-direction: column; align-items: stretch; }
  .panel.playing:not(.audio) .partwrap { flex: none; width: 100%; max-width: none; aspect-ratio: 16 / 9 !important; }
  /* Sound only (Bandcamp): the cover stays and the player's 120px bar is
     added under the cover and facts, full width; the note steps aside. */
  .panel.audio.playing { flex-wrap: wrap; }
  .panel.audio.playing .pbody { flex-basis: 0; }
  .panel.audio.playing .partwrap .play { display: none; }
  .panel > iframe.player { flex: none; width: 100%; height: 120px; border: 0; display: block;
                           border-radius: 10px; }
  /* Spotify's compact 152px player, coloured from the cover by Spotify itself. */
  .panel > iframe.player[src^="https://open.spotify.com/"],
  .stage.audio iframe.player[src^="https://open.spotify.com/"] { height: 152px; background: none; border-radius: 12px; }
  .stage.audio.playing:has(iframe.player[src^="https://open.spotify.com/"]) img { max-height: calc(100% - 162px); }
  .partwrap.playing > :not(iframe.player) { display: none; }
  .partwrap iframe.player { width: 100%; height: 100%; border: 0; display: block; background: #000; }
  .part { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; display: block; }
  .pbody { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
  .ptitle { font-size: 18px; font-weight: 700; line-height: 1.2; }
  .palt { margin-top: 2px; color: var(--hint); font-size: 12px; line-height: 1.3; }
  .pfacts { margin-top: 8px; display: flex; flex-direction: column; gap: 2px; }
  .pfact { display: flex; gap: 8px; font-size: 12.5px; line-height: 1.35; }
  .pkey { color: var(--hint); flex: none; min-width: 74px; }
  .pval { min-width: 0; word-break: break-word; }
  /* A refetch in flight: the icon turns while the engines are re-asked. */
  .iconbtn.spin svg { animation: spin 1s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* The icon row: circular, icon only, no text — it sits under the facts. */
  .plinks { margin-top: auto; padding-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
  .plink { width: 34px; height: 34px; border-radius: 50%; flex: none;
           display: flex; align-items: center; justify-content: center;
           background: var(--fill); text-decoration: none; }
  .plink .favicon { width: 18px; height: 18px; min-width: 18px; max-width: 18px;
                    border-radius: 4px; flex: none; object-fit: contain; }
  .pfallback { font-size: 14px; font-weight: 600; color: var(--hint); }
  .pfoot { margin-top: 8px; display: flex; align-items: center; gap: 8px;
           font-size: 11px; color: var(--hint); }
  .pmatch { font-weight: 700; color: #2ea043; }
  a.plain { color: inherit; text-decoration: none; }
  /* Landscape art goes on top, wide (fitPanel sets .tall and the ratio). */
  .panel.tall { flex-direction: column; }
  .panel.tall .partwrap { flex: none; width: 100%; max-width: none; }
  /* Narrow phones: the square would squeeze the facts into a column of one
     word per line, so the panel stacks instead. */
  @media (max-width: 380px) {
    .panel { flex-direction: column; }
    .partwrap { flex: none; width: 100%; max-width: none; aspect-ratio: 16 / 10; }
    .pkey { min-width: 68px; }
  }

  /* A confident hit is an identification, so the name gets real size. */
  .box .meta .t { font-weight: 700; font-size: 17px; line-height: 1.25; margin-bottom: 2px; }
  .box .subt { color: rgba(255,255,255,.6); font-size: 12px; margin-bottom: 6px; }
  .box .details { display: flex; flex-direction: column; gap: 3px; margin: 6px 0 8px;
                  padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.07); }
  /* A strong match earns a visible edge; a weak one stays quiet. */
  .box .details.strong { background: rgba(255,255,255,.11); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
  .box .drow { display: flex; gap: 8px; font-size: 12px; line-height: 1.35; }
  .box .dkey { color: rgba(255,255,255,.5); flex: none; min-width: 88px; }
  .box .dval { color: #fff; word-break: break-word; }
  .box .dsrc { color: rgba(255,255,255,.4); font-size: 11px; margin-top: 4px; }
  .box .dvia { color: rgba(255,255,255,.6); }
  .box .meta a { color: #7ab8f5; word-break: break-all; font-size: 12px; }
  .box .links { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 2px; }
  /* One line per link: [icon + site] [url…] [copy]. The icon, the site name
     and the copy button never shrink; the url takes what is left and ends in
     an ellipsis instead of wrapping. min-width: 0 on every flex level is what
     lets it shrink below its text's width at all. */
  .box .linkrow { display: flex; align-items: center; gap: 4px; min-width: 0; }
  .box .linkrow a { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0;
                    white-space: nowrap; word-break: normal; }
  .box .linkrow .favicon { width: 14px; height: 14px; min-width: 14px; max-width: 14px;
                           border-radius: 3px; flex: none; object-fit: contain; }
  .box .linkrow .linklabel { font-weight: 600; flex: none; max-width: 40%;
                             overflow: hidden; text-overflow: ellipsis; }
  .box .linkrow .linkurl { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
                           opacity: .8; }
  .box .linkrow .copybtn { color: rgba(255,255,255,.7); padding: 4px; }
  .box .linkrow .copybtn svg { width: 15px; height: 15px; }
  .box .linkrow .copybtn:hover { color: #fff; background: rgba(255,255,255,.12); }
  .box .linkrow .copybtn.done { color: #2ea043; }
  /* The clipboard fallback's textarea: in the page, never seen. */
  .offscreen { position: fixed; top: 0; left: -9999px; width: 1px; height: 1px; opacity: 0; }
  .box .more { color: #fff; opacity: .75; font-size: 12px; font-weight: 600; cursor: pointer;
               padding: 3px 0; text-decoration: underline; }
  .box .count { color: rgba(255,255,255,.5); font-size: 11px; margin-top: 5px; }
  .actions { display: flex; gap: 8px; padding: 0 14px calc(14px + env(safe-area-inset-bottom)); }
  .act { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
         padding: 11px 8px; border-radius: 10px; border: 0; cursor: pointer;
         background: rgba(255,255,255,.14); color: #fff; font-size: 13px; font-weight: 600; }
  .act.main { background: var(--btn); color: var(--btn-text); }
  .act:disabled { opacity: .4; }
  /* A dark round backing keeps the close X readable over a white picture
     that fills the stage (or a player's own bright frame). */
  .box .x { position: absolute; top: 8px; inset-inline-end: 10px; z-index: 2;
            width: 40px; height: 40px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            background: rgba(0,0,0,.45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
            color: #fff; font-size: 28px; line-height: 1; cursor: pointer; user-select: none; }

  /* ---- Banners: the app's ONE notice box (.rb, built by banner() in app.js). ----
     Every notice uses it: out of searches, the donate and news asks, Google
     out for today, the locked history, the web-search lock, the operators'
     timed banners. Same padding, radius, font, 22px lead icon and an even
     12px above and below everywhere. Each colour key is a hue laid as a
     light tint over the theme's own background, with the theme's text on
     it; the lead icon carries the full hue, a brighter one in dark mode.
     Operator keys: ris_domain::banner::COLOURS. */
  .banners { flex: none; display: flex; flex-direction: column; gap: 12px; padding: 12px 12px 0;
             max-height: 40vh; overflow-y: auto; }
  .banners > .rb { margin: 0; flex: none; }
  .rb { --hue: 125, 138, 153; display: flex; flex-direction: column; gap: 10px;
        margin: 12px 0; padding: 12px; border-radius: 12px; position: relative;
        background: rgba(var(--hue), .16); color: var(--text); font-size: 14px; line-height: 1.45; }
  .rb.c-sky   { --hue: 74, 144, 212; }
  .rb.c-mint  { --hue: 64, 168, 128; }
  .rb.c-sand  { --hue: 204, 160, 64; }
  .rb.c-peach { --hue: 226, 128, 86; }
  .rb.c-rose  { --hue: 212, 104, 138; }
  .rb.c-lilac { --hue: 146, 120, 212; }
  .rb.c-slate { --hue: 125, 138, 153; }
  .rb.c-gold  { --hue: 246, 180, 40; }
  .rb.c-teal  { --hue: 40, 160, 170; }
  .rb.c-red   { --hue: 214, 84, 72; }
  /* Rainbow: a tint running left to right through the palette, in a layer
     under the content, and the title in the same colours. */
  .rb.c-rainbow { --hue: 146, 120, 212; --rainbow: linear-gradient(90deg, rgb(74,144,212), rgb(64,168,128),
                    rgb(204,160,64), rgb(226,128,86), rgb(212,104,138), rgb(146,120,212), rgb(74,144,212));
                  --rainbow-a: .22; background: none; overflow: hidden; isolation: isolate; }
  .c-rainbow::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
                       opacity: var(--rainbow-a); background: var(--rainbow); background-size: 300% 100%;
                       animation: rb-slide 9s linear infinite; }
  .c-rainbow .rb-title { background: var(--rainbow); background-size: 300% 100%;
                         -webkit-background-clip: text; background-clip: text; color: transparent;
                         animation: rb-slide 6s linear infinite; }
  .c-rainbow .icon.rb-lead { color: var(--text); }
  @keyframes rb-slide { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
  @media (prefers-color-scheme: dark) {
    .rb.c-sky   { --hue: 120, 176, 236; }
    .rb.c-mint  { --hue: 110, 200, 160; }
    .rb.c-sand  { --hue: 226, 190, 110; }
    .rb.c-peach { --hue: 240, 160, 124; }
    .rb.c-rose  { --hue: 236, 140, 170; }
    .rb.c-lilac { --hue: 180, 160, 240; }
    .rb.c-slate { --hue: 160, 172, 186; }
    .rb.c-gold  { --hue: 246, 195, 67; }
    .rb.c-teal  { --hue: 90, 200, 205; }
    .rb.c-red   { --hue: 240, 120, 110; }
    .rb.c-rainbow { --rainbow-a: .28; }
  }
  .rb-row { display: flex; align-items: center; gap: 10px; }
  .rb .icon.rb-lead { flex: none; width: 22px; height: 22px; color: rgb(var(--hue)); }
  .rb .icon.solid { fill: currentColor; stroke: none; }
  .rb-body { flex: 1; min-width: 0; overflow-wrap: anywhere; }
  .rb-title { font-weight: 700; }
  .rb-text { white-space: pre-line; }
  .rb-text a { color: inherit; font-weight: 600; }
  .rb.click { cursor: pointer; }
  .rb.click:active { background: rgba(var(--hue), .24); }
  .rb-chev { flex: none; color: var(--hint); }
  [dir="rtl"] .rb-chev { transform: scaleX(-1); }
  /* The small button: an icon square as thick as a full button, at the end. */
  .rb-icon { flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px; cursor: pointer;
             display: inline-flex; align-items: center; justify-content: center;
             color: rgb(var(--hue)); background: rgba(var(--hue), .26); }
  .rb-icon .icon { width: 22px; height: 22px; }
  .rb-close { flex: none; width: 24px; height: 24px; padding: 0; border: 0;
              background: transparent; color: var(--hint); cursor: pointer;
              display: inline-flex; align-items: center; justify-content: center; }
  .rb-close .icon { width: 16px; height: 16px; }
  /* Buttons are never stretched in a row: they size to their label and keep
     it on one line, so the text beside them is never squashed. */
  .rb-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
            white-space: nowrap; padding: 9px 16px; border: 0; border-radius: 10px; cursor: pointer;
            font: 600 14px/1.2 inherit; font-family: inherit; position: relative; overflow: hidden;
            background: rgba(var(--hue), .28); color: var(--text); }
  .rb-btn .icon { width: 18px; height: 18px; color: rgb(var(--hue)); }
  .rb-btn.solid { background: rgb(var(--hue)); color: #1b1400; }
  .rb-btn.solid .icon { color: inherit; }
  .rb-btn.glow, .rb-icon.glow { animation: glow 2.2s ease-in-out infinite; }
  .rb-actions { display: flex; justify-content: flex-end; gap: 8px; }
  .rb-actions.full .rb-btn { flex: 1; }
  /* Sheen: a light sweeps across. White on light; a soft tint of the
     banner's own hue in dark mode, where white looks broken. */
  .rb.sheen { overflow: hidden; }
  .rb.sheen::after, .rb-btn.sheen::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%;
      width: 40%; pointer-events: none;
      background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
      animation: sheen 3.2s ease-in-out infinite; }
  .rb-btn.sheen::after { width: 45%; animation-duration: 2.6s;
      background: linear-gradient(100deg, transparent, rgba(255,255,255,.6), transparent); }
  @keyframes sheen { 0% { left: -60%; } 55%, 100% { left: 130%; } }
  @media (prefers-color-scheme: dark) {
    .rb.sheen::after { background: linear-gradient(100deg, transparent, rgba(var(--hue), .28), transparent); }
    .rb-btn.sheen::after { background: linear-gradient(100deg, transparent, rgba(255,244,214,.5), transparent); }
  }
  @media (prefers-reduced-motion: reduce) {
    .rb, .rb::before, .rb::after, .rb *, .rb *::after { animation: none !important; }
  }
  @media (min-width: 900px) {
    .banners > * { width: 100%; max-width: 1100px; margin-inline: auto; }
  }

  /* The crop dialog: the upload with a frame to drag (openCropper). */
  .cropbox { touch-action: none; }
  .cropstage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center;
               padding: 20px; overflow: hidden; }
  .cropwrap { position: relative; flex: none; user-select: none; -webkit-user-select: none; }
  .cropwrap img { display: block; width: 100%; height: 100%; pointer-events: none; }
  .cropframe { position: absolute; box-sizing: border-box; border: 2px solid #fff; cursor: move;
               box-shadow: 0 0 0 9999px rgba(0,0,0,.55); touch-action: none; }
  .crophandle { position: absolute; width: 28px; height: 28px; touch-action: none; }
  .crophandle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px;
                       margin: -6px 0 0 -6px; background: #fff; border-radius: 2px; }
  .crophandle.h-n, .crophandle.h-s { left: 14px; right: 14px; width: auto; cursor: ns-resize; }
  .crophandle.h-e, .crophandle.h-w { top: 14px; bottom: 14px; height: auto; cursor: ew-resize; }
  .crophandle.h-n { top: -14px; } .crophandle.h-s { bottom: -14px; }
  .crophandle.h-w { left: -14px; } .crophandle.h-e { right: -14px; }
  .crophandle.h-n::after, .crophandle.h-s::after { width: 24px; height: 4px; margin: -2px 0 0 -12px; }
  .crophandle.h-e::after, .crophandle.h-w::after { width: 4px; height: 24px; margin: -12px 0 0 -2px; }
  .crophandle.h-nw { left: -14px; top: -14px; cursor: nwse-resize; }
  .crophandle.h-se { right: -14px; bottom: -14px; cursor: nwse-resize; }
  .crophandle.h-ne { right: -14px; top: -14px; cursor: nesw-resize; }
  .crophandle.h-sw { left: -14px; bottom: -14px; cursor: nesw-resize; }
  .cropacts { display: flex; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
  .cropacts button { flex: 1; padding: 12px; font-size: 15px; font-weight: 600; border-radius: 10px;
                     cursor: pointer; }
  .cropcancel { background: rgba(255,255,255,.14); color: #fff; border: 0; }