html,body,#root{margin:0;padding:0;width:100%;min-height:100%}body{font-family:Arial,Helvetica,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#f4f6f8;color:#172033}button,input,select{font-family:inherit}button{cursor:pointer}.app{min-height:100vh;background:#f4f6f8}.header{height:74px;padding:0 42px;display:flex;align-items:center;justify-content:space-between;background:#fff;border-top:3px solid #20242b;border-bottom:1px solid #dfe4ea;box-shadow:0 2px 8px #1720330f;position:sticky;top:0;z-index:100}.header h1{margin:0;color:#172033;font-size:24px;font-weight:700}.header p{margin:4px 0 0;color:#718096;font-size:13px}.user-area{display:flex;align-items:center;gap:20px;color:#334155;font-size:14px}.user-name{color:#172033;font-weight:700}.main-content{width:min(1440px,calc(100% - 64px));margin:0 auto;padding:38px 0 60px}.page-title{margin-bottom:28px;display:flex;align-items:flex-end;justify-content:space-between}.page-title h2{margin:0;color:#172033;font-size:30px;line-height:1.2}.page-title p{margin:8px 0 0;color:#718096;font-size:15px}.new-project,.save-btn{border:none;border-radius:7px;background:#2563eb;color:#fff;font-size:14px;font-weight:600;padding:12px 19px;transition:.2s ease}.new-project:hover,.save-btn:hover{background:#1d4ed8}.back-button,.edit-button,.cancel-btn{border:1px solid #d8e0e8;border-radius:7px;background:#fff;color:#29415f;font-size:14px;padding:10px 17px;transition:.2s ease}.back-button:hover,.edit-button:hover,.cancel-btn:hover{background:#f8fafc}.delete-button{border:1px solid #ef4444;border-radius:7px;background:#fff;color:#dc2626;font-size:14px;padding:10px 17px;transition:.2s ease}.delete-button:hover{background:#fef2f2}.summary-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:28px}.summary-card{min-height:126px;padding:21px 22px;background:#fff;border:1px solid #dfe5eb;border-radius:9px;box-shadow:0 1px 3px #17203308}.card-label{display:block;color:#718096;font-size:13px;font-weight:500;margin-bottom:9px}.summary-card strong{display:block;color:#172033;font-size:28px;line-height:1;margin-bottom:9px}.summary-card small{color:#8792a2;font-size:12px}.project-section{overflow:hidden;background:#fff;border:1px solid #dfe5eb;border-radius:9px;box-shadow:0 1px 3px #17203308}.section-header{min-height:78px;padding:18px 22px;display:flex;align-items:center;justify-content:flex-start;border-bottom:1px solid #e7ebef}.section-header select{min-width:158px;padding:9px 12px;border:1px solid #d7dfe8;border-radius:6px;background:#fff;color:#34455c;font-size:14px}.table-container{overflow-x:auto}table{width:100%;border-collapse:collapse}thead{background:#fafbfc}th{padding:15px 18px;color:#536276;text-align:left;font-size:12px;font-weight:600;border-bottom:1px solid #e7ebef}td{padding:16px 18px;color:#40516a;font-size:13px;border-bottom:1px solid #edf0f4;vertical-align:middle}tbody tr:last-child td{border-bottom:none}.clickable-row{cursor:pointer;transition:background .15s ease}.clickable-row:hover{background:#f8fafc}td strong{display:block;color:#172033;font-size:14px;font-weight:600;margin-bottom:4px}td small{display:block;color:#8b96a6;font-size:12px}.status{display:inline-flex;align-items:center;padding:6px 10px;border-radius:15px;font-size:12px;font-weight:600}.status.progress{background:#e8f0ff;color:#2563eb}.status.pending{background:#fff4d6;color:#a16207}.status.uat{background:#eee9ff;color:#6d28d9}.status.live{background:#e8f7ef;color:#16834b}.project-actions{position:sticky;top:74px;z-index:90;min-height:70px;margin-bottom:24px;padding:12px 14px;display:flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid #dce3ea;border-radius:8px;box-shadow:0 3px 10px #17203314}.project-action-right{display:flex;align-items:center;gap:12px}.project-detail-header{min-height:110px;margin-bottom:20px;padding:25px 28px;display:flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid #dfe5eb;border-radius:9px;box-shadow:0 1px 3px #17203308}.project-detail-header h2{margin:0 0 7px;color:#172033;font-size:25px}.project-detail-header p{margin:0;color:#718096;font-size:14px}.project-info{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-bottom:18px}.project-info>div{min-height:100px;padding:19px 20px;background:#fff;border:1px solid #dfe5eb;border-radius:9px}.project-info span{display:block;margin-bottom:8px;color:#7b8798;font-size:12px;font-weight:500}.project-info strong{display:block;color:#172033;font-size:15px;font-weight:600}.project-record{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:22px}.project-record>div{min-height:50px;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid #dfe5eb;border-radius:9px}.project-record span{color:#718096;font-size:13px}.project-record strong{color:#172033;font-size:14px;font-weight:600}.lifecycle-section{margin-bottom:20px;background:#fff;border:1px solid #dfe5eb;border-radius:9px;overflow:hidden;box-shadow:0 1px 3px #17203308}.lifecycle-section .section-header{min-height:80px;padding:18px 23px}.lifecycle-section .section-header h3{margin:0;color:#172033;font-size:18px}.lifecycle-section .section-header p{margin:6px 0 0;color:#718096;font-size:13px}.lifecycle{display:grid;grid-template-columns:1fr 1fr;column-gap:36px;padding:10px 22px 16px}.lifecycle-item{min-height:65px;padding:9px 10px;display:flex;align-items:center;gap:13px;border-bottom:1px solid #edf0f4;border-radius:5px}.lifecycle-item.current{background:#f0f5ff}.lifecycle-item.pending{background:#fff9e9}.lifecycle-item.completed{background:#fff}.stage-number{width:34px;height:34px;min-width:34px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#f1f4f8;color:#8792a2;font-size:12px;font-weight:600}.lifecycle-item strong{display:block;margin-bottom:3px;color:#374151;font-size:14px;font-weight:600}.lifecycle-item p{margin:0;color:#8b96a6;font-size:12px}.lifecycle-item.completed .stage-number{background:#e8f7ef;color:#16834b}.lifecycle-item.current .stage-number{background:#e5edff;color:#2563eb}.details-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}.detail-card{min-height:230px;padding:22px 23px;background:#fff;border:1px solid #dfe5eb;border-radius:9px;box-shadow:0 1px 3px #17203308}.detail-card h3{margin:0 0 16px;color:#172033;font-size:17px}.document-row{min-height:43px;padding:10px 0;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #edf0f4;color:#40516a;font-size:13px}.document-row:last-child{border-bottom:none}.document-status{color:#24804a;font-size:12px;font-weight:600}.document-status.created{color:#2563eb}.comment{margin:0 0 13px;color:#40516a;font-size:14px;line-height:1.6}.detail-card small{color:#8b96a6;font-size:12px}.project-history{min-height:auto}.project-history h3{margin-bottom:12px;font-size:17px}.history-row{min-height:58px;padding:10px 0;display:flex;align-items:center;border-bottom:1px solid #edf0f4}.history-row:last-child{border-bottom:none}.history-row>div{width:100%;display:flex;align-items:center;justify-content:space-between}.history-row span{color:#68778c;font-size:13px}.history-row strong{color:#172033;font-size:14px;font-weight:600}.project-form,.edit-project-section{margin-bottom:25px;padding:25px;background:#fff;border:1px solid #dfe5eb;border-radius:9px;box-shadow:0 1px 3px #17203308}.form-header{margin-bottom:22px}.form-header h3,.edit-project-section h3{margin:0;color:#172033;font-size:19px}.form-header p{margin:6px 0 0;color:#718096;font-size:13px}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.form-group{display:flex;flex-direction:column;gap:7px}.form-group label{color:#4b5b70;font-size:13px;font-weight:600}.form-group input,.form-group select{width:100%;min-height:42px;padding:9px 11px;border:1px solid #d7dfe8;border-radius:6px;background:#fff;color:#27364a;font-size:14px;outline:none}.form-group input:focus,.form-group select:focus{border-color:#2563eb;box-shadow:0 0 0 2px #2563eb1a}.form-actions{margin-top:23px;display:flex;justify-content:flex-end;gap:10px}.cancel-btn,.save-btn{min-width:110px}@media(max-width:1100px){.main-content{width:min(100% - 40px,1100px)}.summary-cards{grid-template-columns:repeat(2,1fr)}.project-info{grid-template-columns:repeat(3,1fr)}}@media(max-width:800px){.header{padding:0 20px}.main-content{width:calc(100% - 28px);padding-top:25px}.page-title{align-items:flex-start;flex-direction:column;gap:18px}.project-actions{top:74px}.project-detail-header{align-items:flex-start;flex-direction:column;gap:15px}.project-info{grid-template-columns:repeat(2,1fr)}.project-record{grid-template-columns:1fr}.lifecycle{grid-template-columns:1fr;column-gap:0}.details-grid{grid-template-columns:1fr}}@media(max-width:600px){.header{height:68px}.header h1{font-size:20px}.header p{font-size:11px}.user-area{gap:8px;font-size:12px}.summary-cards,.project-info,.form-grid{grid-template-columns:1fr}.project-actions{top:68px;padding:10px;flex-wrap:wrap;gap:10px}.project-action-right{gap:7px}.back-button,.edit-button,.delete-button{padding:8px 11px;font-size:12px}.page-title h2{font-size:25px}.project-detail-header h2{font-size:21px}}.input-error{border-color:#dc2626!important;background:snow!important}.input-error:focus{border-color:#dc2626!important;box-shadow:0 0 0 2px #dc262614!important}.field-error{display:block;margin-top:2px;color:#dc2626;font-size:12px;line-height:1.4;font-weight:500}.form-group input:has(+.field-error),.form-group select:has(+.field-error){border-color:#dc2626;background:snow}.form-group input:has(+.field-error):focus,.form-group select:has(+.field-error):focus{border-color:#dc2626;box-shadow:0 0 0 2px #dc262614}.form-group input[type=date]{min-height:42px}.field-error{display:block;margin-top:4px;color:#dc2626;font-size:12px;line-height:1.4;font-weight:500}.field-hint{display:block;margin-top:4px;color:#7b8798;font-size:12px;line-height:1.4}.form-warning{margin-top:18px;padding:10px 13px;border:1px solid #fecaca;border-radius:6px;background:#fef2f2;color:#b91c1c;font-size:13px;line-height:1.4;font-weight:500}