/* RoleBreeze visual refresh — vivid color, spacious typography, responsive workspace. */
:root{--ink:#24233e;--muted:#706e88;--green:#6a43ec;--lime:#e4fc83;--bg:#f6f5fc;--line:#e7e4f2;--purple:#7044f1;--cyan:#72eddf;--coral:#ff947b}
body{font-family:"Avenir Next","Segoe UI",Arial,sans-serif;background:radial-gradient(ellipse at 83% 0%,#e9e0ff 0%,transparent 42%),radial-gradient(ellipse at 100% 60%,#e6faf6 0%,transparent 35%),#f6f5fc;-webkit-font-smoothing:antialiased}
aside{width:250px;background:#201d37;color:#fff;border:0;padding:34px 22px;z-index:2;box-shadow:5px 0 35px #24203e0a;overflow-y:auto}
.brand{display:flex;align-items:center;gap:10px;font-size:27px;letter-spacing:-1.2px;color:white}.brand b{color:white}.brand-symbol{width:38px;height:38px;background:linear-gradient(145deg,#aa8cff,#7044f1);border-radius:12px;display:grid;place-items:center;box-shadow:0 4px 20px #9c7cff40;color:#fff}.brand-symbol svg{width:24px;height:24px}.brand-word{display:flex;gap:0;align-items:baseline}.brand-word i{color:var(--cyan);font-style:normal}
aside>.tiny{color:#a8a1c6;margin:15px 0 0 3px;font-size:11px;letter-spacing:.3px}nav{margin-top:38px;gap:9px}nav button{display:flex;align-items:center;gap:12px;color:#beb6d6;padding:13px 14px;border-radius:12px;font-size:13px;transition:background .18s,transform .18s,color .18s}nav button:hover{color:white;background:#ffffff0a;transform:translateX(3px)}nav button.active{background:#6f49e9;color:white;box-shadow:0 7px 20px #100d2633}nav svg{width:19px;height:19px;flex:none}.sidefoot{margin-top:43px;position:relative;overflow:hidden;border:1px solid #58506e;background:linear-gradient(145deg,#39324f,#2c2842);padding:21px 17px;border-radius:18px;color:#eae4fc;font-size:12px}.sidefoot:after{content:"✦";position:absolute;right:-10px;bottom:-21px;font-size:90px;color:#b296ff22}.sidefoot b{font-size:14px}.sidefoot p{color:#bdb4d6;margin:9px 0 18px}.sidefoot .badge{background:#e4fc83;color:#27213b;font-size:10px;font-weight:700}
.main{margin-left:250px;width:calc(100% - 250px);padding:28px 43px 45px;max-width:1550px}.top{border-bottom:1px solid #e3ddf0;margin-bottom:32px;padding-bottom:22px}.top>.muted{font-size:13px;font-weight:600;color:#69627e}.top .badge{background:white;color:#726689;border:1px solid #e2dceb;font-size:10px}.top select{font-weight:600;border-color:#e3dbee;color:#433355;background:white;border-radius:11px;padding:10px 13px;font-size:12px}.avatar{height:34px;width:34px;background:#e8defe;border:2px solid white;border-radius:50%;display:grid;place-items:center;color:#6742bb;font-weight:800;font-size:12px}
h1{font-size:39px;letter-spacing:-1.6px;line-height:1.2;margin:10px 0 9px;font-weight:750}h2{font-size:21px;letter-spacing:-.5px}h3{letter-spacing:-.25px}.main>#view>.tiny{color:#7050c5;font-weight:750;font-size:10px;letter-spacing:2px}.main>#view>.muted{font-size:14px;color:#7a728d}.badge{background:#eee8fd;color:#6746b8;font-weight:600;padding:5px 11px}.hero{background:linear-gradient(117deg,#7148ec 0%,#8a5af0 47%,#b57bef 100%);position:relative;isolation:isolate;overflow:hidden;border-radius:24px;padding:31px 35px;min-height:220px;box-shadow:0 16px 35px #7845d925;margin:27px 0 25px;align-items:center;gap:35px}.hero:before{content:"";position:absolute;z-index:-1;width:460px;height:460px;right:-120px;top:-200px;border-radius:50%;border:1px solid #ffffff25;box-shadow:0 0 0 40px #ffffff08,0 0 0 90px #ffffff07,0 0 0 145px #ffffff05}.hero:after{content:"✦";font-size:55px;line-height:1;color:#d7ffab;position:absolute;right:213px;top:31px;transform:rotate(-10deg)}.hero>div:first-child{max-width:68%;z-index:1}.hero h2{font-size:30px;line-height:1.2;max-width:560px;letter-spacing:-.7px;margin-top:13px!important;margin-bottom:11px}.hero p{font-size:13px;color:#f0e9ff;margin:7px 0 21px}.hero .badge{background:#ffffff24;border:1px solid #ffffff24;color:white;font-size:10px;letter-spacing:.3px}.hero .btn{background:#e3ff8c;color:#322a47;box-shadow:0 5px 15px #45257d20;padding:12px 20px;font-size:12px}.hero .btn:hover{background:#edffba;color:#201635;transform:translateY(-2px)}
.ring{border:0;position:relative;width:144px;min-width:144px;height:144px;display:flex;flex-direction:column;justify-content:center;background:radial-gradient(circle closest-side,#8d61df 80%,transparent 81%),conic-gradient(#e7ff98 var(--progress,0%),#ffffff35 0);border-radius:50%;padding:18px;box-shadow:0 0 0 10px #ffffff08;margin-right:8px}.ring strong{font-size:39px;color:white;letter-spacing:-2px}.ring div{font-size:10px;color:#f4ecff}.cards{gap:17px;margin:20px 0 25px}.cards .card{border:0;border-radius:17px;position:relative;padding:20px 24px;box-shadow:none;overflow:hidden}.cards .card:after{position:absolute;right:22px;top:25px;width:41px;height:41px;border-radius:13px;display:grid;place-items:center;font-size:20px}.cards .card:nth-child(1){background:#eae0ff;color:#51338c}.cards .card:nth-child(2){background:#d9f5ee;color:#216754}.cards .card:nth-child(3){background:#ffe9df;color:#9a503c}.cards .card:nth-child(1):after{content:"✓";background:#d8c7fb;color:#7350bb}.cards .card:nth-child(2):after{content:"⌕";background:#b8e9df;color:#367f6d}.cards .card:nth-child(3):after{content:"↗";background:#ffd4c2;color:#ab684c}.cards .tiny{font-size:9px;font-weight:750;letter-spacing:1px;color:inherit;opacity:.75}.metric{font-size:31px;line-height:1.3;letter-spacing:-1px;margin-top:5px}.metric .tiny{font-size:13px;margin-left:4px;letter-spacing:0}.card{background:#ffffffed;border:1px solid #e9e4f4;border-radius:19px;box-shadow:0 5px 18px #2e214804;padding:25px}.grid{gap:23px;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}.grid>div>.card:first-child{background:#fff}.grid>div>.card:first-child .badge{background:#fff0d6;color:#98621f}.grid>div>.card:first-child>.btn{background:#232039}.grid>div>.card:nth-child(2){background:#eeebff;border-color:#e2daf9;position:relative;overflow:hidden}.grid>div>.card:nth-child(2):after{content:"✧";position:absolute;right:12px;bottom:-9px;font-size:72px;color:#ab90ee55}.grid>div>.card:nth-child(2) h2{color:#614395}
.btn{background:#7044ed;border-radius:10px;box-shadow:0 4px 10px #7343df17;transition:transform .18s,box-shadow .18s,background .18s;font-size:13px;padding:11px 17px}.btn:hover{background:#6035d7;transform:translateY(-1px);box-shadow:0 7px 15px #7343df25}.btn.secondary{background:white;border:1px solid #ded6ed;color:#655278;box-shadow:none}.btn.secondary:hover{background:#f6f0ff;border-color:#bea7ef}.btn.small{font-size:11px;padding:7px 11px}.progress{height:6px;background:#eee9f7;margin:20px 0 8px}.progress span{background:linear-gradient(90deg,#9d77f7,#7044ed);transition:width .35s}.step{border-color:#f0edf6;align-items:center;padding:17px 0;gap:12px}.step input{appearance:none;width:23px;height:23px;border:1.5px solid #dcd4ec;border-radius:7px;padding:0;background:#fbf9ff;accent-color:#7044ed;display:grid;place-items:center}.step input:checked{background:#7044ed;border-color:#7044ed}.step input:checked:after{content:"✓";font-size:14px;font-weight:700;color:white}.step h3{font-size:13px;font-weight:700;margin-bottom:4px}.step .tiny{font-size:11px;line-height:1.4;color:#8a829d}.step.done h3{color:#91859e}.step .btn{font-size:10px;padding:6px 10px}.job{transition:transform .2s,box-shadow .2s}.job:hover{transform:translateY(-2px);box-shadow:0 12px 25px #35224e0a}.job .tag{background:#eee7ff;color:#7253a4}.job .salary{color:#6244b4}.job h3{font-size:20px;margin-top:10px}.tag{padding:5px 9px;border-radius:7px;font-size:10px;background:#f2eef8;color:#716284}.fields{column-gap:20px}label{font-size:12px;color:#675c78;margin-top:17px}input,select,textarea{border-color:#e0d8ed;background:#fdfcff;font-size:13px;padding:12px;color:#343047;transition:border-color .18s,box-shadow .18s}input:focus,select:focus,textarea:focus{outline:0;border-color:#9c79ef;box-shadow:0 0 0 3px #9c79ef16}.output{background:#fbf9ff;border-color:#e6ddf3;font-family:inherit;font-size:13px;padding:23px}.tabs{gap:9px;margin:23px 0}.tabs button{border-color:#e5ddef;font-size:12px;padding:10px 15px;transition:all .18s}.tabs button.active{background:#7044ed;box-shadow:0 5px 15px #7044ed25;border-color:#7044ed}.tabs button:hover{border-color:#9e7ce6}.integration{border-color:#ece6f4;padding:19px 0}.integration .badge{background:#f2eff7;color:#867b95}.answer{background:#eae3ff;border:1px solid #dacfef;color:#59447e}.toast{background:#33214f;border:1px solid #8161a6;box-shadow:0 8px 40px #30203c2e;font-size:13px}footer{font-size:10px;border-top:1px solid #e5deef;padding-top:18px;line-height:1.6;color:#91879d}.notice{font-size:11px}.empty{padding:42px}a{color:#7044ed}.top .row{gap:10px}
@keyframes reveal{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}#view{animation:reveal .25s ease-out}
@media(min-width:1450px){.main{padding:32px 55px;}.hero{min-height:240px}}
@media(max-width:1100px){.main{padding:24px 27px}.grid{grid-template-columns:1fr}.hero h2{font-size:26px}.hero:after{right:190px}}
@media(max-width:800px){aside{width:210px;padding:26px 15px}.main{margin-left:210px;width:calc(100% - 210px);padding:23px}.brand{font-size:24px}.brand-symbol{width:32px;height:32px}.cards{grid-template-columns:1fr}.hero{padding:25px}.hero>div:first-child{max-width:65%}.ring{width:100px;min-width:100px;height:100px;padding:10px}.ring strong{font-size:30px}.ring div{font-size:9px}.hero:after{right:137px;top:21px;font-size:31px}h1{font-size:33px}}
@media(max-width:720px){aside{position:static;width:100%;padding:20px 18px 14px;border-radius:0 0 22px 22px}.brand{font-size:25px}.brand-symbol{width:34px;height:34px}nav{margin-top:19px;gap:5px;padding-bottom:3px}nav button{padding:9px 11px;gap:7px;font-size:11px}nav svg{width:15px;height:15px}.main{margin-left:0;width:100%;padding:22px 17px 35px}.top{margin-bottom:23px;padding-bottom:17px}.top>.muted{font-size:11px}.top .badge{display:none}.top select{font-size:11px}.avatar{width:30px;height:30px}.hero{margin-top:22px;padding:24px;min-height:215px;gap:15px}.hero h2{font-size:24px}.hero p{font-size:12px}.hero>div:first-child{max-width:70%}.hero .badge{font-size:9px}.hero .btn{font-size:11px;padding:10px 13px}.ring{width:83px;min-width:83px;height:83px;margin-right:0;box-shadow:0 0 0 7px #ffffff08}.ring strong{font-size:26px}.ring div{font-size:8px;line-height:1.3}.hero:after{right:94px;font-size:25px}.cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.cards .card{padding:15px 12px;border-radius:13px}.cards .card:after{display:none}.cards .tiny{font-size:8px;letter-spacing:.3px;line-height:1.3;display:block}.metric{font-size:25px;margin-top:8px}.metric .tiny{display:inline;font-size:10px}.card{padding:20px}.step .btn{padding:6px 8px}.step h3{font-size:12px}.step input{width:20px;height:20px}.step .tiny{font-size:10px}h1{font-size:31px}h2{font-size:19px}.tabs{gap:6px}.tabs button{font-size:11px;padding:8px 10px}#view>.card.row{flex-direction:column}.job .row .tiny{font-size:10px}.fields{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}