* { box-sizing: border-box; }
:root {
  --bg:#f5f5f5; --panel:#fff; --border:#e0e0e0; --text:#242424;
  --muted:#616161; --accent:#5b5fc7; --accent-hover:#4d51b3;
  --hover:#f0f0f0; --danger:#c4314b; --green:#13a10e;
}
html,body { height:100%; margin:0; font-family:"Segoe UI",-apple-system,Roboto,Arial,sans-serif; background:var(--bg); color:var(--text); font-size:14px; }
.hidden { display:none !important; }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background:#c8c6c4; border-radius:5px; border:2px solid transparent; background-clip:content-box; }

.auth { height:100%; display:grid; place-items:center; }
.auth-card { background:#fff; padding:40px; border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,.15); text-align:center; }
.auth-card h1 { margin:0 0 8px; color:var(--accent); }
.btn-primary { display:inline-block; padding:10px 20px; background:var(--accent); color:#fff; border-radius:8px; text-decoration:none; font-weight:600; margin-top:12px; border:0; cursor:pointer; }
.btn-primary:hover { background:var(--accent-hover); }

.app { display:flex; flex-direction:column; height:100vh; }
.topbar { display:flex; align-items:center; gap:16px; padding:12px 20px; background:#fff; border-bottom:1px solid var(--border); }
.logo { font-weight:800; color:var(--accent); font-size:16px; padding-right:14px; border-right:1px solid var(--border); }
.logo span { display:inline-block; background:var(--accent); color:#fff; padding:4px 8px; border-radius:6px; margin-right:6px; font-size:12px; }
.breadcrumbs { flex:1; display:flex; gap:6px; align-items:center; font-size:13px; overflow:hidden; }
.breadcrumbs a { color:var(--accent); text-decoration:none; padding:4px 8px; border-radius:6px; }
.breadcrumbs a:hover { background:var(--hover); }
.breadcrumbs a:not(:last-child)::after { content:'/'; color:var(--muted); margin-left:8px; }
.topbar-actions { display:flex; gap:8px; align-items:center; }
.icon-btn { border:0; background:transparent; padding:8px 10px; border-radius:6px; cursor:pointer; font-size:14px; }
.icon-btn:hover { background:var(--hover); }
.user-me { font-size:12px; color:var(--muted); padding-left:12px; border-left:1px solid var(--border); }

.filters { display:flex; gap:12px; padding:10px 20px; background:#fff; border-bottom:1px solid var(--border); align-items:center; }
.filters input { flex:1; padding:8px 12px; border:1px solid var(--border); border-radius:6px; font-size:13px; }
.sort { font-size:12px; color:var(--muted); display:flex; gap:6px; align-items:center; }
.sort select { padding:6px 10px; border:1px solid var(--border); border-radius:6px; font-size:12px; }

.files-wrap { flex:1; overflow:auto; padding:16px 20px; position:relative; }
.files-table { width:100%; border-collapse:collapse; background:#fff; border-radius:8px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.05); }
.files-table th { text-align:left; padding:12px 14px; font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); font-weight:700; border-bottom:1px solid var(--border); }
.files-table td { padding:10px 14px; border-bottom:1px solid #f0f0f0; font-size:13px; vertical-align:middle; }
.files-table tr:hover td { background:var(--hover); }
.files-table .row-actions { display:flex; gap:2px; justify-content:flex-end; }
.row-actions .icon-btn { font-size:14px; }
.file-name-cell { display:flex; align-items:center; gap:10px; cursor:pointer; }
.file-icon { font-size:20px; flex-shrink:0; }
.file-name { font-weight:500; color:var(--text); }
.file-name:hover { color:var(--accent); }
.row-muted { color:var(--muted); font-size:12px; }

.empty { text-align:center; padding:60px 20px; color:var(--muted); font-size:13px; }

.drop-overlay { position:fixed; inset:0; background:rgba(91,95,199,.15); border:3px dashed var(--accent); display:grid; place-items:center; z-index:200; pointer-events:none; }
.drop-inner { background:#fff; padding:20px 30px; border-radius:12px; font-weight:600; color:var(--accent); box-shadow:0 10px 30px rgba(0,0,0,.15); }

.upload-queue { position:fixed; right:20px; bottom:20px; width:320px; background:#fff; border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.15); padding:14px; font-size:13px; }
.upload-queue-title { font-weight:700; margin-bottom:8px; }
.upload-item { display:flex; justify-content:space-between; padding:4px 0; }
.upload-item .ok { color:var(--green); }
.upload-item .err { color:var(--danger); }

.toasts { position:fixed; top:16px; right:16px; z-index:9999; display:flex; flex-direction:column; gap:8px; }
.toast { padding:10px 16px; background:#fff; border-left:4px solid var(--accent); border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.15); font-size:13px; max-width:400px; animation:slidein .2s ease; }
.toast.err { border-left-color:var(--danger); }
.toast.ok { border-left-color:var(--green); }
@keyframes slidein { from { transform:translateX(20px); opacity:0; } to { transform:none; opacity:1; } }

/* модалки */
.modal { position:fixed; inset:0; background:rgba(0,0,0,.4); display:grid; place-items:center; z-index:100; }
.modal-card { background:#fff; padding:24px; border-radius:12px; width:420px; max-width:96vw; box-shadow:0 20px 60px rgba(0,0,0,.3); }
.modal-card h3 { margin:0 0 16px; color:var(--accent); }
.modal-card input { width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:8px; font-size:14px; }
.modal-actions { display:flex; gap:8px; margin-top:16px; }
.modal-actions button { flex:1; padding:10px; border:0; border-radius:8px; cursor:pointer; font-weight:600; }
.modal-actions .primary { background:var(--accent); color:#fff; }
.modal-actions .secondary { background:#e8e6f8; color:var(--accent); }

/* ============ Логин-форма ============ */
.auth-card { width: 380px; padding: 36px 32px; }
.auth-card h1 { margin: 0 0 6px; font-size: 22px; text-align: center; }
.auth-card .muted { text-align: center; margin-bottom: 20px; }
.auth-card input {
  width: 100%;
  padding: 12px 14px;
  margin: 6px 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  background: #fff;
  color: var(--text);
}
.auth-card input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(91,95,199,.1);
}
.auth-logo {
  width: 56px;
  height: 56px;
  background: var(--accent);
  color: #fff;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 18px;
  margin: 0 auto 16px;
}
.auth-card .error {
  color: var(--danger);
  font-size: 12px;
  margin-top: 8px;
  min-height: 16px;
  text-align: center;
}
.auth-card .btn-primary {
  display: block;
  width: 100%;
  padding: 12px;
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 8px;
  text-decoration: none;
  text-align: center;
}
.auth-card .btn-primary:hover { background: var(--accent-hover); }
.auth-card .btn-primary:disabled { opacity: .6; cursor: not-allowed; }

.auth-card a { color: var(--accent); }

/* Кнопки типов в списке файлов */
.file-name-cell { user-select: none; }
.row-actions .icon-btn { transition: transform .1s; }
.row-actions .icon-btn:hover { transform: scale(1.15); }