/* 星盒AI拍剪端 - PC端样式 */
/* 布局：顶部Header(56px) + 左侧导航(192px) + 主内容区(flex:1) */

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;font-size:14px;color:#1F2937;background:#F9FAFB}
a{text-decoration:none;color:inherit}
button{cursor:pointer;border:none;background:none;font:inherit;color:inherit}
input,textarea,select{font:inherit;color:inherit}
input:focus,textarea:focus,select:focus{outline:none}

/* ==================== App Layout ==================== */
.app-layout{display:flex;flex-direction:column;height:100vh;overflow:hidden}
.app-header{height:56px;flex-shrink:0;background:#fff;border-bottom:1px solid #E5E7EB;display:flex;align-items:center;justify-content:space-between;padding:0 24px}
.app-header .logo{display:flex;align-items:center}
.app-header .logo-star{font-size:20px;font-weight:700;color:#EAB308}
.app-header .logo-label{margin-left:8px;font-size:13px;color:#6B7280}
.header-right{display:flex;align-items:center;gap:16px}
.bell-btn{position:relative;padding:8px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#4B5563}
.bell-btn:hover{background:#F3F4F6}
.bell-btn .badge{position:absolute;top:4px;right:4px;width:8px;height:8px;background:#EF4444;border-radius:50%}
.user-info{display:flex;align-items:center;cursor:pointer;padding:4px 8px;border-radius:8px}
.user-info:hover{background:#F9FAFB}
.user-avatar{width:32px;height:32px;background:#F3E8FF;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-right:8px;color:#9333EA;font-weight:600;font-size:14px}
.user-name{font-size:14px;color:#374151}

.app-body{flex:1;display:flex;overflow:hidden}
.app-sidebar{width:192px;flex-shrink:0;background:#fff;border-right:1px solid #E5E7EB;padding:12px}
.nav-item{display:flex;align-items:center;width:100%;padding:12px 16px;border-radius:8px;font-size:14px;color:#4B5563;transition:all .15s;margin-bottom:2px}
.nav-item:hover{background:#F3F4F6}
.nav-item.active{background:#EFF6FF;color:#2563EB}
.nav-item svg{margin-right:12px;flex-shrink:0}
.nav-badge{margin-left:auto;padding:1px 6px;background:#EF4444;color:#fff;font-size:12px;border-radius:10px}
.app-main{flex:1;overflow-y:auto;background:#F9FAFB}

/* ==================== Page Common ==================== */
.page-container{padding:24px}
.page-title{font-size:20px;font-weight:700;color:#1F2937}
.page-subtitle{font-size:14px;color:#6B7280;margin-top:4px}

/* Card */
.card{background:#fff;border-radius:12px;box-shadow:0 1px 2px rgba(0,0,0,.05);border:1px solid #F3F4F6}
.card-header{padding:12px 16px;border-bottom:1px solid #F3F4F6;display:flex;align-items:center;font-weight:600;color:#1F2937}
.card-body{padding:16px}

/* ==================== Stats Row ==================== */
.stat-row{display:grid;gap:16px;margin-bottom:24px}
.stat-row.cols-6{grid-template-columns:repeat(6,1fr)}
.stat-row.cols-4{grid-template-columns:repeat(4,1fr)}
.stat-row.cols-3{grid-template-columns:repeat(3,1fr)}
.stat-card{border-radius:12px;padding:16px;text-align:center;border:1px solid transparent}
.stat-card .stat-num{font-size:28px;font-weight:700}
.stat-card .stat-label{font-size:13px;color:#6B7280;margin-top:4px}
.stat-card.blue{background:#EFF6FF;border-color:#DBEAFE}.stat-card.blue .stat-num{color:#2563EB}
.stat-card.purple{background:#FAF5FF;border-color:#F3E8FF}.stat-card.purple .stat-num{color:#9333EA}
.stat-card.yellow{background:#FFFBEB;border-color:#FEF3C7}.stat-card.yellow .stat-num{color:#D97706}
.stat-card.orange{background:#FFF7ED;border-color:#FFEDD5}.stat-card.orange .stat-num{color:#EA580C}
.stat-card.red{background:#FEF2F2;border-color:#FEE2E2}.stat-card.red .stat-num{color:#DC2626}
.stat-card.green{background:#F0FDF4;border-color:#D1FAE5}.stat-card.green .stat-num{color:#059669}

/* ==================== Dashboard 3-column ==================== */
.dashboard-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.dash-col{background:#fff;border-radius:12px;box-shadow:0 1px 2px rgba(0,0,0,.05);border:1px solid #F3F4F6;overflow:hidden}
.dash-col-header{padding:12px 16px;border-bottom:1px solid;display:flex;align-items:center;gap:8px;font-weight:600;color:#1F2937}
.dash-col-header svg{flex-shrink:0}
.dash-section{padding:16px;border-bottom:1px solid #F3F4F6}
.dash-section:last-child{border-bottom:none}
.dash-section-title{font-size:13px;font-weight:500;color:#6B7280;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between}
.count-badge{padding:1px 8px;font-size:12px;border-radius:10px;display:inline-block}

/* Mini cards */
.mini-card{padding:10px;border-radius:8px;margin-bottom:8px;cursor:pointer;transition:all .15s}
.mini-card:last-child{margin-bottom:0}
.mini-card:hover{filter:brightness(.97)}

/* ==================== Merchant Grid ==================== */
.merchant-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.merchant-card{padding:20px;cursor:pointer;transition:box-shadow .15s}
.merchant-card:hover{box-shadow:0 4px 6px -1px rgba(0,0,0,.1)}
.merchant-card.urgent{border-color:#FDBA74}

/* ==================== Tabs ==================== */
.tabs{display:flex;border-bottom:1px solid #E5E7EB}
.tab-item{padding:12px 16px;font-size:14px;font-weight:500;color:#6B7280;border-bottom:2px solid transparent;transition:all .15s;cursor:pointer}
.tab-item:hover{color:#374151}
.tab-item.active{color:#2563EB;border-bottom-color:#3B82F6}
.tab-count{display:inline-block;margin-left:4px;padding:1px 6px;font-size:12px;border-radius:10px;background:#F3F4F6;color:#6B7280}
.tab-item.active .tab-count{background:#DBEAFE;color:#2563EB}

/* ==================== Topic Row ==================== */
.topic-row{display:flex;align-items:center;padding:16px;border-bottom:1px solid #F3F4F6;transition:background .1s}
.topic-row:hover{background:#F9FAFB}
.topic-row:last-child{border-bottom:none}
.topic-row.selected{background:#EFF6FF}
.topic-episode{width:40px;height:40px;background:#F3F4F6;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#4B5563;flex-shrink:0;margin-right:16px}
.topic-info{flex:1;min-width:0;margin-right:16px}
.topic-title-row{display:flex;align-items:center;margin-bottom:4px}
.topic-title-row .title{font-weight:500;color:#1F2937;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topic-info .meta{font-size:13px;color:#6B7280}
.topic-progress{width:160px;flex-shrink:0;margin-right:16px}

/* ==================== Table ==================== */
.data-table{width:100%;border-collapse:collapse}
.data-table thead{background:#F9FAFB}
.data-table th{padding:12px 16px;text-align:left;font-size:13px;font-weight:500;color:#6B7280;border-bottom:1px solid #F3F4F6}
.data-table td{padding:12px 16px;font-size:14px;color:#374151;border-bottom:1px solid #F3F4F6}
.data-table tr:hover td{background:#F9FAFB}
.data-table tr.selected td{background:#EFF6FF}

/* ==================== Status Tag ==================== */
.status-tag{display:inline-block;padding:2px 10px;font-size:12px;border-radius:10px;white-space:nowrap}

/* ==================== Buttons ==================== */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:8px 16px;border-radius:8px;font-size:14px;font-weight:500;transition:all .15s;gap:6px;white-space:nowrap}
.btn-primary{background:#3B82F6;color:#fff}.btn-primary:hover{background:#2563EB}
.btn-success{background:#22C55E;color:#fff}.btn-success:hover{background:#16A34A}
.btn-danger{background:#EF4444;color:#fff}.btn-danger:hover{background:#DC2626}
.btn-warning{background:#F97316;color:#fff}.btn-warning:hover{background:#EA580C}
.btn-ghost{color:#3B82F6}.btn-ghost:hover{background:#EFF6FF}
.btn-outline{border:1px solid #E5E7EB;color:#374151}.btn-outline:hover{background:#F3F4F6}
.btn-block{width:100%}
.btn-lg{padding:12px 24px;font-size:15px;border-radius:12px}
.btn-sm{padding:4px 12px;font-size:13px}
.btn:disabled,.btn.disabled{opacity:.5;cursor:not-allowed}

/* ==================== Forms ==================== */
.form-group{margin-bottom:16px}
.form-label{display:block;font-size:14px;font-weight:500;color:#374151;margin-bottom:4px}
.form-input{width:100%;height:44px;padding:0 16px;background:#F9FAFB;border:1px solid #E5E7EB;border-radius:12px;font-size:14px;color:#1F2937}
.form-input:focus{border-color:#93C5FD;background:#fff}
.form-textarea{width:100%;padding:12px 16px;background:#F9FAFB;border:1px solid #E5E7EB;border-radius:12px;font-size:14px;color:#1F2937;resize:none}
.form-textarea:focus{border-color:#93C5FD;background:#fff}
.form-select{padding:0 16px;height:40px;border:1px solid #E5E7EB;border-radius:8px;background:#fff;font-size:14px;color:#374151}
.form-select:focus{border-color:#93C5FD}

/* ==================== Modal ==================== */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px}
.modal-overlay.hidden{display:none}
.modal{background:#fff;border-radius:12px;width:100%;max-width:480px;box-shadow:0 20px 25px -5px rgba(0,0,0,.1)}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid #F3F4F6}
.modal-header h3{font-size:16px;font-weight:600}
.modal-header .close-btn{padding:4px;border-radius:6px;display:flex}
.modal-header .close-btn:hover{background:#F3F4F6}
.modal-body{padding:16px}
.modal-footer{display:flex;justify-content:flex-end;gap:12px;padding:16px;border-top:1px solid #F3F4F6}

/* ==================== Calendar ==================== */
.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr)}
.calendar-header-cell{text-align:center;font-size:13px;color:#1F2937;font-weight:500;padding:12px 0;border-bottom:1px solid #F3F4F6}
.calendar-cell{min-height:96px;padding:8px;border-bottom:1px solid #F3F4F6;border-right:1px solid #F3F4F6;cursor:pointer;transition:background .1s}
.calendar-cell:hover{background:#F9FAFB}
.calendar-cell.other-month{background:#F9FAFB}
.calendar-cell.selected{background:#EFF6FF}
.day-num{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;font-size:14px;color:#374151}
.day-num.today{background:#3B82F6;color:#fff;border-radius:50%}
.day-num.other{color:#D1D5DB}
.calendar-event{font-size:12px;padding:2px 6px;border-radius:4px;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.calendar-event.shooting{background:#F3E8FF;color:#9333EA}
.calendar-event.published{background:#D1FAE5;color:#059669}

/* ==================== Detail Page ==================== */
.detail-layout{display:flex;flex-direction:column;height:100%}
.detail-header{background:#fff;border-bottom:1px solid #E5E7EB;padding:16px 24px;flex-shrink:0;display:flex;align-items:center}
.detail-header .back-btn{padding:8px;margin-left:-8px;margin-right:8px;border-radius:8px;display:flex;color:#4B5563}
.detail-header .back-btn:hover{background:#F3F4F6}
.detail-body{flex:1;overflow-y:auto;padding:24px}
.detail-grid{display:grid;grid-template-columns:2fr 1fr;gap:24px}

/* Script block */
.script-block{padding:12px;border-radius:8px;margin-bottom:12px}
.script-block .script-label{font-size:12px;color:#9CA3AF;margin-bottom:4px}
.script-block .script-text{font-size:14px;color:#1F2937;line-height:1.6}
.tag-list{display:flex;flex-wrap:wrap;gap:8px}
.tag-item{padding:4px 10px;background:#F3F4F6;color:#4B5563;font-size:12px;border-radius:6px}

/* Info row */
.info-row{display:flex;align-items:center;font-size:14px;color:#374151;margin-bottom:8px;gap:8px}
.info-row svg{flex-shrink:0;color:#9CA3AF}

/* Message list */
.msg-item{display:flex;align-items:flex-start;padding:16px;border-bottom:1px solid #F3F4F6;cursor:pointer;transition:background .1s}
.msg-item:hover{background:#F9FAFB}
.msg-item.unread{background:#EFF6FF}
.msg-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-right:12px}

/* Batch bar */
.batch-bar{background:#fff;border-top:1px solid #E5E7EB;padding:16px 24px;display:flex;align-items:center;justify-content:space-between}

/* Empty state */
.empty-state{text-align:center;padding:48px 16px;color:#9CA3AF}
.empty-state svg{margin:0 auto 8px;opacity:.5}

/* Animate spin */
@keyframes spin{to{transform:rotate(360deg)}}
.animate-spin{animation:spin 1s linear infinite}

/* Scrollbar */
.app-main::-webkit-scrollbar,.detail-body::-webkit-scrollbar{width:6px}
.app-main::-webkit-scrollbar-thumb,.detail-body::-webkit-scrollbar-thumb{background:#D1D5DB;border-radius:3px}
.app-main::-webkit-scrollbar-track,.detail-body::-webkit-scrollbar-track{background:transparent}

/* Badge pulse */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}