body{margin: 0px;font-family: "Inter", sans-serif;}
.contract-preview-page{min-height:100vh;padding:28px;background:radial-gradient(circle at 12% 12%,rgba(52,213,209,.18),transparent 28%),radial-gradient(circle at 88% 76%,rgba(45,148,241,.12),transparent 30%),linear-gradient(135deg,#f8fafc 0%,#ffffff 48%,#eefdfc 100%);font-family:"Inter";color:#0f172a;}
.preview-header{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:22px;}
.breadcrumb-mini{color:#0faaa6;font-size:12px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;margin-bottom:8px;}
.preview-header h1{margin:0;font-size:34px;font-weight:700;letter-spacing:-1px;}
.preview-header p{margin:8px 0 0;color:#64748b;font-size:15px;}
.header-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;}
.btn-preview{height:42px;padding:0 18px;border-radius:12px;border:0;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;text-decoration:none;cursor:pointer;transition:.22s ease;}
.btn-preview:hover{transform:translateY(-2px);text-decoration:none;}
.btn-primary{background:linear-gradient(135deg,#34d5d1,#12aaa6);color:#fff;box-shadow:0 14px 30px rgba(52,213,209,.34);}
.btn-danger{background:#ef4444;color:#fff;box-shadow:0 14px 30px rgba(239,68,68,.22);}
.btn-outline{color:#0f766e;border:1px solid rgba(15,118,110,.22);background:rgba(255,255,255,.76);}
.btn-light{color:#334155;background:rgba(255,255,255,.9);border:1px solid rgba(15,23,42,.08);}
.contract-status-bar{display:flex;align-items:center;gap:12px;padding:18px 22px;margin-bottom:22px;border-radius:22px;background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.9);box-shadow:0 20px 60px rgba(15,23,42,.07);backdrop-filter:blur(18px);}
.status-item{display:flex;align-items:center;gap:10px;color:#94a3b8;min-width:max-content;}
.status-item span{width:30px;height:30px;border-radius:50%;background:#e2e8f0;display:flex;align-items:center;justify-content:center;color:#64748b;font-size:13px;font-weight:700;}
.status-item p{margin:0;font-size:13px;font-weight:800;}
.status-item.active{color:#0f766e;}
.status-item.active span{background:linear-gradient(135deg,#34d5d1,#12aaa6);color:#fff;}
.status-line{flex:1;height:3px;border-radius:999px;background:#e2e8f0;}
.status-line.active{background:linear-gradient(90deg,#34d5d1,#12aaa6);}
.preview-layout{display:grid;grid-template-columns:390px minmax(0,1fr);gap:22px;align-items:flex-start;}
.contract-info-card,.contract-document-area{border-radius:26px;background:rgba(255,255,255,.86);border:1px solid rgba(255,255,255,.92);box-shadow:0 24px 70px rgba(15,23,42,.09);backdrop-filter:blur(20px);}
.contract-info-card{padding:24px;position:sticky;top:20px;}
.company-brand{display:flex;align-items:center;gap:14px;margin-bottom:22px;}
.brand-icon{width:52px;height:52px;border-radius:18px;background:linear-gradient(135deg,#34d5d1,#12aaa6);color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;box-shadow:0 16px 34px rgba(52,213,209,.36);}
.company-brand strong{display:block;font-size:20px;font-weight:700;color:#12aaa6;}
.company-brand span{display:block;color:#64748b;font-size:12px;font-weight:700;}
.contract-badge{display:inline-flex;height:34px;align-items:center;padding:0 13px;margin-bottom:16px;border-radius:999px;background:rgba(245,158,11,.12);color:#b45309;font-size:12px;font-weight:700;}
.contract-done{    display: inline-flex;
    height: 34px;
    align-items: center;
    padding: 0 13px;
    margin-bottom: 16px;
    border-radius: 999px;
    background: #0dc040;
    color: #fff;
    font-size: 12px;
    font-weight: 700;}
.contract-info-card h2{margin:0 0 22px;font-size:22px;line-height:1.28;font-weight:700;letter-spacing:-.5px;}
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:22px;}
.info-box{min-height:82px;padding:14px;border-radius:18px;background:#f8fafc;border:1px solid rgba(15,23,42,.06);}
.info-box span,.customer-row span{display:block;color:#64748b;font-size:12px;font-weight:700;margin-bottom:7px;}
.info-box strong{display:block;color:#0f172a;font-size:14px;line-height:1.35;}
.customer-box{padding:18px;border-radius:20px;background:rgba(52,213,209,.06);border:1px solid rgba(52,213,209,.14);margin-bottom:18px;}
.section-title{margin-bottom:14px;color:#0f766e;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;}
.customer-row{padding:12px 0;border-bottom:1px dashed rgba(15,23,42,.12);}
.customer-row:last-child{border-bottom:0;padding-bottom:0;}
.customer-row strong{display:block;color:#0f172a;font-size:14px;line-height:1.45;}
.file-card{display:flex;gap:12px;align-items:center;padding:14px;border-radius:18px;background:#f8fafc;border:1px solid rgba(15,23,42,.06);}
.file-icon{width:42px;height:42px;flex:0 0 42px;border-radius:14px;background:#2563eb;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;}
.file-card strong{display:block;font-size:13px;color:#0f172a;line-height:1.35;word-break:break-word;}
.file-card span{display:block;margin-top:4px;color:#64748b;font-size:12px;}
.contract-document-area{overflow:hidden;}
.document-tabs{display:flex;gap:8px;padding:16px 18px;border-bottom:1px solid rgba(15,23,42,.08);}
.tab-btn{font-family: 'Inter'; height:40px;padding:0 16px;border:0;border-radius:12px;background:transparent;color:#64748b;font-size:13px;font-weight:700;cursor:pointer;}
.tab-btn.active{background:linear-gradient(135deg,#34d5d1,#12aaa6);color:#fff;box-shadow:0 12px 26px rgba(52,213,209,.28);}
.document-panel{display:none;padding:24px;}
.document-panel.active{display:block;}
.paper-document{max-width:920px;min-height:980px;margin:0 auto;padding:48px 56px;background:#fff;border-radius:18px;border:1px solid rgba(15,23,42,.08);box-shadow:0 20px 70px rgba(15,23,42,.12);}
.paper-header{display:flex;justify-content:space-between;gap:20px;padding-bottom:18px;margin-bottom:28px;border-bottom:2px solid #34d5d1;}
.paper-header strong{display:block;color:#12aaa6;font-size:20px;font-weight:700;}
.paper-header span{display:block;margin-top:4px;color:#64748b;font-size:12px;font-weight:700;}
.paper-code{height:34px;padding:0 13px;display:inline-flex;align-items:center;border-radius:999px;background:rgba(52,213,209,.1);color:#0f766e;font-size:12px;font-weight:700;}
.paper-title{margin:0 0 28px;text-align:center;color:#0f172a;font-size:26px;font-weight:700;}
.contract-content-style{color:#111827;font-size:15px;line-height:1.85;}
.contract-content-style p{margin:0 0 12px;}
.contract-content-style table{width:100%;border-collapse:collapse;margin:18px 0;}
.contract-content-style table td,.contract-content-style table th{border:1px solid #cbd5e1;padding:10px;}
.contract-content-style pre{white-space:pre-wrap;font-family:inherit;background:transparent;padding:0;margin:0;border:0;}
.word-viewer{overflow:hidden;border-radius:20px;background:#fff;border:1px solid rgba(15,23,42,.08);}
.viewer-toolbar{min-height:64px;padding:14px 18px;display:flex;justify-content:space-between;gap:16px;align-items:center;border-bottom:1px solid rgba(15,23,42,.08);background:#f8fafc;}
.viewer-toolbar strong{display:block;color:#0f172a;font-size:14px;}
.viewer-toolbar span{display:block;margin-top:3px;color:#64748b;font-size:12px;}
.viewer-toolbar a{height:38px;padding:0 14px;display:inline-flex;align-items:center;justify-content:center;border-radius:11px;background:#2563eb;color:#fff;font-size:13px;font-weight:800;text-decoration:none;}
.word-viewer iframe{width:100%;height:760px;display:block;border:0;background:#fff;}
@media (max-width:1199px){
    .preview-layout{grid-template-columns:1fr;}
    .contract-info-card{position:static;}
}
@media (max-width:767px){
    .contract-preview-page{padding:16px;}
    .preview-header{flex-direction:column;}
    .header-actions{width:100%;justify-content:flex-start;}
    .btn-preview{flex:1;}
    .contract-status-bar{overflow-x:auto;}
    .status-line{min-width:40px;flex:0 0 40px;}
    .info-grid{grid-template-columns:1fr;}
    .document-panel{padding:14px;}
    .paper-document{padding:28px 20px;min-height:auto;}
    .paper-header{flex-direction:column;}
    .viewer-toolbar{flex-direction:column;align-items:flex-start;}
    .word-viewer iframe{height:620px;}
}