/* ============================================================
   «В гостях у сказки» — производственная платформа
   Палитра: white / #131313 / серые / зелёный #b8dfa5 / синий #4a7ff8
   Шрифт Lato Regular (без жирного начертания)
   ============================================================ */

:root {
  /* --- Neutral base --- */
  --paper:        #F5F5F5;   /* app background */
  --paper-2:      #FAFAFA;   /* slightly lighter panels */
  --surface:      #FFFFFF;   /* cards */
  --surface-sunk: #EFEFEF;   /* sunken wells, table head */

  --ink:          #131313;   /* primary text */
  --ink-2:        #595959;   /* secondary text */
  --ink-3:        #8A8A8A;   /* tertiary / muted */
  --ink-4:        #B5B5B5;   /* faint */

  --line:         #D7D7D7;   /* hairline borders */
  --line-2:       #EBEBEB;   /* softer dividers */

  /* --- Primary: blue (interactive accent) --- */
  --pri:          #4A7FF8;
  --pri-600:      #3D6FE6;
  --pri-700:      #3260CC;
  --pri-soft:     #E7EEFE;
  --pri-soft-2:   #D3E0FD;
  --pri-ink:      #2A55C0;

  /* --- Accent: soft green #b8dfa5 (positive / progress) --- */
  --lime:         #B8DFA5;
  --lime-strong:  #9CCB85;
  --lime-soft:    #EBF4E4;
  --lime-soft-2:  #D9ECCB;
  --lime-ink:     #3C6B2A;

  /* --- Dark surfaces --- */
  --dark:         #131313;
  --dark-2:       #2A2A2A;

  /* --- Secondary → neutral --- */
  --amber:        #8A8A8A;
  --amber-soft:   #EBEBEB;
  --amber-ink:    #595959;

  /* --- Status: green (success) --- */
  --green:        #6FA84E;
  --green-soft:   #EBF4E4;
  --green-ink:    #3C6B2A;

  /* --- Status: red (danger) --- */
  --red:          #DD6450;
  --red-soft:     #FBE7E1;
  --red-ink:      #9A3825;

  /* --- violet → neutral dark --- */
  --violet:       #595959;
  --violet-soft:  #EBEBEB;
  --violet-ink:   #131313;

  /* --- teal → blue --- */
  --teal:         #4A7FF8;
  --teal-soft:    #E7EEFE;
  --teal-ink:     #2A55C0;

  /* --- Radii (airy, rounded) --- */
  --r-sm: 10px;
  --r:    14px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-pill: 999px;

  /* --- Shadows: light, very low opacity --- */
  --sh-xs: 0 1px 2px rgba(19, 19, 19, 0.04);
  --sh-sm: 0 1px 2px rgba(19, 19, 19, 0.05);
  --sh:    0 2px 10px rgba(19, 19, 19, 0.05), 0 1px 2px rgba(19,19,19,0.04);
  --sh-lg: 0 12px 34px rgba(19, 19, 19, 0.10), 0 2px 8px rgba(19,19,19,0.04);
  --sh-pop:0 18px 46px rgba(19, 19, 19, 0.18);

  --font: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --display: 'Lato', var(--font);
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --sidebar-w: 250px;
  --sidebar-w-collapsed: 76px;
  --topbar-h: 66px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: var(--font);
  background: var(--paper);
  color: var(--ink);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#root { height: 100%; }

h1,h2,h3,h4 { font-family: var(--display); margin: 0; font-weight: 400; letter-spacing: -0.005em; }

button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: inherit; }

::selection { background: var(--lime-soft-2); }

/* Scrollbars */
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-thumb { background: #CFCFCF; border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: #B8B8B8; background-clip: padding-box; border: 3px solid transparent; }
*::-webkit-scrollbar-track { background: transparent; }

/* ===== Reusable atoms ===== */

.tnum { font-family: var(--display); font-feature-settings: 'tnum' 1; font-variant-numeric: tabular-nums; }

/* Badge */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 400; line-height: 1;
  padding: 5px 10px; border-radius: var(--r-pill);
  white-space: nowrap;
}
.badge .dot { width: 6px; height: 6px; border-radius: 99px; background: currentColor; flex: none; }
.badge--gray  { background: var(--surface-sunk); color: var(--ink-2); }
.badge--blue  { background: var(--pri-soft); color: var(--pri-ink); }
.badge--lime  { background: var(--lime-soft); color: var(--lime-ink); }
.badge--amber { background: var(--amber-soft); color: var(--amber-ink); }
.badge--green { background: var(--green-soft); color: var(--green-ink); }
.badge--red   { background: var(--red-soft); color: var(--red-ink); }
.badge--violet{ background: var(--violet-soft); color: var(--violet-ink); }
.badge--teal  { background: var(--teal-soft); color: var(--teal-ink); }
.badge--dark  { background: var(--dark); color: #fff; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; border-radius: var(--r-pill);
  font-size: 14px; font-weight: 400; padding: 10px 18px;
  transition: all .15s ease; white-space: nowrap; color: var(--ink);
  background: transparent;
}
.btn svg { width: 17px; height: 17px; flex: none; }
.btn--primary { background: var(--pri); color: #fff; box-shadow: var(--sh-xs); }
.btn--primary:hover { background: var(--pri-600); }
.btn--primary:active { background: var(--pri-700); }
.btn--accent { background: var(--dark); color: #fff; box-shadow: var(--sh-xs); }
.btn--accent:hover { background: var(--dark-2); }
.btn--ghost { background: var(--surface); border-color: var(--line); color: var(--ink); box-shadow: var(--sh-xs); }
.btn--ghost:hover { background: var(--paper-2); border-color: #C8C8C8; }
.btn--soft { background: var(--pri-soft); color: var(--pri-ink); }
.btn--soft:hover { background: var(--pri-soft-2); }
.btn--subtle { color: var(--ink-2); }
.btn--subtle:hover { background: var(--surface-sunk); color: var(--ink); }
.btn--sm { padding: 7px 14px; font-size: 13px; border-radius: var(--r-pill); }
.btn--sm svg { width: 15px; height: 15px; }
.btn--icon { padding: 9px; border-radius: var(--r-pill); }
.btn--danger { background: var(--red-soft); color: var(--red-ink); }
.btn--danger:hover { background: #F5DAD2; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* Card */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}

/* Generic input */
.field {
  width: 100%; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 11px 14px; color: var(--ink);
  transition: border-color .15s, box-shadow .15s; outline: none;
}
.field::placeholder { color: var(--ink-4); }
.field:focus { border-color: var(--pri); box-shadow: 0 0 0 3px var(--pri-soft); }

.label { font-size: 12.5px; font-weight: 400; color: var(--ink-2); margin-bottom: 7px; display: block; }

/* Soft icon tile */
.itile { display:flex; align-items:center; justify-content:center; border-radius: var(--r); flex: none; }

/* Progress bar */
.prog { height: 6px; border-radius: 99px; background: var(--surface-sunk); overflow: hidden; }
.prog > i { display: block; height: 100%; border-radius: 99px; background: var(--lime-strong); transition: width .4s ease; }

/* Avatar */
.ava {
  width: 30px; height: 30px; border-radius: 99px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 400; font-size: 12px; color: #fff;
  letter-spacing: -0.02em;
}

/* Tooltip-ish kbd */
.kbd { font-family: var(--mono); font-size: 11px; background: var(--surface-sunk); border:1px solid var(--line); border-radius: 6px; padding: 2px 6px; color: var(--ink-2); }

/* Divider */
.hr { height: 1px; background: var(--line); border: 0; margin: 0; }

/* fade/slide entrance */
@keyframes popIn { from { transform: translateY(8px) scale(.995); } to { transform: none; } }
.pop { animation: popIn .3s cubic-bezier(.2,.7,.3,1); }

@keyframes fadeIn { from { transform: translateY(4px); } to { transform: none; } }
.fade { animation: fadeIn .22s ease; }

@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 1s linear infinite; }

@media (prefers-reduced-motion: reduce) { .pop, .fade { animation: none !important; } }

/* scrollable region */
.scroll-y { overflow-y: auto; overflow-x: hidden; }

/* clamp */
.clamp1 { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.clamp2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }