/* Quiz Studio — app-specific rules. Brand tokens, header, buttons, forms, tables and cards
   come from aininjas-app.css (pinned copy of the www.aininjas.com brand kit). */
@import url('/admin-assets/aininjas-app.css');

body { font-family: var(--ui); }
.wrap.page-wrap, main.wrap { max-width: var(--wrap); margin: 0 auto; padding: 28px 26px 80px; }
h1.page { font-size: 30px; }
.pagesub { font-family: var(--body); }
.card p, .card li { font-family: var(--body); }
table.grid td { font-family: var(--ui); }

/* editor */
.lvl { border: 1px solid var(--line); border-left: 5px solid var(--ember); border-radius: var(--r); background: var(--white); margin-bottom: 16px; overflow: hidden; }
.lvl-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--paper-2); cursor: pointer; }
.lvl-head .badge { font-size: 24px; background: none; padding: 0; }
.lvl-head .t { font-family: var(--display); font-weight: 800; font-size: 16px; }
.lvl-head .count { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-left: auto; }
.lvl-body { padding: 14px 16px; display: none; }
.lvl.open .lvl-body { display: block; }
.qcard { border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; margin-bottom: 10px; background: var(--white); }
.qcard .qtop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.qcard .qtop .n { font-family: var(--mono); font-weight: 600; font-size: 12px; color: var(--crimson); }
.qcard .qpreview { font-size: 14px; line-height: 1.35; font-family: var(--body); }
.choice-row { display: flex; gap: 8px; align-items: center; margin-bottom: 7px; }
.choice-row input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--good); }
.choice-row input[type=text] { flex: 1; }
.emoji-pop { position: absolute; background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 8px 28px rgba(10,7,6,.18); padding: 10px; display: grid; grid-template-columns: repeat(8, 34px); gap: 2px; z-index: 80; max-height: 260px; overflow-y: auto; }
.emoji-pop button { font-size: 20px; background: none; border: none; cursor: pointer; border-radius: var(--r); padding: 4px; }
.emoji-pop button:hover { background: var(--paper-2); }
.emoji-trigger { font-size: 22px; width: 46px; height: 40px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); cursor: pointer; }
.emoji-trigger:hover { border-color: var(--ember); }
.imgthumb { display: flex; align-items: center; gap: 10px; }
.imgthumb img { height: 52px; max-width: 120px; object-fit: contain; border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.tag { font-size: 11px; }

/* row helpers used by the admin pages */
.row > * { flex: 1; min-width: 140px; }
.row > .tight { flex: 0 0 auto; min-width: 0; }
.row > .field { margin-bottom: 0; }
.row .field label { margin-bottom: 6px; }
.row + .row, .card .row + .field { margin-top: 14px; }

/* SSO note on the users page */
.ssonote { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; background: var(--steel-soft); border: 1px solid var(--steel); color: var(--steel); padding: 12px 16px; border-radius: var(--r); margin-bottom: 18px; font-size: 14px; }
.ssonote a.btn { background: var(--steel); }