*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--green: #1D9E75;--green-light: #E1F5EE;--green-dark: #085041;--amber: #EF9F27;--amber-light: #FAEEDA;--purple: #7F77DD;--purple-light: #EEEDFE;--coral: #D85A30;--coral-light: #FAECE7;--gray: #888780;--bg: #ffffff;--bg2: #f5f5f3;--text: #1a1a1a;--text2: #6b6b68;--border: rgba(0,0,0,.1);--radius: 16px;--radius-sm: 10px;--shadow: 0 2px 16px rgba(0,0,0,.06)}body{font-family:DM Sans,sans-serif;background:linear-gradient(180deg,#ecf8f0 0%,#f5f2ec 100%);color:var(--text);min-height:100vh;-webkit-font-smoothing:antialiased}#root{display:flex;justify-content:center;min-height:100vh;padding:16px 8px}.app-shell{width:100%;max-width:430px;min-height:100vh;background:var(--bg);display:flex;flex-direction:column;position:relative;border-radius:28px;overflow:hidden;box-shadow:0 20px 60px #0000001f}h1,h2,h3,.font-syne{font-family:Syne,sans-serif}.btn{display:block;width:100%;border:none;cursor:pointer;font-family:Syne,sans-serif;font-size:15px;font-weight:700;border-radius:var(--radius);padding:15px;transition:opacity .15s,transform .1s;letter-spacing:.02em}.btn:active{transform:scale(.98)}.btn-primary{background:var(--green);color:#fff}.btn-primary:hover{opacity:.9}.btn-outline{background:transparent;color:var(--green);border:2px solid var(--green)}.btn-outline:hover{background:var(--green-light)}.btn-sm{padding:9px 16px;font-size:13px;width:auto;display:inline-block;border-radius:var(--radius-sm)}.form-group{margin-bottom:14px}.form-label{display:block;font-size:12px;font-weight:500;color:var(--text2);margin-bottom:5px}.form-input{width:100%;padding:12px 14px;border-radius:var(--radius-sm);border:1.5px solid var(--border);background:var(--bg2);font-family:DM Sans,sans-serif;font-size:14px;color:var(--text);outline:none;transition:border-color .15s}.form-input:focus{border-color:var(--green);background:#fff}.card{background:var(--bg);border-radius:var(--radius);border:1px solid var(--border);padding:16px}.chip{display:inline-block;font-size:11px;padding:3px 9px;border-radius:20px;font-weight:500}.chip-green{background:var(--green-light);color:var(--green-dark)}.chip-amber{background:var(--amber-light);color:#633806}.chip-purple{background:var(--purple-light);color:#3c3489}.chip-coral{background:var(--coral-light);color:#4a1b0c}.section-label{font-family:Syne,sans-serif;font-size:12px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.07em;margin-bottom:10px;margin-top:20px}.section-label:first-child{margin-top:0}.scroll-content{flex:1;overflow-y:auto;padding:16px}.nav-bar{display:flex;border-top:1px solid var(--border);background:var(--bg);flex-shrink:0;padding-bottom:env(safe-area-inset-bottom)}.nav-item{flex:1;padding:10px 4px;text-align:center;cursor:pointer;font-size:10px;color:var(--text2);transition:color .15s;display:flex;flex-direction:column;align-items:center;gap:2px}.nav-item.active{color:var(--green)}.nav-icon{font-size:20px}.page-header{background:var(--green);color:#fff;padding:16px 16px 20px;flex-shrink:0}.page-header h1{font-size:22px;font-weight:800}.page-header p{font-size:13px;opacity:.85;margin-top:3px}.back-btn{background:none;border:none;cursor:pointer;font-size:13px;color:#ffffffd9;display:flex;align-items:center;gap:4px;margin-bottom:10px;padding:0;font-family:DM Sans,sans-serif}.loading{display:flex;align-items:center;justify-content:center;flex:1}.spinner{width:36px;height:36px;border:3px solid var(--green-light);border-top-color:var(--green);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.empty-state{text-align:center;padding:48px 24px;color:var(--text2)}.empty-state .emoji{font-size:48px;display:block;margin-bottom:12px}.skill-Beginner{background:var(--green-light);color:var(--green-dark)}.skill-Intermediate{background:var(--amber-light);color:#633806}.skill-Advanced{background:var(--purple-light);color:#3c3489}