[v-cloak] { display: none !important; }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: #FFFFFF;
    color: #37352F;
    font-size: 14px;
    min-height: 100vh;
  }

  /* Header */
  #header {
    background: #F7F6F3;
    border-bottom: 1px solid #E9E9E7;
    padding: 0 20px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
  }
  #header .logo { font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
  #header .user-info { display: flex; align-items: center; gap: 12px; }
  .role-tag {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 6px;
    background: #E9E9E7;
    color: #9B9A97;
  }
  .role-tag.parent { background: #FFE6D6; color: #D4621C; }
  .role-tag.child { background: #D6E4FF; color: #2D7ED8; }
  #logoutBtn {
    background: none;
    border: 1px solid #E9E9E7;
    padding: 4px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
  }
  #logoutBtn:hover { background: #EBEBEA; }
  #changePwdBtn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    padding: 4px;
    border-radius: 6px;
    line-height: 1;
  }
  #changePwdBtn:hover { background: #EBEBEA; }

  /* Modal */
  .modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
  }
  .modal-card {
    background: #fff;
    border-radius: 12px;
    padding: 32px;
    width: 340px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
  }
  .modal-card h3 { margin: 0 0 20px; font-size: 18px; text-align: center; }
  .modal-card input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #E9E9E7;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 12px;
    box-sizing: border-box;
  }
  .modal-card input:focus { outline: none; border: 2px solid #2D7ED8; }
  .modal-actions { display: flex; gap: 10px; margin-top: 8px; }
  .modal-cancel {
    flex: 1;
    padding: 10px;
    border: 1px solid #E9E9E7;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    font-size: 14px;
  }
  .modal-cancel:hover { background: #F7F6F3; }
  .modal-submit {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 8px;
    background: #2D7ED8;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
  }
  .modal-submit:hover { background: #1a5db0; }

  /* Nav */
  #nav {
    background: #F7F6F3;
    border-bottom: 1px solid #E9E9E7;
    padding: 0 20px;
    display: flex;
    gap: 4px;
    height: 44px;
    align-items: center;
  }
  .nav-btn {
    background: none;
    border: none;
    padding: 6px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    color: #9B9A97;
    font-weight: 500;
  }
  .nav-btn.active { background: #E9E9E7; color: #37352F; font-weight: 600; }
  .nav-btn:hover:not(.active) { background: #EBEBEA; }

  /* Main */
  #main { max-width: 1200px; margin: 0 auto; padding: 20px; }

  /* Week Navigation */
  #weekNav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
  }
  #weekNav button {
    background: none;
    border: 1px solid #E9E9E7;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
  }
  #weekNav button:hover { background: #F7F6F3; border-color: #CBCBC8; }
  #weekRange { font-weight: 600; font-size: 14px; color: #37352F; }

  /* 7-Day Notion-style Table */
  #weekGrid {
    border: 1px solid #E9E9E7;
    border-radius: 12px;
    overflow: auto;
    background: #FFFFFF;
  }
  .habit-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
  }
  .habit-table th, .habit-table td {
    border-right: 1px solid #E9E9E7;
    border-bottom: 1px solid #E9E9E7;
    padding: 10px 12px;
    vertical-align: middle;
    text-align: left;
  }
  .habit-table th:last-child, .habit-table td:last-child { border-right: none; }
  .habit-table tr:last-child td { border-bottom: none; }

  /* Table header */
  .habit-table thead th {
    background: #F7F6F3;
    font-size: 12px;
    font-weight: 600;
    color: #9B9A97;
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 10;
  }
  .habit-table thead th.col-date { width: 100px; text-align: left; }
  .habit-table thead th.col-earn { width: 110px; }
  .habit-table thead th.col-progress { width: 200px; }
  .habit-table thead th.col-subject { }

  /* Date column */
  .col-date {
    font-size: 13px;
    font-weight: 500;
    color: #37352F;
    white-space: nowrap;
    background: #FFFFFF;
    position: sticky;
    left: 0;
    z-index: 5;
  }
  .habit-table thead .col-date { z-index: 15; background: #F7F6F3; }
  .col-date .date-day { font-size: 11px; color: #9B9A97; display: block; margin-top: 2px; }

  /* Subject column cells */
  .col-subject {
    min-height: 48px;
  }
  .col-subject .chips-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-height: 28px;
  }

  /* Task chips */
  .task-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    border: 1px solid transparent;
    user-select: none;
    font-family: inherit;
  }
  .task-chip:hover { filter: brightness(0.92); }
  .task-chip.readonly { cursor: default; opacity: 0.75; }
  .task-chip.readonly:hover { filter: none; }

  .chip-english { background: #DBEAFE; color: #2563EB; border-color: #BFDBFE; }
  .chip-math { background: #FEF3C7; color: #92400E; border-color: #FDE68A; }
  .chip-chinese { background: #D1FAE5; color: #065F46; border-color: #A7F3D0; }
  .chip-sports { background: #FFEDD5; color: #C2410C; border-color: #FED7AA; }

  .task-chip.readonly.chip-english { background: #EFF6FF; color: #93C5FD; border-color: #DBEAFE; }
  .task-chip.readonly.chip-math { background: #FFFBEB; color: #FCD34D; border-color: #FEF3C7; }
  .task-chip.readonly.chip-chinese { background: #ECFDF5; color: #6EE7B7; border-color: #D1FAE5; }
  .task-chip.readonly.chip-sports { background: #FFF7ED; color: #FDBA74; border-color: #FFEDD5; }

  /* Add chip (empty area trigger) */
  .chip-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 1px dashed #D4D4D4;
    color: #D4D4D4;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s;
    line-height: 1;
  }
  .chip-add:hover { border-color: #9B9A97; color: #9B9A97; background: #F7F6F3; }

  /* Multi-select dropdown */
  .multiselect-dropdown {
    position: fixed;
    z-index: 200;
    background: #FFFFFF;
    border: 1px solid #E9E9E7;
    border-radius: 12px;
    box-shadow: rgba(15, 15, 15, 0.16) 0px 16px 48px -8px;
    min-width: 160px;
    max-height: 200px;
    overflow-y: auto;
    padding: 4px;
  }
  .multiselect-option {
    padding: 6px 12px;
    font-size: 12px;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.1s;
    white-space: nowrap;
  }
  .multiselect-option:hover { background: #F7F6F3; }

  /* Summary columns */
  .col-earn {
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: #37352F;
  }
  .col-progress {
    text-align: center;
    font-size: 18px;
  }

  /* Today row */
  .habit-table tr.row-today td { background: #EFF6FF; }
  .habit-table tr.row-today .col-date { font-weight: 700; color: #2D7ED8; }
  .habit-table tr.row-today .col-earn, .habit-table tr.row-today .col-progress {
    background: #EFF6FF;
  }

  /* Footer Stats */
  #footerStats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: #FAFAF9;
    border: 1px solid #E9E9E7;
    border-radius: 12px;
    margin-top: 16px;
    font-size: 14px;
  }
  #footerStats .stat { color: #9B9A97; }
  #footerStats .stat strong { color: #37352F; }
  #footerStats .emoji { font-size: 20px; white-space: nowrap; }
  .progress-bar { font-family: monospace; font-size: 13px; letter-spacing: 1px; color: #37352F; background: none; padding: 0; }

  /* Weekly Summary View */
  #weeklyView {
  }
  #weekNav2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
  }
  #weekNav2 button {
    background: none;
    border: 1px solid #E9E9E7;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
  }
  #weekNav2 button:hover { background: #F7F6F3; border-color: #CBCBC8; }
  #weekRange2 { font-weight: 600; font-size: 14px; color: #37352F; }
  /* Weekly Hero Banner */
  .weekly-hero-card {
    background: #FAF9F6;
    border: 1px solid #E9E9E7;
    border-radius: 14px;
    padding: 20px 24px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  }
  .weekly-hero-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
  }
  .weekly-hero-left {
    display: flex;
    align-items: center;
    gap: 16px;
  }
  .weekly-hero-emoji {
    font-size: 50px;
    line-height: 1;
  }
  .weekly-hero-title {
    font-size: 13px;
    color: #9B9A97;
    margin-bottom: 2px;
  }
  .weekly-hero-rate {
    font-size: 32px;
    font-weight: 800;
    color: #37352F;
    line-height: 1.1;
  }
  .weekly-hero-stats {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
  }
  .weekly-hero-stat-card {
    background: #FFFFFF;
    border: 1px solid #E9E9E7;
    border-radius: 10px;
    padding: 10px 18px;
    min-width: 140px;
    text-align: center;
  }
  .weekly-hero-stat-card.highlight {
    background: #FFFBEB;
    border-color: #FDE68A;
  }
  .weekly-hero-stat-label {
    font-size: 11px;
    color: #9B9A97;
    margin-bottom: 2px;
  }
  .weekly-hero-stat-val {
    font-size: 18px;
    font-weight: 700;
    color: #37352F;
  }
  .weekly-hero-stat-val.reward {
    color: #D97706;
  }
  .weekly-hero-bar {
    margin-top: 14px;
    margin-bottom: 0;
  }

  /* Weekly Subject Cards Grid */
  .weekly-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
  .weekly-card {
    background: #FFFFFF;
    border: 1px solid #E9E9E7;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
  }
  .weekly-card-header {
    padding: 12px 14px;
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .weekly-card-header.english { background: #DBEAFE; color: #2563EB; }
  .weekly-card-header.math { background: #FEF3C7; color: #D97706; }
  .weekly-card-header.chinese { background: #D1FAE5; color: #059669; }
  .weekly-card-header.sports { background: #FFEDD5; color: #EA580C; }
  .weekly-card-header.total { background: #F7F6F3; color: #37352F; }
  .weekly-card-badge {
    font-size: 11px;
    padding: 2px 7px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.7);
    font-weight: 600;
  }
  .weekly-card-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  .weekly-stat-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 8px;
  }
  .weekly-stat {
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
  }
  .weekly-stat.english { color: #2563EB; }
  .weekly-stat.math { color: #D97706; }
  .weekly-stat.chinese { color: #059669; }
  .weekly-stat.sports { color: #EA580C; }
  .weekly-stat.total { color: #37352F; }
  .weekly-label { font-size: 12px; color: #9B9A97; margin-bottom: 16px; }
  .weekly-bar {
    height: 8px;
    background: #E9E9E7;
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;
  }
  .weekly-bar-fill {
    height: 100%;
    border-radius: 8px;
    transition: width 0.3s;
  }
  .weekly-bar-fill.english { background: #2563EB; }
  .weekly-bar-fill.math { background: #D97706; }
  .weekly-bar-fill.chinese { background: #059669; }
  .weekly-bar-fill.sports { background: #EA580C; }
  .weekly-bar-fill.total { background: #37352F; }
  .weekly-reward { font-size: 13px; color: #9B9A97; }
  .weekly-reward strong { color: #37352F; }
  .weekly-task-progress {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid #E9E9E7;
  }
  .weekly-empty-tasks {
    margin-top: auto;
    padding: 16px 0;
    text-align: center;
    font-size: 12px;
    color: #9B9A97;
  }
  .weekly-task-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    line-height: 1;
  }
  .weekly-task-row:last-child { margin-bottom: 0; }
  .weekly-task-name {
    flex-shrink: 0;
    width: 56px;
    font-size: 11px;
    color: #37352F;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .weekly-task-bar {
    flex: 1;
    height: 5px;
    background: #E9E9E7;
    border-radius: 3px;
    overflow: hidden;
    min-width: 30px;
  }
  .weekly-task-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
  }
  .weekly-task-bar-fill.english { background: #2563EB; }
  .weekly-task-bar-fill.math { background: #D97706; }
  .weekly-task-bar-fill.chinese { background: #059669; }
  .weekly-task-bar-fill.sports { background: #EA580C; }
  .weekly-task-bar-fill.qualified { background: #1aae39; }
  .weekly-task-count {
    flex-shrink: 0;
    width: 28px;
    font-size: 10px;
    font-weight: 600;
    color: #9B9A97;
    text-align: right;
  }
  .weekly-task-row.qualified .weekly-task-count { color: #1aae39; }
  .weekly-task-check {
    flex-shrink: 0;
    font-size: 10px;
  }
  /* Task Management View */
  #taskMgmtView { }
  .task-mgmt-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }
  .add-task-btn {
    background: #2D7ED8;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
  }
  .add-task-btn:hover { background: #1A6BC4; }
  .task-mgmt-list { border: 1px solid #E9E9E7; border-radius: 12px; overflow: hidden; }
  .task-mgmt-row {
    display: grid;
    grid-template-columns: 1fr 80px 80px 80px 100px;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #E9E9E7;
    gap: 12px;
  }
  .task-mgmt-row:last-child { border-bottom: none; }
  .task-mgmt-row.header { background: #F7F6F3; font-weight: 600; font-size: 12px; color: #9B9A97; }
  .task-mgmt-row input, .task-mgmt-row select {
    border: 1px solid #c8c4be;
    border-radius: 8px;
    padding: 6px 8px;
    font-size: 13px;
    width: 100%;
    font-family: inherit;
  }
  .task-mgmt-row input:focus, .task-mgmt-row select:focus { outline: none; border: 2px solid #2D7ED8; }
  .save-btn {
    background: #2D7ED8;
    color: white;
    border: none;
    padding: 6px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px;
  }
  .save-btn:hover { background: #1A6BC4; }
  .del-btn {
    background: none;
    border: 1px solid #E9E9E7;
    color: #9B9A97;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px;
  }
  .del-btn:hover { background: #FEE; border-color: #E99; color: #e03131; }

  /* Login Page */
  #loginPage {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F7F6F3;
  }
  .login-card {
    background: white;
    border: 1px solid #E9E9E7;
    border-radius: 12px;
    padding: 40px;
    width: 380px;
    box-shadow: rgba(15, 15, 15, 0.08) 0px 4px 12px 0px;
    text-align: center;
  }
  .login-logo { font-size: 48px; margin-bottom: 16px; }
  .login-title { font-size: 20px; font-weight: 600; margin-bottom: 8px; }
  .login-subtitle { font-size: 13px; color: #9B9A97; margin-bottom: 28px; }
  .login-form { display: flex; flex-direction: column; gap: 12px; }
  .login-form input {
    border: 1px solid #c8c4be;
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 14px;
    width: 100%;
    font-family: inherit;
  }
  .login-form input:focus { outline: none; border: 2px solid #2D7ED8; }
  .login-form button {
    background: #2D7ED8;
    color: white;
    border: none;
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    margin-top: 8px;
  }
  .login-form button:hover { background: #1A6BC4; }

  /* Toast */
  #toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(80px);
    background: #37352F;
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 13px;
    transition: transform 0.25s;
    z-index: 999;
    box-shadow: rgba(15, 15, 15, 0.16) 0px 16px 48px -8px;
  }
  #toast.show { transform: translateX(-50%) translateY(0); }

  /* Loading */
  .loading {
    text-align: center;
    padding: 60px;
    color: #9B9A97;
    font-size: 14px;
  }

  /* Trend View */
  #trendView { }
  .trend-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }
  .trend-header h3 { font-size: 16px; font-weight: 600; }
  .trend-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #787671;
  }
  .trend-controls select {
    border: 1px solid #c8c4be;
    border-radius: 8px;
    padding: 4px 8px;
    font-size: 13px;
    font-family: inherit;
  }
  .trend-table {
    width: 100%;
    border: 1px solid #E9E9E7;
    border-radius: 12px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    font-size: 13px;
  }
  .trend-table th {
    background: #F7F6F3;
    padding: 10px 12px;
    font-weight: 600;
    font-size: 12px;
    color: #787671;
    text-align: center;
    border-bottom: 1px solid #E9E9E7;
  }
  .trend-table th:first-child { text-align: left; }
  .trend-table td {
    padding: 10px 12px;
    text-align: center;
    border-bottom: 1px solid #E9E9E7;
  }
  .trend-table td:first-child {
    text-align: left;
    font-weight: 500;
    color: #37352F;
    white-space: nowrap;
  }
  .trend-table tr:last-child td { border-bottom: none; }
  .trend-table tr:hover td { background: #FAFAF9; }
  .trend-bar {
    display: inline-block;
    height: 6px;
    border-radius: 3px;
    min-width: 4px;
    vertical-align: middle;
    margin-right: 6px;
  }
  .trend-reward { font-weight: 600; color: #37352F; }
  .trend-best { background: #D9F3E1; }
  .trend-worst { background: #FDE0EC; }
  .fulfill-check {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #1aae39;
  }
  .fulfill-check:disabled { cursor: not-allowed; opacity: 0.5; }

  /* Ambition View */
  #ambitionView { }
  .ambition-hero {
    text-align: center;
    padding: 40px 20px 32px;
    background: linear-gradient(135deg, #DBEAFE 0%, #D1FAE5 100%);
    border-radius: 12px;
    margin-bottom: 24px;
  }
  .ambition-hero-img { width: 80px; height: 80px; margin-bottom: 12px; object-fit: contain; }
  .ambition-hero h1 { font-size: 28px; font-weight: 700; color: #37352F; margin-bottom: 8px; }
  .ambition-subtitle { font-size: 15px; color: #787671; }
  .ambition-summary {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
  }
  .ambition-stat-card {
    flex: 1;
    min-width: 140px;
    background: #FFFFFF;
    border: 1px solid #E9E9E7;
    border-radius: 12px;
    padding: 16px;
    text-align: center;
  }
  .ambition-stat-value {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 4px;
  }
  .ambition-stat-label {
    font-size: 12px;
    color: #787671;
  }
  .ambition-subject {
    margin-bottom: 24px;
  }
  .ambition-subject-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid #E9E9E7;
  }
  .ambition-subject-emoji { font-size: 24px; }
  .ambition-subject-name {
    font-size: 18px;
    font-weight: 600;
    color: #37352F;
  }
  .ambition-subject-count {
    font-size: 12px;
    color: #787671;
    margin-left: auto;
  }
  .ambition-tasks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
  }
  .ambition-task-card {
    background: #FFFFFF;
    border: 1px solid #E9E9E7;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: box-shadow 0.15s;
  }
  .ambition-task-card:hover {
    box-shadow: rgba(15, 15, 15, 0.08) 0px 4px 12px 0px;
  }
  .ambition-task-name {
    font-size: 15px;
    font-weight: 600;
    color: #37352F;
  }
  .ambition-task-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
  }
  .ambition-task-reward {
    color: #2D7ED8;
    font-weight: 600;
  }
  .ambition-task-min {
    color: #787671;
  }
  .ambition-task-bar {
    height: 4px;
    background: #E9E9E7;
    border-radius: 2px;
    overflow: hidden;
  }
  .ambition-task-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s;
  }
  .ambition-task-bar-fill.english { background: #2563EB; }
  .ambition-task-bar-fill.math { background: #D97706; }
  .ambition-task-bar-fill.chinese { background: #059669; }
  .ambition-task-bar-fill.sports { background: #EA580C; }
  .ambition-task-note {
    font-size: 11px;
    color: #A4A097;
    line-height: 1.4;
  }
  .ambition-rules {
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    border-radius: 12px;
    padding: 20px 24px;
    margin-top: 8px;
  }
  .ambition-rules h3 {
    font-size: 16px;
    font-weight: 600;
    color: #92400E;
    margin-bottom: 12px;
  }
  .ambition-rules p {
    font-size: 13px;
    color: #92400E;
    line-height: 1.8;
    margin-bottom: 8px;
  }
  .ambition-rules strong { color: #B45309; }
  .ambition-rules .rule-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 13px;
    color: #92400E;
  }
  .ambition-rules .rule-icon {
    flex-shrink: 0;
    font-size: 16px;
  }
  .ambition-rules .rule-example {
    margin: 8px 0 0 24px;
    padding: 8px 12px;
    background: #FFFFFF;
    border-radius: 8px;
    font-size: 12px;
    color: #78350F;
  }
  .ambition-rules .rule-example span.pass { color: #1aae39; font-weight: 600; }
  .ambition-rules .rule-example span.fail { color: #e03131; font-weight: 600; }

  /* Responsive */
  @media (max-width: 900px) {
    .habit-table { table-layout: auto; }
    .habit-table th, .habit-table td { padding: 8px 8px; font-size: 12px; }
    .col-date { width: auto; }
    .col-earn, .col-progress { width: auto; }
    .task-chip { padding: 2px 6px; font-size: 11px; }
    .weekly-grid { grid-template-columns: 1fr 1fr; }
    .task-mgmt-row { grid-template-columns: 1fr 60px 60px 60px 80px; }
  }
  @media (max-width: 600px) {
    .habit-table { font-size: 11px; }
    .task-chip { padding: 2px 5px; font-size: 10px; }
    .col-earn { width: 60px; }
    .col-progress { width: auto; min-width: 100px; }
    .weekly-grid { grid-template-columns: 1fr; }
  }