.skills-page{overflow-y:auto;overflow-x:hidden;background:#f7f8fb;color:#17233c;animation:skill-page-in .34s cubic-bezier(.2,.8,.2,1)}
.skills-topbar{background:#fffafc;border-bottom-color:#eee5eb}.skill-top-actions{display:flex;align-items:center;gap:10px}.skill-mode{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border-radius:999px;background:#fff0e8;color:#9b4d24;font-size:10px;font-weight:800}.skill-mode i{width:7px;height:7px;border-radius:50%;background:#ff8a65;box-shadow:0 0 0 4px #ff8a6520}.skills-main{max-width:1480px;margin:0 auto;padding:26px 32px 40px}.skills-hero{position:relative;display:flex;justify-content:space-between;align-items:center;min-height:152px;padding:28px 34px;border:1px solid #e8e0ea;border-radius:22px;overflow:hidden;background:linear-gradient(130deg,#fff 0%,#fff8f1 55%,#f1fbf8 100%);box-shadow:0 16px 45px #5c52620b}.skills-hero:after{content:"";position:absolute;width:230px;height:230px;border:1px solid #efcfe0;border-radius:50%;right:-65px;top:-110px;box-shadow:0 0 0 35px #f6e7ee55,0 0 0 70px #f9eff455}.skills-hero small{color:#e8798d;font-size:10px;font-weight:900;letter-spacing:1.8px}.skills-hero h1{font-size:clamp(24px,3vw,38px);letter-spacing:-1.2px;margin:7px 0 8px}.skills-hero p{max-width:720px;margin:0;color:#6f7789;font-size:13px}.skill-mascot{position:relative;z-index:1;width:86px;height:86px;border-radius:26px 26px 34px 34px;background:#fff;border:1px solid #eadce5;display:grid;place-items:center;box-shadow:0 14px 28px #976a7b22;transform:rotate(4deg)}.skill-mascot b{font-size:23px;color:#e6798d}.skill-mascot span{position:absolute;left:-15px;top:-14px;color:#f4ab4f;font-size:25px;animation:skill-twinkle 2.4s ease-in-out infinite}.skill-mascot i,.skill-mascot:before{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:#24324b;top:38px}.skill-mascot i{left:23px}.skill-mascot:before{right:23px}.skill-flow{display:flex;align-items:center;gap:7px;margin:16px 0;padding:11px 14px;border:1px solid #e4e7ed;border-radius:15px;background:#fff;overflow:auto}.skill-flow button{flex:1;min-width:112px;border:0;border-radius:11px;background:transparent;padding:8px 9px;display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:7px;color:#6e7787;cursor:pointer;text-align:left;transition:.2s ease}.skill-flow button:hover,.skill-flow button.active{background:#f1faf8;color:#0f766e;transform:translateY(-1px)}.skill-flow button span{font-size:17px}.skill-flow button b{font-size:9px}.skill-flow button em{font-size:9px;font-style:normal;white-space:nowrap}.skill-flow>i{color:#c0c6d0;font-style:normal}.skills-layout{display:grid;grid-template-columns:245px minmax(340px,.9fr) minmax(390px,1.1fr);gap:15px;align-items:start}.skill-catalog,.skill-composer,.skill-preview{background:#fff;border:1px solid #e3e6ed;border-radius:18px;box-shadow:0 10px 32px #26324a0a}.skill-catalog{padding:14px}.skill-panel-title{display:flex;align-items:end;justify-content:space-between;padding:4px 5px 12px}.skill-panel-title span{font-size:12px;font-weight:850}.skill-panel-title small{color:#9aa2b0;font-size:9px}.skill-card{width:100%;display:grid;grid-template-columns:39px 1fr auto;align-items:center;gap:10px;border:0;border-radius:13px;background:transparent;padding:10px;text-align:left;cursor:pointer;color:#4c5669;transition:.22s ease}.skill-card+.skill-card{margin-top:3px}.skill-card:hover{background:#faf7fa;transform:translateX(2px)}.skill-card.active{background:linear-gradient(120deg,#e9f8f5,#f7fcfb);color:#0e7269;box-shadow:inset 0 0 0 1px #cdeae5}.skill-card-icon{width:39px;height:39px;border-radius:12px;background:#f4f1f4;display:grid;place-items:center;font-size:18px}.skill-card.active .skill-card-icon{background:#fff;box-shadow:0 5px 14px #135f5520}.skill-card small,.skill-card b,.skill-card em{display:block}.skill-card small{font-size:8px;letter-spacing:1px;opacity:.65}.skill-card b{font-size:11px;margin:1px 0}.skill-card em{font-size:9px;font-style:normal;opacity:.75}.skill-card>i{font-style:normal}.skill-composer{padding:20px}.skill-detail-head{display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid #edf0f4}.skill-detail-icon{width:48px;height:48px;border-radius:15px;background:#fff2ea;display:grid;place-items:center;font-size:22px}.skill-detail-head small{color:#e1778b;font-size:8px;font-weight:900;letter-spacing:1.2px}.skill-detail-head h2{font-size:18px;margin:2px 0}.skill-detail-head p{font-size:10px;color:#818a99;margin:0}.skill-ready{align-self:start;padding:4px 7px;border-radius:99px;background:#eaf8f5;color:#087b6e;font-size:8px;font-weight:800}.skill-context-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:15px 0;padding:11px 12px;border-radius:12px;background:#f5f7fa}.skill-context-bar span,.skill-context-bar strong{display:block}.skill-context-bar span{font-size:8px;color:#9098a7}.skill-context-bar strong{font-size:10px;margin-top:2px}.skill-context-bar label{font-size:9px;color:#667085;white-space:nowrap}.skill-field{display:block;margin-top:13px}.skill-field>span,.skill-upload>span{display:block;margin-bottom:6px;color:#596376;font-size:10px;font-weight:800}.skill-field textarea,.skill-field select{width:100%;border:1px solid #dfe3ea;border-radius:11px;background:#fbfcfd;padding:11px 12px;font:inherit;font-size:11px;color:#26334c;outline:0;resize:vertical;transition:.2s ease}.skill-field textarea:focus,.skill-field select:focus{border-color:#60b9ad;background:#fff;box-shadow:0 0 0 4px #ddf5f1}.skill-form-row{display:grid;grid-template-columns:1fr 1.25fr;gap:10px;align-items:end}.skill-upload{display:block;margin-top:13px}.skill-upload input{position:absolute;opacity:0;pointer-events:none}.skill-upload b{display:block;border:1px dashed #ccd3dd;border-radius:11px;padding:11px 12px;background:#fbfcfd;color:#768092;font-size:9px;text-align:center;cursor:pointer}.skill-upload b:hover{border-color:#65bdb1;color:#0f766e;background:#f2fbf9}.skill-note{display:flex;gap:9px;margin-top:14px;padding:11px;border-radius:12px;background:#fff8ec;color:#88551c}.skill-note>span{font-size:15px}.skill-note b,.skill-note small{display:block}.skill-note b{font-size:9px}.skill-note small{font-size:8px;margin-top:3px;color:#a47744}.skill-preview{position:sticky;top:83px;overflow:hidden}.skill-preview>header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #e7eaf0}.skill-preview>header>div{display:flex;align-items:center;gap:7px}.skill-preview>header b{font-size:11px}.skill-preview>header small{font-size:8px;color:#9aa2b0}.skill-preview pre{height:596px;overflow:auto;margin:0;padding:18px 20px;background:#18243a;color:#dbe7f5;white-space:pre-wrap;word-break:break-word;font:10px/1.75 ui-monospace,SFMono-Regular,Consolas,monospace}.skill-preview pre::selection{background:#5cc8b766}.skill-preview>footer{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px}.skill-preview>footer .button{font-size:10px}.skill-preview>footer .button:disabled{opacity:.55;cursor:not-allowed}
@keyframes skill-page-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes skill-twinkle{0%,100%{transform:scale(.82) rotate(-8deg);opacity:.65}50%{transform:scale(1.12) rotate(8deg);opacity:1}}
@media(max-width:1120px){.skills-layout{grid-template-columns:220px 1fr}.skill-preview{grid-column:1/-1;position:static}.skill-preview pre{height:430px}}
@media(max-width:980px){.skills-page .button.ghost,.orders-page #openSkillsBtn,.order-drawer #drawerSkillsBtn,.topbar #quoteSkillsBtn{display:inline-flex}.orders-page #memberAdminBtn,.orders-page #openQuoteBtn{display:none}}
@media(max-width:760px){.skills-main{min-width:0;padding:14px 12px 28px}.skills-hero{min-height:130px;padding:20px}.skills-hero h1{font-size:24px}.skills-hero p{font-size:11px;padding-right:55px}.skill-mascot{position:absolute;right:16px;bottom:17px;width:55px;height:55px;border-radius:18px}.skill-mascot b{font-size:14px}.skill-mascot i,.skill-mascot:before{width:5px;height:5px;top:24px}.skill-mascot i{left:14px}.skill-mascot:before{right:14px}.skill-flow{max-width:100%;margin:10px 0}.skills-layout{min-width:0;grid-template-columns:minmax(0,1fr)}.skill-catalog,.skill-composer,.skill-preview{min-width:0}.skill-catalog{padding:9px}.skill-panel-title{display:none}#skillList{max-width:100%;display:flex;gap:6px;overflow:auto}.skill-card{min-width:155px}.skill-card+.skill-card{margin-top:0}.skill-composer{padding:15px}.skill-detail-head{grid-template-columns:43px minmax(0,1fr)}.skill-ready{display:none}.skill-context-bar{align-items:flex-start;flex-direction:column}.skill-form-row{grid-template-columns:minmax(0,1fr)}.skill-preview{grid-column:auto}.skill-preview pre{height:430px}.skill-preview>footer{grid-template-columns:1fr}.skill-top-actions .skill-mode{display:none}}
@media(prefers-reduced-motion:reduce){.skills-page,.skill-mascot span{animation:none}.skill-card,.skill-flow button{transition:none}}