*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:#0f0f0f;color:#eee;min-height:100vh}
#app{max-width:1200px;margin:0 auto;padding:16px}
.login-box{max-width:400px;margin:80px auto;background:#1a1a1a;border-radius:12px;padding:32px}
.login-box h1{text-align:center;margin-bottom:24px;font-size:24px;color:#fff}
.form-group{margin-bottom:16px}
.form-group label{display:block;margin-bottom:6px;font-size:14px;color:#999}
.form-group input,.form-group select{width:100%;padding:10px 12px;background:#252525;border:1px solid #333;border-radius:8px;color:#fff;font-size:14px}
.form-group input:focus,.form-group select:focus{outline:none;border-color:#6366f1}
.btn{display:inline-block;padding:10px 20px;border:none;border-radius:8px;font-size:14px;cursor:pointer;transition:all .2s}
.btn-primary{background:#6366f1;color:#fff;width:100%}
.btn-primary:hover{background:#5558e6}
.btn-danger{background:#dc2626;color:#fff}
.btn-danger:hover{background:#b91c1c}
.btn-outline{background:transparent;border:1px solid #444;color:#ccc}
.btn-outline:hover{background:#252525}
.btn-sm{padding:6px 12px;font-size:12px}
.error{color:#ef4444;font-size:13px;margin-top:6px}
.error-msg{background:#451a1a;color:#ef4444;padding:12px;border-radius:8px;margin-bottom:16px}
.header{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid #222;margin-bottom:20px}
.header h2{font-size:20px}
.header-right{display:flex;align-items:center;gap:16px;font-size:14px}
.quota{background:#252525;padding:6px 12px;border-radius:20px;font-size:13px}
.quota .used{color:#ef4444}
.quota .total{color:#999}
.tabs{display:flex;gap:8px;margin-bottom:20px;border-bottom:1px solid #222;padding-bottom:0}
.tab{padding:10px 20px;background:none;border:none;color:#999;cursor:pointer;font-size:14px;border-bottom:2px solid transparent;transition:all .2s}
.tab:hover{color:#ccc}
.tab.active{color:#6366f1;border-bottom-color:#6366f1}
.panel{display:none}
.panel.active{display:block}
.card{background:#1a1a1a;border-radius:12px;padding:24px;margin-bottom:16px}
.card h3{font-size:16px;margin-bottom:16px;color:#fff}
.row{display:flex;gap:16px;flex-wrap:wrap}
.col{flex:1;min-width:200px}
.prompt-area{width:100%;min-height:100px;background:#252525;border:1px solid #333;border-radius:8px;color:#fff;padding:12px;font-size:14px;resize:vertical;font-family:inherit}
.prompt-area:focus{outline:none;border-color:#6366f1}
.result-area{margin-top:20px}
.result-area video{width:100%;max-width:640px;border-radius:8px;background:#000}
.status-badge{display:inline-block;padding:4px 10px;border-radius:12px;font-size:12px}
.status-pending{background:#333;color:#999}
.status-queued{background:#1a3a5c;color:#60a5fa}
.status-generating{background:#1a3a5c;color:#60a5fa}
.status-completed{background:#1a3a2a;color:#4ade80}
.status-failed{background:#451a1a;color:#ef4444}
.task-list{width:100%;border-collapse:collapse}
.task-list th,.task-list td{padding:10px 12px;text-align:left;border-bottom:1px solid #222;font-size:13px}
.task-list th{color:#999;font-weight:500}
.task-list tr:hover{background:#1a1a1a}
.user-table{width:100%;border-collapse:collapse}
.user-table th,.user-table td{padding:10px 12px;text-align:left;border-bottom:1px solid #222;font-size:13px}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:20px}
.stat-card{background:#1a1a1a;border-radius:10px;padding:16px;text-align:center}
.stat-card .value{font-size:28px;font-weight:bold;color:#6366f1}
.stat-card .label{font-size:12px;color:#999;margin-top:4px}
.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.7);z-index:100;justify-content:center;align-items:center}
.modal.show{display:flex}
.modal-content{background:#1a1a1a;border-radius:12px;padding:24px;max-width:500px;width:90%;max-height:80vh;overflow-y:auto}
.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.modal-close{background:none;border:none;color:#999;font-size:24px;cursor:pointer}
.empty-state{text-align:center;padding:40px;color:#666}
.empty-state .icon{font-size:48px;margin-bottom:12px}
.template-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;margin-top:12px}
.template-card{background:#252525;border:1px solid #333;border-radius:10px;padding:16px;cursor:pointer;transition:all .2s}
.template-card:hover{border-color:#6366f1;background:#1a1a2e}
.template-card .cat{font-size:11px;color:#6366f1;margin-bottom:6px}
.template-card .prompt{font-size:13px;color:#ccc;line-height:1.5}
.learn-item{background:#1a1a1a;border-radius:8px;padding:12px;margin-bottom:8px}
.learn-item .user{font-size:12px;color:#999;margin-bottom:6px}
.learn-item .diff{font-size:12px;line-height:1.6}
.learn-item .added{color:#4ade80}
.learn-item .removed{color:#ef4444}
@media(max-width:768px){.row{flex-direction:column}.col{min-width:100%}}