:root{--bg: #05070d;--panel: #0e1324;--text: #e7edf7;--muted: #a8b3c7;--accent: #7dff7a}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:Segoe UI,Arial,sans-serif;background:#000;color:var(--text)}.app-shell{position:relative;display:grid;grid-template-rows:auto 1fr;height:100%}.top-bar{position:fixed;top:18px;left:50%;transform:translate(-50%);z-index:2;display:flex;align-items:center;gap:22px;padding:10px 12px}.brand-mark{position:static;display:flex;align-items:center;gap:12px;padding:14px 18px;background:#0a0c1499;border:1px solid rgba(255,255,255,.1);border-radius:18px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.top-nav{position:static;display:flex;gap:20px;padding:14px 22px;background:#0a0c148c;border:1px solid rgba(255,255,255,.1);border-radius:999px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.top-nav-link{color:#d6e0f0;font-size:14px;letter-spacing:1.6px;text-transform:uppercase;text-decoration:none;padding:9px 12px;border-radius:999px;transition:background .2s ease,color .2s ease;position:relative;overflow:hidden}.top-nav-link:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(120px 60px at 20% 50%,rgba(125,255,122,.25),transparent 60%);opacity:0;transform:translate(-30%);transition:opacity .25s ease,transform .35s ease;pointer-events:none}.top-nav-link:after{content:"";position:absolute;left:12px;right:12px;bottom:6px;height:2px;border-radius:999px;background:linear-gradient(90deg,#7dff7a00,#7dff7ae6,#7dff7a00);transform:scaleX(.2);opacity:0;transition:transform .3s ease,opacity .3s ease}.top-nav-link:hover{background:#ffffff14;color:#fff}.top-nav-link:hover:before{opacity:1;transform:translate(0)}.top-nav-link:hover:after{opacity:1;transform:scaleX(1)}.brand-icon{display:grid;place-items:center}.brand-text{line-height:1.1}.brand-name{font-size:15px;letter-spacing:2.2px;font-weight:700;color:#e7edf7}.brand-tag{font-size:13px;color:#9fb0c9}.moon-bg{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0}.moon-bg canvas{display:block}.moon-canvas-shell{position:relative;height:100%;width:100%;cursor:grab}.moon-canvas-shell.is-interacting{cursor:grabbing}.moon-canvas-hint{position:absolute;left:50%;bottom:28px;transform:translate(-50%);padding:10px 14px;border-radius:999px;background:#0a0c14ad;border:1px solid rgba(255,255,255,.08);color:#d8e3f5;font-size:12px;letter-spacing:.7px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);pointer-events:none}.upload-rail{position:fixed;left:24px;top:120px;width:340px;z-index:2;display:grid;gap:16px;padding:18px;border-radius:20px;background:radial-gradient(180px 120px at 10% 5%,rgba(125,255,122,.15),transparent 60%),#0a0c1499;border:1px solid rgba(255,255,255,.08);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.upload-head{display:grid;gap:6px}.upload-kicker{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#9fb0c9}.upload-title{font-size:18px;letter-spacing:1.2px;font-weight:700;color:#fff}.upload-sub{font-size:12px;color:#b5c2d8}.upload-drop{position:relative;padding:18px;border-radius:16px;border:1px dashed rgba(255,255,255,.18);background:#0c101cb3;text-align:center;cursor:pointer;transition:border-color .25s ease,transform .25s ease}.upload-drop:hover{transform:translateY(-2px);border-color:#7dff7a8c}.upload-icon{width:38px;height:38px;margin:0 auto 8px;border-radius:50%;display:grid;place-items:center;font-size:20px;color:#0b1020;background:#7dff7a;box-shadow:0 0 16px #7dff7a99}.upload-text{font-size:13px;font-weight:700;letter-spacing:.6px}.upload-hint{font-size:11px;color:#9fb0c9;margin-top:4px}.upload-input{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;cursor:pointer}.upload-file{font-size:12px;color:#c9d6ea;padding:8px 10px;border-radius:12px;background:#0c101cb3;border:1px solid rgba(255,255,255,.06)}.upload-empty{color:#8fa1be}.upload-cta{padding:10px 14px;border-radius:12px;border:none;font-weight:700;letter-spacing:1px;text-transform:uppercase;background:linear-gradient(90deg,#7dff7a,#b9ff89);color:#0b1020;cursor:pointer}.upload-process-note{font-size:12px;color:#b6c4d8;line-height:1.5;padding:10px 12px;border-radius:12px;background:#ffffff0a;border:1px solid rgba(255,255,255,.06)}@media (max-width: 1100px){.upload-rail{position:relative;top:96px;left:auto;width:calc(100% - 32px);margin:0 16px}}.info-rail{position:fixed;right:24px;top:120px;width:360px;max-height:calc(100vh - 144px);z-index:2;display:grid;gap:18px;padding:18px;border-radius:20px;background:radial-gradient(180px 120px at 85% 5%,rgba(125,255,122,.15),transparent 60%),#0a0c1499;border:1px solid rgba(255,255,255,.08);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(125,255,122,.45) rgba(255,255,255,.06)}.info-rail::-webkit-scrollbar{width:10px}.info-rail::-webkit-scrollbar-track{background:#ffffff0a;border-radius:999px}.info-rail::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#7dff7aa6,#b9ff8973);border-radius:999px}.info-rail-head{display:grid;gap:6px}.info-kicker{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#9fb0c9}.info-title{font-size:20px;letter-spacing:1.4px;font-weight:700;color:#fff}.info-sub{font-size:13px;color:#b5c2d8}.info-cards{display:grid;gap:10px}.info-card{position:relative;padding:14px;border-radius:16px;background:#0c101ccc;border:1px solid rgba(255,255,255,.06);transition:transform .25s ease,border-color .25s ease;overflow:hidden}.info-card:hover{transform:translateY(-3px);border-color:#7dff7a66}.info-card-title{font-size:14px;font-weight:700;letter-spacing:.6px;margin-bottom:6px}.info-card-text{font-size:13px;color:#b9c6da}.info-card-glow{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(120px 80px at 15% 20%,rgba(125,255,122,.25),transparent 60%);opacity:0;transition:opacity .25s ease;pointer-events:none}.info-card:hover .info-card-glow{opacity:1}.info-badge{display:flex;gap:10px;align-items:center;padding:12px 14px;border-radius:16px;background:#0e1324bf;border:1px solid rgba(255,255,255,.06)}.info-badge-title{font-size:13px;font-weight:700;letter-spacing:.6px}.info-badge-text{font-size:12px;color:#9fb0c9}.result-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.result-stat-card{padding:14px;border-radius:16px;background:#0c101cdb;border:1px solid rgba(255,255,255,.06);display:grid;gap:6px}.result-stat-label{font-size:11px;text-transform:uppercase;letter-spacing:1.3px;color:#9fb0c9}.result-stat-value{font-size:28px;color:#fff}.result-gallery{display:grid;gap:12px}.result-panel{display:grid;gap:10px;text-decoration:none;color:inherit;padding:14px;border-radius:18px;background:#0c101cd1;border:1px solid rgba(255,255,255,.07)}.result-panel-kicker{font-size:11px;text-transform:uppercase;letter-spacing:1.8px;color:#9fb0c9}.result-preview{width:100%;aspect-ratio:16 / 10;object-fit:cover;border-radius:14px;display:block;background:#ffffff0a}.result-preview-empty{display:grid;place-items:center;color:#9fb0c9}.result-summary{display:grid;gap:8px}.result-summary-line{font-size:13px;color:#c7d5e9;line-height:1.45}.model-health{padding:14px 16px;border-radius:16px;border:1px solid rgba(255,255,255,.08);background:#0c101cd1;display:grid;gap:6px}.model-health-ready{border-color:#7dff7a59}.model-health-degraded,.model-health-capacity,.model-health-connection,.model-health-endpoint,.model-health-error{border-color:#ff8f6b59}.model-health-title{font-size:13px;font-weight:700;color:#fff}.model-health-text{font-size:12px;color:#b8c6da;line-height:1.45}.hf-message-box{display:grid;gap:10px;padding:14px 16px;border-radius:16px;background:#180c0ec7;border:1px solid rgba(255,143,107,.28)}.hf-message-box-title{font-size:13px;font-weight:700;color:#fff}.hf-message-box-body{display:grid;gap:8px}.hf-message-line{font-size:12px;line-height:1.5;color:#ffd4c8;word-break:break-word}.detection-list,.service-log{display:grid;gap:10px}.service-log-item{padding:12px;border-radius:14px;background:#ffffff08;border:1px solid rgba(255,255,255,.05);display:grid;gap:6px}.service-log-head{display:flex;justify-content:space-between;gap:10px;align-items:center}.service-log-label{font-size:13px;font-weight:700;color:#fff}.service-log-status{font-size:11px;font-weight:700;letter-spacing:.7px;text-transform:uppercase}.service-log-status-ready{color:#7dff7a}.service-log-status-degraded,.service-log-status-capacity,.service-log-status-connection,.service-log-status-endpoint,.service-log-status-error{color:#ff8f6b}.service-log-meta{font-size:11px;color:#96a8c5}.service-log-message{font-size:12px;color:#c7d5e9;line-height:1.45;word-break:break-word}.detection-item{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:10px 12px;border-radius:14px;background:#ffffff08;border:1px solid rgba(255,255,255,.05)}.detection-label{font-size:13px;font-weight:700;color:#fff}.detection-meta{font-size:11px;color:#96a8c5;margin-top:4px}.detection-confidence{font-size:12px;font-weight:700;color:#7dff7a;white-space:nowrap}.pipeline-status,.pipeline-steps{display:grid;gap:10px}.pipeline-current{font-size:12px;color:#c7d5e9;line-height:1.5}.pipeline-step{padding:11px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.06);background:#ffffff08;display:grid;gap:4px}.pipeline-step-running{border-color:#7dff7a38}.pipeline-step-done{border-color:#7dff7a47}.pipeline-step-error{border-color:#ff8f6b4d;background:#3816126b}.pipeline-step-title{font-size:12px;font-weight:700;color:#fff}.pipeline-step-detail{font-size:12px;line-height:1.5;color:#b9c6da;word-break:break-word}.pulse-dot{width:10px;height:10px;border-radius:50%;background:#7dff7a;box-shadow:0 0 12px #7dff7a99;animation:pulse 1.6s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1);opacity:.8}50%{transform:scale(1.6);opacity:1}}@media (max-width: 1100px){.info-rail{position:relative;top:110px;right:auto;width:calc(100% - 32px);max-height:none;margin:0 16px 24px}}.main-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.3fr .7fr;gap:16px;padding:16px;height:100%}.panel{background:#0e1324bf;border:1px solid rgba(27,37,71,.7);border-radius:16px;padding:16px;box-shadow:0 10px 30px #00000073;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}@media (max-width: 900px){.top-bar{position:relative;top:auto;left:auto;transform:none;flex-direction:column;align-items:stretch;gap:12px;padding:16px}.top-nav{overflow-x:auto;justify-content:flex-start}.result-stats{grid-template-columns:1fr}.detection-item{align-items:flex-start;flex-direction:column}.main-grid{grid-template-columns:1fr}}
