/* Product-UI recreation styles — mirrors the online-exam-portal look
   (Tailwind slate palette + Ant Design defaults: blue #1677ff primary,
   rounded-xl white cards, 1px slate-200 borders, shadow-sm) */

.pui { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: #0f172a; font-size: calc(14px + 2pt); line-height: 1.5; text-align: left; }
.pui *, .pui *::before, .pui *::after { box-sizing: border-box; }

/* scale-to-fit frame */
.pui-frame { width: 100%; height: 100%; overflow: hidden; background: #f1f5f9; border-radius: inherit; }
.pui-stage { transform-origin: top left; }

.pui-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }

/* header rows */
.pui-h1 { margin: 0; font-size: calc(20px + 2pt); font-weight: 600; color: #0f172a; }
.pui-h1.lg { font-size: calc(24px + 2pt); font-weight: 700; letter-spacing: -0.01em; }
.pui-sub { margin: 2px 0 0; font-size: calc(13px + 2pt); color: #64748b; }

/* buttons (AntD-like) */
.pui-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: 6px; border: 1px solid #d9d9d9; background: #fff; color: #0f172a; font-size: calc(13px + 2pt); font-weight: 500; cursor: pointer; white-space: nowrap; transition: all .15s; }
.pui-btn:hover { border-color: #1677ff; color: #1677ff; }
.pui-btn.primary { background: #1677ff; border-color: #1677ff; color: #fff; }
.pui-btn.primary:hover { background: #4096ff; color: #fff; }
.pui-btn.sm { height: 26px; padding: 0 9px; font-size: calc(12px + 2pt); }
.pui-btn.full { width: 100%; justify-content: center; }
.pui-btn:disabled { opacity: .55; cursor: default; }

/* inputs */
.pui-input, .pui-select { height: 36px; padding: 0 11px; border: 1px solid #d9d9d9; border-radius: 8px; background: #fff; font-size: calc(13px + 2pt); color: #0f172a; display: inline-flex; align-items: center; gap: 8px; }
.pui-input .ph { color: #94a3b8; }

/* tags / badges */
.pui-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 4px; font-size: calc(12px + 2pt); font-weight: 500; white-space: nowrap; }
.pui-tag.blue { background: #dbeafe; color: #1d4ed8; }
.pui-tag.indigo { background: #e0e7ff; color: #4338ca; }
.pui-tag.green { background: #dcfce7; color: #15803d; }
.pui-tag.amber { background: #fef3c7; color: #b45309; }
.pui-tag.purple { background: #f3e8ff; color: #7e22ce; }
.pui-tag.cyan { background: #cffafe; color: #0e7490; }
.pui-tag.red { background: #fee2e2; color: #b91c1c; }
.pui-tag.slate { background: #f1f5f9; color: #475569; }

/* tables */
.pui-table { width: 100%; border-collapse: collapse; font-size: calc(13px + 2pt); }
.pui-table th { text-align: left; padding: 10px 14px; background: #f8fafc; color: #475569; font-weight: 600; font-size: calc(12px + 2pt); border-bottom: 1px solid #e2e8f0; white-space: nowrap; }
.pui-table td { padding: 10px 14px; border-bottom: 1px solid #f1f5f9; color: #334155; vertical-align: middle; }
.pui-table tr:hover td { background: #f8fafc; }
.pui-mono { font-family: "Roboto Mono", ui-monospace, monospace; font-size: calc(12px + 2pt); color: #64748b; }

/* stat cards */
.pui-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.pui-stat { padding: 16px; display: flex; align-items: center; gap: 12px; }
.pui-stat .ic { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pui-stat .num { font-size: calc(22px + 2pt); font-weight: 700; color: #0f172a; line-height: 1.1; }
.pui-stat .lbl { font-size: calc(12px + 2pt); color: #64748b; }

/* progress (AntD-like) */
.pui-progress { height: 8px; border-radius: 99px; background: #f1f5f9; overflow: hidden; }
.pui-progress > div { height: 100%; border-radius: 99px; background: #1677ff; transition: width .3s; }

/* exam layout */
.pui-exam { display: grid; grid-template-columns: 1fr 250px; gap: 14px; align-items: start; }
.pui-qnav { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.pui-qbtn { height: 26px; border-radius: 6px; border: 1px solid #d9d9d9; background: #fff; font-size: calc(12px + 2pt); font-weight: 500; color: #0f172a; cursor: pointer; }
.pui-qbtn.answered { border-color: #22c55e; color: #16a34a; }
.pui-qbtn.active { background: #1677ff; border-color: #1677ff; color: #fff; }
.pui-timerbox { border: 1px solid #fecaca; background: #fef2f2; border-radius: 8px; padding: 8px 12px; text-align: center; }
.pui-timerbox .t { font-size: calc(22px + 2pt); font-weight: 700; color: #0f172a; font-variant-numeric: tabular-nums; }
.pui-timerbox .t.warn { color: #dc2626; }
.pui-timerbox .c { font-size: calc(11px + 2pt); color: #64748b; }

/* answer options */
.pui-opt { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 8px; cursor: pointer; transition: all .15s; background: #fff; }
.pui-opt:hover { border-color: #91caff; background: #f0f7ff; }
.pui-opt.sel { border-color: #1677ff; background: #e6f4ff; }
.pui-opt .radio { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #cbd5e1; flex-shrink: 0; position: relative; }
.pui-opt > span:last-child { flex: 1; min-width: 0; }
.pui-opt.sel .radio { border-color: #1677ff; }
.pui-opt.sel .radio::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #1677ff; }

/* autosave pill */
.pui-saved { display: inline-flex; align-items: center; gap: 6px; font-size: calc(12px + 2pt); color: #16a34a; }
.pui-saved .dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; animation: pui-pulse 2s infinite; }
@keyframes pui-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* mini bar chart */
.pui-bars { display: flex; align-items: flex-end; gap: 8px; height: 110px; padding-top: 8px; }
.pui-bars .bar { flex: 1; background: #1677ff; border-radius: 4px 4px 0 0; min-height: 4px; }
.pui-bars .bar.lite { background: #bfdbfe; }
.pui-axis { display: flex; gap: 8px; font-size: calc(10px + 2pt); color: #94a3b8; }
.pui-axis span { flex: 1; text-align: center; }

/* status pipeline */
.pui-caption { font-size: calc(12px + 2pt); color: #64748b; }