*{margin:0;padding:0;box-sizing:border-box}:root{--purple-primary: #7B61FF;--purple-light: #9D8FFF;--purple-dark: #5B3FD9;--purple-bg: #F0EEFF;--green-primary: #00C48C;--green-light: #E6F7EF;--green-dark: #00A06A;--red-primary: #FF6B6B;--red-light: #FFE6E6;--gray-light: #f4f6f8;--gray-medium: #e0e0e0;--gray-dark: #888;--white: #ffffff;--shadow-sm: 0 2px 4px rgba(0, 0, 0, .05);--shadow-md: 0 4px 12px rgba(0, 0, 0, .1);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .12);--radius-sm: 6px;--radius-md: 10px;--radius-lg: 14px;--radius-xl: 20px}body{font-family:Segoe UI,PingFang SC,Microsoft YaHei,sans-serif;background:linear-gradient(135deg,#f5f7fa,#e4e8f0);color:#333;min-height:100vh;line-height:1.6}#root{max-width:1200px;margin:0 auto;padding:20px}.app-container{position:relative}.user-panel{position:absolute;top:20px;right:20px;display:flex;align-items:center;gap:12px;font-size:14px;color:#666;background:var(--white);padding:8px 16px;border-radius:var(--radius-xl);box-shadow:var(--shadow-sm)}.user-email{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.card{background:var(--white);border-radius:var(--radius-lg);padding:24px;margin-bottom:20px;box-shadow:var(--shadow-md);transition:transform .2s,box-shadow .2s}.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.card-title{font-size:28px;font-weight:700;text-align:center;color:var(--purple-primary);margin-bottom:8px}.card-subtitle{text-align:center;color:#666;margin-bottom:16px}.total-badge{display:inline-block;background:linear-gradient(135deg,#ffebd6,#ffd8b8);color:#ff7a00;padding:12px 28px;border-radius:var(--radius-xl);font-weight:700;font-size:18px;margin-top:12px;box-shadow:0 4px 12px #ff7a0033}.total-badge span{font-size:24px;margin-left:8px}.text-center{text-align:center}.btn{padding:12px 24px;border:none;border-radius:var(--radius-md);cursor:pointer;font-weight:600;font-size:16px;transition:all .2s ease;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}.btn:hover{transform:translateY(-1px);opacity:.9}.btn:active{transform:translateY(0)}.btn-purple{background:linear-gradient(135deg,var(--purple-primary) 0%,var(--purple-dark) 100%);color:var(--white);width:100%;font-size:18px;padding:16px 24px;box-shadow:0 4px 12px #7b61ff4d}.btn-purple:hover{box-shadow:0 6px 16px #7b61ff66}.btn-green{background:linear-gradient(135deg,var(--green-primary) 0%,var(--green-dark) 100%);color:var(--white);box-shadow:0 4px 12px #00c48c4d}.btn-green:hover{box-shadow:0 6px 16px #00c48c66}.btn-red{background:linear-gradient(135deg,var(--red-primary) 0%,#e55555 100%);color:var(--white);padding:8px 16px;font-size:14px;box-shadow:0 4px 12px #ff6b6b4d}.btn-back{background:var(--gray-light);color:#333;border:1px solid var(--gray-medium);margin-bottom:20px;width:auto}.btn-back:hover{background:var(--gray-medium)}.btn-small{padding:8px 16px;font-size:14px}.grid-7{display:grid;grid-template-columns:repeat(7,1fr);gap:12px;text-align:center}.weekday{color:var(--gray-dark);font-size:14px;font-weight:600;padding:8px 0}.day-box{background:var(--white);border:2px solid var(--gray-light);border-radius:var(--radius-md);padding:16px 8px;cursor:pointer;transition:all .2s ease;min-height:80px;display:flex;flex-direction:column;align-items:center;justify-content:center}.day-box:hover{border-color:var(--purple-primary);background:var(--purple-bg);transform:scale(1.02)}.day-box.empty{background:transparent;border:none;cursor:default}.day-box.empty:hover{transform:none;background:transparent}.day-box.active{background:linear-gradient(135deg,var(--purple-primary) 0%,var(--purple-dark) 100%);color:var(--white);border-color:var(--purple-primary);box-shadow:0 4px 16px #7b61ff66}.day-number{font-weight:700;font-size:20px;margin-bottom:4px}.day-score{font-size:13px;font-weight:600;color:var(--gray-dark)}.day-box.active .day-score{color:#fffc}.day-box.has-score .day-score{color:var(--green-primary)}.calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:nowrap;gap:10px}.calendar-title-wrapper{flex:1;display:flex;justify-content:center;align-items:center}.calendar-title{font-size:24px;font-weight:700;color:#333;margin:0}.calendar-buttons-right{display:flex;gap:20px;align-items:center}.btn-today{padding:6px 12px!important;font-size:14px!important;min-width:auto!important}.month-nav{display:flex;gap:12px}.month-nav button{background:var(--white);border:1px solid var(--gray-medium);border-radius:var(--radius-sm);padding:8px 16px;cursor:pointer;transition:all .2s}.month-nav button:hover{background:var(--purple-bg);border-color:var(--purple-primary)}.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px;padding:20px 0}.skill-card{background:var(--white);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);transition:all .3s ease;cursor:pointer}.skill-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}.skill-card .img-container{height:150px;background-color:#f0f0f0}.skill-card .img-container img{object-fit:cover;width:100%;height:100%}.skill-card.locked .img-container{filter:grayscale(100%) opacity(70%)}@keyframes unlockGlow{0%{transform:scale(1);box-shadow:var(--shadow-md)}50%{transform:scale(1.05);box-shadow:0 0 20px gold}to{transform:scale(1);box-shadow:var(--shadow-md)}}.animating-unlock{animation:unlockGlow .8s ease}.skill-card-image{width:100%;height:160px;background:linear-gradient(135deg,var(--purple-bg) 0%,#e8e4ff 100%);display:flex;align-items:center;justify-content:center;font-size:48px;position:relative}.skill-card.locked .skill-card-image{filter:grayscale(100%);background:linear-gradient(135deg,#e0e0e0,silver)}.lock-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:#0006;display:flex;align-items:center;justify-content:center;font-size:48px}.skill-card-content{padding:20px}.skill-card-title{font-size:18px;font-weight:700;color:#333;margin-bottom:12px}.skill-card-desc{font-size:14px;color:var(--gray-dark);margin-bottom:16px;line-height:1.5}.skill-card-btn{width:100%;padding:10px;border:none;border-radius:var(--radius-sm);cursor:pointer;font-weight:600;font-size:14px;transition:all .2s}.skill-card-btn.unlock{background:var(--purple-bg);color:var(--purple-primary)}.skill-card-btn.unlock:hover{background:var(--purple-primary);color:var(--white)}.skill-card-btn.create{background:var(--green-light);color:var(--green-primary);border:2px dashed var(--green-primary)}.skill-card-btn.create:hover{background:var(--green-primary);color:var(--white);border-style:solid}.detail-header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:24px}.header-right{flex:1;display:flex;flex-direction:column;align-items:flex-end;gap:8px}.save-status{font-size:14px;padding:6px 12px;border-radius:20px;background:var(--green-light);color:var(--green-dark)}.detail-title{font-size:28px;font-weight:700;color:#333}.table-responsive{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;box-sizing:border-box}.task-table{width:100%;border-collapse:separate;border-spacing:12px 16px;margin-bottom:20px;table-layout:auto}.task-table th,.task-table td{border:none;background:var(--white);border-radius:16px;padding:16px;text-align:left;transition:all .2s cubic-bezier(.4,0,.2,1);font-size:14px;vertical-align:middle;box-shadow:0 4px 10px #0000000a;position:relative}.task-table td:first-child{background:var(--white);border-radius:16px;box-shadow:0 4px 10px #7b61ff14;text-align:center;position:relative;overflow:hidden;padding:12px 8px;width:90px}.task-table th:first-child{background:transparent;box-shadow:none;text-align:center;color:#888}.task-table td.behavior-cell{font-size:15px;font-weight:800;color:var(--purple-dark);letter-spacing:1px}.task-table td.behavior-cell:before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:linear-gradient(180deg,var(--purple-light) 0%,var(--purple-primary) 100%);border-radius:16px 0 0 16px}.task-table td.behavior-cell:hover{transform:translateY(-2px);box-shadow:0 6px 14px #7b61ff26;cursor:pointer}.task-table td.selected{background:var(--green-light)!important;color:var(--green-dark);font-weight:700;box-shadow:inset 0 2px 4px #0000000d,0 0 0 2px var(--green-primary)!important;transform:scale(.98)}.task-table tbody tr:nth-child(2n) td:nth-child(2){background-color:#f8fafc}.task-table tbody tr:nth-child(2n) td:nth-child(3){background-color:#fff1f2}.task-table tbody tr:nth-child(2n) td:nth-child(4){background-color:#fff7ed}.task-table tbody tr:nth-child(2n) td:nth-child(5){background-color:#eff6ff}.task-table tbody tr:nth-child(2n) td:nth-child(6){background-color:#f0fdf4}.task-table tbody tr:nth-child(2n) td:nth-child(7){background-color:#fefce8}.task-table tbody tr:nth-child(2n) td:first-child{background-color:transparent}.score-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:20px}.score-item{background:var(--white);border-radius:var(--radius-lg);padding:20px;text-align:center;box-shadow:var(--shadow-sm)}.score-item-label{font-size:14px;color:var(--gray-dark);margin-bottom:8px}.score-item-value{font-size:32px;font-weight:700}.score-item-value.purple{color:var(--purple-primary)}.score-item-value.green{color:var(--green-primary)}.score-item-value.red{color:var(--red-primary)}.formula-display{background:var(--purple-bg);border-radius:var(--radius-md);padding:16px 24px;margin-bottom:20px;text-align:center}.formula-display span{font-size:20px;font-weight:700;color:var(--purple-primary);letter-spacing:2px}.validation-row{display:flex;align-items:center;gap:16px;margin-bottom:20px;padding:16px;background:var(--white);border-radius:var(--radius-md);box-shadow:var(--shadow-sm)}.validation-row label{font-weight:600;white-space:nowrap}.validation-row input{width:100px;padding:10px;border:2px solid var(--gray-medium);border-radius:var(--radius-sm);font-size:16px;text-align:center}.validation-row input:focus{outline:none;border-color:var(--purple-primary)}.validation-message{font-weight:700;font-size:16px}.validation-message.success{color:var(--green-primary)}.validation-message.error{color:var(--red-primary)}.input-row{display:flex;gap:20px;margin-bottom:20px}.input-group{flex:1;display:flex;flex-direction:column;gap:8px}.input-group label{font-weight:600;font-size:14px;color:#555}.input-group input{padding:12px 16px;border:2px solid var(--gray-medium);border-radius:var(--radius-md);font-size:16px;transition:border-color .2s}.input-group input:focus{outline:none;border-color:var(--purple-primary)}.actions-row{display:flex;justify-content:center;gap:16px;margin-top:20px}.page-header{display:flex;align-items:center;gap:16px;margin-bottom:24px}.page-title{font-size:28px;font-weight:700;color:#333}.loading{display:flex;justify-content:center;align-items:center;min-height:200px;font-size:18px;color:var(--gray-dark)}.loading:after{content:"";display:inline-block;width:20px;height:20px;margin-left:12px;border:3px solid var(--purple-light);border-top-color:var(--purple-primary);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.empty-state{text-align:center;padding:40px;color:var(--gray-dark)}.empty-state-icon{font-size:48px;margin-bottom:16px}.empty-state-text{font-size:16px}@media (max-width: 768px){#root{padding:12px}.card{padding:16px;border-radius:var(--radius-md)}.card-title{font-size:22px}.grid-7{gap:6px}.day-box{padding:10px 4px;min-height:60px}.day-number{font-size:16px}.day-score{font-size:11px}.cards-grid{grid-template-columns:1fr;gap:16px}.score-summary{grid-template-columns:repeat(2,1fr);gap:12px}.score-item{padding:12px}.score-item-value{font-size:24px}.task-table{font-size:12px}.task-table th,.task-table td{padding:8px 6px;min-width:45px;max-width:90px;font-size:12px}.detail-title{font-size:22px}.user-panel{position:static;margin-bottom:16px;justify-content:center}}@media (max-width: 480px){.score-summary{grid-template-columns:1fr}.validation-row{flex-direction:column;align-items:flex-start}.input-row{flex-direction:column}.calendar-title{font-size:18px}.btn-today{padding:4px 8px!important;font-size:12px!important}.calendar-header,.calendar-buttons-right{gap:5px}.task-table th,.task-table td{padding:6px 4px;min-width:40px;max-width:70px;font-size:12px}}@media (max-width: 768px){body{padding:10px}.container{padding:0;max-width:100%}#detailView .flex-between{flex-wrap:wrap;gap:15px}#detailView .flex-between>div{flex:1 1 45%}#detailView .btn-green{width:100%;margin-top:15px}}@media (max-width: 480px){.card{padding:15px}.day-box{padding:10px 0}.day-box>div:first-child{font-size:16px!important}.day-score{font-size:10px}}body{overscroll-behavior-y:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}.btn,.card,td,th,.day-box{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}input,textarea{-webkit-user-select:auto;user-select:auto;-webkit-touch-callout:default}.task-table td{position:relative;z-index:1}.task-table td[data-score]:before{content:attr(data-score);position:absolute;bottom:4px;right:8px;top:auto;left:auto;transform:none;font-size:26px;font-weight:900;font-family:Comic Sans MS,Nunito,Arial Rounded MT Bold,sans-serif;color:#7b61ff26;z-index:0;pointer-events:none}.task-table td.selected[data-score]:before{color:#00c48c40}.task-table td:last-child .btn-red{background:transparent;color:#b0b8c4;box-shadow:none;padding:6px 12px;font-size:13px;font-weight:400}.task-table td:last-child .btn-red:hover,.task-table td:last-child .btn-red:active{color:var(--red-primary);background:var(--red-light);font-weight:700}.task-table td:nth-child(2)[data-score]:before{color:#a0aec026}.task-table td:nth-child(3)[data-score]:before,.task-table td:nth-child(4)[data-score]:before{color:#ffaa001f}.task-table td:nth-child(5)[data-score]:before,.task-table td:nth-child(6)[data-score]:before{color:#4299e11f}.task-table td:nth-child(7)[data-score]:before{color:#ffbf0040;text-shadow:0px 2px 8px rgba(255,191,0,.2)}.task-table td:nth-child(2){background-color:#f8fafc}.task-table td:nth-child(3){background-color:#fff1f2}.task-table td:nth-child(4){background-color:#fff7ed}.task-table td:nth-child(5){background-color:#eff6ff}.task-table td:nth-child(6){background-color:#f0fdf4}.task-table td:nth-child(7){background-color:#fefce8;box-shadow:0 4px 12px #facc1526}.task-table td:last-child{background-color:transparent!important;box-shadow:none}.login-container{display:flex;justify-content:center;align-items:center;min-height:85vh}.login-card{width:100%;max-width:400px;padding:40px 32px!important;border-radius:24px!important;box-shadow:0 12px 32px #7b61ff1a!important;background:var(--white)}.login-icon{font-size:56px;text-align:center;margin-bottom:8px;animation:floating 3s ease-in-out infinite}@keyframes floating{0%{transform:translateY(0)}50%{transform:translateY(-8px)}to{transform:translateY(0)}}.login-form{display:flex;flex-direction:column;gap:20px}.login-form .input-group label{display:block;margin-bottom:8px;font-weight:700;color:var(--purple-dark);font-size:14px}.login-form .input-group input{width:100%;padding:16px;border-radius:14px;border:2px solid transparent;background-color:#f8fafc;font-size:16px;color:#333;transition:all .3s ease;outline:none}.login-form .input-group input::placeholder{color:#a0aec0}.login-form .input-group input:focus{background-color:#fff;border-color:var(--purple-light);box-shadow:0 0 0 4px #7b61ff26}.btn-large{padding:16px!important;font-size:18px!important;border-radius:16px!important;letter-spacing:1px}.btn-text{background:transparent!important;color:#64748b!important;box-shadow:none!important;padding:10px!important;font-weight:400!important;font-size:15px!important}.btn-text:hover{background:#f1f5f9!important;color:var(--purple-dark)!important}