:root{--bg: #0a0d14;--bg-soft: #0f131c;--surface: #131926;--surface-2: #1a2233;--surface-3: #212b3f;--border: #243049;--border-soft: #1b2436;--text: #e8eefb;--text-dim: #9aabc4;--text-mute: #6b7c96;--primary: #4f8cff;--primary-hover: #6b9dff;--accent: #22d3ee;--success: #34d399;--danger: #f87171;--public: #a78bfa;--radius: 14px;--radius-sm: 9px;--shadow: 0 12px 34px rgba(0, 0, 0, .45);--font: "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, -apple-system, "Helvetica Neue", sans-serif;--mono: "JetBrains Mono", "Cascadia Code", Consolas, "SF Mono", Menlo, monospace}*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased}body{background-image:radial-gradient(1100px 520px at 12% -8%,rgba(79,140,255,.14),transparent 62%),radial-gradient(900px 480px at 92% 0%,rgba(34,211,238,.1),transparent 58%);background-repeat:no-repeat}button,input,select,textarea{font-family:inherit;font-size:14px}code{font-family:var(--mono);font-size:12px}.boot{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--text-dim)}.boot-logo{font-size:34px;font-weight:800;letter-spacing:6px;background:linear-gradient(100deg,var(--accent),var(--primary));-webkit-background-clip:text;background-clip:text;color:transparent}.app{max-width:1320px;margin:0 auto;padding:22px 22px 60px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-bottom:18px}.brand{display:flex;align-items:center;gap:13px}.brand-mark{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(135deg,var(--accent),var(--primary));color:#06101f;font-size:18px;font-weight:700;box-shadow:0 6px 18px #4f8cff59}.brand-name{margin:0;font-size:21px;letter-spacing:3px;font-weight:800}.brand-sub{margin:2px 0 0;font-size:12px;color:var(--text-mute)}.topbar-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.mode-badge{font-size:12px;padding:5px 11px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--text-dim)}.mode-canister{border-color:#34d39966;color:var(--success);background:#34d39917}.principal{font-family:var(--mono);font-size:12px;color:var(--text-dim);background:var(--surface);border:1px solid var(--border);padding:5px 10px;border-radius:999px}.layout{display:grid;grid-template-columns:minmax(0,1.38fr) minmax(340px,1fr);gap:20px;align-items:start}.col-left{position:sticky;top:18px}.col-right{display:flex;flex-direction:column;gap:20px;min-width:0}@media (max-width: 1080px){.layout{grid-template-columns:1fr}.col-left{position:static}}.card{background:linear-gradient(180deg,var(--surface),var(--bg-soft));border:1px solid var(--border-soft);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}.card-head h3{margin:0;font-size:15px;letter-spacing:.5px}.card-head-actions{display:flex;gap:8px}.player-panel{background:linear-gradient(180deg,var(--surface),var(--bg-soft));border:1px solid var(--border-soft);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}.player-stage{position:relative;width:100%;aspect-ratio:16 / 9;background:#000}.player-video{width:100%;height:100%;display:block;background:#000}.player-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:linear-gradient(160deg,#0c1220,#060a12);color:var(--text-mute);text-align:center;padding:20px}.player-placeholder-icon{width:64px;height:64px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--border);font-size:22px;color:var(--accent);margin-bottom:6px}.player-placeholder-title{margin:0;font-size:15px;color:var(--text-dim)}.player-placeholder-sub{margin:0;font-size:12.5px}.player-overlay{position:absolute;left:12px;bottom:12px;font-size:12px;padding:5px 11px;border-radius:999px;background:#0a0d14d1;border:1px solid var(--border);color:var(--text-dim)}.player-error{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;background:#f871711a;border-top:1px solid rgba(248,113,113,.28);color:#ffc9c9;font-size:13px}.player-error-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.player-meta{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:14px 16px 10px;flex-wrap:wrap}.player-meta-main{min-width:0;flex:1}.player-title{margin:0;font-size:16px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-note{margin:5px 0 0;font-size:12.5px;color:var(--text-mute)}.player-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}.player-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.player-url{display:flex;align-items:center;gap:8px;padding:0 16px 14px;color:var(--text-mute)}.player-url code{color:var(--text-mute);overflow-x:auto;white-space:nowrap;min-width:0}.add-form .field,.field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;min-width:0}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media (max-width: 560px){.field-row{grid-template-columns:1fr}}.field-label{font-size:12.5px;color:var(--text-dim);display:flex;align-items:center;gap:6px}.field-label em{color:var(--danger);font-style:normal}.field-hint{font-size:11.5px;color:var(--text-mute)}.field-hint.inline{display:block;margin-top:3px;font-style:normal}.input,.select,.textarea{width:100%;background:#0d131f;border:1px solid var(--border);color:var(--text);border-radius:var(--radius-sm);padding:10px 12px;outline:none;transition:border-color .15s,box-shadow .15s}.input::placeholder,.textarea::placeholder{color:#4d5c74}.input:focus,.select:focus,.textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px #4f8cff29}.textarea{resize:vertical;font-family:var(--mono);font-size:12.5px;line-height:1.6;margin-bottom:12px}.select-sm{width:auto;padding:6px 9px;font-size:12.5px}.switch-row{display:flex;align-items:flex-start;gap:9px;font-size:13px;color:var(--text-dim);cursor:pointer;margin:4px 0 14px}.switch-row.inline{margin:0}.switch{appearance:none;width:38px;height:21px;border-radius:999px;background:#263149;position:relative;cursor:pointer;flex:0 0 auto;margin-top:1px;transition:background .18s;border:none}.switch:after{content:"";position:absolute;top:3px;left:3px;width:15px;height:15px;border-radius:50%;background:#7b8ca6;transition:transform .18s,background .18s}.switch:checked{background:#4f8cff59}.switch:checked:after{transform:translate(17px);background:var(--primary)}.form-actions{display:flex;gap:10px;margin-top:6px}.form-error{background:#f871711a;border:1px solid rgba(248,113,113,.3);color:#ffc9c9;padding:9px 12px;border-radius:var(--radius-sm);font-size:12.5px;margin-bottom:12px}.form-tip{font-size:12.5px;color:var(--text-mute);margin-bottom:10px}.btn{border:1px solid transparent;border-radius:var(--radius-sm);padding:10px 16px;font-size:13.5px;font-weight:600;cursor:pointer;transition:transform .12s,background .15s,border-color .15s,opacity .15s;white-space:nowrap}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-primary{background:linear-gradient(135deg,var(--primary),#6f6bff);color:#fff;box-shadow:0 5px 16px #4f8cff4d}.btn-primary:hover:not(:disabled){background:linear-gradient(135deg,var(--primary-hover),#837fff)}.btn-ghost{background:var(--surface-2);border-color:var(--border);color:var(--text-dim)}.btn-ghost:hover:not(:disabled){background:var(--surface-3);color:var(--text)}.btn-danger{background:#f871711f;border-color:#f8717159;color:#ff9d9d}.btn-danger:hover:not(:disabled){background:#f8717138}.btn-active{background:#4f8cff29;border-color:#4f8cff80;color:#a8c7ff}.btn-active:hover:not(:disabled){background:#4f8cff3d;color:#cfe0ff}.btn-sm{padding:7px 12px;font-size:12.5px;border-radius:8px}.tag{font-size:11.5px;padding:2.5px 8px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);color:var(--text-dim)}.tag-owner{color:var(--accent);border-color:#22d3ee4d;background:#22d3ee14}.tag-dim{color:var(--text-mute)}.player-url-badge{flex-shrink:0;color:var(--accent);border-color:#22d3ee4d;background:#22d3ee14}.player-headers{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;padding:12px 16px 14px;border-top:1px solid var(--border);background:var(--surface-2)}.player-headers .field{margin-bottom:0}.player-headers .input{font-size:12.5px;padding:8px 10px}.player-headers-hint{grid-column:1 / -1;margin:0;font-size:12px;line-height:1.65;color:var(--text-mute)}.player-headers-hint strong{color:#ffc9c9}.player-headers-hint code{color:var(--accent)}@media (max-width: 760px){.player-headers{grid-template-columns:1fr}}.badge{font-size:11px;padding:2px 8px;border-radius:999px;font-weight:600}.badge-public{background:#a78bfa24;color:var(--public);border:1px solid rgba(167,139,250,.34)}.badge-playing{background:#34d39924;color:var(--success);border:1px solid rgba(52,211,153,.34)}.tabs{display:flex;gap:4px;background:var(--bg-soft);border:1px solid var(--border-soft);padding:4px;border-radius:10px}.tab{background:transparent;border:none;color:var(--text-mute);padding:7px 13px;border-radius:7px;cursor:pointer;font-size:13px;font-weight:600;display:flex;align-items:center;gap:6px;transition:background .15s,color .15s}.tab:hover{color:var(--text-dim)}.tab.is-active{background:var(--surface-3);color:var(--text)}.tab-count{font-size:11px;background:var(--surface-3);color:var(--text-mute);border-radius:999px;padding:1px 7px}.tab.is-active .tab-count{background:var(--primary);color:#fff}.search-row{margin-bottom:12px}.pl-list{display:flex;flex-direction:column;gap:10px;max-height:620px;overflow-y:auto;padding-right:4px}.pl-list::-webkit-scrollbar{width:8px}.pl-list::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:8px}.pl-card{border:1px solid var(--border-soft);background:var(--surface);border-radius:var(--radius-sm);padding:13px 14px;display:flex;flex-direction:column;gap:11px;transition:border-color .15s,background .15s}.pl-card:hover{border-color:var(--border)}.pl-card.is-active{border-color:#34d39980;background:linear-gradient(180deg,rgba(52,211,153,.06),var(--surface))}.pl-card-title-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.pl-card-title{margin:0;font-size:14px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}.pl-card-url{font-size:12px;color:var(--text-mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;gap:7px;align-items:center}.pl-host{flex:0 0 auto;font-size:11px;padding:1px 7px;border-radius:5px;background:var(--surface-2);border:1px solid var(--border);color:var(--accent)}.pl-card-url code{overflow:hidden;text-overflow:ellipsis;color:var(--text-mute)}.pl-card-note{margin:0;font-size:12.5px;color:var(--text-dim)}.pl-card-tags{display:flex;flex-wrap:wrap;gap:6px}.pl-card-actions{display:flex;gap:7px;flex-wrap:wrap}.empty{text-align:center;padding:34px 16px;color:var(--text-mute);font-size:13px;display:flex;flex-direction:column;align-items:center;gap:12px}.empty p{margin:0;line-height:1.7}.notice,.share-banner{border-radius:var(--radius-sm);padding:12px 15px;font-size:13px;margin-bottom:16px;line-height:1.65}.notice{background:#4f8cff17;border:1px solid rgba(79,140,255,.26);color:#bcd3ff}.notice code{background:#ffffff12;padding:1px 6px;border-radius:5px}.share-banner{background:#22d3ee17;border:1px solid rgba(34,211,238,.3);color:#b6f1fb;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}.share-banner-actions{display:flex;gap:8px}.modal-backdrop{position:fixed;inset:0;background:#04070dc7;backdrop-filter:blur(4px);display:grid;place-items:center;padding:20px;z-index:100}.modal{width:100%;background:linear-gradient(180deg,var(--surface),var(--bg-soft));border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 26px 70px #0009;max-height:88vh;display:flex;flex-direction:column;animation:modal-in .18s ease-out}@keyframes modal-in{0%{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}.modal-head{display:flex;align-items:center;justify-content:space-between;padding:15px 18px;border-bottom:1px solid var(--border-soft)}.modal-head h3{margin:0;font-size:15px}.modal-close{background:transparent;border:none;color:var(--text-mute);cursor:pointer;font-size:15px;padding:4px 8px;border-radius:7px}.modal-close:hover{background:var(--surface-2);color:var(--text)}.modal-body{padding:18px;overflow-y:auto}.share-grid{display:grid;grid-template-columns:1fr 200px;gap:20px}@media (max-width: 640px){.share-grid{grid-template-columns:1fr}}.share-left{min-width:0}.share-item-title{margin:0 0 5px;font-size:15px}.share-item-url{display:block;font-size:11.5px;color:var(--text-mute);word-break:break-all;margin-bottom:16px}.copy-row{display:flex;gap:8px}.copy-row .input{flex:1;min-width:0;font-size:12px;font-family:var(--mono)}.share-codes{margin-bottom:14px}.share-code-chip{display:flex;align-items:center;gap:10px;margin-top:6px}.share-code-chip code{font-size:15px;letter-spacing:2px;color:var(--accent);background:var(--bg-soft);border:1px dashed var(--border);padding:7px 13px;border-radius:8px}.share-actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}.share-tip{font-size:12px;color:var(--text-mute);line-height:1.7;margin:0}.share-right{display:flex;justify-content:center;align-items:flex-start}.qr-box{background:#fff;border-radius:12px;padding:12px;display:flex;flex-direction:column;align-items:center;gap:6px}.qr-caption{font-size:11.5px;color:#4a5568}.import-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}.import-preview-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px;font-size:13px;flex-wrap:wrap}.import-list{list-style:none;margin:0;padding:0;max-height:210px;overflow-y:auto;border:1px solid var(--border-soft);border-radius:var(--radius-sm)}.import-list li{padding:8px 12px;border-bottom:1px solid var(--border-soft);display:flex;flex-direction:column;gap:2px}.import-list li:last-child{border-bottom:none}.import-title{font-size:12.5px}.import-url{font-size:11px;color:var(--text-mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.import-more{color:var(--text-mute);font-size:12px}.toast{position:fixed;left:50%;bottom:34px;transform:translate(-50%);background:#141b2af7;border:1px solid var(--border);color:var(--text);padding:11px 20px;border-radius:999px;font-size:13px;box-shadow:0 14px 38px #0000008c;z-index:200;animation:toast-in .2s ease-out;max-width:88vw;text-align:center}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%)}}.footer{margin-top:26px;padding-top:18px;border-top:1px solid var(--border-soft);color:var(--text-mute);font-size:12px;text-align:center}.link{background:none;border:none;color:var(--primary);cursor:pointer;font-size:12px;padding:0}