/* ==========================================================================
   OLIAC BMS — Application styles
   Aesthetic:  deep crimson × cream paper, formal Japanese kabuki/wine feel
   Layout:     top bar nav (responsive collapse to hamburger on mobile)
   Type:       Manrope (UI), JetBrains Mono (numerics), Noto Serif JP (display)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&family=Noto+Serif+JP:wght@500;700&display=swap');

/* ---------- Tokens ----------------------------------------------------- */
:root {
  /* Cream paper ramp — washi-inspired warm off-whites */
  --paper:   #fdfaf2;
  --paper-2: #f7f1e1;
  --paper-3: #ede4cb;
  --paper-4: #d6c89d;

  /* Ink ramp (warm black) */
  --ink-950: #1a0c0c;
  --ink-900: #2a1818;
  --ink-700: #4a3030;
  --ink-500: #7a5a5a;
  --ink-300: #b09a98;
  --ink-200: #d4c5c2;

  /* Crimson ramp — kabuki / oxblood */
  --crimson-950: #3d0612;
  --crimson-900: #5a0f1c;
  --crimson-800: #6e1424;
  --crimson-700: #8b1a2b;     /* primary brand */
  --crimson-600: #a82637;
  --crimson-500: #c8102e;     /* signal red / hanko */
  --crimson-300: #e08494;
  --crimson-100: #f7d6dc;
  --crimson-050: #fbeaee;

  /* Gold accent (sparingly) */
  --gold:      #b8923a;
  --gold-soft: #d6b664;
  --gold-tint: #f5edd6;

  --line:      #e3d8b7;
  --line-2:    #f0e8cf;

  --positive:  #2e7d32;

  --shadow-1: 0 1px 0 rgba(58,12,12,.04), 0 1px 2px rgba(58,12,12,.05);
  --shadow-2: 0 12px 32px rgba(58,12,12,.10);

  --radius:    4px;
  --radius-lg: 8px;

  --fs-xs:  12px;
  --fs-sm:  13px;
  --fs-md:  15px;
  --fs-lg:  17px;
  --fs-xl:  22px;
  --fs-2xl: 30px;

  --mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --sans:  'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --serif: 'Noto Serif JP', 'Times New Roman', 'Hiragino Mincho ProN', serif;

  --tap: 44px;
}

/* ---------- Reset ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--sans);
  font-size: var(--fs-md);
  font-weight: 400;
  color: var(--ink-950);
  background: var(--paper);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}
a { color: var(--crimson-700); text-decoration: none; }
a:hover { color: var(--crimson-500); text-decoration: underline; }

img, svg { max-width: 100%; }

/* ---------- Top bar ---------------------------------------------------- */
.topbar {
  display: flex;
  align-items: stretch;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
  min-height: 68px;
  padding: 0 24px;
  position: relative;
  z-index: 10;
  box-shadow: var(--shadow-1);
}
.topbar::after {
  /* thin crimson rule along the bottom edge */
  content: '';
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg,
    var(--crimson-700) 0%,
    var(--crimson-700) 200px,
    var(--paper-4) 200px,
    var(--paper-4) 100%);
}

.topbar .brand {
  display: flex; align-items: center; gap: 0;
  padding-right: 24px;
  flex-shrink: 0;
}
.topbar .brand .logo {
  height: 46px; width: auto; display: block;
}
/* Click-to-home on logo */
.topbar .brand a { display: flex; align-items: center; }

.topbar nav {
  display: flex; align-items: stretch;
  margin-left: 12px;
  border-left: 1px solid var(--line);
}
.topbar nav a {
  display: flex; align-items: center;
  padding: 0 22px;
  color: var(--ink-700);
  font-size: var(--fs-sm); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  border-right: 1px solid var(--line);
  position: relative;
  transition: color .15s, background .15s;
  min-height: var(--tap);
  text-decoration: none;
}
.topbar nav a:hover {
  background: var(--paper-3);
  color: var(--crimson-800);
  text-decoration: none;
}
.topbar nav a.active {
  color: var(--crimson-800);
  background: var(--paper);
}
.topbar nav a.active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; background: var(--crimson-700); z-index: 1;
}

.topbar .spacer { flex: 1; }

.topbar .userbox {
  display: flex; align-items: center; gap: 14px;
  font-size: var(--fs-sm); color: var(--ink-700);
  flex-shrink: 0;
}
.topbar .userbox .uname {
  font-weight: 700; color: var(--ink-900);
}
.topbar .userbox .role {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 600;
  background: var(--crimson-700); color: var(--paper);
  padding: 4px 10px; border-radius: var(--radius);
}
.topbar .userbox a.logout {
  color: var(--ink-700);
  padding: 8px 14px;
  border: 1px solid var(--ink-200);
  font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: .1em;
  font-weight: 700;
  border-radius: var(--radius);
  transition: all .15s;
  min-height: 36px;
  display: inline-flex; align-items: center;
  background: var(--paper);
  text-decoration: none;
}
.topbar .userbox a.logout:hover {
  background: var(--crimson-700);
  border-color: var(--crimson-700);
  color: var(--paper);
  text-decoration: none;
}

/* ---------- Mobile menu toggle ---------------------------------------- */
.menu-toggle {
  display: none;
  background: var(--paper);
  border: 1px solid var(--ink-200);
  color: var(--ink-700);
  width: 42px; height: 42px;
  border-radius: var(--radius);
  cursor: pointer;
  align-items: center; justify-content: center;
  margin-left: auto;
}
.menu-toggle svg { width: 22px; height: 22px; }

/* ---------- Page shell ------------------------------------------------- */
.page {
  padding: 32px 28px 60px;
  max-width: 1500px;
  margin: 0 auto;
}
.page-header {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 24px; padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  position: relative;
  flex-wrap: wrap; gap: 8px;
}
.page-header::after {
  content: ''; position: absolute; left: 0; bottom: -1px;
  width: 64px; height: 2px; background: var(--crimson-700);
}
.page-header h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink-950);
}
.page-header .subtitle {
  font-family: var(--mono); font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--ink-500); font-weight: 500;
}

/* ---------- Cards / panels -------------------------------------------- */
.panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 20px;
  box-shadow: var(--shadow-1);
}
.panel > .panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .14em;
  color: var(--crimson-800); font-weight: 700;
  flex-wrap: wrap; gap: 8px;
  border-radius: var(--radius) var(--radius) 0 0;
}
.panel > .panel-body { padding: 20px; }

/* ---------- Forms ----------------------------------------------------- */
label.field {
  display: block; margin-bottom: 14px;
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .12em;
  color: var(--ink-700); font-weight: 700;
}
label.field > .control { margin-top: 6px; }

.input, select.input, textarea.input {
  width: 100%;
  padding: 11px 14px;
  font-family: var(--sans); font-size: var(--fs-md);
  font-weight: 500;
  color: var(--ink-950);
  background: var(--paper);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  transition: border-color .15s, box-shadow .15s, background .15s;
  min-height: var(--tap);
  -webkit-appearance: none; appearance: none;
}
select.input {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%238b1a2b' d='M6 8L0 0h12z'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center;
  padding-right: 36px;
}
.input.mono { font-family: var(--mono); letter-spacing: .02em; }
.input:focus, select.input:focus, textarea.input:focus {
  outline: none; border-color: var(--crimson-700);
  box-shadow: 0 0 0 3px rgba(139, 26, 43, .15);
}
.input[disabled], select.input[disabled] {
  background: var(--paper-3); color: var(--ink-300); cursor: not-allowed;
}

.field-row { display: flex; gap: 14px; flex-wrap: wrap; }
.field-row > label.field { flex: 1 1 220px; margin-bottom: 0; }

/* ---------- Buttons --------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--sans);
  font-size: var(--fs-sm); font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  padding: 11px 18px;
  border: 1px solid var(--crimson-700);
  background: var(--crimson-700); color: var(--paper);
  border-radius: var(--radius); cursor: pointer;
  transition: all .12s ease;
  text-decoration: none;
  min-height: var(--tap);
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover {
  background: var(--crimson-800); border-color: var(--crimson-800);
  text-decoration: none; color: var(--paper);
}
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--crimson-700); border-color: var(--crimson-700); color: var(--paper); }
.btn.primary:hover { background: var(--crimson-900); border-color: var(--crimson-900); }
.btn.gold { background: var(--gold); border-color: var(--gold); color: var(--ink-950); }
.btn.gold:hover { background: #9c7c2e; border-color: #9c7c2e; }
.btn.danger { background: var(--crimson-500); border-color: var(--crimson-500); color: var(--paper); }
.btn.danger:hover { background: #a40d26; border-color: #a40d26; }
.btn.ghost {
  background: transparent; color: var(--ink-700); border-color: var(--ink-200);
}
.btn.ghost:hover {
  background: var(--paper-2); border-color: var(--crimson-700); color: var(--crimson-800);
}
.btn.sm {
  padding: 7px 13px; font-size: var(--fs-xs); letter-spacing: .06em; min-height: 34px;
}

/* ---------- Tables ---------------------------------------------------- */
.table-wrap {
  width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper);
}
.table {
  width: 100%; border-collapse: collapse;
  font-size: var(--fs-sm);
  min-width: 720px;
}
.table thead th {
  text-align: left;
  font-size: 11px; text-transform: uppercase; letter-spacing: .14em;
  color: var(--ink-500); font-weight: 700;
  padding: 14px 18px;
  border-bottom: 2px solid var(--paper-4);
  background: var(--paper-2);
  white-space: nowrap;
}
.table tbody td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-2);
  vertical-align: top;
  font-size: var(--fs-sm);
}
.table tbody tr:hover { background: var(--paper-2); }
.table tbody tr:last-child td { border-bottom: none; }
.table .num { font-family: var(--mono); text-align: right; font-variant-numeric: tabular-nums; }
.table .id  { font-family: var(--mono); color: var(--crimson-700); font-weight: 600; }
.table .muted { color: var(--ink-300); }

/* ---------- Status pills ---------------------------------------------- */
.pill {
  display: inline-block;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px;
  border: 1px solid; white-space: nowrap;
}
.pill.auction          { color: var(--crimson-700); border-color: var(--crimson-300); background: var(--crimson-050); }
.pill.purchased        { color: var(--paper); border-color: var(--positive); background: var(--positive); }
.pill.sold             { color: var(--paper); border-color: var(--crimson-700); background: var(--crimson-700); }
.pill.non-sold         { color: var(--crimson-700); border-color: var(--crimson-500); background: var(--crimson-100); }
.pill.discard,
.pill.auction-cancelled{ color: #6b6b6b; border-color: #c8c8c8; background: #f1f1f1; }
.pill.missed           { color: #8b6914; border-color: var(--gold); background: var(--gold-tint); }
.pill.one-price        { color: var(--crimson-800); border-color: var(--crimson-700); background: var(--crimson-050); }

.pill.role-admin   { background: var(--ink-950); color: var(--gold-soft); border-color: var(--ink-950); }
.pill.role-manager { background: var(--crimson-700); color: var(--paper); border-color: var(--crimson-700); }
.pill.role-bidder  { background: var(--crimson-600); color: var(--paper); border-color: var(--crimson-600); }
.pill.role-dm      { background: var(--gold); color: var(--ink-950); border-color: var(--gold); }

/* ---------- Lock badge ------------------------------------------------ */
.lock-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  color: var(--crimson-500); letter-spacing: .12em; text-transform: uppercase;
}
.lock-badge::before { content: '🔒'; font-size: 12px; }

/* ---------- Flash ----------------------------------------------------- */
.flash {
  padding: 13px 18px; margin-bottom: 16px;
  border: 1px solid; border-left-width: 4px;
  border-radius: var(--radius);
  font-size: var(--fs-sm); font-weight: 500;
}
.flash.success { color: #1b5e20; border-color: #a5d6a7; background: #e8f5e9; border-left-color: var(--positive); }
.flash.error   { color: var(--crimson-900); border-color: var(--crimson-300); background: var(--crimson-100); border-left-color: var(--crimson-500); }
.flash.info    { color: var(--ink-900); border-color: var(--paper-4); background: var(--paper-2); border-left-color: var(--crimson-700); }

/* ---------- Login page ------------------------------------------------ */
.login-shell {
  min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background:
    radial-gradient(circle at 20% 20%, rgba(139,26,43,.10), transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(184,146,58,.10), transparent 50%),
    var(--paper);
  position: relative; overflow: hidden;
}
.login-shell::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(45deg, transparent 0 18px, rgba(139,26,43,.025) 18px 19px);
  pointer-events: none;
}
.login-card {
  width: 100%; max-width: 440px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 4px solid var(--crimson-700);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  box-shadow: var(--shadow-2);
  position: relative; z-index: 1;
}
.login-card .logo-block {
  display: flex; flex-direction: column; align-items: center;
  margin-bottom: 26px;
}
.login-card .logo-block svg { width: 280px; height: auto; max-width: 100%; }
.login-card .logo-block .tagline {
  font-family: var(--mono); font-size: 10px; letter-spacing: .26em;
  color: var(--ink-500); margin-top: 10px; font-weight: 500;
  text-transform: uppercase;
}
.login-card h1 {
  margin: 0 0 4px;
  font-family: var(--serif); font-size: 22px; font-weight: 700;
  color: var(--ink-900); text-align: center;
}
.login-card .subtitle {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-500);
  text-align: center; margin-bottom: 24px; font-weight: 500;
}
.login-card .btn { width: 100%; }
.login-card .footnote {
  margin-top: 22px; padding-top: 16px;
  border-top: 1px solid var(--line-2);
  font-family: var(--mono); font-size: 10px;
  letter-spacing: .14em; text-align: center;
  color: var(--ink-300); text-transform: uppercase; font-weight: 500;
}

/* ---------- Toolbar / filters ---------------------------------------- */
.toolbar {
  display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap;
  padding: 16px;
  background: var(--paper);
  border: 1px solid var(--line); border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
}
.toolbar label.field { margin-bottom: 0; min-width: 160px; flex: 1 1 160px; }
.toolbar .actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- Pager ---------------------------------------------------- */
.pager {
  display: flex; gap: 4px; padding: 14px;
  background: var(--paper); border: 1px solid var(--line); border-top: none;
  font-family: var(--mono); font-size: var(--fs-xs);
  align-items: center; flex-wrap: wrap;
  border-radius: 0 0 var(--radius) var(--radius);
}
.pager .info { color: var(--ink-300); margin-right: auto; letter-spacing: .14em; }
.pager a, .pager span {
  display: inline-block; padding: 7px 12px;
  border: 1px solid var(--ink-200); color: var(--ink-700);
  border-radius: var(--radius); font-weight: 600;
}
.pager a:hover { background: var(--paper-2); text-decoration: none; }
.pager span.current {
  background: var(--crimson-700); color: var(--paper); border-color: var(--crimson-700);
}

/* ---------- Empty states --------------------------------------------- */
.empty {
  padding: 56px 24px; text-align: center; color: var(--ink-300);
  font-family: var(--mono); letter-spacing: .14em; text-transform: uppercase;
  font-size: var(--fs-xs); font-weight: 500;
}
.empty-large { padding: 80px 24px; text-align: center; }
.empty-large .icon { font-size: 56px; margin-bottom: 16px; opacity: 0.7; }
.empty-large .title {
  font-family: var(--serif); font-size: var(--fs-lg); font-weight: 700;
  color: var(--ink-900); margin-bottom: 6px;
}
.empty-large .desc {
  font-family: var(--mono); font-size: var(--fs-xs);
  color: var(--ink-300); letter-spacing: .14em; text-transform: uppercase;
}

/* ---------- Footer --------------------------------------------------- */
.appfoot {
  margin-top: 48px; padding: 18px 28px;
  border-top: 1px solid var(--line);
  background: var(--paper-2);
  color: var(--ink-300);
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; font-weight: 500;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
}

/* ---------- Utility -------------------------------------------------- */
.mono { font-family: var(--mono); }
.serif { font-family: var(--serif); }
.right { text-align: right; }
.center { text-align: center; }
.muted { color: var(--ink-300); }
.danger { color: var(--crimson-500); }
.positive { color: var(--positive); }
.nowrap { white-space: nowrap; }
.row { display: flex; gap: 14px; flex-wrap: wrap; }
.row > * { flex: 1; min-width: 0; }
.gap-sm { gap: 8px; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
hr.sep { border: none; border-top: 1px solid var(--line-2); margin: 18px 0; }

/* ---------- Voice button -------------------------------------------- */
.voice-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 11px 16px; font-family: var(--mono); font-size: 12px;
  font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid var(--crimson-700); color: var(--crimson-700);
  background: transparent; border-radius: var(--radius); cursor: pointer;
  transition: all .15s; min-height: var(--tap);
}
.voice-btn:hover {
  background: var(--crimson-700); color: var(--paper); border-color: var(--crimson-700);
}
.voice-btn.recording {
  background: var(--crimson-500); border-color: var(--crimson-500); color: var(--paper);
  animation: pulse 1.2s infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200,16,46,.4); }
  50%      { box-shadow: 0 0 0 6px rgba(200,16,46,0); }
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */

/* Tablet & below: collapse the topbar nav into a hamburger menu */
@media (max-width: 900px) {
  .topbar {
    flex-wrap: wrap;
    padding: 0 14px;
    align-items: center;
    min-height: 60px;
  }
  .topbar .brand { padding-right: 0; flex: 1 1 auto; }
  .topbar .brand .logo { height: 38px; }

  .menu-toggle { display: inline-flex; }

  .topbar nav {
    order: 99;
    flex: 1 0 100%;
    flex-direction: column;
    background: var(--paper);
    border-top: 1px solid var(--line);
    border-left: none;
    margin: 0 -14px;
    display: none;
  }
  .topbar.menu-open nav { display: flex; }
  .topbar nav a {
    padding: 0 18px;
    border-right: none;
    border-bottom: 1px solid var(--line);
    min-height: 52px;
  }
  .topbar nav a.active::after { display: none; }
  .topbar nav a.active {
    border-left: 3px solid var(--crimson-700);
    padding-left: 15px;
  }

  .topbar .spacer { display: none; }
  .topbar .userbox {
    order: 98;
    flex: 1 0 100%;
    padding: 14px 0;
    border-top: 1px solid var(--line);
    display: none;
  }
  .topbar.menu-open .userbox { display: flex; }
}

/* Phone */
@media (max-width: 600px) {
  :root { --fs-md: 14px; }

  .page { padding: 22px 16px 40px; }
  .page-header h1 { font-size: 24px; }
  .page-header { padding-bottom: 12px; margin-bottom: 18px; }

  .panel > .panel-head { padding: 12px 14px; font-size: 11px; }
  .panel > .panel-body { padding: 16px; }

  .toolbar { padding: 14px; }
  .toolbar label.field { min-width: 100%; flex: 1 1 100%; }
  .toolbar .actions { width: 100%; }
  .toolbar .actions .btn { flex: 1; }

  /* iOS auto-zoom prevention */
  .input, select.input, textarea.input { font-size: 16px; }

  .login-card { padding: 28px 22px; }
  .login-card .logo-block svg { width: 220px; }

  .row > * { flex: 1 1 100%; }

  .table thead th, .table tbody td { padding: 11px 13px; font-size: 12px; }

  .appfoot { padding: 14px 18px; flex-direction: column; gap: 4px; }
}

/* Small phone */
@media (max-width: 380px) {
  .topbar .brand .logo { height: 34px; }
}

/* Print */
@media print {
  .topbar, .appfoot, .toolbar, .pager, .btn { display: none !important; }
  body { background: #fff; }
  .panel { box-shadow: none; border-color: #ccc; }
}

/* ---------- Password visibility toggle ----------------------------- */
.pw-eye {
    position: absolute;
    top: 50%; right: 8px;
    transform: translateY(-50%);
    width: 36px; height: 36px;
    background: transparent;
    border: none;
    color: var(--ink-500);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: var(--radius);
}
.pw-eye:hover { color: var(--crimson-700); background: var(--paper-2); }
.pw-eye:focus { outline: 2px solid var(--crimson-300); }
.pw-eye.shown { color: var(--crimson-700); }
/* When showing the password, draw a slash through the eye */
.pw-eye.shown::after {
    content: '';
    position: absolute;
    left: 4px; right: 4px;
    top: 50%;
    height: 2px;
    background: var(--crimson-700);
    transform: rotate(-45deg);
}
.control input.input[type="password"],
.control input.input[type="text"] { padding-right: 42px; }