@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&display=swap');
:root{font-family:Cairo,Tahoma,'Segoe UI',sans-serif;background:#f6f8fc;color:#182f49;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.55;cursor:not-allowed}[hidden]{display:none!important}a{color:inherit;text-decoration:none}
.layout{max-width:1250px;padding:0 42px;margin:auto;min-height:100vh;display:flex;flex-direction:column}main{flex:1}.topbar{height:98px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #e5ebf3;gap:20px}.brand{display:flex;align-items:center;gap:12px}.symbol{height:43px;width:43px;display:grid;place-items:center;background:#123657;color:#f5be55;border-radius:12px;font-size:27px;font-family:Georgia,serif}.brand strong{display:block;font-size:16px;font-weight:800;line-height:1.6}.brand small{display:block;color:#8092a7;font-size:10px;line-height:1.5}.top-right{display:flex;gap:23px;align-items:center;color:#73889f;font-size:12px;font-weight:700}#loggedHeader{display:flex;gap:12px;align-items:center}.link{border:0;background:none;color:#184e7b;font-weight:800}.hero{display:grid;grid-template-columns:1.05fr .83fr;align-items:center;gap:7vw;padding:91px 4px 95px}.eyebrow{text-transform:uppercase;color:#af8042;font-weight:800;font-size:12px;letter-spacing:.3px}.hero h1{font-size:clamp(30px,3.6vw,48px);color:#102d4b;line-height:1.6;margin:18px 0 13px}.hero h1 span{display:block;color:#ac7c3b}.hero-copy>p{font-size:15px;line-height:2.3;color:#73869b;max-width:570px}.feature-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:34px 0}.feature-stats>div{border-right:2px solid #e9dcc4;padding-right:13px}.feature-stats strong{display:block;color:#173957;font-size:26px}.feature-stats span{font-size:11px;color:#8496a9}.feature-note{background:#fff9ed;color:#8a693d;border:1px solid #f1e5d2;padding:13px 16px;border-radius:11px;font-size:12px;line-height:2;display:flex;gap:10px;align-items:center}.note-star{font-size:22px;color:#b8822d}.login-card,.filter-panel,.practice-panel,.metric{background:white;border:1px solid #e5ebf2;border-radius:18px}.login-card{padding:31px 32px;box-shadow:0 18px 65px #1c436012}.card-heading h2{font-size:22px;margin:0;color:#163550}.card-heading p{font-size:12px;color:#8a9aaa;margin:6px 0 24px}.tabbar{background:#f2f5f9;border-radius:10px;display:flex;padding:4px;gap:5px}.tabbar button{border:0;background:transparent;color:#7890a3;flex:1;border-radius:8px;padding:10px;font-size:12px;font-weight:700}.tabbar .active{background:white;box-shadow:0 2px 8px #253c5114;color:#1b3c58}.field{display:flex;flex-direction:column;gap:8px;margin:20px 0}.field label{font-size:12px;font-weight:800;color:#354d65}.field input,.field select,.field textarea{width:100%;border:1px solid #dce5ee;border-radius:10px;background:#fbfcff;color:#193751;padding:12px 13px;outline:none;min-height:46px}.field input:focus,.field select:focus,.field textarea:focus,.answer-text:focus{border-color:#be9f69;box-shadow:0 0 0 3px #d2ad7030}.field input::placeholder,.answer-text::placeholder{color:#a6b3c1}.consent{color:#687c91;line-height:2;font-size:11px;margin:15px 0}.consent label{display:flex;align-items:flex-start;gap:9px}.consent input{margin-top:8px;accent-color:#204966}.btn{border:0;padding:11px 19px;border-radius:10px;font-size:12px;font-weight:800;min-height:45px;display:inline-flex;align-items:center;justify-content:center;gap:8px}.btn.primary{background:#123453;color:white}.btn.primary:hover:not(:disabled){background:#1a4b74}.btn.ghost{background:#f3f6f9;color:#5e7185}.btn.wide{width:100%}.login-card .btn{margin-top:19px}.card-foot{color:#97a6b4;font-size:10px;line-height:2;text-align:center;margin:18px 0 0}.message{border-radius:10px;padding:11px;font-size:12px;line-height:1.9}.message.error{background:#fff0f1;color:#aa3642}.message.hint{background:#f4f7fb;color:#617d94}.app-heading{display:flex;justify-content:space-between;align-items:center;padding:49px 0 22px;gap:20px}.app-heading h1{font-size:31px;margin:7px 0;color:#173551}.app-heading p{margin:0;color:#8598a8;font-size:12px;line-height:2}.pill{background:#fff;border:1px solid #dce7ef;color:#5d8097;border-radius:50px;padding:8px 14px;font-size:11px;font-weight:800}.summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.metric{padding:19px 24px}.metric>span{display:block;color:#879aaa;font-size:11px;font-weight:700}.metric strong{display:block;color:#163755;font-size:27px;line-height:1.7}.metric small{display:block;color:#a1afbc;font-size:10px}.metric.featured{background:#fff9ef;border-color:#f0e3cd}.metric.featured strong{color:#a77b34}.work-area{display:grid;grid-template-columns:310px 1fr;gap:20px;margin:25px 0 65px;align-items:start}.filter-panel{padding:25px}.filter-panel h2{font-size:19px;margin:0 0 3px}.filter-panel>p{margin:0;color:#91a2b2;font-size:11px}.filter-panel .field{margin:18px 0}.type-actions{display:flex;justify-content:space-between}.text-action{font-size:10px;border:0;background:none;padding:0;color:#47759a;font-weight:700}.type-list{max-height:240px;overflow:auto;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:4px 0}.type-choice{display:flex;align-items:center;gap:6px;font-size:10px;background:#f7f9fc;border:1px solid #edf0f5;border-radius:8px;padding:8px}.type-choice input,.featured-toggle input{accent-color:#174468}.field-help{color:#a1b0bd;font-size:10px}.featured-toggle{display:flex;align-items:center;gap:10px;background:#fff9ef;padding:11px;border-radius:10px;border:1px solid #f2e5cd;margin:15px 0}.featured-toggle b{font-size:11px;display:block}.featured-toggle small{color:#a78f6d;display:block;font-size:10px}.practice-panel{min-height:500px;padding:30px}.empty-state{text-align:center;padding:96px 20px}.empty-icon{height:66px;width:66px;background:#edf4f9;border-radius:18px;display:grid;place-items:center;font-size:41px;color:#2a5b7c;margin:0 auto 20px}.empty-state h2{font-size:24px;margin:0 0 6px}.empty-state p{font-size:13px;line-height:2;color:#8497a6}.mini-tags{display:flex;justify-content:center;gap:7px;flex-wrap:wrap;margin-top:18px}.mini-tags span{font-size:10px;border:1px solid #e4eaf0;border-radius:50px;padding:6px 11px;color:#8a9cab}.question-head{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:800;color:#315773;gap:10px}.question-head .muted{font-size:10px;color:#8d9eac;display:block;font-weight:500}.priority-label{background:#fff6e6;color:#a77a37;border-radius:50px;padding:5px 12px;font-size:10px}.progress-track{background:#e9eff4;height:7px;border-radius:20px;margin:20px 0 27px;overflow:hidden}.progress-track div{background:#c7a262;height:100%;width:0;transition:width .2s}.question-card{background:#fff}.type-label{background:#eef4f8;color:#336684;border-radius:40px;padding:6px 13px;font-size:11px;font-weight:800}.question-card h2{font-size:20px;line-height:2.1;white-space:pre-line;margin:23px 0 25px;color:#173955}.choice-label{display:flex;align-items:center;gap:12px;border:1px solid #e1e9f0;border-radius:10px;padding:13px;margin:9px 0;line-height:1.9;font-size:13px;cursor:pointer}.choice-label:has(input:checked){border-color:#bca477;background:#fffbf3}.choice-label input{accent-color:#24567a}.answer-text{width:100%;border:1px solid #dce5ed;min-height:135px;padding:13px;border-radius:12px;line-height:2.1;color:#1e3e57;outline:none;resize:vertical}.write-hint{font-size:11px;color:#8fa2b1;line-height:2;margin-top:8px}.question-actions{display:flex;justify-content:space-between;border-top:1px solid #edf1f4;margin-top:25px;padding-top:20px}.feedback{margin-top:20px;padding:20px;border-radius:13px;background:#f0f8f4;border:1px solid #d5eade}.feedback.wrong{background:#fff7f5;border-color:#f3dfd8}.feedback.review{background:#fffaf0;border-color:#f0e6d2}.feedback>strong{font-size:14px;color:#276747}.feedback.wrong>strong{color:#ad5644}.feedback.review>strong{color:#aa7c38}.feedback p{font-size:12px;line-height:2;color:#5d7587}.reference{border-top:1px solid #d9e4df;padding-top:13px;margin-top:15px}.reference span{font-size:11px;color:#778b99;font-weight:800}.reference p{font-size:13px;font-weight:700;color:#234b62;white-space:pre-line}.finish{text-align:center;padding:60px 0}.finish-icon{background:#e7f6ee;color:#309669;border-radius:50%;height:65px;width:65px;display:grid;place-items:center;font-size:29px;margin:0 auto 18px}.finish h2{font-size:23px}.finish>p{font-size:12px;color:#8495a3}.finish-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin:24px 0}.finish-stats>div{background:#f5f8fa;padding:16px;border-radius:10px}.finish-stats b{display:block;font-size:24px}.finish-stats span{display:block;font-size:11px;color:#8097a8}footer{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #e5ebf2;color:#9bacb8;padding:22px 0;font-size:10px}
@media(max-width:980px){.layout{padding:0 20px}.hero{gap:30px}.work-area{grid-template-columns:265px 1fr}.practice-panel{padding:22px}.summary-grid{gap:10px}.metric{padding:16px}}
@media(max-width:760px){.top-caption{display:none}.hero{grid-template-columns:1fr;padding:45px 0}.hero h1{font-size:32px}.work-area{grid-template-columns:1fr}.type-list{max-height:none}.summary-grid{grid-template-columns:repeat(2,1fr)}.app-heading{flex-wrap:wrap}.empty-state{padding:50px 5px}}
@media(max-width:480px){.topbar{height:78px}.brand strong{font-size:13px}.brand small{font-size:9px}.hero{padding:33px 0}.hero h1{font-size:27px}.login-card{padding:22px}.summary-grid{gap:9px}.metric{padding:13px}.metric strong{font-size:22px}.filter-panel{padding:20px}.question-card h2{font-size:18px}.practice-panel{padding:18px}.question-actions{gap:7px}.btn{padding:9px 13px}.feature-stats{gap:8px}.feature-stats strong{font-size:22px}footer{flex-direction:column;gap:5px}}


/* ======================================================
   UI refresh — responsive filters, statistics and practice
   Safe to append to the END of the original style.css.
   ====================================================== */
:root { --ui-navy: #123657; --ui-line: #e4eaf2; --ui-muted: #73889c; }
.layout { width: 100%; }
.work-area { grid-template-columns: minmax(300px,350px) minmax(0,1fr); }
.filter-panel, .practice-panel, .metric { box-shadow: 0 3px 16px rgba(15,44,72,.025); }
.type-picker { margin: 18px 0 12px; border: 1px solid var(--ui-line); border-radius: 12px; background: #fcfdff; }
.type-picker summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; font-size: 13px; font-weight: 800; color: #28465e; }
.type-picker summary::-webkit-details-marker { display: none; }
.type-picker summary:focus-visible { outline: 3px solid #b5d3ef; outline-offset: 3px; border-radius: 12px; }
.type-picker summary small { display: block; font-size: 11px; font-weight: 500; color: #8295a8; margin-top: 2px; }
.type-picker-arrow { color: #6d8699; font-size: 22px; line-height: 1; transition: transform .18s; }
.type-picker[open] .type-picker-arrow { transform: rotate(180deg); }
.type-picker-body { padding: 0 10px 12px; border-top: 1px solid #edf1f5; }
.type-actions { display: flex; gap: 15px; padding: 12px 3px 8px; }
.type-actions .text-action { font-size: 12px; }
.type-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; max-height: 310px; padding: 3px; overflow-y: auto; scrollbar-width: thin; }
.type-choice { min-width: 0; min-height: 62px; display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; border: 1px solid #e6ebf2; background: #fff; font-size: 13px; font-weight: 700; line-height: 1.5; cursor: pointer; }
.type-choice input[type="checkbox"], .featured-toggle input[type="checkbox"] { width: 18px; height: 18px; min-width: 18px; flex: 0 0 18px; margin: 0; accent-color: #154566; cursor: pointer; }
.type-copy { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 2px; }
.type-name { overflow-wrap: anywhere; color: #183b56; }
.type-count { color: #8a9dad; font-size: 11px; font-weight: 500; }
.type-choice:has(input:checked) { border-color: #8facca; background: #f0f6fc; }
.type-picker .field-help { display: block; margin: 9px 3px 0; font-size: 11px; line-height: 1.7; }
.featured-toggle { min-height: 66px; padding: 12px 14px; gap: 12px; }
.featured-toggle b { font-size: 13px; }
.featured-toggle small { font-size: 11px; }

@media (max-width: 760px) {
  .layout { padding-inline: 14px; }
  .topbar { height: 70px; gap: 10px; }
  .brand { gap: 8px; min-width: 0; }
  .symbol { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 10px; }
  .brand strong { font-size: 14px; white-space: nowrap; }
  .brand small { font-size: 9px; }
  .top-right { gap: 8px; }
  #loggedHeader { gap: 9px; }
  #helloName { display: inline-block; max-width: 75px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .top-right .link { padding: 4px; font-size: 12px; }
  .app-heading { display: block; padding: 27px 2px 17px; }
  .app-heading .eyebrow { font-size: 12px; }
  .app-heading h1 { font-size: clamp(23px, 6vw, 28px); line-height: 1.45; margin: 9px 0; }
  .app-heading p { font-size: 12px; line-height: 1.8; }
  .app-heading .pill { display: inline-flex; margin-top: 14px; font-size: 11px; max-width: 100%; }
  .summary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
  .metric { min-width: 0; min-height: 100px; border-radius: 14px; padding: 12px 14px; }
  .metric>span { font-size: 11px; }
  .metric strong { font-size: 24px; line-height: 1.55; }
  .metric small { font-size: 10px; line-height: 1.5; }
  .work-area { display: grid; grid-template-columns: minmax(0,1fr); gap: 14px; margin: 17px 0 30px; }
  .filter-panel { padding: 18px; border-radius: 18px; }
  .filter-panel h2 { font-size: 19px; }
  .filter-panel>p { font-size: 11px; }
  .filter-panel .field { margin: 15px 0; gap: 7px; }
  .field label { font-size: 13px; }
  .field input,.field select { min-height: 48px; font-size: 14px; padding: 9px 12px; }
  .type-picker { margin: 15px 0 13px; }
  .type-picker summary { min-height: 56px; padding: 11px 13px; font-size: 13px; }
  .type-list { grid-template-columns: repeat(2,minmax(0,1fr)); max-height: 340px; gap: 8px; }
  .type-choice { min-height: 57px; padding: 9px; gap: 8px; font-size: 12px; }
  .type-name { font-size: 12px; }
  .type-count { font-size: 10px; }
  .featured-toggle { margin: 16px 0; }
  .filter-panel #startBtn { min-height: 50px; font-size: 14px; }
  .practice-panel { min-height: 0; padding: 18px; border-radius: 18px; scroll-margin-top: 12px; }
  .empty-state { padding: 23px 6px 19px; }
  .empty-icon { width: 50px; height: 50px; border-radius: 14px; font-size: 30px; margin-bottom: 13px; }
  .empty-state h2 { font-size: 20px; margin-bottom: 4px; }
  .empty-state p { font-size: 12px; line-height: 1.8; margin: 6px auto; max-width: 300px; }
  .mini-tags { gap: 6px; margin-top: 10px; }
  .mini-tags span { font-size: 10px; padding: 4px 8px; }
  .question-card h2 { font-size: 18px; line-height: 1.9; }
  .question-actions { gap: 10px; }
  .btn { font-size: 13px; }
  footer { padding: 16px 0; line-height: 1.8; }
}
@media (max-width: 380px) {
  .layout { padding-inline: 10px; }
  .filter-panel { padding: 14px; }
  .brand small { display: none; }
  .type-list { gap: 6px; }
  .type-choice { gap: 6px; padding: 8px 7px; }
  .type-choice input[type="checkbox"] { width: 16px; height: 16px; min-width: 16px; flex-basis: 16px; }
  .metric { padding: 11px; }
}