/* v41 — ระบบอาชีพใหม่: หน้าสร้างตัวละคร • ห้อง JOB CLASS • ล็อกสกิล Beginner */
#create-screen .cc-sec { margin-bottom: 10px; }
#create-screen .cc-opt { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 110px; padding: 10px 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.05); color: inherit; font: inherit; font-weight: 700; cursor: pointer; }
#create-screen .cc-opt small { font-weight: 400; opacity: .7; font-size: 11px; }
#create-screen .cc-opt.on, #create-screen .cc-skin.on { border-color: #ffd740; background: rgba(255,215,64,.15); box-shadow: 0 0 12px rgba(255,215,64,.3); }
#create-screen .cc-skin { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.05); color: inherit; font: inherit; cursor: pointer; }
#create-screen .cc-skin i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255,255,255,.6); }
#create-screen .cc-info { margin-top: 8px; padding: 12px; border-radius: 10px; background: linear-gradient(90deg, rgba(124,179,66,.18), rgba(255,215,64,.12)); border: 1px solid rgba(124,179,66,.5); }
#create-screen .cc-info b { display: block; margin-bottom: 4px; } #create-screen .cc-info small { opacity: .85; line-height: 1.5; }
#create-screen .cc-path { margin-top: 8px; font-size: 11px; font-weight: 700; color: #ffd740; }

.win[data-win="jobclass"] .win-body { background: radial-gradient(ellipse at 50% 0%, rgba(255,215,64,.12), transparent 60%), #120e1c; }
.jc-hero { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 12px; background: linear-gradient(90deg, color-mix(in srgb, var(--cc) 30%, transparent), transparent); border: 1px solid color-mix(in srgb, var(--cc) 60%, transparent); margin-bottom: 10px; }
.jc-hero i { font-style: normal; font-size: 34px; } .jc-hero b { font-size: 16px; display: block; } .jc-hero em { font-style: normal; color: #ffd740; font-weight: 800; }
.jc-msg { padding: 14px; border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); line-height: 1.6; margin-bottom: 10px; }
.jc-msg.warn { border-color: rgba(255,171,64,.5); background: rgba(255,171,64,.08); } .jc-msg.small { padding: 8px 10px; font-size: 11.5px; }
.jc-step { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; } .jc-step b { font-size: 15px; color: #ffd740; } .jc-step small { opacity: .75; }
.jc-picks { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 10px; } .jc-picks.n1 { grid-template-columns: 1fr; }
.jc-pick { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); }
.jc-pick .btn { width: 100%; padding: 10px; font-weight: 800; }
.jc-card { display: flex; gap: 10px; align-items: center; }
.jc-card canvas { width: 92px; height: 100px; border-radius: 10px; background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--cc) 45%, transparent), rgba(0,0,0,.4)); image-rendering: pixelated; flex: none; }
.jc-t b { font-size: 14px; color: var(--cc); display: block; } .jc-t small { opacity: .7; } .jc-t p { margin: 4px 0 0; font-size: 11.5px; line-height: 1.45; opacity: .9; }
.jc-side { display: inline-block; margin-top: 4px; text-decoration: none; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; }
.jc-side.light { background: linear-gradient(90deg, #fff59d, #ffd740); color: #3e2a00; } .jc-side.dark { background: linear-gradient(90deg, #4a148c, #1a0033); color: #e1bee7; }
.jc-tree { font-size: 11px; line-height: 1.7; padding: 8px 10px; border-radius: 10px; background: rgba(0,0,0,.25); opacity: .9; }
.jc-lock { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 16px; text-align: center; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px dashed rgba(255,255,255,.2); }
.jc-lock i { font-style: normal; font-size: 40px; } .jc-lock b { font-size: 16px; } .jc-lock p { margin: 0; line-height: 1.6; opacity: .85; } .jc-lock.small { padding: 18px; }
.tabs.sk1 .tab.lk { opacity: .45; }
.sk-autobtn { float: right; margin: -3px 0 0 8px; padding: 4px 10px !important; font-size: 11px; }