/* v5.4.3 ARCHITECT - settings residues migrated from app.css */
.access-login-form input{min-width:0;height:44px;padding:0 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface-soft);color:var(--text);outline:none}
.access-session{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px;padding:13px 14px;border:1px solid var(--line);border-radius:16px;background:var(--surface-soft)}
.access-session[hidden]{display:none}
.access-session strong,.access-session small{display:block;font-weight:600;}
.access-session small{margin-top:3px;color:var(--muted);font-size:9px;font-weight:600;}
@media(max-width:759px){
  .access-login-form{grid-template-columns:1fr}
}

/* v5.3.2 RETOUCH pt.II - canonical settings controls */

/* v5.4.3 ARCHITECT - settings controls migrated from app.css */
.setting-row{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:18px;border-top:1px solid var(--line)}
.setting-row:first-of-type,.settings-card .section-head + .setting-row{border-top:0}
.setting-row strong,.setting-row small{display:block;font-weight:600;}
.setting-row strong{font-size:12px}
.setting-row small{margin-top:4px;color:var(--muted);font-size:9px;font-weight:600;}
.stack-row{align-items:flex-start;flex-direction:column}
.segmented{display:grid;grid-template-columns:repeat(3,1fr);width:100%;padding:4px;border:1px solid var(--line);border-radius:13px;background:var(--surface-soft)}
.segmented button{height:34px;border:0;border-radius:9px;background:transparent;color:var(--muted);cursor:pointer;font-size:10px;font-weight:850}
.segmented button.is-active{background:var(--surface-strong);color:var(--purple);box-shadow:var(--shadow-soft)}
.switch-input{position:absolute;opacity:0;pointer-events:none}
.switch-ui{position:relative;width:44px;height:25px;border-radius:999px;background:rgba(117,128,150,.25);cursor:pointer;transition:.2s}
.switch-ui::after{content:"";position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;background:#fff;box-shadow:0 3px 8px rgba(0,0,0,.18);transition:.2s}
.switch-input:checked + .switch-ui{background:linear-gradient(135deg,var(--purple),var(--blue))}
.switch-input:checked + .switch-ui::after{transform:translateX(19px)}
.input-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.input-grid label span{display:block;margin-bottom:6px;color:var(--muted);font-size:9px;font-weight:800}
.input-grid input{width:100%;height:44px;padding:0 13px;border:1px solid var(--line);border-radius:13px;background:var(--surface-strong);color:var(--text);outline:none;font-size:11px}
.settings-actions{position:relative;z-index:1;display:flex;align-items:center;gap:10px;margin-top:14px}
.settings-actions span{color:var(--muted);font-size:10px;font-weight:600;}
.developer-card{padding:0}
.developer-card summary{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:20px 22px;cursor:pointer;list-style:none}
.developer-card summary::-webkit-details-marker{display:none}
.developer-card summary span strong,.developer-card summary span small{display:block}
.developer-card summary strong{font-size:13px}
.developer-card summary small{margin-top:4px;color:var(--muted);font-size:9px;font-weight:600;}
.developer-card summary svg{width:18px;height:18px;transition:.2s}
.developer-card[open] summary svg{transform:rotate(90deg)}
.developer-body{position:relative;z-index:1;padding:0 22px 22px}
.status-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.status-grid div{padding:13px;border:1px solid var(--line);border-radius:13px;background:var(--surface-soft)}
.status-grid span,.status-grid strong{display:block;font-weight:600;}
.status-grid span{color:var(--muted);font-size:9px;font-weight:600;}
.status-grid strong{margin-top:5px;font-size:11px}
.developer-log{max-height:220px;overflow:auto;margin-top:12px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--surface-soft);color:var(--muted);font:10px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;overflow-wrap:anywhere;overscroll-behavior:contain}

@media(max-width:680px){
  .input-grid{
    grid-template-columns:1fr;
  }

  .status-grid{
    grid-template-columns:repeat(2,1fr);
  }
}



/* v5.4.3 ARCHITECT - settings layout migrated from app.css and foundation.css */

/* app.css settings layout ownership */

.settings-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  row-gap:16px;
  column-gap:22px;
}

.settings-card{
  border-radius:var(--radius-xl);
}

.wide-settings-card,
.developer-card{
  grid-column:1/-1;
}

@media(max-width:680px){
  .settings-grid{
    grid-template-columns:1fr;
  }

  .wide-settings-card,
  .developer-card{
    grid-column:auto;
  }
}

@media(min-width:760px){
  .developer-card{
    grid-column:1/-1;
  }
}

@media(min-width:1024px){
  .setting-row{
    min-height:56px;
    padding:10px 0;
  }
}

/* foundation.css settings ownership */

.settings-card{
  border-radius:var(--v410-card-radius);
  border:1px solid var(--v410-card-border);
  box-shadow:0 6px 22px rgba(43,48,67,.045);
}

.developer-card{
  overflow:hidden;
}

.setting-row{
  min-height:0;
  padding:10px 0;
}

.setting-row strong{
  line-height:1.35;
}

.setting-row small{
  line-height:1.5;
  font-weight:600;
}

@media(hover:hover) and (pointer:fine){
  .settings-card{
    transition:
      transform .18s ease,
      box-shadow .18s ease,
      border-color .18s ease;
  }
}

@media(max-width:430px){
  .settings-card{
    border-radius:20px;
  }
}

  @media(min-width:760px){
/* v5.1 canonical desktop settings layout */
  .settings-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    align-items:start;
  }

  .settings-grid > .settings-card{
    display:block;
    width:100%;
    min-width:0;
    margin:0;
    padding:18px;
    vertical-align:top;
    break-inside:auto;
    -webkit-column-break-inside:auto;
    background:var(--surface);
  }

  #v54-icon-picker{
    grid-column:2;
    grid-row:2;
  }

  #privacy-settings-card{
    grid-column:1;
    grid-row:3;
  }

  #dukbap-info-card{
    grid-column:1;
    grid-row:2;
  }

  .settings-grid > .settings-card[hidden]{
    display:none;
  }
}

/* v5.1.2 info/settings - canonical */

#dukbap-info-card{
  background:var(--surface);
}

@media(max-width:759px){
  .settings-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    columns:auto;
  }

  .v535-settings-column{
    display:contents;
  }

  .v535-settings-column > .settings-card,
  .settings-grid > .settings-card{
    width:100%;
    margin:0;
    padding:16px;
  }
}

/* class picker is a button, not a native select */
:root:not([data-theme="dark"]) .v411-class-chip,
:root:not([data-theme="dark"]) #v411-current-class{
  background:#fff;
  border:1px solid rgba(116,124,145,.18);
  box-shadow:0 7px 24px rgba(42,51,81,.065);
  color:var(--muted);
  opacity:1;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

html[data-theme="dark"] .v411-class-chip,
html[data-theme="dark"] #v411-current-class{
  background:#1d2738;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 7px 24px rgba(0,0,0,.18);
  color:var(--muted);
  opacity:1;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

/* Android app uses native FCM, not browser Notification API */
html.dukbap-android-app
.v48-settings-card .setting-row:has(#v48-browser-permission){
  display:none;
}




/* v5.3.2 RETOUCH pt.II - canonical settings card spacing */

.settings-grid > .settings-card .section-head{
  margin-bottom:8px;
}

/* first row begins directly after the card heading */
.settings-grid > .settings-card .section-head + .setting-row{
  padding-top:0;
  border-top:0;
}

/* common settings rows */
.settings-grid > .settings-card .setting-row{
  min-height:0;
  padding:10px 0;
}

/* actual final visible rows */
.settings-grid > .settings-card .setting-row:last-child{
  padding-bottom:0;
}

/* appearance */
.settings-grid > .settings-card .stack-row{
  gap:6px;
}

.settings-grid > .settings-card #theme-segment{
  margin-top:0;
}

/* Android: browser notification row is hidden,
   therefore quiet row is the actual final visible row */
html.dukbap-android-app .v48-settings-card .v48-quiet-row{
  padding-bottom:0;
  margin-bottom:0;
}

/* DUKBAP info grid also finishes at the card padding */
#dukbap-info-card .dukbap-info-grid{
  margin-bottom:0;
}

@media(max-width:759px){

  .settings-grid > .settings-card .setting-row{
    padding:9px 0;
  }

  .settings-grid > .settings-card .stack-row{
    gap:5px;
  }
}

/* v5.3.2 RETOUCH pt.II - canonical quiet mode */

.v48-quiet-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:
    "copy switch"
    "times times";
  align-items:center;
  gap:8px 14px;
}

.v48-quiet-row > span:first-child{
  grid-area:copy;
  min-width:0;
}

.v48-quiet-switch{
  grid-area:switch;
  display:flex;
  align-items:center;
  justify-content:flex-end;
}

.v48-quiet-times{
  grid-area:times;
  display:grid;
  grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr);
  align-items:center;
  gap:10px;
  width:100%;
}

.v48-quiet-time-button{
  width:100%;
  min-width:0;
  height:50px;
  padding:7px 12px;
  border:1px solid rgba(116,124,145,.18);
  border-radius:14px;
  background:#fff;
  color:var(--text);
  box-shadow:0 6px 18px rgba(42,51,81,.055);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:3px;
  text-align:left;
  cursor:pointer;
}

.v48-quiet-time-button small{
  color:var(--muted);
  font-size:8px;
  font-weight:850;
  line-height:1;
}

.v48-quiet-time-button strong{
  font-size:13px;
  font-weight:900;
  line-height:1;
}

.v48-quiet-time-button:focus-visible{
  border-color:rgba(82,92,220,.38);
  box-shadow:
    0 6px 18px rgba(42,51,81,.055),
    0 0 0 3px rgba(91,94,230,.09);
}

.v48-quiet-arrow{
  display:grid;
  place-items:center;
  align-self:center;
  margin:0;
  color:var(--muted);
  font-size:16px;
  font-weight:850;
  line-height:1;
}

.v48-quiet-times.is-disabled{
  opacity:.46;
}

.v48-quiet-times.is-disabled .v48-quiet-time-button{
  cursor:not-allowed;
}

html[data-theme="dark"] .v48-quiet-time-button{
  background:#151d2b;
  border-color:rgba(255,255,255,.08);
  box-shadow:0 6px 18px rgba(0,0,0,.14);
}


@media(max-width:759px){

  .v48-quiet-row{
    gap:7px 12px;
  }

  .v48-quiet-times{
    gap:7px;
    padding:0;
  }

  .v48-quiet-times input[type="time"]{
    height:40px;
    padding:0 8px;
    font-size:10px;
  }

  .v48-quiet-arrow{
    margin-bottom:10px;
    font-size:13px;
  }

  /* appearance card: no meaningless line above theme selector */
  .settings-card .section-head + .setting-row,
  .settings-card .stack-row{
    border-top:0;
  }

  .settings-card .stack-row::before{
    content:none;
    display:none;
  }
}

/* v5.3.2 RETOUCH pt.II - quiet picker panel */

.v48-quiet-picker-panel{
  display:flex;
  flex-direction:column;
  padding-bottom:0;
}

.v48-quiet-picker-body{
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
  padding:8px 10px 2px;
}

.v48-quiet-picker-columns{
  display:grid;
  grid-template-columns:minmax(0,4fr) minmax(72px,1fr);
  gap:8px;
  height:auto;
  min-height:0;
}

.v48-quiet-picker-columns section{
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:0;
}


.v48-quiet-picker-list{
  flex:0 0 auto;
  min-height:0;
  overflow-y:auto;
  padding:4px;
  border:1px solid var(--line);
  border-radius:15px;
  background:var(--surface-soft);
  scrollbar-width:none;
  overscroll-behavior:contain;
}

.v48-quiet-picker-list::-webkit-scrollbar{
  display:none;
}

.v48-quiet-picker-option{
  display:grid;
  place-items:center;
  width:100%;
  min-height:46px;
  margin:0 0 4px;
  padding:0;
  border:0;
  border-radius:11px;
  background:transparent;
  color:var(--text);
  font:inherit;
  font-size:14px;
  font-weight:850;
  line-height:1;
  text-align:center;
}

.v48-quiet-picker-option:last-child{
  margin-bottom:0;
}

.v48-quiet-picker-option.is-selected{
  color:#fff;
  background:linear-gradient(135deg,var(--purple),var(--blue));
  box-shadow:0 5px 14px rgba(74,82,210,.16);
}

/* 0106 / 0712 / 1318 / 1900 */
#v48-quiet-hour-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-template-rows:repeat(6,46px);
  grid-auto-flow:column;
  align-content:start;
  gap:4px;
  background-image:
    linear-gradient(var(--line),var(--line)),
    linear-gradient(var(--line),var(--line)),
    linear-gradient(var(--line),var(--line));
  background-size:
    1px calc(100% - 8px),
    1px calc(100% - 8px),
    1px calc(100% - 8px);
  background-position:
    25% 4px,
    50% 4px,
    75% 4px;
  background-repeat:no-repeat;
}

#v48-quiet-hour-grid .v48-quiet-picker-option{
  min-height:46px;
  margin:0;
}

#v48-quiet-minute-grid{
  align-content:start;
}

.v48-quiet-picker-actions{
  display:block;
  padding:3px 10px 3px;
}

#v48-quiet-picker-apply{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:46px;
  margin:0;
  color:#fff;
  font-size:14px;
  font-weight:900;
  line-height:1;
  text-indent:0;
  opacity:1;
}

@media(max-width:759px){
  .v48-quiet-time-button{
    height:52px;
  }

  .v48-quiet-picker-panel{
    height:auto;
    max-height:calc(100dvh - 40px);
  }

  .v48-quiet-picker-body{
    padding:7px 10px 2px;
  }

  .v48-quiet-picker-actions{
    padding:3px 10px 8px;
  }

  #v48-quiet-picker-apply{
    height:44px;
    min-height:44px;
  }
}

@media(max-width:759px){
  #dukbap-info-card .dukbap-info-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-flow:row;
    grid-auto-rows:auto;
    height:auto;
  }
}

/* v5.3.5 settings column spacing */
.v535-settings-column > .settings-card .section-head{margin-bottom:8px}
.v535-settings-column > .settings-card .section-head + .setting-row{padding-top:0;border-top:0}
.v535-settings-column > .settings-card .setting-row{min-height:0;padding:10px 0}
.v535-settings-column > .settings-card .setting-row:last-child{padding-bottom:0}
.v535-settings-column > .settings-card .stack-row{gap:6px}
.v535-settings-column > .settings-card #theme-segment{margin-top:0}

@media(max-width:759px){
  .v535-settings-column > .settings-card .setting-row{padding:9px 0}
  .v535-settings-column > .settings-card .stack-row{gap:5px}
}




/* v5.3.5 settings desktop layout is consolidated below. */

/* DUKBAP LIVE v5.4 PRISM - settings polish */

/* Login form alignment */
.access-login-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px;
  align-items: stretch;
  gap: 10px;
  margin-top: 8px;
}

.access-login-form #access-password,
.access-login-form .primary-small {
  box-sizing: border-box;
  height: 42px;
  min-height: 42px;
  margin: 0;
}

.access-login-form #access-password {
  width: 100%;
  min-width: 0;
}

.access-login-form .primary-small {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1;
  white-space: nowrap;
}

@media (max-width: 420px) {
  .access-login-form {
    grid-template-columns: minmax(0, 1fr) 82px;
    gap: 8px;
  }

  .access-login-form .primary-small {
    width: 82px;
  }
}

/* DUKBAP LIVE v5.4 PRISM - static app icon picker */

.icon-picker-card {
  grid-column: 1 / -1;
}

.v54-icon-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 4px;
}

.v54-icon-choice {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  padding: 14px 10px 12px;
  border: 1px solid rgba(100, 112, 145, .14);
  border-radius: 20px;
  background: #fff;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease;
  -webkit-tap-highlight-color: transparent;
}

.v54-icon-choice:hover {
  transform: translateY(-2px);
  border-color: rgba(93, 113, 225, .28);
  background: #fff;
}

.v54-icon-choice:active {
  transform: scale(.97);
}

.v54-icon-choice[aria-pressed="true"] {
  border-color: rgba(87, 108, 225, .72);
  background: #fff;
  box-shadow:
    0 10px 26px rgba(68, 85, 175, .13),
    inset 0 0 0 1px rgba(96, 115, 225, .12);
}

.v54-icon-preview {
  display: block;
  width: 76px;
  height: 76px;
  margin-top: 5px; margin-bottom: 6px;
  overflow: hidden;
  border-radius: 22px;
  border: 0.5px solid rgba(255,255,255,.78);
  box-sizing: border-box;
  box-shadow:
    0 9px 22px rgba(35, 45, 75, .17),
    inset 0 0 0 1px rgba(255,255,255,.26);
}

.v54-icon-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;

}

.v54-icon-choice strong {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  line-height: 1.35;
}

.v54-icon-choice small {
  display: block;
  max-width: 100%;
  min-height: 13px;
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  opacity: .55;font-weight:600;}

.v54-icon-note {
  margin-top: 14px;
  margin-bottom: 0;
}

@media (max-width: 620px) {
  .v54-icon-grid {
    gap: 8px;
  }

  .v54-icon-choice {
    padding: 11px 4px 9px;
    border-radius: 16px;
  }

  .v54-icon-preview {
    width: 58px;
    height: 58px;
    border-radius: 17px;
  }

  .v54-icon-choice strong {
    font-size: 13px;
  }

  .v54-icon-choice small {
    font-size: 8px;font-weight:600;}
}

/* V54 DARK ICON PICKER START */
html[data-theme="dark"] .v54-icon-choice {
  border-color: rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .045);
}

html[data-theme="dark"] .v54-icon-choice:hover {
  border-color: rgba(126, 116, 255, .28);
  background: rgba(255, 255, 255, .075);
}

html[data-theme="dark"] .v54-icon-choice[aria-pressed="true"] {
  border-color: rgba(124, 113, 255, .72);
  background: rgba(104, 94, 210, .13);
  box-shadow:
    0 10px 26px rgba(0, 0, 0, .22),
    inset 0 0 0 1px rgba(139, 128, 255, .13);
}

html[data-theme="dark"] .v54-icon-choice strong {
  color: #F4F6FF;
}

html[data-theme="dark"] .v54-icon-choice small {
  color: rgba(224, 228, 245, .70);
  opacity: 1;font-weight:600;}

html[data-theme="dark"] #v54-icon-badge {
  color: rgba(238, 240, 255, .84);
  border-color: rgba(255, 255, 255, .08);
  background: rgba(11, 16, 31, .34);
}
/* V54 DARK ICON PICKER END */

html[data-theme="dark"] .v54-icon-preview {
  border-color: transparent;
}

/* polite tone settings state */
#polite-tone-row {
  border-top: 1px solid var(--line);
}

.tone-state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 22px;
  margin-left: 7px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 8px;
  font-weight: 900;
  vertical-align: middle;
}

html[data-tone="polite"] .tone-state {
  color: var(--purple);
  background: rgba(114,87,246,.10);
}

/* v5.4.3 ARCHITECT - class and profile UI migrated from v411-fun.css */

.v411-role-display{
  padding:8px 12px;border-radius:999px;background:var(--surface-soft);
  font-size:11px;font-weight:850;
}

#v411-role-display[hidden]{
  display:none;
}

/* canonical class title layout */
.v411-title-line{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  width:100%;
}

#v411-class-card .section-head > div{
  width:100%;
  margin:0;
}

#v411-class-card .setting-row{
  display:none;
}


#v411-role-display{
  flex:0 0 auto;
  min-width:100px;
  height:34px;
  padding:0 13px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  border-radius:13px;
}


/* canonical class card spacing */
#v411-class-card{
  height:auto;
  min-height:0;
  padding:12px 16px;
}

#v411-class-card .section-head{
  margin:0;
}


#v411-class-card .section-head p:last-child{
  margin:2px 0 0;font-weight:600;}

.v411-access-card{
  height:auto;
  min-height:0;
}

.v411-access-card #access-feedback:empty{
  display:none;
  margin:0;
  padding:0;
}

.v411-access-card > :last-child{
  margin-bottom:0;
}

/* v5.1 canonical class picker */
#v411-class-select{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  flex:0 0 auto;
  min-width:100px;
  width:100px;
  height:34px;
  padding:0 27px 0 12px;
  border:1px solid rgba(116,124,145,.18);
  border-radius:13px;
  background:#fff;
  box-shadow:0 7px 24px rgba(42,51,81,.065);
  color:var(--text);
  font:inherit;
  font-size:11px;
  font-weight:850;
  line-height:1;
  cursor:pointer;
  text-align:center;
}

html[data-theme="dark"] #v411-class-select{
  background:#1d2738;
  border-color:rgba(255,255,255,.08);
  box-shadow:0 7px 24px rgba(0,0,0,.18);
  color:var(--text);
}

#v411-class-select::after{
  content:"";
  position:absolute;
  right:11px;
  top:50%;
  width:6px;
  height:6px;
  border-right:1.7px solid var(--muted);
  border-bottom:1.7px solid var(--muted);
  transform:translateY(-70%) rotate(45deg);
  pointer-events:none;
}

#v411-class-select:focus-visible{
  border-color:rgba(82,92,220,.42);
  box-shadow:0 0 0 3px rgba(91,94,230,.10);
}

#v411-class-select .v411-class-settings-icon{
  display:none;
}

#v411-class-select .v411-class-select-label{
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* v5.3.3 SCOPE - grade + class profile picker */

.v411-class-dialog{
  position:fixed;
  inset:0;

  width:100vw;
  height:100dvh;
  max-width:100vw;
  max-height:none;

  margin:0;
  padding:12px;

  border:0;
  border-radius:0;

  background:transparent;
  color:var(--text);

  overflow:hidden;
  box-sizing:border-box;

  transform:none;
  box-shadow:none;
}

.v411-class-dialog[open]{
  display:grid;
  place-items:center;
}

.v411-class-dialog::backdrop{
  background:rgba(15,23,42,.26);
  backdrop-filter:blur(7px);
}

.v411-class-dialog[open]::backdrop{
  animation:v411-profile-backdrop-in .20s ease-out both;
}

.v411-class-dialog[open] .v411-profile-panel{
  animation:v411-profile-in .22s cubic-bezier(.2,.8,.2,1) both;
}

.v411-class-dialog.is-closing::backdrop{
  animation:v411-profile-backdrop-out .16s ease-in both;
}

.v411-class-dialog.is-closing .v411-profile-panel{
  animation:v411-profile-out .16s ease-in both;
}

@keyframes v411-profile-in{
  from{
    opacity:0;
    transform:translateY(12px) scale(.97);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

@keyframes v411-profile-out{
  from{
    opacity:1;
    transform:translateY(0) scale(1);
  }
  to{
    opacity:0;
    transform:translateY(8px) scale(.98);
  }
}

@keyframes v411-profile-backdrop-in{
  from{opacity:0}
  to{opacity:1}
}

@keyframes v411-profile-backdrop-out{
  from{opacity:1}
  to{opacity:0}
}

@media(prefers-reduced-motion:reduce){
  .v411-class-dialog[open]::backdrop,
  .v411-class-dialog[open] .v411-profile-panel,
  .v411-class-dialog.is-closing::backdrop,
  .v411-class-dialog.is-closing .v411-profile-panel{
    animation:none;
  }
}

.v411-profile-panel{
  position:relative;
  inset:auto;

  width:min(430px,100%);
  height:auto;
  min-height:0;
  max-height:calc(100dvh - 32px);

  margin:0;
  padding:0;

  box-sizing:border-box;
  overflow:auto;

  border:1px solid var(--line);
  border-radius:26px;

  background:var(--surface);

  transform:none;
  box-shadow:none;
}

.v411-profile-body{
  display:grid;
  gap:11px;
  padding:13px 16px 16px;
}

.v411-profile-divider{
  width:100%;
  height:1px;
  margin:2px 0;
  background:var(--line);
}

.v411-grade-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}

.v411-class-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-top:0;
}

.v411-grade-grid button,
.v411-class-grid button{
  display:flex;
  align-items:center;
  justify-content:center;

  width:100%;
  min-height:42px;
  padding:0 8px;

  border:1px solid var(--line);
  border-radius:13px;
  background:var(--surface-soft);
  background-clip:padding-box;
  color:var(--text);

  -webkit-appearance:none;
  appearance:none;
  outline:0;
  box-shadow:none;

  font:inherit;
  font-size:12px;
  font-weight:850;
  line-height:1;

  text-align:center;
  vertical-align:middle;
  cursor:pointer;
  box-sizing:border-box;
}

.v411-grade-grid button.is-selected,
.v411-class-grid button.is-selected{
  color:#fff;
  -webkit-text-fill-color:#fff;

  border:1px solid transparent;
  outline:0;

  background:
    linear-gradient(135deg,var(--purple),var(--blue)) padding-box;

  background-clip:padding-box;
  box-shadow:none;
  filter:none;
  transform:none;

  -webkit-appearance:none;
  appearance:none;
}

@media(max-width:759px){
  .v411-profile-panel{
    border-radius:24px;
  }

  .v411-profile-body{
    gap:10px;
    padding:12px 14px 14px;
  }

  .v411-grade-grid,
  .v411-class-grid{
    gap:7px;
  }

  .v411-grade-grid button,
  .v411-class-grid button{
    min-height:44px;
    font-size:11px;
  }
}


.v411-profile-apply{
  display:flex;
  align-items:center;
  justify-content:center;

  width:100%;
  height:44px;
  min-height:44px;

  margin:2px 0 0 0;
  padding:0;

  border:0;
  border-radius:13px;

  background:linear-gradient(135deg,var(--purple),var(--blue));
  color:#fff;
  -webkit-text-fill-color:#fff;

  font:inherit;
  font-size:13px;
  font-weight:900;
  line-height:1;

  text-align:center;
  text-indent:0;
  opacity:1;
  cursor:pointer;
}

/* v5.4.3 ARCHITECT - wide settings layout migrated from platform.css */
@media(min-width:760px){
  .v535-settings-column{
    display:flex;
    flex-direction:column;
    gap:14px;
    min-width:0;
    width:100%;
    max-width:100%;
  }

  .v535-settings-column > .settings-card{
    width:100%;
    max-width:100%;
    min-width:0;
    margin:0;
    padding:20px;
    box-sizing:border-box;
  }

  .settings-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    min-width:0;
    width:100%;
    max-width:100%;
    column-gap:14px;
    row-gap:14px;
    align-items:start;
  }

  .v535-settings-column > .developer-card{
    padding:0;
    overflow:hidden;
  }
}