/* ============================================================
   TDS Assistant — VERNILAC
   Σκέτο CSS, καμία εξωτερική γραμματοσειρά ή βιβλιοθήκη: η εφαρμογή
   δεν βγαίνει στο internet (NIS2), οπότε ό,τι φορτώνεται από CDN δεν
   θα εμφανιζόταν καν.
   ============================================================ */

/* Inter — τοπικά (έχει πλήρη ελληνικά), ίδια με το Credit Cockpit. */
@font-face {
  font-family: 'InterVariable';
  src: url('/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Εταιρική παλέτα */
  --brand:        #11335a;
  --brand-light:  #1e5f9e;
  --brand-deep:   #07182c;
  --red:          #c20e1a;

  /* Φουτουριστικοί τόνοι */
  --cyan:         #38d6f5;
  --cyan-soft:    rgba(56, 214, 245, .16);
  --violet:       #6c8cff;

  /* Επιφάνειες */
  --ink:          #16222f;
  --ink-soft:     #5b6c80;
  --line:         rgba(17, 51, 90, .10);
  --card:         rgba(255, 255, 255, .92);
  --card-solid:   #ffffff;

  --ok:           #12855a;
  --ok-bg:        #e8f7ef;
  --warn:         #b8791a;
  --warn-bg:      #fff6e6;
  --err:          #b3261e;
  --err-bg:       #fdeceb;

  --r-sm: 10px;
  --r:    14px;
  --r-lg: 20px;

  --shadow-sm: 0 1px 2px rgba(10, 26, 47, .06), 0 2px 8px rgba(10, 26, 47, .06);
  --shadow:    0 2px 6px rgba(10, 26, 47, .07), 0 12px 32px rgba(10, 26, 47, .10);
  --shadow-lg: 0 8px 24px rgba(10, 26, 47, .12), 0 24px 64px rgba(10, 26, 47, .16);

  --font: "InterVariable", -apple-system, BlinkMacSystemFont, "SF Pro Text",
          "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

/* Άμεσα, αξιόπιστα taps σε αφή: χωρίς καθυστέρηση double-tap-zoom */
button, .nav-btn, .quick-q, .empty-cat, .vote, .list-item {
  touch-action: manipulation;
}

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background:
    radial-gradient(1200px 680px at 10% -10%, rgba(56, 214, 245, .16), rgba(56, 214, 245, 0) 62%),
    radial-gradient(1000px 620px at 94% 2%,   rgba(108, 140, 255, .16), rgba(108, 140, 255, 0) 64%),
    linear-gradient(168deg, #071a30 0%, #0c2340 48%, #091d35 100%);
  background-color: #0a1f38;   /* βάση, αν κάποιος browser δεν σχεδιάσει το gradient */
  background-attachment: fixed;
}

/* ═══════════════════════════════════════════════════ header */

header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: .9rem;
  flex-wrap: wrap;
  padding: .6rem 1.1rem;
  background: linear-gradient(135deg, rgba(7, 24, 44, .97), rgba(17, 51, 90, .95));
  border-bottom: 1px solid rgba(56, 214, 245, .22);
  box-shadow: 0 1px 0 rgba(56, 214, 245, .10), 0 8px 28px rgba(7, 24, 44, .22);
}

/* λεπτή φωτεινή γραμμή στη βάση της κεφαλίδας */
header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, rgba(56,214,245,0), var(--cyan), var(--violet), rgba(108,140,255,0));
  opacity: .55;
}

header .logo-wrap {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(255,255,255,.16), 0 4px 14px rgba(0,0,0,.28);
  flex: none;
}
header img.logo { height: 26px; width: auto; display: block; }

.title {
  color: #fff;
  font-weight: 650;
  font-size: 1.05rem;
  letter-spacing: -.01em;
  line-height: 1.15;
}
.title small {
  display: block;
  font-weight: 400;
  font-size: .76rem;
  color: rgba(255, 255, 255, .62);
  letter-spacing: 0;
  margin-top: 1px;
}

#who {
  margin-left: auto;
  font-size: .8rem;
  color: rgba(255, 255, 255, .72);
  display: flex;
  align-items: center;
  gap: .4rem;
}
#who .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 3px var(--cyan-soft);
}

nav { display: flex; gap: .3rem; flex-wrap: wrap; width: 100%; }

.nav-btn {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .82);
  border-radius: var(--r-sm);
  padding: .38rem .8rem;
  font: inherit;
  font-size: .87rem;
  cursor: pointer;
  transition: background .16s, color .16s, border-color .16s, transform .12s;
}
.nav-btn:hover { background: rgba(255,255,255,.13); color: #fff; }
.nav-btn:active { transform: translateY(1px); }
.nav-btn.active {
  background: linear-gradient(135deg, var(--cyan), var(--violet));
  border-color: transparent;
  color: #06213a;
  font-weight: 650;
  box-shadow: 0 4px 14px rgba(56, 214, 245, .32);
}
.nav-btn.danger:hover { border-color: rgba(255,120,120,.5); color: #ffc9c9; }

/* ═══════════════════════════════════════════════════ layout */

main { max-width: 940px; margin: 0 auto; padding: 1.2rem 1rem 2rem; }

.view { display: none; }
.view.active { display: block; animation: rise .28s ease both; }

@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.card {
  background: var(--card-solid);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding: 1.15rem 1.3rem;
  margin-bottom: 1.1rem;
}

h2 {
  font-size: 1.02rem;
  color: var(--brand);
  margin: 0 0 .85rem;
  letter-spacing: -.01em;
}

/* ══════════════════════════════════ πίνακας «φάση ελέγχου» */

.phase {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  padding: 1.25rem 1.35rem;
  margin-bottom: 1.1rem;
  color: #eaf4ff;
  background: linear-gradient(135deg, #0a2444 0%, #11335a 52%, #14406f 100%);
  box-shadow: var(--shadow-lg);
}
.phase::before {
  content: "";
  position: absolute;
  inset: -40% -20% auto auto;
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(56,214,245,.30), rgba(56,214,245,0) 62%);
  pointer-events: none;
}
.phase > * { position: relative; }

.phase-tag {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: .26rem .7rem;
  border-radius: 999px;
  color: #062036;
  background: linear-gradient(135deg, var(--cyan), var(--violet));
}
.phase-tag .pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: #062036;
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }

.phase h1 {
  font-size: 1.35rem;
  margin: .7rem 0 .4rem;
  letter-spacing: -.02em;
  line-height: 1.25;
}
.phase p { margin: 0 0 1rem; color: rgba(234, 244, 255, .82); font-size: .94rem; }
.phase p:last-child { margin-bottom: 0; }
.phase strong { color: #fff; }

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .6rem;
  margin-top: 1rem;
}
.step {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r);
  padding: .75rem .8rem;
}
.step .n {
  display: grid; place-items: center;
  width: 24px; height: 24px;
  border-radius: 8px;
  font-size: .78rem; font-weight: 700;
  color: #062036;
  background: linear-gradient(135deg, var(--cyan), var(--violet));
  margin-bottom: .45rem;
}
.step b { display: block; font-size: .87rem; margin-bottom: .12rem; color: #fff; }
.step span { font-size: .79rem; color: rgba(234, 244, 255, .68); line-height: 1.45; }

.phase-close {
  position: absolute;
  top: .8rem; right: .9rem;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.75);
  border-radius: 8px;
  width: 28px; height: 28px;
  font: inherit; font-size: 1rem; line-height: 1;
  cursor: pointer;
}
.phase-close:hover { background: rgba(255,255,255,.2); color: #fff; }

/* ═══════════════════════════════════════════════════ συνομιλία */

#thread { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.1rem; }

.msg { display: flex; flex-direction: column; animation: rise .3s ease both; }

.bubble {
  border-radius: var(--r-lg);
  padding: .85rem 1.1rem;
  overflow-wrap: anywhere;
}

.msg.user { align-items: flex-end; }
.msg.user .bubble {
  max-width: 86%;
  color: #fff;
  background: linear-gradient(135deg, var(--brand-light), var(--brand));
  border-bottom-right-radius: 6px;
  box-shadow: 0 4px 18px rgba(17, 51, 90, .28);
}

.msg.bot .bubble {
  background: var(--card-solid);
  border: 1px solid var(--line);
  border-bottom-left-radius: 6px;
  box-shadow: var(--shadow-sm);
}

.bubble p { margin: 0 0 .65rem; }
.bubble p:last-child { margin-bottom: 0; }
.bubble ul { margin: .35rem 0 .65rem; padding-left: 1.15rem; }
.bubble li { margin: .2rem 0; }
.bubble li::marker { color: var(--cyan); }
.bubble strong { font-weight: 700; }

.msg.error .bubble {
  background: var(--err-bg);
  border-color: #f3b5b0;
  color: var(--err);
}

/* Η απάντηση καθώς γράφεται ζωντανά, μέσα στη φούσκα αναμονής */
.stream-text {
  white-space: pre-wrap;
  margin-top: .5rem;
  color: var(--ink);
}
.stream-text:empty { display: none; }
.stream-text::after {
  content: '▍';
  color: var(--cyan);
  animation: blinkCursor 1s steps(1) infinite;
}
@keyframes blinkCursor { 50% { opacity: 0; } }

/* ───────────────────────────── υποσημείωση απάντησης */

.meta {
  margin-top: .55rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .38rem;
  font-size: .8rem;
  color: var(--ink-soft);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  border-radius: 999px;
  padding: .16rem .62rem;
  font-size: .77rem;
  white-space: nowrap;
  background: rgba(17, 51, 90, .06);
  border: 1px solid rgba(17, 51, 90, .10);
  color: var(--brand);
}
.chip.flag     { background: var(--warn-bg); border-color: #f0d9ac; color: var(--warn); }
.chip.approved { background: var(--ok-bg);   border-color: #b3e3ca; color: var(--ok); font-weight: 650; }
.chip.rejected { background: var(--err-bg);  border-color: #f3b5b0; color: var(--err); }
.chip.plain    { background: transparent; border-color: transparent; color: var(--ink-soft); padding-left: 0; }

.vote {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 9px;
  cursor: pointer;
  font-size: .95rem;
  padding: .12rem .5rem;
  line-height: 1.45;
  transition: transform .12s, box-shadow .16s, border-color .16s;
}
.vote:hover { transform: translateY(-1px); border-color: var(--brand-light); box-shadow: var(--shadow-sm); }
.vote.on      { background: linear-gradient(135deg, var(--cyan), var(--violet)); border-color: transparent; }
.vote.on.down { background: linear-gradient(135deg, #ff8a8a, var(--red)); border-color: transparent; }

.retry {
  background: #fff;
  border: 1px dashed #e0c68e;
  color: var(--warn);
  border-radius: 9px;
  padding: .18rem .68rem;
  font: inherit;
  font-size: .8rem;
  cursor: pointer;
  transition: background .16s;
}
.retry:hover { background: var(--warn-bg); }
.retry:disabled { opacity: .5; cursor: default; }

.comment-box { margin-top: .55rem; display: flex; gap: .4rem; flex-wrap: wrap; }
.comment-box input { flex: 1 1 220px; }

/* ───────────────────────────── «ψάχνω στα TDS» */

.thinking { display: flex; align-items: center; gap: .6rem; color: var(--ink-soft); font-size: .92rem; }
.dots span {
  display: inline-block; width: 7px; height: 7px; margin-right: 4px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cyan), var(--violet));
  animation: blink 1.25s ease-in-out infinite;
}
.dots span:nth-child(2) { animation-delay: .18s; }
.dots span:nth-child(3) { animation-delay: .36s; }
@keyframes blink { 0%,100% { opacity: .25; transform: scale(.82); } 50% { opacity: 1; transform: scale(1); } }

/* ═══════════════════════════════════════════════════ φόρμες */

.composer { position: sticky; bottom: 0; padding: .6rem 0 .3rem; }
.composer .row { display: flex; gap: .55rem; align-items: flex-end; }

/* Γρήγορες ερωτήσεις — μία κυλιόμενη γραμμή από διακριτικά chips
   πάνω από το πλαίσιο γραφής (σκούρο φόντο composer) */
.quick-row {
  display: flex;
  flex-wrap: nowrap;
  gap: .4rem;
  padding: 0 0 .5rem;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.quick-q {
  flex: none;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .07);
  color: rgba(226, 240, 255, .88);
  border-radius: 999px;
  padding: .3rem .8rem;
  font-size: .82rem;
  font-weight: 550;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.quick-q:hover {
  background: var(--cyan-soft);
  border-color: var(--cyan);
  color: #fff;
}

textarea, input[type=text], input[type=password] {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: .7rem .85rem;
  font: inherit;
  font-size: 1rem;
  background: rgba(255, 255, 255, .96);
  color: var(--ink);
  transition: border-color .16s, box-shadow .16s;
}
textarea { resize: vertical; min-height: 54px; max-height: 220px; }
textarea:focus, input:focus {
  outline: none;
  border-color: var(--brand-light);
  box-shadow: 0 0 0 4px var(--cyan-soft);
}
::placeholder { color: #93a3b6; }

button {
  border: none;
  border-radius: var(--r);
  padding: .68rem 1.2rem;
  font: inherit;
  font-size: .94rem;
  font-weight: 650;
  cursor: pointer;
  transition: transform .12s, box-shadow .18s, filter .16s;
}
button:active { transform: translateY(1px); }
button.primary {
  color: #fff;
  background: linear-gradient(135deg, var(--brand-light), var(--brand));
  box-shadow: 0 4px 16px rgba(17, 51, 90, .3);
}
button.primary:hover { filter: brightness(1.09); box-shadow: 0 6px 22px rgba(17, 51, 90, .38); }
button.secondary {
  background: rgba(17, 51, 90, .07);
  color: var(--brand);
  border: 1px solid rgba(17, 51, 90, .12);
}
button.secondary:hover { background: rgba(17, 51, 90, .12); }
button.small { padding: .34rem .72rem; font-size: .84rem; font-weight: 550; border-radius: 9px; }
button:disabled { opacity: .5; cursor: default; filter: none; }

label {
  display: block;
  font-size: .82rem;
  color: var(--brand);
  font-weight: 650;
  margin: .85rem 0 .3rem;
}

.hint { font-size: .83rem; color: var(--ink-soft); margin-top: .35rem; }
.notice { border-radius: var(--r); padding: .65rem .9rem; margin: .6rem 0; font-size: .9rem; }
.notice.err { background: var(--err-bg); border: 1px solid #f3b5b0; color: var(--err); }
.notice.ok  { background: var(--ok-bg);  border: 1px solid #b3e3ca; color: var(--ok); }

/* ═══════════════════════════════════════════════════ πίνακες & λίστες */

table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: right; padding: .58rem .6rem; border-bottom: 1px solid var(--line); }
th {
  color: var(--ink-soft);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
}
tr.off td { opacity: .45; }

.list-item {
  display: flex; justify-content: space-between; gap: .6rem; align-items: center;
  padding: .7rem .6rem; border-radius: var(--r-sm);
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background .14s, transform .14s;
}
.list-item:hover { background: rgba(17, 51, 90, .045); transform: translateX(2px); }
.list-item:last-child { border-bottom: none; }
.list-item .t { font-weight: 650; color: var(--brand); }
.list-item .d { font-size: .8rem; color: var(--ink-soft); }

/* ═══════════════════════════════════ διορθώσεις του χημείου */

.fix-box {
  margin-top: .7rem;
  padding: .85rem;
  border-radius: var(--r);
  background: linear-gradient(135deg, rgba(56,214,245,.07), rgba(108,140,255,.07));
  border: 1px solid rgba(56, 214, 245, .28);
}
.fix-box textarea { margin-bottom: .45rem; }
.fix-box .hint { margin-bottom: 0; }

.corr {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: .95rem;
  margin-bottom: .85rem;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.corr-head { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin-bottom: .65rem; }
.corr-label {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-soft); font-weight: 700; margin-top: .7rem;
}
.corr summary.corr-label { cursor: pointer; }
.corr-q { font-weight: 650; color: var(--brand); }
.corr-old {
  background: var(--err-bg); border-left: 3px solid #f3b5b0;
  padding: .55rem .75rem; border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: .92rem;
}
.corr-good {
  background: var(--ok-bg); border-left: 3px solid var(--ok);
  padding: .55rem .75rem; border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.corr-old p:last-child, .corr-good p:last-child { margin-bottom: 0; }

/* ═══════════════════════════════════════════════════ προφίλ χρήστη */

.profile-id { display: flex; align-items: center; gap: .85rem; margin-bottom: .5rem; }

.avatar {
  display: grid; place-items: center;
  width: 52px; height: 52px; flex: none;
  border-radius: 16px;
  font-size: 1.4rem; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--brand-light), var(--brand));
  box-shadow: 0 4px 16px rgba(17, 51, 90, .3);
}

.profile-name { font-size: 1.15rem; font-weight: 700; color: var(--brand); letter-spacing: -.01em; }
.profile-sub { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center;
               font-size: .84rem; color: var(--ink-soft); margin-top: .2rem; }

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: .55rem;
  margin: 1rem 0 .3rem;
}
.stat {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: .7rem .75rem;
  background: linear-gradient(160deg, rgba(17,51,90,.035), rgba(17,51,90,.01));
}
.stat-v { font-size: 1.45rem; font-weight: 700; color: var(--brand); line-height: 1.1; }
.stat-l { font-size: .76rem; color: var(--ink-soft); margin-top: .18rem; line-height: 1.3; }
.stat.good { background: linear-gradient(160deg, rgba(18,133,90,.10), rgba(18,133,90,.02)); }
.stat.good .stat-v { color: var(--ok); }
.stat.bad  { background: linear-gradient(160deg, rgba(179,38,30,.09), rgba(179,38,30,.02)); }
.stat.bad  .stat-v { color: var(--err); }
.stat.warn { background: linear-gradient(160deg, rgba(184,121,26,.11), rgba(184,121,26,.02)); }
.stat.warn .stat-v { color: var(--warn); }

.rating {
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: 0 var(--r) var(--r) 0;
  padding: .8rem .9rem;
  margin-bottom: .7rem;
  background: #fff;
}
.rating.good { border-left-color: var(--ok); }
.rating.bad  { border-left-color: var(--err); }

.rating-top { display: flex; gap: .5rem; align-items: baseline; }
.rating-mark { font-size: 1.05rem; flex: none; }
.rating-comment {
  margin-top: .55rem; padding: .5rem .7rem;
  background: var(--warn-bg); border-radius: var(--r-sm);
  font-size: .9rem;
}
.rating-comment .corr-label { margin-top: 0; }
.rating-answer {
  background: rgba(17, 51, 90, .035);
  border-radius: var(--r-sm);
  padding: .6rem .8rem;
  font-size: .92rem;
  margin-top: .4rem;
}
.rating-answer p:last-child { margin-bottom: 0; }

/* ═══════════════════════════════════════ κάρτες ομάδας (πίνακας ελέγχου) */

.team-card {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: .9rem 1rem;
  margin-bottom: .8rem;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .18s, transform .14s;
}
.team-card:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.team-card.off { opacity: .55; }

.avatar.sm { width: 40px; height: 40px; border-radius: 12px; font-size: 1.05rem; }

.mini-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: .4rem;
  margin: .8rem 0 .5rem;
}
.mini {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: .45rem .5rem;
  text-align: center;
  background: rgba(17, 51, 90, .028);
}
.mini b { display: block; font-size: 1.02rem; color: var(--brand); line-height: 1.2; }
.mini span { font-size: .71rem; color: var(--ink-soft); }
.mini.good b { color: var(--ok); }
.mini.bad  b { color: var(--err); }
.mini.warn b { color: var(--warn); }

/* ═══════════════════════════════════════════════════ footer */

footer {
  max-width: 940px;
  margin: 0 auto;
  padding: .4rem 1rem 2.5rem;
  font-size: .82rem;
  color: rgba(226, 240, 255, .55);
  text-align: center;
}
footer .sep { color: rgba(226, 240, 255, .25); margin: 0 .45rem; }

/* Η υπόδειξη κάτω από το πεδίο ερώτησης κάθεται πάνω στο σκούρο φόντο —
   και μαζί της το κουμπί «Νέα συνομιλία», που αλλιώς γίνεται αόρατο. */
.composer .hint { color: rgba(226, 240, 255, .55); }
.composer .hint button {
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .20);
  color: rgba(233, 243, 255, .9);
}
.composer .hint button:hover { background: rgba(255, 255, 255, .19); color: #fff; }

/* ═══════════════════════════════════════════════════ οθόνη σύνδεσης */

.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 1.2rem; }

.login-card {
  width: 100%;
  max-width: 400px;
  padding: 2rem 1.75rem 1.75rem;
  border-radius: 22px;
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}
.login-card::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--cyan), var(--violet), var(--brand-light));
}
.login-card .badge {
  display: grid; place-items: center;
  width: 62px; height: 62px; margin: 0 auto .9rem;
  border-radius: 18px; background: #fff;
  box-shadow: 0 4px 20px rgba(17, 51, 90, .18), 0 0 0 1px var(--line);
}
.login-card .badge img { height: 34px; }
.login-card h1 {
  font-size: 1.28rem; color: var(--brand); text-align: center;
  margin: 0 0 .25rem; letter-spacing: -.02em;
}
.login-card .sub {
  text-align: center; color: var(--ink-soft);
  font-size: .87rem; margin: 0 0 1.2rem;
}
.login-card button { width: 100%; margin-top: 1.15rem; }
.login-foot {
  margin-top: 1.1rem; padding-top: .9rem;
  border-top: 1px solid var(--line);
  font-size: .78rem; color: var(--ink-soft); text-align: center;
}

/* ═══════════════════════════════════════════════════ κινητό */

@media (max-width: 700px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  body { font-size: 15px; }
  header { padding: .55rem .75rem; gap: .6rem; }
  header .logo-wrap { width: 34px; height: 34px; border-radius: 9px; }
  header img.logo { height: 22px; }
  .title { font-size: .95rem; }
  .title small { display: none; }
  #who { font-size: .74rem; }
  .nav-btn { flex: 1 1 auto; text-align: center; padding: .38rem .5rem; font-size: .82rem; }
  main { padding: .8rem .7rem 1.5rem; }
  .card, .phase { padding: .95rem; border-radius: var(--r); }
  .phase h1 { font-size: 1.12rem; }
  .msg.user .bubble { max-width: 92%; }
  th, td { padding: .45rem .3rem; font-size: .84rem; }

  /* ── Κάθετη χρήση σε κινητό (25/08/2026 — φάση πωλητών) ── */
  /* 16px στο πεδίο γραφής: κάτω από αυτό το iOS κάνει αυτόματο zoom
     σε κάθε πάτημα και «χοροπηδά» η οθόνη. */
  .composer textarea { font-size: 16px; }
  /* Το πλαίσιο γραφής να μην κρύβεται από τη «μπάρα»/εγκοπή του iPhone */
  .composer { padding-bottom: calc(.3rem + env(safe-area-inset-bottom)); }
  /* Στόχοι αφής: κουμπί αποστολής και chips αρκετά μεγάλα για δάχτυλο */
  .composer .primary { min-height: 44px; padding: .55rem 1rem; }
  .quick-q { padding: .45rem .85rem; font-size: .85rem; }
  /* Η οδηγία «Enter για αποστολή» δεν έχει νόημα σε κινητό —
     κρατάμε μόνο το κουμπί «Νέα συνομιλία» μέσα στο hint */
  .composer .hint { font-size: 0; gap: 0; }
  .composer .hint button { font-size: .8rem; min-height: 38px; }
}

/* ══════════════════════ Πολιτική κίνησης (25/08/2026) ══════════════════════
   Κατά το design-engineering skill του Emil Kowalski:
   - ισχυρό ease-out (τα ενσωματωμένα CSS easings είναι «άτονα»)
   - διάρκειες κάτω από 300ms
   - κάθε πατήσιμο στοιχείο «απαντά» με scale(0.97) στο :active
   - transitions σε ΣΥΓΚΕΚΡΙΜΕΝΕΣ ιδιότητες, ποτέ «all» */
:root { --ease-snap: cubic-bezier(0.23, 1, 0.32, 1); }

.view.active { animation: rise .22s var(--ease-snap) both; }
.msg { animation: rise .2s var(--ease-snap) both; }

.primary, .secondary, .quick-q, .nav-btn, .composer .hint button {
  transition: transform 160ms var(--ease-snap),
              background .15s ease, color .15s ease, border-color .15s ease;
}
.primary:active, .secondary:active, .quick-q:active,
.nav-btn:active, .composer .hint button:active {
  transform: scale(0.97);
}

/* ═══════════ Futuristic θέμα πωλητή (25/08/2026, β' γύρος Στέφανου) ═══════════
   Σκούρο «γυαλί» με νέον cyan/violet — μόνο για body.chatui, το εσωτερικό
   UI των χημικών μένει ως έχει. Η κίνηση παραμένει πειθαρχημένη (--ease-snap). */
body.chatui {
  background:
    radial-gradient(900px 520px at 88% -6%, rgba(108, 140, 255, .20), transparent 60%),
    radial-gradient(820px 500px at 6% -2%, rgba(56, 214, 245, .16), transparent 55%),
    linear-gradient(180deg, #050b14 0%, #081a30 55%, #050b14 100%);
  background-attachment: fixed;
}
body.chatui header {
  background: rgba(6, 16, 30, .55);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  padding: 8px 16px;
  gap: 10px;
  flex: none;
}
body.chatui header::after { display: none; }
body.chatui .title { font-size: .95rem; }
/* Ο χρήστης ως καθαρό status badge (review #16) */
body.chatui #who {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: .76rem;
  color: #dbe7f5;
}
body.chatui main { max-width: 760px; }

/* Ό,τι δεν ανήκει στον πωλητή κρύβεται ΚΑΙ από το CSS (όχι μόνο από το
   JS) — έτσι δεν προλαβαίνει να φανεί ούτε στιγμή στο refresh. */
body.seller #nav-corrections,
body.seller #nav-users,
body.seller .nav-btn[data-view="account"],
body.seller #btn-help,
body.seller #btn-logout,
body.seller #phase-panel { display: none !important; }

/* Πραγματικό segmented control (review #17): ήρεμο, χωρίς glow,
   με στόχους αφής ≥44px και αναγνώσιμο inactive state. */
body.chatui nav {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 12px;
  padding: 3px;
  gap: 3px;
}
body.chatui .nav-btn {
  border: 0;
  background: transparent;
  border-radius: 9px;
  min-height: 44px;
  color: rgba(226, 240, 255, .78);
  font-weight: 600;
}
body.chatui .nav-btn.active {
  background: rgba(56, 214, 245, .16);
  color: #fff;
  box-shadow: none;
}
body.chatui .nav-btn.nav-new { color: var(--cyan); flex: 0 0 auto; }

/* Φούσκες: ήσυχες σκούρες επιφάνειες, το cyan ΜΟΝΟ για έμφαση
   (review #12: λιγότερο neon, #14: radius 16, #15: τυπογραφία). */
body.chatui .msg.bot .bubble {
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 16px;
  border-bottom-left-radius: 6px;
  padding: 16px;
  color: #eaf2fc;
  font-size: .97rem;
  line-height: 1.68;
  box-shadow: none;
}
body.chatui .bubble p { margin: 0 0 .8rem; }
body.chatui .bubble p:last-child { margin-bottom: 0; }
body.chatui .msg.bot .bubble strong { color: #8fe7ff; font-weight: 650; }
body.chatui .msg.bot .bubble li::marker { color: var(--cyan); }
body.chatui .stream-text { color: #eaf2fc; }
body.chatui .thinking { color: rgba(230, 238, 251, .8); }
body.chatui .msg.user .bubble {
  background: linear-gradient(135deg, #1f8fc9, #3f6ce0);
  border-radius: 16px;
  border-bottom-right-radius: 6px;
  padding: 13px 16px;
  box-shadow: none;
}

/* Chat-like composer (review #9): ενιαίο pill πλαίσιο με κυκλικό «↑»
   μέσα δεξιά — ήρεμο, χωρίς glow. */
body.chatui .composer .row { align-items: flex-end; gap: 8px; }
body.chatui .composer textarea {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #eef5ff;
  border-radius: 16px;
  min-height: 50px;
  padding: 13px 16px;
  caret-color: var(--cyan);
}
body.chatui .composer textarea::placeholder { color: rgba(226, 240, 255, .55); }
body.chatui .composer textarea:focus {
  border-color: rgba(56, 214, 245, .6);
  box-shadow: 0 0 0 3px rgba(56, 214, 245, .12);
  outline: none;
}
body.chatui .send-round {
  width: 50px;
  height: 50px;
  min-height: 50px;
  flex: none;
  border-radius: 50%;
  border: 0;
  background: var(--cyan);
  color: #052030;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1;
  padding: 0;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.chatui .send-round:disabled { background: rgba(255, 255, 255, .12); color: rgba(226, 240, 255, .35); }
body.chatui .send-round.sending { animation: pulseSend 1.1s ease-in-out infinite; }
@keyframes pulseSend { 50% { opacity: .55; } }
body.chatui .quick-q {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .14);
  color: #d6e6f5;
  border-radius: 999px;
}
body.chatui .quick-q:hover {
  background: rgba(56, 214, 245, .12);
  border-color: rgba(56, 214, 245, .4);
  box-shadow: none;
  color: #fff;
}
/* Το μεγάλο «Νέα συνομιλία» έφυγε από κάτω (πήγε στην κεφαλίδα ως ＋) */
body.seller .composer .hint { display: none; }

/* Ιστορικό/κάρτες σε σκούρο γυαλί */
body.seller .card {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
  color: #e6eefb;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
body.seller .card h2 { color: #fff; }
body.seller .hint { color: rgba(226, 240, 255, .55); }
body.chatui footer { color: rgba(226, 240, 255, .4); }
body.chatui .footer-logout { color: rgba(226, 240, 255, .5); }

/* (Το «Νέα συνομιλία» ζει πλέον στην κεφαλίδα ως «＋ Νέα» — review #11.
   Το hint του composer κρύβεται για πωλητές στο block του chat composer.) */

/* ─── Αρχιτεκτονική οθόνης (review 25/08, P0):
   Header σταθερό πάνω · ΜΟΝΟ τα μηνύματα scrollable · composer σταθερός
   κάτω. Η σελίδα ΔΕΝ κυλάει — άρα το περιεχόμενο δεν περνάει ΠΟΤΕ πίσω
   από το composer, και το iOS keyboard δεν προκαλεί page jumping. ─── */
/* Το #app είναι «διάφανο» στο εσωτερικό UI (σαν να μην υπάρχει)… */
#app { display: contents; }

body.chatui {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
/* …και στον πωλητή γίνεται το «κουτί» που κουμπώνει στο ορατό παράθυρο
   και ακολουθεί το πληκτρολόγιο (τύπου WhatsApp) — η μετατόπιση δουλεύει
   αξιόπιστα ΜΟΝΟ σε εσωτερικό στοιχείο, όχι στο body (iOS). */
body.chatui #app {
  display: flex;
  flex-direction: column;
  /* Καρφωμένο στο ορατό πλαίσιο: κανένα «νεκρό» κενό κάτω από το υποσέλιδο
     — όλος ο χώρος πηγαίνει στη συνομιλία. Το ύψος το κουμαντάρει το JS
     (visualViewport)· αυτό εδώ είναι το fallback. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  padding-top: env(safe-area-inset-top);
  transform-origin: top left;
  will-change: transform;
}
body.chatui main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
}
body.chatui #view-chat.active {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
body.chatui #thread {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 14px;                      /* σταθερή απόσταση μηνυμάτων */
  /* padding-top 26px > ζώνη ξεθωριάσματος 18px: το πρώτο μήνυμα φαίνεται
     ΟΛΟΚΛΗΡΟ όταν είσαι τέρμα πάνω — το fade πιάνει μόνο ό,τι κυλάει */
  padding: 26px 2px 16px;
  /* Ό,τι κυλάει προς τα πάνω «σβήνει» μαλακά κάτω από τις καρτέλες —
     όχι απότομο κόψιμο μηνύματος (καθαρή αίσθηση τύπου WhatsApp) */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18px);
  mask-image: linear-gradient(180deg, transparent 0, #000 18px);
}

/* Με ανοιχτό πληκτρολόγιο: ΜΟΝΟ chat + πλαίσιο γραφής — τίποτα άλλο */
body.chatui.kbd-open .quick-row { display: none; }
body.chatui.kbd-open footer { display: none; }
body.chatui.kbd-open .composer { padding-bottom: 8px; }
body.chatui .composer {
  position: static;
  flex: none;
  padding-bottom: 8px;   /* το safe-area το καλύπτει ήδη η μπάρα του Safari */
}
/* Το empty state κεντράρεται στον διαθέσιμο χώρο */
body.chatui .empty-state { margin: auto 0; }

/* Στην κλειδωμένη διάταξη, ΚΑΘΕ ενότητα εκτός chat (Ιστορικό κ.λπ.)
   γίνεται το δικό της scrollable area — αλλιώς κόβεται και δεν κυλάει. */
body.chatui main > .view.active:not(#view-chat) {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 10px 0 24px;
}

/* Τα chips δείχνουν ότι κυλάνε: απαλό «σβήσιμο» στη δεξιά άκρη */
body.chatui .quick-row {
  padding: 2px 2px .5rem;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 32px), transparent);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 32px), transparent);
}

/* Πλήρης εκμετάλλευση οθόνης σε κινητό — spacing system 16px (review #13) */
@media (max-width: 620px) {
  body.chatui main { padding: 8px 16px 0; max-width: none; }
  body.chatui header { padding: 6px 16px; }
  body.chatui .msg.user .bubble { max-width: 92%; }
  /* Υποσέλιδο-γραμμούλα: ο χώρος ανήκει στη συνομιλία */
  body.chatui footer { padding: 2px 16px 4px; font-size: .68rem; flex: none; }
}

/* ─── Empty state πωλητή (review #4) ─── */
.empty-state {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: center;
  padding: 12px 4px;
}
.empty-state h2 {
  font-size: 1.35rem;
  font-weight: 700;
  color: #f2f7ff;
  margin: 0;
  letter-spacing: -.01em;
}
.empty-sub {
  color: rgba(226, 240, 255, .62);
  font-size: .88rem;
  margin: 0 0 10px;
}
.empty-cats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.empty-cat {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
  padding: 16px 10px;
  color: #e6eefb;
  font-weight: 600;
  font-size: .88rem;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease,
              transform 160ms var(--ease-snap);
}
.empty-cat .ico { font-size: 1.45rem; }
.empty-cat:hover { background: rgba(56, 214, 245, .1); border-color: rgba(56, 214, 245, .35); }
.empty-cat:active { transform: scale(0.97); }

/* ─── «↓ Μετάβαση στην απάντηση» (review #8) ─── */
.jump-bottom {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  display: none;
  background: rgba(10, 25, 45, .95);
  border: 1px solid rgba(56, 214, 245, .4);
  color: #cfeaff;
  border-radius: 999px;
  padding: 9px 16px;
  font-size: .82rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .4);
  animation: rise .2s var(--ease-snap) both;
}
.jump-bottom.show { display: block; }
.jump-bottom:active { transform: translateX(-50%) scale(0.97); }

/* ─── Feedback 👍/👎 (review #18): καθαρή ερώτηση + στόχοι αφής ─── */
.feedback-q { font-size: .8rem; color: inherit; opacity: .75; margin-right: 2px; }
.vote {
  min-width: 40px;
  min-height: 40px;
  font-size: 1.05rem;
  border-radius: 12px;
}
body.chatui .vote {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .16);
}
body.chatui .feedback-q { color: rgba(226, 240, 255, .7); opacity: 1; }

/* Chips carousel: «κούμπωμα» στη θέση κάθε chip (review #3) */
body.chatui .quick-row { scroll-snap-type: x proximity; }
body.chatui .quick-q { scroll-snap-align: start; }

/* Το λογότυπο είναι κλικαμπλ — γυρνά στην αρχική */
#logo-home { cursor: pointer; position: relative; transition: transform 160ms var(--ease-snap); }
#logo-home:active { transform: scale(0.94); }
/* Αόρατη επέκταση της περιοχής αφής: το 34px λογότυπο «πιάνεται» σαν 50px
   χωρίς να αλλάζει οπτικά τίποτα (στόχοι αφής ≥44px για δάχτυλα). */
#logo-home::after { content: ''; position: absolute; inset: -8px; }

/* Διακριτική «Έξοδος» στο υποσέλιδο (μόνο πωλητές) */
.footer-logout {
  background: none;
  border: 0;
  color: var(--ink-soft);
  font-size: .78rem;
  text-decoration: underline;
  cursor: pointer;
  margin-left: .6rem;
  padding: 2px 4px;
  font-family: inherit;
}

/* ════════════════════════════════════════════════════════════════════
   Design v2 πίνακα ομάδας (25/08/2026) — «αίσθηση μεγάλου προϊόντος»
   κατά το design-engineering skill: όλα στοιχισμένα σε κοινό ρυθμό,
   πειθαρχημένη τυπογραφία, νούμερα σε ευθυγράμμιση (tabular),
   segmented controls, καμία περιττή κίνηση σε συχνές ενέργειες.
   ════════════════════════════════════════════════════════════════════ */

/* — Κάρτες: ενιαίο περίγραμμα, ήρεμη σκιά, κοινό εσωτερικό ρυθμό — */
.card {
  border-radius: 14px;
  padding: 1.25rem 1.4rem 1.35rem;
  margin-bottom: 1rem;
  box-shadow: 0 1px 2px rgba(7, 24, 44, .18), 0 8px 28px rgba(7, 24, 44, .16);
}

/* — Επικεφαλίδες ενοτήτων: μικρές, κεφαλαιοποιημένες «ετικέτες προϊόντος» — */
.card h2, #hist-title {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  font-weight: 700;
  color: var(--ink-soft);
  margin: 0 0 1rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--line);
}

/* — Φόρμες μέσα σε κάρτες: στοιχισμένες μικρο-ετικέτες — */
.card label { font-size: .8rem; font-weight: 600; color: var(--ink-soft); }

/* — Νούμερα παντού σε στήλη: ίδιο πλάτος ψηφίων — */
table, .stat-v, .chip, .list-item .d, .stats { font-variant-numeric: tabular-nums; }

/* — Πίνακες: κείμενο αριστερά, νούμερα δεξιά, διακριτικές κεφαλίδες — */
th, td { padding: .6rem .65rem; }
th { font-size: .68rem; letter-spacing: .09em; }
th:first-child, td:first-child { text-align: left; }
tbody tr { transition: background 140ms ease; }
tbody tr:hover { background: rgba(17, 51, 90, .04); }

/* — Καρτέλες στατιστικών: επίπεδες, αυστηρές, με ευθυγραμμισμένα μεγέθη — */
.stats { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: .6rem; }
.stat {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .8rem .85rem .7rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 74px;
}
.stat-v { font-size: 1.55rem; letter-spacing: -.02em; }
.stat-l {
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 650;
  margin-top: .3rem;
}
.stat.good, .stat.bad, .stat.warn { background: #fff; }
.stat.good { border-left: 3px solid var(--ok); }
.stat.bad  { border-left: 3px solid var(--err); }
.stat.warn { border-left: 3px solid var(--warn); }

/* — Σειρές λιστών: ήρεμο hover (χωρίς μετατόπιση — συχνή ενέργεια) — */
.list-item { padding: .7rem .75rem; transition: background 140ms ease; }
.list-item:hover { background: rgba(17, 51, 90, .05); transform: none; }
.list-item:active { background: rgba(17, 51, 90, .09); }
.list-item .t { font-size: .93rem; }
.list-item .d { font-size: .78rem; margin-top: .12rem; }

/* — Chips: ενιαίο ύψος και βάρος παντού — */
.chip {
  height: 22px;
  padding: 0 .6rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .01em;
}

/* — Ομάδες φίλτρων: segmented control αντί για σκόρπια κουμπάκια — */
.corr-filter, .sort-btn, .hist-scope {
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink-soft);
  font-weight: 600;
  font-size: .78rem;
  padding: .34rem .7rem;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease,
              transform 160ms var(--ease-snap);
}
.corr-filter:hover, .sort-btn:hover, .hist-scope:hover { border-color: var(--brand-light); color: var(--brand); }
.corr-filter.active, .sort-btn.active, .hist-scope.active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.corr-filter:active, .sort-btn:active, .hist-scope:active { transform: scale(0.97); }

/* — Εστίαση πληκτρολογίου: καθαρό δαχτυλίδι, σήμα ποιοτικού προϊόντος — */
:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
  border-radius: 6px;
}

/* — Ιστορικό στο θέμα πωλητή: αναγνώσιμα στοιχεία σε σκούρο γυαλί — */
body.seller .list-item { border-bottom-color: rgba(255, 255, 255, .09); }
body.seller .list-item:hover { background: rgba(255, 255, 255, .06); }
body.seller .list-item .t { color: #e6eefb; }
body.seller .list-item .d { color: rgba(226, 240, 255, .55); }
body.seller .chip {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .16);
  color: #cfe2f5;
}
body.seller .card h2, body.seller #hist-title {
  color: rgba(226, 240, 255, .6);
  border-bottom-color: rgba(255, 255, 255, .1);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}