.ttr-wrap {
    --ttr-primary: #E8601C;
    --ttr-primary-dark: #C94F13;
    --ttr-ink: #1F2430;
    --ttr-muted: #6B7280;
    --ttr-bg: #FAF9F7;
    --ttr-border: #ECE7E1;
    --ttr-green: #1F9D55;
    --ttr-amber: #B7791F;
    --ttr-red: #C0392B;
    max-width: 980px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--ttr-ink);
    line-height: 1.5;
}

.ttr-wrap * { box-sizing: border-box; }

.ttr-login-notice { text-align: center; padding: 40px; }

/* HERO */
.ttr-hero {
    background: linear-gradient(135deg, var(--ttr-primary) 0%, var(--ttr-primary-dark) 100%);
    color: #fff;
    border-radius: 18px;
    padding: 28px 32px;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    box-shadow: 0 10px 30px rgba(232,96,28,0.25);
}
.ttr-hero-eyebrow { margin: 0 0 4px; opacity: 0.85; font-size: 13px; letter-spacing: 0.3px; }
.ttr-hero h2 { margin: 0 0 6px; font-size: 24px; }
.ttr-hero-sub { margin: 0; font-size: 14px; opacity: 0.9; max-width: 380px; }
.ttr-hero-linkbox { display: flex; flex-direction: column; gap: 8px; min-width: 300px; }
.ttr-hero-linkbox input {
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.35);
    color: #fff;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 13px;
    width: 100%;
}
.ttr-ref-code { font-size: 12px; opacity: 0.9; }

/* BUTTONS */
.ttr-btn {
    background: var(--ttr-primary);
    color: #fff;
    border: none;
    padding: 10px 18px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: transform 0.1s ease, background 0.2s ease;
}
.ttr-btn:hover { background: var(--ttr-primary-dark); transform: translateY(-1px); }
.ttr-btn-outline { background: #fff; color: var(--ttr-primary); border: 1.5px solid var(--ttr-primary); }
.ttr-btn-outline:hover { background: #FFF3EC; }
.ttr-copy-btn { background: #fff; color: var(--ttr-primary-dark); }
.ttr-copy-btn:hover { background: #FFF3EC; }
.ttr-btn-submit { width: 100%; padding: 13px; font-size: 15px; margin-top: 6px; }

/* CARD */
.ttr-card {
    background: #fff;
    border: 1px solid var(--ttr-border);
    border-radius: 16px;
    padding: 22px 24px;
    margin-bottom: 20px;
}
.ttr-card-title { margin: 0 0 16px; font-size: 17px; }
.ttr-form-note { margin: -8px 0 16px; font-size: 13px; color: var(--ttr-muted); }

/* MILESTONE */
.ttr-milestone-top { display: flex; justify-content: space-between; font-size: 13.5px; margin-bottom: 10px; flex-wrap: wrap; gap: 6px; }
.ttr-milestone-count { font-weight: 700; color: var(--ttr-primary); }
.ttr-progress-track { background: #F1EEE9; height: 10px; border-radius: 6px; overflow: hidden; }
.ttr-progress-fill { background: linear-gradient(90deg, #F2A24A, var(--ttr-primary)); height: 100%; border-radius: 6px; transition: width 0.4s ease; }

/* LIFETIME / ALL-TIME SUMMARY */
.ttr-lifetime-card { background: #FFFDF9; }
.ttr-lifetime-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}
.ttr-lifetime-stat {
    background: #fff;
    border: 1px solid var(--ttr-border);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ttr-lifetime-highlight { border-color: #F3D2BC; background: #FFF8F3; }
.ttr-lifetime-highlight .ttr-stat-value { color: var(--ttr-primary-dark); }
.ttr-status-breakdown { display: flex; flex-wrap: wrap; gap: 10px; }
.ttr-status-chip {
    font-size: 12.5px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #F1EEE9;
    color: var(--ttr-ink);
}
.ttr-status-chip.ttr-badge-approved { background: #E7F6EC; color: var(--ttr-green); }
.ttr-status-chip.ttr-badge-pending { background: #FDF3E4; color: var(--ttr-amber); }
.ttr-status-chip.ttr-badge-rejected { background: #FBEAE8; color: var(--ttr-red); }

/* LEADERBOARD */
.ttr-leaderboard-table tr.ttr-leaderboard-me { background: #FFF8F3; font-weight: 600; }

/* FILTER BAR */
.ttr-filter-bar { display: flex; align-items: end; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.ttr-filter-bar label { font-size: 12px; color: var(--ttr-muted); display: flex; flex-direction: column; gap: 4px; }
.ttr-filter-bar select { padding: 8px 10px; border-radius: 8px; border: 1px solid var(--ttr-border); }

/* STAT GRID */
.ttr-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}
.ttr-stat {
    background: #fff;
    border: 1px solid var(--ttr-border);
    border-radius: 14px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ttr-stat-icon { font-size: 20px; }
.ttr-stat-label { font-size: 12px; color: var(--ttr-muted); text-transform: uppercase; letter-spacing: 0.4px; }
.ttr-stat-value { font-size: 20px; font-weight: 700; }
.ttr-stat-accent { border-color: #F3D2BC; background: #FFF8F3; }
.ttr-stat-accent .ttr-stat-value { color: var(--ttr-primary-dark); }
.ttr-stat-green .ttr-stat-value { color: var(--ttr-green); }
.ttr-stat-amber .ttr-stat-value { color: var(--ttr-amber); }

/* FORM */
.ttr-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 18px;
}
.ttr-field { display: flex; flex-direction: column; gap: 6px; }
.ttr-field label { font-size: 12.5px; font-weight: 600; color: var(--ttr-muted); }
.ttr-field input, .ttr-field select, .ttr-field textarea {
    padding: 10px 12px;
    border: 1px solid var(--ttr-border);
    border-radius: 10px;
    font-size: 14px;
    background: var(--ttr-bg);
}
.ttr-field input:focus, .ttr-field select:focus, .ttr-field textarea:focus {
    outline: none; border-color: var(--ttr-primary); background: #fff;
}
.ttr-form-msg { display: block; margin-top: 10px; font-size: 13.5px; }
.ttr-form-msg.success { color: var(--ttr-green); }
.ttr-form-msg.error { color: var(--ttr-red); }

/* TABLE */
.ttr-table-scroll { overflow-x: auto; }
.ttr-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ttr-table th {
    text-align: left; padding: 10px 12px; color: var(--ttr-muted);
    font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.4px;
    border-bottom: 1px solid var(--ttr-border);
}
.ttr-table td { padding: 12px; border-bottom: 1px solid var(--ttr-border); }
.ttr-table tr:last-child td { border-bottom: none; }
.ttr-empty { text-align: center; color: var(--ttr-muted); padding: 24px !important; }

.ttr-badge {
    display: inline-block; padding: 4px 10px; border-radius: 999px;
    font-size: 11.5px; font-weight: 600;
}
.ttr-badge-pending, .ttr-badge-unpaid { background: #FDF3E4; color: var(--ttr-amber); }
.ttr-badge-approved, .ttr-badge-paid { background: #E7F6EC; color: var(--ttr-green); }
.ttr-badge-rejected { background: #FBEAE8; color: var(--ttr-red); }

/* RESOURCES */
.ttr-resources { margin-top: 6px; }
.ttr-resources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
}
.ttr-resource {
    background: #FFF3EC;
    border: 1px solid #F3D2BC;
    border-radius: 14px;
    padding: 16px;
    text-decoration: none;
    color: var(--ttr-ink);
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ttr-resource:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(232,96,28,0.15); }
.ttr-resource-emoji { font-size: 22px; }
.ttr-resource-label { font-weight: 700; font-size: 14px; color: var(--ttr-primary-dark); }
.ttr-resource-note { font-size: 12px; color: var(--ttr-muted); }

/* RESPONSIVE */
@media (max-width: 640px) {
    .ttr-form-grid { grid-template-columns: 1fr; }
    .ttr-hero { flex-direction: column; align-items: flex-start; }
    .ttr-hero-linkbox { width: 100%; min-width: 0; }
}