/* Fixed71 — JClass common UI system */
:root{
  --jc-red:#ef3f43;
  --jc-red-strong:#d92f35;
  --jc-red-soft:rgba(239,63,67,.11);
  --jc-ink:#101319;
  --jc-surface:#ffffff;
  --jc-surface-2:#f7f8fa;
  --jc-border:#dde2e8;
  --jc-muted:#687180;
  --jc-radius-xs:8px;
  --jc-radius-sm:11px;
  --jc-radius-md:15px;
  --jc-radius-lg:22px;
  --jc-shadow-sm:0 6px 18px rgba(15,23,42,.07);
  --jc-shadow-md:0 16px 42px rgba(15,23,42,.11);
  --jc-focus:0 0 0 3px rgba(239,63,67,.16);
}
html[data-theme="dark"]{
  --jc-surface:#111722;
  --jc-surface-2:#0c111a;
  --jc-border:#2a3342;
  --jc-muted:#9aa5b4;
  --jc-shadow-sm:0 7px 20px rgba(0,0,0,.22);
  --jc-shadow-md:0 20px 50px rgba(0,0,0,.34);
}

/* Typography */
body,button,input,select,textarea{
  font-family:Inter,Pretendard,"Apple SD Gothic Neo","Noto Sans KR",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
}
body{letter-spacing:-.01em}
h1,h2,h3,strong,.panel-titlebar,.topbar{letter-spacing:-.025em}

/* Universal controls */
button,input,select,textarea{transition:border-color .16s ease,background .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease,opacity .16s ease}
button{font-weight:750!important}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none!important;box-shadow:var(--jc-focus)!important;border-color:var(--jc-red)!important}
button:disabled{opacity:.48!important;cursor:not-allowed!important;transform:none!important}
input,select,textarea{
  border:1px solid var(--jc-border)!important;
  border-radius:var(--jc-radius-sm)!important;
  background:var(--jc-surface)!important;
  color:var(--text)!important;
}
input:hover,select:hover,textarea:hover{border-color:color-mix(in srgb,var(--jc-border) 55%,var(--jc-red))!important}
input:focus,select:focus,textarea:focus{border-color:var(--jc-red)!important;box-shadow:var(--jc-focus)!important}

/* Buttons */
.primary,.ghost,.mini-btn,.format-code-btn,.mode-tab,.editor-view-tab,.tabs button,.board-toolbar button{
  border-radius:var(--jc-radius-sm)!important;
}
.primary{
  border:1px solid transparent!important;
  color:#fff!important;
  background:linear-gradient(135deg,#f15054,#df3037)!important;
  box-shadow:0 9px 20px rgba(239,63,67,.20)!important;
}
.primary:hover{box-shadow:0 12px 26px rgba(239,63,67,.28)!important;transform:translateY(-1px)!important}
.primary:active{transform:translateY(0)!important;box-shadow:0 5px 12px rgba(239,63,67,.18)!important}
.ghost,.mini-btn,.format-code-btn{
  border:1px solid var(--jc-border)!important;
  background:color-mix(in srgb,var(--jc-surface) 92%,transparent)!important;
  color:var(--text)!important;
  box-shadow:none!important;
}
.ghost:hover,.mini-btn:hover,.format-code-btn:hover{
  border-color:color-mix(in srgb,var(--jc-red) 56%,var(--jc-border))!important;
  background:var(--jc-red-soft)!important;
  color:var(--jc-red)!important;
  transform:translateY(-1px);
}
.ghost.danger,.mini-btn.danger{color:#d83c43!important;border-color:rgba(216,60,67,.32)!important;background:rgba(216,60,67,.06)!important}
.ghost.danger:hover,.mini-btn.danger:hover{color:#fff!important;background:#d83c43!important;border-color:#d83c43!important}

/* App header */
.topbar{
  min-height:70px!important;
  padding:12px 18px!important;
  border-bottom:1px solid var(--jc-border)!important;
  background:color-mix(in srgb,var(--jc-surface) 94%,transparent)!important;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:0 7px 24px rgba(15,23,42,.045)!important;
}
.topbar .brand{gap:12px!important;min-width:max-content}
.topbar .brand strong{font-weight:900!important}
.user-progress{
  border:1px solid var(--jc-border)!important;
  background:var(--jc-surface-2)!important;
  border-radius:999px!important;
  padding:6px 10px!important;
  color:var(--jc-muted)!important;
  font-size:12px!important;
  font-weight:750!important;
}
.room-tools{gap:7px!important}
.room-tools>button{min-height:39px!important;padding:8px 12px!important;font-size:13px!important}
#runBtn{padding-inline:18px!important}
.notification-badge{
  min-width:19px!important;height:19px!important;padding:0 5px!important;
  border:2px solid var(--jc-surface)!important;
  background:var(--jc-red)!important;color:#fff!important;
  font-size:10px!important;line-height:15px!important;font-weight:900!important;
}

/* Panels and workspace */
.workspace{gap:12px!important;padding:12px!important;background:var(--bg)!important}
.panel{
  border:1px solid var(--jc-border)!important;
  border-radius:var(--jc-radius-md)!important;
  background:var(--jc-surface)!important;
  box-shadow:var(--jc-shadow-sm)!important;
  overflow:hidden;
}
.panel-titlebar{
  min-height:49px!important;
  padding:10px 14px!important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--jc-surface) 98%,white 2%),var(--jc-surface-2))!important;
  border-bottom:1px solid var(--jc-border)!important;
}
html[data-theme="dark"] .panel-titlebar{background:linear-gradient(180deg,#141b27,#101620)!important}
.panel-titlebar strong{font-size:14px!important;font-weight:850!important}
.count{
  min-width:24px!important;height:24px!important;padding:0 7px!important;
  display:inline-grid!important;place-items:center!important;
  border-radius:999px!important;background:var(--jc-ink)!important;color:#fff!important;
  font-size:11px!important;font-weight:900!important;
}
html[data-theme="dark"] .count{background:#fff!important;color:#111827!important}

/* Tabs */
.editor-view-tabs,.tabs,.mode-tabs{
  padding:4px!important;
  gap:4px!important;
  border:1px solid var(--jc-border)!important;
  border-radius:var(--jc-radius-md)!important;
  background:var(--jc-surface-2)!important;
}
.editor-view-tabs{margin:10px 10px 0!important;width:max-content}
.editor-view-tab,.tabs button,.mode-tab{
  border:0!important;
  background:transparent!important;
  color:var(--jc-muted)!important;
  min-height:34px!important;
  padding:7px 13px!important;
  font-size:13px!important;
  font-weight:800!important;
}
.editor-view-tab.active,.tabs button.active,.mode-tab.active{
  color:var(--text)!important;
  background:var(--jc-surface)!important;
  box-shadow:0 3px 12px rgba(15,23,42,.08)!important;
}
html[data-theme="dark"] .editor-view-tab.active,html[data-theme="dark"] .tabs button.active,html[data-theme="dark"] .mode-tab.active{background:#202938!important}

/* Editor toolbars */
.editor-meta,.problem-code-toolbar{gap:7px!important;align-items:center!important}
.format-code-btn{min-height:30px!important;padding:6px 9px!important;font-size:12px!important}
#languageSelect{
  min-height:31px!important;padding:5px 30px 5px 10px!important;
  border-radius:9px!important;font-size:12px!important;font-weight:800!important;
  background-color:var(--jc-surface-2)!important;
}
.execution-badge,.problem-status{
  border-radius:999px!important;
  padding:5px 9px!important;
  border:1px solid var(--jc-border)!important;
  background:var(--jc-surface-2)!important;
  font-size:11px!important;font-weight:850!important;
}

/* Side lists */
.member-list,.problem-list,.syntax-results,.f29-list{padding:8px!important}
.member-item,.problem-item,.syntax-item,.f29-list>*,.message-card,.announcement-card{
  border-radius:var(--jc-radius-sm)!important;
  border:1px solid transparent!important;
}
.member-item:hover,.problem-item:hover,.syntax-item:hover{
  background:var(--jc-red-soft)!important;
  border-color:rgba(239,63,67,.18)!important;
}
.problem-item.active,.syntax-item.active{
  background:var(--jc-red-soft)!important;
  border-color:rgba(239,63,67,.32)!important;
  color:var(--jc-red)!important;
}

/* Problem area */
.problem-layout{gap:0!important}
.problem-sidebar{border-right:1px solid var(--jc-border)!important;background:var(--jc-surface-2)!important}
.problem-sidebar-head{min-height:52px!important;padding:10px 12px!important;border-bottom:1px solid var(--jc-border)!important}
.problem-main{padding:18px!important}
.problem-head h2{font-size:22px!important;font-weight:900!important}
.problem-description,.problem-io>div{
  border:1px solid var(--jc-border)!important;
  border-radius:var(--jc-radius-md)!important;
  background:var(--jc-surface-2)!important;
}
.problem-submit-row{border-top:1px solid var(--jc-border)!important;padding-top:13px!important}

/* I/O and chat */
.io-panel .tabs{margin:10px!important;width:calc(100% - 20px)}
.io-body,.chat-body{background:var(--jc-surface)!important}
#outputArea,#stdinInput,.chat-messages{
  border-radius:var(--jc-radius-sm)!important;
}
.chat-input-row{padding:10px!important;border-top:1px solid var(--jc-border)!important;background:var(--jc-surface-2)!important}
.chat-input-row input{min-height:39px!important}
.chat-input-row button{min-height:39px!important}

/* Modals */
.modal{background:rgba(4,8,15,.58)!important;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.modal-card{
  border:1px solid var(--jc-border)!important;
  border-radius:var(--jc-radius-lg)!important;
  background:var(--jc-surface)!important;
  box-shadow:0 30px 90px rgba(0,0,0,.28)!important;
}
.modal-card h2{font-size:22px!important;font-weight:900!important;margin-bottom:6px!important}
.modal-close{
  width:36px!important;height:36px!important;border-radius:10px!important;
  border:1px solid var(--jc-border)!important;background:var(--jc-surface-2)!important;color:var(--jc-muted)!important;
}
.modal-close:hover{background:var(--jc-red-soft)!important;color:var(--jc-red)!important;border-color:rgba(239,63,67,.28)!important}
.f29-sub{color:var(--jc-muted)!important}

/* Cards */
.engine-status-card,.learning-card,.communication-card,.f29-summary,.f29-score{
  border:1px solid var(--jc-border)!important;
  border-radius:var(--jc-radius-md)!important;
  background:var(--jc-surface-2)!important;
  box-shadow:none!important;
}

/* Landing form polish */
.join-card label{font-size:12px!important;font-weight:800!important;color:var(--jc-muted)!important}
.join-card input,.join-card select{min-height:45px!important;padding:10px 12px!important;font-size:14px!important}
.join-card .primary{min-height:46px!important;font-size:14px!important}
.join-card h2{font-weight:900!important}
.admin-rooms-head{border-bottom:1px solid var(--jc-border)!important;padding-bottom:10px!important}

/* Board */
.board-toolbar{
  border-bottom:1px solid var(--jc-border)!important;
  background:var(--jc-surface-2)!important;
}
.board-toolbar button.active{
  color:#fff!important;background:var(--jc-red)!important;border-color:var(--jc-red)!important;
  box-shadow:0 7px 16px rgba(239,63,67,.24)!important;
}
.board-canvas-wrap{background:repeating-conic-gradient(color-mix(in srgb,var(--jc-border) 42%,transparent) 0 25%,transparent 0 50%) 50%/20px 20px!important}

/* Scrollbars */
*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--jc-muted) 55%,transparent) transparent}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--jc-muted) 48%,transparent);border:2px solid transparent;background-clip:padding-box;border-radius:999px}
*::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--jc-muted) 68%,transparent);border:2px solid transparent;background-clip:padding-box}

/* Responsive */
@media(max-width:1180px){
  .room-tools>button{padding:7px 9px!important;font-size:12px!important}
  .topbar{padding:10px 12px!important}
  .user-progress{display:none!important}
}
@media(max-width:760px){
  .workspace{padding:7px!important;gap:7px!important}
  .panel{border-radius:12px!important;box-shadow:none!important}
  .topbar{min-height:58px!important}
  .brand-j-logo{width:36px!important;height:36px!important;border-radius:10px!important}
  .topbar .brand strong{font-size:14px!important}
  .editor-view-tabs{margin:7px 7px 0!important}
  .panel-titlebar{padding:8px 10px!important;min-height:45px!important}
  .problem-main{padding:12px!important}
  .modal-card{border-radius:18px!important}
}