:root {
    --bg: #F8F9FA;
    --text: #0B132B;
    --accent: #4A4E69;
    --cyan: #00B4D8;
    --white: #FFFFFF;
    --muted: #667085;
    --border: #E4E7EC;
    --soft: #F1F4F7;
    --cyan-soft: #E9F9FC;
    --success: #16866B;
    --success-soft: #EAF7F2;
    --warning: #C47121;
    --warning-soft: #FFF4E8;
    --danger: #B54747;
    --shadow: 0 18px 55px rgba(11, 19, 43, .08);
    --shadow-sm: 0 8px 24px rgba(11, 19, 43, .06);
    --radius: 22px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    color: var(--text);
    background: var(--bg);
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
.shell { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    backdrop-filter: blur(16px);
    background: rgba(248, 249, 250, .86);
    border-bottom: 1px solid rgba(228, 231, 236, .85);
}
.header-inner { height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-size: 19px; font-weight: 650; letter-spacing: -.02em; }
.brand strong { font-weight: 800; }
.brand-mark { width: 34px; height: 34px; border-radius: 10px; background: var(--text); display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 3px; padding: 8px; }
.brand-mark span { background: var(--cyan); border-radius: 2px; }
.brand-mark span:nth-child(1) { height: 8px; opacity: .55; }
.brand-mark span:nth-child(2) { height: 14px; opacity: .8; }
.brand-mark span:nth-child(3) { height: 19px; }
.header-badge, .back-link { font-size: 13px; color: var(--muted); font-weight: 650; }
.back-link:hover { color: var(--cyan); }

.hero { min-height: 630px; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 60px; padding-top: 70px; padding-bottom: 85px; }
.eyebrow { display: inline-block; color: var(--cyan); text-transform: uppercase; letter-spacing: .12em; font-size: 12px; font-weight: 800; }
.hero h1, .tool-intro h1 { margin: 15px 0 20px; font-size: clamp(46px, 6vw, 78px); line-height: .98; letter-spacing: -.055em; }
.hero h1 span, .tool-intro h1 span { color: var(--cyan); }
.hero-lead, .tool-intro p { max-width: 700px; color: var(--muted); font-size: 18px; }
.hero-actions { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
.btn { border: 0; border-radius: 12px; min-height: 46px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-weight: 750; transition: .2s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { color: #fff; background: var(--accent); box-shadow: 0 10px 24px rgba(74, 78, 105, .2); }
.btn-primary:hover { background: var(--text); }
.btn-ghost { color: var(--text); background: var(--white); border: 1px solid var(--border); }
.btn-ghost:hover { border-color: #C7CDD6; box-shadow: var(--shadow-sm); }
.btn-large { min-height: 54px; padding: 0 24px; }
.btn-spark { color: var(--cyan); }
.trust-row { margin-top: 26px; display: flex; gap: 22px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }

.hero-visual { position: relative; min-height: 430px; }
.grid-glow { position: absolute; inset: 0; background-image: linear-gradient(rgba(0,180,216,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(0,180,216,.07) 1px, transparent 1px); background-size: 34px 34px; mask-image: radial-gradient(circle at center, #000, transparent 72%); }
.data-card { position: absolute; z-index: 2; background: rgba(255,255,255,.95); border: 1px solid var(--border); border-radius: 24px; box-shadow: var(--shadow); }
.data-card-main { width: 68%; left: 14%; top: 55px; padding: 25px; transform: rotate(-2deg); }
.data-card-top { display:flex; justify-content:space-between; color:var(--muted); font-size:13px; font-weight:700; }
.status-dot { width:9px; height:9px; border-radius:50%; background:var(--cyan); box-shadow:0 0 0 6px rgba(0,180,216,.1); }
.score-mini { font-size:68px; line-height:1; font-weight:850; letter-spacing:-.06em; margin:30px 0; }
.score-mini span { font-size:17px; color:var(--muted); letter-spacing:0; }
.mini-bars { display:grid; gap:10px; }
.mini-bars i { height:8px; border-radius:9px; background:linear-gradient(90deg, var(--cyan) var(--w), var(--soft) var(--w)); }
.float-card { position:absolute; z-index:3; display:flex; flex-direction:column; gap:2px; background:var(--white); border:1px solid var(--border); box-shadow:var(--shadow-sm); border-radius:16px; padding:16px 19px; }
.float-card strong { font-size:17px; }.float-card span { color:var(--muted); font-size:12px; }.float-a { right:0; top:45px; }.float-b { left:0; bottom:55px; }.float-b .spark { color:var(--cyan); font-size:20px; }

.tools-section { padding: 85px 0 105px; background: var(--white); border-top:1px solid var(--border); }
.section-heading { display:grid; grid-template-columns:1fr .75fr; align-items:end; gap:60px; margin-bottom:36px; }
.section-heading h2 { font-size:38px; letter-spacing:-.035em; line-height:1.08; margin:10px 0 0; }.section-heading p { color:var(--muted); margin:0; }
.tool-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.tool-card { position:relative; min-height:255px; padding:26px; border:1px solid var(--border); border-radius:20px; background:var(--bg); transition:.22s ease; }
.tool-card.featured:hover { transform:translateY(-4px); border-color:rgba(0,180,216,.45); box-shadow:var(--shadow); }
.tool-icon { width:46px; height:46px; display:grid; place-items:center; border-radius:13px; background:var(--text); color:var(--cyan); font-weight:850; }
.tool-status { position:absolute; right:22px; top:22px; padding:6px 10px; border-radius:999px; background:var(--soft); color:var(--muted); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.tool-status.live { background:var(--cyan-soft); color:#007C95; }
.tool-card h3 { margin:25px 0 8px; font-size:22px; letter-spacing:-.02em; }.tool-card p { color:var(--muted); margin:0; max-width:600px; }.tool-card-footer { position:absolute; left:26px; right:26px; bottom:23px; display:flex; justify-content:space-between; font-weight:800; font-size:14px; color:var(--accent); }.tool-card.muted { opacity:.68; }
.site-footer { padding:28px 0; color:var(--muted); font-size:13px; border-top:1px solid var(--border); }

.tool-page { padding-top:55px; padding-bottom:90px; }
.tool-intro { display:grid; grid-template-columns:1fr auto; align-items:end; gap:40px; margin-bottom:38px; }
.tool-intro h1 { font-size:clamp(42px,5vw,66px); margin-bottom:15px; }.tool-intro p { margin:0; }.intro-stat { width:150px; height:120px; border:1px solid var(--border); border-radius:20px; background:var(--white); display:flex; flex-direction:column; justify-content:center; align-items:center; box-shadow:var(--shadow-sm); }.intro-stat strong { font-size:42px; letter-spacing:-.05em; line-height:1; }.intro-stat span { font-size:12px; color:var(--muted); margin-top:7px; }
.analyzer-layout { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(300px,.75fr); gap:20px; align-items:start; }
.panel { background:var(--white); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.input-panel { padding:26px; }.criteria-panel { padding:24px; position:sticky; top:96px; }
.panel-head { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-bottom:22px; border-bottom:1px solid var(--border); margin-bottom:22px; }.panel-head > div { display:flex; align-items:center; gap:11px; }.panel-head h2 { margin:0; font-size:19px; letter-spacing:-.02em; }.panel-head.compact { margin-bottom:8px; }.step-chip { min-width:34px; height:28px; display:grid; place-items:center; border-radius:8px; background:var(--cyan-soft); color:#007C95; font-size:11px; font-weight:850; }.privacy-note { color:var(--muted); font-size:11px; }
.form-grid.two-cols { display:grid; grid-template-columns:1fr 1fr; gap:14px; }.field { display:grid; gap:7px; margin-bottom:16px; }.field > span:first-child { font-size:13px; font-weight:760; }.field small { color:var(--muted); font-weight:500; }
input, select, textarea { width:100%; border:1px solid var(--border); border-radius:11px; background:#FCFCFD; color:var(--text); outline:none; transition:.18s ease; }
input, select { height:47px; padding:0 13px; } textarea { min-height:330px; resize:vertical; padding:14px 15px 35px; line-height:1.55; }
input:focus, select:focus, textarea:focus { border-color:rgba(0,180,216,.7); box-shadow:0 0 0 4px rgba(0,180,216,.09); background:#fff; }
.textarea-field { position:relative; }.char-count { position:absolute; right:12px; bottom:27px; color:var(--muted); font-size:11px; background:rgba(255,255,255,.88); padding:3px 6px; border-radius:5px; }.char-count strong { color:var(--text); }.honeypot { position:absolute!important; left:-9999px!important; width:1px!important; height:1px!important; overflow:hidden!important; }.form-actions { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }.text-button { border:0; background:none; color:var(--accent); font-weight:750; padding:9px 4px; }.text-button:hover { color:var(--cyan); }.form-hint { margin:15px 0 0; color:var(--muted); font-size:11px; }
.criteria-list > div { display:grid; grid-template-columns:35px 1fr; gap:10px; padding:15px 2px; border-bottom:1px solid var(--border); }.criteria-list > div:last-child { border-bottom:0; }.criteria-list > div > span { color:#9AA3B2; font-size:11px; font-weight:800; padding-top:3px; }.criteria-list p { display:grid; margin:0; }.criteria-list strong { font-size:13px; }.criteria-list small { font-size:11px; color:var(--muted); margin-top:2px; }

.results { margin-top:75px; }.results-heading { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:20px; }.results-heading h2 { margin:7px 0 0; font-size:34px; letter-spacing:-.035em; }.score-dashboard { display:grid; grid-template-columns:.85fr 1.15fr; gap:18px; }.overall-card { padding:28px; display:flex; align-items:center; gap:28px; }.score-ring { --score:0; flex:0 0 150px; width:150px; height:150px; border-radius:50%; display:grid; place-items:center; background:conic-gradient(var(--cyan) calc(var(--score) * 1%), #EDF0F3 0); position:relative; }.score-ring::after { content:""; position:absolute; width:118px; height:118px; border-radius:50%; background:var(--white); }.score-ring > div { position:relative; z-index:1; display:flex; align-items:baseline; }.score-ring strong { font-size:42px; letter-spacing:-.05em; }.score-ring span { font-size:12px; color:var(--muted); }.score-label { color:var(--cyan); font-size:11px; font-weight:850; text-transform:uppercase; letter-spacing:.1em; }.overall-copy h3 { margin:7px 0 6px; font-size:23px; letter-spacing:-.025em; }.overall-copy p { color:var(--muted); margin:0; font-size:13px; }.score-list-card { padding:25px; }.score-list-card h3 { margin:0 0 18px; font-size:16px; }.score-bars { display:grid; grid-template-columns:1fr 1fr; gap:14px 22px; }.score-bar-row { display:grid; grid-template-columns:1fr auto; gap:7px 10px; align-items:center; }.score-bar-row label { font-size:11px; color:var(--muted); }.score-bar-row strong { font-size:11px; }.bar-track { grid-column:1/-1; height:7px; background:var(--soft); border-radius:99px; overflow:hidden; }.bar-track i { display:block; height:100%; width:0; background:var(--cyan); border-radius:99px; transition:width .7s ease; }
.result-grid.two-result-cols { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:18px; }.result-card { padding:25px; }.full-card { margin-top:18px; }.result-title { display:flex; gap:11px; align-items:flex-start; margin-bottom:19px; }.result-title > span { flex:0 0 34px; width:34px; height:34px; display:grid; place-items:center; border-radius:10px; font-weight:850; }.result-title.success > span { color:var(--success); background:var(--success-soft); }.result-title.warning > span { color:var(--warning); background:var(--warning-soft); }.result-title.cyan > span { color:#007C95; background:var(--cyan-soft); }.result-title.accent > span { color:var(--accent); background:#F0F0F5; }.result-title h3 { margin:2px 0 0; font-size:17px; }.result-title p { margin:3px 0 0; color:var(--muted); font-size:12px; }
.insight-list { display:grid; gap:13px; }.insight { padding:14px 15px; border-radius:12px; background:var(--bg); border:1px solid #EFF1F4; }.insight strong { display:block; font-size:13px; margin-bottom:3px; }.insight p { margin:0; color:var(--muted); font-size:12px; }
.phrase-list { display:grid; gap:12px; }.phrase-item { display:grid; grid-template-columns:auto 1fr; gap:14px; padding:15px; border:1px solid var(--border); border-radius:13px; }.severity-dot { width:9px; height:9px; border-radius:50%; margin-top:6px; background:#98A2B3; }.severity-dot.medium { background:var(--warning); }.severity-dot.high { background:var(--danger); }.phrase-item strong { font-size:13px; }.phrase-item p { margin:3px 0 0; font-size:12px; color:var(--muted); }.phrase-suggestion { color:var(--text)!important; margin-top:7px!important; }.phrase-suggestion span { color:var(--cyan); font-weight:800; }
.candidate-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }.candidate-box { padding:17px; border-radius:14px; background:var(--bg); }.candidate-box span { display:block; color:var(--cyan); font-size:10px; font-weight:850; text-transform:uppercase; letter-spacing:.08em; margin-bottom:7px; }.candidate-box p { margin:0; font-size:13px; }
.requirements-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }.req-col { padding:17px; border:1px solid var(--border); border-radius:14px; }.req-col h4 { margin:0 0 10px; font-size:13px; }.req-col ul { margin:0; padding-left:18px; color:var(--muted); font-size:12px; }.req-col li+li { margin-top:7px; }
.recommendation-list { display:grid; gap:12px; }.recommendation { display:grid; grid-template-columns:42px 1fr; gap:13px; padding:16px; background:var(--bg); border-radius:14px; }.recommendation-num { width:38px; height:38px; display:grid; place-items:center; color:#fff; background:var(--accent); border-radius:11px; font-weight:850; }.recommendation h4 { margin:0; font-size:14px; }.recommendation p { margin:4px 0 0; color:var(--muted); font-size:12px; }.recommendation .example { color:var(--text); margin-top:7px; }.recommendation .example span { color:var(--cyan); font-weight:800; }
.optimized-card { margin-top:18px; overflow:hidden; }.optimized-head { padding:24px 25px 6px; display:flex; justify-content:space-between; gap:20px; align-items:flex-start; }.optimized-text { margin:0 25px 25px; padding:22px; background:#0F1830; color:#EEF4F8; border-radius:16px; white-space:pre-wrap; font-size:13px; line-height:1.68; max-height:720px; overflow:auto; }

.loading-overlay { position:fixed; inset:0; z-index:100; display:none; place-items:center; padding:20px; background:rgba(11,19,43,.46); backdrop-filter:blur(8px); }.loading-overlay.is-visible { display:grid; }.loading-card { width:min(520px,100%); text-align:center; background:var(--white); border-radius:24px; padding:36px; box-shadow:0 30px 90px rgba(11,19,43,.28); }.loading-card h2 { margin:10px 0 8px; font-size:25px; letter-spacing:-.03em; }.loading-card p { color:var(--muted); font-size:13px; }.ai-loader { height:56px; display:flex; align-items:center; justify-content:center; gap:7px; margin-bottom:8px; }.ai-loader span { width:9px; height:9px; border-radius:50%; background:var(--cyan); animation:pulse 1.1s infinite ease-in-out; }.ai-loader span:nth-child(2){animation-delay:.15s}.ai-loader span:nth-child(3){animation-delay:.3s}@keyframes pulse{0%,100%{transform:translateY(0);opacity:.35}50%{transform:translateY(-9px);opacity:1}}.loading-track { height:5px; background:var(--soft); border-radius:999px; margin-top:20px; overflow:hidden; }.loading-track i { display:block; width:8%; height:100%; background:var(--cyan); border-radius:999px; transition:width .5s ease; }
.toast { position:fixed; right:24px; bottom:24px; z-index:120; max-width:390px; padding:13px 16px; background:var(--text); color:#fff; border-radius:12px; box-shadow:var(--shadow); font-size:13px; opacity:0; transform:translateY(12px); pointer-events:none; transition:.22s ease; }.toast.show { opacity:1; transform:translateY(0); }.toast.error { background:#7A3030; }

@media (max-width: 900px) {
    .hero { grid-template-columns:1fr; min-height:auto; padding-top:55px; }.hero-visual { min-height:360px; }.section-heading { grid-template-columns:1fr; gap:15px; }.analyzer-layout { grid-template-columns:1fr; }.criteria-panel { position:static; }.tool-intro { grid-template-columns:1fr; }.intro-stat { display:none; }.score-dashboard, .result-grid.two-result-cols { grid-template-columns:1fr; }.candidate-grid, .requirements-grid { grid-template-columns:1fr; }
}
@media (max-width: 650px) {
    .shell { width:min(100% - 24px,1180px); }.header-badge { display:none; }.hero { gap:10px; padding-bottom:55px; }.hero h1 { font-size:48px; }.hero-visual { min-height:330px; }.data-card-main { width:78%; left:10%; }.float-a { right:2%; }.float-b { left:2%; }.tools-section { padding:60px 0; }.tool-grid { grid-template-columns:1fr; }.section-heading h2 { font-size:31px; }.form-grid.two-cols { grid-template-columns:1fr; gap:0; }.input-panel, .criteria-panel, .result-card { padding:19px; border-radius:17px; }.panel-head { align-items:flex-start; }.privacy-note { display:none; }.score-dashboard { gap:12px; }.overall-card { flex-direction:column; align-items:flex-start; padding:21px; }.score-ring { width:130px; height:130px; flex-basis:130px; }.score-ring::after { width:102px; height:102px; }.score-bars { grid-template-columns:1fr; }.results-heading { align-items:flex-start; flex-direction:column; }.optimized-head { flex-direction:column; padding:19px 19px 4px; }.optimized-text { margin:0 19px 19px; }.tool-page { padding-top:35px; }.tool-intro h1 { font-size:43px; }.tool-intro p { font-size:16px; }
}

/* --- HR ToolBox V3: Navigation, SEO content & Sharing --- */
.header-nav { display:flex; align-items:center; gap:22px; }
.header-nav > a { font-size:13px; color:var(--muted); font-weight:700; }
.header-nav > a:hover { color:var(--cyan); }
.expanded-grid { grid-template-columns:repeat(4,1fr); }
.expanded-grid .tool-card { min-height:280px; }
.expanded-grid .tool-icon { font-size:13px; letter-spacing:-.02em; }
.benefits-section { padding:90px 0; border-top:1px solid var(--border); background:var(--bg); }
.compact-heading { margin-bottom:30px; }
.benefit-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.benefit-grid article { position:relative; padding:28px; background:var(--white); border:1px solid var(--border); border-radius:20px; box-shadow:var(--shadow-sm); }
.benefit-grid article > span { display:inline-grid; place-items:center; min-width:34px; height:28px; padding:0 9px; border-radius:8px; background:var(--cyan-soft); color:#007C95; font-size:11px; font-weight:850; }
.benefit-grid h3 { margin:22px 0 8px; font-size:20px; letter-spacing:-.02em; }
.benefit-grid p { margin:0; color:var(--muted); font-size:13px; }
.cta-section { padding:80px 0 95px; background:var(--white); border-top:1px solid var(--border); }
.cta-box { display:flex; justify-content:space-between; align-items:center; gap:40px; padding:40px; border-radius:24px; background:var(--text); color:var(--white); overflow:hidden; position:relative; }
.cta-box::after { content:""; position:absolute; right:-100px; top:-150px; width:360px; height:360px; border-radius:50%; background:rgba(0,180,216,.12); }
.cta-box > * { position:relative; z-index:1; }
.cta-box h2 { margin:9px 0 7px; font-size:32px; letter-spacing:-.035em; }
.cta-box p { margin:0; color:#C7D0DD; max-width:700px; }
.cta-box .btn-primary { background:var(--cyan); color:var(--text); box-shadow:none; white-space:nowrap; }
.cta-box .btn-primary:hover { background:var(--white); }
.footer-inner { display:flex; justify-content:space-between; align-items:center; gap:20px; }
.footer-inner a { font-weight:700; }
.footer-inner a:hover { color:var(--cyan); }
.tool-trust { display:flex; flex-wrap:wrap; gap:14px; margin-top:18px; color:var(--muted); font-size:12px; }

.share-result-card { margin-top:18px; display:grid; grid-template-columns:280px 1fr; overflow:hidden; }
.share-score-preview { min-height:280px; padding:30px; background:var(--text); color:var(--white); display:flex; flex-direction:column; justify-content:center; align-items:flex-start; position:relative; overflow:hidden; }
.share-score-preview::before { content:""; position:absolute; width:230px; height:230px; border-radius:50%; right:-100px; bottom:-100px; background:rgba(0,180,216,.16); }
.share-score-preview::after { content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:28px 28px; }
.share-score-preview > * { position:relative; z-index:1; }
.share-kicker { color:var(--cyan); font-size:10px; font-weight:850; text-transform:uppercase; letter-spacing:.1em; }
.share-score-preview strong { display:flex; align-items:baseline; gap:4px; margin:20px 0 8px; font-size:70px; line-height:.9; letter-spacing:-.065em; }
.share-score-preview strong small { color:#AAB6C8; font-size:16px; letter-spacing:0; }
.share-score-preview > span:last-child { color:#D7DEE8; font-size:13px; }
.share-actions-copy { padding:28px 30px; }
.share-actions-copy h3 { margin:7px 0 6px; font-size:22px; letter-spacing:-.025em; }
.share-actions-copy > p { color:var(--muted); margin:0 0 14px; font-size:13px; }
.share-text { width:100%; min-height:112px; padding:14px; resize:vertical; border:1px solid var(--border); border-radius:12px; color:var(--text); background:var(--bg); font:inherit; font-size:12px; line-height:1.5; }
.share-buttons { display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.share-hint { display:block; margin-top:9px; color:var(--muted); font-size:10px; }
.tool-faq { padding:80px 0 10px; }
.tool-faq > h2 { margin:8px 0 24px; font-size:32px; letter-spacing:-.035em; }
.faq-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.faq-grid details { background:var(--white); border:1px solid var(--border); border-radius:14px; padding:0 18px; box-shadow:var(--shadow-sm); }
.faq-grid summary { cursor:pointer; list-style:none; padding:17px 28px 17px 0; font-size:13px; font-weight:780; position:relative; }
.faq-grid summary::-webkit-details-marker { display:none; }
.faq-grid summary::after { content:"+"; position:absolute; right:0; top:14px; color:var(--cyan); font-size:20px; font-weight:500; }
.faq-grid details[open] summary::after { content:"−"; }
.faq-grid details p { margin:0; padding:0 0 18px; color:var(--muted); font-size:12px; }

@media (max-width: 1050px) {
    .expanded-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 900px) {
    .benefit-grid { grid-template-columns:1fr; }
    .cta-box { align-items:flex-start; flex-direction:column; }
    .share-result-card { grid-template-columns:220px 1fr; }
    .faq-grid { grid-template-columns:1fr; }
}
@media (max-width: 650px) {
    .header-nav > a { display:none; }
    .expanded-grid { grid-template-columns:1fr; }
    .cta-box { padding:27px; border-radius:19px; }
    .cta-box h2 { font-size:27px; }
    .share-result-card { grid-template-columns:1fr; }
    .share-score-preview { min-height:210px; }
    .share-actions-copy { padding:22px 19px; }
    .footer-inner { flex-direction:column; align-items:flex-start; }
}

/* --- HR ToolBox V4: HR AI Readiness Check --- */
.readiness-intro { margin-bottom:32px; }
.readiness-layout { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(300px,.72fr); gap:20px; align-items:start; }
.readiness-form { padding:28px; overflow:hidden; }
.readiness-progress-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; }
.readiness-progress-head h2 { margin:7px 0 0; font-size:24px; letter-spacing:-.03em; }
.readiness-progress-head > strong { color:var(--muted); font-size:12px; }
.readiness-progress { height:6px; margin:20px 0 28px; background:var(--soft); border-radius:999px; overflow:hidden; }
.readiness-progress i { display:block; height:100%; width:16%; border-radius:inherit; background:linear-gradient(90deg,var(--accent),var(--cyan)); transition:width .32s ease; }
.readiness-step { display:none; min-height:510px; animation:readinessFade .2s ease; }
.readiness-step.is-active { display:block; }
@keyframes readinessFade { from { opacity:.3; transform:translateY(5px); } to { opacity:1; transform:none; } }
.step-copy { margin-bottom:24px; }
.step-copy h3 { margin:0 0 7px; font-size:23px; letter-spacing:-.025em; }
.step-copy p { margin:0; color:var(--muted); font-size:13px; }
.readiness-context-grid { margin-top:8px; }
.readiness-start-card { margin-top:18px; padding:22px; display:grid; grid-template-columns:1.4fr repeat(3,.7fr); gap:12px; align-items:center; background:linear-gradient(135deg,#0B132B,#18233F); color:#fff; border-radius:17px; }
.readiness-start-card > span { color:var(--cyan); font-size:11px; text-transform:uppercase; letter-spacing:.08em; font-weight:850; }
.readiness-start-card > div { display:grid; justify-items:center; gap:3px; }
.readiness-start-card strong { font-size:24px; }
.readiness-start-card small { color:#BFC9D8; font-size:10px; }
.readiness-start-card p { grid-column:1/-1; margin:6px 0 0; padding-top:13px; border-top:1px solid rgba(255,255,255,.12); color:#C7D0DD; font-size:11px; }
.readiness-question-list { display:grid; gap:14px; }
.readiness-question { margin:0; padding:18px; border:1px solid var(--border); border-radius:16px; background:#FCFCFD; transition:.18s ease; }
.readiness-question.is-error { border-color:#D87979; box-shadow:0 0 0 3px rgba(181,71,71,.08); }
.readiness-question legend { width:100%; display:grid; grid-template-columns:30px 1fr; gap:10px; align-items:start; padding:0; color:var(--text); font-size:13px; font-weight:730; line-height:1.5; }
.readiness-question legend > span { display:grid; place-items:center; width:28px; height:24px; border-radius:7px; background:var(--cyan-soft); color:#007C95; font-size:10px; font-weight:850; }
.readiness-scale { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-top:16px; }
.scale-choice { position:relative; cursor:pointer; }
.scale-choice input { position:absolute; opacity:0; pointer-events:none; }
.scale-choice > span { transition:.18s ease; }
.scale-number { min-height:43px; display:grid; place-items:center; border:1px solid var(--border); border-radius:10px 10px 0 0; background:#fff; color:var(--text); font-weight:850; }
.scale-label { min-height:31px; display:grid; place-items:center; padding:4px; border:1px solid var(--border); border-top:0; border-radius:0 0 10px 10px; background:#F7F8FA; color:var(--muted); text-align:center; font-size:9px; line-height:1.2; }
.scale-choice:hover .scale-number { border-color:rgba(0,180,216,.55); }
.scale-choice input:focus-visible + .scale-number { box-shadow:0 0 0 4px rgba(0,180,216,.11); }
.scale-choice input:checked + .scale-number { color:#fff; background:var(--accent); border-color:var(--accent); }
.scale-choice input:checked + .scale-number + .scale-label { color:#006E84; background:var(--cyan-soft); border-color:rgba(0,180,216,.28); font-weight:760; }
.readiness-nav { display:flex; align-items:center; gap:10px; padding-top:24px; margin-top:26px; border-top:1px solid var(--border); }
.readiness-nav-spacer { flex:1; }
.readiness-hint { margin-top:12px; }
.readiness-side { position:sticky; top:96px; padding:24px; }
.readiness-dimensions { display:grid; }
.dimension-nav-item { display:grid; grid-template-columns:34px 1fr 10px; gap:10px; align-items:center; padding:15px 2px; border-bottom:1px solid var(--border); opacity:.62; transition:.18s ease; }
.dimension-nav-item > span { color:#9AA3B2; font-size:11px; font-weight:850; }
.dimension-nav-item p { display:grid; margin:0; }
.dimension-nav-item strong { font-size:12px; }
.dimension-nav-item small { margin-top:2px; color:var(--muted); font-size:10px; line-height:1.35; }
.dimension-nav-item i { width:8px; height:8px; border-radius:50%; background:#D7DCE3; }
.dimension-nav-item.is-active { opacity:1; }
.dimension-nav-item.is-active i { background:var(--cyan); box-shadow:0 0 0 5px rgba(0,180,216,.09); }
.dimension-nav-item.is-complete { opacity:1; }
.dimension-nav-item.is-complete i { background:var(--success); }
.readiness-side-note { margin-top:20px; padding:16px; border-radius:14px; background:var(--soft); }
.readiness-side-note span { color:var(--accent); font-size:10px; font-weight:850; text-transform:uppercase; letter-spacing:.08em; }
.readiness-side-note p { margin:6px 0 0; color:var(--muted); font-size:10px; line-height:1.5; }
.readiness-results { margin-top:80px; }
.readiness-score-bars { grid-template-columns:1fr; }
.maturity-levels { display:grid; grid-template-columns:repeat(5,1fr); gap:5px; margin-top:18px; }
.maturity-level { display:grid; gap:5px; min-width:0; }
.maturity-level i { display:block; height:5px; border-radius:99px; background:#E8EBEF; }
.maturity-level span { overflow:hidden; text-overflow:ellipsis; color:#9AA3B2; font-size:8px; white-space:nowrap; }
.maturity-level.is-reached i { background:rgba(0,180,216,.45); }
.maturity-level.is-current i { background:var(--cyan); box-shadow:0 0 0 2px rgba(0,180,216,.08); }
.maturity-level.is-current span { color:var(--text); font-weight:800; }
.quick-win-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.quick-win { min-height:170px; padding:18px; border:1px solid var(--border); border-radius:15px; background:var(--bg); }
.quick-win-number { display:inline-grid; place-items:center; min-width:32px; height:27px; border-radius:8px; background:var(--cyan-soft); color:#007C95; font-size:10px; font-weight:850; }
.quick-win h4 { margin:20px 0 7px; font-size:15px; }
.quick-win p { margin:0; color:var(--muted); font-size:11px; }
.readiness-roadmap { position:relative; display:grid; gap:0; }
.readiness-roadmap::before { content:""; position:absolute; left:31px; top:38px; bottom:38px; width:1px; background:var(--border); }
.roadmap-item { position:relative; z-index:1; display:grid; grid-template-columns:64px 1fr; gap:18px; padding:14px 0; }
.roadmap-marker { width:64px; min-height:64px; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px solid var(--border); border-radius:15px; background:#fff; box-shadow:var(--shadow-sm); }
.roadmap-marker strong { color:var(--cyan); font-size:18px; line-height:1; }
.roadmap-marker span { margin-top:5px; color:var(--muted); font-size:8px; font-weight:800; text-transform:uppercase; }
.roadmap-copy { padding:5px 0; }
.roadmap-copy h4 { margin:0; font-size:15px; }
.roadmap-copy p { margin:5px 0 0; color:var(--muted); font-size:11px; }
.roadmap-copy .roadmap-first { color:var(--text); }
.roadmap-first span { color:var(--cyan); font-weight:800; }
.readiness-watch-card { margin-top:18px; padding:22px 24px; display:grid; grid-template-columns:46px 1fr; gap:16px; align-items:start; background:linear-gradient(135deg,#FFF8EE,#FFFFFF); }
.readiness-watch-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:12px; background:var(--warning-soft); color:var(--warning); font-weight:900; }
.readiness-watch-card p { margin:5px 0 0; color:var(--muted); font-size:12px; }

@media (max-width: 900px) {
    .readiness-layout { grid-template-columns:1fr; }
    .readiness-side { position:static; }
    .quick-win-grid { grid-template-columns:1fr; }
}
@media (max-width: 650px) {
    .readiness-form, .readiness-side { padding:19px; border-radius:17px; }
    .readiness-step { min-height:0; }
    .readiness-progress-head { align-items:flex-start; }
    .readiness-progress-head h2 { font-size:20px; }
    .readiness-start-card { grid-template-columns:1fr repeat(3,.8fr); padding:17px; }
    .readiness-start-card > span { grid-column:1/-1; }
    .readiness-question { padding:14px; }
    .readiness-question legend { font-size:12px; }
    .readiness-scale { gap:4px; }
    .scale-number { min-height:39px; font-size:12px; }
    .scale-label { min-height:28px; font-size:7px; }
    .readiness-nav { flex-wrap:wrap; }
    .readiness-nav-spacer { display:none; }
    .readiness-nav .btn { flex:1 1 auto; }
    .maturity-level span { display:none; }
    .roadmap-item { grid-template-columns:54px 1fr; gap:12px; }
    .roadmap-marker { width:54px; min-height:58px; }
    .readiness-roadmap::before { left:26px; }
}
.footer-links { display:flex; flex-wrap:wrap; gap:18px; }
@media (max-width:650px) { .footer-links { display:grid; gap:8px; } }

/* ===== Tool #3: Interview Designer ===== */
.interview-builder-layout { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(300px,.75fr); gap:20px; align-items:start; }
.interview-form { padding:26px; }
.interview-context-field textarea { min-height:220px; }
.interview-side-panel { padding:24px; position:sticky; top:96px; }
.interview-side-note { margin-top:20px; padding:16px; border-radius:14px; background:linear-gradient(135deg,var(--cyan-soft),#fff); border:1px solid rgba(0,180,216,.14); }
.interview-side-note span { color:#007C95; font-size:10px; font-weight:850; text-transform:uppercase; letter-spacing:.08em; }
.interview-side-note p { margin:6px 0 0; color:var(--muted); font-size:11px; line-height:1.5; }
.result-actions { display:flex; gap:9px; flex-wrap:wrap; justify-content:flex-end; }
.interview-results { margin-top:80px; }
.interview-overview-card { padding:28px; display:grid; grid-template-columns:1fr auto; gap:28px; align-items:center; background:linear-gradient(135deg,#fff,#F7FCFD); }
.interview-overview-card h3 { margin:8px 0 6px; font-size:25px; letter-spacing:-.03em; }
.interview-overview-card p { margin:0; max-width:760px; color:var(--muted); font-size:13px; }
.interview-meta { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.interview-meta span { min-width:108px; min-height:72px; padding:12px 14px; display:grid; place-items:center; align-content:center; border:1px solid var(--border); border-radius:14px; background:#fff; color:var(--muted); font-size:10px; text-align:center; }
.interview-meta strong { display:block; color:var(--text); font-size:19px; letter-spacing:-.03em; }
.interview-timeline { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.interview-timeline-item { min-width:0; padding:16px; border:1px solid var(--border); border-radius:15px; background:var(--bg); }
.interview-time { display:flex; align-items:baseline; gap:4px; margin-bottom:18px; }
.interview-time strong { color:var(--cyan); font-size:25px; letter-spacing:-.04em; }
.interview-time span { color:var(--muted); font-size:9px; font-weight:800; text-transform:uppercase; }
.interview-phase-copy { display:grid; grid-template-columns:26px 1fr; gap:4px 9px; }
.interview-phase-index { grid-row:1/3; width:25px; height:23px; display:grid; place-items:center; border-radius:7px; background:#fff; color:#9AA3B2; font-size:9px; font-weight:850; }
.interview-phase-copy h4 { margin:1px 0 0; font-size:13px; }
.interview-phase-copy p { grid-column:2; margin:0; color:var(--muted); font-size:10px; line-height:1.45; }
.question-chip-list { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.question-chip-list.stacked { grid-template-columns:1fr; }
.question-chip { display:grid; grid-template-columns:28px 1fr; gap:10px; padding:14px; border:1px solid var(--border); border-radius:13px; background:var(--bg); }
.question-chip-number { width:27px; height:25px; display:grid; place-items:center; border-radius:7px; background:var(--cyan-soft); color:#007C95; font-size:9px; font-weight:850; }
.question-chip p { margin:1px 0 0; font-size:12px; line-height:1.5; }
.interview-section-heading { margin:64px 0 20px; max-width:790px; }
.interview-section-heading h2 { margin:8px 0 8px; font-size:32px; letter-spacing:-.035em; }
.interview-section-heading p { margin:0; color:var(--muted); font-size:13px; }
.interview-competency-list { display:grid; gap:18px; }
.interview-competency-card { overflow:hidden; }
.competency-head { padding:25px; display:grid; grid-template-columns:52px 1fr; gap:16px; align-items:start; border-bottom:1px solid var(--border); background:linear-gradient(135deg,#fff,#FAFBFC); }
.competency-number { width:50px; height:50px; display:grid; place-items:center; border-radius:14px; background:var(--text); color:var(--cyan); font-size:13px; font-weight:900; }
.competency-head-copy h3 { margin:7px 0 5px; font-size:22px; letter-spacing:-.025em; }
.competency-head-copy p { margin:0; color:var(--muted); font-size:12px; }
.competency-main-question { margin:24px 25px 0; padding:21px; border-radius:16px; background:#0F1830; color:#fff; }
.competency-main-question > span { display:block; margin-bottom:7px; color:var(--cyan); font-size:10px; font-weight:850; text-transform:uppercase; letter-spacing:.09em; }
.competency-main-question p { margin:0; font-size:16px; line-height:1.55; font-weight:650; }
.competency-probes { padding:22px 25px 0; }
.competency-probes h4 { margin:0 0 10px; font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.probe-row { display:grid; grid-template-columns:30px 1fr; gap:10px; padding:10px 0; border-bottom:1px solid var(--border); }
.probe-row:last-child { border-bottom:0; }
.probe-row span { color:var(--cyan); font-size:10px; font-weight:900; }
.probe-row p { margin:0; font-size:12px; }
.competency-signals { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:19px 25px; }
.competency-list-block { padding:16px; border-radius:14px; border:1px solid var(--border); background:var(--bg); }
.competency-list-block.positive { background:var(--success-soft); border-color:rgba(22,134,107,.12); }
.competency-list-block.warning { background:var(--warning-soft); border-color:rgba(196,113,33,.12); }
.competency-list-block h5 { margin:0 0 9px; font-size:11px; }
.competency-list-block ul { margin:0; padding-left:17px; color:var(--muted); font-size:10px; line-height:1.55; }
.competency-list-block li+li { margin-top:5px; }
.competency-scoring { padding:20px 25px 24px; border-top:1px solid var(--border); }
.scoring-title { margin-bottom:12px; color:var(--muted); font-size:10px; font-weight:850; text-transform:uppercase; letter-spacing:.08em; }
.score-anchor-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; }
.score-anchor { padding:14px; border:1px solid var(--border); border-radius:13px; background:#fff; }
.score-anchor strong { width:30px; height:30px; display:grid; place-items:center; border-radius:9px; background:var(--soft); color:var(--accent); font-size:13px; }
.score-anchor p { margin:10px 0 0; color:var(--muted); font-size:10px; line-height:1.45; }
.score-anchor:last-child { border-color:rgba(0,180,216,.3); background:var(--cyan-soft); }
.score-anchor:last-child strong { background:var(--cyan); color:#fff; }
.competency-rating { padding:16px 25px; display:flex; align-items:center; justify-content:space-between; gap:20px; background:#F9FAFB; border-top:1px solid var(--border); }
.competency-rating > div:first-child { display:grid; }
.competency-rating strong { font-size:12px; }
.competency-rating small { color:var(--muted); font-size:9px; }
.rating-options { display:flex; gap:6px; }
.rating-option { position:relative; cursor:pointer; }
.rating-option input { position:absolute; opacity:0; pointer-events:none; }
.rating-option span { width:40px; height:38px; display:grid; place-items:center; border:1px solid var(--border); border-radius:10px; background:#fff; font-weight:850; font-size:12px; transition:.17s ease; }
.rating-option:hover span { border-color:rgba(0,180,216,.55); }
.rating-option input:checked + span { color:#fff; background:var(--accent); border-color:var(--accent); box-shadow:0 7px 16px rgba(74,78,105,.16); }
.interview-scorecard { margin-top:18px; padding:24px 26px; display:grid; grid-template-columns:1fr auto; gap:25px; align-items:center; background:linear-gradient(135deg,#0B132B,#18233F); color:#fff; }
.scorecard-main h3 { margin:7px 0 5px; font-size:22px; }
.scorecard-main p { margin:0; max-width:760px; color:#C6D0DF; font-size:11px; }
.scorecard-score { min-width:145px; padding:13px 18px; text-align:center; border:1px solid rgba(255,255,255,.12); border-radius:15px; background:rgba(255,255,255,.06); }
.scorecard-score strong { color:var(--cyan); font-size:42px; letter-spacing:-.05em; }
.scorecard-score > span { color:#AAB6C8; font-size:11px; }
.scorecard-score small { display:block; margin-top:2px; color:#AAB6C8; font-size:8px; }
.interview-disclaimer-card { margin-top:18px; padding:19px 22px; border-left:4px solid var(--cyan); box-shadow:none; }
.interview-disclaimer-card strong { font-size:12px; }
.interview-disclaimer-card p { margin:5px 0 0; color:var(--muted); font-size:10px; }
.print-only { display:none; }

@media (max-width: 1050px) {
    .interview-timeline { grid-template-columns:repeat(3,1fr); }
}
@media (max-width: 900px) {
    .interview-builder-layout { grid-template-columns:1fr; }
    .interview-side-panel { position:static; }
    .interview-overview-card { grid-template-columns:1fr; }
    .interview-meta { justify-content:flex-start; }
    .score-anchor-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width: 650px) {
    .interview-timeline { grid-template-columns:1fr; }
    .question-chip-list { grid-template-columns:1fr; }
    .competency-head { grid-template-columns:42px 1fr; padding:19px; }
    .competency-number { width:40px; height:40px; }
    .competency-main-question { margin:18px 18px 0; padding:17px; }
    .competency-main-question p { font-size:14px; }
    .competency-probes { padding:18px 18px 0; }
    .competency-signals { grid-template-columns:1fr; padding:16px 18px; }
    .competency-scoring { padding:18px; }
    .score-anchor-grid { grid-template-columns:1fr; }
    .competency-rating { padding:14px 18px; align-items:flex-start; flex-direction:column; }
    .rating-options { width:100%; }
    .rating-option { flex:1; }
    .rating-option span { width:100%; }
    .interview-scorecard { grid-template-columns:1fr; }
    .scorecard-score { width:100%; }
    .result-actions { width:100%; justify-content:flex-start; }
}

@media print {
    @page { margin: 13mm; }
    body { background:#fff; color:#0B132B; font-size:10pt; }
    .no-print, .site-header, .tool-faq, .loading-overlay, .toast { display:none !important; }
    .print-only { display:block !important; }
    .shell { width:100%; max-width:none; }
    .tool-page { padding:0; }
    .interview-results { margin:0; }
    .print-header { padding-bottom:12mm; border-bottom:1px solid #D9DEE6; margin-bottom:7mm; }
    .print-header p { margin:3mm 0 0; color:#667085; }
    .panel { box-shadow:none; break-inside:avoid; border-color:#D9DEE6; }
    .interview-overview-card { margin-bottom:5mm; }
    .full-card, .result-grid.two-result-cols { margin-top:5mm; }
    .interview-competency-card { margin-bottom:5mm; break-inside:avoid; }
    .competency-main-question { background:#F1F4F7 !important; color:#0B132B !important; }
    .competency-main-question > span { color:#007C95 !important; }
    .interview-section-heading { margin-top:8mm; }
    .interview-timeline { grid-template-columns:repeat(5,1fr); }
    .score-anchor-grid { grid-template-columns:repeat(4,1fr); }
    .result-grid.two-result-cols { display:grid; grid-template-columns:1fr 1fr; }
}

/* --- HR ToolBox V6: Skills Gap Analyzer --- */
.skills-builder-layout { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(300px,.72fr); gap:20px; align-items:start; }
.skills-form { padding:28px; }
.skills-form .textarea-field textarea { min-height:155px; }
.skills-side-panel { position:sticky; top:96px; padding:24px; }
.skills-side-note { margin-top:20px; padding:16px; border-radius:14px; background:linear-gradient(135deg,var(--soft),#fff); }
.skills-side-note span { color:var(--accent); font-size:10px; font-weight:850; text-transform:uppercase; letter-spacing:.08em; }
.skills-side-note p { margin:7px 0 0; color:var(--muted); font-size:10px; line-height:1.55; }
.skills-side-note strong { color:var(--text); }
.skills-results { margin-top:80px; }
.skills-overview-card { padding:28px; display:grid; grid-template-columns:1fr auto; gap:28px; align-items:center; background:linear-gradient(135deg,#fff,#F4FCFE); }
.skills-overview-copy h3 { margin:8px 0 6px; font-size:25px; letter-spacing:-.03em; }
.skills-overview-copy > p { margin:0; max-width:780px; color:var(--muted); font-size:13px; }
.skills-role-route { display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-top:18px; }
.skills-role-route span { padding:8px 12px; border-radius:10px; background:var(--soft); color:var(--text); font-size:10px; font-weight:780; }
.skills-role-route i { color:var(--cyan); font-style:normal; font-weight:900; }
.skills-fit-box { min-width:190px; padding:20px; text-align:center; border-radius:18px; background:#0B132B; color:#fff; }
.skills-fit-box > span { display:block; color:#AAB6C8; font-size:9px; font-weight:850; text-transform:uppercase; letter-spacing:.09em; }
.skills-fit-box strong { display:inline-block; margin-top:5px; color:var(--cyan); font-size:52px; line-height:1; letter-spacing:-.06em; }
.skills-fit-box small { color:#AAB6C8; font-size:11px; }
.skills-fit-box em { display:block; margin-top:7px; color:#D6DDEA; font-size:9px; font-style:normal; }
.skills-profile-note { margin-top:14px; padding:17px 20px; display:grid; grid-template-columns:32px 1fr; gap:12px; align-items:start; box-shadow:none; border-left:4px solid var(--cyan); }
.skills-profile-note > span { width:30px; height:30px; display:grid; place-items:center; border-radius:9px; background:var(--cyan-soft); color:#007C95; font-weight:900; }
.skills-profile-note p { margin:4px 0 0; color:var(--muted); font-size:11px; }
.skills-section-heading { margin:64px 0 20px; max-width:800px; }
.skills-section-heading h2 { margin:8px 0; font-size:32px; letter-spacing:-.035em; }
.skills-section-heading p { margin:0; color:var(--muted); font-size:13px; }
.skills-matrix { display:grid; gap:16px; }
.skill-gap-card { overflow:hidden; }
.skill-gap-head { padding:23px 25px; display:grid; grid-template-columns:46px 1fr auto; gap:15px; align-items:start; border-bottom:1px solid var(--border); background:linear-gradient(135deg,#fff,#FAFBFC); }
.skill-gap-number { width:44px; height:44px; display:grid; place-items:center; border-radius:13px; background:var(--text); color:var(--cyan); font-size:11px; font-weight:900; }
.skill-gap-head-copy h3 { margin:7px 0 5px; font-size:20px; letter-spacing:-.02em; }
.skill-gap-head-copy > p { margin:0; color:var(--muted); font-size:11px; }
.skill-gap-meta { display:flex; gap:7px; flex-wrap:wrap; }
.skill-category, .skill-status { padding:5px 8px; border-radius:999px; font-size:8px; font-weight:850; }
.skill-category { background:var(--soft); color:var(--accent); }
.skill-status { background:#F1F3F5; color:#667085; }
.skill-status.gap-0 { background:var(--success-soft); color:var(--success); }
.skill-status.gap-1 { background:var(--cyan-soft); color:#007C95; }
.skill-status.gap-2, .skill-status.gap-3 { background:var(--warning-soft); color:var(--warning); }
.skill-importance { min-width:72px; padding:9px 10px; border:1px solid var(--border); border-radius:12px; background:#fff; text-align:center; }
.skill-importance strong { display:block; font-size:15px; }
.skill-importance span { display:block; margin-top:2px; color:var(--muted); font-size:7px; text-transform:uppercase; }
.skill-levels { padding:20px 25px; display:grid; grid-template-columns:1fr 1fr 105px; gap:13px; align-items:stretch; }
.skill-level-block { padding:14px; border:1px solid var(--border); border-radius:13px; background:var(--bg); }
.skill-level-block > span { display:block; color:var(--muted); font-size:8px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; }
.skill-level-block strong { display:inline-block; margin-top:7px; font-size:20px; }
.skill-level-block small { margin-left:5px; color:var(--muted); font-size:8px; }
.skill-level-track { height:6px; margin-top:11px; overflow:hidden; border-radius:999px; background:#E5E8EC; }
.skill-level-track i { display:block; height:100%; border-radius:inherit; background:var(--accent); }
.skill-level-block.target .skill-level-track i { background:var(--cyan); }
.skill-gap-value { display:grid; align-content:center; justify-items:center; border:1px solid rgba(0,180,216,.22); border-radius:13px; background:var(--cyan-soft); }
.skill-gap-value strong { color:#007C95; font-size:30px; line-height:1; }
.skill-gap-value span { margin-top:3px; font-size:8px; font-weight:850; text-transform:uppercase; }
.skill-gap-value small { margin-top:4px; color:var(--muted); font-size:7px; }
.skill-action-grid { padding:0 25px 24px; display:grid; grid-template-columns:1.15fr 1.15fr .7fr; gap:10px; }
.skill-action-box { padding:15px; border:1px solid var(--border); border-radius:13px; background:#fff; }
.skill-action-box > span { display:block; margin-bottom:7px; color:var(--cyan); font-size:8px; font-weight:850; text-transform:uppercase; letter-spacing:.06em; }
.skill-action-box p { margin:0; font-size:10px; line-height:1.5; }
.skills-summary-list { display:grid; gap:9px; }
.skills-summary-item { display:grid; grid-template-columns:30px 1fr; gap:10px; padding:11px; border:1px solid var(--border); border-radius:12px; background:var(--bg); }
.strength-mark, .priority-mark { width:29px; height:29px; display:grid; place-items:center; border-radius:9px; font-size:10px; font-weight:900; }
.strength-mark { background:var(--success-soft); color:var(--success); }
.priority-mark { background:var(--warning-soft); color:var(--warning); }
.skills-summary-item strong { font-size:11px; }
.skills-summary-item p { margin:3px 0 0; color:var(--muted); font-size:9px; line-height:1.45; }
.quick-win-effect { display:block; margin-top:12px; padding-top:10px; border-top:1px solid var(--border); color:#007C95; font-size:9px; line-height:1.4; }
.development-mix { display:grid; gap:16px; }
.development-mix-row > div:first-child { display:flex; justify-content:space-between; gap:15px; margin-bottom:6px; }
.development-mix-row span { font-size:10px; font-weight:720; }
.development-mix-row strong { color:var(--cyan); font-size:10px; }
.development-mix-track { height:8px; overflow:hidden; border-radius:999px; background:var(--soft); }
.development-mix-track i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--accent),var(--cyan)); }
.skills-roadmap { position:relative; display:grid; }
.skills-roadmap::before { content:""; position:absolute; left:35px; top:43px; bottom:43px; width:1px; background:var(--border); }
.skills-roadmap-item { position:relative; z-index:1; display:grid; grid-template-columns:72px 1fr; gap:18px; padding:14px 0; }
.skills-roadmap-marker { width:70px; min-height:70px; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px solid var(--border); border-radius:16px; background:#fff; box-shadow:var(--shadow-sm); }
.skills-roadmap-marker strong { color:var(--cyan); font-size:20px; }
.skills-roadmap-marker span { margin-top:4px; max-width:60px; color:var(--muted); font-size:7px; font-weight:800; text-align:center; text-transform:uppercase; }
.skills-roadmap-copy { padding:4px 0; }
.skills-roadmap-copy h4 { margin:0; font-size:15px; }
.skills-roadmap-copy .roadmap-focus { margin:4px 0 9px; color:var(--muted); font-size:10px; }
.skills-roadmap-copy ul { margin:0; padding-left:17px; font-size:10px; line-height:1.55; }
.skills-roadmap-copy li+li { margin-top:4px; }
.roadmap-success { margin-top:11px; padding:10px 12px; border-radius:11px; background:var(--cyan-soft); }
.roadmap-success span { color:#007C95; font-size:7px; font-weight:850; text-transform:uppercase; letter-spacing:.06em; }
.roadmap-success p { margin:3px 0 0; font-size:9px; }
.empty-note { margin:0; color:var(--muted); font-size:10px; }

@media (max-width: 900px) {
    .skills-builder-layout { grid-template-columns:1fr; }
    .skills-side-panel { position:static; }
    .skills-overview-card { grid-template-columns:1fr; }
    .skills-fit-box { width:100%; }
    .skill-action-grid { grid-template-columns:1fr; }
}
@media (max-width: 650px) {
    .skills-form, .skills-side-panel { padding:19px; border-radius:17px; }
    .skill-gap-head { grid-template-columns:40px 1fr; padding:18px; }
    .skill-gap-number { width:38px; height:38px; }
    .skill-importance { grid-column:2; justify-self:start; }
    .skill-levels { padding:16px 18px; grid-template-columns:1fr 1fr; }
    .skill-gap-value { grid-column:1/-1; min-height:82px; }
    .skill-action-grid { padding:0 18px 18px; }
    .skills-roadmap-item { grid-template-columns:60px 1fr; gap:12px; }
    .skills-roadmap-marker { width:58px; min-height:62px; }
    .skills-roadmap::before { left:29px; }
}

@media print {
    .skills-results { margin:0; }
    .skills-overview-card { margin-bottom:5mm; }
    .skill-gap-card { break-inside:avoid; margin-bottom:4mm; }
    .skill-action-grid { grid-template-columns:1fr 1fr 1fr; }
    .skills-summary-grid, .result-grid.two-result-cols { break-inside:avoid; }
}

/* ===== Tool #5: Leadership Check ===== */
.leadership-intro { margin-bottom:32px; }
.leadership-form { min-height:720px; }
.leadership-step { min-height:580px; }
.leadership-start-card { margin-top:18px; padding:22px; display:grid; grid-template-columns:1.4fr repeat(3,.7fr); gap:12px; align-items:center; background:linear-gradient(135deg,#0B132B,#202A45); color:#fff; border-radius:17px; }
.leadership-start-card > span { color:var(--cyan); font-size:11px; text-transform:uppercase; letter-spacing:.08em; font-weight:850; }
.leadership-start-card > div { display:grid; justify-items:center; gap:3px; }
.leadership-start-card strong { font-size:24px; }
.leadership-start-card small { color:#BFC9D8; font-size:10px; }
.leadership-start-card p { grid-column:1/-1; margin:6px 0 0; padding-top:13px; border-top:1px solid rgba(255,255,255,.12); color:#C7D0DD; font-size:11px; }
.leadership-question-list { display:grid; gap:16px; }
.leadership-question { margin:0; padding:19px; border:1px solid var(--border); border-radius:17px; background:#FCFCFD; transition:.18s ease; }
.leadership-question.is-error { border-color:#D87979; box-shadow:0 0 0 3px rgba(181,71,71,.08); }
.leadership-question legend { width:100%; display:grid; grid-template-columns:32px 1fr; gap:11px; align-items:start; padding:0; }
.leadership-question legend > span { display:grid; place-items:center; width:30px; height:26px; border-radius:8px; background:var(--cyan-soft); color:#007C95; font-size:10px; font-weight:850; }
.leadership-question legend div { display:grid; gap:5px; }
.leadership-question legend strong { color:var(--text); font-size:13px; line-height:1.48; }
.leadership-question legend small { color:var(--muted); font-size:10px; font-weight:650; }
.leadership-options { display:grid; gap:8px; margin-top:16px; }
.leadership-choice { position:relative; display:grid; grid-template-columns:22px 1fr; gap:11px; align-items:start; padding:12px 13px; border:1px solid var(--border); border-radius:12px; background:#fff; color:var(--text); font-size:11px; line-height:1.45; cursor:pointer; transition:.16s ease; }
.leadership-choice:hover { border-color:rgba(0,180,216,.45); background:#FBFEFF; }
.leadership-choice input { position:absolute; opacity:0; pointer-events:none; }
.leadership-choice-mark { width:18px; height:18px; margin-top:1px; border:1.5px solid #C8CED7; border-radius:50%; background:#fff; box-shadow:inset 0 0 0 4px #fff; transition:.16s ease; }
.leadership-choice input:checked + .leadership-choice-mark { border-color:var(--cyan); background:var(--cyan); }
.leadership-choice:has(input:checked) { border-color:rgba(0,180,216,.5); background:var(--cyan-soft); }
.leadership-choice:has(input:focus-visible) { box-shadow:0 0 0 4px rgba(0,180,216,.11); }
.leadership-side-note { background:linear-gradient(135deg,#F1F4F7,#fff); border:1px solid var(--border); }
.micro-copy { color:var(--muted); font-size:10px; line-height:1.5; }

.leadership-loading { max-width:760px; margin:60px auto 0; padding:32px; display:grid; grid-template-columns:70px 1fr; gap:24px; align-items:center; }
.leadership-loading[hidden] { display:none; }
.loading-spinner { width:58px; height:58px; border:5px solid var(--soft); border-top-color:var(--cyan); border-radius:50%; animation:leadershipSpin .9s linear infinite; }
@keyframes leadershipSpin { to { transform:rotate(360deg); } }
.leadership-loading h2 { margin:8px 0 7px; font-size:25px; letter-spacing:-.03em; }
.leadership-loading p { margin:0; color:var(--muted); font-size:12px; }

.leadership-results { margin-top:80px; }
.leadership-profile-grid { display:grid; grid-template-columns:minmax(300px,.78fr) minmax(0,1.22fr); gap:18px; margin-top:22px; }
.leadership-score-card, .leadership-radar-card { padding:26px; }
.leadership-score-card { position:relative; overflow:hidden; background:linear-gradient(150deg,#0B132B 0%,#18233F 70%,#25304D 100%); color:#fff; }
.leadership-score-card::after { content:""; position:absolute; width:240px; height:240px; right:-120px; bottom:-120px; border-radius:50%; background:rgba(0,180,216,.12); }
.leadership-score-card > * { position:relative; z-index:1; }
.leadership-score-card .score-label { color:var(--cyan); }
.leadership-score-number { display:flex; align-items:baseline; gap:5px; margin:25px 0 8px; }
.leadership-score-number strong { font-size:76px; line-height:.9; letter-spacing:-.065em; }
.leadership-score-number span { color:#AAB6C8; font-size:16px; }
.leadership-score-card h3 { margin:12px 0 8px; font-size:22px; letter-spacing:-.025em; }
.leadership-score-card > p { margin:0; color:#C7D0DD; font-size:12px; }
.leadership-signature { margin-top:24px; padding-top:18px; border-top:1px solid rgba(255,255,255,.12); display:grid; gap:4px; }
.leadership-signature span { color:#9EABBC; font-size:9px; text-transform:uppercase; letter-spacing:.09em; font-weight:800; }
.leadership-signature strong { color:#fff; font-size:13px; }
.leadership-radar-card { min-height:390px; }
.leadership-radar { width:100%; min-height:290px; display:grid; place-items:center; }
.leadership-radar svg { width:100%; max-width:570px; height:auto; overflow:visible; }
.radar-grid-polygon { fill:none; stroke:#E3E8EE; stroke-width:1; }
.radar-axis { stroke:#EDF0F3; stroke-width:1; }
.radar-data-polygon { fill:rgba(0,180,216,.16); stroke:#00B4D8; stroke-width:2.2; stroke-linejoin:round; }
.radar-dot { fill:#4A4E69; stroke:#fff; stroke-width:2; }
.radar-label { fill:#667085; font-size:10px; font-weight:700; }
.radar-score-label { fill:#0B132B; font-size:9px; font-weight:850; }

.leadership-dimensions-card { padding:25px; }
.leadership-dimension-bars { display:grid; grid-template-columns:1fr 1fr; gap:17px 28px; }
.leadership-dimension-row { display:grid; gap:8px; }
.leadership-dimension-head { display:flex; justify-content:space-between; gap:15px; font-size:11px; }
.leadership-dimension-head span { color:var(--muted); }
.leadership-dimension-head strong { color:var(--text); }
.leadership-bar-track { height:8px; overflow:hidden; background:var(--soft); border-radius:999px; }
.leadership-bar-track i { display:block; height:100%; width:0; border-radius:inherit; background:linear-gradient(90deg,var(--accent),var(--cyan)); transition:width .75s ease; }

.leadership-tip { min-height:205px; }
.leadership-tip-effect { display:block; margin-top:13px; padding-top:11px; border-top:1px solid var(--border); color:#007C95; font-size:10px; line-height:1.45; }
.leadership-roadmap { position:relative; display:grid; gap:0; }
.leadership-roadmap::before { content:""; position:absolute; left:32px; top:36px; bottom:36px; width:1px; background:var(--border); }
.leadership-roadmap-item { position:relative; z-index:1; display:grid; grid-template-columns:66px 1fr; gap:18px; padding:14px 0; }
.leadership-roadmap-marker { width:66px; min-height:66px; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px solid var(--border); border-radius:15px; background:#fff; box-shadow:var(--shadow-sm); }
.leadership-roadmap-marker strong { color:var(--cyan); font-size:18px; line-height:1; }
.leadership-roadmap-marker span { margin-top:5px; color:var(--muted); font-size:8px; font-weight:800; text-transform:uppercase; }
.leadership-roadmap-copy { padding:4px 0; }
.leadership-roadmap-copy h4 { margin:0; font-size:15px; }
.leadership-roadmap-copy > p { margin:5px 0 0; color:var(--muted); font-size:11px; }
.leadership-reflection { margin-top:10px; padding:10px 12px; border-radius:10px; background:var(--cyan-soft); }
.leadership-reflection span { color:#007C95; font-size:8px; font-weight:850; text-transform:uppercase; letter-spacing:.08em; }
.leadership-reflection p { margin:3px 0 0; color:var(--text); font-size:10px; }
.results-restart { display:flex; justify-content:center; padding-top:24px; }

@media (max-width:900px) {
    .leadership-profile-grid { grid-template-columns:1fr; }
    .leadership-radar-card { min-height:auto; }
}
@media (max-width:650px) {
    .leadership-form { min-height:0; }
    .leadership-step { min-height:0; }
    .leadership-start-card { grid-template-columns:1fr repeat(3,.8fr); padding:17px; }
    .leadership-start-card > span { grid-column:1/-1; }
    .leadership-question { padding:14px; }
    .leadership-question legend { grid-template-columns:29px 1fr; }
    .leadership-question legend strong { font-size:12px; }
    .leadership-choice { padding:11px; font-size:10px; }
    .leadership-loading { grid-template-columns:1fr; text-align:center; justify-items:center; padding:24px; }
    .leadership-score-number strong { font-size:62px; }
    .leadership-dimension-bars { grid-template-columns:1fr; }
    .leadership-radar { min-height:250px; overflow:hidden; }
    .leadership-roadmap-item { grid-template-columns:54px 1fr; gap:12px; }
    .leadership-roadmap-marker { width:54px; min-height:58px; }
    .leadership-roadmap::before { left:26px; }
}

@media print {
    .leadership-layout, .leadership-loading, .share-result-card, .results-restart { display:none !important; }
    .leadership-results { margin-top:0; }
    .leadership-profile-grid { grid-template-columns:1fr 1.3fr; break-inside:avoid; }
    .leadership-score-card { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
    .leadership-radar-card, .leadership-dimensions-card, .leadership-summary-grid, .leadership-roadmap-item { break-inside:avoid; }
}

/* ===== Tool #6: AI Act HR Check ===== */
.ai-act-intro { margin-bottom:28px; }
.ai-act-stat strong { color:var(--cyan); font-size:36px; }
.ai-act-alert { display:grid; grid-template-columns:48px 1fr; gap:16px; align-items:start; margin:0 0 22px; padding:18px 20px; border:1px solid #E8D9B8; border-radius:16px; background:#FFF9EE; box-shadow:var(--shadow-sm); }
.ai-act-alert-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:12px; background:#FFF0CF; color:#9A611C; font-size:18px; font-weight:900; }
.ai-act-alert strong { display:block; margin:1px 0 4px; font-size:13px; }
.ai-act-alert p { margin:0; color:#75664D; font-size:11px; line-height:1.55; }
.ai-act-layout { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(300px,.7fr); gap:20px; align-items:start; }
.ai-act-form { padding:26px; min-height:720px; }
.ai-act-step { display:none; min-height:570px; padding-top:4px; }
.ai-act-step.is-active { display:block; }
.ai-act-role-grid { display:grid; grid-template-columns:1fr 1fr; gap:11px; margin-top:18px; }
.ai-act-role-choice { position:relative; cursor:pointer; }
.ai-act-role-choice input { position:absolute; opacity:0; pointer-events:none; }
.ai-act-role-choice > span { min-height:104px; padding:17px; display:flex; flex-direction:column; justify-content:center; gap:5px; border:1px solid var(--border); border-radius:14px; background:#FCFCFD; transition:.18s ease; }
.ai-act-role-choice strong { font-size:12px; line-height:1.4; }
.ai-act-role-choice small { color:var(--muted); font-size:10px; }
.ai-act-role-choice input:checked + span { border-color:rgba(0,180,216,.55); background:var(--cyan-soft); box-shadow:0 0 0 3px rgba(0,180,216,.06); }
.ai-act-date-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:22px; padding:15px; border-radius:15px; background:linear-gradient(135deg,#0B132B,#202A45); color:#fff; }
.ai-act-date-strip div { padding:10px 11px; border-right:1px solid rgba(255,255,255,.1); }
.ai-act-date-strip div:last-child { border-right:0; }
.ai-act-date-strip span, .ai-act-date-strip small { display:block; color:#AEB9C9; font-size:9px; }
.ai-act-date-strip strong { display:block; margin:4px 0 2px; color:var(--cyan); font-size:15px; }
.ai-act-usecase-groups { display:grid; gap:18px; margin-top:18px; }
.ai-act-usecase-group { display:grid; gap:9px; }
.ai-act-group-label { color:var(--muted); font-size:9px; text-transform:uppercase; letter-spacing:.09em; font-weight:850; }
.ai-act-usecase-list { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.ai-act-usecase-card { position:relative; display:grid; grid-template-columns:28px 1fr; gap:10px; align-items:start; min-height:84px; padding:13px; border:1px solid var(--border); border-radius:13px; background:#FCFCFD; cursor:pointer; transition:.16s ease; }
.ai-act-usecase-card:hover { border-color:rgba(0,180,216,.4); background:#fff; }
.ai-act-usecase-card input { position:absolute; opacity:0; pointer-events:none; }
.ai-act-checkmark { width:24px; height:24px; display:grid; place-items:center; border:1.5px solid #C7CDD6; border-radius:8px; color:transparent; background:#fff; font-size:12px; font-weight:900; transition:.16s ease; }
.ai-act-usecase-card strong { display:block; color:var(--text); font-size:11px; line-height:1.42; }
.ai-act-usecase-card small { display:block; margin-top:5px; color:var(--muted); font-size:9px; }
.ai-act-usecase-card:has(input:checked) { border-color:rgba(0,180,216,.55); background:var(--cyan-soft); }
.ai-act-usecase-card input:checked + .ai-act-checkmark { border-color:var(--cyan); background:var(--cyan); color:#fff; }
.field-error { margin:14px 0 0; padding:10px 12px; color:#8A3E3E; background:#FFF0F0; border-radius:10px; font-size:11px; font-weight:700; }
.ai-act-question { margin:16px 0 0; padding:18px; border:1px solid var(--border); border-radius:15px; background:#FCFCFD; }
.ai-act-question legend { padding:0 4px; color:var(--text); font-size:12px; font-weight:780; line-height:1.45; }
.ai-act-radio-list { display:grid; gap:8px; margin-top:8px; }
.ai-act-radio-list label { position:relative; cursor:pointer; }
.ai-act-radio-list input { position:absolute; opacity:0; pointer-events:none; }
.ai-act-radio-list span { display:block; padding:11px 13px; border:1px solid var(--border); border-radius:11px; background:#fff; }
.ai-act-radio-list strong { display:block; font-size:11px; }
.ai-act-radio-list small { display:block; margin-top:3px; color:var(--muted); font-size:9px; }
.ai-act-radio-list input:checked + span { border-color:rgba(0,180,216,.55); background:var(--cyan-soft); }
.ai-act-inline-radios { display:flex; flex-wrap:wrap; gap:8px; margin-top:9px; }
.ai-act-inline-radios label { position:relative; cursor:pointer; }
.ai-act-inline-radios input { position:absolute; opacity:0; pointer-events:none; }
.ai-act-inline-radios span { min-width:82px; display:grid; place-items:center; min-height:38px; padding:0 12px; border:1px solid var(--border); border-radius:10px; background:#fff; font-size:10px; font-weight:750; }
.ai-act-inline-radios input:checked + span { border-color:rgba(0,180,216,.55); background:var(--cyan-soft); color:#007C95; }
.conditional-question[hidden] { display:none; }
.ai-act-governance-list { display:grid; gap:11px; margin-top:18px; }
.ai-act-governance-question { margin:0; padding:14px 15px; border:1px solid var(--border); border-radius:14px; background:#FCFCFD; }
.ai-act-governance-question.is-error { border-color:#D87979; box-shadow:0 0 0 3px rgba(181,71,71,.07); }
.ai-act-governance-question legend { width:100%; display:grid; grid-template-columns:30px 1fr; gap:10px; padding:0; }
.ai-act-governance-question legend > span { width:28px; height:25px; display:grid; place-items:center; border-radius:8px; background:var(--cyan-soft); color:#007C95; font-size:9px; font-weight:850; }
.ai-act-governance-question legend strong { display:block; font-size:11px; }
.ai-act-governance-question legend small { display:block; margin-top:2px; color:var(--muted); font-size:9px; font-weight:500; }
.ai-act-governance-scale { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:11px; }
.ai-act-governance-scale label { position:relative; cursor:pointer; }
.ai-act-governance-scale input { position:absolute; opacity:0; pointer-events:none; }
.ai-act-governance-scale span { min-height:34px; display:grid; place-items:center; padding:0 6px; border:1px solid var(--border); border-radius:9px; background:#fff; color:var(--muted); font-size:9px; font-weight:750; }
.ai-act-governance-scale input:checked + span { border-color:rgba(0,180,216,.55); background:var(--cyan-soft); color:#007C95; }
.ai-act-side { position:sticky; top:96px; padding:24px; }
.ai-act-side-list { display:grid; gap:0; }
.ai-act-side-list > div { display:grid; grid-template-columns:14px 1fr; gap:10px; align-items:start; padding:14px 2px; border-bottom:1px solid var(--border); }
.ai-act-side-list > div:last-child { border-bottom:0; }
.ai-act-side-list p { margin:0; display:grid; gap:2px; }
.ai-act-side-list strong { font-size:11px; }
.ai-act-side-list small { color:var(--muted); font-size:9px; }
.risk-dot { width:10px; height:10px; margin-top:3px; border-radius:50%; background:#9AA3B2; }
.risk-dot.stop { background:var(--danger); box-shadow:0 0 0 5px rgba(181,71,71,.08); }
.risk-dot.high { background:#D56B2B; }
.risk-dot.review { background:#D1A229; }
.risk-dot.lower { background:var(--success); }
.ai-act-source-note { margin-top:16px; padding:14px; border-radius:12px; background:var(--cyan-soft); }
.ai-act-source-note span { color:#007C95; font-size:9px; font-weight:850; text-transform:uppercase; letter-spacing:.08em; }
.ai-act-source-note p { margin:4px 0 0; color:var(--text); font-size:10px; }
.ai-act-loading { max-width:780px; margin:60px auto 0; padding:30px; display:grid; grid-template-columns:70px 1fr; gap:22px; align-items:center; }
.ai-act-loading[hidden] { display:none; }
.ai-act-loading h2 { margin:8px 0 6px; font-size:24px; letter-spacing:-.03em; }
.ai-act-loading p { margin:0; color:var(--muted); font-size:11px; }
.ai-act-results { margin-top:80px; }
.ai-act-overview-grid { display:grid; grid-template-columns:.9fr .65fr 1.25fr; gap:16px; margin-top:20px; }
.ai-act-risk-card, .ai-act-coverage-card, .ai-act-summary-card { padding:24px; }
.ai-act-risk-card { position:relative; overflow:hidden; color:#fff; background:linear-gradient(145deg,#0B132B,#202A45); }
.ai-act-risk-card.risk-stop { background:linear-gradient(145deg,#572525,#7A3030); }
.ai-act-risk-card.risk-high { background:linear-gradient(145deg,#5D3520,#9A5524); }
.ai-act-risk-card.risk-review { background:linear-gradient(145deg,#564B22,#7D6C28); }
.ai-act-risk-card.risk-lower { background:linear-gradient(145deg,#183E37,#17634F); }
.ai-act-risk-card .score-label { color:#D8E0EA; }
.ai-act-risk-symbol { margin:24px 0 17px; width:68px; height:68px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.2); border-radius:18px; background:rgba(255,255,255,.08); color:#fff; font-size:17px; font-weight:900; }
.ai-act-risk-card h3 { margin:0 0 8px; font-size:20px; letter-spacing:-.025em; }
.ai-act-risk-card p { margin:0; color:#E0E6ED; font-size:11px; }
.ai-act-status-date { display:block; margin-top:20px; padding-top:14px; border-top:1px solid rgba(255,255,255,.15); color:#CBD4DF; font-size:9px; }
.ai-act-status-date strong { color:#fff; }
.ai-act-coverage-number { display:flex; align-items:baseline; gap:4px; margin:25px 0 13px; }
.ai-act-coverage-number strong { font-size:58px; letter-spacing:-.06em; line-height:.9; }
.ai-act-coverage-number span { color:var(--muted); font-size:14px; }
.ai-act-coverage-card > p { margin:15px 0 0; color:var(--muted); font-size:10px; }
.ai-act-summary-card { display:flex; flex-direction:column; justify-content:center; }
.ai-act-summary-card h3 { margin:8px 0 7px; font-size:21px; letter-spacing:-.025em; }
.ai-act-summary-card p { margin:0; color:var(--muted); font-size:11px; }
.ai-act-timeline { position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.ai-act-timeline-item { padding:17px; border:1px solid var(--border); border-radius:14px; background:var(--bg); }
.ai-act-timeline-marker { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:13px; }
.ai-act-timeline-marker strong { width:28px; height:28px; display:grid; place-items:center; border-radius:8px; background:var(--text); color:var(--cyan); font-size:10px; }
.ai-act-timeline-marker span { color:#007C95; font-size:9px; font-weight:850; }
.ai-act-timeline-copy h4 { margin:0; font-size:12px; }
.ai-act-timeline-copy p { margin:5px 0 0; color:var(--muted); font-size:10px; }
.ai-act-findings { display:grid; gap:11px; }
.ai-act-finding { padding:17px; border:1px solid var(--border); border-left-width:4px; border-radius:13px; background:#FCFCFD; }
.ai-act-finding.finding-prohibited { border-left-color:var(--danger); background:#FFF8F8; }
.ai-act-finding.finding-high { border-left-color:#D56B2B; background:#FFF9F5; }
.ai-act-finding.finding-review, .ai-act-finding.finding-transparency_gap { border-left-color:#D1A229; background:#FFFCF3; }
.ai-act-finding.finding-info { border-left-color:var(--cyan); }
.ai-act-finding-head { display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start; }
.ai-act-finding-badge { min-width:74px; min-height:25px; display:grid; place-items:center; padding:0 8px; border-radius:8px; background:var(--text); color:#fff; font-size:8px; font-weight:900; letter-spacing:.06em; }
.finding-prohibited .ai-act-finding-badge { background:var(--danger); }
.finding-high .ai-act-finding-badge { background:#C75E21; }
.finding-review .ai-act-finding-badge, .finding-transparency_gap .ai-act-finding-badge { background:#9A7620; }
.finding-info .ai-act-finding-badge { background:#007C95; }
.ai-act-finding h4 { margin:0; font-size:12px; }
.ai-act-finding small { display:block; margin-top:2px; color:var(--muted); font-size:9px; }
.ai-act-finding > p { margin:10px 0 0; color:var(--muted); font-size:10px; }
.ai-act-finding-action { margin-top:11px; padding:10px 12px; border-radius:10px; background:#fff; border:1px solid var(--border); }
.ai-act-finding-action span { color:#007C95; font-size:8px; text-transform:uppercase; letter-spacing:.08em; font-weight:850; }
.ai-act-finding-action p { margin:3px 0 0; color:var(--text); font-size:10px; }
.ai-act-action-grid { display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.ai-act-action-card { display:grid; grid-template-columns:40px 1fr; gap:12px; padding:16px; border:1px solid var(--border); border-radius:13px; background:var(--bg); }
.ai-act-action-priority { width:36px; height:36px; display:grid; place-items:center; border-radius:10px; background:var(--accent); color:#fff; font-size:10px; font-weight:900; }
.ai-act-action-card h4 { margin:0; font-size:12px; }
.ai-act-action-card p { margin:4px 0 0; color:var(--muted); font-size:10px; }
.ai-act-action-card > small { grid-column:2; display:block; padding-top:8px; border-top:1px solid var(--border); color:#007C95; font-size:9px; }
.ai-act-management-note { margin-top:18px; padding:20px; display:grid; grid-template-columns:46px 1fr; gap:16px; align-items:start; }
.ai-act-management-note p { margin:5px 0 7px; color:var(--muted); font-size:11px; }
.ai-act-management-note strong { color:var(--text); font-size:10px; }
.ai-act-share-preview strong { color:var(--cyan); font-size:62px; }
.ai-act-official-sources { margin-top:20px; padding:17px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; border:1px solid var(--border); border-radius:14px; background:#fff; }
.ai-act-official-sources strong { margin-right:4px; font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.ai-act-official-sources a { padding:8px 10px; border-radius:9px; background:var(--cyan-soft); color:#007C95; font-size:10px; font-weight:750; }
.ai-act-official-sources a:hover { background:#D9F4F9; }

@media (max-width:1000px) {
    .ai-act-layout { grid-template-columns:1fr; }
    .ai-act-side { position:static; }
    .ai-act-overview-grid { grid-template-columns:1fr 1fr; }
    .ai-act-summary-card { grid-column:1/-1; }
}
@media (max-width:700px) {
    .ai-act-form { min-height:0; padding:19px; }
    .ai-act-step { min-height:0; }
    .ai-act-role-grid, .ai-act-usecase-list, .ai-act-overview-grid, .ai-act-action-grid { grid-template-columns:1fr; }
    .ai-act-date-strip { grid-template-columns:1fr; }
    .ai-act-date-strip div { border-right:0; border-bottom:1px solid rgba(255,255,255,.1); }
    .ai-act-date-strip div:last-child { border-bottom:0; }
    .ai-act-governance-scale { grid-template-columns:1fr 1fr; }
    .ai-act-timeline { grid-template-columns:1fr; }
    .ai-act-summary-card { grid-column:auto; }
    .ai-act-loading { grid-template-columns:1fr; text-align:center; justify-items:center; padding:22px; }
    .ai-act-finding-head { grid-template-columns:1fr; }
    .ai-act-finding-badge { justify-self:start; }
}
@media print {
    .ai-act-layout, .ai-act-loading, .share-result-card, .results-restart, .ai-act-official-sources { display:none !important; }
    .ai-act-results { margin-top:0; }
    .ai-act-overview-grid { grid-template-columns:1fr 1fr 1.2fr; break-inside:avoid; }
    .ai-act-risk-card { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
    .ai-act-finding, .ai-act-action-card, .ai-act-timeline-item { break-inside:avoid; }
}

/* --- HR ToolBox V9: Onboarding Planer --- */
.form-grid.three-cols { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.onboarding-builder-layout { display:grid; grid-template-columns:minmax(0,1.58fr) minmax(300px,.72fr); gap:20px; align-items:start; }
.onboarding-form { padding:28px; }
.onboarding-form .onboarding-role-field textarea { min-height:175px; }
.onboarding-context-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.onboarding-context-grid textarea { min-height:115px; }
.onboarding-side-panel { position:sticky; top:96px; padding:24px; }
.onboarding-side-note { margin-top:20px; padding:16px; border-radius:14px; background:linear-gradient(135deg,var(--cyan-soft),#fff); }
.onboarding-side-note span { color:#007C95; font-size:9px; font-weight:850; text-transform:uppercase; letter-spacing:.08em; }
.onboarding-side-note p { margin:7px 0 0; color:var(--muted); font-size:10px; }
.onboarding-side-note strong { color:var(--text); }
.onboarding-results { margin-top:80px; }
.onboarding-overview-card { padding:28px; display:grid; grid-template-columns:1fr auto; gap:28px; align-items:center; background:linear-gradient(135deg,#fff,#F3FCFE); }
.onboarding-overview-copy h3 { margin:8px 0 6px; font-size:25px; letter-spacing:-.03em; }
.onboarding-overview-copy > p { margin:0; max-width:780px; color:var(--muted); font-size:12px; }
.onboarding-meta { display:flex; flex-wrap:wrap; gap:7px; margin-top:16px; }
.onboarding-meta span { padding:7px 10px; border-radius:999px; background:var(--soft); color:var(--accent); font-size:9px; font-weight:760; }
.onboarding-stat-stack { min-width:270px; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.onboarding-stat-stack > div { padding:16px 11px; border:1px solid var(--border); border-radius:14px; background:#fff; text-align:center; }
.onboarding-stat-stack strong { display:block; color:var(--cyan); font-size:26px; line-height:1; letter-spacing:-.04em; }
.onboarding-stat-stack span { display:block; margin-top:5px; color:var(--muted); font-size:8px; text-transform:uppercase; letter-spacing:.04em; }
.onboarding-ai-note { margin-top:14px; padding:16px 18px; display:grid; grid-template-columns:30px 1fr; gap:11px; align-items:start; border-left:4px solid var(--cyan); box-shadow:none; }
.onboarding-ai-note > span { width:29px; height:29px; display:grid; place-items:center; border-radius:9px; background:var(--cyan-soft); color:#007C95; font-weight:900; }
.onboarding-ai-note p { margin:3px 0 0; color:var(--muted); font-size:10px; }
.onboarding-section-heading { margin:58px 0 18px; max-width:820px; }
.onboarding-section-heading h2 { margin:8px 0 5px; font-size:31px; line-height:1.08; letter-spacing:-.035em; }
.onboarding-section-heading p { margin:0; color:var(--muted); font-size:12px; }
.onboarding-principles { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.onboarding-principle-card { position:relative; padding:22px; overflow:hidden; }
.onboarding-principle-number { display:inline-flex; padding:5px 8px; border-radius:7px; background:var(--cyan-soft); color:#007C95; font-size:8px; font-weight:900; }
.onboarding-principle-card h3 { margin:16px 0 6px; font-size:16px; }
.onboarding-principle-card p { margin:0; color:var(--muted); font-size:10px; line-height:1.55; }
.onboarding-phase-nav { position:sticky; top:76px; z-index:8; display:grid; grid-template-columns:repeat(6,1fr); gap:6px; margin:0 0 18px; padding:8px; border:1px solid var(--border); border-radius:16px; background:rgba(248,249,250,.93); backdrop-filter:blur(12px); }
.onboarding-phase-chip { min-height:50px; display:flex; flex-direction:column; justify-content:center; padding:8px 10px; border-radius:10px; transition:.18s ease; }
.onboarding-phase-chip:hover { background:#fff; box-shadow:var(--shadow-sm); }
.onboarding-phase-chip strong { font-size:9px; }
.onboarding-phase-chip small { margin-top:2px; color:var(--muted); font-size:7px; }
.onboarding-phases { display:grid; gap:18px; }
.onboarding-phase-card { scroll-margin-top:155px; overflow:hidden; }
.onboarding-phase-head { padding:24px 26px; display:grid; grid-template-columns:46px 1fr auto; gap:14px; align-items:start; background:linear-gradient(135deg,#fff,#FAFBFC); border-bottom:1px solid var(--border); }
.onboarding-phase-number { width:44px; height:44px; display:grid; place-items:center; border-radius:13px; background:var(--text); color:var(--cyan); font-size:10px; font-weight:900; }
.onboarding-phase-head h3 { margin:5px 0 5px; font-size:21px; letter-spacing:-.025em; }
.onboarding-phase-head p { margin:0; max-width:780px; color:var(--muted); font-size:10px; }
.onboarding-date-badge { padding:7px 10px; border:1px solid rgba(0,180,216,.22); border-radius:10px; background:var(--cyan-soft); color:#007C95; font-size:8px; font-weight:820; white-space:nowrap; }
.onboarding-phase-columns { display:grid; grid-template-columns:1fr 1fr; gap:0; border-bottom:1px solid var(--border); }
.onboarding-phase-section { padding:22px 25px; }
.onboarding-phase-section + .onboarding-phase-section { border-left:1px solid var(--border); }
.onboarding-phase-section h4, .onboarding-support-box h4 { margin:0 0 13px; font-size:11px; text-transform:uppercase; letter-spacing:.06em; }
.onboarding-task-list { display:grid; gap:9px; }
.onboarding-task-item { display:grid; grid-template-columns:27px 1fr; gap:9px; align-items:start; }
.onboarding-check { width:25px; height:25px; display:grid; place-items:center; border-radius:8px; background:var(--success-soft); color:var(--success); font-size:9px; font-weight:900; }
.onboarding-task-list.manager .onboarding-check { background:var(--cyan-soft); color:#007C95; }
.onboarding-task-item strong { display:block; font-size:10px; }
.onboarding-task-item p { margin:2px 0 0; color:var(--muted); font-size:9px; line-height:1.45; }
.onboarding-support-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:0; }
.onboarding-support-box { min-width:0; padding:21px 23px 23px; }
.onboarding-support-box + .onboarding-support-box { border-left:1px solid var(--border); }
.onboarding-learning-list, .onboarding-meeting-list { display:grid; gap:9px; }
.onboarding-learning-item, .onboarding-meeting-item { padding:11px; border:1px solid var(--border); border-radius:11px; background:var(--bg); }
.onboarding-learning-top { display:flex; align-items:flex-start; gap:7px; flex-wrap:wrap; }
.onboarding-learning-top strong { flex:1; min-width:120px; font-size:9px; }
.onboarding-source { padding:3px 6px; border-radius:999px; background:#EEF1F4; color:var(--muted); font-size:6px; font-weight:900; text-transform:uppercase; letter-spacing:.04em; }
.onboarding-source.is-required { background:var(--warning-soft); color:var(--warning); }
.onboarding-learning-item p { margin:5px 0 3px; color:var(--muted); font-size:8px; line-height:1.4; }
.onboarding-learning-item small { color:#007C95; font-size:7px; font-weight:700; }
.onboarding-meeting-item { display:grid; grid-template-columns:27px 1fr; gap:9px; }
.onboarding-meeting-icon { width:25px; height:25px; display:grid; place-items:center; border-radius:8px; background:var(--cyan-soft); color:#007C95; font-size:9px; font-weight:900; }
.onboarding-meeting-item strong { display:block; font-size:9px; }
.onboarding-meeting-item small { display:block; margin-top:1px; color:#007C95; font-size:7px; }
.onboarding-meeting-item p { margin:4px 0 0; color:var(--muted); font-size:8px; line-height:1.4; }
.onboarding-success-list { margin:0; padding:0; list-style:none; display:grid; gap:9px; }
.onboarding-success-list li { position:relative; padding:10px 10px 10px 29px; border-radius:10px; background:var(--success-soft); color:#31594F; font-size:8px; line-height:1.4; }
.onboarding-success-list li::before { content:'✓'; position:absolute; left:10px; top:10px; color:var(--success); font-weight:900; }
.onboarding-milestones { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.onboarding-milestone { display:grid; grid-template-columns:58px 1fr; gap:13px; padding:17px; border:1px solid var(--border); border-radius:14px; background:var(--bg); }
.onboarding-milestone-marker { width:56px; height:56px; display:grid; place-items:center; align-content:center; border-radius:15px; background:var(--text); color:#fff; }
.onboarding-milestone-marker strong { color:var(--cyan); font-size:21px; line-height:1; }
.onboarding-milestone-marker span { margin-top:2px; color:#BCC6D5; font-size:6px; text-transform:uppercase; }
.onboarding-milestone-heading { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.onboarding-milestone h4 { margin:2px 0 0; font-size:11px; }
.onboarding-milestone-heading small { color:#007C95; font-size:7px; white-space:nowrap; }
.onboarding-milestone p { margin:6px 0 0; color:var(--muted); font-size:8px; line-height:1.45; }
.onboarding-metrics, .onboarding-risks { display:grid; gap:9px; }
.onboarding-metric-item, .onboarding-risk-item { padding:12px 13px; border:1px solid var(--border); border-radius:11px; background:var(--bg); }
.onboarding-metric-item strong, .onboarding-risk-item strong { font-size:10px; }
.onboarding-metric-item p, .onboarding-risk-item p { margin:4px 0 0; color:var(--muted); font-size:9px; line-height:1.45; }
.onboarding-metric-item small { display:block; margin-top:6px; color:#007C95; font-size:7px; font-weight:750; }
.onboarding-manager-checklist { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.onboarding-manager-check { display:grid; grid-template-columns:34px 1fr; gap:10px; align-items:center; padding:12px 13px; border:1px solid var(--border); border-radius:11px; background:var(--bg); }
.onboarding-manager-check span { width:31px; height:31px; display:grid; place-items:center; border-radius:9px; background:var(--accent); color:#fff; font-size:8px; font-weight:900; }
.onboarding-manager-check p { margin:0; font-size:9px; line-height:1.45; }

@media (max-width: 980px) {
    .onboarding-builder-layout { grid-template-columns:1fr; }
    .onboarding-side-panel { position:static; }
    .onboarding-phase-nav { position:static; grid-template-columns:repeat(3,1fr); }
    .onboarding-overview-card { grid-template-columns:1fr; }
    .onboarding-stat-stack { min-width:0; }
    .onboarding-principles { grid-template-columns:1fr 1fr; }
    .onboarding-support-grid { grid-template-columns:1fr; }
    .onboarding-support-box + .onboarding-support-box { border-left:0; border-top:1px solid var(--border); }
    .onboarding-milestones { grid-template-columns:1fr; }
}
@media (max-width: 700px) {
    .form-grid.three-cols, .onboarding-context-grid, .onboarding-phase-columns, .onboarding-principles, .onboarding-manager-checklist { grid-template-columns:1fr; }
    .onboarding-phase-section + .onboarding-phase-section { border-left:0; border-top:1px solid var(--border); }
    .onboarding-phase-head { grid-template-columns:42px 1fr; }
    .onboarding-date-badge { grid-column:2; justify-self:start; }
    .onboarding-phase-nav { grid-template-columns:1fr 1fr; }
    .onboarding-stat-stack { grid-template-columns:repeat(3,1fr); }
}
@media (max-width: 520px) {
    .onboarding-stat-stack { grid-template-columns:1fr; }
    .onboarding-phase-nav { grid-template-columns:1fr; }
}

@media print {
    .onboarding-builder-layout, .onboarding-phase-nav, .onboarding-ai-note, .tool-faq, .loading-overlay, .toast { display:none !important; }
    .onboarding-results { margin-top:0; }
    .onboarding-overview-card { grid-template-columns:1fr auto; break-inside:avoid; }
    .onboarding-principles { grid-template-columns:repeat(3,1fr); }
    .onboarding-phase-card, .onboarding-milestone, .onboarding-metric-item, .onboarding-risk-item, .onboarding-manager-check { break-inside:avoid; }
    .onboarding-phase-head, .onboarding-milestone-marker, .onboarding-check, .onboarding-source, .onboarding-success-list li { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
    .onboarding-support-grid { grid-template-columns:repeat(3,1fr); }
    .onboarding-manager-checklist { grid-template-columns:1fr 1fr; }
}

/* ===== Tool #8: HR Kennzahlen-Rechner ===== */
.metrics-page { padding-bottom:105px; }
.metrics-intro { margin-bottom:28px; }
.metrics-trust { margin-top:22px; }
.metrics-overview { padding:26px 28px; display:grid; grid-template-columns:1fr auto; gap:34px; align-items:center; margin-bottom:18px; background:linear-gradient(135deg,#fff,#F6FCFD); }
.metrics-overview-copy h2 { margin:7px 0 6px; font-size:23px; letter-spacing:-.025em; }
.metrics-overview-copy p { margin:0; max-width:700px; color:var(--muted); font-size:11px; }
.metrics-category-nav { display:grid; grid-template-columns:repeat(3, minmax(120px,1fr)); gap:8px; }
.metrics-category-nav a { min-width:130px; padding:13px 14px; display:grid; grid-template-columns:28px 1fr; gap:1px 8px; align-items:center; border:1px solid var(--border); border-radius:13px; background:#fff; transition:.18s ease; }
.metrics-category-nav a:hover { border-color:rgba(0,180,216,.4); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
.metrics-category-nav a > span { grid-row:1/3; width:27px; height:27px; display:grid; place-items:center; border-radius:8px; background:var(--cyan-soft); color:#007C95; font-size:8px; font-weight:900; }
.metrics-category-nav strong { font-size:10px; }
.metrics-category-nav small { color:var(--muted); font-size:7px; }
.metrics-cockpit { padding:27px 28px; margin-bottom:62px; background:linear-gradient(135deg,#0B132B,#18233F); color:#fff; }
.metrics-cockpit-head { display:grid; grid-template-columns:1fr auto; gap:25px; align-items:start; }
.metrics-cockpit-head h2 { margin:7px 0 5px; font-size:25px; letter-spacing:-.03em; }
.metrics-cockpit-head p { margin:0; max-width:760px; color:#BCC7D7; font-size:10px; }
.metrics-cockpit .btn-ghost { color:#fff; background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.12); }
.metrics-cockpit .btn-ghost:hover { background:rgba(255,255,255,.12); }
.metrics-cockpit .text-button { color:#BCC7D7; }
.metrics-cockpit-empty { margin-top:20px; padding:18px; display:grid; grid-template-columns:38px 1fr; gap:11px; align-items:center; border:1px dashed rgba(255,255,255,.15); border-radius:14px; background:rgba(255,255,255,.035); }
.metrics-cockpit-empty > span { width:36px; height:36px; display:grid; place-items:center; border-radius:10px; background:rgba(0,180,216,.12); color:var(--cyan); font-weight:900; }
.metrics-cockpit-empty p { margin:0; display:grid; }
.metrics-cockpit-empty strong { font-size:10px; }
.metrics-cockpit-empty small { color:#AAB7C9; font-size:8px; margin-top:2px; }
.metrics-cockpit-grid { margin-top:20px; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:9px; }
.metrics-kpi-tile { position:relative; min-height:126px; padding:15px; border:1px solid rgba(255,255,255,.11); border-radius:13px; background:rgba(255,255,255,.055); overflow:hidden; }
.metrics-kpi-tile > span { display:block; padding-right:22px; color:#AEBACB; font-size:7px; font-weight:850; text-transform:uppercase; letter-spacing:.06em; }
.metrics-kpi-tile > strong { display:block; margin:12px 0 7px; color:var(--cyan); font-size:22px; line-height:1.05; letter-spacing:-.035em; }
.metrics-kpi-tile > small { display:block; color:#B8C4D4; font-size:7px; line-height:1.4; }
.metrics-kpi-remove { position:absolute; right:8px; top:8px; width:23px; height:23px; padding:0; display:grid; place-items:center; border:0; border-radius:7px; background:rgba(255,255,255,.07); color:#9BA9BC; font-size:14px; }
.metrics-kpi-remove:hover { color:#fff; background:rgba(255,255,255,.14); }
.metrics-cockpit-note { margin:15px 0 0; color:#8F9DB1; font-size:7px; }
.metrics-section { scroll-margin-top:95px; margin-top:65px; }
.metrics-section-heading { max-width:810px; margin-bottom:20px; }
.metrics-section-heading h2 { margin:8px 0 7px; font-size:32px; line-height:1.08; letter-spacing:-.035em; }
.metrics-section-heading p { margin:0; color:var(--muted); font-size:12px; }
.metrics-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.metrics-grid.learning-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.metric-card { position:relative; padding:24px; display:flex; flex-direction:column; overflow:hidden; transition:.2s ease; }
.metric-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--accent),var(--cyan)); opacity:.42; }
.metric-card.has-result { border-color:rgba(0,180,216,.28); box-shadow:0 14px 36px rgba(11,19,43,.09); }
.metric-card-head { display:grid; grid-template-columns:45px 1fr auto; gap:12px; align-items:center; }
.metric-icon { width:44px; height:44px; display:grid; place-items:center; border-radius:13px; background:var(--text); color:var(--cyan); font-size:11px; font-weight:900; }
.metric-category { display:block; color:#007C95; font-size:7px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
.metric-card h3 { margin:3px 0 0; font-size:19px; letter-spacing:-.025em; }
.metric-number { color:#C6CCD5; font-size:10px; font-weight:900; }
.metric-description { min-height:48px; margin:16px 0 13px; color:var(--muted); font-size:10px; line-height:1.55; }
.metric-formula { padding:11px 12px; border:1px solid var(--border); border-radius:11px; background:var(--bg); display:grid; gap:4px; }
.metric-formula span { color:#8C96A5; font-size:6px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
.metric-formula code { color:var(--accent); font-family:inherit; font-size:8px; font-weight:700; line-height:1.45; }
.metric-fields { margin-top:15px; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.metric-fields.two { grid-template-columns:1fr 1fr; }
.metric-fields.three { grid-template-columns:repeat(3,1fr); }
.metric-fields label { display:grid; gap:6px; }
.metric-fields label > span { color:var(--muted); font-size:8px; font-weight:700; line-height:1.35; }
.metric-fields input { height:42px; padding:0 11px; font-size:10px; }
.metric-calc-btn { align-self:flex-start; margin-top:15px; min-height:42px; font-size:10px; }
.metric-result { margin-top:16px; padding:17px; border-radius:14px; background:linear-gradient(135deg,var(--cyan-soft),#fff); border:1px solid rgba(0,180,216,.16); }
.metric-result > span { display:block; color:#007C95; font-size:7px; font-weight:900; text-transform:uppercase; letter-spacing:.07em; }
.metric-result > strong { display:block; margin:5px 0; color:var(--text); font-size:29px; line-height:1; letter-spacing:-.045em; }
.metric-result > p { margin:0; color:var(--muted); font-size:8px; line-height:1.45; }
.metrics-method { margin-top:70px; padding:29px; }
.metrics-method > div:first-child { max-width:760px; }
.metrics-method h2 { margin:8px 0 22px; font-size:29px; letter-spacing:-.035em; }
.metrics-method-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.metrics-method-grid article { padding:17px; border:1px solid var(--border); border-radius:13px; background:var(--bg); }
.metrics-method-grid article > span { color:var(--cyan); font-size:8px; font-weight:900; }
.metrics-method-grid h3 { margin:11px 0 5px; font-size:11px; }
.metrics-method-grid p { margin:0; color:var(--muted); font-size:8px; line-height:1.5; }

@media (max-width: 1050px) {
    .metrics-cockpit-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .metrics-method-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width: 900px) {
    .metrics-overview, .metrics-cockpit-head { grid-template-columns:1fr; }
    .metrics-category-nav { grid-template-columns:repeat(3,1fr); }
    .metrics-grid, .metrics-grid.learning-grid { grid-template-columns:1fr; }
    .metrics-cockpit-head .result-actions { justify-content:flex-start; }
}
@media (max-width: 650px) {
    .metrics-category-nav { grid-template-columns:1fr; }
    .metrics-cockpit-grid { grid-template-columns:1fr 1fr; }
    .metric-fields, .metric-fields.two, .metric-fields.three { grid-template-columns:1fr; }
    .metrics-method-grid { grid-template-columns:1fr; }
}
@media (max-width: 420px) {
    .metrics-cockpit-grid { grid-template-columns:1fr; }
}

@media print {
    .metrics-overview, .metrics-section, .metrics-method, .tool-faq, .site-header, .toast { display:none !important; }
    .metrics-page { padding:0; }
    .metrics-intro { display:block; margin-bottom:18px; }
    .metrics-intro .intro-stat, .metrics-intro .trust-row { display:none; }
    .metrics-cockpit { margin:0; color:#0B132B; background:#fff; box-shadow:none; border:1px solid #DDE2E8; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
    .metrics-cockpit-head p { color:#667085; }
    .metrics-cockpit-grid { grid-template-columns:repeat(3,1fr); }
    .metrics-kpi-tile { color:#0B132B; background:#F8F9FA; border-color:#E4E7EC; break-inside:avoid; }
    .metrics-kpi-tile > span, .metrics-kpi-tile > small { color:#667085; }
    .metrics-kpi-tile > strong { color:#007C95; }
    .metrics-cockpit-note { color:#667085; }
}
.tool-card {
    position: relative;
    min-height: 310px;
    padding: 26px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--bg);
    transition: .22s ease;
}

.expanded-grid .tool-card {
    min-height: 340px;
}

.tool-card p {
    color: var(--muted);
    margin: 0;
    max-width: 600px;
    padding-bottom: 55px;
}

@media (max-width: 650px) {
    .expanded-grid .tool-card {
        min-height: 390px;
    }
}