:root{--brand-primary: #2563eb;--brand-accent: #7c3aed;--bg: #0d1117;--panel: #161b25;--panel-2: #1c2330;--border: #262f3d;--text: #e6edf6;--muted: #93a1b5;--danger: #e5534b;--ok: #3fb950;--radius: 12px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{background:var(--bg);color:var(--text);font-size:15px;line-height:1.5}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}.app{display:flex;min-height:100%}.sidebar{width:240px;background:linear-gradient(180deg,var(--panel) 0%,#10151d 100%);border-right:1px solid var(--border);padding:22px 16px;display:flex;flex-direction:column;gap:6px;position:sticky;top:0;height:100vh}.brand-block{display:flex;align-items:center;gap:10px;padding:4px 8px 20px}.brand-logo{width:34px;height:34px;border-radius:9px;flex:none;background:linear-gradient(135deg,var(--brand-primary),var(--brand-accent));display:grid;place-items:center;font-weight:800;color:#fff;font-size:17px}.brand-name{font-weight:700;font-size:15px;letter-spacing:.2px}.brand-sub{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em}.nav-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:9px;color:var(--muted);font-weight:500;transition:.15s}.nav-item:hover{background:var(--panel-2);color:var(--text)}.nav-item.active{background:color-mix(in srgb,var(--brand-primary) 22%,transparent);color:#fff}.sidebar .spacer{flex:1}.userbox{border-top:1px solid var(--border);padding-top:14px;font-size:13px;color:var(--muted)}.userbox .logout{color:var(--muted);font-size:12px;margin-top:6px}.userbox .logout:hover{color:var(--danger)}.main{flex:1;min-width:0}.topbar{height:62px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 28px;background:#0d1117b3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);position:sticky;top:0;z-index:5}.topbar h1{font-size:19px;font-weight:650}.content{padding:28px;max-width:1200px}.btn{background:var(--brand-primary);color:#fff;border:none;padding:10px 16px;border-radius:9px;font-weight:600;transition:.15s;display:inline-flex;align-items:center;gap:8px}.btn:hover{filter:brightness(1.08)}.btn.ghost{background:var(--panel-2);color:var(--text);border:1px solid var(--border)}.btn.ghost:hover{border-color:var(--brand-primary)}.btn.danger{background:transparent;color:var(--danger);border:1px solid transparent;padding:6px 8px}.btn.danger:hover{background:color-mix(in srgb,var(--danger) 16%,transparent)}.btn.sm{padding:6px 12px;font-size:13px}.input,.select{width:100%;background:var(--panel);border:1px solid var(--border);color:var(--text);padding:10px 12px;border-radius:9px;font:inherit;outline:none}.input:focus,.select:focus{border-color:var(--brand-primary)}label.field{display:block;margin-bottom:14px}label.field span{display:block;font-size:12px;color:var(--muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:.08em}.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius)}.grid{display:grid;gap:16px}.grid.cols{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}.muted{color:var(--muted)}.row{display:flex;align-items:center;gap:12px}.between{justify-content:space-between}.badge{font-size:11px;padding:3px 9px;border-radius:20px;background:var(--panel-2);color:var(--muted);border:1px solid var(--border)}.badge.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,var(--border))}.badge.off{color:var(--muted)}.pagehead{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}.pagehead p{color:var(--muted);margin-top:3px}.group-card{padding:18px;transition:.15s;cursor:pointer}.group-card:hover{border-color:var(--brand-primary);transform:translateY(-2px)}.group-card h3{font-size:16px;margin-bottom:4px}.group-card .meta{color:var(--muted);font-size:13px;margin-top:12px;display:flex;gap:14px}.dropzone{border:2px dashed var(--border);border-radius:var(--radius);padding:34px;text-align:center;color:var(--muted);transition:.15s;cursor:pointer;background:var(--panel)}.dropzone:hover,.dropzone.drag{border-color:var(--brand-primary);background:var(--panel-2);color:var(--text)}.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}.media-tile{position:relative;border-radius:10px;overflow:hidden;border:1px solid var(--border);background:#000;aspect-ratio:16/9}.media-tile img,.media-tile video{width:100%;height:100%;object-fit:cover;display:block}.media-tile .ord{position:absolute;top:6px;left:6px;background:#0009;color:#fff;font-size:11px;padding:2px 7px;border-radius:20px}.media-tile .del{position:absolute;top:6px;right:6px;background:#0000008c;color:#fff;border:none;width:24px;height:24px;border-radius:50%;opacity:0;transition:.15s}.media-tile:hover .del{opacity:1}.media-tile .del:hover{background:var(--danger)}.login-wrap{display:grid;place-items:center;min-height:100vh;padding:20px;background:radial-gradient(120% 120% at 50% 0%,color-mix(in srgb,var(--brand-primary) 18%,var(--bg)) 0%,var(--bg) 55%)}.login-card{width:100%;max-width:380px;padding:34px}.login-card .brand-block{justify-content:center;padding-bottom:26px}.login-card h2{text-align:center;margin-bottom:4px}.login-card .err{color:var(--danger);font-size:13px;margin:8px 0;min-height:18px}.login-card .hint{text-align:center;color:var(--muted);font-size:12px;margin-top:16px}.screen-row{padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:16px}.screen-row+.screen-row{border-top:1px solid var(--border)}.token-box{font-family:ui-monospace,Menlo,monospace;font-size:12px;background:var(--panel-2);padding:8px 10px;border-radius:8px;border:1px solid var(--border);word-break:break-all}.board-section-label{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin:26px 0 12px}.folder-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:10px}.fchip{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:20px;border:1px solid var(--border);background:var(--panel);color:var(--muted);cursor:pointer;font-size:13px;font-weight:500;transition:.12s}.fchip:hover{color:var(--text);border-color:var(--brand-primary)}.fchip.active{background:color-mix(in srgb,var(--brand-primary) 22%,transparent);color:#fff;border-color:transparent}.fchip.drop{border-color:var(--brand-accent);background:color-mix(in srgb,var(--brand-accent) 20%,transparent);color:#fff;box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-accent) 25%,transparent)}.fchip .cnt{opacity:.55;font-size:11px}.fchip .fx{margin-left:1px;opacity:0;transition:.12s;font-size:12px}.fchip:hover .fx{opacity:.55}.fchip .fx:hover{opacity:1;color:var(--danger)}.fchip.newf{border-style:dashed;color:var(--brand-primary)}.storage-meter{min-width:230px}.storage-meter .lbl{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:6px}.storage-meter .lbl b{color:var(--text);font-weight:600}.storage-meter .bar{height:8px;border-radius:6px;background:var(--panel-2);overflow:hidden;border:1px solid var(--border)}.storage-meter .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--brand-primary),var(--brand-accent));transition:width .3s}.storage-meter .bar i.over{background:linear-gradient(90deg,#e0a03a,var(--danger))}.storage-meter .over{color:var(--danger)}.breadcrumb{display:flex;align-items:center;gap:4px;font-size:14px;margin-bottom:12px;flex-wrap:wrap}.breadcrumb .crumb{color:var(--muted);cursor:pointer;padding:5px 9px;border-radius:7px;transition:.12s}.breadcrumb .crumb:hover{color:var(--text);background:var(--panel-2)}.breadcrumb .crumb.here{color:var(--text);font-weight:600}.breadcrumb .crumb.drop{background:color-mix(in srgb,var(--brand-accent) 22%,transparent);color:#fff}.breadcrumb .sep{color:var(--muted);opacity:.45}.subfolder-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}.subfolder{display:flex;align-items:center;gap:9px;padding:11px 14px;border:1px solid var(--border);border-radius:10px;background:var(--panel);cursor:pointer;transition:.12s}.subfolder:hover{border-color:var(--brand-primary);transform:translateY(-1px)}.subfolder.drop{border-color:var(--brand-accent);background:color-mix(in srgb,var(--brand-accent) 14%,var(--panel));box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-accent) 25%,transparent)}.subfolder .fico2{font-size:22px}.subfolder .fnm{font-weight:600;font-size:14px}.subfolder .fsub{font-size:11px;color:var(--muted)}.subfolder .fx2{opacity:0;color:var(--muted);margin-left:4px;font-size:12px}.subfolder:hover .fx2{opacity:.55}.subfolder .fx2:hover{opacity:1;color:var(--danger)}.subfolder.newf2{border-style:dashed;color:var(--brand-primary)}.library-strip{display:flex;gap:12px;overflow-x:auto;padding:6px 2px 14px;scrollbar-width:thin;min-height:108px}.lib-thumb{flex:none;width:150px;height:90px;border-radius:10px;overflow:hidden;position:relative;border:1px solid var(--border);background:#000;cursor:grab;transition:.12s}.lib-thumb:active{cursor:grabbing}.lib-thumb:hover{border-color:var(--brand-primary);transform:translateY(-2px)}.lib-thumb img,.lib-thumb video{width:100%;height:100%;object-fit:cover;pointer-events:none}.lib-thumb .used{position:absolute;bottom:6px;left:6px;font-size:10px;background:#0009;color:#cbd5e1;padding:2px 7px;border-radius:20px}.lib-thumb .del{position:absolute;top:5px;right:5px;width:22px;height:22px;border-radius:50%;border:none;background:#0009;color:#fff;opacity:0;transition:.12s}.lib-thumb:hover .del{opacity:1}.lib-thumb .del:hover{background:var(--danger)}.lib-thumb .vid-badge{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;pointer-events:none;color:#fff;font-size:20px;text-shadow:0 1px 6px #000}.lib-upload{flex:none;width:150px;height:90px;border-radius:10px;border:2px dashed var(--border);display:grid;place-items:center;text-align:center;color:var(--muted);cursor:pointer;font-size:13px;transition:.12s}.lib-upload:hover{border-color:var(--brand-primary);color:var(--text)}.folder-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}.folder{border:1px solid var(--border);border-radius:var(--radius);padding:16px;cursor:pointer;background:var(--panel);transition:.12s;position:relative}.folder:hover{border-color:var(--brand-primary)}.folder.drop{border-color:var(--brand-accent);background:color-mix(in srgb,var(--brand-accent) 12%,var(--panel));box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-accent) 30%,transparent)}.folder .fhead{display:flex;align-items:center;gap:10px}.folder .fico{font-size:26px}.folder .fname{font-weight:650}.folder .fdot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok)}.folder .fdot.off{background:#7d8794;box-shadow:none}.folder .fcount{color:var(--muted);font-size:13px;margin-top:2px}.folder .peek{display:flex;gap:5px;margin-top:12px}.folder .peek span{width:40px;height:26px;border-radius:5px;overflow:hidden;background:#000;border:1px solid var(--border)}.folder .peek img,.folder .peek video{width:100%;height:100%;object-fit:cover}.folder .peek .more{display:grid;place-items:center;color:var(--muted);font-size:11px}.folder .drophint{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;color:var(--brand-accent);font-weight:600;pointer-events:none;opacity:0}.folder.drop .drophint{opacity:1}.folder.drop .fhead,.folder.drop .peek{opacity:.15}.assign-list{display:flex;flex-direction:column;gap:8px;max-height:50vh;overflow-y:auto}.assign-row{display:flex;align-items:center;gap:10px;padding:6px;border:1px solid var(--border);border-radius:8px;background:var(--panel-2)}.assign-row .th{width:64px;height:38px;border-radius:5px;overflow:hidden;background:#000;flex:none}.assign-row .th img,.assign-row .th video{width:100%;height:100%;object-fit:cover}.assign-row .nm{flex:1;min-width:0;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.assign-row .mv{background:var(--panel);border:1px solid var(--border);color:var(--muted);width:26px;height:26px;border-radius:6px}.assign-row .mv:hover{color:var(--text);border-color:var(--brand-primary)}.screen-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}.screen-tile{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--panel);transition:.15s}.screen-tile:hover{border-color:var(--brand-primary)}.screen-preview{position:relative;aspect-ratio:16/9;background:#000;display:grid;place-items:center;overflow:hidden}.screen-preview img,.screen-preview video{width:100%;height:100%;object-fit:contain}.screen-preview .empty{color:var(--muted);font-size:13px;text-align:center;padding:12px}.screen-preview .live-dot{position:absolute;top:10px;left:10px;display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px;background:#0000008c;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.screen-preview .live-dot i{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok)}.screen-preview .live-dot.off i{background:#7d8794;box-shadow:none}.screen-preview .live-dot.off{color:var(--muted)}.screen-preview .guess-tag{position:absolute;bottom:10px;right:10px;font-size:10px;color:#cbd5e1;background:#00000080;padding:2px 7px;border-radius:20px}.screen-tile .tile-foot{padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px}.screen-tile .tile-foot .nm{font-weight:650}.screen-tile .tile-foot .sub{font-size:12px;color:var(--muted);margin-top:2px}.play-badge{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;pointer-events:none}.play-badge span{width:46px;height:46px;border-radius:50%;background:#00000080;color:#fff;display:grid;place-items:center;font-size:18px}.spinner{width:30px;height:30px;border:3px solid var(--border);border-top-color:var(--brand-primary);border-radius:50%;animation:spin .8s linear infinite;margin:40px auto}@keyframes spin{to{transform:rotate(360deg)}}.modal-back{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:grid;place-items:center;z-index:50;padding:20px}.modal{width:100%;max-width:440px;padding:26px}.modal h3{margin-bottom:16px}
