:root{--navy:#102e43;--blue:#9bd9eb;--red:#d84743;--ink:#173449;--muted:#658092;--line:#dce9ee}*{box-sizing:border-box}body{margin:0;background:#f3f8fa;color:var(--ink);font:15px/1.5 Arial,sans-serif}button,input,select,textarea{font:inherit}button{cursor:pointer}header{height:76px;background:var(--navy);display:flex;align-items:center;justify-content:space-between;padding:0 4%;color:#b7dbe8;font-size:11px;letter-spacing:2px}header img{width:200px;max-height:66px;object-fit:contain}main{max-width:1450px;margin:auto;padding:40px 4%}.intro{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:22px}h1{font-size:clamp(32px,4vw,48px);line-height:1.1;letter-spacing:-2px;margin:5px 0}h2{font-size:21px;margin:4px 0 18px}.intro p,.note{color:var(--muted)}.kicker{color:#3085a4!important;font-size:11px;letter-spacing:2px;font-weight:800}.buttons{display:flex;gap:9px;flex-wrap:wrap}.button{border:1px solid #bbd6e0;background:#fff;color:var(--navy);border-radius:9px;padding:10px 14px;display:inline-block;text-decoration:none;white-space:nowrap;font-weight:700;font-size:13px}.button:hover{background:#e9f7fb}.primary{background:var(--red);border-color:var(--red);color:#fff}.primary:hover{background:#bc3732;color:#fff}#dropZone{padding:17px 20px;border:2px dashed #a9cdd9;background:#effafd;border-radius:12px;color:#456477;margin:16px 0}#dropZone.dragging{background:#d8f1f9;border-color:#398bad}#message:not(:empty){background:#e5f4f8;padding:11px 15px;border-radius:8px}#message.error{background:#ffe8e7;color:#a02d2a}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin:20px 0}.metrics article,.panel{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 4px 20px #12354a08}.metrics article{padding:20px;border-top:4px solid var(--blue)}.metrics article:nth-child(3){border-top-color:var(--red)}.metrics span{display:block;color:var(--muted);font-size:12px}.metrics strong{font-size:30px;letter-spacing:-1px}.layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(320px,.95fr);gap:18px}.panel{padding:23px}.panel-head{display:flex;justify-content:space-between;gap:10px;align-items:center}.scroll{overflow:auto}table{border-collapse:collapse;width:100%;min-width:700px}th{text-align:left;background:#f6fafb;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.7px;padding:11px 8px}td{border-top:1px solid #e7f0f3;padding:14px 8px;font-size:13px}td strong,td small{display:block}td small{color:var(--muted);max-width:240px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}td button{border:0;background:none;color:#217f9c;font-weight:700}.badge{border-radius:20px;background:#edf2f4;color:#446;padding:4px 9px;font-size:11px;font-weight:800}.Critical{background:#ffe8e7;color:#ba332f}.High{background:#fff0df;color:#a5661c}.Medium{background:#e4f5fa;color:#24758e}.Low{background:#eaf4e7;color:#4c8149}.empty{text-align:center;padding:40px;color:var(--muted)}form{display:grid;gap:13px}label{display:grid;gap:5px;font-size:12px;font-weight:700;color:#426173}input,select,textarea{width:100%;padding:9px 10px;background:#fff;color:var(--ink);border:1px solid #cfdfe6;border-radius:8px}input:focus,select:focus,textarea:focus{outline:2px solid #9bd9eb}.two,.charts{display:grid;grid-template-columns:1fr 1fr;gap:13px}.charts{margin-top:18px;gap:18px}.chart-row{margin:11px 0}.chart-row>div:first-child{display:flex;justify-content:space-between;gap:10px;font-size:12px;margin-bottom:5px}.track{height:10px;background:#eff5f7;border-radius:20px;overflow:hidden}.track div{height:100%;border-radius:20px}.note{font-size:12px}#splash{position:fixed;inset:0;z-index:20;background:#bce8f2ef;display:grid;place-content:center;justify-items:center;transition:opacity .6s}#splash.hidden{opacity:0;pointer-events:none}#splash img{width:240px;background:var(--navy);border-radius:9px;padding:7px 12px;margin-top:10px}.compass-art{width:210px;height:210px;position:relative;background:url('assets/lifework-compass.png') center/contain no-repeat}.compass-art:before{content:'';position:absolute;left:37%;top:37%;width:26%;height:26%;background:white;border:3px solid var(--navy);border-radius:50%}.needle{position:absolute;left:calc(50% - 6px);top:calc(50% - 22px);border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:22px solid #f22125;transform-origin:50% 22px;animation:spin 7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:1050px){.intro{align-items:flex-start;flex-direction:column}.layout{grid-template-columns:1fr}.metrics{grid-template-columns:repeat(2,1fr)}}@media(max-width:650px){main{padding:25px 4%}.metrics,.charts,.two{grid-template-columns:1fr}.panel{padding:17px}header span{display:none}}@media(prefers-reduced-motion:reduce){.needle{animation:none}#splash{transition:none}}

/* Page navigation and new views */
.page-nav{display:flex;gap:8px;align-items:center;padding:12px 4%;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10;flex-wrap:wrap}
.page-nav button{border:1px solid transparent;background:transparent;color:var(--muted);padding:9px 14px;border-radius:8px;font-weight:700}
.page-nav button.active{color:var(--navy);background:#e6f5fa;border-color:#b8dce8}
.page-nav button:hover{color:var(--navy);background:#eef8fb}
.page{display:none}.page.active{display:block}
.welcome-hero{min-height:345px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:clamp(30px,5vw,65px);background:linear-gradient(115deg,#102e43 0%,#194b67 75%,#266c8c 100%);color:#fff;overflow:hidden;position:relative}
.welcome-hero:after{content:'';position:absolute;right:-65px;top:-115px;width:400px;height:400px;border:2px solid #9bd9eb55;border-radius:50%;box-shadow:0 0 0 36px #9bd9eb12,0 0 0 70px #9bd9eb0a;pointer-events:none}
.welcome-hero .kicker{color:#9bd9eb!important}.welcome-hero h1{max-width:650px;margin:12px 0 15px}.welcome-hero p{max-width:650px;color:#d7eaf1;font-size:16px;margin:0 0 24px}.welcome-hero button{position:relative;z-index:1}
.welcome-info{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}.welcome-info p{line-height:1.65;color:#476678}.welcome-info h2{margin-bottom:12px}
.data-intro{margin:0 0 24px}.data-intro p{color:var(--muted);max-width:800px}.data-charts{grid-template-columns:repeat(2,minmax(0,1fr))}.data-charts .panel{min-height:220px}.data-metrics{margin-bottom:18px}
.row-actions{white-space:nowrap}.row-actions .remove-button{color:#c43c38;margin-left:8px}.row-actions button:hover{text-decoration:underline}

/* One static artwork keeps both compass rings aligned. The red needle rotates
   as a CSS shape above the white dial. */
.compass-art{width:285px;height:190px;position:relative;background:url('assets/lifework-compass.png') center/100% 100% no-repeat}
.compass-art::before{content:'';position:absolute;left:50%;top:50%;width:61px;height:61px;transform:translate(-50%,-50%);background:#fff;border:2px solid #0b324c;border-radius:50%;mask-image:none;-webkit-mask-image:none}
.compass-art::after{content:'';position:absolute;left:50%;top:50%;width:58px;height:58px;margin-left:-29px;margin-top:-29px;background:#f32125;clip-path:polygon(11% 90%,42% 39%,90% 9%,61% 61%);transform-origin:50% 50%;animation:needle-spin 8s linear infinite;mask-image:none;-webkit-mask-image:none}
.compass-hub{position:absolute;z-index:2;left:50%;top:50%;width:8px;height:8px;transform:translate(-50%,-50%);border-radius:50%;background:#fff}
@keyframes needle-spin{to{transform:rotate(360deg)}}
#splash{background:#bce8f2;transition:none}
#splash.hidden{display:none;opacity:1}
@media(max-width:700px){.welcome-info,.data-charts{grid-template-columns:1fr}.welcome-hero:after{opacity:.35}.page-nav{gap:2px}.page-nav button{padding:8px 9px;font-size:12px}.compass-art{width:255px;height:170px}}
@media(prefers-reduced-motion:reduce){.compass-art::after{animation:none}}

.welcome-numbers{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:18px}.welcome-numbers article{background:#e9f6fa;border:1px solid #cbe6ee;border-radius:12px;padding:18px}.welcome-numbers strong{display:block;color:var(--navy);font-size:29px;line-height:1.2}.welcome-numbers span{display:block;color:#557287;font-size:12px;margin-top:5px}@media(max-width:700px){.welcome-numbers{grid-template-columns:1fr}}

/* Drag-and-drop import workspace */
.drop-workspace{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:185px;padding:22px;background:#edf9fc;border:2px dashed #74b8cb;border-radius:16px;color:var(--navy);margin:18px 0;cursor:pointer;transition:background .2s,border-color .2s,transform .2s}
.drop-workspace:hover,.drop-workspace.dragging,.drop-workspace:focus-visible{background:#d8f1f9;border-color:var(--red);outline:none;transform:translateY(-2px)}
.drop-workspace .drop-symbol{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#fff;border:1px solid #aed6e2;color:#3185a7;font-size:30px;line-height:1;margin-bottom:10px}
.drop-workspace strong{font-size:19px}.drop-workspace p{margin:5px 0;color:#426173;font-size:14px}.drop-workspace small{color:#668898}
#importFeedback{display:grid;gap:6px;list-style:none;margin:0 0 18px;padding:0}.import-feedback:empty{display:none}.import-feedback li{border-radius:8px;background:#edf6f9;padding:9px 12px;font-size:12px;color:#336079;word-break:break-word}.import-feedback li.completed{background:#eaf5ea;color:#336838}.import-feedback li.failed{background:#ffe9e7;color:#a2312d}
#pageDropOverlay{position:fixed;inset:0;z-index:40;display:none;align-items:center;justify-content:center;background:#102e43b8;pointer-events:none;padding:24px}#pageDropOverlay.visible{display:flex}.drop-overlay-card{display:grid;place-items:center;min-height:220px;max-width:680px;width:100%;border:3px dashed #9bd9eb;border-radius:20px;background:#eaf8fc;color:#102e43;font-size:clamp(22px,4vw,36px);font-weight:800;text-align:center;padding:25px}