/* ================================================================
   CelField CRM v2 — Design System
   Basé sur le mockup pharmacies — palette warm neutral + rose accent
================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

/* ── Variables ── */
:root {
  /* ── Palette par défaut : thème CelField (charte officielle) ──
     Rose et autres thèmes restent disponibles via Paramètres > Design */
  --bg:           #F5F0E7;   /* crème  */
  --bloc:         #EDE8DF;   /* paper  */
  --bloc-2:       #E4DED2;
  --zone:         #E8F3EC;   /* menthe très clair */
  --white:        #FFFFFF;

  --accent:       #7FC1A0;   /* menthe / CTA */
  --accent-dark:  #D8EDE1;
  --accent-deep:  #5BA882;   /* menthe profonde — bordures/soulignés */
  --btn:          #DCD7CC;

  --text:         #2A3D35;   /* encre forêt */
  --text-light:   #5A7568;   /* ardoise */
  --accent-ink:   var(--text); /* texte sur fond accent */
  --text-xlight:  #AAAAAA;
  --border:       rgba(0,0,0,.08);
  --border-md:    rgba(0,0,0,.12);
  --shadow:       rgba(0,0,0,.08);

  --nav-width:    220px;
  --header-h:     56px;

  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 16px;
  --r-full: 999px;

  --sh-xs: 0 1px 3px rgba(0,0,0,.07);
  --sh-sm: 0 2px 6px rgba(0,0,0,.08);
  --sh-md: 0 4px 14px rgba(0,0,0,.10);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  height: 100%; overflow: hidden;
  font-family: 'Nunito', sans-serif;
  font-size: 13px; color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* ── App Shell ── */
.v2-app {
  position: fixed; inset: 0;
  display: grid;
  grid-template-rows: var(--header-h) 1fr;
  grid-template-columns: var(--nav-width) 1fr;
  grid-template-areas: "nav hdr" "nav main";
}

/* ── Nav ── */
.v2-nav {
  grid-area: nav;
  background: var(--bloc);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; overflow: hidden;
}

.v2-nav-logo {
  height: var(--header-h);
  display: flex; align-items: center;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.v2-nav-logo img { height: 30px; width: auto; object-fit: contain; }
.v2-nav-logo-text {
  font-size: 16px; font-weight: 700; color: var(--text);
  display: none;
}

.v2-nav-body { flex: 1; overflow-y: auto; padding: 8px 0; }
.v2-nav-body::-webkit-scrollbar { width: 3px; }
.v2-nav-body::-webkit-scrollbar-thumb { background: var(--accent-deep); border-radius: 2px; opacity:.4; }

.v2-nav-section {
  padding: 14px 16px 4px;
  font-size: 9px; font-weight: 700;
  letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--text-xlight);
}

.v2-nav-item {
  margin: 1px 8px; padding: 8px 10px;
  border-radius: var(--r-sm);
  display: flex; align-items: center; gap: 9px;
  cursor: pointer; color: var(--text-light);
  font-size: 12.5px; font-weight: 500;
  transition: background .12s, color .12s;
  user-select: none; text-decoration: none;
}
.v2-nav-item:hover { background: var(--bloc-2); color: var(--text); }
.v2-nav-item.active {
  background: var(--accent);
  color: var(--text); font-weight: 700;
  border-left: 3px solid var(--accent-deep);
}
.v2-nav-item .ms {
  font-size: 18px;
  font-variation-settings: 'FILL' 0, 'wght' 300;
  flex-shrink: 0;
  font-family: 'Material Symbols Rounded';
}
.v2-nav-item.active .ms {
  font-variation-settings: 'FILL' 1, 'wght' 400;
}

.v2-nav-divider {
  height: 1px; background: var(--border);
  margin: 6px 12px;
}

.v2-nav-bottom {
  border-top: 1px solid var(--border);
  padding: 8px 8px 12px;
  flex-shrink: 0;
}
.v2-nav-user {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px; border-radius: var(--r-sm);
  cursor: pointer; transition: background .12s;
}
.v2-nav-user:hover { background: var(--bloc-2); }
.v2-nav-av {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--text);
  flex-shrink: 0;
}
.v2-nav-un { font-size: 12px; font-weight: 600; color: var(--text); }
.v2-nav-ur { font-size: 10.5px; color: var(--text-light); }

/* ── Header ── */
.v2-hdr {
  grid-area: hdr;
  background: var(--bloc);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  padding: 0 18px; gap: 10px;
  box-shadow: var(--sh-xs);
}

.v2-hdr-crumb { font-size: 11.5px; color: var(--text-light); }
.v2-hdr-sep { color: var(--text-xlight); margin: 0 2px; }
.v2-hdr-title { font-size: 15px; font-weight: 700; color: var(--text); }

.v2-view-toggle {
  display: flex; align-items: center; gap: 1px;
  background: var(--bg); border: 1px solid var(--border-md);
  border-radius: var(--r-sm); padding: 2px; margin-left: 6px;
}
.v2-vt-btn {
  width: 28px; height: 24px; border: none; background: transparent;
  border-radius: 6px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-light); transition: all .12s;
}
.v2-vt-btn:hover { background: var(--bloc-2); color: var(--text); }
.v2-vt-btn.active { background: var(--accent-dark); color: var(--text); box-shadow: var(--sh-xs); }
.v2-vt-btn .ms { font-size: 15px; font-family: 'Material Symbols Rounded'; }

.v2-db-badge {
  display: flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 600; color: var(--text-light);
  padding: 3px 9px; border-radius: var(--r-full);
  background: var(--bg); border: 1px solid var(--border);
}
.v2-db-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--btn); transition: background .3s; }
.v2-db-dot.ok { background: #72b47a; }
.v2-db-dot.err { background: #e07070; }
.v2-db-dot.reconnecting { background: #e9a130; animation: pulse-dot .8s ease-in-out infinite; }
@keyframes pulse-dot { 0%,100% { opacity:1; } 50% { opacity:.3; } }
.v2-db-badge { cursor: pointer; }
.v2-db-badge:hover span { text-decoration: underline; }

.v2-hdr-search {
  display: flex; align-items: center; gap: 7px;
  background: var(--bg); border: 1px solid var(--border-md);
  border-radius: var(--r-full); padding: 5px 12px;
  width: 200px; margin-left: auto;
  transition: border-color .18s, width .22s;
}
.v2-hdr-search:focus-within { border-color: var(--accent-deep); width: 240px; }
.v2-hdr-search .ms { font-size: 15px; color: var(--text-light); font-family: 'Material Symbols Rounded'; }
.v2-hdr-search input {
  border: none; background: transparent;
  font-family: 'Nunito', sans-serif;
  font-size: 12.5px; color: var(--text); outline: none; width: 100%;
}
.v2-hdr-search input::placeholder { color: var(--text-xlight); }

.v2-icon-btn {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-light); transition: all .12s;
}
.v2-icon-btn:hover { background: var(--bloc-2); color: var(--text); }
.v2-icon-btn .ms { font-size: 17px; font-family: 'Material Symbols Rounded'; }

/* ── Main ── */
.v2-main {
  grid-area: main;
  overflow: hidden;
  display: flex; flex-direction: column;
}

/* ── Buttons ── */
.v2-btn-primary {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 14px; border-radius: var(--r-md);
  background: var(--accent); color: var(--text);
  font-family: 'Nunito', sans-serif;
  font-size: 12.5px; font-weight: 700;
  border: none; cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,.1);
  transition: filter .13s, transform .1s;
  white-space: nowrap;
}
.v2-btn-primary:hover { filter: brightness(.95); transform: translateY(-1px); }
.v2-btn-primary .ms { font-size: 15px; font-family: 'Material Symbols Rounded'; }

.v2-btn-ghost {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px; border-radius: var(--r-sm);
  border: 1px solid var(--border-md); background: var(--bg);
  font-family: 'Nunito', sans-serif;
  font-size: 12px; font-weight: 500;
  color: var(--text-light); cursor: pointer; transition: all .11s;
}
.v2-btn-ghost:hover { background: var(--accent-dark); color: var(--text); }
.v2-btn-ghost .ms { font-size: 14px; font-family: 'Material Symbols Rounded'; }

.v2-btn-cancel {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 7px 14px; border-radius: var(--r-md);
  border: 1px solid var(--border-md); background: var(--btn);
  font-family: 'Nunito', sans-serif;
  font-size: 12.5px; font-weight: 600;
  color: var(--text); cursor: pointer; transition: filter .12s;
}
.v2-btn-cancel:hover { filter: brightness(.96); }

/* ── Cards ── */
.v2-card {
  background: var(--bloc);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  box-shadow: var(--sh-xs);
  overflow: hidden;
}

/* ── Tabs ── */
.v2-tabs-bar {
  display: flex; align-items: center;
  padding: 0 16px;
  background: var(--bloc);
  border-bottom: 1px solid var(--border);
}
.v2-tab {
  padding: 9px 13px;
  font-family: 'Nunito', sans-serif;
  font-size: 12.5px; font-weight: 500; color: var(--text-light);
  border: none; background: transparent; cursor: pointer;
  position: relative; transition: color .12s;
  white-space: nowrap; display: flex; align-items: center; gap: 5px;
}
.v2-tab:hover { color: var(--text); }
.v2-tab.active { color: var(--text); font-weight: 700; }
.v2-tab.active::after {
  content: ''; position: absolute;
  bottom: 0; left: 9px; right: 9px;
  height: 2px; border-radius: 2px 2px 0 0;
  background: var(--accent-deep);
}
.v2-tab-cnt {
  display: inline-flex; align-items: center; justify-content: center;
  height: 16px; min-width: 16px; padding: 0 4px; border-radius: 4px;
  background: var(--btn); color: var(--text-light);
  font-size: 9.5px; font-weight: 700;
}
.v2-tab.active .v2-tab-cnt { background: var(--accent); color: var(--text); }

/* ── Table ── */
.v2-tbl {
  width: 100%; border-collapse: separate; border-spacing: 0 3px;
}
.v2-tbl thead th {
  font-size: 9.5px; font-weight: 700; letter-spacing: .7px;
  text-transform: uppercase; color: var(--text-light);
  padding: 3px 10px 7px; text-align: left; white-space: nowrap;
  cursor: pointer;
}
.v2-tbl thead th.r { text-align: right; }
.v2-tbl tbody tr td {
  padding: 8px 10px; background: var(--white);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  vertical-align: middle; transition: background .1s;
}
.v2-tbl tbody tr td:first-child {
  border-left: 1px solid var(--border);
  border-radius: var(--r-sm) 0 0 var(--r-sm);
}
.v2-tbl tbody tr td:last-child {
  border-right: 1px solid var(--border);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.v2-tbl tbody tr:hover td {
  background: var(--accent-dark);
  border-color: var(--accent-deep);
}

/* ── Pills / Badges ── */
.v2-pill {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: var(--r-full);
  font-size: 10.5px; font-weight: 600; white-space: nowrap;
}
.v2-pill-sent { background: #deeaf7; color: #2255aa; }
.v2-pill-draft { background: var(--accent-dark); color: var(--text); }
.v2-pill-ok { background: #d9f0e0; color: #1a6634; }
.v2-pill-part { background: #fdecd8; color: #8a4e10; }
.v2-pill-cancel { background: var(--zone); color: #b02828; }
.v2-pill-paid    { background: #efe6fb; color: #6a3fb0; }
.v2-pill-validee { background: #cff0d6; color: #155724; }   /* Validée — vert légèrement différent de livré */
.v2-pill-envoyee { background: #deeaf7; color: #2255aa; }   /* Envoyée — bleu identique à sent */

/* ── Modal ── */
.v2-modal-ov {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.25); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  z-index: 500; opacity: 0; pointer-events: none; transition: opacity .18s;
}
.v2-modal-ov.open { opacity: 1; pointer-events: all; }
.v2-modal-box {
  background: var(--bloc);
  border: 1px solid var(--border-md); border-radius: var(--r-xl);
  width: 400px; box-shadow: 0 16px 40px rgba(0,0,0,.12);
  transform: scale(.97) translateY(5px); transition: transform .2s ease;
}
.v2-modal-ov.open .v2-modal-box { transform: scale(1) translateY(0); }
.v2-modal-head {
  padding: 16px 20px 14px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
}
.v2-modal-icon {
  width: 32px; height: 32px; border-radius: var(--r-md);
  background: var(--accent);
  display: flex; align-items: center; justify-content: center; color: var(--text);
}
.v2-modal-icon .ms { font-size: 18px; font-family: 'Material Symbols Rounded'; font-variation-settings: 'FILL' 1; }
.v2-modal-title { font-size: 14px; font-weight: 700; color: var(--text); }
.v2-modal-body {
  padding: 16px 20px; background: var(--white);
  display: flex; flex-direction: column; gap: 12px;
}
.v2-modal-foot {
  padding: 12px 20px 18px; background: var(--white);
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  display: flex; gap: 8px;
}
.v2-modal-foot .v2-btn-primary,
.v2-modal-foot .v2-btn-cancel { flex: 1; justify-content: center; }

/* ── Form fields ── */
.v2-fg { display: flex; flex-direction: column; gap: 4px; }
.v2-flbl {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .7px;
  color: var(--text-light);
}
.v2-finput, .v2-fselect {
  height: 36px; padding: 0 10px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-md); background: var(--bg);
  font-family: 'Nunito', sans-serif; font-size: 13px;
  color: var(--text); outline: none; width: 100%;
  transition: border-color .13s;
}
.v2-finput:focus, .v2-fselect:focus {
  border-color: var(--accent-deep);
  box-shadow: 0 0 0 2px var(--accent-dark);
}
.v2-frow { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.v2-ftextarea {
  width: 100%; min-height: 80px; padding: 8px 10px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-md); background: var(--bg);
  font-family: 'Nunito', sans-serif; font-size: 13px;
  color: var(--text); outline: none; resize: vertical;
  transition: border-color .13s;
}
.v2-ftextarea:focus {
  border-color: var(--accent-deep);
  box-shadow: 0 0 0 2px var(--accent-dark);
}

/* ── Toast ── */
.v2-toast {
  position: fixed; bottom: 16px; right: 16px;
  background: var(--text); border-radius: var(--r-md);
  padding: 10px 16px; font-size: 12.5px; font-weight: 600; color: #fff;
  display: flex; align-items: center; gap: 8px;
  box-shadow: var(--sh-sm); opacity: 0; transform: translateY(6px);
  transition: opacity .18s, transform .18s;
  pointer-events: none; z-index: 999;
}
.v2-toast.show { opacity: 1; transform: translateY(0); }
.v2-toast .ms { font-size: 16px; color: #7ee8a2; font-variation-settings: 'FILL' 1; font-family: 'Material Symbols Rounded'; }

/* ── Loading ── */
.v2-loading {
  position: fixed; inset: 0;
  background: rgba(245,240,231,.92);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  z-index: 900; gap: 14px; transition: opacity .3s;
}
.v2-loading.hidden { opacity: 0; pointer-events: none; }
.v2-spinner {
  width: 28px; height: 28px;
  border: 3px solid var(--accent-dark);
  border-top-color: var(--accent-deep);
  border-radius: 50%; animation: v2spin .7s linear infinite;
}
.v2-loading-txt { font-size: 12.5px; font-weight: 600; color: var(--text-light); }

@keyframes v2spin { to { transform: rotate(360deg); } }
@keyframes v2fadeUp {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
.v2-card, .v2-anim { animation: v2fadeUp .24s ease both; }

/* ── Toolbar ── */
.v2-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 14px; border-bottom: 1px solid var(--border);
  background: var(--bloc);
}
.v2-toolbar-l { display: flex; align-items: center; gap: 7px; }
.v2-toolbar-title { font-size: 12px; font-weight: 600; color: var(--text-light); }
.v2-toolbar-ico {
  font-size: 16px; color: var(--text-light);
  font-variation-settings: 'FILL' 1, 'wght' 400;
  font-family: 'Material Symbols Rounded';
}

/* ── Scrollable panels ── */
.v2-scroll {
  flex: 1; overflow-y: auto;
}
.v2-scroll::-webkit-scrollbar { width: 4px; }
.v2-scroll::-webkit-scrollbar-track { background: transparent; }
.v2-scroll::-webkit-scrollbar-thumb { background: var(--accent-dark); border-radius: 2px; }

/* ── Panel footer ── */
.v2-panel-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px; border-top: 1px solid var(--border);
  background: var(--bloc);
}
.v2-panel-footer-meta { font-size: 11px; color: var(--text-light); font-weight: 500; }

/* ── Page content wrapper ── */
.v2-page {
  flex: 1; overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--bg);
  padding: 14px; gap: 11px;
}

/* ── Search field ── */
.v2-sf {
  display: flex; align-items: center; gap: 6px;
  background: var(--white); border: 1px solid var(--border-md);
  border-radius: var(--r-sm); padding: 6px 10px;
  transition: border-color .14s;
}
.v2-sf:focus-within { border-color: var(--accent-deep); }
.v2-sf .ms { font-size: 14px; color: var(--text-light); font-family: 'Material Symbols Rounded'; }
.v2-sf input {
  border: none; background: transparent;
  font-family: 'Nunito', sans-serif;
  font-size: 12.5px; color: var(--text); outline: none; flex: 1;
}
.v2-sf input::placeholder { color: var(--text-xlight); }

/* ── Inputs numérique / texte dans tableaux ── */
.v2-ninput {
  width: 100%; padding: 4px 6px; border-radius: var(--r-sm);
  border: 1px solid var(--border-md); background: var(--bg);
  font-family: 'Nunito', sans-serif; font-size: 12px;
  text-align: center; color: var(--text); outline: none; height: 28px;
  transition: border-color .13s;
}
.v2-ninput:focus {
  border-color: var(--accent-deep); background: var(--white);
  box-shadow: 0 0 0 2px var(--accent-dark);
}
.v2-tinput {
  width: 100%; padding: 4px 8px; border-radius: var(--r-sm);
  border: 1px solid var(--border-md); background: var(--bg);
  font-family: 'Nunito', sans-serif; font-size: 12px;
  color: var(--text-light); outline: none; height: 28px;
  transition: border-color .13s;
}
.v2-tinput:focus { border-color: var(--accent-deep); background: var(--white); }

/* ── Delete/Action button small ── */
.v2-act-btn {
  width: 26px; height: 26px; border-radius: var(--r-sm);
  border: 1px solid transparent; background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-light); transition: all .11s;
}
.v2-act-btn:hover { background: var(--accent-dark); color: var(--text); }
.v2-act-btn.danger:hover { background: var(--zone); color: #c03030; border-color: rgba(192,48,48,.12); }
.v2-act-btn .ms { font-size: 14px; font-family: 'Material Symbols Rounded'; }

/* ── Separator ── */
.v2-isep {
  width: 1px; background: var(--border-md);
  align-self: stretch; margin: 0 16px; flex-shrink: 0;
}

/* ── Empty state ── */
.v2-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  flex: 1; gap: 8px; padding: 40px;
  color: var(--text-light); text-align: center;
}
.v2-empty .ms {
  font-size: 40px; opacity: .3;
  font-family: 'Material Symbols Rounded';
  font-variation-settings: 'FILL' 0, 'wght' 200;
}
.v2-empty-title { font-size: 13px; font-weight: 600; }
.v2-empty-sub { font-size: 12px; color: var(--text-xlight); }

/* ── Notes textarea ── */
.v2-notes-ta {
  flex: 1; width: 100%;
  border: 1px solid var(--border-md); border-radius: var(--r-md);
  padding: 12px 14px; font-family: 'Nunito', sans-serif;
  font-size: 13px; color: var(--text);
  background: var(--zone); resize: none; outline: none; line-height: 1.72;
  transition: border-color .14s;
}
.v2-notes-ta::placeholder { color: var(--text-xlight); font-style: italic; }
.v2-notes-ta:focus { border-color: var(--accent-deep); background: var(--white); }

/* ── Admin grid ── */
.v2-admin-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 22px; padding: 14px 18px; overflow: auto;
}
.v2-adm-grp { display: flex; flex-direction: column; gap: 9px; }
.v2-adm-title {
  font-size: 9.5px; font-weight: 700; letter-spacing: .9px;
  text-transform: uppercase; color: var(--text-light);
  padding-bottom: 6px; border-bottom: 1px solid var(--border-md);
}
.v2-adm-row { display: flex; flex-direction: column; gap: 2px; }
.v2-adm-lbl { font-size: 9.5px; font-weight: 600; color: var(--text-light); }
.v2-adm-val { font-size: 13px; color: var(--text); font-weight: 500; }
.v2-adm-val.mono { font-family: 'SF Mono', 'Fira Code', monospace; font-size: 12px; }
.v2-adm-val.link { color: #4a6fa5; }

/* ── Colour settings ── */
.v2-color-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px; padding: 16px;
}
.v2-color-item {
  display: flex; flex-direction: column; gap: 6px;
}
.v2-color-lbl { font-size: 10px; font-weight: 700; color: var(--text-light); text-transform: uppercase; letter-spacing: .6px; }
.v2-color-row { display: flex; align-items: center; gap: 8px; }
.v2-color-preview {
  width: 28px; height: 28px; border-radius: var(--r-sm);
  border: 1px solid var(--border-md); flex-shrink: 0; cursor: pointer;
}
.v2-color-input-text {
  flex: 1; height: 28px; padding: 0 8px;
  border-radius: var(--r-sm); border: 1px solid var(--border-md);
  background: var(--bg); font-family: 'Nunito', monospace;
  font-size: 12px; color: var(--text); outline: none;
}
.v2-color-input-text:focus { border-color: var(--accent-deep); }