.mirai-level-card {
    background: var(--gt-card-bg, #fff);
    border: 1px solid var(--gt-border-color, #eaeaea);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.mirai-level-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.mirai-level-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 600;
}

.mirai-level-exp {
    font-size: 0.8125rem;
    color: var(--gt-text-secondary, #666);
}

.mirai-level-progress {
    height: 6px;
    background: var(--gt-bg-secondary, #f0f0f0);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.mirai-level-progress-bar {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.mirai-level-next {
    font-size: 0.75rem;
    color: var(--gt-text-secondary, #666);
}

.mirai-level-page-card {
    background: var(--gt-card-bg, #fff);
    border: 1px solid var(--gt-border-color, #eaeaea);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.mirai-level-page-card .mirai-level-badge {
    font-size: 1rem;
    padding: 0.35rem 0.8rem;
}

.mirai-level-page-card .mirai-level-exp {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gt-text-primary, #333);
}

.mirai-level-tasks {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.mirai-level-task {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1rem;
    background: var(--gt-card-bg, #fff);
    border: 1px solid var(--gt-border-color, #eaeaea);
    border-radius: 8px;
}

.mirai-level-task.finished {
    opacity: 0.7;
    background: var(--gt-bg-secondary, #f8f8f8);
}

.mirai-level-task-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.mirai-level-task-name {
    font-weight: 500;
}

.mirai-level-task-reward {
    font-size: 0.75rem;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    background: #fff7e6;
    color: #fa8c16;
}

.mirai-level-task-progress {
    font-size: 0.8125rem;
    color: var(--gt-text-secondary, #666);
}

.level-overview {
    margin-bottom: 1.5rem;
}

.level-overview .section-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.level-overview-card {
    background: var(--gt-card-bg, #fff);
    border: 1px solid var(--gt-border-color, #eaeaea);
    border-radius: 12px;
    padding: 1.25rem;
}

.level-overview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.level-overview-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.level-overview-exp {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gt-text-primary, #333);
}

.level-overview-next {
    font-size: 0.75rem;
    color: var(--gt-text-secondary, #666);
    margin-bottom: 0.75rem;
}

.level-overview-tasks {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--gt-border-color, #eaeaea);
}

.level-overview-task {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8125rem;
    padding: 0.5rem 0;
}

.level-overview-task.finished {
    opacity: 0.6;
}

.level-overview-task.finished .level-overview-task-name {
    text-decoration: line-through;
}

.level-overview-task-meta {
    color: var(--gt-text-secondary, #666);
    font-size: 0.75rem;
}

.level-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    background: var(--gt-card-bg, #fff);
    border: 1px solid var(--gt-border-color, #eaeaea);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    animation: levelToastIn 0.4s ease;
    max-width: 320px;
}

.level-toast.hide {
    animation: levelToastOut 0.3s ease forwards;
}

.level-toast-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.level-toast-content {
    flex: 1;
}

.level-toast-title {
    font-weight: 600;
    font-size: 0.9375rem;
    margin-bottom: 0.15rem;
}

.level-toast-desc {
    font-size: 0.8125rem;
    color: var(--gt-text-secondary, #666);
}

@keyframes levelToastIn {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes levelToastOut {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(30px); }
}