:root{
    --dome-bg:#060606;
    --dome-surface:#0f1115;
    --dome-surface-2:#141821;
    --dome-surface-3:#1b2130;
    --dome-border:#232938;
    --dome-border-soft:#1a1f2c;
    --dome-text:#f5f7fb;
    --dome-text-soft:#aab3c5;
    --dome-text-dim:#7f889a;
    --dome-accent:#e3b324;
    --dome-accent-2:#ffd45b;
    --dome-danger:#ff5d5d;
    --dome-success:#3ddc97;
    --dome-blue:#55a8ff;
    --dome-shadow:0 18px 45px rgba(0,0,0,.45);
    --dome-radius:18px;
    --dome-radius-sm:12px;
}

/* Hard reset inside plugin so theme styles stop wrecking the UI */
#dome-app,
#dome-app *{
    box-sizing:border-box;
}

#dome-app{
    max-width:1240px;
    margin:30px auto;
    padding:28px;
    background:
        radial-gradient(circle at top right, rgba(227,179,36,.10), transparent 28%),
        radial-gradient(circle at top left, rgba(85,168,255,.08), transparent 22%),
        linear-gradient(180deg, #07080b 0%, #050608 100%);
    color:var(--dome-text) !important;
    border:1px solid #171b24;
    border-radius:24px;
    box-shadow:var(--dome-shadow);
    font-family:Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    position:relative;
    overflow:hidden;
}

/* top glow line */
#dome-app::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(227,179,36,.65), transparent);
    pointer-events:none;
}

#dome-app .dome-header{
    margin-bottom:24px;
}

#dome-app .dome-header-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
    flex-wrap:wrap;
    margin-bottom:18px;
}

#dome-app h1{
    margin:0 0 8px 0 !important;
    font-size:50px !important;
    line-height:1 !important;
    letter-spacing:1px;
    font-weight:900 !important;
    color:#ffffff !important;
    text-transform:uppercase;
    text-shadow:0 0 18px rgba(227,179,36,.12);
}

#dome-date{
    color:var(--dome-text-soft) !important;
    font-size:15px;
    font-weight:500;
}

#dome-app .dome-score-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(170px,1fr));
    gap:14px;
    min-width:680px;
}

#dome-app .score-card{
    background:linear-gradient(180deg, rgba(19,22,30,.92), rgba(12,14,20,.96)) !important;
    border:1px solid var(--dome-border) !important;
    border-radius:18px;
    padding:16px 16px 14px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
    position:relative;
    overflow:hidden;
}

#dome-app .score-card::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(135deg, rgba(227,179,36,.06), transparent 35%);
    pointer-events:none;
}

#dome-app .score-label{
    color:var(--dome-text-soft) !important;
    font-size:13px;
    margin-bottom:8px;
    font-weight:600;
}

#dome-app .score-value{
    color:#fff !important;
    font-size:18px;
    font-weight:900;
    line-height:1.2;
}

#dome-app .score-value span{
    font-size:44px;
    letter-spacing:-1px;
    color:#fff !important;
}

#dome-app .morning-charge{
    background:linear-gradient(180deg, rgba(14,17,23,.96), rgba(10,12,17,.98)) !important;
    border:1px solid var(--dome-border) !important;
    border-radius:20px;
    padding:18px 20px;
}

#dome-app .section-title-inline{
    color:#ffffff !important;
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:1.4px;
    font-weight:800;
    margin-bottom:12px;
}

#dome-app .morning-line{
    margin-bottom:10px;
    color:var(--dome-text) !important;
    line-height:1.55;
    font-size:16px;
}

#dome-app .teacher-name{
    font-weight:800;
    color:var(--dome-accent) !important;
}

/* Tabs */
#dome-app .dome-tabs{
    display:flex;
    gap:10px;
    margin:24px 0 22px;
    flex-wrap:wrap;
}

#dome-app .dome-tabs button{
    appearance:none;
    border:1px solid var(--dome-border) !important;
    background:linear-gradient(180deg, #131722, #0d1119) !important;
    color:#f3f6fb !important;
    padding:11px 16px !important;
    border-radius:999px !important;
    cursor:pointer;
    font-size:13px !important;
    font-weight:700 !important;
    line-height:1;
    min-width:110px;
    box-shadow:0 6px 16px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.03);
    transition:all .18s ease;
}

#dome-app .dome-tabs button:hover{
    transform:translateY(-1px);
    border-color:#39435b !important;
    background:linear-gradient(180deg, #181e2b, #101522) !important;
}

#dome-app .dome-tabs button.is-active{
    background:linear-gradient(180deg, var(--dome-accent-2), var(--dome-accent)) !important;
    color:#111 !important;
    border-color:#f4cf63 !important;
    box-shadow:0 8px 20px rgba(227,179,36,.32);
}

/* Layout */
#dome-app .tab.hidden{
    display:none !important;
}

#dome-app .grid-2{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}

#dome-app .grid-3{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:18px;
}

#dome-app .panel{
    background:linear-gradient(180deg, rgba(17,20,27,.98), rgba(12,14,20,.98)) !important;
    border:1px solid var(--dome-border) !important;
    border-radius:20px;
    padding:22px;
    color:var(--dome-text) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}

#dome-app .panel h2{
    margin:0 0 16px 0 !important;
    font-size:20px !important;
    line-height:1.2;
    font-weight:900 !important;
    color:#fff !important;
    letter-spacing:-.2px;
}

#dome-app .panel h3{
    margin:0 0 12px 0 !important;
    font-size:16px !important;
    font-weight:800 !important;
    color:#fff !important;
}

#dome-app .big-message,
#dome-app .summaryLine,
#dome-app .wisdom-text,
#dome-app .prompt-card,
#dome-app .muted,
#dome-app p,
#dome-app span,
#dome-app div{
    color:inherit;
}

/* Habit rows */
#dome-app .habitRow,
#dome-app .habitSettingRow,
#dome-app .favoriteRow,
#dome-app .breakRow{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    padding:14px 0;
    border-bottom:1px solid rgba(255,255,255,.06);
}

#dome-app .habitLabel{
    display:flex;
    align-items:center;
    gap:14px;
    color:#fff !important;
    font-weight:700;
    font-size:17px;
}

/* Better checkbox */
#dome-app .habitCheck{
    appearance:none;
    width:22px;
    height:22px;
    border-radius:7px;
    border:2px solid #46506b;
    background:#0c1018;
    position:relative;
    cursor:pointer;
    flex:0 0 auto;
}

#dome-app .habitCheck:checked{
    border-color:var(--dome-accent);
    background:linear-gradient(180deg, var(--dome-accent-2), var(--dome-accent));
    box-shadow:0 0 0 3px rgba(227,179,36,.12);
}

#dome-app .habitCheck:checked::after{
    content:"✓";
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#111;
    font-weight:900;
    font-size:14px;
}

/* Buttons */
#dome-app button{
    appearance:none;
    border:none;
    border-radius:12px !important;
    background:linear-gradient(180deg, #21283a, #151a25) !important;
    color:#fff !important;
    padding:11px 15px !important;
    font-weight:800 !important;
    font-size:13px !important;
    cursor:pointer;
    transition:all .18s ease;
    box-shadow:0 8px 20px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.03);
}

#dome-app button:hover{
    transform:translateY(-1px);
    filter:brightness(1.06);
}

#dome-app .mini-btn{
    padding:8px 12px !important;
    font-size:12px !important;
    border-radius:10px !important;
}

#dome-app #saveMorning,
#dome-app #saveJournal,
#dome-app #logUrge,
#dome-app #logSlip,
#dome-app #addHabit,
#dome-app #saveCouncilSettings,
#dome-app #saveIdentityStatement{
    background:linear-gradient(180deg, var(--dome-accent-2), var(--dome-accent)) !important;
    color:#111 !important;
    box-shadow:0 10px 24px rgba(227,179,36,.26);
}

#dome-app .danger-soft{
    background:linear-gradient(180deg, #662d2d, #4d2121) !important;
    color:#fff !important;
    border:1px solid #7f3333 !important;
}

/* Progress bar */
#dome-app .progressBar{
    height:16px;
    margin-top:18px;
    border-radius:999px;
    background:linear-gradient(180deg, #0b0d12, #151923);
    border:1px solid var(--dome-border);
    overflow:hidden;
    position:relative;
}

#dome-app .progressBar::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg, rgba(255,255,255,.03), transparent 35%, rgba(255,255,255,.02));
    pointer-events:none;
}

#dome-app #progressFill{
    height:100%;
    width:0%;
    border-radius:999px;
    background:
        linear-gradient(90deg, #8d6c10 0%, var(--dome-accent) 35%, var(--dome-accent-2) 100%);
    box-shadow:0 0 18px rgba(227,179,36,.35);
    position:relative;
    transition:width .35s ease;
}

#dome-app #progressFill::after{
    content:"";
    position:absolute;
    inset:0;
    background:repeating-linear-gradient(
        45deg,
        rgba(255,255,255,.10) 0,
        rgba(255,255,255,.10) 10px,
        rgba(255,255,255,0) 10px,
        rgba(255,255,255,0) 20px
    );
    opacity:.35;
}

/* Cards inside cards */
#dome-app .wisdom-card,
#dome-app .prompt-card{
    background:linear-gradient(180deg, #0b0f17, #090c13) !important;
    border:1px solid #232a3a !important;
    border-radius:16px;
    padding:16px;
    color:#fff !important;
}

#dome-app .wisdom-teacher{
    font-weight:900;
    margin-bottom:10px;
    color:var(--dome-accent) !important;
    font-size:16px;
}

#dome-app .wisdom-text{
    color:#fff !important;
    font-size:16px;
    line-height:1.65;
}

#dome-app .big-message{
    color:#f7f9fd !important;
    font-size:17px;
    line-height:1.65;
}

#dome-app .summaryLine{
    padding:10px 0;
    border-bottom:1px solid rgba(255,255,255,.06);
    color:var(--dome-text) !important;
    line-height:1.5;
}

#dome-app .muted{
    color:var(--dome-text-soft) !important;
}

/* Inputs */
#dome-app label{
    display:block;
    margin:12px 0 8px;
    color:var(--dome-text-soft) !important;
    font-size:14px;
    font-weight:700;
}

#dome-app input[type="text"],
#dome-app input[type="number"],
#dome-app textarea,
#dome-app select{
    width:100%;
    background:linear-gradient(180deg, #0c1018, #0a0d14) !important;
    color:#fff !important;
    border:1px solid #2a3143 !important;
    padding:14px 15px !important;
    border-radius:14px !important;
    outline:none;
    box-shadow:none;
}

#dome-app textarea{
    min-height:150px;
    resize:vertical;
    line-height:1.6;
}

#dome-app input:focus,
#dome-app textarea:focus,
#dome-app select:focus{
    border-color:rgba(227,179,36,.75) !important;
    box-shadow:0 0 0 4px rgba(227,179,36,.10) !important;
}

/* Range sliders */
#dome-app input[type="range"]{
    -webkit-appearance:none;
    appearance:none;
    width:100%;
    height:8px;
    border-radius:999px;
    background:linear-gradient(90deg, #273149, #131824) !important;
    border:none !important;
    padding:0 !important;
}

#dome-app input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance:none;
    appearance:none;
    width:20px;
    height:20px;
    border-radius:50%;
    background:linear-gradient(180deg, var(--dome-accent-2), var(--dome-accent));
    border:2px solid #111;
    box-shadow:0 0 0 4px rgba(227,179,36,.15);
    cursor:pointer;
}

#dome-app input[type="range"]::-moz-range-thumb{
    width:20px;
    height:20px;
    border-radius:50%;
    background:linear-gradient(180deg, var(--dome-accent-2), var(--dome-accent));
    border:2px solid #111;
    box-shadow:0 0 0 4px rgba(227,179,36,.15);
    cursor:pointer;
}

/* Stacks and spacing */
#dome-app .button-stack{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

#dome-app .toolBtn{
    background:linear-gradient(180deg, #1b2332, #121824) !important;
    border:1px solid #2b354b !important;
}

#dome-app .mini-divider{
    border-top:1px solid rgba(255,255,255,.07);
    margin:18px 0;
}

#dome-app .small-status{
    margin-top:10px;
    color:var(--dome-success) !important;
    font-size:13px;
    font-weight:700;
}

/* Quote library */
#dome-app .quoteLibraryBlock{
    border-bottom:1px solid rgba(255,255,255,.07);
    padding-bottom:16px;
    margin-bottom:16px;
}

#dome-app .quoteCategory{
    margin:12px 0 8px;
    color:var(--dome-text-soft) !important;
    text-transform:capitalize;
    font-weight:800;
}

#dome-app .quoteRow{
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:flex-start;
    padding:12px 0;
    border-bottom:1px solid rgba(255,255,255,.05);
    color:var(--dome-text) !important;
}

#dome-app .teacherToggle{
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px 0;
    border-bottom:1px solid rgba(255,255,255,.06);
    color:#fff !important;
    font-weight:700;
}

/* Canvas */
#dome-app canvas{
    width:100%;
    max-width:100%;
    background:linear-gradient(180deg, #0b0f17, #090c13) !important;
    border:1px solid #232a3a !important;
    border-radius:16px;
    padding:8px;
}

/* Modal */
#dome-app .dome-modal{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.78);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:9999;
    padding:20px;
}

#dome-app .dome-modal.hidden{
    display:none !important;
}

#dome-app .dome-modal-card{
    width:100%;
    max-width:560px;
    background:linear-gradient(180deg, #111521, #0b0f18) !important;
    border:1px solid #283047 !important;
    border-radius:22px;
    padding:24px;
    box-shadow:0 24px 60px rgba(0,0,0,.55);
}

#dome-app .dome-modal-title{
    font-size:22px;
    font-weight:900;
    margin-bottom:14px;
    color:var(--dome-accent) !important;
}

#dome-app .modal-actions{
    margin-top:18px;
    text-align:right;
}

/* Responsive */
@media (max-width: 980px){
    #dome-app .grid-2,
    #dome-app .grid-3{
        grid-template-columns:1fr;
    }

    #dome-app .dome-score-grid{
        grid-template-columns:1fr 1fr;
        min-width:unset;
        width:100%;
    }

    #dome-app .dome-header-top{
        flex-direction:column;
        align-items:stretch;
    }

    #dome-app h1{
        font-size:40px !important;
    }
}

@media (max-width: 640px){
    #dome-app{
        padding:18px;
        border-radius:18px;
    }

    #dome-app .dome-score-grid{
        grid-template-columns:1fr;
    }

    #dome-app .dome-tabs button{
        min-width:auto;
        flex:1 1 calc(50% - 10px);
    }

    #dome-app h1{
        font-size:32px !important;
    }
}

/* =========================
   TRAINING MODULE
   ========================= */

#dome-app .training-header-card{
    background:linear-gradient(180deg, rgba(17,20,27,.98), rgba(12,14,20,.98)) !important;
    border:1px solid var(--dome-border) !important;
    border-radius:20px;
    padding:22px;
    margin-bottom:18px;
}

#dome-app .training-header-card h2{
    margin:0 0 8px 0 !important;
    color:#fff !important;
    font-size:28px !important;
    font-weight:900 !important;
}

#dome-app .training-subtabs{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:18px;
}

#dome-app .training-subtabs button{
    appearance:none;
    border:1px solid var(--dome-border) !important;
    background:linear-gradient(180deg, #131722, #0d1119) !important;
    color:#f3f6fb !important;
    padding:11px 16px !important;
    border-radius:999px !important;
    cursor:pointer;
    font-size:13px !important;
    font-weight:700 !important;
    line-height:1;
    min-width:120px;
    transition:all .18s ease;
}

#dome-app .training-subtabs button.is-active{
    background:linear-gradient(180deg, var(--dome-accent-2), var(--dome-accent)) !important;
    color:#111 !important;
    border-color:#f4cf63 !important;
    box-shadow:0 8px 20px rgba(227,179,36,.32);
}

#dome-app .training-big-title{
    font-size:26px;
    font-weight:900;
    color:#fff;
}

#dome-app .training-subtitle{
    font-size:16px;
    color:var(--dome-text-soft);
    margin-top:6px;
}

#dome-app .training-card{
    background:linear-gradient(180deg, #121722, #0d1118);
    border:1px solid #283247;
    border-radius:16px;
    padding:16px;
    margin-bottom:12px;
}

#dome-app .training-card-active{
    border-color:var(--dome-accent) !important;
    box-shadow:0 0 0 2px rgba(227,179,36,.14);
}

#dome-app .training-card-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
}

#dome-app .training-card-title{
    font-size:18px;
    font-weight:900;
    color:#fff;
    margin-bottom:8px;
}

#dome-app .training-card-meta{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

#dome-app .training-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:6px 10px;
    border-radius:999px;
    background:rgba(227,179,36,.16);
    color:#f4d46a;
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.4px;
}

#dome-app .training-badge-soft{
    background:rgba(85,168,255,.14);
    color:#8fc3ff;
}

#dome-app .training-card-info{
    color:var(--dome-text-soft) !important;
    line-height:1.6;
    margin-top:8px;
    font-size:14px;
}

#dome-app .training-card-note{
    margin-top:10px;
    color:#fff !important;
    line-height:1.6;
}

#dome-app .training-day-block{
    background:linear-gradient(180deg, #0e141e, #0b1018);
    border:1px solid #232c3f;
    border-radius:16px;
    padding:16px;
    margin-bottom:14px;
}

#dome-app .training-day-title{
    font-size:18px;
    font-weight:900;
    color:#fff;
    margin-bottom:10px;
}

#dome-app .training-day-exercise{
    padding:10px 0;
    border-bottom:1px solid rgba(255,255,255,.06);
    color:var(--dome-text-soft);
}

#dome-app .training-exercise-card{
    background:linear-gradient(180deg, #121722, #0d1118);
    border:1px solid #283247;
    border-radius:16px;
    padding:16px;
    margin-bottom:12px;
    transition:all .18s ease;
}

#dome-app .training-exercise-complete{
    border-color:var(--dome-success) !important;
    box-shadow:0 0 0 2px rgba(61,220,151,.12);
}

#dome-app .training-exercise-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
}

@media (max-width: 900px){
    #dome-app .training-exercise-head{
        flex-direction:column;
        align-items:flex-start;
    }
}