@font-face { font-family:"Inter"; src:local("Inter"),url("/assets/InterVariable.woff2") format("woff2"); font-style:normal; font-weight:100 900; font-display:swap; }
:root { color-scheme:dark; --bg:#141414; --panel:rgba(22,22,22,.96); --text:#fafafa; --muted:rgba(250,250,250,.68); --faint:rgba(250,250,250,.46); --line:rgba(250,250,250,.18); --line-strong:rgba(250,250,250,.28); --accent:#7759ff; --accent-soft:rgba(119,89,255,.14); --accent-light:#b9aaff; --danger:#ff6b7a; --success:#64d798; --radius:6px; --shadow:0 16px 44px rgba(0,0,0,.28); }
* { box-sizing:border-box; }
html { min-height:100%; font-size:16px; }
body { margin:0; min-width:320px; min-height:100vh; background:linear-gradient(rgba(119,89,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(119,89,255,.025) 1px,transparent 1px),var(--bg); background-size:32px 32px; color:var(--text); font-family:"Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif; font-size:16px; line-height:1.45; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; }
button,input { font:inherit; } button { color:inherit; } [hidden] { display:none !important; }
.shell { min-height:100vh; } .panel { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); } .prompt { color:var(--accent); } .muted { color:var(--muted); } .danger-text { color:var(--danger)!important; }
.login-view { width:min(100% - 32px,560px); min-height:100vh; margin:0 auto; padding:clamp(48px,10vh,110px) 0 36px; }
.login-brand { margin:0 0 26px; font-size:clamp(24px,5vw,34px); font-weight:750; letter-spacing:.02em; }
.login-panel { padding:28px; } .panel-title,.settings-head,.upload-panel-head { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.panel-title h1,.sidebar h2,.upload-panel h2,.dialog h2 { margin:0; font-size:19px; line-height:1.3; } .security-label { color:var(--accent-light); font-size:12px; font-weight:650; letter-spacing:.07em; } .login-panel>.muted { margin:12px 0 24px; line-height:1.55; }
.field { display:grid; gap:8px; margin:0 0 18px; } .field>span { color:var(--muted); font-size:13px; font-weight:700; letter-spacing:.035em; text-transform:uppercase; }
.field input,.search-field input { width:100%; height:48px; padding:0 14px; border:1px solid var(--line-strong); border-radius:var(--radius); outline:0; background:rgba(250,250,250,.025); color:var(--text); font-size:16px; caret-color:var(--accent-light); }
.field input:focus,.search-field:focus-within { border-color:var(--accent); box-shadow:0 0 0 2px rgba(119,89,255,.16); } .compact-field { margin-top:13px; }
.field-help { margin:-9px 0 18px; color:var(--muted); font-size:13px; line-height:1.55; } .field-help code { color:var(--accent-light); } .otp-section { padding:16px 16px 1px; margin:0 0 16px; border-left:2px solid var(--accent); background:var(--accent-soft); }
.check-row { display:flex; align-items:flex-start; gap:11px; margin:12px 0; color:var(--muted); font-size:15px; line-height:1.45; cursor:pointer; } .check-row input { flex:0 0 auto; width:18px; height:18px; margin:2px 0 0; accent-color:var(--accent); }
.form-error { margin:18px 0; padding:12px 14px; border-left:2px solid var(--danger); background:rgba(255,107,122,.08); color:#ffb4bd; font-size:14px; line-height:1.5; }
.button,.icon-button { min-height:40px; border:1px solid var(--line-strong); border-radius:var(--radius); background:rgba(250,250,250,.025); color:var(--text); font-weight:700; font-size:13px; letter-spacing:.025em; cursor:pointer; transition:border-color 150ms ease,background-color 150ms ease,transform 150ms ease; }
.button { padding:9px 14px; } .icon-button { min-height:38px; padding:8px 11px; border-color:transparent; background:transparent; } .button:hover,.icon-button:hover { border-color:var(--accent); background:var(--accent-soft); } .button:active,.icon-button:active { transform:translateY(1px); } .button:focus-visible,.icon-button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.button.primary { border-color:var(--accent); background:rgba(119,89,255,.2); } .button.primary:hover { background:rgba(119,89,255,.3); } .button.quiet { color:var(--muted); } .button.danger { border-color:rgba(255,107,122,.5); color:#ffb4bd; background:rgba(255,107,122,.08); } .button.full { width:100%; margin-top:16px; } .button:disabled,.icon-button:disabled { opacity:.45; cursor:not-allowed; transform:none; }
.vault-view { width:min(100% - 32px,1480px); margin:0 auto; padding:16px 0 32px; } .topbar { min-height:58px; display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; padding:0 4px; } .brand { font-size:19px; font-weight:750; letter-spacing:.035em; } .brand-separator { color:var(--faint); }
.topbar-actions { display:flex; align-items:center; gap:6px; }
.workspace { display:grid; grid-template-columns:250px minmax(0,1fr); gap:16px; align-items:start; } .sidebar { position:sticky; top:16px; min-height:240px; padding:20px; } .sidebar h2 { margin-bottom:16px; } .roots-list { display:grid; gap:7px; }
.root-button { width:100%; min-height:46px; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 11px; border:1px solid transparent; border-radius:var(--radius); background:transparent; color:var(--muted); font-size:15px; text-align:left; cursor:pointer; } .root-button:hover { border-color:var(--line-strong); color:var(--text); background:rgba(250,250,250,.025); } .root-button.active { border-color:var(--accent); color:var(--text); background:var(--accent-soft); } .root-mode { color:var(--faint); font-size:11px; }
.storage-note { display:flex; justify-content:space-between; gap:8px; margin-top:22px; padding-top:15px; border-top:1px solid var(--line); font-size:12px; } .storage-note strong { color:var(--accent-light); }
.explorer { min-height:calc(100vh - 106px); overflow:hidden; } .explorer-head { display:flex; align-items:flex-start; justify-content:space-between; gap:22px; padding:20px; border-bottom:1px solid var(--line); } .eyebrow { margin:0 0 7px; color:var(--faint); font-size:11px; font-weight:650; letter-spacing:.08em; }
.breadcrumbs { display:flex; flex-wrap:wrap; align-items:center; gap:5px; min-height:28px; } .crumb { padding:2px 4px; border:0; background:transparent; color:var(--muted); font-size:15px; cursor:pointer; } .crumb:hover,.crumb:last-child { color:var(--text); } .crumb-separator { color:var(--accent); }
.toolbar { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:7px; } .filter-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 18px; border-bottom:1px solid var(--line); }
.search-field { width:min(460px,100%); display:flex; align-items:center; gap:8px; border:1px solid transparent; border-radius:var(--radius); color:var(--accent); } .search-field input { height:38px; padding-left:8px; border:0; background:transparent; }
.file-table-wrap { position:relative; min-height:420px; overflow-x:auto; } .file-table { width:100%; border-collapse:collapse; table-layout:fixed; } .file-table th { height:40px; padding:0 14px; border-bottom:1px solid var(--line); color:var(--faint); font-size:11px; letter-spacing:.055em; text-align:left; text-transform:uppercase; } .file-table td { height:54px; padding:8px 14px; border-bottom:1px solid rgba(250,250,250,.08); color:var(--muted); font-size:15px; } .file-table tbody tr { transition:background-color 120ms ease; } .file-table tbody tr:hover { background:rgba(119,89,255,.07); }
.file-table .name-column { color:var(--text); } .file-name-button { max-width:100%; display:flex; align-items:center; gap:10px; padding:0; border:0; background:transparent; color:inherit; cursor:pointer; text-align:left; } .file-name-button:hover .file-name { color:var(--accent-light); } .file-kind { flex:0 0 auto; min-width:28px; color:var(--accent); font-size:11px; font-weight:700; } .file-kind.symlink { color:var(--danger); } .file-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.size-column { width:118px; } .date-column { width:190px; } .action-column { width:220px; text-align:right!important; } .row-actions { display:flex; justify-content:flex-end; gap:3px; opacity:.72; } tr:hover .row-actions,.row-actions:focus-within { opacity:1; }
.row-action { min-height:32px; padding:5px 8px; border:1px solid transparent; border-radius:4px; background:transparent; color:var(--muted); font-size:11px; font-weight:700; cursor:pointer; } .row-action:hover { border-color:var(--accent); color:var(--text); background:var(--accent-soft); } .row-action.danger:hover { border-color:var(--danger); color:#ffb4bd; background:rgba(255,107,122,.08); }
.empty-state { min-height:360px; display:grid; align-content:center; justify-items:center; color:var(--muted); text-align:center; } .empty-ascii { color:var(--accent-light); font-size:19px; } .drop-overlay { position:absolute; inset:8px; z-index:3; display:grid; place-content:center; gap:8px; border:1px dashed var(--accent); border-radius:var(--radius); background:rgba(20,20,20,.94); color:var(--accent-light); text-align:center; } .drop-overlay strong { font-size:20px; } .drop-overlay span { color:var(--muted); }
.upload-panel { position:fixed; right:22px; bottom:18px; z-index:5; width:min(560px,calc(100% - 28px)); max-height:min(60vh,560px); overflow:hidden; } .upload-panel-head { padding:14px 16px; border-bottom:1px solid var(--line); } .upload-panel h2 { font-size:16px; } .upload-list { max-height:460px; overflow-y:auto; } .upload-item { padding:13px 16px; border-bottom:1px solid rgba(250,250,250,.08); } .upload-item:last-child { border-bottom:0; } .upload-item-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; } .upload-item-name { min-width:0; overflow:hidden; color:var(--text); text-overflow:ellipsis; white-space:nowrap; } .upload-item-meta { flex:0 0 auto; color:var(--muted); font-size:13px; }
.progress-track { height:4px; background:rgba(250,250,250,.08); } .progress-value { width:0; height:100%; background:var(--accent); transition:width 150ms linear; } .upload-item.done .progress-value { background:var(--success); } .upload-item.error .progress-value { background:var(--danger); } .upload-item.error .upload-item-meta { color:#ffb4bd; }
.dialog { width:min(100% - 28px,520px); max-height:min(90dvh,760px); padding:24px; overflow-y:auto; color:var(--text); } .dialog::backdrop { background:rgba(0,0,0,.72); backdrop-filter:blur(2px); } .dialog h2 { margin-bottom:20px; } .dialog-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:9px; margin-top:22px; } .dialog-actions.left { justify-content:flex-start; } .settings-dialog { width:min(100% - 28px,720px); } .settings-head h2 { margin:0; }
.devices-list { display:grid; gap:9px; max-height:380px; margin-top:18px; overflow-y:auto; } .device-item { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px 15px; padding:14px; border:1px solid var(--line); border-radius:var(--radius); } .device-name { overflow:hidden; color:var(--text); font-weight:700; text-overflow:ellipsis; white-space:nowrap; } .device-meta { color:var(--muted); font-size:13px; line-height:1.55; } .device-revoke { grid-column:2; grid-row:1/span 2; align-self:center; }
.toast-region { position:fixed; right:18px; top:18px; z-index:20; display:grid; gap:8px; width:min(380px,calc(100% - 36px)); pointer-events:none; } .toast { padding:11px 13px; border:1px solid var(--line-strong); border-left:3px solid var(--accent); border-radius:var(--radius); background:#1b1b1b; box-shadow:var(--shadow); color:var(--text); line-height:1.4; } .toast.error { border-left-color:var(--danger); } .toast.success { border-left-color:var(--success); }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
@media (max-width:1100px) { .workspace { grid-template-columns:220px minmax(0,1fr); } .action-column { width:190px; } .date-column { width:165px; } }
@media (max-width:900px) { .workspace { grid-template-columns:1fr; } .sidebar { position:static; min-height:0; padding:14px; } .sidebar h2,.storage-note { display:none; } .roots-list { display:flex; gap:8px; overflow-x:auto; overscroll-behavior-inline:contain; scrollbar-width:thin; } .root-button { width:auto; min-width:160px; } .explorer { min-height:calc(100vh - 190px); } .explorer-head { display:grid; gap:16px; } .toolbar { justify-content:flex-start; } .row-actions { opacity:1; } }
@media (max-width:720px) {
  .vault-view { width:min(100% - 16px,1480px); padding-top:8px; }
  .topbar { min-height:52px; margin-bottom:8px; }
  .workspace { gap:8px; }
  .explorer-head { gap:14px; padding:16px; }
  .toolbar { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; }
  .toolbar .button { width:100%; min-height:44px; }
  .filter-row { padding:10px 14px; }
  #entry-count { display:none; }
  .search-field { width:100%; }
  .file-table-wrap { min-height:360px; overflow-x:hidden; }
  .file-table,.file-table tbody { display:block; width:100%; }
  .file-table thead { display:none; }
  .file-table tbody tr { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 16px; padding:14px; border-bottom:1px solid rgba(250,250,250,.1); }
  .file-table tbody tr:hover { background:rgba(119,89,255,.07); }
  .file-table td { width:auto; height:auto; padding:0; border:0; font-size:14px; }
  .file-table .name-column { grid-column:1/-1; }
  .file-name-button { min-height:36px; font-size:16px; }
  .size-column { grid-column:1; grid-row:2; display:flex; align-items:center; gap:6px; }
  .size-column::before { content:"Размер:"; color:var(--faint); font-size:12px; font-weight:650; text-transform:uppercase; }
  .date-column { grid-column:1; grid-row:3; display:flex; align-items:center; gap:6px; }
  .date-column::before { content:"Изменён:"; color:var(--faint); font-size:12px; font-weight:650; text-transform:uppercase; }
  .action-column { grid-column:2; grid-row:2/span 2; align-self:center; text-align:right!important; }
  .row-actions { flex-wrap:wrap; opacity:1; }
  .row-action { min-height:38px; padding:7px 9px; font-size:12px; }
  .upload-panel { right:8px; bottom:8px; width:calc(100% - 16px); }
}
@media (max-width:480px) {
  .login-view { width:min(100% - 20px,560px); padding:32px 0 24px; }
  .login-brand { margin-bottom:18px; }
  .login-panel { padding:20px; }
  .security-label { display:none; }
  .topbar { align-items:flex-start; }
  .brand { padding-top:9px; font-size:16px; }
  .topbar-actions { gap:0; }
  .topbar-actions .icon-button { padding-inline:8px; font-size:12px; }
  .root-button { min-width:145px; }
  .toolbar { grid-template-columns:1fr; }
  .file-table tbody tr { grid-template-columns:1fr; }
  .size-column,.date-column,.action-column { grid-column:1; grid-row:auto; }
  .action-column { margin-top:4px; }
  .row-actions { justify-content:flex-start; }
  .dialog { width:calc(100% - 16px); padding:18px; }
  .settings-head { align-items:flex-start; }
  .device-item { grid-template-columns:1fr; }
  .device-revoke { grid-column:1; grid-row:auto; justify-self:start; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; } }