:root{--egg-gold: var(--ey-yellow);--egg-amber: var(--ey-orange);--green: var(--ey-teal);--green-dim: var(--teal-dim);--red: var(--red);--red-dim: var(--red-dim);--blue: var(--ey-sky);--blue-dim: var(--blue-dim);--teal: var(--ey-teal)}.page-header{border-bottom:1px solid var(--border-subtle)!important;margin-bottom:24px!important;padding-bottom:16px!important}.page-header h2{font-family:var(--font-sans)!important;color:#fff!important;font-size:1.25rem!important;font-weight:700!important;margin-bottom:4px!important}.page-header p{color:var(--text-secondary)!important;font-size:.78rem!important}.tabs{display:flex;gap:8px}.tab{background:#ffffff08;border:1px solid var(--border-default);color:var(--text-secondary);padding:8px 16px;border-radius:var(--radius-md);font-size:.8rem;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px;transition:all .2s var(--ease-out);font-family:var(--font-sans)}.tab:hover{background:#ffffff0f;border-color:var(--border-hover);color:var(--text-primary);transform:translateY(-1px)}.tab.active{background:#fdd83514;border-color:var(--egg-gold);color:var(--egg-gold);box-shadow:0 0 12px #fdd83526;font-weight:700}.tab-content{display:none;animation:fadeIn .3s var(--ease-out)}.tab-content.active{display:block}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.stats-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}.stat-card{background:var(--bg-card);border:1px solid var(--border-default);border-radius:var(--radius-md);padding:18px 16px;text-align:center;transition:all .25s var(--ease-out);box-shadow:var(--shadow-sm);position:relative;overflow:hidden}.stat-card:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(253,216,53,.15),transparent)}.stat-card:hover{border-color:var(--border-hover);transform:translateY(-2px);box-shadow:var(--shadow-md),0 4px 20px #0003}.stat-card .num{font-size:2rem;font-weight:700;color:var(--egg-gold);line-height:1.1;margin-bottom:6px;letter-spacing:-.02em}.stat-card .label{font-size:.68rem;color:var(--text-secondary);font-weight:600;text-transform:uppercase;letter-spacing:.06em}.upload-zone{border:2px dashed var(--border-default);border-radius:var(--radius-md);padding:48px 24px;text-align:center;cursor:pointer;background:#ffffff03;transition:all .25s var(--ease-out);margin-bottom:24px}.upload-zone:hover,.upload-zone.dragover{border-color:var(--ey-orange);background:#f05a3008;box-shadow:0 0 24px #f05a300f}.upload-zone .upload-icon{margin-bottom:14px}.upload-zone h3{font-size:.95rem;font-weight:600;color:var(--text-primary);margin-bottom:4px}.upload-zone p{font-size:.75rem;color:var(--text-tertiary)}.upload-progress{background:var(--bg-card);border:1px solid var(--border-default);border-radius:var(--radius-md);padding:16px 20px;margin-bottom:24px;box-shadow:var(--shadow-sm)}.progress-bar{width:100%;height:6px;background:#ffffff0f;border-radius:3px;overflow:hidden;margin-bottom:8px}.progress-fill{width:0%;height:100%;background:linear-gradient(90deg,var(--ey-orange),var(--ey-yellow));border-radius:3px;transition:width .2s ease}#upload-status-text{font-size:.75rem;color:var(--text-secondary);font-weight:500}.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;margin-top:8px}.gallery-card{background:var(--bg-card);border:1px solid var(--border-default);border-radius:var(--radius-md);overflow:hidden;position:relative;transition:all .25s var(--ease-out);display:flex;flex-direction:column}.gallery-card:hover{border-color:var(--border-hover);transform:translateY(-3px);box-shadow:var(--shadow-md),0 8px 24px #00000040}.gallery-card img{width:100%;height:130px;object-fit:cover;background:var(--bg-deep);border-bottom:1px solid var(--border-subtle);transition:transform .3s}.gallery-card:hover img{transform:scale(1.02)}.gallery-card .badge{position:absolute;top:8px;left:8px;font-size:.62rem;font-weight:700;padding:3px 8px;border-radius:var(--radius-pill);box-shadow:var(--shadow-sm);z-index:2}.badge-annotated{background:#00b7ac26;border:1px solid var(--ey-teal);color:var(--ey-teal)}.badge-pending{background:#c84b3126;border:1px solid var(--red);color:var(--red)}.btn-delete-img{position:absolute;top:8px;right:8px;background:#05070c99;border:1px solid rgba(255,255,255,.1);color:var(--text-secondary);width:20px;height:20px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.75rem;transition:all .15s;z-index:2;line-height:1;padding:0 0 2px}.btn-delete-img:hover{background:var(--red);color:#fff;border-color:var(--red);transform:scale(1.08)}.gallery-card .card-info{padding:12px;font-size:.72rem;color:var(--text-primary);flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:4px;background:var(--bg-card)}.gallery-card .card-info div:first-child{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gallery-card .card-info div:last-child{color:var(--text-secondary)!important;font-size:.68rem}.annotate-layout{display:grid;grid-template-columns:240px 1fr;gap:20px;min-height:520px}.image-list-panel{background:var(--bg-card);border:1px solid var(--border-default);border-radius:var(--radius-md);padding:16px;display:flex;flex-direction:column;max-height:550px}.image-list-panel h3{font-family:var(--font-sans);font-size:.85rem;font-weight:700;color:#fff;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--border-subtle)}#image-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:4px;padding-right:4px}.img-list-item{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-radius:var(--radius-sm);cursor:pointer;font-size:.75rem;color:var(--text-secondary);border:1px solid transparent;transition:all .15s}.img-list-item:hover{background:#ffffff08;color:var(--text-primary)}.img-list-item.active{background:#fdd8350f;border-color:#fdd83533;color:var(--egg-gold);font-weight:600}.img-list-item .dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;margin-left:8px}.dot-green{background:var(--ey-teal);box-shadow:0 0 6px var(--ey-teal)}.dot-red{background:var(--red);box-shadow:0 0 6px var(--red)}.canvas-panel{background:var(--bg-card);border:1px solid var(--border-default);border-radius:var(--radius-md);padding:16px;display:flex;flex-direction:column;gap:12px;max-height:550px}.canvas-toolbar{display:flex;align-items:center;gap:8px;padding-bottom:12px;border-bottom:1px solid var(--border-subtle)}.canvas-toolbar select{background:var(--bg-input);border:1px solid var(--border-default);color:var(--text-primary);padding:6px 12px;border-radius:var(--radius-sm);font-size:.75rem;font-family:inherit;outline:none;min-width:160px;cursor:pointer;transition:border-color .15s}.canvas-toolbar select:focus{border-color:var(--border-active)}.tool-btn{background:var(--bg-elevated);border:1px solid var(--border-default);color:var(--text-secondary);padding:6px 12px;border-radius:var(--radius-sm);font-size:.75rem;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:4px;transition:all .15s;font-family:inherit}.tool-btn:hover{border-color:var(--border-hover);color:var(--text-primary);transform:translateY(-1px)}.tool-btn:active{transform:scale(.97)}.save-btn{background:linear-gradient(135deg,var(--ey-orange),var(--ey-yellow))!important;border:none!important;color:#000!important;font-weight:700!important;box-shadow:var(--shadow-glow-gold)!important;margin-left:auto}.save-btn:hover{opacity:.95!important;transform:translateY(-1px)!important}.canvas-wrapper{flex:1;background:var(--bg-deep);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);overflow:auto;display:flex;align-items:center;justify-content:center;position:relative;min-height:380px}#annotation-canvas{max-width:100%;max-height:380px;display:block;cursor:crosshair;background:#000}.canvas-panel .hint{font-size:.68rem;color:var(--text-tertiary);margin:0;line-height:1.4}.train-panel{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}.train-config,.train-status{background:var(--bg-card);border:1px solid var(--border-default);border-radius:var(--radius-md);padding:20px}.train-panel h3{font-family:var(--font-sans);font-size:.95rem;font-weight:700;color:#fff;margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid var(--border-subtle)}.config-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.config-row label{font-size:.8rem;color:var(--text-secondary);font-weight:600}.config-row input{background:var(--bg-input);border:1px solid var(--border-default);color:var(--text-primary);padding:6px 12px;border-radius:var(--radius-sm);font-size:.8rem;font-family:inherit;width:100px;text-align:right;outline:none;transition:border-color .15s}.config-row input:focus{border-color:var(--border-active)}.dataset-summary{background:#ffffff03;border:1px dashed var(--border-default);border-radius:var(--radius-md);padding:14px 16px;font-size:.75rem;color:var(--text-secondary);margin-bottom:20px;display:flex;flex-direction:column;gap:6px;line-height:1.5}.dataset-summary div strong{color:var(--egg-gold)}.btn-train{width:100%;padding:12px;background:linear-gradient(135deg,var(--ey-orange),var(--ey-yellow));border:none;border-radius:var(--radius-md);color:#000;font-size:.85rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;transition:all .2s var(--ease-out);box-shadow:var(--shadow-glow-gold);font-family:var(--font-sans)}.btn-train:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 0 16px #f05a304d}.btn-train:active{transform:scale(.98)}.btn-train:disabled{background:var(--bg-elevated)!important;color:var(--text-muted)!important;cursor:not-allowed;box-shadow:none!important}.train-status{display:flex;flex-direction:column;min-height:290px}#training-status-display{flex:1;background:var(--bg-deep);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:16px;font-size:.78rem;color:var(--text-secondary);font-family:var(--font-mono);line-height:1.7;overflow-y:auto;height:195px}.status-idle{color:var(--text-tertiary);font-family:var(--font-sans)}.status-training{color:var(--egg-gold);animation:pulse-glow 2s infinite;font-family:var(--font-sans);font-weight:600}.status-done{color:var(--ey-teal);font-family:var(--font-sans)}@keyframes pulse-glow{0%{opacity:.7}50%{opacity:1}to{opacity:.7}}@media (max-width: 900px){.stats-bar{grid-template-columns:repeat(2,1fr)}.annotate-layout,.train-panel{grid-template-columns:1fr}}.img-list-thumb{width:42px;height:32px;object-fit:cover;border-radius:var(--radius-sm);border:1px solid var(--border-subtle);background:var(--bg-deep);flex-shrink:0;transition:transform .2s ease,border-color .2s ease}.img-list-item:hover .img-list-thumb{transform:scale(1.04);border-color:var(--border-hover)}.img-list-info{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;text-align:left}.img-list-name{font-size:.72rem;color:var(--text-primary);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}.img-list-status{font-size:.65rem;color:var(--text-tertiary);display:block}.img-list-item.active .img-list-name{color:var(--egg-gold)}.img-list-item.active .img-list-status{color:#fdd835b3}.img-list-item.active .img-list-thumb{border-color:var(--egg-gold)}.annotate-layout.fullscreen-mode{position:fixed!important;top:0!important;left:0!important;right:0!important;bottom:0!important;width:100vw!important;height:100vh!important;max-width:100vw!important;max-height:100vh!important;background:#090c13!important;z-index:99999!important;padding:16px!important;grid-template-columns:260px 1fr!important;gap:16px!important;box-sizing:border-box!important}.annotate-layout.fullscreen-mode .image-list-panel,.annotate-layout.fullscreen-mode .canvas-panel{max-height:calc(100vh - 32px)!important;height:calc(100vh - 32px)!important;background:#0d111ce6!important;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--border-default)}.annotate-layout.fullscreen-mode .canvas-wrapper{min-height:auto!important;max-height:none!important;height:auto!important;flex:1!important;overflow:auto!important;background:#05070c!important}.annotate-layout.fullscreen-mode #annotation-canvas{max-height:calc(100vh - 150px)!important;width:auto!important;height:auto!important;object-fit:contain}
