*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:#f5f7fa;color:#333;min-height:100vh}
.header{background:#fff;padding:12px 24px;border-bottom:1px solid #e8e8e8;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:100;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.header-left h1{font-size:18px;font-weight:600}
.breadcrumb{font-size:13px;color:#999}
.breadcrumb a{color:#1a73e8;text-decoration:none}
.header-right{font-size:13px;color:#666}
.container{max-width:1200px;margin:0 auto;padding:20px 24px}
.ticket-select-section{background:#fff;border-radius:12px;padding:20px;margin-bottom:20px;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.ticket-select-section h3{font-size:15px;margin-bottom:12px}
.ticket-select-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.ticket-select-row select{padding:8px 12px;border:1px solid #ddd;border-radius:6px;font-size:14px;min-width:320px;max-width:500px}
.ticket-info{flex:1;padding:10px 14px;background:#f8f9fa;border-radius:6px;font-size:13px;color:#666;min-height:42px;display:flex;align-items:center;gap:8px}
.tag-implement{background:#e8f0fe;color:#1a73e8;display:inline-block;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:500}
.sop-section{background:#fff;border-radius:12px;padding:20px 24px;margin-bottom:20px;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.sop-section h2{font-size:16px;margin-bottom:16px}
.sop-section h2 .sub{font-size:13px;color:#999;font-weight:400}
.sop-flow{display:flex;gap:0;overflow-x:auto;padding-bottom:8px}
.sop-step{flex:1;min-width:100px;position:relative;text-align:center;padding:0 2px;cursor:pointer}
.sop-step:hover .sop-step-node{transform:scale(1.05)}
.sop-step::before{content:'';position:absolute;top:26px;left:0;right:0;height:3px;background:#e0e0e0;z-index:0}
.sop-step:first-child::before{left:50%}
.sop-step:last-child::before{right:50%}
.sop-step.completed::before{background:#4caf50}
.sop-step.active::before{background:linear-gradient(90deg,#4caf50 50%,#e0e0e0 50%)}
.sop-step.skipped::before{background:#bdbdbd}
.sop-step-node{width:52px;height:52px;border-radius:50%;background:#e0e0e0;display:flex;align-items:center;justify-content:center;margin:0 auto 6px;font-size:20px;position:relative;z-index:1;transition:all .3s}
.sop-step.completed .sop-step-node{background:#4caf50;color:#fff}
.sop-step.active .sop-step-node{background:#1a73e8;color:#fff;box-shadow:0 0 0 4px rgba(26,115,232,.2);transform:scale(1.1)}
.sop-step.skipped .sop-step-node{background:#bdbdbd;color:#fff}
.sop-step.pending .sop-step-node{background:#e0e0e0;color:#999}
.sop-step-label{font-size:11px;font-weight:500;margin-bottom:2px}
.sop-step-time{font-size:10px;color:#999}
.sop-step.completed .sop-step-time{color:#4caf50}
.sop-step.active .sop-step-time{color:#1a73e8}
.sop-step-duration{font-size:10px;color:#4caf50;margin-top:1px}
.sop-step.skipped .sop-step-duration{color:#9e9e9e}
.sop-step.active .sop-step-duration{color:#1a73e8}
.progress-bar-wrap{height:6px;background:#e0e0e0;border-radius:3px;overflow:hidden;margin-top:12px}
.progress-bar-fill{height:100%;background:linear-gradient(90deg,#4caf50,#66bb6a);border-radius:3px;transition:width .5s}
.sop-phase-detail{border:1px solid #e8e8e8;border-radius:10px;padding:20px;margin-bottom:16px;background:#fff;transition:all .3s}
.sop-phase-detail.active-phase{border-color:#1a73e8;background:#f8fbff}
.sop-phase-detail.completed{border-color:#c8e6c9}
.sop-phase-detail.skipped{border-color:#e0e0e0;opacity:.7}
.phase-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.phase-title{font-size:15px;font-weight:600;display:flex;align-items:center;gap:8px}
.phase-title .psub{font-size:12px;color:#999;font-weight:400}
.phase-status{font-size:12px;padding:4px 10px;border-radius:12px;font-weight:500;white-space:nowrap}
.phase-status.pending{background:#f5f5f5;color:#999}
.phase-status.in_progress{background:#e3f2fd;color:#1565c0}
.phase-status.completed{background:#e8f5e9;color:#2e7d32}
.phase-status.skipped{background:#f5f5f5;color:#9e9e9e}
.phase-time-row{display:flex;gap:8px;align-items:center;background:#f8f9fa;border-radius:8px;padding:10px 14px;margin-bottom:14px;font-size:13px;border:1px solid #e8e8e8;flex-wrap:wrap}
.ptime{display:flex;align-items:center;gap:6px}
.ptime-icon{font-size:14px}
.ptime-label{color:#999;font-size:12px}
.ptime-value{font-weight:600;color:#333}
.ptime-value.green{color:#2e7d32}
.ptime-value.blue{color:#1565c0}
.ptime-sep{color:#ccc;font-size:12px}
.ptime-duration{font-weight:700;font-size:14px;color:#2e7d32;background:#e8f5e9;padding:2px 10px;border-radius:10px;white-space:nowrap;margin-left:auto}
.ptime-duration.skipped{background:#f5f5f5;color:#9e9e9e}
.ptime-duration.active{background:#e3f2fd;color:#1565c0}
.phase-form{display:flex;flex-direction:column;gap:12px}
.fg{display:flex;flex-direction:column;gap:4px}
.fg label{font-size:13px;color:#666;font-weight:500}
.fg label .req{color:#d32f2f}
.fg input,.fg textarea,.fg select{padding:8px 12px;border:1px solid #ddd;border-radius:6px;font-size:14px;transition:border-color .2s}
.fg input:focus,.fg textarea:focus,.fg select:focus{border-color:#1a73e8;outline:none;box-shadow:0 0 0 2px rgba(26,115,232,.1)}
.fg textarea{min-height:80px;resize:vertical;font-family:inherit}
.fg textarea[readonly]{background:#f8f9fa;cursor:default}
.frow{display:flex;gap:12px}
.frow .fg{flex:1}
.file-upload-area{border:2px dashed #ddd;border-radius:8px;padding:16px;text-align:center;cursor:pointer;transition:all .2s;margin-top:6px}
.file-upload-area:hover,.file-upload-area.dragover{border-color:#1a73e8;background:#f8fbff}
.file-upload-area .ficon{font-size:24px;margin-bottom:4px}
.file-upload-area .ftext{font-size:13px;color:#666}
.file-upload-area .ftext span{color:#1a73e8}
.file-upload-area input[type=file]{display:none}
.file-list{margin-top:8px}
.file-item{display:flex;align-items:center;gap:8px;padding:6px 10px;background:#f8f9fa;border-radius:6px;margin-bottom:4px;font-size:13px}
.file-item .ficon{font-size:14px}
.file-item .fname{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-item .fsize{color:#999;font-size:11px}
.file-item .fdownload{color:#1a73e8;cursor:pointer;padding:2px 6px;border-radius:4px;font-size:12px;text-decoration:none}
.file-item .fdownload:hover{background:#e3f2fd}
.file-item .fdel{color:#d32f2f;cursor:pointer;padding:2px 6px;border-radius:4px;font-size:12px}
.file-item .fdel:hover{background:#ffebee}
.btn{padding:8px 16px;border-radius:6px;font-size:13px;cursor:pointer;border:none;display:inline-flex;align-items:center;gap:6px;font-weight:500;transition:all .2s}
.btn-primary{background:#1a73e8;color:#fff}
.btn-success{background:#4caf50;color:#fff}
.btn-secondary{background:#fff;color:#666;border:1px solid #ddd}
.btn-warning{background:#ff9800;color:#fff}
.btn-sm{padding:5px 10px;font-size:12px}
.btn-ghost{background:transparent;color:#d32f2f;border:1px solid #ffcdd2}
.btn-ghost:hover{background:#ffebee}
.btn:disabled{opacity:.5;cursor:not-allowed}
.phase-actions{display:flex;gap:8px;margin-top:16px;padding-top:16px;border-top:1px solid #eee}
.sub-item-card{background:#f8f9fa;border-radius:8px;padding:14px;margin-bottom:10px;border:1px solid #e8e8e8;position:relative}
.summary-section{background:#fff;border-radius:12px;padding:20px 24px;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.summary-section h2{font-size:16px;margin-bottom:16px}
.summary-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.summary-item{padding:12px;background:#f8f9fa;border-radius:8px}
.summary-item .slabel{font-size:12px;color:#999;margin-bottom:4px}
.summary-item .svalue{font-size:14px;font-weight:600}
.summary-item .svalue.green{color:#4caf50}
.summary-item .svalue.orange{color:#ff9800}
.summary-item .svalue.blue{color:#1a73e8}
.toast-container{position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:8px}
.toast{background:#333;color:#fff;padding:10px 20px;border-radius:8px;font-size:14px;opacity:0;transform:translateY(20px);transition:all .3s;box-shadow:0 4px 12px rgba(0,0,0,.15)}
.toast.show{opacity:1;transform:translateY(0)}
.toast.success{background:#4caf50}
.toast.error{background:#d32f2f}
.toast.warning{background:#ff9800}
.loading-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(255,255,255,.85);display:flex;align-items:center;justify-content:center;z-index:9998;font-size:16px;color:#666}
.loading-overlay.hidden{display:none}
.hidden{display:none!important}
@media(max-width:768px){.container{padding:12px}.sop-phase-detail{padding:14px}.frow{flex-direction:column}.phase-time-row{flex-direction:column;gap:6px}.phase-time-row .ptime-duration{margin-left:0}.phase-time-row .ptime-sep{display:none}}