/**
 * Cryptoniq Keys Manager
 *
 * Built on the theme's own custom properties, with the published values as
 * fallbacks. On cryptoniq.io the panel inherits the site's brand, borders,
 * radius and type; dropped on a site without the theme it still renders,
 * rather than inheriting nothing and arriving unstyled.
 *
 * Everything is namespaced under .cqkm. No element selectors escape it,
 * because this markup lands inside page content where the theme is already
 * styling h3, button, input and the rest.
 */

.cqkm {
  --cqkm-brand: var(--cq-brand, #752d00);
  --cqkm-brand-dark: var(--cq-brand-dark, #500100);
  --cqkm-bg: var(--cq-bg, #fff);
  --cqkm-soft: var(--cq-bg-soft, #f7f7f7);
  --cqkm-line: var(--cq-border, #ddd);
  --cqkm-line-light: var(--cq-border-light, #eee);
  --cqkm-text: var(--cq-text, #000);

  /**
   * Not actually muted.
   *
   * Everything in this panel is read deliberately — an expiry date, a label
   * on a wallet box, a note saying which coins share an address — and none of
   * it is filler to be skimmed past. Grey secondary text made the parts that
   * explain the panel the hardest parts to read, so the whole thing is black
   * and the hierarchy is carried by weight, size and spacing instead.
   *
   * The name is kept because it marks what is secondary, which still governs
   * where it sits and how large it is.
   */
  --cqkm-muted: #000;
  --cqkm-radius: var(--cq-radius, 5px);
  --cqkm-ok: #1f7a4d;
  --cqkm-warn: #9a6800;
  --cqkm-bad: #a32020;

  font-family: var(--cq-font, inherit);
  color: var(--cqkm-text);

  /**
   * A centred column, rather than a block pinned to the left of whatever
   * container the shortcode landed in.
   *
   * The panel is the page where it is used, so on a wide theme it was sitting
   * against the left margin with half the screen empty beside it. The cap is
   * on the panel rather than on each view, so the licence grid, the add form
   * and the address editor all share one centre line and nothing shifts
   * sideways when you move between them.
   */
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

.cqkm, .cqkm *, .cqkm *::before, .cqkm *::after { box-sizing: border-box }

/**
 * `hidden` must actually hide.
 *
 * The browser's own [hidden] rule lives in the user-agent stylesheet, which
 * loses to any author `display` whatever its specificity. So .cqkm-back's
 * `display: inline-flex` quietly beat it and the back button rendered on a
 * page it had been told to stay off. Said again here, where it wins.
 */
.cqkm [hidden] { display: none !important }

.cqkm-h { margin: 0 0 6px; font-size: 1.35rem; line-height: 1.25 }
.cqkm-muted { color: var(--cqkm-muted) }
.cqkm-grow { flex: 1 }

.cqkm-boot { padding: 40px 0; color: var(--cqkm-muted); text-align: center }

/* ---- controls -------------------------------------------------- */

.cqkm input, .cqkm select, .cqkm textarea{
  width: 100%;
  font: inherit;
  color: var(--cqkm-text);
  background: var(--cqkm-bg);
  border: 1px solid var(--cqkm-line);
  border-radius: var(--cqkm-radius);
  padding: 10px 12px;
}

.cqkm textarea{
  resize: vertical;
  font: .8125rem/1.7 ui-monospace, Consolas, "SF Mono", monospace;
}

.cqkm input:focus, .cqkm select:focus, .cqkm textarea:focus, .cqkm .cqkm-btn:focus-visible{
  outline: 2px solid var(--cqkm-brand);
  outline-offset: 1px;
}

.cqkm .cqkm-btn{
  font: inherit;
  font-weight: 600;
  color: var(--cqkm-text);
  background: var(--cqkm-bg);
  border: 1px solid var(--cqkm-line);
  border-radius: var(--cqkm-radius);
  padding: 9px 16px;
  cursor: pointer;
  line-height: 1.3;
}

.cqkm .cqkm-btn:hover:not(:disabled){ border-color: var(--cqkm-brand) }
.cqkm .cqkm-btn:disabled{ opacity: .5; cursor: default }

.cqkm .cqkm-primary{
  background: var(--cqkm-brand);
  border-color: var(--cqkm-brand);
  color: #fff;
}
.cqkm .cqkm-primary:hover:not(:disabled){
  background: var(--cqkm-brand-dark);
  border-color: var(--cqkm-brand-dark);
}

.cqkm .cqkm-link{
  background: none;
  border: 0;
  padding: 9px 4px;
  color: var(--cqkm-muted);
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
}
.cqkm .cqkm-link:hover{ color: var(--cqkm-text) }

.cqkm code{
  font: .8125rem/1.4 ui-monospace, Consolas, "SF Mono", monospace;
  word-break: break-all;
  background: none;
  padding: 0;
}

.cqkm-err { color: var(--cqkm-bad); font-size: .875rem; margin-top: 10px }
.cqkm-ok { color: var(--cqkm-ok); font-size: .875rem; margin-top: 10px }
.cqkm-err:empty, .cqkm-ok:empty { margin-top: 0 }

/* ---- sign in ---------------------------------------------------- */

/* Narrower than the panel, and centred within it. */
.cqkm-signin { max-width: 460px; margin-left: auto; margin-right: auto }

.cqkm-box {
  background: var(--cqkm-soft);
  border: 1px solid var(--cqkm-line-light);
  border-radius: var(--cqkm-radius);
  padding: 20px;
}

.cqkm-box label {
  display: block;
  font-size: .8125rem;
  font-weight: 600;
  margin: 16px 0 6px;
}
.cqkm-box label:first-child { margin-top: 0 }
.cqkm-box .cqkm-btn { width: 100%; margin-top: 18px }

/**
 * The two things somebody stuck on this form needs to know.
 *
 * It was a paragraph of grey text under the button, which is the shape of
 * boilerplate and gets read as such. A panel with a mark and a heading looks
 * like an answer to a question, which is what it is.
 */
.cqkm-info {
  display: flex;
  gap: 14px;
  margin-top: 20px;
  padding: 16px 18px;
  background: var(--cqkm-soft);
  border: 1px solid var(--cqkm-line-light);
  border-left: 3px solid var(--cqkm-brand);
  border-radius: 0 var(--cqkm-radius) var(--cqkm-radius) 0;
}
.cqkm-info-mark {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--cqkm-brand);
  color: #fff;
  font-size: .8125rem;
  font-weight: 700;
  font-style: italic;
  line-height: 22px;
  text-align: center;
  font-family: Georgia, "Times New Roman", serif;
}
.cqkm-info b { display: block; margin-bottom: 6px; font-size: .9375rem }
.cqkm-info p { margin: 0 0 8px; font-size: .875rem; line-height: 1.6; color: var(--cqkm-muted) }
.cqkm-info p:last-child { margin-bottom: 0 }

/* ---- the list --------------------------------------------------- */

/**
 * The heading row wraps rather than squeezes.
 *
 * Without it a narrow screen shrinks the heading instead of moving the
 * count and the sign-out link down, and "Your licences" breaks across two
 * lines next to a link doing the same.
 */
.cqkm-top {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-bottom: 16px;
}
.cqkm-top .cqkm-h { flex: 1 1 auto }
.cqkm-count { color: var(--cqkm-muted); font-size: .875rem; white-space: nowrap }
.cqkm .cqkm-link { white-space: nowrap }

.cqkm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px;
}

.cqkm-card {
  background: var(--cqkm-bg);
  border: 1px solid var(--cqkm-line);
  border-radius: var(--cqkm-radius);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cqkm-card.is-off { border-color: #e2bcbc; background: #fdf8f8 }

/* Could not be checked — a neutral state, not a bad one. */
.cqkm-card.is-wait { background: var(--cqkm-soft) }

/**
 * Shown to administrators only, and said in their terms.
 *
 * A customer can do nothing with a status code; whoever runs the site is the
 * one person who can, and is also the one person who will be looking at this
 * page wondering why.
 */
.cqkm-admin {
  display: block;
  margin-top: 10px;
  padding: 9px 11px;
  border-left: 3px solid var(--cqkm-warn);
  background: #fdf3e0;
  border-radius: 0 var(--cqkm-radius) var(--cqkm-radius) 0;
  font-size: .75rem;
  line-height: 1.6;
  color: #6d4a00;
  word-break: break-word;
}

.cqkm-site { font-size: 1.0625rem; font-weight: 700; line-height: 1.3; word-break: break-all }
.cqkm-site.is-none { font-weight: 400; font-style: italic; color: var(--cqkm-muted) }

.cqkm-card dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  margin: 0;
  font-size: .875rem;
}
.cqkm-card dt { color: var(--cqkm-muted) }
.cqkm-card dd { margin: 0; text-align: right }

.cqkm-acts { display: flex; gap: 8px; margin-top: auto; padding-top: 6px }
.cqkm-acts .cqkm-btn { flex: 1 }

.cqkm-add {
  border: 1px dashed var(--cqkm-line);
  border-radius: var(--cqkm-radius);
  padding: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 160px;
  text-align: center;
  color: var(--cqkm-muted);
}

/* ---- pills ------------------------------------------------------ */

.cqkm-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.cqkm-pill.is-ok { background: #e6f4ec; color: var(--cqkm-ok) }
.cqkm-pill.is-warn { background: #fdf3e0; color: var(--cqkm-warn) }
.cqkm-pill.is-bad { background: #fbeaea; color: var(--cqkm-bad) }
.cqkm-pill.is-dim { background: var(--cqkm-soft); color: var(--cqkm-muted) }

/**
 * The days-left figure, on the admin panel's scale.
 *
 * Colour alone would fail anyone who cannot see it, so the number is also
 * bolder than the row around it and the state is written out in the pill
 * above — the colour is the fast read, not the only one.
 */
.cqkm-days { font-weight: 700 }
.cqkm-days.is-ok { color: var(--cqkm-ok) }
.cqkm-days.is-warn { color: var(--cqkm-warn) }
.cqkm-days.is-bad { color: var(--cqkm-bad) }

/* ---- the editor ------------------------------------------------- */

/**
 * The editor takes the list's place rather than sliding over it.
 *
 * A panel pinned to one edge means reaching across the screen on a desktop
 * and losing half the width on a phone. One view at a time, with a way back,
 * behaves the same everywhere and needs no overlay, no scroll lock and no
 * guessing about which ancestor a fixed element is positioned against.
 */
.cqkm-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 0;
  padding: 4px 0;
  margin-bottom: 14px;
  font: inherit;
  font-weight: 600;
  color: var(--cqkm-muted);
  cursor: pointer;
}
.cqkm-back:hover { color: var(--cqkm-brand) }
.cqkm-back:focus-visible { outline: 2px solid var(--cqkm-brand); outline-offset: 3px }
.cqkm-back span { font-size: 1.1em; line-height: 1 }

.cqkm-detail { max-width: 800px; margin-left: auto; margin-right: auto }
.cqkm-detail .cqkm-h { margin-bottom: 20px; word-break: break-all }

.cqkm-dbody h4 {
  margin: 26px 0 10px;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--cqkm-muted);
}
.cqkm-dbody h4:first-child { margin-top: 0 }

/* ---- the licence card ------------------------------------------- */

/**
 * The two questions somebody opens a licence for are whether it is working
 * and how long is left, so those get the room. The key gets a button,
 * because it is the thing people came to copy.
 *
 * This was five label/value pairs, which is the shape of the data rather
 * than the shape of an answer. The left edge now carries the state as
 * colour, readable before any of the words are.
 */
.cqkm-lic {
  border: 1px solid var(--cqkm-line);
  border-left: 4px solid var(--cqkm-muted);
  border-radius: var(--cqkm-radius);
  padding: 20px 22px;
  margin-bottom: 28px;
  background: var(--cqkm-bg);
}
.cqkm-lic.is-ok { border-left-color: var(--cqkm-ok) }
.cqkm-lic.is-warn { border-left-color: var(--cqkm-warn) }
.cqkm-lic.is-bad { border-left-color: var(--cqkm-bad); background: #fdf9f9 }

.cqkm-lic-top {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.cqkm-lic-site {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
  word-break: break-all;
}
.cqkm-lic-site .is-none { font-weight: 400; font-style: italic; color: var(--cqkm-muted) }

.cqkm-keyline {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 9px 12px;
  margin-bottom: 18px;
  background: var(--cqkm-soft);
  border-radius: var(--cqkm-radius);
}
.cqkm-keyline code { flex: 1 1 auto; min-width: 0; font-size: .875rem; letter-spacing: .02em }

.cqkm-copy {
  flex: 0 0 auto;
  font: inherit;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cqkm-muted);
  background: var(--cqkm-bg);
  border: 1px solid var(--cqkm-line);
  border-radius: var(--cqkm-radius);
  padding: 6px 11px;
  cursor: pointer;
}
.cqkm-copy:hover { color: var(--cqkm-brand); border-color: var(--cqkm-brand) }
.cqkm-copy.is-done { color: var(--cqkm-ok); border-color: var(--cqkm-ok) }

/**
 * Three tiles that each carry their own border.
 *
 * They were one block divided by one-pixel gaps over a tinted background,
 * which is tidier until the row wraps: three tiles in two columns leave a
 * fourth cell with nothing in it, and the background shows through as a grey
 * rectangle. Separate tiles wrap to any number of columns with nothing left
 * over.
 */
.cqkm-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 10px;
}
.cqkm-stats > div {
  background: var(--cqkm-soft);
  border: 1px solid var(--cqkm-line-light);
  border-radius: var(--cqkm-radius);
  padding: 12px 14px;
}
.cqkm-stats span {
  display: block;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cqkm-muted);
  margin-bottom: 5px;
}
.cqkm-stats b { font-size: 1rem; font-weight: 700 }

.cqkm-left > div { display: flex; align-items: baseline; gap: 6px }
.cqkm-left > div b { font-size: 1.5rem; line-height: 1 }
.cqkm-left > div span {
  margin: 0;
  font-size: .8125rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

/* How much of the term has gone. Drawn only when both ends are known. */
.cqkm-bar {
  height: 4px;
  margin-top: 14px;
  border-radius: 999px;
  background: var(--cqkm-line-light);
  overflow: hidden;
}
.cqkm-bar span { display: block; height: 100% }
.cqkm-bar .is-ok { background: var(--cqkm-ok) }
.cqkm-bar .is-warn { background: var(--cqkm-warn) }
.cqkm-bar .is-bad { background: var(--cqkm-bad) }

.cqkm-lic .cqkm-note { margin-top: 14px }

/* ---- the coin list ----------------------------------------------- */

.cqkm-coins-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.cqkm-coins-head h4 { margin: 0 }
.cqkm-coins-head span { font-size: .8125rem }

/**
 * How much of the allowance is gone.
 *
 * A pill rather than plain text, matching the one on the plugin's own
 * Wallets screen, because it is a number with a ceiling rather than a
 * description — and it turns red at that ceiling, where it stops being
 * information and becomes the reason Add is greyed out.
 */
.cqkm-count-pill {
  display: inline-block;
  padding: 4px 11px;
  border-radius: var(--cqkm-radius);
  background: var(--cqkm-text);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  white-space: nowrap;
}
.cqkm-count-pill.is-full { background: var(--cqkm-bad) }

/* .cqkm-coins-lede is further down, where it can out-order .cqkm-note. */

.cqkm-chip {
  display: inline-block;
  min-width: 21px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--cqkm-soft);
  color: var(--cqkm-muted);
  font-size: .6875rem;
  font-weight: 700;
  text-align: center;
}

.cqkm-banner {
  border-radius: var(--cqkm-radius);
  padding: 14px 16px;
  margin-bottom: 18px;
  font-size: .875rem;
  line-height: 1.55;
}
.cqkm-banner b { display: block; margin-bottom: 4px }
.cqkm-banner.is-bad { background: #fbeaea; border: 1px solid #efc9c9 }
.cqkm-banner.is-warn { background: #fdf3e0; border: 1px solid #ecd6a8 }

/**
 * Every supported coin is on the page, so most boxes are empty most of the
 * time. The ones with addresses in them are what the page is about, so the
 * empty ones recede rather than competing — same layout, less contrast.
 */
.cqkm-coin {
  border: 1px solid var(--cqkm-line-light);
  border-radius: var(--cqkm-radius);
  padding: 14px 16px;
  margin-bottom: 12px;
  background: var(--cqkm-bg);
}
.cqkm-coin:not(.is-set) .cqkm-coin-h b { color: var(--cqkm-muted) }
.cqkm-coin:not(.is-set) textarea { background: var(--cqkm-soft) }

.cqkm-coin.is-set { border-color: var(--cqkm-line) }

/* An unsaved change, so the one box left to deal with is obvious. */
.cqkm-coin.is-dirty { border-color: var(--cqkm-brand); box-shadow: 0 0 0 1px var(--cqkm-brand) }
.cqkm-coin-h {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
/**
 * The coin's name is the whole title now.
 *
 * It was the internal key in monospace with the name greyed beside it —
 * "USDT_ETH_ARB  Arbitrum One USDT" — which led with the one word that means
 * nothing to whoever is pasting the wallet address. The key still exists, in
 * data-coin and in the URL, where it belongs.
 *
 * Set in the body face rather than monospace: it is prose now, not an
 * identifier, and "Arbitrum One USDT" in a code font reads like a variable.
 */
.cqkm-coin-h b {
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--cqkm-brand);
}

/* ---- address rows ------------------------------------------------ */

/**
 * One row per address, each with its own remove button and its own room for
 * a verdict.
 *
 * This was a textarea of lines, which is fine until something is wrong with
 * one of them: "invalid format" can only point at the whole box, and
 * removing the third address means selecting a line precisely. The shape
 * matches the wallet screen in the Cryptoniq plugin, so a merchant who has
 * used one already knows this one.
 */
.cqkm-rows { display: flex; flex-direction: column; gap: 8px }

.cqkm-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap }

.cqkm-row .cqkm-addr {
  flex: 1 1 260px;
  min-width: 0;
  font: .8125rem/1.5 ui-monospace, Consolas, "SF Mono", monospace;
  padding: 9px 12px;
}

.cqkm-row .cqkm-x {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--cqkm-bad);
  background: var(--cqkm-bg);
  border: 1px solid var(--cqkm-line);
  border-radius: var(--cqkm-radius);
  cursor: pointer;
}
.cqkm-row .cqkm-x:hover { border-color: var(--cqkm-bad); background: #fbeaea }
.cqkm-row .cqkm-x:focus-visible { outline: 2px solid var(--cqkm-bad); outline-offset: 1px }

/* The verdict takes no room until there is one to give. */
.cqkm-bad {
  display: none;
  flex: 0 0 auto;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cqkm-bad);
}
.cqkm-row.is-invalid .cqkm-bad { display: inline }
.cqkm-row.is-invalid .cqkm-addr { border-color: var(--cqkm-bad); background: #fdf6f6 }

.cqkm-addrow {
  margin-top: 10px;
  font: inherit;
  font-size: .875rem;
  font-weight: 600;
  color: var(--cqkm-text);
  background: var(--cqkm-bg);
  border: 1px solid var(--cqkm-line);
  border-radius: var(--cqkm-radius);
  padding: 8px 14px;
  cursor: pointer;
}
.cqkm-addrow:hover { border-color: var(--cqkm-brand); color: var(--cqkm-brand) }
.cqkm-addrow:focus-visible { outline: 2px solid var(--cqkm-brand); outline-offset: 1px }
.cqkm-addrow span { font-size: 1.05em; font-weight: 700 }

.cqkm-note { font-size: .8125rem; color: var(--cqkm-muted); margin: 8px 0 0; line-height: 1.55 }

/**
 * Room between the explanation and the first coin, so the two read as a
 * heading and its list rather than one run of text.
 *
 * Must stay below .cqkm-note: the element carries both classes, they are
 * equally specific, and the later rule wins. Written above it, the margin
 * silently resolved to zero.
 */
.cqkm-coins-lede { margin: 8px 0 24px }

.cqkm-msg { padding: 40px 10px; text-align: center; color: var(--cqkm-muted) }

/* ---- narrow ------------------------------------------------------ */

@media (max-width: 600px) {
  .cqkm-grid { grid-template-columns: 1fr }
  .cqkm-acts { flex-direction: column }
}