:root{--fg: #1e1b4b;--muted: #6b7280;--border: #e5e7f5;--border2: #c7d2fe;--secondary: #eef2ff;--accent: #4f46e5;--accent2: #6366f1;--violet: #8b5cf6;--bg: #f6f5fc;--card: #ffffff;--shadow: 0 1px 3px rgba(30, 27, 75, .06);--shadow-lg: 0 8px 28px rgba(30, 27, 75, .12)}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased}button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}input{font:inherit}a{color:inherit;text-decoration:none}.center{min-height:100vh;display:flex;align-items:center;justify-content:center}.spinner{width:28px;height:28px;border:3px solid var(--border2);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.login-card{width:420px;max-width:92vw;background:var(--card);border-radius:18px;overflow:hidden;box-shadow:var(--shadow-lg)}.login-head{background:linear-gradient(135deg,#6366f1,#8b5cf6);padding:34px 32px;text-align:center;color:#fff}.login-badge{width:52px;height:52px;margin:0 auto 12px;display:block}.login-head h1{font-size:21px}.login-head p{font-size:13px;opacity:.9;margin-top:6px}.login-body{padding:28px 32px 32px}.label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:8px}.field{width:100%;padding:12px 14px;border:1px solid var(--border2);border-radius:11px;outline:none;font-size:14px;margin-bottom:12px}.field:focus{border-color:var(--accent)}.field.code{text-align:center;letter-spacing:.4em;font-size:22px;font-weight:700}.btn{width:100%;padding:12px;border-radius:11px;background:var(--fg);color:#fff;font-weight:600;font-size:14px;transition:opacity .15s}.btn:hover{opacity:.92}.btn:disabled{opacity:.5;cursor:default}.btn-link{color:var(--accent);font-size:12px;display:block;text-align:center;margin-top:12px}.err{color:#dc2626;font-size:12px;text-align:center;margin-top:12px}.hint{color:var(--muted);font-size:12px;text-align:center;margin-top:12px}.app{display:flex;flex-direction:column;height:100vh}.topbar{height:56px;flex-shrink:0;background:linear-gradient(135deg,#6366f1,#8b5cf6);display:flex;align-items:center;padding:0 18px;gap:16px;color:#fff}.brand{font-weight:700;font-size:16px;display:flex;align-items:center;gap:9px}.brand img{width:26px;height:26px}.search{margin-left:8px;flex:1;max-width:460px;position:relative}.search input{width:100%;background:#ffffff2e;border:0;color:#fff;padding:8px 14px 8px 34px;border-radius:9px;font-size:13px;outline:none}.search input::placeholder{color:#ffffffb3}.search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);opacity:.8}.topbar .right{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:13px}.topbar .email{opacity:.9}.signout{background:#ffffff38;padding:6px 12px;border-radius:8px;font-weight:500}.signout:hover{background:#ffffff52}.body{flex:1;display:flex;min-height:0}.sidebar{width:232px;flex-shrink:0;background:var(--card);border-right:1px solid var(--border);padding:16px 12px;overflow-y:auto}.sb-section{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:18px 10px 6px}.sb-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:8px 10px;border-radius:9px;font-size:13.5px;color:var(--fg);margin-bottom:1px;transition:background .12s}.sb-item:hover{background:var(--secondary)}.sb-item.active{background:var(--accent);color:#fff}.sb-item .ic{width:16px;display:inline-flex;opacity:.8}.sb-item.active .ic{opacity:1}.sb-item .cnt{margin-left:auto;font-size:11px;opacity:.65}.sb-empty{font-size:12px;color:var(--muted);padding:6px 10px}.main{flex:1;overflow-y:auto;padding:26px 32px 60px}.page-head{display:flex;align-items:baseline;gap:10px;margin-bottom:20px}.page-head h1{font-size:22px}.page-head .sub{font-size:13px;color:var(--muted)}.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:26px}.stat{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px 18px}.stat .n{font-size:26px;font-weight:700}.stat .l{font-size:12px;color:var(--muted);margin-top:2px}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}.card{background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden;text-align:left;transition:box-shadow .15s,transform .15s,border-color .15s;display:flex;flex-direction:column}.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px);border-color:var(--border2)}.card .thumb{aspect-ratio:16 / 10;background:linear-gradient(135deg,#eef2ff,#e0e7ff);border-bottom:1px solid var(--border);overflow:hidden;display:flex;align-items:center;justify-content:center}.card .thumb img{width:100%;height:100%;object-fit:cover;object-position:top}.card .thumb .ph{opacity:.5}.card .body{padding:13px 15px 15px;flex:1}.card .title{font-weight:600;font-size:14px;line-height:1.35;margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.card .meta{font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:7px;flex-wrap:wrap}.card .pill{font-size:10px;font-weight:600;color:var(--accent);background:var(--secondary);padding:2px 8px;border-radius:999px}.dot{width:3px;height:3px;border-radius:50%;background:var(--border2)}.empty{max-width:480px;margin:56px auto;text-align:center}.empty img{width:84px;height:84px;margin-bottom:16px}.empty h2{font-size:19px;margin-bottom:8px}.empty p{font-size:14px;color:var(--muted);line-height:1.6}.empty .howto{margin-top:22px;text-align:left;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px 20px}.empty .howto h3{font-size:13px;margin-bottom:12px}.empty .howto ol{margin:0;padding-left:18px;font-size:13px;color:var(--fg);line-height:1.9}.empty .howto b{color:var(--accent)}.viewer-wrap{max-width:780px;margin:0 auto;padding:26px 24px 90px}.back{color:var(--accent);font-size:13px;margin-bottom:18px;display:inline-flex;gap:6px;align-items:center}.back:hover{text-decoration:underline}.viewer-wrap h1{font-size:27px;margin-bottom:6px}.viewer-meta{font-size:13px;color:var(--muted);margin-bottom:30px}.step{display:flex;gap:16px;padding-top:22px;margin-bottom:26px;border-top:2px solid var(--border)}.step .num{font-size:26px;font-weight:700;color:#818cf8;min-width:42px}.step .stbody{flex:1;min-width:0}.step .desc{font-size:15px;line-height:1.6}.step img{max-width:100%;border-radius:10px;border:1px solid var(--border);margin-top:14px;box-shadow:var(--shadow)}.ts-sec{margin-bottom:34px;max-width:780px}.ts-h{font-size:15px;margin-bottom:12px}.ts-card{background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden}.ts-row{display:flex;align-items:center;gap:14px;padding:12px 16px;border-bottom:1px solid var(--border)}.ts-row:last-child{border-bottom:0}.ts-who{width:190px;flex-shrink:0}.ts-name{font-size:13.5px;font-weight:600}.ts-email{font-size:11.5px;color:var(--muted)}.ts-groups{flex:1;display:flex;flex-wrap:wrap;gap:6px}.ts-select{font-size:12.5px;padding:6px 8px;border:1px solid var(--border2);border-radius:8px;background:var(--card);color:var(--fg)}.ts-hint{font-size:12px;color:var(--muted);margin-top:10px;line-height:1.55}.ts-muted{font-size:12.5px;color:var(--muted)}.ts-addrow{display:flex;gap:8px;margin-bottom:12px}.btn-sm{background:var(--fg);color:#fff;padding:9px 16px;border-radius:9px;font-weight:600;font-size:13px;white-space:nowrap}.btn-sm:hover{opacity:.92}.ts-chips{display:flex;flex-wrap:wrap;gap:8px}.chip{font-size:12px;padding:5px 11px;border-radius:999px;background:var(--secondary);color:var(--fg);border:1px solid transparent;transition:background .12s,border-color .12s}.chip:hover{border-color:var(--border2)}.chip.on{background:var(--accent);color:#fff}.chip.big{font-size:13px;padding:7px 14px;display:inline-flex;align-items:center;gap:7px}.chip .x{color:inherit;opacity:.7;font-size:16px;line-height:1}.chip .x:hover{opacity:1}.ts-folders{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px}.ts-folders .ts-card{padding:14px 16px}.ts-fname{font-weight:600;font-size:13.5px;margin-bottom:10px}.ts-grow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:4px 0;font-size:13px}.ts-remove{font-size:12px;color:#dc2626;padding:5px 8px;border-radius:7px;white-space:nowrap}.ts-remove:hover{background:#fef2f2}.ts-you{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--accent);background:var(--secondary);padding:1px 6px;border-radius:999px;margin-left:7px;vertical-align:middle}