/*design-system.css*/

:root {
  --space_cadet-100:#080a0d; --space_cadet-200:#10131b; --space_cadet-300:#181d28; --space_cadet-400:#202636; --space_cadet-500:#283044; --space_cadet-600:#455376; --space_cadet-700:#6779a6; --space_cadet-800:#99a5c3; --space_cadet-900:#ccd2e1;
  --air_blue-100:#152129; --air_blue-200:#294251; --air_blue-300:#3e637a; --air_blue-400:#5284a3; --air_blue-500:#78a1bb; --air_blue-600:#92b4c8; --air_blue-700:#aec7d6; --air_blue-800:#c9d9e4; --air_blue-900: #f7f8f8;
  --mint_cream-100:#20402a; --mint_cream-200:#408053; --mint_cream-300:#6bb581; --mint_cream-400:#abd5b7; --mint_cream-500:#ebf5ee; --mint_cream-600:#eff7f1; --mint_cream-700:#f3f9f5; --mint_cream-800:#f7fbf8; --mint_cream-900:#fbfdfc;
  --khaki-100:#2a201c; --khaki-200:#534037; --khaki-300:#7d6053; --khaki-400:#a28173; --khaki-500:#bfa89e; --khaki-600:#cbb8b1; --khaki-700:#d8cac4; --khaki-800:#e5dcd8; --khaki-900:#f2edeb;
  --cine-100:#1c1816; --cine-200:#38302c; --cine-300:#544942; --cine-400:#706158; --cine-500:#8b786d; --cine-600:#a3948a; --cine-700:#baaea8; --cine-800:#d1c9c5; --cine-900:#e8e4e2;

  --bg: #ffffff;
  --bg-soft: var(--mint_cream-500);
  --surface: #ffffff;
  --surface-alt: #fafbfc;
  --text: var(--space_cadet-500);
  --text-soft: var(--space_cadet-400);
  --muted: var(--space_cadet-800);
  --border: #e6e8ee;
  --accent: var(--air_blue-500);
  --accent-600: var(--air_blue-600);
  --accent-700: var(--air_blue-400);
  --focus-ring: var(--air_blue-400);
  --success: #2ea44f;
  --warning: #d97706;
  --danger: #e11d48;

  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 10px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 6px 16px rgba(24,29,40,0.1);
  --shadow-lg: 0 14px 32px rgba(24,29,40,0.15);
}

a { color: inherit; text-decoration: none; }
input, button, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.container { width: min(100%, var(--container-max)); margin-inline: auto; padding-inline: var(--section-pad); }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid transparent; background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); transition: transform .12s ease, box-shadow .12s ease, background .12s ease; }
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-outline { background: transparent; border-color: var(--border); }
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--accent-600); }
.btn-disabled { opacity: .6; pointer-events: none; }
.btn-primary {
  background: var(--accent);
  color: #fff;
}

.btn-primary:hover {
  background: var(--accent-600);
}

.btn-primary:active {
  background: var(--accent-700);
}
.btn-secondary {
  background: transparent;
  border-color: var(--accent);
  color: var(--accent);
}

.btn-secondary:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.btn-secondary:active {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}

/* Destructive (Delete) Button */
.btn-danger {
  background: var(--danger);
  color: #fff;
  border-color: transparent;
}

.btn-danger:hover {
  background: color-mix(in srgb, var(--danger) 85%, black 10%);
}

.btn-danger:active {
  background: color-mix(in srgb, var(--danger) 75%, black 20%);
}

.btn-danger.btn-outline {
  background: transparent;
  color: var(--danger);
  border-color: var(--danger);
}

.btn-danger.btn-outline:hover {
  background: color-mix(in srgb, var(--danger) 10%, transparent);
}

.btn-danger.btn-outline:active {
  background: color-mix(in srgb, var(--danger) 18%, transparent);
}

.badge { display:inline-flex; align-items:center; gap:6px; padding: 2px 8px; height: 22px; font-size: 12px; border-radius: 999px; background: var(--mint_cream-700); color: var(--text-soft); border:1px solid var(--border); }

.card { background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow-sm); transition: transform .12s ease, box-shadow .12s ease; }
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.card h3 { margin: 4px 0 6px; font-size: 18px; }
.card p { margin: 0 0 12px; color: var(--text-soft); font-size: 14px; }
.card .cta-row { display:flex; align-items:center; justify-content: space-between; gap: 10px; }

/* Explainer strip */
.explainer { padding-block: 22px; background: var(--surface); border-bottom: 1px solid var(--border); }
.explainer-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.panel { background: var(--surface-alt); border:1px solid var(--border); border-radius: var(--radius-md); padding: 16px; }
.panel h4 { margin: 0; font-size: 16px; }
.step { display:flex; align-items:center; gap: 10px; padding: 8px 0; color: var(--text-soft); }
.step svg { flex: 0 0 20px; }

/* Trust & Limits */
.trust { padding-block: 28px; }
.trust-list { display:flex; flex-wrap: wrap; gap: 10px; }
.trust-list .pill { border:1px solid var(--border); background: var(--mint_cream-700); padding: 8px 12px; border-radius: 999px; color: var(--text-soft); }

/* Recent Folders (kept for design; can be driven by your app later) */
.folders { padding-block: 28px; display:none; } /* default hidden */
.folders.visible { display:block; }
.grid { display:grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.folder-card { border:1px solid var(--border); border-radius: var(--radius-lg); padding: 14px; background: #fff; box-shadow: var(--shadow-sm); display:flex; flex-direction: column; gap: 10px; }
.folder-top { display:flex; align-items:center; justify-content: space-between; gap: 8px; }
.folder-name { font-weight: 600; }
.folder-meta { color: var(--text-soft); font-size: 12px; display:flex; gap: 10px; align-items:center; }
.folder-actions { display:flex; gap: 8px; }
.icon-btn { height: 36px; width: 36px; border-radius: 10px; border:1px solid var(--border); background: #fff; display:inline-flex; align-items:center; justify-content:center; box-shadow: var(--shadow-sm); }
.icon-btn:hover { background: var(--surface-alt); }

/* Footer */
footer { border-top: 1px solid var(--border); background: var(--surface); }
.footer-inner { display:grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items:center; padding-block: 18px; }
.lang-select { height: 40px; border-radius: 10px; border:1px solid var(--border); background:#fff; padding: 0 10px; }

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;

  background: rgba(0, 0, 0, 0.45); /* лёгкое затемнение */
  backdrop-filter: blur(3px);       /* мягкий блюр как в header */
  -webkit-backdrop-filter: blur(3px);

  display: flex;
  justify-content: center;
  align-items: center;

  z-index: 9999; /* выше чем header with z-index:50 */
}

.btn.hidden {
  display: none;
}

.modal.hidden {
  display: none;
}

.modal-content {
  background: var(--surface);            /* твой основной фон карточек */
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);       /* 16px — как карточки */
  padding: 24px;
  width: min(460px, 90%);
  max-height: 80vh;    
  box-shadow: var(--shadow-lg);          /* глубокая тень */
  color: var(--text);
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  overflow: hidden;

  animation: modal-appear 0.18s ease-out;
}

.modal-scroll {
  overflow-y: auto;
  margin-top: 10px;
  margin-bottom: 20px; /* место под кнопку */
}

.shake { animation: shake .14s 2; }
@keyframes shake { 0% { transform: translateX(0); } 25% { transform: translateX(-2px); } 75% { transform: translateX(2px); } 100% { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .shake { animation: none; } .btn, .card { transition: none; } }

.list {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.list-item {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 10px;
  box-shadow: var(--shadow);
  background: #fff;
}

.list-item a {
  text-decoration: none;
  color: var(--text);
  display: block;
}

.list-item a:focus {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* Плавное появление */
@keyframes modal-appear {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.share-code-box {
  display: inline-flex;
  gap: 8px;
  cursor: pointer;
}

.share-code-char {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 24px;
  font-weight: 600;
  color: #1E293B;

  padding: 10px 14px;
  background: #ffffff;

  border-radius: 14px;
  border: 2px solid #E2E8F0;

  display: flex;
  align-items: center;
  justify-content: center;

  transition: 0.15s ease;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none; /* For Safari */
  -ms-user-select: none;    /* For IE 10 and IE 11 */
}

/*.share-code-char:hover {*/
/*  border-color: #94A3B8;*/
/*}*/

/*.share-code-char:active {*/
/*  transform: scale(0.96);*/
/*}*/
.modal-close-btn {
  position: flex;
  right: 20px;
  bottom: 20px;

  padding: 8px 14px;
  border-radius: var(--radius-md);
  /* background: var(--surface-2, #eee); */
  background: transparent;
  border-color: transparent;

  /* border: 1px solid var(--border); */
  color: var(--text);
  cursor: pointer;
}

.modal-close-btn:hover {
  /* background: var(--surface-3, #e5e5e5); */
  background: var(--surface-2, #eee);
}

.text-area {
  width: 100%;
  min-height: 180px;
  max-height: 300px;
  resize: vertical;
  padding: 12px;
  border-radius: var(--radius-md);
  background: var(--surface-1);
  color: var(--text);
  border: 1px solid var(--border);
  font-family: inherit;
  font-size: 14px;
  box-sizing: border-box;

  display: block;
}

.modal-actions {
  margin-top: 18px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.notification-container {
  position: fixed;
  z-index: 10000;
  max-width: 400px;
  pointer-events: none;
}

@media (max-width: 900px) {
  
  .notification-container {
    max-width: 100%;
    top: 15px;
    padding-left: 12px;
  }
}