/* ===== ТЕМА "default" (тепла, з лендінгу) — застосовується завжди, якщо на немає data-theme="tech". Це дефолтна тема застосунку. ===== */ :root { --bg: #201D18; --bg-rgb: 32,29,24; --bg2: #241F19; --surface: #2A2620; --surface2: #332E27; --border: #3D362C; --border2: #4A4033; --accent: #E3A73B; --accent-dim: rgba(227,167,59,0.14); --accent2: #5C9C8E; --green: #7CA65A; --green-dim: rgba(124,166,90,0.12); --yellow: #C9A227; --yellow-dim: rgba(201,162,39,0.12); --red: #C0524B; --red-dim: rgba(192,82,75,0.12); --text: #F0EAD9; --text2: #C9BFA6; --text3: #9C9280; --mono: 'IBM Plex Mono', monospace; --display: 'Fraunces', serif; --r: 6px; --shadow: 0 8px 32px rgba(0,0,0,0.4); --grid-opacity: 0.15; } /* ===== ТЕМА "tech" (неоново-цианова, оригінальна) — перемикач. ===== */ :root[data-theme="tech"] { --bg: #080c10; --bg-rgb: 8,12,16; --bg2: #0e1318; --surface: #131920; --surface2: #1a2230; --border: #1e2d3d; --border2: #263545; --accent: #00d4ff; --accent-dim: rgba(0,212,255,0.12); --accent2: #ff6b35; --green: #00ff88; --green-dim: rgba(0,255,136,0.1); --yellow: #ffcc00; --yellow-dim: rgba(255,204,0,0.1); --red: #ff3355; --red-dim: rgba(255,51,85,0.1); --text: #e8edf2; --text2: #7a8fa0; --text3: #5A7085; --mono: 'JetBrains Mono', monospace; --display: 'Unbounded', sans-serif; --r: 6px; --shadow: 0 8px 32px rgba(0,0,0,0.4); --grid-opacity: 0.3; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 15px; scroll-behavior: smooth; } body { line-height: 1.5; background: var(--bg); color: var(--text); font-family: var(--mono); min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; transition: background 0.2s, color 0.2s; } /* scanline texture */ body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9999; background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 4px); } /* grid bg */ body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: 48px 48px; opacity: var(--grid-opacity); } #app { position: relative; z-index: 1; } /* ===== VIEWS ===== */ .view { display: none; } .view.active { display: block; animation: fadeUp 0.25s ease; } @keyframes fadeUp { from { opacity:0; transform:translateY(8px) } to { opacity:1; transform:none } } /* ===== LOGIN ===== */ #view-login.active { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; } .login-wrap { width: 100%; max-width: 380px; } .login-logo { font-family: var(--display); font-size: 30px; font-weight: 900; color: var(--accent); letter-spacing: -1px; margin-bottom: 6px; text-align: center; } .login-logo span { color: var(--text3); } .login-sub { text-align: center; font-size: 13px; color: var(--text3); margin-bottom: 36px; letter-spacing: 1px; text-transform: uppercase; } .login-box { background: var(--surface); border: 1px solid var(--border2); border-radius: 10px; padding: 32px; box-shadow: var(--shadow), 0 0 60px rgba(0,212,255,0.04); } .login-box .field { margin-bottom: 16px; } .login-box label { display: block; font-size: 12px; color: var(--text3); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 7px; } .login-box input { width: 100%; background: var(--bg2); border: 1px solid var(--border); color: var(--text); padding: 11px 14px; font-family: var(--mono); font-size: 15px; border-radius: var(--r); outline: none; transition: border-color 0.15s; } .login-box input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); } .login-box input::placeholder { color: var(--text3); } .login-error { font-size: 13px; color: var(--red); margin-top: 12px; display: none; text-align: center; } .login-error.show { display: block; } .login-setup-link { text-align: center; margin-top: 20px; font-size: 13px; color: var(--text3); } .login-setup-link a { color: var(--accent); cursor: pointer; text-decoration: none; } /* ===== SETUP ===== */ #view-setup.active { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; } .setup-wrap { width: 100%; max-width: 440px; } .setup-wrap h1 { font-family: var(--display); font-size: 24px; font-weight: 900; margin-bottom: 6px; color: var(--accent); } .setup-wrap .sub { font-size: 13px; color: var(--text3); margin-bottom: 28px; line-height: 1.6; } .setup-box { background: var(--surface); border: 1px solid var(--border2); border-radius: 10px; padding: 28px; } .setup-section-title { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text3); margin-bottom: 14px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); } .setup-section-title:first-child { margin-top: 0; padding-top: 0; border-top: none; } .demo-banner, .trial-banner { display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; padding:10px 16px; font-size:13px; background: var(--accent-dim); color: var(--text); border-bottom:1px solid var(--border); text-align:center; } .trial-banner.urgent { background: var(--red-dim); } .trial-banner a { color: var(--accent); cursor:pointer; font-weight:600; } .header-trial-chip { font-size:10px; font-weight:600; opacity:.75; margin-left:4px; } .cap-chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; } .cap-chip { font-size:12px; padding:5px 10px; border:1px solid var(--border); border-radius:999px; cursor:pointer; color:var(--text2); user-select:none; } .cap-chip:hover { border-color: var(--accent); color: var(--text); } .cap-chip.active { background: var(--accent-dim); border-color: var(--accent); color: var(--text); } .nd-pick { padding:16px; margin-bottom:16px; } .nd-pick.picked { border-color: var(--green); border-style: solid; } /* Line icons (CSS masks, colour = currentColor) — replaces emoji, which render differently on every OS and read as toy-like in a pro tool. */ .ic { display:inline-block; width:1em; height:1em; background:currentColor; -webkit-mask:var(--i) center/contain no-repeat; mask:var(--i) center/contain no-repeat; vertical-align:-0.14em; flex:none; } .ic-drive { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='20' height='12' rx='3'/%3E%3Cpath d='M6 14h.01M10 14h.01M15 10h3'/%3E%3C/svg%3E"); } .ic-ssd { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='2.5' width='14' height='19' rx='2.5'/%3E%3Cpath d='M9 7h6M9 17h.01'/%3E%3C/svg%3E"); } .ic-tower { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M3 12h18M7 8h.01M7 16h.01'/%3E%3C/svg%3E"); } .ic-usb { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='9' width='10' height='13' rx='2'/%3E%3Cpath d='M9 9V3h6v6M11 5.5h.01M13 5.5h.01'/%3E%3C/svg%3E"); } .ic-bolt { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 4 14h8l-1 8 9-12h-8z'/%3E%3C/svg%3E"); } .ic-disc { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3C/svg%3E"); } .ic-folder { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E"); } .ic-file { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z'/%3E%3Cpath d='M14 3v6h6'/%3E%3C/svg%3E"); } .ic-key { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.5' cy='15.5' r='4.5'/%3E%3Cpath d='m10.7 12.3 9.8-9.8M16 7l3 3M19 4l2 2'/%3E%3C/svg%3E"); } .ic-users { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.9M16 3.1a4 4 0 0 1 0 7.8'/%3E%3C/svg%3E"); } .ic-gift { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4' rx='1'/%3E%3Cpath d='M12 8v13M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7M7.5 8a2.5 2.5 0 0 1 0-5C11 3 12 8 12 8s1-5 4.5-5a2.5 2.5 0 0 1 0 5'/%3E%3C/svg%3E"); } .ic-logout { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9'/%3E%3C/svg%3E"); } .ic-card { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20M6 15h4'/%3E%3C/svg%3E"); } .ic-refresh { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-2.6-6.4L21 8M21 3v5h-5'/%3E%3C/svg%3E"); } .ic-back { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E"); } .ic-menu { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16'/%3E%3C/svg%3E"); } .ic-user { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E"); } .ic-search { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E"); } .ic-theme { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 3v18'/%3E%3C/svg%3E"); } .ic-print { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9V3h12v6'/%3E%3Crect x='3' y='9' width='18' height='8' rx='2'/%3E%3Cpath d='M6 14h12v7H6z'/%3E%3C/svg%3E"); } .ic-trash { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2M6 6l1 15h10l1-15'/%3E%3C/svg%3E"); } .ic-download { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12m-5-5 5 5 5-5M4 21h16'/%3E%3C/svg%3E"); } .dc-icon .ic { font-size: 26px; } .tree-ico .ic { font-size: 14px; color: var(--accent); } .file-row .tree-ico .ic { color: var(--text3); } .note { background: var(--bg2); border-left: 2px solid var(--accent); border-radius: var(--r); padding: 10px 14px; font-size: 13px; color: var(--text2); line-height: 1.6; margin-bottom: 16px; } .note code { color: var(--accent); } .note a { color: var(--accent); } /* ===== FIELDS ===== */ .field { margin-bottom: 14px; } .field label { display: block; font-size: 12px; color: var(--text3); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 7px; } .field input, .field textarea, .field select { width: 100%; background: var(--bg2); border: 1px solid var(--border); color: var(--text); padding: 10px 13px; font-family: var(--mono); font-size: 14px; border-radius: var(--r); outline: none; transition: border-color 0.15s; } .field input:focus, .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); } .field textarea { resize: vertical; min-height: 70px; line-height: 1.5; } .field input::placeholder, .field textarea::placeholder { color: var(--text3); } .field-hint { font-size: 12px; color: var(--text3); margin-top: 5px; line-height: 1.5; } /* ===== BUTTONS ===== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 16px; border-radius: var(--r); font-family: var(--mono); font-size: 14px; font-weight: 500; cursor: pointer; border: none; transition: all 0.15s; text-decoration: none; white-space: nowrap; letter-spacing: 0.3px; } .btn-primary { background: var(--accent); color: #000; } .btn-primary:hover { background: #33ddff; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,212,255,0.3); } .btn-ghost { background: transparent; color: var(--text2); border: 1px solid var(--border2); } .btn-ghost:hover { border-color: var(--accent); color: var(--accent); } .btn-danger { background: transparent; color: var(--red); border: 1px solid rgba(255,51,85,0.2); } .btn-danger:hover { background: var(--red-dim); } .btn-sm { padding: 6px 12px; font-size: 13px; } .btn:disabled { opacity: 0.35; cursor: not-allowed; transform: none !important; } .btn-full { width: 100%; } .btn-icon { padding: 8px; } /* ===== HEADER ===== */ .app-header { position: sticky; top: 0; z-index: 200; background: rgba(var(--bg-rgb),0.92); backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); padding: 0 20px; height: 52px; display: flex; align-items: center; gap: 8px; /* Safety net under the icon-only mobile layout — on a genuinely tiny screen (or a long team name) nothing should be able to clip off the edge and become unreachable; it scrolls instead. */ overflow-x: auto; scrollbar-width: none; } .app-header::-webkit-scrollbar { display: none; } .app-header > * { flex-shrink: 0; } /* Перемикач теми — компактний switch, не старомодна emoji-кнопка. */ .theme-switch { width: 40px; height: 22px; border-radius: 11px; flex-shrink: 0; background: var(--surface2); border: 1px solid var(--border2); position: relative; cursor: pointer; padding: 0; transition: border-color 0.15s; } .theme-switch:hover { border-color: var(--accent); } .theme-switch-thumb { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); transition: transform 0.2s ease; box-shadow: 0 1px 3px rgba(0,0,0,0.4); } :root[data-theme="tech"] .theme-switch-thumb { transform: translateX(18px); } /* Плаваючий варіант — тільки для екранів логіну/реєстрації/PIN, де немає свого хедера. Всередині застосунку перемикач вже стоїть у флекс-рядку хедера (див. .app-header), тож плаваючий дублікат там ховаємо, щоб не накладався на кнопки "PIN"/"Вийти". */ .theme-switch-floating { position: fixed; top: 14px; right: 14px; z-index: 10000; } #app:has(#view-app.active) .theme-switch-floating { display: none; } .header-logo { font-family: var(--display); font-size: 16px; font-weight: 900; color: var(--accent); letter-spacing: -0.5px; cursor: pointer; flex-shrink: 0; display: flex; align-items: baseline; gap: 0; } .header-logo span { color: var(--text3); font-weight: 400; } .header-logo span { color: var(--text3); font-weight: 400; } .header-sep { flex: 1; } .header-search-wrap { flex: 1; max-width: 320px; position: relative; } .header-search { width: 100%; background: var(--surface); border: 1px solid var(--border); color: var(--text); padding: 7px 12px 7px 34px; font-family: var(--mono); font-size: 14px; border-radius: 20px; outline: none; transition: all 0.2s; } .header-search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); } .header-search::placeholder { color: var(--text3); } .search-icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); font-size: 15px; color: var(--text3); pointer-events: none; } .header-user { height: 34px; box-sizing: border-box; padding: 0 12px; border-radius: var(--r); border: 1px solid transparent; font-size: 13px; color: var(--text3); display: flex; align-items: center; gap: 8px; transition: all 0.15s; } .header-user:hover { border-color: var(--border2); color: var(--text); } .header-user .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green); } .header-btn { height: 34px; box-sizing: border-box; background: transparent; border: 1px solid var(--border); color: var(--text3); padding: 0 12px; border-radius: var(--r); font-family: var(--mono); font-size: 13px; cursor: pointer; transition: all 0.15s; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; } .header-btn:hover { border-color: var(--border2); color: var(--text); } .header-btn-icon { display: inline-flex; font-size: 19px; line-height: 1; } .header-btn-icon-only { width: 34px; padding: 0; justify-content: center; font-size: 19px; } .header-btn-upgrade { background: var(--accent); border-color: var(--accent); color: #000; font-weight: 700; } .header-btn-upgrade:hover { background: var(--accent); color: #000; filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,0.25); } /* Mobile header collapse — below 640px only Search, Upgrade (still worth one tap, not two) and the ☰ menu stay in the row; everything else (account, PIN, Team, refer, theme, refresh, log out) moves into the dropdown so the bar stops being a wall of tiny icons. Desktop is untouched — .header-desktop-controls only turns into a real block inside the 640px query below. */ .header-desktop-controls { display: contents; } .header-menu-toggle { display: none; } .header-mobile-menu { display: none; position: absolute; top: 52px; right: 10px; z-index: 300; background: var(--surface); border: 1px solid var(--border2); border-radius: var(--r); box-shadow: var(--shadow); min-width: 220px; padding: 6px; flex-direction: column; gap: 2px; } .header-mobile-menu.open { display: flex; } .hmm-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 6px; font-size: 13px; color: var(--text2); cursor: pointer; transition: background 0.12s; } .hmm-row:hover { background: var(--bg2); } .hmm-row .header-btn-icon { font-size: 17px; } .hmm-danger { color: var(--red); } @media (max-width: 640px) { .header-desktop-controls { display: none; } .app-header { overflow: visible; } .header-menu-toggle { display: inline-flex; } .header-upgrade-persistent .header-btn-label { display: none; } .header-upgrade-persistent { width: 34px; padding: 0; justify-content: center; } } /* ===== SEARCH RESULTS ===== */ .search-dropdown { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--surface); border: 1px solid var(--border2); border-radius: var(--r); box-shadow: var(--shadow); z-index: 500; display: none; max-height: 360px; overflow-y: auto; } .search-dropdown.open { display: block; } .search-result-item { padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--border); transition: background 0.1s; } .search-result-item:last-child { border-bottom: none; } .search-result-item:hover { background: var(--surface2); } .sri-disk { font-size: 12px; color: var(--accent); margin-bottom: 2px; letter-spacing: 0.5px; } .sri-path { font-size: 14px; color: var(--text); } .sri-path mark { background: rgba(0,212,255,0.2); color: var(--accent); border-radius: 2px; padding: 0 2px; } .sri-size { font-size: 12px; color: var(--text3); margin-top: 2px; } .search-empty { padding: 24px; text-align: center; font-size: 14px; color: var(--text3); } /* ===== LAYOUT ===== */ .app-layout { display: flex; min-height: calc(100vh - 52px); } /* SIDEBAR */ .sidebar { width: 240px; flex-shrink: 0; background: var(--bg2); border-right: 1px solid var(--border); padding: 16px 0; position: sticky; top: 52px; height: calc(100vh - 52px); overflow-y: auto; } .sidebar-section { margin-bottom: 6px; } .sidebar-section-title { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text3); padding: 8px 16px 6px; } .sidebar-item { display: flex; align-items: center; gap: 9px; padding: 8px 16px; cursor: pointer; font-size: 14px; color: var(--text2); transition: all 0.12s; border-left: 2px solid transparent; position: relative; } .sidebar-item:hover { color: var(--text); background: rgba(255,255,255,0.03); } .sidebar-item.active { color: var(--accent); border-left-color: var(--accent); background: var(--accent-dim); } .sidebar-item .item-icon { font-size: 16px; flex-shrink: 0; width: 18px; text-align: center; } .sidebar-item .item-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-item .item-badge { font-size: 11px; background: var(--surface2); color: var(--text3); padding: 2px 6px; border-radius: 10px; } .sidebar-item .item-pct { font-size: 11px; color: var(--text3); } .sidebar-add { margin: 8px 12px; } .sidebar-divider { height: 1px; background: var(--border); margin: 8px 16px; } /* MAIN */ .main-content { flex: 1; padding: 28px 28px; min-width: 0; } /* ===== DISK LIST VIEW ===== */ .page-title { font-family: var(--display); font-size: 24px; font-weight: 900; letter-spacing: -0.5px; margin-bottom: 4px; } .page-sub { font-size: 13px; color: var(--text3); margin-bottom: 24px; } .disks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; } .disk-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 18px; cursor: pointer; transition: all 0.15s; position: relative; overflow: hidden; } .disk-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0,212,255,0.03), transparent); opacity: 0; transition: opacity 0.2s; } .disk-card:hover { border-color: var(--border2); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.3); } .disk-card:hover::after { opacity: 1; } .dc-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; } .dc-icon { font-size: 24px; } .dc-badge { font-size: 11px; padding: 3px 8px; border-radius: 20px; letter-spacing: 0.5px; font-weight: 600; } .badge-ok { background: var(--green-dim); color: var(--green); } .badge-warn { background: var(--yellow-dim); color: var(--yellow); } .badge-full { background: var(--red-dim); color: var(--red); } .dc-name { font-family: var(--display); font-size: 15px; font-weight: 700; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dc-id { font-size: 11px; color: var(--text3); margin-bottom: 14px; } .dc-bar { height: 3px; background: var(--surface2); border-radius: 2px; margin-bottom: 8px; overflow: hidden; } .dc-bar-fill { height: 100%; border-radius: 2px; transition: width 0.5s ease; } .fill-ok { background: var(--green); } .fill-warn { background: var(--yellow); } .fill-full { background: var(--red); } .dc-stats { display: flex; justify-content: space-between; font-size: 12px; color: var(--text3); } .dc-updated { font-size: 11px; color: var(--text3); margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); } .disk-card-add { border-style: dashed; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 160px; color: var(--text3); gap: 8px; cursor: pointer; } .disk-card-add:hover { border-color: var(--accent); color: var(--accent); } /* ===== DISK DETAIL VIEW ===== */ .detail-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 24px; gap: 16px; flex-wrap: wrap; } .detail-title-wrap {} .detail-disk-name { font-family: var(--display); font-size: 28px; font-weight: 900; letter-spacing: -0.5px; margin-bottom: 3px; } .detail-disk-id { font-size: 12px; color: var(--text3); } .detail-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; padding-top: 4px; } .stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; } .stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 16px 18px; } .stat-label { font-size: 11px; color: var(--text3); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 8px; } .stat-value { font-family: var(--display); font-size: 22px; font-weight: 900; } .usage-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 18px 20px; margin-bottom: 20px; } .usage-top { display: flex; justify-content: space-between; font-size: 13px; color: var(--text2); margin-bottom: 12px; } .usage-bar { height: 6px; background: var(--surface2); border-radius: 3px; overflow: hidden; } .usage-bar-fill { height: 100%; border-radius: 3px; transition: width 0.6s ease; } /* FOLDER TREE */ .tree-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); margin-bottom: 20px; overflow: hidden; } .tree-header { padding: 14px 18px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; } .tree-title { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--text3); } .tree-body { padding: 8px 0; } .tree-node { user-select: none; } .tree-row { display: flex; align-items: center; gap: 0; padding: 5px 18px 5px 0; cursor: pointer; transition: background 0.1s; font-size: 14px; position: relative; } .tree-row:hover { background: var(--surface2); } .tree-indent { flex-shrink: 0; } .tree-toggle { width: 18px; flex-shrink: 0; text-align: center; font-size: 11px; color: var(--text3); } .tree-ico { margin-right: 6px; font-size: 15px; flex-shrink: 0; } .tree-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tree-count { font-size: 12px; color: var(--text3); margin-right: 12px; flex-shrink: 0; } .tree-size { font-size: 13px; color: var(--text2); flex-shrink: 0; min-width: 64px; text-align: right; padding-right: 18px; } .tree-children { display: none; } .tree-children.open { display: block; } .tree-bar-mini { width: 40px; height: 2px; background: var(--surface2); border-radius: 1px; overflow: hidden; margin-right: 10px; flex-shrink: 0; } .tree-bar-fill { height: 100%; background: var(--accent); opacity: 0.5; } /* NOTES */ .notes-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); margin-bottom: 20px; } .notes-header { padding: 14px 18px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; } .notes-title { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--text3); } .notes-list { padding: 0; } .note-item { padding: 14px 18px; border-bottom: 1px solid var(--border); } .note-item:last-child { border-bottom: none; } .note-meta { display: flex; gap: 10px; margin-bottom: 6px; align-items: center; } .note-author { font-size: 12px; color: var(--accent); font-weight: 600; } .note-date { font-size: 12px; color: var(--text3); } .note-text { font-size: 14px; color: var(--text2); line-height: 1.6; } .note-empty { padding: 24px 18px; font-size: 14px; color: var(--text3); } .notes-add { padding: 14px 18px; border-top: 1px solid var(--border); display: flex; gap: 10px; align-items: flex-end; } .notes-add textarea { flex: 1; background: var(--bg2); border: 1px solid var(--border); color: var(--text); padding: 9px 12px; font-family: var(--mono); font-size: 14px; border-radius: var(--r); outline: none; resize: none; height: 60px; transition: border-color 0.15s; } .notes-add textarea:focus { border-color: var(--accent); } /* ===== MODALS ===== */ .overlay { position: fixed; inset: 0; z-index: 800; background: rgba(0,0,0,0.7); backdrop-filter: blur(6px); display: none; align-items: center; justify-content: center; padding: 20px; } .overlay.open { display: flex; } .modal { background: var(--surface); border: 1px solid var(--border2); border-radius: 10px; padding: 28px; width: 100%; max-width: 440px; position: relative; animation: fadeUp 0.2s ease; box-shadow: var(--shadow); /* Content taller than the viewport (the QR/print modal especially) used to just overflow past the screen with no way to scroll it — the modal scrolls internally instead now. */ max-height: calc(100vh - 40px); overflow-y: auto; box-sizing: border-box; } @media (max-width: 480px) { .overlay { padding: 10px; } .modal { padding: 18px; max-height: calc(100vh - 20px); } } .modal-lg { max-width: 520px; } /* billing modal */ .billing-cycle-switch { display: inline-flex; gap: 4px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r); padding: 3px; margin: 14px 0 20px; font-size: 13px; } .bcs-opt { padding: 6px 14px; border-radius: 5px; color: var(--text2); cursor: pointer; } .bcs-opt.active { background: var(--accent-dim); color: var(--accent); font-weight: 600; } .bcs-save { background: var(--green-dim); color: var(--green); border-radius: 999px; padding: 1px 7px; margin-left: 5px; font-size: 11px; } .plan-row { display: flex; align-items: center; gap: 14px; padding: 14px 12px; border: 1px solid var(--border); border-radius: var(--r); margin-bottom: 10px; } .plan-row.featured { border-color: var(--accent); background: var(--accent-dim); } .plan-row-info { flex: 1; min-width: 0; } .plan-row-name { font-family: var(--display); font-size: 15px; font-weight: 700; } .plan-row-sub { font-size: 12px; color: var(--text3); margin-top: 2px; } .plan-row-price { font-size: 17px; font-weight: 700; white-space: nowrap; } .plan-row-per { font-size: 12px; color: var(--text3); font-weight: 400; } .modal-close { position: absolute; top: 14px; right: 14px; background: none; border: none; color: var(--text3); cursor: pointer; font-size: 18px; font-family: var(--mono); line-height: 1; padding: 4px; } .modal-close:hover { color: var(--text); } .modal h3 { font-family: var(--display); font-weight: 900; font-size: 18px; margin-bottom: 4px; padding-right: 36px; overflow-wrap: anywhere; } .modal .modal-sub { font-size: 13px; color: var(--text3); margin-bottom: 22px; } .modal-actions { display: flex; gap: 8px; margin-top: 20px; } /* UPDATE MODAL */ .drop-zone { border: 2px dashed var(--border2); border-radius: var(--r); padding: 32px 24px; text-align: center; cursor: pointer; transition: all 0.15s; margin-bottom: 14px; } .drop-zone:hover { border-color: var(--accent); background: var(--accent-dim); } .drop-icon { font-size: 38px; margin-bottom: 10px; } .drop-text { font-size: 14px; color: var(--text2); } .drop-text strong { color: var(--accent); } .drop-hint { font-size: 12px; color: var(--text3); margin-top: 6px; } .scan-log { background: var(--bg2); border-radius: var(--r); padding: 12px 14px; font-size: 13px; color: var(--text3); line-height: 1.7; max-height: 120px; overflow-y: auto; display: none; } .scan-log.show { display: block; } /* QR MODAL */ .qr-wrap { background: #fff; border-radius: var(--r); padding: 18px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .qr-url { font-size: 12px; color: var(--text3); word-break: break-all; line-height: 1.6; margin-bottom: 16px; } /* ===== TOAST ===== */ .toast { position: fixed; bottom: 20px; right: 20px; z-index: 9000; background: var(--surface2); border: 1px solid var(--border2); border-radius: var(--r); padding: 11px 16px; font-size: 14px; opacity: 0; transform: translateY(8px); transition: all 0.2s; pointer-events: none; max-width: 260px; box-shadow: var(--shadow); } .toast.show { opacity: 1; transform: none; } .toast.ok { border-color: rgba(0,255,136,0.3); color: var(--green); } .toast.err { border-color: rgba(255,51,85,0.3); color: var(--red); } /* ===== MOBILE ===== */ @media (max-width: 768px) { .sidebar { display: none; } .main-content { padding: 16px; } .stats-row { grid-template-columns: 1fr 1fr; } .stats-row .stat-card:last-child { grid-column: span 2; } .detail-header { flex-direction: column; } .detail-disk-name { font-size: 22px; } .header-search-wrap { display: none; } .disks-grid { grid-template-columns: 1fr; } .mobile-search-btn { display: flex !important; } } @media (max-width: 480px) { .stats-row { grid-template-columns: 1fr; } .stats-row .stat-card:last-child { grid-column: auto; } } @media (max-width: 640px) { /* Compact stat strip — scanning a QR lands here first; the point is to see the folder tree, not stare at three huge Total/Used/Free cards before it. Same layout/order as desktop, just much less vertical space per element so Folder Structure isn't pushed off-screen. */ .stats-row { grid-template-columns: repeat(3, 1fr) !important; gap: 6px !important; margin-bottom: 10px !important; } .stats-row .stat-card:last-child { grid-column: auto !important; } .stat-card { padding: 8px 6px !important; text-align: center; } .stat-label { font-size: 8px !important; margin-bottom: 2px !important; } .stat-value { font-size: 14px !important; } .usage-card { padding: 8px 12px !important; margin-bottom: 12px !important; } .usage-top { font-size: 11px !important; margin-bottom: 6px !important; } .usage-bar { height: 4px !important; } .detail-disk-name { font-size: 19px !important; } .detail-header { margin-bottom: 14px !important; } } /* Mobile search overlay */ /* Header search button */ .header-search-btn { height: 34px; box-sizing: border-box; display: flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--border2); color: var(--text2); padding: 0 14px; border-radius: 20px; font-family: var(--mono); font-size: 14px; cursor: pointer; transition: all 0.15s; } .header-search-btn:hover { border-color: var(--accent); color: var(--accent); } .header-search-label { display: inline; } @media (max-width: 480px) { .header-search-label { display: none; } } /* Narrow header — this is where the QR-scan/PIN flow lands people first, so every control has to stay reachable without horizontal scrolling instead of silently clipping off the right edge. Icon-only buttons + tighter spacing buys back enough width for everything to fit. */ .header-btn-label { display: inline; } @media (max-width: 640px) { .app-header { padding: 0 10px; gap: 6px; } .header-btn { width: 34px; padding: 0; justify-content: center; gap: 0; } .header-btn-label { display: none; } .header-user { display: none; } .header-logo { font-size: 14px; } } /* Search page */ .mobile-search-overlay { display: none; position: fixed; inset: 0; z-index: 500; background: var(--bg); flex-direction: column; } .mobile-search-overlay.open { display: flex; } .search-page-header { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--bg2); flex-shrink: 0; } .search-back-btn { background: none; border: none; color: var(--text2); font-family: var(--mono); font-size: 14px; cursor: pointer; padding: 6px 0; white-space: nowrap; flex-shrink: 0; } .search-back-btn:hover { color: var(--accent); } .search-page-input-wrap { flex: 1; position: relative; } .search-page-input { width: 100%; background: var(--surface); border: 1px solid var(--border2); color: var(--text); padding: 9px 36px 9px 34px; font-family: var(--mono); font-size: 16px; border-radius: 20px; outline: none; transition: border-color 0.15s; } .search-page-input:focus { border-color: var(--accent); } .search-clear-btn { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--text3); cursor: pointer; font-size: 14px; padding: 4px; } .search-clear-btn:hover { color: var(--text); } .search-page-body { flex: 1; overflow-y: auto; padding: 8px 0; } .search-page-hint { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 200px; color: var(--text3); font-size: 14px; gap: 10px; } .search-hint-icon { font-size: 38px; opacity: 0.3; } .search-section-title { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text3); padding: 12px 16px 6px; } .search-result-row { display: flex; align-items: center; gap: 10px; padding: 10px 16px; cursor: pointer; border-bottom: 1px solid var(--border); transition: background 0.1s; } .search-result-row:hover { background: var(--surface2); } .search-result-row:last-child { border-bottom: none; } .srr-icon { font-size: 18px; flex-shrink: 0; } .srr-main { flex: 1; min-width: 0; } .srr-name { font-size: 15px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .srr-name mark { background: rgba(0,212,255,0.2); color: var(--accent); border-radius: 2px; padding: 0 2px; } .srr-path { font-size: 12px; color: var(--text3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .srr-path mark { background: rgba(0,212,255,0.15); color: var(--accent); border-radius: 2px; } .srr-meta { font-size: 12px; color: var(--text3); flex-shrink: 0; text-align: right; } .search-no-results { padding: 40px 16px; text-align: center; color: var(--text3); font-size: 14px; } .tree-exts { display: none; } /* вимкнено на папках */ .ext-badge { font-size: 11px; padding: 2px 5px; border-radius: 3px; letter-spacing: 0.3px; font-weight: 600; white-space: nowrap; } .ext-cnt { opacity: 0.7; font-weight: 400; } .file-ext-badge { font-size: 11px; padding: 2px 6px; border-radius: 3px; font-weight: 700; white-space: nowrap; flex-shrink: 0; margin-right: 8px; letter-spacing: 0.5px; } .file-row { opacity: 0.85; } .file-row:hover { opacity: 1; } /* PIN PAD */ .pin-display { display: flex; gap: 12px; justify-content: center; margin: 28px 0 8px; } .pin-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border2); transition: all 0.15s; } .pin-dot.filled { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 8px rgba(0,212,255,0.4); } .pin-dot.error { background: var(--red); border-color: var(--red); } .pin-error { text-align: center; font-size: 14px; color: var(--red); height: 20px; margin-bottom: 20px; opacity: 0; transition: opacity 0.2s; } .pin-error.show { opacity: 1; } /* On-screen numpad — PIN entry happens mostly on a phone right after scanning a QR sticker, where the OS keyboard is inconsistent (letters first, autocorrect bar, etc). Tappable digits are the same every time. */ .numpad-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; } .numpad-btn { padding: 16px 0; font-size: 21px; font-weight: 600; font-family: var(--mono); background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r); color: var(--text); cursor: pointer; transition: all 0.1s; user-select: none; } .numpad-btn:hover { border-color: var(--border2); } .numpad-btn:active { background: var(--accent-dim); border-color: var(--accent); transform: scale(0.96); } .numpad-btn-ghost { color: var(--text3); font-size: 15px; } /* Team member management */ .team-list { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; max-height: 320px; overflow-y: auto; } .team-section-label { font-size: 13px; color: var(--text3); text-transform: uppercase; letter-spacing: .5px; margin: 18px 0 4px; } .team-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r); } .team-row-info { flex: 1; min-width: 0; } .team-row-name { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .team-row-name .you-tag { font-weight: 400; color: var(--text3); font-size: 12px; } .team-row-email { font-size: 13px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .team-role-select { font-family: var(--mono); font-size: 13px; background: var(--bg); color: var(--text2); border: 1px solid var(--border); border-radius: var(--r); padding: 6px 8px; cursor: pointer; } .team-role-select:disabled { opacity: .6; cursor: default; } .team-row-remove { background: none; border: none; color: var(--text3); cursor: pointer; font-size: 16px; padding: 4px 6px; flex-shrink: 0; } .team-row-remove:hover { color: var(--red); } .account-info-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r); padding: 12px 14px; } .account-info-label { font-size: 11px; color: var(--text3); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; } .account-info-value { font-size: 13px; color: var(--text); font-weight: 600; } .pin-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 260px; margin: 0 auto 24px; } .pin-btn { background: var(--surface); border: 1px solid var(--border2); color: var(--text); font-family: var(--display); font-size: 22px; font-weight: 700; padding: 18px; border-radius: var(--r); cursor: pointer; transition: all 0.1s; user-select: none; -webkit-user-select: none; } .pin-btn:hover { background: var(--surface2); border-color: var(--accent); color: var(--accent); } .pin-btn:active { transform: scale(0.94); background: var(--accent-dim); } .pin-btn-ghost { background: transparent; border-color: transparent; font-size: 18px; color: var(--text3); } .pin-btn-ghost:hover { color: var(--text); border-color: var(--border); } .note-delete-btn { margin-left: auto; background: none; border: none; color: var(--text3); cursor: pointer; font-size: 13px; padding: 2px 6px; border-radius: 3px; line-height: 1; transition: all 0.15s; } .note-delete-btn:hover { color: var(--red); background: var(--red-dim); } .search-more { padding: 10px 14px; text-align: center; font-size: 13px; color: var(--accent); cursor: pointer; border-top: 1px solid var(--border); } .search-more:hover { background: var(--accent-dim); } .more-menu-wrap { position: relative; } .more-menu { display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 300; background: var(--surface); border: 1px solid var(--border2); border-radius: var(--r); box-shadow: var(--shadow); min-width: 160px; overflow: hidden; } .more-menu.open { display: block; animation: fadeUp 0.15s ease; } .more-menu-item { padding: 10px 14px; font-size: 14px; color: var(--text2); cursor: pointer; transition: background 0.1s; } .more-menu-item:hover { background: var(--surface2); color: var(--text); } .more-menu-item.danger { color: var(--red); } .more-menu-item.danger:hover { background: var(--red-dim); } /* Disk type selector */ .disk-type-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .disk-type-btn { border: 1px solid var(--border); border-radius: var(--r); padding: 10px 8px; text-align: center; cursor: pointer; transition: all 0.15s; background: var(--bg2); } .disk-type-btn:hover { border-color: var(--border2); } .disk-type-btn.active { border-color: var(--accent); background: var(--accent-dim); } .dtb-icon { font-size: 20px; margin-bottom: 4px; } .dtb-label { font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 2px; } .dtb-sub { font-size: 11px; color: var(--text3); } /* Disk card type colors */ .disk-card.type-portable-hdd { border-left: 3px solid #a0714f; } .disk-card.type-portable-ssd { border-left: 3px solid #555; } .disk-card.type-desktop-hdd { border-left: 3px solid #c0392b; } .disk-card.type-usb-flash { border-left: 3px solid #2980b9; } .disk-card.type-nvme { border-left: 3px solid #8e44ad; } .disk-card.type-other { border-left: 3px solid #555; } .dc-type-badge { font-size: 11px; color: var(--text3); margin-bottom: 6px; display: flex; align-items: center; gap: 4px; } /* Custom tag (color + optional text) — set manually, overrides the drive-type border color so a person can group drives their own way (by project, client, shelf, etc.) instead of only by hardware type. */ .tag-color-grid { display: flex; flex-wrap: wrap; gap: 8px; } .tag-color-swatch { width: 28px; height: 28px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; box-sizing: border-box; transition: all 0.15s; position: relative; } .tag-color-swatch:hover { transform: scale(1.1); } .tag-color-swatch.active { border-color: var(--text); box-shadow: 0 0 0 2px var(--bg); } .tag-color-swatch.active::after { content: '✓'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 15px; text-shadow: 0 1px 2px rgba(0,0,0,0.6); } .tag-color-swatch.none-swatch { background: var(--bg2); border: 1px dashed var(--border2); display: flex; align-items: center; justify-content: center; color: var(--text3); font-size: 16px; } .dc-tag-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text2); margin-bottom: 6px; } .dc-tag-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } /* Getting-started checklist — shown until a team has scanned a drive, seen the QR work and printed the sticker. Pulled straight from the onboarding copy so first-time users get the "aha" (scan it with your phone) before we ask for anything else. */ .onboarding-card { position: relative; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r); padding: 16px 18px; margin-bottom: 18px; } .onboarding-card-close { position: absolute; top: 10px; right: 12px; background: none; border: none; color: var(--text3); cursor: pointer; font-size: 15px; padding: 4px; } .onboarding-card-close:hover { color: var(--text); } .onboarding-title { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 2px; } .onboarding-sub { font-size: 13px; color: var(--text3); margin-bottom: 12px; } .onboarding-steps { display: flex; flex-direction: column; gap: 8px; } .onboarding-step { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; } .onboarding-step-dot { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; margin-top: 1px; display: flex; align-items: center; justify-content: center; font-size: 12px; border: 1px solid var(--border2); color: var(--text3); } .onboarding-step.done .onboarding-step-dot { background: var(--green); border-color: var(--green); color: #000; } .onboarding-step.active .onboarding-step-dot { border-color: var(--accent); color: var(--accent); } .onboarding-step-text { flex: 1; } .onboarding-step.done .onboarding-step-label { color: var(--text3); text-decoration: line-through; } .onboarding-step-label { color: var(--text2); font-weight: 600; } .onboarding-step-body { color: var(--text3); font-size: 13px; margin-top: 1px; } /* Compact form — once at least one step is done, the card shrinks to a thin strip naming only what's left, instead of a tall block re-showing finished steps struck through on every visit. */ .onboarding-card-compact { padding: 10px 14px; margin-bottom: 12px; } .onboarding-card-compact .onboarding-title { margin-bottom: 0; font-size: 13px; display: flex; align-items: center; gap: 8px; } .onboarding-progress { font-size: 11px; color: var(--text3); font-weight: 400; } .onboarding-steps-compact { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 6px; } .onboarding-step-compact { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text3); } .onboarding-step-compact .onboarding-step-dot { width: 12px; height: 12px; margin-top: 0; } .onboarding-step-compact.active { color: var(--text2); } button.onboarding-step-compact { background: none; border: none; padding: 0; font: inherit; cursor: pointer; } button.onboarding-step-compact:hover { color: var(--accent); } .onboarding-cta { margin-top: 8px; } .onboarding-note { margin-top: 12px; padding: 8px 10px; border: 1px dashed var(--border2); border-radius: var(--r); font-size: 12px; color: var(--text3); } .onboarding-note b { color: var(--text2); } .onboarding-step-compact.active .onboarding-step-dot { border-color: var(--accent); } /* Health card — мінімальний індикатор */ .health-card { display: flex; align-items: center; gap: 8px; padding: 8px 18px; margin-bottom: 16px; border-left: 3px solid var(--border2); font-size: 13px; color: var(--text3); } .health-card.ok { border-left-color: var(--green); } .health-card.warning { border-left-color: var(--yellow); } .health-card.critical { border-left-color: var(--red); } .health-icon { font-size: 16px; } .health-main { flex: 1; } .health-label { color: var(--text2); } .health-meta { font-size: 12px; margin-top: 1px; } .health-updated { font-size: 12px; color: var(--text3); } /* Health modal */ .health-btn-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; } .health-btn { border: 1px solid var(--border); border-radius: var(--r); padding: 14px 8px; text-align: center; cursor: pointer; transition: all 0.15s; background: var(--bg2); } .health-btn:hover { border-color: var(--border2); } .health-btn.active { border-color: var(--accent); background: var(--accent-dim); } .health-btn-icon { font-size: 24px; margin-bottom: 6px; } .health-btn-label { font-size: 13px; color: var(--text2); } .qr-format-toggle { display: flex; gap: 8px; margin-bottom: 14px; } .qr-fmt-btn { flex: 1; padding: 7px 0; font-family: var(--mono); font-size: 13px; background: var(--bg2); border: 1px solid var(--border); color: var(--text2); border-radius: var(--r); cursor: pointer; transition: all 0.15s; } .qr-fmt-btn:hover { border-color: var(--border2); } .qr-fmt-btn.active { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); } /* Print */ @media print { body * { visibility: hidden !important; } #print-area, #print-area * { visibility: visible !important; } #print-area { position: fixed !important; left: 0 !important; top: 0 !important; width: 50mm !important; height: 50mm !important; margin: 0 !important; padding: 0 !important; border: none !important; } @page { size: 50mm 50mm; margin: 0; } } .print-hint { margin-top: 16px; padding: 12px 14px; background: var(--bg2); border-radius: var(--r); border: 1px solid var(--border); } .print-hint-title { font-size: 12px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 10px; } .print-hint-steps { display: flex; flex-direction: column; gap: 7px; } .print-hint-step { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--text2); line-height: 1.5; } .phs-num { flex-shrink: 0; width: 16px; height: 16px; background: var(--surface2); border-radius: 50%; font-size: 11px; font-weight: 700; color: var(--text3); display: flex; align-items: center; justify-content: center; margin-top: 1px; } .print-hint-step a { color: var(--accent); text-decoration: none; } .print-hint-step a:hover { text-decoration: underline; } .print-hint-step strong { color: var(--text); } .printer-buy-callout { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding: 10px 14px; border-radius: var(--r); background: var(--accent-dim); border: 1px solid var(--accent); text-decoration: none; color: var(--text); font-size: 12px; font-weight: 600; transition: filter 0.15s; } .printer-buy-callout:hover { filter: brightness(1.1); } .printer-buy-callout strong { color: var(--accent); font-size: 13px; } /* scrollbar */ ::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; } /* brand mark */ .header-logo{display:inline-flex; align-items:center; gap:9px;} .header-logo .logo-mark{width:26px; height:26px; border-radius:6px; flex:none;} .login-logo{display:flex; flex-direction:column; align-items:center; gap:12px;} .login-logo .logo-mark{width:54px; height:54px; border-radius:13px;} /* tech theme gets the cyan variant of the mark; favicon/emails keep the warm one */ :root[data-theme="tech"] img.logo-mark{content:url("brand/mark-tech.svg?v=1");} /* printer picks in the QR modal (affiliate links, no single-brand push) */ .printer-picks{display:flex; gap:8px; align-items:stretch; margin-top:12px; flex-wrap:wrap;} .printer-picks a{display:flex; align-items:center; gap:8px; padding:6px 10px 6px 6px; border:1px solid var(--border); border-radius:8px; color:var(--text2); font-size:12px; text-decoration:none;} .printer-picks a:hover{border-color:var(--accent); color:var(--text);} .printer-picks img{width:30px; height:30px; object-fit:contain; background:#fff; border-radius:5px;} .printer-picks .pp-more{color:var(--accent); border-style:dashed;} .print-hint-step span:not(.phs-num){flex:1;} .header-logo .logo-txt{font-weight:inherit;}