/* goomuse design system — component classes (extracted from jsx, no React needed) */

/* ===== base.css ===== */
/* ============================================================
   goomuse — Base reset & element defaults
   Light-touch: sets the brand font + text color globally.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, p, figure { margin: 0; }

a { color: inherit; text-decoration: none; }

button, input, textarea, select { font: inherit; color: inherit; }

img, svg, video { display: block; max-width: 100%; }

::selection { background: var(--brand-100); color: var(--brand-900); }

:focus-visible {
  outline: none;
  box-shadow: var(--shadow-ring);
  border-radius: var(--radius-sm);
}

/* Utility: page container */
.gm-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}


/* ===== core/Avatar ===== */
.gm-avatar{display:inline-flex;align-items:center;justify-content:center;flex:none;
  border-radius:50%;overflow:hidden;font-family:var(--font-sans);font-weight:600;
  background:var(--brand-100);color:var(--brand-700);user-select:none;}
.gm-avatar img{width:100%;height:100%;object-fit:cover;}
.gm-avatar--sm{width:28px;height:28px;font-size:11px;}
.gm-avatar--md{width:40px;height:40px;font-size:15px;}
.gm-avatar--lg{width:56px;height:56px;font-size:20px;}
.gm-avatar--square{border-radius:var(--radius-md);}
.gm-avatar--teacher{background:var(--info-bg);color:var(--info);}

/* ===== core/Badge ===== */
.gm-badge{
  display:inline-flex;align-items:center;gap:5px;font-family:var(--font-sans);
  font-size:12px;font-weight:600;line-height:1;padding:5px 10px;border-radius:var(--radius-pill);
  white-space:nowrap;
}
.gm-badge--dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;}
.gm-badge--brand{background:var(--brand-50);color:var(--brand-700);}
.gm-badge--neutral{background:var(--ink-100);color:var(--ink-700);}
.gm-badge--success{background:var(--brand-50);color:var(--brand-700);}
.gm-badge--warning{background:var(--warning-bg);color:var(--warning);}
.gm-badge--error{background:var(--error-bg);color:var(--error);}
.gm-badge--info{background:var(--info-bg);color:var(--info);}
.gm-badge--solid{background:var(--brand-500);color:#fff;}
.gm-badge--exam{background:var(--exam-50);color:var(--exam-700);}

/* ===== core/Button ===== */
.gm-btn{
  --_h: 44px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-sans);font-weight:600;font-size:15px;line-height:1;
  height:var(--_h);padding:0 22px;border:1px solid transparent;border-radius:var(--radius-md);
  cursor:pointer;white-space:nowrap;user-select:none;text-decoration:none;
  transition:background var(--dur-fast) var(--ease-out),
             transform var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out);
}
.gm-btn:active{transform:scale(0.97);}
.gm-btn:focus-visible{outline:none;box-shadow:var(--shadow-ring);}
.gm-btn[disabled]{opacity:.4;cursor:not-allowed;transform:none;}
.gm-btn--pill{border-radius:var(--radius-pill);}
.gm-btn--block{width:100%;}

/* sizes */
.gm-btn--sm{--_h:34px;font-size:13px;padding:0 16px;}
.gm-btn--lg{--_h:54px;font-size:17px;padding:0 30px;}

/* primary — jade */
.gm-btn--primary{background:var(--brand-500);color:#fff;}
.gm-btn--primary:hover:not([disabled]){background:var(--brand-600);}
.gm-btn--primary:active:not([disabled]){background:var(--brand-700);}

/* secondary — soft gray, Apple style */
.gm-btn--secondary{background:var(--ink-100);color:var(--ink-900);}
.gm-btn--secondary:hover:not([disabled]){background:var(--ink-200);}

/* ghost — text + jade */
.gm-btn--ghost{background:transparent;color:var(--brand-600);padding-inline:14px;}
.gm-btn--ghost:hover:not([disabled]){background:var(--brand-50);}

/* outline */
.gm-btn--outline{background:transparent;color:var(--ink-900);border-color:var(--ink-300);}
.gm-btn--outline:hover:not([disabled]){border-color:var(--ink-400);background:var(--ink-50);}

/* link — inline, Apple blue-style but jade */
.gm-btn--link{background:transparent;color:var(--brand-600);height:auto;padding:0;font-weight:600;}
.gm-btn--link:hover:not([disabled]){text-decoration:underline;}

/* danger */
.gm-btn--danger{background:var(--error);color:#fff;}
.gm-btn--danger:hover:not([disabled]){background:#b8000f;}

/* ===== core/Card ===== */
.gm-card{
  background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-card);
  font-family:var(--font-sans);color:var(--ink-900);overflow:hidden;
  transition:box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.gm-card--pad{padding:24px;}
.gm-card--interactive{cursor:pointer;}
.gm-card--interactive:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px);}
.gm-card--flat{box-shadow:none;}
.gm-card--inset{background:var(--surface-inset);box-shadow:none;border-color:var(--border-subtle);}

/* ===== core/Checkbox ===== */
.gm-check{display:inline-flex;align-items:flex-start;gap:10px;cursor:pointer;font-family:var(--font-sans);font-size:14px;line-height:1.4;color:var(--ink-900);}
.gm-check input{position:absolute;opacity:0;width:0;height:0;}
.gm-check__box{
  width:20px;height:20px;border-radius:6px;border:1.5px solid var(--ink-300);background:#fff;flex:none;
  display:flex;align-items:center;justify-content:center;margin-top:1px;
  transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out);
}
.gm-check__box svg{width:13px;height:13px;stroke:#fff;stroke-width:3;fill:none;opacity:0;transition:opacity var(--dur-fast);}
.gm-check input:checked + .gm-check__box{background:var(--brand-500);border-color:var(--brand-500);}
.gm-check input:checked + .gm-check__box svg{opacity:1;}
.gm-check--radio .gm-check__box{border-radius:50%;}
.gm-check--radio .gm-check__dot{width:9px;height:9px;border-radius:50%;background:#fff;opacity:0;transition:opacity var(--dur-fast);}
.gm-check--radio input:checked + .gm-check__box .gm-check__dot{opacity:1;}
.gm-check input:focus-visible + .gm-check__box{box-shadow:var(--shadow-ring);}
.gm-check input:disabled ~ *{opacity:.45;}

/* ===== core/Dialog ===== */
.gm-dialog__scrim{position:fixed;inset:0;background:rgba(0,0,0,.32);backdrop-filter:blur(2px);
  display:flex;align-items:center;justify-content:center;padding:24px;z-index:1000;
  animation:gm-fade var(--dur-base) var(--ease-out);}
.gm-dialog{background:#fff;border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);
  width:100%;max-width:480px;max-height:90vh;overflow:auto;font-family:var(--font-sans);
  animation:gm-pop var(--dur-base) var(--ease-spring);}
.gm-dialog__body{padding:28px;}
.gm-dialog__title{font-size:21px;font-weight:700;letter-spacing:-0.01em;color:var(--ink-900);margin:0 0 8px;}
.gm-dialog__desc{font-size:15px;line-height:1.55;color:var(--ink-500);margin:0;}
.gm-dialog__foot{display:flex;justify-content:flex-end;gap:10px;padding:0 28px 24px;}
@keyframes gm-fade{from{opacity:0}to{opacity:1}}
@keyframes gm-pop{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}

/* ===== core/IconButton ===== */
.gm-iconbtn{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:40px;height:40px;border-radius:var(--radius-md);border:1px solid transparent;
  background:transparent;color:var(--ink-700);cursor:pointer;
  transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out);
}
.gm-iconbtn:hover{background:var(--ink-100);color:var(--ink-900);}
.gm-iconbtn:active{transform:scale(0.94);}
.gm-iconbtn:focus-visible{outline:none;box-shadow:var(--shadow-ring);}
.gm-iconbtn[disabled]{opacity:.4;cursor:not-allowed;}
.gm-iconbtn--sm{width:32px;height:32px;border-radius:var(--radius-sm);}
.gm-iconbtn--lg{width:48px;height:48px;}
.gm-iconbtn--round{border-radius:var(--radius-pill);}
.gm-iconbtn--solid{background:var(--brand-500);color:#fff;}
.gm-iconbtn--solid:hover{background:var(--brand-600);}
.gm-iconbtn--outline{border-color:var(--ink-300);}
.gm-iconbtn--outline:hover{border-color:var(--ink-400);background:var(--ink-50);}
.gm-iconbtn svg,.gm-iconbtn i{width:20px;height:20px;}

/* ===== core/Input ===== */
.gm-field{display:flex;flex-direction:column;gap:7px;font-family:var(--font-sans);}
.gm-field__label{font-size:13px;font-weight:600;color:var(--ink-900);}
.gm-field__hint{font-size:12px;color:var(--ink-400);}
.gm-field__error{font-size:12px;color:var(--error);}
.gm-input{
  height:46px;padding:0 14px;font-size:15px;font-family:var(--font-sans);
  color:var(--ink-900);background:var(--white);
  border:1px solid var(--ink-300);border-radius:var(--radius-md);
  transition:border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  width:100%;
}
.gm-input::placeholder{color:var(--ink-400);}
.gm-input:hover{border-color:var(--ink-400);}
.gm-input:focus{outline:none;border-color:var(--brand-500);box-shadow:0 0 0 4px var(--focus-ring);}
.gm-input--invalid{border-color:var(--error);}
.gm-input--invalid:focus{box-shadow:0 0 0 4px color-mix(in srgb,var(--error) 30%,transparent);}
.gm-input[disabled]{background:var(--ink-100);color:var(--ink-400);cursor:not-allowed;}
.gm-input--ta{height:auto;padding:12px 14px;line-height:1.6;resize:vertical;min-height:96px;}

/* ===== core/ProgressBar ===== */
.gm-prog{font-family:var(--font-sans);}
.gm-prog__track{height:8px;border-radius:var(--radius-pill);background:var(--ink-200);overflow:hidden;}
.gm-prog__fill{height:100%;border-radius:var(--radius-pill);background:var(--brand-500);transition:width var(--dur-slow) var(--ease-out);}
.gm-prog--exam .gm-prog__track{border-radius:var(--radius-xs);background:var(--exam-100);}
.gm-prog--exam .gm-prog__fill{border-radius:var(--radius-xs);background:var(--exam-500);}
.gm-prog__row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;}
.gm-prog__label{font-size:13px;font-weight:600;color:var(--ink-900);}
.gm-prog__val{font-size:12px;font-family:var(--font-mono);color:var(--ink-500);}

/* ===== core/SegmentedControl ===== */
.gm-seg{display:inline-flex;background:var(--ink-100);border-radius:var(--radius-md);padding:3px;gap:2px;font-family:var(--font-sans);}
.gm-seg__item{
  appearance:none;border:0;background:transparent;cursor:pointer;
  font-size:14px;font-weight:600;color:var(--ink-500);
  padding:7px 16px;border-radius:9px;line-height:1;white-space:nowrap;
  transition:color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.gm-seg__item:hover{color:var(--ink-900);}
.gm-seg__item--on{background:#fff;color:var(--ink-900);box-shadow:var(--shadow-sm);}
.gm-seg--exam{background:var(--exam-50);border-radius:var(--radius-xs);padding:2px;}
.gm-seg--exam .gm-seg__item{border-radius:3px;}
.gm-seg--exam .gm-seg__item--on{background:var(--exam-500);color:#fff;box-shadow:none;}

/* ===== core/Select ===== */
.gm-select{position:relative;display:inline-flex;font-family:var(--font-sans);width:100%;}
.gm-select select{
  appearance:none;width:100%;height:46px;padding:0 40px 0 14px;font-size:15px;font-family:var(--font-sans);
  color:var(--ink-900);background:var(--white);border:1px solid var(--ink-300);border-radius:var(--radius-md);cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out);
}
.gm-select select:hover{border-color:var(--ink-400);}
.gm-select select:focus{outline:none;border-color:var(--brand-500);box-shadow:0 0 0 4px var(--focus-ring);}
.gm-select__chev{position:absolute;right:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--ink-400);width:16px;height:16px;}

/* ===== core/Switch ===== */
.gm-switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-family:var(--font-sans);font-size:14px;color:var(--ink-900);}
.gm-switch input{position:absolute;opacity:0;width:0;height:0;}
.gm-switch__track{
  width:46px;height:28px;border-radius:var(--radius-pill);background:var(--ink-300);
  position:relative;transition:background var(--dur-base) var(--ease-out);flex:none;
}
.gm-switch__thumb{
  position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;
  box-shadow:var(--shadow-sm);transition:transform var(--dur-base) var(--ease-spring);
}
.gm-switch input:checked + .gm-switch__track{background:var(--brand-500);}
.gm-switch input:checked + .gm-switch__track .gm-switch__thumb{transform:translateX(18px);}
.gm-switch input:focus-visible + .gm-switch__track{box-shadow:var(--shadow-ring);}
.gm-switch--off{opacity:.45;cursor:not-allowed;}

/* ===== core/Tabs ===== */
.gm-tabs{display:flex;gap:4px;border-bottom:1px solid var(--border-subtle);font-family:var(--font-sans);}
.gm-tabs__tab{
  appearance:none;background:none;border:0;cursor:pointer;position:relative;
  font-size:15px;font-weight:600;color:var(--ink-500);padding:12px 4px;margin:0 12px -1px 0;
  transition:color var(--dur-fast) var(--ease-out);
}
.gm-tabs__tab:first-child{margin-left:0;}
.gm-tabs__tab:hover{color:var(--ink-900);}
.gm-tabs__tab--on{color:var(--ink-900);}
.gm-tabs__tab--on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--brand-500);border-radius:2px;}
.gm-tabs__count{margin-left:6px;font-size:12px;color:var(--ink-400);font-weight:600;}

/* ===== exam/ChoiceOption ===== */
.gm-choice{
  display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;cursor:pointer;
  font-family:var(--font-sans);font-size:15px;line-height:1.5;color:var(--ink-900);
  padding:14px 16px;border:1px solid var(--ink-300);border-radius:var(--radius-xs);background:#fff;
  transition:border-color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out);
}
.gm-choice:hover{border-color:var(--exam-400);background:var(--exam-50);}
.gm-choice__mark{
  flex:none;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--ink-400);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:var(--ink-500);
  transition:all var(--dur-fast) var(--ease-out);
}
.gm-choice--on{border-color:var(--exam-500);background:var(--exam-50);box-shadow:inset 0 0 0 1px var(--exam-500);}
.gm-choice--on .gm-choice__mark{background:var(--exam-500);border-color:var(--exam-500);color:#fff;}
.gm-choice__body{padding-top:1px;}

/* ===== exam/ExamButton ===== */
.gm-exbtn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-sans);font-weight:700;font-size:15px;line-height:1;
  height:42px;padding:0 24px;border:1px solid transparent;border-radius:var(--radius-xs);
  cursor:pointer;white-space:nowrap;
  transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out);
}
.gm-exbtn:focus-visible{outline:2px solid var(--exam-700);outline-offset:2px;}
.gm-exbtn[disabled]{opacity:.45;cursor:not-allowed;}
.gm-exbtn--primary{background:var(--exam-500);color:#fff;}
.gm-exbtn--primary:hover:not([disabled]){background:var(--exam-600);}
.gm-exbtn--secondary{background:#fff;color:var(--exam-700);border-color:var(--exam-500);}
.gm-exbtn--secondary:hover:not([disabled]){background:var(--exam-50);}
.gm-exbtn--ghost{background:transparent;color:var(--ink-700);border-color:var(--ink-300);}
.gm-exbtn--ghost:hover:not([disabled]){background:var(--ink-100);}

/* ===== exam/ExamTimer ===== */
.gm-extimer{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--font-sans);
  background:var(--exam-700);color:#fff;border-radius:var(--radius-xs);padding:7px 14px;font-weight:600;font-size:14px;
}
.gm-extimer__clock{font-family:var(--font-mono);font-size:16px;letter-spacing:.02em;font-weight:500;}
.gm-extimer--low{background:var(--error);}
.gm-extimer svg{width:16px;height:16px;}