.page-recruiter-preview-offer, .page-recruiter-preview-offer *::before, .page-recruiter-preview-offer *::after{ box-sizing: border-box; margin: 0; padding: 0; }
.page-recruiter-preview-offer{ min-height: 100vh; font-family: 'Inter', system-ui, sans-serif; color: #1a1a1a; background: #FAFAFA; }
.page-recruiter-preview-offer button{ cursor: pointer; border: none; background: none; font-family: inherit; }

.page-recruiter-preview-offer .header{ background: #fff; border-bottom: 1px solid rgba(0,0,0,.05); padding: 14px 32px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 50; }
.page-recruiter-preview-offer .h-logo{ font-family: 'Playfair Display', Georgia, serif; font-size: 18px; font-weight: 800; letter-spacing: -.3px; }
.page-recruiter-preview-offer .h-logo span{ color: #C4A559; }
.page-recruiter-preview-offer .h-right{ display: flex; align-items: center; gap: 16px; }
.page-recruiter-preview-offer .h-steps{ display: flex; gap: 4px; }
.page-recruiter-preview-offer .h-step{ width: 44px; height: 5px; border-radius: 3px; background: rgba(0,0,0,.06); position: relative; overflow: hidden; }
.page-recruiter-preview-offer .h-step.done::after{ content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,#C4A559,#C9A96E); border-radius: 3px; }
.page-recruiter-preview-offer .h-step.current::after{ content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,#C4A559,#E5D4A0); border-radius: 3px; box-shadow: 0 0 8px rgba(184,145,42,.35); }
.page-recruiter-preview-offer .h-step-label{ font-size: 10px; font-weight: 700; color: #C4A559; margin-left: 4px; }
.page-recruiter-preview-offer .h-help{ font-size: 11px; font-weight: 600; color: #999; cursor: pointer; transition: color .15s; }
.page-recruiter-preview-offer .h-help:hover{ color: #C4A559; }

.page-recruiter-preview-offer .main{ max-width: 1060px; margin: 0 auto; padding: 28px 24px 48px; }

.page-recruiter-preview-offer .title-zone{ margin-bottom: 24px; animation: fadeUp .4s ease both; }
.page-recruiter-preview-offer .title-zone h1{ font-family: 'Playfair Display', Georgia, serif; font-size: 26px; font-weight: 700; line-height: 1.15; }
.page-recruiter-preview-offer .title-zone h1 i{ font-style: italic; color: #C4A559; font-weight: 400; }
.page-recruiter-preview-offer .title-zone p{ font-size: 12px; color: #888; margin-top: 4px; line-height: 1.5; max-width: 480px; }

.page-recruiter-preview-offer .grid{ display: grid; grid-template-columns: 1.15fr .85fr; gap: 20px; animation: fadeUp .5s ease both; animation-delay: .15s; }

/* ── OFFER CARD ── */
.page-recruiter-preview-offer .offer-card{ background: #fff; border-radius: 14px; border: 1px solid rgba(0,0,0,.04); overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,.04); }

.page-recruiter-preview-offer .oc-cover{ height: 148px; background: linear-gradient(135deg,#0D2818 0%,#1A4A2E 50%,#0F3320 100%); position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 20px 18px; }
.page-recruiter-preview-offer .oc-cover::before{ content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 80% 30%,rgba(255,255,255,.04) 0%,transparent 60%); }
.page-recruiter-preview-offer .oc-cover-pattern{ position: absolute; inset: 0; opacity: .03; background-image: repeating-linear-gradient(45deg,#fff 0px,#fff 1px,transparent 1px,transparent 12px); }
.page-recruiter-preview-offer .oc-new-badge{ display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 100px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); font-size: 8px; font-weight: 700; color: rgba(255,255,255,.75); letter-spacing: .5px; margin-bottom: 10px; width: fit-content; position: relative; z-index: 1; }
.page-recruiter-preview-offer .oc-cover-main{ position: relative; z-index: 1; }
.page-recruiter-preview-offer .oc-cover-title{ font-family: 'Playfair Display', Georgia, serif; font-size: 22px; font-weight: 800; color: #fff; line-height: 1.15; margin-bottom: 4px; }
.page-recruiter-preview-offer .oc-cover-title em{ font-style: italic; font-weight: 400; color: #6EDBA8; }
.page-recruiter-preview-offer .oc-cover-sub{ font-size: 12px; color: rgba(255,255,255,.45); font-weight: 400; }



.page-recruiter-preview-offer .oc-tags{ display: flex; flex-wrap: wrap; gap: 5px; padding: 12px 20px 0; }
.page-recruiter-preview-offer .oc-tag{ font-size: 8px; font-weight: 700; padding: 4px 10px; border-radius: 100px; border: 1px solid rgba(0,0,0,.06); color: #555; background: #FAFAFA; }
.page-recruiter-preview-offer .oc-tag.gold{ background: rgba(184,145,42,.07); border-color: rgba(184,145,42,.15); color: #8C6D34; }

.page-recruiter-preview-offer .oc-body{ padding: 16px 20px 20px; }
.page-recruiter-preview-offer .oc-section{ padding: 14px 0; border-top: 1px solid rgba(0,0,0,.04); }
.page-recruiter-preview-offer .oc-section:first-child{ border-top: none; padding-top: 4px; }

.page-recruiter-preview-offer .oc-section-label{ font-size: 8px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #C4A559; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.page-recruiter-preview-offer .oc-section-label .num{ width: 16px; height: 16px; border-radius: 50%; background: rgba(184,145,42,.1); display: flex; align-items: center; justify-content: center; font-size: 7px; font-weight: 800; color: #C4A559; }

.page-recruiter-preview-offer .info-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.page-recruiter-preview-offer .info-key{ font-size: 8px; font-weight: 600; color: #bbb; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 2px; }
.page-recruiter-preview-offer .info-val{ font-size: 11px; font-weight: 600; color: #1a1a1a; }
.page-recruiter-preview-offer .info-val.gold{ color: #C4A559; }
.page-recruiter-preview-offer .info-val.muted{ color: #aaa; font-size: 10px; }

.page-recruiter-preview-offer .oc-desc{ font-size: 10.5px; color: #555; line-height: 1.65; border-left: 3px solid #E5D4A0; padding-left: 12px; font-style: italic; }
.page-recruiter-preview-offer .sub-label{ font-size: 8px; font-weight: 700; color: #aaa; text-transform: uppercase; letter-spacing: .5px; margin: 10px 0 6px; }

.page-recruiter-preview-offer .env-tags{ display: flex; flex-wrap: wrap; gap: 4px; }
.page-recruiter-preview-offer .env-tag{ font-size: 8px; font-weight: 600; padding: 4px 10px; border-radius: 100px; background: #FAFAFA; border: 1px solid rgba(0,0,0,.05); color: #555; }
.page-recruiter-preview-offer .env-tag.on{ background: rgba(184,145,42,.06); border-color: rgba(184,145,42,.18); color: #8C6D34; }

.page-recruiter-preview-offer .req-list{ display: flex; flex-direction: column; gap: 7px; }
.page-recruiter-preview-offer .req-row{ display: flex; align-items: baseline; gap: 8px; }
.page-recruiter-preview-offer .req-key{ font-size: 9px; color: #aaa; width: 115px; flex-shrink: 0; }
.page-recruiter-preview-offer .req-val{ font-size: 10px; font-weight: 600; color: #1a1a1a; }

.page-recruiter-preview-offer .attr-tags{ display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.page-recruiter-preview-offer .attr-tag{ font-size: 8px; font-weight: 600; padding: 4px 10px; border-radius: 100px; background: rgba(27,122,78,.05); border: 1px solid rgba(27,122,78,.12); color: #1B7A4E; }

.page-recruiter-preview-offer .vis-grid{ display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.page-recruiter-preview-offer .vis-item{ text-align: center; padding: 10px 8px; background: #FAFAFA; border-radius: 8px; border: 1px solid rgba(0,0,0,.04); }
.page-recruiter-preview-offer .vis-val{ font-family: 'Playfair Display', serif; font-size: 15px; font-weight: 700; color: #C4A559; }
.page-recruiter-preview-offer .vis-lab{ font-size: 7px; font-weight: 600; color: #aaa; text-transform: uppercase; letter-spacing: .4px; margin-top: 2px; }

/* ── SIDEBAR ── */
.page-recruiter-preview-offer .sidebar{ display: flex; flex-direction: column; gap: 14px; }

.page-recruiter-preview-offer .score{ background: #fff; border-radius: 14px; padding: 20px; border: 1px solid rgba(0,0,0,.04); text-align: center; box-shadow: 0 2px 12px rgba(0,0,0,.04); }
.page-recruiter-preview-offer .score-lab{ font-size: 9px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: #999; margin-bottom: 10px; }
.page-recruiter-preview-offer .score-ring{ width: 100px; height: 100px; border-radius: 50%; background: conic-gradient(#C4A559 0deg,#E5D4A0 130deg,#C4A559 243deg,rgba(0,0,0,.04) 243deg); display: flex; align-items: center; justify-content: center; margin: 0 auto 8px; animation: ringIn 1s ease .3s both; }
@keyframes ringIn { from{transform:scale(.8);opacity:0;} to{transform:scale(1);opacity:1;} }
.page-recruiter-preview-offer .score-inner{ width: 82px; height: 82px; border-radius: 50%; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.page-recruiter-preview-offer .score-val{ font-family: 'Playfair Display', serif; font-size: 32px; font-weight: 700; color: #C4A559; line-height: 1; }
.page-recruiter-preview-offer .score-max{ font-size: 9px; color: #ccc; font-weight: 600; }
.page-recruiter-preview-offer .score-note{ font-size: 9px; color: #888; margin-top: 4px; }
.page-recruiter-preview-offer .score-note b{ color: #C4A559; }

.page-recruiter-preview-offer .checklist{ background: #fff; border-radius: 14px; padding: 18px; border: 1px solid rgba(0,0,0,.04); box-shadow: 0 2px 12px rgba(0,0,0,.04); }
.page-recruiter-preview-offer .cl-title{ font-family: 'Playfair Display', Georgia, serif; font-size: 14px; font-weight: 700; margin-bottom: 2px; }
.page-recruiter-preview-offer .cl-sub{ font-size: 9px; color: #888; margin-bottom: 10px; }
.page-recruiter-preview-offer .cl-bar{ height: 5px; border-radius: 3px; background: rgba(0,0,0,.04); margin-bottom: 12px; overflow: hidden; }
.page-recruiter-preview-offer .cl-fill{ height: 100%; border-radius: 3px; background: linear-gradient(90deg,#C4A559,#E5D4A0); transition: width .8s ease .5s; }
.page-recruiter-preview-offer .cl-list{ display: flex; flex-direction: column; gap: 5px; }
.page-recruiter-preview-offer .cl-item{ display: flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 500; }
.page-recruiter-preview-offer .cl-item.ok{ color: #1B7A4E; }
.page-recruiter-preview-offer .cl-item.warn{ color: #C4A559; }
.page-recruiter-preview-offer .cl-ic{ width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; flex-shrink: 0; }
.page-recruiter-preview-offer .cl-item.ok .cl-ic{ background: rgba(27,122,78,.07); }
.page-recruiter-preview-offer .cl-item.warn .cl-ic{ background: rgba(184,145,42,.08); }

.page-recruiter-preview-offer .matching{ background: #fff; border-radius: 14px; padding: 18px; border: 1px solid rgba(0,0,0,.04); box-shadow: 0 2px 12px rgba(0,0,0,.04); }
.page-recruiter-preview-offer .m-title{ font-family: 'Playfair Display', Georgia, serif; font-size: 14px; font-weight: 700; margin-bottom: 12px; }
.page-recruiter-preview-offer .m-stat{ display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px solid rgba(0,0,0,.04); }
.page-recruiter-preview-offer .m-stat:last-child{ border-bottom: none; }
.page-recruiter-preview-offer .m-label{ font-size: 10px; color: #888; }
.page-recruiter-preview-offer .m-value{ font-size: 11px; font-weight: 700; color: #1a1a1a; }
.page-recruiter-preview-offer .m-value.gold{ color: #C4A559; }
.page-recruiter-preview-offer .m-value.green{ color: #1B7A4E; }

.page-recruiter-preview-offer .actions{ display: flex; flex-direction: column; gap: 8px; }
.page-recruiter-preview-offer .btn-publish{ width: 100%; padding: 14px; border-radius: 10px; font-size: 12px; font-weight: 800; color:#fff; position: relative; overflow: hidden; background: linear-gradient(135deg,#C4A559 0%,#D4BC7A 40%,#E5D4A0 70%,#EFE2B8 100%); box-shadow: 0 1px 0 rgba(255,255,255,.6) inset,0 -1px 0 rgba(0,0,0,.08) inset,0 6px 16px rgba(184,145,42,.2); transition: all .25s; letter-spacing: .2px; }
.page-recruiter-preview-offer .btn-publish::before{ content:''; position:absolute; top:0; left:0; right:0; height:45%; background:linear-gradient(180deg,rgba(255,255,255,.6),transparent); border-radius:10px 10px 0 0; pointer-events:none; }
.page-recruiter-preview-offer .btn-publish:hover{ transform: translateY(-2px); box-shadow: 0 8px 22px rgba(184,145,42,.32); }
.page-recruiter-preview-offer .btn-edit{ width: 100%; padding: 13px; border-radius: 10px; font-size: 11px; font-weight: 700; background: #fff; color: #555; border: 1.5px solid rgba(0,0,0,.07); transition: all .2s; }
.page-recruiter-preview-offer .btn-edit:hover{ border-color: #C4A559; color: #C4A559; transform: translateY(-1px); }
.page-recruiter-preview-offer .btn-save{ width: 100%; padding: 11px; border-radius: 10px; font-size: 10px; font-weight: 600; color: #bbb; background: transparent; border: 1px dashed rgba(0,0,0,.1); transition: all .2s; }
.page-recruiter-preview-offer .btn-save:hover{ border-color: #C4A559; color: #C4A559; }

@keyframes fadeUp { from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;} }
@media(max-width:768px){.grid{grid-template-columns:1fr;}.main{padding:20px 16px;}}

.page-recruiter-preview-offer .hub-link:hover{background:rgba(201,165,74,.25);border-color:rgba(201,165,74,.4);color:#E5D4A0;}
.page-recruiter-preview-offer .hub-link-dot{width:6px;height:6px;border-radius:50%;background:#D4BC7A;}
/* ══ RECRUITER HEADER ══ */
.page-recruiter-preview-offer .header{background:rgba(255,255,255,.97);backdrop-filter:blur(16px);border-bottom:1px solid rgba(0,0,0,.05);padding:0 32px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;height:56px;}
.page-recruiter-preview-offer .header-left{display:flex;align-items:center;gap:18px;}
.page-recruiter-preview-offer .h-sep{height:22px;width:1px;background:rgba(0,0,0,.07);}
.page-recruiter-preview-offer .badge-portal{font-size:9px;font-weight:800;color:#9A7A28;padding:4px 10px;background:linear-gradient(180deg,#FFFBF0,#F5EDCF);border-radius:6px;border:1px solid rgba(184,145,42,.2);letter-spacing:1.5px;text-transform:uppercase;flex-shrink:0;}
.page-recruiter-preview-offer .nav-links{display:flex;align-items:center;gap:2px;}
.page-recruiter-preview-offer .nav-link{position:relative;padding:6px 14px;border-radius:7px;font-size:12.5px;font-weight:600;color:#666;transition:all .15s;cursor:pointer;}
.page-recruiter-preview-offer .nav-link:hover{color:#1a1a1a;background:rgba(0,0,0,.04);}
.page-recruiter-preview-offer .nav-link.active{font-weight:700;color:#fff;background:linear-gradient(135deg,#C4A559 0%,#D4BC7A 40%,#E5D4A0 70%,#EFE2B8 100%);box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 2px 8px rgba(150,120,62,.25);}
.page-recruiter-preview-offer .nav-badge{position:absolute;top:-4px;right:-4px;width:15px;height:15px;border-radius:50%;background:#fff;color:#C4A559;font-size:8px;font-weight:900;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.1),0 0 0 1.5px #D4BC7A;}
.page-recruiter-preview-offer .header-right{display:flex;align-items:center;gap:8px;}
.page-recruiter-preview-offer .h-icon-btn{width:34px;height:34px;border-radius:8px;border:1px solid rgba(0,0,0,.07);display:flex;align-items:center;justify-content:center;background:#fff;position:relative;transition:all .15s;color:#888;}
.page-recruiter-preview-offer .h-icon-btn:hover{border-color:#D4BC7A;color:#C4A559;transform:translateY(-1px);}
.page-recruiter-preview-offer .h-icon-btn svg{width:15px;height:15px;}
.page-recruiter-preview-offer .notif-dot{position:absolute;top:6px;right:6px;width:6px;height:6px;border-radius:50%;background:#dc2626;border:1.5px solid #fff;}
.page-recruiter-preview-offer .msg-badge{position:absolute;top:5px;right:5px;width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,#D4BC7A,#9A7A28);color:#fff;font-size:7px;font-weight:900;display:flex;align-items:center;justify-content:center;}
.page-recruiter-preview-offer .profile-btn{display:flex;align-items:center;gap:7px;padding:4px 12px 4px 5px;border-radius:8px;border:1px solid rgba(0,0,0,.07);background:#fff;transition:all .15s;}
.page-recruiter-preview-offer .profile-btn:hover{border-color:rgba(0,0,0,.12);}
.page-recruiter-preview-offer .profile-av{width:26px;height:26px;border-radius:50%;background:linear-gradient(145deg,#D4BC7A,#9A7A28);display:flex;align-items:center;justify-content:center;color:#fff;font-size:9px;font-weight:800;}
/* ══ RECRUITER HEADER UNIFIED ══ */
.page-recruiter-preview-offer .ts-header{background:rgba(255,255,255,.97);backdrop-filter:blur(16px);border-bottom:1px solid rgba(0,0,0,.05);padding:0 32px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;height:56px;}
.page-recruiter-preview-offer .ts-header-left{display:flex;align-items:center;gap:18px;}
.page-recruiter-preview-offer .ts-h-sep{height:22px;width:1px;background:rgba(0,0,0,.07);}
.page-recruiter-preview-offer .ts-badge-portal{font-size:9px;font-weight:800;color:#9A7A28;padding:4px 10px;background:linear-gradient(180deg,#FFFBF0,#F5EDCF);border-radius:6px;border:1px solid rgba(184,145,42,.2);letter-spacing:1.5px;text-transform:uppercase;flex-shrink:0;}
.page-recruiter-preview-offer .ts-nav-links{display:flex;align-items:center;gap:2px;}
.page-recruiter-preview-offer .ts-nav-link{position:relative;padding:6px 14px;border-radius:7px;font-size:12.5px;font-weight:600;color:#666;transition:all .15s;cursor:pointer;background:none;border:none;font-family:inherit;}
.page-recruiter-preview-offer .ts-nav-link:hover{color:#1a1a1a;background:rgba(0,0,0,.04);}
.page-recruiter-preview-offer .ts-nav-link.active{font-weight:700;color:#fff;background:linear-gradient(135deg,#C4A559 0%,#D4BC7A 40%,#E5D4A0 70%,#EFE2B8 100%);box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 2px 8px rgba(150,120,62,.25);}
.page-recruiter-preview-offer .ts-header-right{display:flex;align-items:center;gap:8px;}
.page-recruiter-preview-offer .ts-h-icon-btn{width:34px;height:34px;border-radius:8px;border:1px solid rgba(0,0,0,.07);display:flex;align-items:center;justify-content:center;background:#fff;position:relative;transition:all .15s;color:#888;cursor:pointer;}
.page-recruiter-preview-offer .ts-h-icon-btn:hover{border-color:#D4BC7A;color:#C4A559;transform:translateY(-1px);}
.page-recruiter-preview-offer .ts-h-icon-btn svg{width:15px;height:15px;}
.page-recruiter-preview-offer .ts-notif-dot{position:absolute;top:6px;right:6px;width:6px;height:6px;border-radius:50%;background:#dc2626;border:1.5px solid #fff;}
.page-recruiter-preview-offer .ts-profile-btn{display:flex;align-items:center;gap:7px;padding:4px 12px 4px 5px;border-radius:8px;border:1px solid rgba(0,0,0,.07);background:#fff;transition:all .15s;cursor:pointer;}
.page-recruiter-preview-offer .ts-profile-btn:hover{border-color:rgba(0,0,0,.12);}
.page-recruiter-preview-offer .ts-profile-av{width:26px;height:26px;border-radius:50%;background:linear-gradient(145deg,#D4BC7A,#9A7A28);display:flex;align-items:center;justify-content:center;color:#fff;font-size:9px;font-weight:800;}