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

/* ==========================================================
   SNUS FILES — CLAUDE DARK 2D (DEFAULT LOGIN + NO ICON)
   ========================================================== */

:root {
  /* Палитра в стиле Claude: плоский матовый темный + небесно-голубой */
  --bg-main: #11141a !important;        /* Глубокий матовый фон */
  --bg-surface: #181c24 !important;     /* Фон карточек и меню */
  --bg-surface-hover: #212632 !important;/* Ховер карточек */
  
  --border-subtle: #2a303d !important;   /* Плоские плотные рамки */
  --border-focus: #3b82f6 !important;    /* Голубой акцент границ */
  
  --text-main: #f1f5f9 !important;       /* Основной чистый текст */
  --text-muted: #94a3b8 !important;      /* Вторичный серый текст */
  
  --azure-accent: #3b82f6 !important;    /* Чистый голубой */
  --azure-hover: #60a5fa !important;     /* Светло-голубой для ховера */
  --azure-soft: rgba(59, 130, 246, 0.1) !important; /* Мягкая голубая подложка */

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  --font-code: 'JetBrains Mono', monospace !important;
  
  --radius-flat: 10px !important;
  --transition-2d: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Глобальный 2D фон */
body {
  background-color: var(--bg-main) !important;
  color: var(--text-main) !important;
  font-family: var(--font-sans) !important;
  -webkit-font-smoothing: antialiased !important;
}

/* ----------------------------------------------------------
   1. СТРАНИЦА ВХОДА (DEFAULT LAYOUT)
   ---------------------------------------------------------- */
#login {
  background-color: var(--bg-main) !important;
}

/* Скрытие иконки/логотипа */
#login .logo,
#login .logo img,
#login .logo svg,
#login img[alt="File Browser"],
#login img[alt="Snus Files"] {
  display: none !important;
}

/* Стандартная форма в 2D стиле */
#login form {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  padding: 2.5rem !important;
}

#login h1 {
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
  color: var(--text-main) !important;
  font-size: 1.6rem !important;
  letter-spacing: -0.02em !important;
  margin-top: 0 !important;
}

#login input {
  background: var(--bg-main) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-flat) !important;
  color: var(--text-main) !important;
  padding: 12px 14px !important;
  font-family: var(--font-sans) !important;
  transition: var(--transition-2d) !important;
}

#login input:focus {
  border-color: var(--azure-accent) !important;
  background: var(--bg-main) !important;
  box-shadow: 0 0 0 3px var(--azure-soft) !important;
  outline: none !important;
}

#login button {
  background: var(--azure-accent) !important;
  border: none !important;
  border-radius: var(--radius-flat) !important;
  color: #ffffff !important;
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  padding: 12px !important;
  box-shadow: none !important;
  transition: var(--transition-2d) !important;
  cursor: pointer !important;
}

#login button:hover {
  background: var(--azure-hover) !important;
}

/* ----------------------------------------------------------
   2. ШАПКА И НАВИГАЦИЯ (HEADER & SIDEBAR)
   ---------------------------------------------------------- */
header {
  background-color: var(--bg-surface) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
}

header .brand {
  font-weight: 700 !important;
  color: var(--azure-hover) !important;
  letter-spacing: -0.01em !important;
}

nav {
  background-color: var(--bg-surface) !important;
  border-right: 1px solid var(--border-subtle) !important;
}

nav .action {
  border-radius: var(--radius-flat) !important;
  margin: 4px 8px !important;
  color: var(--text-muted) !important;
  transition: var(--transition-2d) !important;
}

nav .action:hover {
  background: var(--azure-soft) !important;
  color: var(--azure-hover) !important;
}

nav .action.active {
  background: var(--azure-soft) !important;
  color: var(--azure-accent) !important;
  font-weight: 600 !important;
}

/* ----------------------------------------------------------
   3. 2D ФАЙЛОВАЯ СЕТКА И АНИМАЦИЯ КАРТОЧЕК
   ---------------------------------------------------------- */
.item {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-flat) !important;
  box-shadow: none !important;
  transition: var(--transition-2d) !important;
}

.item:hover {
  background: var(--bg-surface-hover) !important;
  border-color: var(--azure-accent) !important;
  transform: translateY(-2px) !important;
}

.item .name {
  color: var(--text-main) !important;
  font-weight: 500 !important;
  font-size: 0.95rem !important;
}

/* ----------------------------------------------------------
   4. КНОПКИ И МИНИМАЛИСТИЧНЫЙ СКРОЛЛБАР
   ---------------------------------------------------------- */
.action, button {
  border-radius: var(--radius-flat) !important;
}

/* Плавающая кнопка загрузки */
#upload-button {
  background: var(--azure-accent) !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  transition: var(--transition-2d) !important;
}

#upload-button:hover {
  background: var(--azure-hover) !important;
  transform: scale(1.08) !important;
}

/* Аккуратный плоский скроллбар */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--bg-main);
}
::-webkit-scrollbar-thumb {
  background: var(--border-subtle);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--azure-accent);
}