* { box-sizing: border-box; }
body { margin: 0; font-family: Arial, sans-serif; background: #f4f0e8; color: #222; }
a { color: #16324f; }
.container { max-width: 1050px; margin: 24px auto; padding: 0 16px; }
.card { background: #fff; padding: 22px; margin-bottom: 18px; border-radius: 14px; box-shadow: 0 0 12px rgba(0,0,0,.12); }
.center { text-align: center; }
h1, h2 { color: #16324f; }
label { display: block; margin-top: 12px; margin-bottom: 5px; font-weight: bold; }
input, textarea, select { width: 100%; padding: 10px; border: 2px solid #ccc; border-radius: 8px; font-size: 17px; }
textarea { font-family: Arial, sans-serif; }
.btn { display: inline-block; border: none; background: #16324f; color: #fff !important; text-decoration: none; padding: 10px 14px; border-radius: 8px; font-weight: bold; cursor: pointer; margin: 6px 4px 6px 0; }
.btn.secondary { background: #666; }
.btn.gold { background: #8a5b24; }
.btn.danger, .danger { background: #b00020; }
.error { background: #ffdede; color: #900; padding: 12px; border-radius: 8px; margin: 10px 0; }
.success { background: #dfffe1; color: #0a5b0a; padding: 12px; border-radius: 8px; margin: 10px 0; }
.wordrow { border: 2px solid #e0d1b5; background: #fffdf7; border-radius: 12px; padding: 14px; margin: 14px 0; }
.wordrow.light { background: #f9f9f9; }
.small { font-size: 13px; color: #666; }
.bigcode { font-size: 52px; font-weight: bold; letter-spacing: 4px; color: #16324f; border: 3px dashed #16324f; padding: 18px; margin: 15px 0; }
.qr { max-width: 260px; width: 100%; height: auto; }
table { width: 100%; border-collapse: collapse; margin-top: 12px; }
th, td { border-bottom: 1px solid #ddd; padding: 10px; text-align: left; vertical-align: top; }
th { background: #f1ead9; color: #16324f; }
.topbar { text-align: right; margin-bottom: 10px; }
pre { background: #f1ead9; padding: 10px; border-radius: 8px; white-space: pre-wrap; }
@media print { .btn, .topbar { display: none; } .card { box-shadow: none; } }


/* Compact edit_test.php layout */
.compactAdd {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 10px;
    align-items: end;
    border: 1px solid #e0d1b5;
    background: #fffdf7;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 12px;
}
.compactWords {
    border: 1px solid #e0d1b5;
    border-radius: 10px;
    overflow: hidden;
    margin-top: 8px;
}
.compactWordRow {
    display: grid;
    grid-template-columns: 42px 190px 1fr;
    gap: 10px;
    align-items: start;
    padding: 8px 10px;
    border-bottom: 1px solid #eadfc9;
    background: #fffdf7;
}
.compactWordRow:last-child { border-bottom: none; }
.compactWordRow label,
.compactAdd label {
    margin-top: 0;
    margin-bottom: 3px;
    font-size: 13px;
}
.compactWordRow input,
.compactWordRow textarea,
.compactAdd input,
.compactAdd textarea {
    padding: 7px;
    font-size: 15px;
}
.wordNumber {
    color: #16324f;
    font-weight: bold;
    padding-top: 23px;
}
.stickyActions {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #eee;
}
@media (max-width: 760px) {
    .compactAdd,
    .compactWordRow {
        grid-template-columns: 1fr;
    }
    .wordNumber { padding-top: 0; }
}

.noticeBox {
    background: #fff8df;
    border: 2px solid #e2bf62;
    border-radius: 10px;
    padding: 11px 13px;
    margin: 10px 0 14px;
}
.paidBox {
    background: #e8ffe8;
    border-color: #50a850;
}

/* Compact teacher_dashboard.php layout */
.compactDashboard .container,
.compactDashboard { max-width: 1180px; }
.dashHeader {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 12px;
    align-items: center;
    padding: 14px 16px;
    margin-bottom: 10px;
}
.dashHeader h1 { margin: 0; font-size: 28px; }
.dashStatus {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    justify-content: flex-end;
    align-items: center;
    font-size: 14px;
}
.statusPill {
    display: inline-block;
    padding: 5px 9px;
    border-radius: 999px;
    font-weight: bold;
}
.paidPill { background: #d8ffd8; color: #0a5b0a; border: 1px solid #50a850; }
.freePill { background: #fff4c8; color: #6b430c; border: 1px solid #e2bf62; }
.dashActions { text-align: right; white-space: nowrap; }
.compactMsg { padding: 7px 9px; margin: 6px 0 0; }
.compactNotice { padding: 8px 10px; margin: 8px 0 10px; }
.testsCard { padding: 0; overflow-x: auto; }
.dashTable { margin-top: 0; }
.dashTable th,
.dashTable td { padding: 7px 8px; font-size: 14px; }
.dashTable th { white-space: nowrap; }
.testTitleCell { font-weight: bold; min-width: 210px; }
.actionCell { white-space: nowrap; min-width: 245px; }
.miniBtn {
    display: inline-block;
    border: none;
    background: #16324f;
    color: #fff !important;
    text-decoration: none;
    padding: 5px 8px;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    margin: 2px 1px;
    font-size: 13px;
}
.miniBtn.secondary { background: #666; }
.miniBtn.gold { background: #8a5b24; }
.miniBtn.danger { background: #b00020; }
@media (max-width: 850px) {
    .dashHeader { grid-template-columns: 1fr; }
    .dashStatus,
    .dashActions { justify-content: flex-start; text-align: left; }
}


/* Subscription and account pages */
.planBar {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 12px 16px;
    border: 2px solid #e2bf62;
    background: #fff8df;
}
.planActions { text-align: right; white-space: nowrap; }
.limitNotice .btn { margin-top: 8px; }
.accountCard ul { margin-top: 8px; padding-left: 22px; }
.planGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 14px;
}
.planBox {
    border: 2px solid #e0d1b5;
    border-radius: 12px;
    padding: 16px;
    background: #fffdf7;
}
.proBox {
    border-color: #e2bf62;
    background: #fff8df;
}
@media (max-width: 760px) {
    .planBar,
    .planGrid { grid-template-columns: 1fr; }
    .planActions { text-align: left; }
}

.smallText { font-size: 13px; color: #666; margin-top: -8px; margin-bottom: 10px; }
.accountInfoBox { background: #f7f4ec; border: 1px solid #e2d5b8; border-radius: 10px; padding: 10px 12px; margin-bottom: 14px; line-height: 1.5; }