/* ==========================================================
   BVUNZO Creator Hub — Dashboard-style shell
   Matches BVUNZO dashboard layout while keeping creator pages isolated.
   ========================================================== */

:root{
    --creator-primary:#003366;
    --creator-primary-dark:#002244;
    --creator-primary-soft:rgba(0,51,102,.08);

    --creator-accent:#4db748;
    --creator-accent-bright:#58cc02;
    --creator-accent-soft:rgba(77,183,72,.12);

    --creator-gold:#F2A900;
    --creator-gold-dark:#e09900;
    --creator-gold-soft:rgba(242,169,0,.1);

    --creator-ink:#1c1917;
    --creator-text:#1F2937;
    --creator-muted:#64748b;
    --creator-faint:#94a3b8;

    --creator-bg:#eef0f3;
    --creator-surface:#ffffff;
    --creator-soft:#f8fafc;
    --creator-line:rgba(28,25,23,.10);
    --creator-border:#e5e7eb;

    --creator-success:#10B981;
    --creator-warning:#F59E0B;
    --creator-danger:#EF4444;

    --creator-radius-sm:8px;
    --creator-radius:12px;
    --creator-radius-lg:14px;
    --creator-radius-xl:22px;

    --creator-shadow-sm:0 2px 8px rgba(0,0,0,.04);
    --creator-shadow-md:0 8px 24px rgba(0,0,0,.08);
    --creator-shadow-lg:0 12px 48px rgba(0,0,0,.10),0 4px 16px rgba(0,0,0,.06);
}

/* ==========================================================
   Page shell
   ========================================================== */

body.creator-shell{
    background:var(--bg-app,linear-gradient(180deg,#e0e4e9 0%,#eef0f3 50%,#e4e8ed 100%));
    color:var(--creator-text);
    min-height:100vh;
}

.creator-shell .dashboard-card-nav{
    border-bottom-color:var(--navbar-accent,var(--creator-accent));
}

.creator-dashboard-card{
    max-width:1200px;
}

.creator-content{
    padding:1.5rem 2rem 2rem;
    min-height:55vh;
}

.creator-page{
    width:100%;
    max-width:100%;
    margin:0 auto;
}

/* Remove legacy sidebar layout safely if older markup is still present. */
.creator-layout{
    display:block;
    min-height:auto;
}

.creator-sidebar,
.creator-logo,
.creator-nav,
.creator-sidebar-footer{
    display:none !important;
}

/* ==========================================================
   Top navigation refinements
   ========================================================== */

.creator-top-nav .dashboard-card-nav-core{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:flex-end;
    gap:.35rem;
    width:100%;
}

.creator-top-nav .dashboard-card-nav-brand{
    white-space:nowrap;
}

.creator-top-nav .dashboard-card-nav-logo{
    min-width:0;
}

.creator-nav-float{
    z-index:100;
}

/* ==========================================================
   Mobile bottom navigation — hidden by default
   ========================================================== */

.creator-bottom-nav{
    display:none;
}

/* ==========================================================
   Page headers
   ========================================================== */

.creator-page-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:1rem;
    margin:0 0 1.25rem;
    padding:0 0 1rem;
    border-bottom:1px solid var(--creator-line);
}

.creator-page-header h1{
    margin:0 0 .35rem;
    color:var(--creator-ink);
    font-size:1.5rem;
    font-weight:800;
    letter-spacing:-.02em;
    line-height:1.2;
}

.creator-page-header p{
    margin:0;
    max-width:72ch;
    color:var(--creator-muted);
    font-size:.95rem;
    font-weight:500;
    line-height:1.55;
}

.creator-header-actions{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:flex-end;
    gap:.55rem;
}

.creator-back-link{
    display:inline-flex;
    align-items:center;
    gap:.4rem;
    padding:.35rem .75rem;
    color:var(--creator-muted);
    background:#f1f5f9;
    border:1px solid rgba(100,116,139,.22);
    border-radius:999px;
    text-decoration:none;
    font-size:.85rem;
    font-weight:700;
}

.creator-back-link:hover{
    color:var(--creator-primary);
    background:#e2e8f0;
}

/* ==========================================================
   Cards and stat cards
   ========================================================== */

.creator-card,
.creator-stat-card{
    background:var(--creator-surface);
    border:1px solid var(--creator-line);
    border-radius:var(--creator-radius-lg);
    box-shadow:var(--creator-shadow-sm);
}

.creator-card{
    overflow:hidden;
    margin-bottom:1rem;
}

.creator-card-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.75rem;
    padding:1rem 1.15rem;
    background:linear-gradient(180deg,#fff 0%,#f8fafc 100%);
    border-bottom:1px solid var(--creator-line);
}

.creator-card-header h2{
    margin:0;
    color:var(--creator-ink);
    font-size:1.05rem;
    font-weight:800;
    letter-spacing:-.01em;
}

.creator-stats-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
    gap:1rem;
    margin:0 0 1.25rem;
}

.creator-stat-card{
    position:relative;
    overflow:hidden;
    padding:1rem;
}

.creator-stat-card::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:4px;
    background:var(--creator-accent);
}

.creator-stat-card span{
    display:block;
    color:var(--creator-muted);
    font-size:.78rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.creator-stat-card strong{
    display:block;
    margin-top:.35rem;
    color:var(--creator-primary);
    font-size:1.75rem;
    font-weight:800;
    line-height:1;
}

/* ==========================================================
   Forms
   ========================================================== */

.creator-form-panel{
    padding:1rem 1.15rem;
    background:#fff;
}

.creator-form-panel form{
    display:flex;
    flex-wrap:wrap;
    align-items:end;
    gap:.85rem;
}

.creator-form-panel label{
    display:block;
    margin-bottom:.35rem;
    color:var(--creator-primary);
    font-size:.76rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.creator-form-panel select,
.creator-form-panel input,
.creator-form-panel textarea,
.creator-auth-card input,
.creator-auth-card select,
.creator-auth-card textarea{
    width:100%;
    min-width:260px;
    min-height:42px;
    padding:.58rem .75rem;
    border:1px solid var(--creator-border);
    border-radius:var(--creator-radius-sm);
    background:#fff;
    color:var(--creator-text);
    font-family:inherit;
    font-size:.92rem;
    font-weight:600;
    transition:border-color .15s ease,box-shadow .15s ease;
}

.creator-form-panel select:focus,
.creator-form-panel input:focus,
.creator-form-panel textarea:focus,
.creator-auth-card input:focus,
.creator-auth-card select:focus,
.creator-auth-card textarea:focus{
    outline:none;
    border-color:var(--creator-accent);
    box-shadow:0 0 0 3px var(--creator-accent-soft);
}

/* ==========================================================
   Buttons
   ========================================================== */

.creator-btn,
.btn-landing-creator-primary,
.btn-landing-creator-secondary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.45rem;
    min-height:38px;
    padding:.55rem .95rem;
    border-radius:999px;
    font-family:inherit;
    font-size:.86rem;
    font-weight:800;
    line-height:1;
    text-decoration:none;
    cursor:pointer;
    transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease,box-shadow .15s ease;
}

.creator-btn{
    border:1px solid rgba(0,51,102,.18);
    background:#fff;
    color:var(--creator-primary);
}

.creator-btn:hover{
    background:var(--creator-primary-soft);
    border-color:rgba(0,51,102,.28);
    color:var(--creator-primary-dark);
    transform:translateY(-1px);
}

.creator-btn-primary,
.btn-landing-creator-primary{
    border:1px solid var(--creator-primary);
    background:var(--creator-primary);
    color:#fff;
    box-shadow:var(--creator-shadow-sm);
}

.creator-btn-primary:hover,
.btn-landing-creator-primary:hover{
    background:var(--creator-primary-dark);
    border-color:var(--creator-primary-dark);
    color:#fff;
    transform:translateY(-1px);
    box-shadow:var(--creator-shadow-md);
}

.btn-landing-creator-secondary{
    border:1px solid rgba(0,51,102,.18);
    background:#fff;
    color:var(--creator-primary);
}

.btn-landing-creator-secondary:hover{
    background:var(--creator-primary-soft);
    color:var(--creator-primary-dark);
}

.creator-btn-danger{
    border-color:#fecaca;
    background:#fef2f2;
    color:#991b1b;
}

.creator-btn-danger:hover{
    background:#fee2e2;
    border-color:#fca5a5;
    color:#7f1d1d;
}

.creator-btn[disabled],
.creator-btn:disabled{
    cursor:not-allowed;
    opacity:.65;
    transform:none;
    box-shadow:none;
}

/* ==========================================================
   Badges and tabs
   ========================================================== */

.creator-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.25rem;
    border-radius:999px;
    padding:.28rem .65rem;
    font-size:.72rem;
    font-weight:800;
    line-height:1.1;
    white-space:nowrap;
}

.creator-badge-green{
    background:#dcfce7;
    color:#166534;
    border:1px solid rgba(22,101,52,.18);
}

.creator-badge-yellow{
    background:var(--creator-gold-soft);
    color:#92400e;
    border:1px solid rgba(242,169,0,.22);
}

.creator-badge-neutral{
    background:var(--creator-primary-soft);
    color:var(--creator-primary);
    border:1px solid rgba(0,51,102,.14);
}

.creator-tabs{
    display:flex;
    flex-wrap:wrap;
    gap:.5rem;
    margin:0 0 1rem;
}

.creator-tabs a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:36px;
    padding:.5rem .9rem;
    border:1px solid var(--creator-line);
    border-radius:999px;
    background:#fff;
    color:var(--creator-primary);
    font-size:.84rem;
    font-weight:800;
    text-decoration:none;
    box-shadow:var(--creator-shadow-sm);
}

.creator-tabs a:hover{
    background:var(--creator-primary-soft);
}

.creator-tabs a.active{
    background:var(--creator-primary);
    border-color:var(--creator-primary);
    color:#fff;
}

/* ==========================================================
   Creator applications
   ========================================================== */

.creator-application-list{
    display:flex;
    flex-direction:column;
    gap:.85rem;
    padding:1rem;
}

.creator-application-card{
    display:grid;
    grid-template-columns:48px minmax(0,1fr) auto;
    gap:1rem;
    align-items:flex-start;
    padding:1rem;
    background:#fff;
    border:1px solid var(--creator-line);
    border-radius:var(--creator-radius);
    box-shadow:var(--creator-shadow-sm);
}

.creator-avatar{
    width:48px;
    height:48px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(180deg,#ecfdf3 0%,#dcfce7 100%);
    color:#166534;
    border:1px solid rgba(22,101,52,.16);
    font-size:1rem;
    font-weight:900;
}

.creator-application-main{
    min-width:0;
}

.creator-application-main h3{
    margin:0;
    color:var(--creator-ink);
    font-size:1rem;
    font-weight:800;
    line-height:1.25;
}

.creator-meta{
    display:flex;
    flex-wrap:wrap;
    gap:.4rem .8rem;
    margin-top:.35rem;
    color:var(--creator-muted);
    font-size:.82rem;
    font-weight:600;
}

.creator-meta span{
    overflow-wrap:anywhere;
}

.creator-links{
    display:flex;
    flex-wrap:wrap;
    gap:.65rem;
    margin-top:.65rem;
}

.creator-links a{
    display:inline-flex;
    align-items:center;
    gap:.3rem;
    color:var(--creator-primary);
    font-size:.85rem;
    font-weight:800;
    text-decoration:none;
}

.creator-links a:hover{
    text-decoration:underline;
}

.creator-actions{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:.5rem;
}

.creator-actions form{
    margin:0;
}

.creator-review-note{
    margin:.7rem 0 0;
    padding:.75rem;
    background:var(--creator-soft);
    border:1px solid var(--creator-line);
    border-radius:var(--creator-radius-sm);
    color:var(--creator-muted);
    font-size:.86rem;
    font-weight:600;
    line-height:1.45;
}

.creator-empty{
    margin:1rem;
    padding:1.35rem;
    border:1px dashed rgba(100,116,139,.35);
    border-radius:var(--creator-radius);
    background:var(--creator-soft);
    color:var(--creator-muted);
    font-size:.92rem;
    font-weight:700;
    line-height:1.45;
    text-align:center;
}

.creator-empty-action{
    margin-top:.85rem;
}

/* ==========================================================
   My Work
   ========================================================== */

.creator-work-panel{
    padding:1rem 1.15rem;
}

.creator-work-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
    gap:.75rem;
    margin:0 0 1rem;
}

.creator-work-grid div{
    padding:.7rem .8rem;
    background:var(--creator-soft);
    border:1px solid var(--creator-line);
    border-radius:var(--creator-radius-sm);
}

.creator-work-grid strong{
    display:block;
    color:var(--creator-muted);
    font-size:.72rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.creator-work-grid span{
    display:block;
    margin-top:.28rem;
    color:var(--creator-primary);
    font-size:.88rem;
    font-weight:800;
}

.creator-work-question{
    padding:1rem;
    border:1px solid var(--creator-line);
    border-radius:var(--creator-radius);
    background:#fff;
}

.creator-work-question h3{
    margin:0 0 .45rem;
    color:var(--creator-ink);
    font-size:1rem;
    font-weight:800;
}

.creator-work-question p{
    margin:.25rem 0 .8rem;
    color:var(--creator-muted);
    font-size:.86rem;
    font-weight:700;
}

.creator-work-status{
    margin:0 0 .95rem;
    padding:.9rem;
    border:1px solid var(--creator-line);
    border-radius:var(--creator-radius-sm);
    background:var(--creator-soft);
}

.creator-work-status p{
    margin:.25rem 0;
    color:var(--creator-text);
    font-size:.88rem;
    font-weight:600;
    line-height:1.45;
}

.creator-inline-form{
    display:flex;
    flex-direction:column;
    gap:.7rem;
    margin:.85rem 0 0;
}

.creator-inline-form textarea{
    width:100%;
    min-height:90px;
    padding:.65rem .75rem;
    border:1px solid var(--creator-border);
    border-radius:var(--creator-radius-sm);
    color:var(--creator-text);
    font-family:inherit;
    font-size:.88rem;
    font-weight:600;
}

/* ==========================================================
   Question Queue
   ========================================================== */

.creator-question-list{
    display:flex;
    flex-direction:column;
    gap:1rem;
    padding:1rem;
}

.creator-question-card{
    background:#fff;
    border:1px solid var(--creator-line);
    border-radius:var(--creator-radius);
    box-shadow:var(--creator-shadow-sm);
    overflow:hidden;
}

.creator-question-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    padding:.9rem 1rem;
    background:linear-gradient(135deg,var(--creator-primary-soft) 0%,#fff 100%);
    border-bottom:1px solid var(--creator-line);
}

.creator-question-id span{
    display:block;
    color:var(--creator-muted);
    font-size:.65rem;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.05em;
}

.creator-question-id code{
    display:block;
    margin-top:.18rem;
    color:var(--creator-primary);
    font-family:inherit;
    font-size:.92rem;
    font-weight:900;
    background:transparent;
    border:0;
    padding:0;
    white-space:normal;
    overflow-wrap:anywhere;
}

.creator-question-meta{
    display:flex;
    flex-wrap:wrap;
    gap:.45rem;
    padding:.85rem 1rem 0;
    margin:0;
}

.creator-question-meta div{
    display:inline-flex;
    align-items:center;
    gap:.25rem;
    padding:.28rem .58rem;
    background:var(--creator-soft);
    border:1px solid var(--creator-line);
    border-radius:999px;
}

.creator-question-meta dt{
    margin:0;
    color:var(--creator-muted);
    font-size:.62rem;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.creator-question-meta dd{
    margin:0;
    color:var(--creator-primary);
    font-size:.74rem;
    font-weight:800;
}

.creator-question-body{
    margin:.85rem 1rem 0;
    padding:.9rem;
    background:#fff;
    border:1px solid var(--creator-line);
    border-radius:var(--creator-radius-sm);
    color:var(--creator-text);
    font-size:.95rem;
    font-weight:500;
    line-height:1.65;
    overflow-x:auto;
}

.creator-question-body p{
    margin:.3rem 0 .65rem;
}

.creator-question-body .question-pre,
.creator-question-body .mcq-text,
.creator-question-body .question-stem,
.creator-question-body .question-text,
.creator-question-body .bv-math,
.creator-question-body .math-rendered{
    color:var(--creator-text);
    font-family:inherit;
    font-size:.95rem;
    font-weight:500;
    line-height:1.65;
    white-space:normal;
}

.creator-question-body img,
.creator-question-image{
    display:block;
    max-width:100%;
    height:auto;
    margin:.35rem auto .85rem;
    border:1px solid var(--creator-line);
    border-radius:var(--creator-radius-sm);
    background:#fff;
}

.creator-question-actions{
    display:flex;
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:.6rem;
    padding:.85rem 1rem 1rem;
}

.creator-question-actions .creator-btn{
    min-height:34px;
    padding:.45rem .8rem;
    font-size:.82rem;
}

.creator-pagination{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:.65rem;
    padding:1rem;
}

.creator-pagination span{
    color:var(--creator-primary);
    font-size:.85rem;
    font-weight:900;
}

/* ==========================================================
   Tutorial management
   ========================================================== */

.creator-tutorial-list{
    display:flex;
    flex-direction:column;
    gap:1rem;
    padding:1rem;
}

.creator-filter-bar{
    display:flex;
    flex-wrap:wrap;
    gap:.65rem;
    margin:1rem 0;
}

.creator-filter-bar a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:38px;
    padding:.55rem 1rem;
    border:1px solid var(--creator-line);
    border-radius:999px;
    background:#fff;
    color:var(--creator-muted);
    font-size:.9rem;
    font-weight:800;
    text-decoration:none;
}

.creator-filter-bar a.active,
.creator-filter-bar a:hover{
    border-color:var(--creator-primary);
    background:var(--creator-primary-soft);
    color:var(--creator-primary);
}

.creator-tutorial-question-list{
    display:flex;
    flex-direction:column;
    gap:.85rem;
    padding:1rem;
}

.creator-tutorial-question-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    padding:1rem;
    border:1px solid var(--creator-line);
    border-radius:var(--creator-radius-sm);
    background:#fff;
}

.creator-tutorial-question-row h3{
    margin:0 0 .35rem;
    color:var(--creator-ink);
    font-size:1rem;
    font-weight:800;
}

.creator-tutorial-question-row p{
    margin:.2rem 0;
    color:var(--creator-muted);
    font-size:.84rem;
    font-weight:600;
}

.creator-tutorial-card{
    display:grid;
    grid-template-columns:minmax(240px,1fr) minmax(260px,1.1fr) minmax(260px,1fr) minmax(220px,.8fr);
    gap:1rem;
    align-items:flex-start;
    padding:1rem;
    border:1px solid var(--creator-line);
    border-radius:var(--creator-radius);
    background:#fff;
    box-shadow:var(--creator-shadow-sm);
}

.creator-tutorial-slot-card{
    grid-template-columns:minmax(260px,1fr) minmax(260px,1fr) minmax(240px,.8fr);
}

.creator-tutorial-meta h3{
    margin:0 0 .4rem;
    color:var(--creator-ink);
    font-size:1rem;
    font-weight:800;
}

.creator-tutorial-meta p{
    margin:.25rem 0;
    color:var(--creator-muted);
    font-size:.84rem;
    font-weight:600;
    line-height:1.45;
}

.creator-tutorial-question{
    padding:.85rem;
    border:1px solid var(--creator-line);
    border-radius:var(--creator-radius-sm);
    background:rgba(248,250,252,.82);
}

.creator-tutorial-question h4{
    margin:0 0 .45rem;
    color:var(--creator-ink);
    font-size:.94rem;
    font-weight:800;
}

.creator-tutorial-question p{
    margin:.25rem 0 .65rem;
    color:var(--creator-muted);
    font-size:.84rem;
    font-weight:600;
}

.creator-tutorial-preview iframe{
    display:block;
    width:100%;
    min-height:200px;
    border:1px solid var(--creator-line);
    border-radius:var(--creator-radius-sm);
    background:#000;
}

.creator-tutorial-actions{
    display:flex;
    flex-direction:column;
    gap:.65rem;
}

.creator-tutorial-actions form{
    display:flex;
    flex-direction:column;
    gap:.5rem;
    margin:0;
}

.creator-tutorial-actions textarea{
    width:100%;
    min-height:90px;
    padding:.65rem .75rem;
    border:1px solid var(--creator-border);
    border-radius:var(--creator-radius-sm);
    color:var(--creator-text);
    font-family:inherit;
    font-size:.88rem;
    font-weight:600;
}

/* ==========================================================
   Creator landing/auth pages using home.html/login/signup/verify
   ========================================================== */

.creator-auth-page{
    max-width:760px;
    margin:0 auto;
}

.creator-auth-card{
    width:min(460px,100%);
    margin:1.25rem auto 0;
    padding:1.25rem;
    background:#fff;
    border:1px solid var(--creator-line);
    border-radius:var(--creator-radius-lg);
    box-shadow:var(--creator-shadow-md);
}

.creator-form-group{
    position:relative;
    margin-bottom:.9rem;
}

.creator-required{
    position:absolute;
    top:.6rem;
    right:.65rem;
    color:var(--creator-danger);
    font-weight:900;
}

.creator-required--password{
    right:3rem;
}

.creator-password-field{
    position:relative;
}

.creator-password-field input{
    padding-right:3rem;
}

.password-toggle-btn{
    position:absolute;
    top:50%;
    right:.4rem;
    transform:translateY(-50%);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:2.1rem;
    height:2.1rem;
    border:0;
    border-radius:8px;
    background:transparent;
    color:var(--creator-muted);
    cursor:pointer;
}

.password-toggle-btn:hover{
    background:var(--creator-primary-soft);
    color:var(--creator-primary);
}

.creator-auth-switch{
    margin:1rem 0 0;
    color:var(--creator-muted);
    font-size:.92rem;
    font-weight:600;
    text-align:center;
}

.creator-auth-switch a{
    color:var(--creator-primary);
    font-weight:900;
    text-decoration:none;
}

.creator-auth-switch a:hover{
    text-decoration:underline;
}

.landing-creator-entry{
    width:min(680px,100%);
    margin:1.5rem auto 0;
    padding:1.25rem;
    background:#fff;
    border:1px solid var(--creator-line);
    border-radius:var(--creator-radius-lg);
    box-shadow:var(--creator-shadow-md);
}

.landing-creator-entry__label{
    margin-bottom:.85rem;
    color:var(--creator-primary);
    font-size:.8rem;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.06em;
    text-align:center;
}

.landing-creator-entry__actions{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:.75rem;
}

/* ==========================================================
   Responsive behavior
   ========================================================== */

@media (max-width:900px){
    .creator-content{
        padding:1.15rem 1.25rem 1.5rem;
    }

    .creator-page-header{
        flex-direction:column;
        align-items:stretch;
    }

    .creator-page-header .creator-btn{
        align-self:flex-start;
    }

    .creator-header-actions{
        justify-content:flex-start;
    }

    .creator-application-card{
        grid-template-columns:44px minmax(0,1fr);
    }

    .creator-avatar{
        width:44px;
        height:44px;
    }

    .creator-actions{
        grid-column:1 / -1;
        justify-content:flex-start;
    }

    .creator-tutorial-card{
        grid-template-columns:1fr;
    }

    .creator-tutorial-question-row{
        flex-direction:column;
        align-items:flex-start;
    }
}

@media (max-width:768px){
    body.creator-shell.dashboard-mode{
        padding-bottom:5.25rem;
    }

    .creator-dashboard-card{
        border-radius:var(--radius-md,14px);
    }

    .creator-content{
        padding:1rem 1.15rem 5.75rem;
    }

    .creator-page-header{
        margin-bottom:1rem;
        padding-bottom:.85rem;
    }

    .creator-page-header h1{
        font-size:1.35rem;
    }

    .creator-desktop-nav{
        display:none !important;
    }

    .creator-bottom-nav{
        display:flex;
    }

    .creator-page-header p{
        font-size:.9rem;
    }

    .creator-form-panel form{
        flex-direction:column;
        align-items:stretch;
    }

    .creator-form-panel select,
    .creator-form-panel input,
    .creator-form-panel textarea{
        min-width:100%;
    }

    .creator-stats-grid{
        grid-template-columns:1fr;
        gap:.75rem;
    }

    .creator-bottom-nav{
        position:fixed;
        left:0;
        right:0;
        bottom:0;
        z-index:1000;
        display:flex;
        align-items:center;
        justify-content:space-around;
        height:68px;
        padding:0 .35rem env(safe-area-inset-bottom);
        background:#1c1917;
        border-top:2px solid var(--navbar-accent,var(--creator-accent));
        box-shadow:0 -4px 18px rgba(0,0,0,.18);
    }

    .creator-bottom-nav a{
        flex:1;
        min-width:0;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:.22rem;
        height:100%;
        color:rgba(255,255,255,.92);
        text-decoration:none;
        font-size:.72rem;
        font-weight:800;
    }

    .creator-bottom-nav a:hover,
    .creator-bottom-nav a:focus-visible{
        color:#fff;
        background:rgba(255,255,255,.08);
        outline:none;
    }

    .creator-bottom-nav i{
        color:var(--navbar-accent,var(--creator-accent));
        font-size:1.18rem;
        line-height:1;
    }

    .creator-bottom-nav span{
        display:block;
        max-width:100%;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    .creator-question-list,
    .creator-application-list{
        padding:.75rem;
    }

    .creator-question-head{
        flex-direction:column;
        align-items:flex-start;
    }

    .creator-question-meta{
        padding:.75rem .85rem 0;
    }

    .creator-question-body{
        margin:.75rem .85rem 0;
        padding:.75rem;
        font-size:.92rem;
    }

    .creator-question-body .question-pre,
    .creator-question-body .mcq-text,
    .creator-question-body .question-stem,
    .creator-question-body .question-text,
    .creator-question-body .bv-math,
    .creator-question-body .math-rendered{
        font-size:.92rem;
    }

    .creator-question-actions{
        justify-content:flex-start;
        padding:.75rem .85rem .9rem;
    }

    .creator-tabs{
        overflow-x:auto;
        flex-wrap:nowrap;
        padding-bottom:.2rem;
        scrollbar-width:none;
    }

    .creator-tabs::-webkit-scrollbar{
        display:none;
    }

    .creator-tabs a{
        flex:0 0 auto;
    }
}

@media (max-width:480px){
    .creator-content{
        padding:1rem 1rem 5.75rem;
    }

    .creator-card-header{
        padding:.9rem 1rem;
    }

    .creator-card-header h2{
        font-size:1rem;
    }

    .creator-auth-card,
    .landing-creator-entry{
        padding:1rem;
    }

    .landing-creator-entry__actions{
        flex-direction:column;
        align-items:stretch;
    }

    .btn-landing-creator-primary,
    .btn-landing-creator-secondary{
        width:100%;
    }
}

/* ==========================================================
   Official BVUNZO UI alignment
   Uses the app tokens already loaded before creator.css.
   ========================================================== */

:root{
    --creator-primary:var(--brand-navy,#0f222d);
    --creator-primary-dark:var(--brand-navy,#0f222d);
    --creator-primary-soft:rgba(59,181,74,.08);
    --creator-accent:var(--brand-primary,#3bb54a);
    --creator-accent-bright:var(--brand-primary,#3bb54a);
    --creator-accent-soft:rgba(59,181,74,.12);
    --creator-gold:var(--brand-gold,#f2a900);
    --creator-gold-dark:var(--brand-gold-dark,#d99500);
    --creator-gold-soft:rgba(242,169,0,.12);
    --creator-ink:var(--text-main,#17212b);
    --creator-text:var(--text-main,#17212b);
    --creator-muted:var(--text-muted,#667085);
    --creator-faint:#94a3b8;
    --creator-bg:var(--bg-app,#f4f7fa);
    --creator-surface:var(--bg-card,#fff);
    --creator-soft:var(--bg-card-alt,#fafbfc);
    --creator-line:var(--border-soft,#e5eaf0);
    --creator-border:var(--border-soft,#e5eaf0);
    --creator-radius-sm:var(--radius-sm,12px);
    --creator-radius:var(--radius-md,18px);
    --creator-radius-lg:var(--radius-md,18px);
    --creator-radius-xl:var(--radius-lg,24px);
    --creator-shadow-sm:var(--shadow-sm,0 2px 8px rgba(0,0,0,.04));
    --creator-shadow-md:var(--shadow-md,0 8px 24px rgba(0,0,0,.08));
    --creator-shadow-lg:var(--shadow-lg,0 12px 48px rgba(15,34,45,.1));
}

body.creator-shell{
    background:var(--bg-app,#f4f7fa);
    color:var(--text-main,#17212b);
    font-family:var(--font-body,"Roboto",system-ui,-apple-system,"Segoe UI",sans-serif);
}

.creator-dashboard-card{
    background:var(--bg-card,#fff);
    border-color:var(--border-soft,#e5eaf0);
    border-radius:var(--radius-md,18px);
    box-shadow:var(--shadow-lg,0 12px 48px rgba(15,34,45,.1));
}

.creator-content{
    padding:var(--space-5,24px) var(--space-6,32px) var(--space-6,32px);
}

.creator-page{
    display:flex;
    flex-direction:column;
    gap:var(--space-5,24px);
}

.creator-page-header{
    margin:0;
    padding:0;
    border-bottom:0;
}

.creator-page-header h1{
    margin:0 0 var(--space-2,8px);
    color:var(--text-main,#17212b);
    font-family:var(--font-display,"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif);
    font-size:var(--text-title,1.5rem);
    font-weight:800;
    letter-spacing:-.02em;
}

.creator-page-header p{
    color:var(--text-muted,#667085);
    font-size:var(--text-body-lg,.9375rem);
    font-weight:500;
    line-height:1.55;
}

.creator-card,
.creator-stat-card,
.creator-auth-card,
.landing-creator-entry,
.creator-question-card,
.creator-application-card,
.creator-work-question,
.creator-tutorial-card,
.creator-tutorial-question-row{
    background:var(--bg-card,#fff);
    border:1px solid var(--border-soft,#e5eaf0);
    border-radius:var(--radius-md,18px);
    box-shadow:var(--shadow-sm,0 2px 8px rgba(0,0,0,.04));
}

.creator-card{
    margin-bottom:0;
    overflow:hidden;
}

.creator-card-header{
    padding:var(--space-4,16px) var(--space-5,24px);
    background:var(--bg-card,#fff);
    border-bottom:1px solid var(--border-soft,#e5eaf0);
}

.creator-card-header h2,
.creator-application-main h3,
.creator-work-question h3,
.creator-tutorial-meta h3,
.creator-tutorial-question-row h3{
    color:var(--text-main,#17212b);
    font-size:var(--text-card-title,1rem);
    font-weight:700;
    letter-spacing:0;
}

.creator-stats-grid{
    gap:var(--space-4,16px);
    margin:0;
}

.creator-stat-card{
    padding:var(--space-4,16px);
}

.creator-stat-card::before{
    background:var(--brand-primary,#3bb54a);
}

.creator-stat-card span,
.creator-work-grid strong,
.creator-question-id span,
.creator-question-meta dt,
.landing-creator-entry__label,
.creator-form-panel label{
    color:var(--text-muted,#667085);
    font-size:var(--text-label,.75rem);
    font-weight:700;
    letter-spacing:.04em;
}

.creator-stat-card strong,
.creator-work-grid span,
.creator-question-id code,
.creator-question-meta dd{
    color:var(--text-main,#17212b);
}

.creator-form-panel{
    padding:var(--space-5,24px);
    background:var(--bg-card,#fff);
}

.creator-form-panel select,
.creator-form-panel input,
.creator-form-panel textarea,
.creator-auth-card input,
.creator-auth-card select,
.creator-auth-card textarea,
.creator-inline-form textarea,
.creator-tutorial-actions textarea{
    min-height:44px;
    border:1px solid var(--border-soft,#e5eaf0);
    border-radius:var(--radius-sm,12px);
    background:var(--bg-card,#fff);
    color:var(--text-main,#17212b);
    font-size:var(--text-body-lg,.9375rem);
    font-weight:500;
}

.creator-form-panel select:focus,
.creator-form-panel input:focus,
.creator-form-panel textarea:focus,
.creator-auth-card input:focus,
.creator-auth-card select:focus,
.creator-auth-card textarea:focus,
.creator-inline-form textarea:focus,
.creator-tutorial-actions textarea:focus{
    border-color:var(--brand-primary,#3bb54a);
    box-shadow:0 0 0 3px rgba(59,181,74,.15);
}

.creator-btn,
.btn-landing-creator-primary,
.btn-landing-creator-secondary{
    min-height:40px;
    padding:var(--space-2,8px) var(--space-4,16px);
    border-radius:var(--radius-md,18px);
    font-size:var(--text-body,.875rem);
    font-weight:700;
    transition:background .2s ease,border-color .2s ease,box-shadow .2s ease,transform .15s ease;
}

.creator-btn,
.btn-landing-creator-secondary{
    border:1px solid var(--border-strong,#cbd5e1);
    background:transparent;
    color:var(--text-main,#17212b);
    box-shadow:none;
}

.creator-btn:hover,
.btn-landing-creator-secondary:hover{
    background:var(--bg-card-alt,#fafbfc);
    color:var(--text-main,#17212b);
    transform:translateY(-1px);
}

.creator-btn-primary,
.btn-landing-creator-primary{
    border-color:var(--btn-primary-border,#5bc9c4);
    background:var(--btn-primary-bg,linear-gradient(180deg,#bcfcff 0%,#5bc9c4 100%));
    color:var(--brand-navy,#0f222d);
    box-shadow:var(--shadow-sm,0 2px 8px rgba(0,0,0,.04));
}

.creator-btn-primary:hover,
.btn-landing-creator-primary:hover{
    border-color:var(--btn-primary-border-hover,#4ab8b3);
    background:var(--btn-primary-bg-hover,linear-gradient(180deg,#a8f0f4 0%,#4ab8b3 100%));
    color:var(--brand-navy,#0f222d);
    box-shadow:var(--shadow-md,0 8px 24px rgba(0,0,0,.08));
}

.creator-btn-danger{
    border-color:rgba(239,68,68,.28);
    background:rgba(239,68,68,.06);
    color:#b91c1c;
}

.creator-btn-danger:hover{
    border-color:rgba(239,68,68,.38);
    background:rgba(239,68,68,.1);
    color:#991b1b;
}

.creator-badge,
.creator-tabs a,
.creator-filter-bar a,
.creator-question-meta div{
    border-radius:var(--radius-pill,999px);
    border:1px solid var(--border-soft,#e5eaf0);
    background:var(--bg-card,#fff);
    color:var(--text-main,#17212b);
    box-shadow:none;
}

.creator-badge-neutral,
.creator-tabs a.active,
.creator-filter-bar a.active,
.creator-tabs a:hover,
.creator-filter-bar a:hover{
    border-color:rgba(59,181,74,.25);
    background:rgba(59,181,74,.08);
    color:var(--brand-primary-dark,#2d9a3a);
}

.creator-badge-green{
    border-color:rgba(59,181,74,.25);
    background:rgba(59,181,74,.1);
    color:#047857;
}

.creator-badge-yellow{
    border-color:rgba(242,169,0,.32);
    background:rgba(242,169,0,.1);
    color:#92400e;
}

.creator-application-list,
.creator-question-list,
.creator-tutorial-list,
.creator-tutorial-question-list,
.creator-portfolio-list{
    gap:var(--space-4,16px);
    padding:var(--space-5,24px);
}

.creator-application-card,
.creator-tutorial-question-row,
.creator-portfolio-card{
    padding:var(--space-4,16px);
}

.creator-avatar{
    background:linear-gradient(145deg,var(--brand-primary,#3bb54a) 0%,var(--brand-primary-dark,#2d9a3a) 100%);
    color:#fff;
    border:0;
    box-shadow:0 4px 14px rgba(59,181,74,.28);
}

.creator-links a,
.creator-auth-switch a{
    color:var(--brand-primary-dark,#2d9a3a);
}

.creator-review-note,
.creator-work-grid div,
.creator-work-status,
.creator-tutorial-question,
.creator-question-body{
    background:var(--bg-card-alt,#fafbfc);
    border:1px solid var(--border-soft,#e5eaf0);
    border-radius:var(--radius-sm,12px);
}

.creator-question-head{
    background:linear-gradient(120deg,rgba(59,181,74,.08) 0%,#fff 100%);
    border-bottom:1px solid var(--border-soft,#e5eaf0);
}

.creator-question-card{
    overflow:hidden;
}

.creator-question-body,
.creator-question-body .question-pre,
.creator-question-body .mcq-text,
.creator-question-body .question-stem,
.creator-question-body .question-text,
.creator-question-body .bv-math,
.creator-question-body .math-rendered,
.creator-tutorial-question .mcq-text{
    color:var(--text-main,#17212b);
    font-size:var(--text-body-lg,.9375rem);
    font-weight:500;
}

.creator-question-image{
    border:1px solid var(--border-soft,#e5eaf0);
    border-radius:var(--radius-sm,12px);
    box-shadow:var(--shadow-sm,0 2px 8px rgba(0,0,0,.04));
}

.creator-empty{
    border:1px dashed var(--border-strong,#cbd5e1);
    border-radius:var(--radius-md,18px);
    background:var(--bg-card-alt,#fafbfc);
    color:var(--text-muted,#667085);
}

.creator-tutorial-card{
    padding:var(--space-4,16px);
}

.creator-tutorial-preview iframe{
    border:1px solid var(--border-soft,#e5eaf0);
    border-radius:var(--radius-sm,12px);
    box-shadow:var(--shadow-sm,0 2px 8px rgba(0,0,0,.04));
}

.creator-portfolio-list{
    display:flex;
    flex-direction:column;
}

.creator-portfolio-card{
    display:grid;
    grid-template-columns:minmax(240px,1.2fr) minmax(220px,1fr) auto;
    gap:var(--space-4,16px);
    align-items:start;
    background:var(--bg-card,#fff);
    border:1px solid var(--border-soft,#e5eaf0);
    border-radius:var(--radius-md,18px);
    box-shadow:var(--shadow-sm,0 2px 8px rgba(0,0,0,.04));
}

.creator-portfolio-card h3{
    margin:0 0 var(--space-2,8px);
    color:var(--text-main,#17212b);
    font-size:var(--text-card-title,1rem);
    font-weight:700;
    overflow-wrap:anywhere;
}

.creator-portfolio-card p{
    margin:.25rem 0;
    color:var(--text-muted,#667085);
    font-size:var(--text-body,.875rem);
    font-weight:600;
    line-height:1.45;
}

.creator-portfolio-card p strong{
    color:var(--text-main,#17212b);
}

.creator-portfolio-actions{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:var(--space-2,8px);
}

.creator-auth-page{
    max-width:760px;
}

.creator-auth-card,
.landing-creator-entry{
    border-radius:var(--radius-lg,24px);
    box-shadow:var(--shadow-md,0 8px 24px rgba(0,0,0,.08));
}

.password-toggle-btn{
    border-radius:var(--radius-pill,999px);
}

.password-toggle-btn:hover{
    background:rgba(59,181,74,.08);
    color:var(--brand-primary-dark,#2d9a3a);
}

@media (max-width:900px){
    .creator-content{
        padding:var(--space-4,16px);
    }
}

@media (max-width:768px){
    .creator-content{
        padding:var(--space-4,16px) var(--space-4,16px) calc(5.75rem + env(safe-area-inset-bottom));
    }

    .creator-bottom-nav{
        background:#1c1917;
        border-top-color:var(--brand-primary,#3bb54a);
    }

    .creator-bottom-nav i{
        color:var(--brand-primary,#3bb54a);
    }

    .creator-tabs,
    .creator-filter-bar{
        overflow-x:auto;
        flex-wrap:nowrap;
        padding-bottom:.25rem;
        scrollbar-width:none;
    }

    .creator-tabs::-webkit-scrollbar,
    .creator-filter-bar::-webkit-scrollbar{
        display:none;
    }

    .creator-tabs a,
    .creator-filter-bar a{
        flex:0 0 auto;
    }

    .creator-application-list,
    .creator-question-list,
    .creator-tutorial-list,
    .creator-tutorial-question-list,
    .creator-portfolio-list{
        padding:var(--space-4,16px);
    }

    .creator-portfolio-card{
        grid-template-columns:1fr;
    }

    .creator-portfolio-actions{
        justify-content:flex-start;
    }
}