/* =========================================================
   ADMIN CORE / لوحة إدارة الأسئلة
   CLEAN PROFESSIONAL VERSION
========================================================= */

/* =========================
   1) FONTS
========================= */

/* =========================
   2) ROOT
========================= */

:root{
  --admin-bg:#EAECF0;
  --admin-surface:#FFFFFF;
  --admin-soft:#F6F7F9;
  --admin-line:#D5DADF;

  --admin-primary:#FE7F2D;
  --admin-primary-hover:#E96F20;
  --admin-primary-soft:#FFF1E8;

  --admin-secondary:#233D4D;
  --admin-secondary-dark:#152C39;

  --admin-text:#151515;
  --admin-muted:#8793A0;

  --admin-green:#007F00;
  --admin-green-soft:#EAF7EA;

  --admin-red:#7F0000;
  --admin-red-soft:#FBEAEA;

  --admin-blue:#00007F;
  --admin-blue-soft:#EDEDFF;

  --admin-radius-xl:30px;
  --admin-radius-lg:var(--ui-radius-lg,22px);
  --admin-radius-md:var(--ui-radius-md,17px);
  --admin-radius-sm:var(--ui-radius-sm,13px);

  --admin-shadow-soft:0 10px 28px rgba(35,61,77,.07);
  --admin-shadow-card:0 14px 34px rgba(35,61,77,.10);
  --admin-shadow-strong:0 26px 68px rgba(35,61,77,.18);

  --admin-ease:cubic-bezier(.16,1,.3,1);

  --admin-content-max:1480px;
  --admin-control-height:50px;
  --admin-cols-2:2;
  --admin-cols-3:3;
  --admin-cols-4:4;
  --admin-cols-5:5;

  --admin-safe-top:max(14px,env(safe-area-inset-top));
  --admin-safe-right:max(14px,env(safe-area-inset-right));
  --admin-safe-bottom:max(16px,env(safe-area-inset-bottom));
  --admin-safe-left:max(14px,env(safe-area-inset-left));
}

/* =========================
   3) BASE
========================= */

*,
*::before,
*::after{
  box-sizing:border-box;
}

html,
body{
  width:100%;
  min-height:100%;
  margin:0;
  direction:rtl;
  overflow-x:hidden;
  overflow-y:auto;
}

html{
  scroll-behavior:smooth;
  background:var(--admin-bg);
}

body{
  height:auto;
  min-height:var(--app-height,100dvh);
  color:var(--admin-text);
  font-family:"HanakaText",sans-serif;
  font-weight:400;
  background:
    radial-gradient(circle at 14% 12%,rgba(254,127,45,.10),transparent 28%),
    radial-gradient(circle at 88% 10%,rgba(255,255,255,.78),transparent 29%),
    linear-gradient(180deg,#F8FAFC 0%,var(--admin-bg) 62%,#E1E6EA 100%);
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.16;
  background:
    linear-gradient(135deg,rgba(255,255,255,.25) 0 1px,transparent 1px 18px),
    linear-gradient(45deg,rgba(255,255,255,.16) 0 1px,transparent 1px 20px);
}

body.adminIsSaving{
  cursor:progress;
}

.adminShellNew,
.adminShellNew *,
.adminModalOverlay,
.adminModalOverlay *,
.adminConfirmOverlay,
.adminConfirmOverlay *,
.globalSegmentVisibilityOverlay,
.globalSegmentVisibilityOverlay *,
.gameToast,
.gameToast *{
  font-family:"HanakaText",sans-serif;
  font-weight:400;
}

strong,
b{
  font-weight:400;
}

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

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

button{
  border:0;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:
    transform .16s var(--admin-ease),
    box-shadow .16s var(--admin-ease),
    background-color .16s var(--admin-ease),
    border-color .16s var(--admin-ease),
    color .16s var(--admin-ease),
    opacity .16s var(--admin-ease);
}

button:hover{
  transform:translateY(-1px);
}

button:active{
  transform:scale(.985);
}

button:disabled{
  opacity:.44;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}

:is(button,input,textarea,select,summary):focus-visible{
  outline:3px solid rgba(254,127,45,.24);
  outline-offset:3px;
}

::selection{
  color:#FFFFFF;
  background:var(--admin-primary);
}

/* =========================
   4) HIDDEN UTILITY
========================= */

.hidden,
.adminShellNew.hidden,
.adminModelGate.hidden,
.adminWorkspace.hidden,
.adminTabsNew.hidden,
#adminModelGateStart.hidden,
#adminModelLoginBox.hidden,
#adminModelCreateBox.hidden{
  display:none !important;
}

/* =========================
   5) SHARED BUTTONS
========================= */

:is(
  .adminBtn,
  .adminModelPrimaryBtn,
  .adminModelSoftBtn,
  .adminModelDangerBtn,
  .adminModelActionBtn,
  .adminModelCreateBtn,
  .adminModelLogoutBtn,
  .adminWorkspaceActionBtn,
  .adminSaveBtn,
  .adminDeleteAllBtn,
  .adminDeleteBtn,
  .adminConfirmOkBtn,
  .adminConfirmCancelBtn,
  .globalSegmentCloseBtn
){
  min-height:var(--admin-control-height);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 17px;
  border:1px solid transparent;
  border-radius:var(--admin-radius-sm);
  font-size:.96rem;
  line-height:1.1;
  white-space:nowrap;
  user-select:none;
}

:is(
  .adminModelPrimaryBtn,
  .adminModelCreateBtn,
  .adminSaveBtn,
  .adminWorkspaceActionBtn.primary,
  .adminBtnMango
){
  color:#FFFFFF;
  border-color:var(--admin-primary);
  background:var(--admin-primary);
  box-shadow:0 8px 20px rgba(254,127,45,.18);
}

:is(
  .adminModelPrimaryBtn,
  .adminModelCreateBtn,
  .adminSaveBtn,
  .adminWorkspaceActionBtn.primary,
  .adminBtnMango
):hover{
  color:#FFFFFF;
  border-color:var(--admin-primary-hover);
  background:var(--admin-primary-hover);
  box-shadow:0 11px 24px rgba(254,127,45,.23);
}

:is(
  .adminModelSoftBtn,
  .adminModelActionBtn,
  .adminWorkspaceActionBtn,
  .adminBtnLight,
  .adminConfirmCancelBtn,
  .globalSegmentCloseBtn
){
  color:var(--admin-secondary);
  border-color:var(--admin-line);
  background:var(--admin-surface);
  box-shadow:0 4px 12px rgba(35,61,77,.04);
}

:is(
  .adminModelSoftBtn,
  .adminModelActionBtn,
  .adminWorkspaceActionBtn,
  .adminBtnLight,
  .adminConfirmCancelBtn,
  .globalSegmentCloseBtn
):hover{
  color:var(--admin-secondary-dark);
  border-color:#BEC8D0;
  background:var(--admin-soft);
}

:is(
  .adminModelDangerBtn,
  .adminModelLogoutBtn,
  .adminDeleteAllBtn,
  .adminDeleteBtn,
  .adminWorkspaceActionBtn.exit
){
  color:var(--admin-red);
  border-color:rgba(127,0,0,.18);
  background:var(--admin-red-soft);
  box-shadow:none;
}

:is(
  .adminModelDangerBtn,
  .adminModelLogoutBtn,
  .adminDeleteAllBtn,
  .adminDeleteBtn,
  .adminWorkspaceActionBtn.exit
):hover{
  color:#FFFFFF;
  border-color:var(--admin-red);
  background:var(--admin-red);
}

.adminDeleteBtn{
  min-height:var(--ui-control-min,44px);
  padding:7px 13px;
  border-radius:11px;
  font-size:.88rem;
}

.adminConfirmOkBtn{
  color:#FFFFFF;
  border-color:var(--admin-secondary);
  background:var(--admin-secondary);
}

.adminConfirmOkBtn:hover{
  border-color:var(--admin-secondary-dark);
  background:var(--admin-secondary-dark);
}

.adminConfirmCard.danger .adminConfirmOkBtn{
  color:#FFFFFF;
  border-color:var(--admin-red);
  background:var(--admin-red);
}

/* =========================
   6) SHARED FORM CONTROLS
========================= */

.adminField,
.adminModelGateField{
  width:100%;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:7px;
}

:is(.adminField,.adminModelGateField) label{
  margin:0;
  color:var(--admin-secondary);
  font-size:.91rem;
  line-height:1.3;
}

:is(
  .adminInput,
  .adminSelect,
  .adminCleanInput,
  .adminCleanTextarea,
  .adminField input:not([type="file"]),
  .adminField textarea,
  .adminField select,
  .adminModelGateField input,
  .adminModelGateField select
){
  width:100%;
  min-width:0;
  min-height:var(--admin-control-height);
  padding:11px 14px;
  border:1px solid var(--admin-line);
  border-radius:var(--admin-radius-sm);
  outline:0;
  color:var(--admin-text);
  background:var(--admin-surface);
  font-size:var(--ui-input-size,1rem);
  line-height:1.4;
  transition:
    border-color .16s var(--admin-ease),
    box-shadow .16s var(--admin-ease),
    background-color .16s var(--admin-ease);
}

:is(
  .adminInput,
  .adminSelect,
  .adminCleanInput,
  .adminCleanTextarea,
  .adminField input:not([type="file"]),
  .adminField textarea,
  .adminField select,
  .adminModelGateField input,
  .adminModelGateField select
):hover{
  border-color:#C2CBD2;
}

:is(
  .adminInput,
  .adminSelect,
  .adminCleanInput,
  .adminCleanTextarea,
  .adminField input:not([type="file"]),
  .adminField textarea,
  .adminField select,
  .adminModelGateField input,
  .adminModelGateField select
):focus{
  border-color:var(--admin-primary);
  background:#FFFFFF;
  box-shadow:0 0 0 4px rgba(254,127,45,.10);
}

textarea,
.adminCleanTextarea{
  min-height:104px;
  max-height:360px;
  resize:vertical;
}

input::placeholder,
textarea::placeholder{
  color:#A2ACB5;
  opacity:1;
}

select{
  appearance:none;
  background-image:
    linear-gradient(45deg,transparent 50%,var(--admin-secondary) 50%),
    linear-gradient(135deg,var(--admin-secondary) 50%,transparent 50%);
  background-position:18px calc(50% - 3px),12px calc(50% - 3px);
  background-size:6px 6px,6px 6px;
  background-repeat:no-repeat;
  padding-left:38px;
}

input[type="file"],
.adminCleanFile{
  width:100%;
  min-width:0;
  min-height:54px;
  padding:7px;
  border:1px dashed #B9C3CB;
  border-radius:var(--admin-radius-sm);
  color:var(--admin-muted);
  background:var(--admin-soft);
  cursor:pointer;
}

input[type="file"]::file-selector-button{
  min-height:var(--ui-control-min,44px);
  margin-left:10px;
  padding:7px 14px;
  border:0;
  border-radius:10px;
  color:#FFFFFF;
  background:var(--admin-secondary);
  font:inherit;
  cursor:pointer;
}

input[type="file"]:hover,
.adminCleanFile:hover{
  border-color:rgba(254,127,45,.55);
  background:var(--admin-primary-soft);
}

.adminMissingField :is(input,textarea,select),
:is(input,textarea,select).adminMissingField,
.adminField.adminMissingField input[type="file"]{
  border-color:rgba(127,0,0,.38);
  background:var(--admin-red-soft);
}

.adminMissingField :is(input,textarea,select):focus{
  border-color:var(--admin-red);
  box-shadow:0 0 0 4px rgba(127,0,0,.08);
}

.adminMissingHint{
  margin:0;
  color:var(--admin-red);
  font-size:.82rem;
  line-height:1.35;
}



/* =========================
   8) APP SHELL
========================= */

.adminShellNew{
  width:100%;
  min-height:var(--app-height,100dvh);
}

/* =========================
   9) MODEL GATE
========================= */

.adminModelGate{
  width:100%;
  min-height:var(--app-height,100dvh);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:
    clamp(20px,3vw,40px)
    max(clamp(20px,3vw,40px),env(safe-area-inset-right))
    max(clamp(20px,3vw,40px),env(safe-area-inset-bottom))
    max(clamp(20px,3vw,40px),env(safe-area-inset-left));
}

.adminModelGateCard{
  width:min(100%,820px);
  margin:0 auto;
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:18px;
  border:1px solid var(--admin-line);
  border-radius:var(--admin-radius-xl);
  background:var(--admin-surface);
  box-shadow:var(--admin-shadow-strong);
}

.adminModelGateHero{
  padding:8px 10px 2px;
  display:grid;
  gap:7px;
  text-align:center;
}

.adminModelGateHero > span{
  color:var(--admin-primary);
  font-size:.96rem;
}

.adminModelGateHero h1{
  margin:0;
  color:var(--admin-secondary);
  font-family:"HanakaDisplay",sans-serif;
  font-size:clamp(2.2rem,5vw,3.5rem);
  line-height:1;
}

.adminModelGateHero p{
  width:min(100%,560px);
  margin:3px auto 0;
  color:var(--admin-muted);
  font-size:.98rem;
  line-height:1.6;
}

.adminModelGatePanel{
  width:100%;
  padding:17px;
  display:flex;
  flex-direction:column;
  gap:14px;
  border:1px solid var(--admin-line);
  border-radius:var(--admin-radius-lg);
  background:var(--admin-soft);
}

.adminModelGateActions{
  width:100%;
  display:grid;
  grid-template-columns:repeat(var(--admin-cols-2,2),minmax(0,1fr));
  gap:10px;
}

#adminModelGateStart{
  grid-template-columns:repeat(var(--admin-cols-2,2),minmax(0,1fr));
}

#adminModelGateStart .adminModelSoftBtn{
  grid-column:1 / -1;
}

#adminModelLoginBox,
#adminModelCreateBox{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:13px;
}

.adminModelCreateBox{
  padding:0;
  border:0;
  background:transparent;
}

.adminModelGate .adminInput,
.adminModelGate .adminSelect{
  min-height:54px;
  border-radius:15px;
  font-size:max(1rem,1rem);
}

.adminModelGate button{
  min-height:52px;
  border-radius:15px;
  font-size:.98rem;
}

.adminModelCreateBtn{
  min-width:150px;
}

.adminModelLogoutBtn{
  width:100%;
}

#newModelSegmentsList{
  display:grid;
  grid-template-columns:repeat(var(--admin-cols-2,2),minmax(0,1fr));
  gap:9px;
}

#newModelSegmentsList .adminSegmentMiniToggle{
  min-height:50px;
  padding:9px 11px;
  display:flex;
  align-items:center;
  gap:9px;
  border:1px solid var(--admin-line);
  border-radius:14px;
  color:var(--admin-secondary);
  background:#FFFFFF;
  font-size:.95rem;
  line-height:1.2;
  cursor:pointer;
  transition:
    border-color .16s var(--admin-ease),
    background-color .16s var(--admin-ease);
}

#newModelSegmentsList .adminSegmentMiniToggle:hover{
  border-color:rgba(254,127,45,.36);
  background:var(--admin-primary-soft);
}

#newModelSegmentsList .adminSegmentMiniToggle input{
  width:19px;
  height:19px;
  accent-color:var(--admin-primary);
}

/* Compact editor policies. Column counts inherit into every segment, including dynamic forms. */
@container admin-editor (max-width:960px){
  .adminEditor > *{
    --admin-cols-3:2;--admin-cols-4:2;--admin-cols-5:3;
  }
}
@container admin-editor (max-width:640px){
  .adminEditor > *{
    --admin-cols-2:1;--admin-cols-3:1;--admin-cols-4:2;--admin-cols-5:2;
    --admin-top-columns:1fr;--admin-detail-columns:1fr;
  }
}
@media (max-width:760px){
  :root{--admin-cols-2:1;--admin-cols-3:1;--admin-cols-4:2;--admin-cols-5:2;--admin-top-columns:1fr;--admin-detail-columns:1fr;--admin-header-columns:minmax(0,1fr);--admin-header-position:relative;--admin-header-top:auto;}
  .adminWorkspaceActions{flex-wrap:wrap;}
  .adminModelGateCard{padding:16px;}
  .adminShellNew :is(input,textarea,select){font-size:max(1rem,max(16px,1rem));}
  .adminShellNew button{min-height:var(--ui-control-min,44px);white-space:normal;overflow-wrap:anywhere;}
}

/* =========================
   10) WORKSPACE
========================= */

.adminWorkspace{
  width:100%;
  min-height:var(--app-height,100dvh);
  padding:
    var(--admin-safe-top)
    var(--admin-safe-right)
    var(--admin-safe-bottom)
    var(--admin-safe-left);
}

/* =========================
   11) WORKSPACE HEADER
========================= */

.adminTopHeader{
  width:min(100%,var(--admin-content-max));
  min-height:78px;
  margin:0 auto 14px;
  padding:11px 14px;
  position:var(--admin-header-position,sticky);
  top:var(--admin-header-top,var(--admin-safe-top));
  z-index:30;
  display:grid;
  grid-template-columns:var(--admin-header-columns,minmax(175px,1fr) minmax(190px,280px) auto);
  gap:12px;
  align-items:center;
  border:1px solid var(--admin-line);
  border-radius:var(--admin-radius-lg);
  background:rgba(255,255,255,.96);
  box-shadow:var(--admin-shadow-soft);
}

.adminTopBrand{
  min-width:0;
}

.adminTopLogo{
  color:var(--admin-secondary);
  font-family:"HanakaDisplay",sans-serif;
  font-size:clamp(1.8rem,3.6vw,2.8rem);
  line-height:.9;
}

.adminTopSub{
  margin-top:4px;
  color:var(--admin-muted);
  font-size:.82rem;
}

.adminCurrentModelPill{
  min-width:0;
  min-height:52px;
  padding:8px 12px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:2px;
  border:1px solid var(--admin-line);
  border-radius:var(--admin-radius-sm);
  background:var(--admin-soft);
}

.adminCurrentModelPill.hasModel{
  border-color:rgba(254,127,45,.28);
  background:var(--admin-primary-soft);
}

.adminCurrentModelLabel{
  color:var(--admin-muted);
  font-size:.72rem;
}

.adminCurrentModelPill strong{
  display:block;
  overflow:hidden;
  color:var(--admin-secondary);
  font-size:.96rem;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.adminWorkspaceActions{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:7px;
}

.adminWorkspaceActionBtn{
  min-height:var(--ui-control-min,44px);
  padding:8px 12px;
  font-size:.86rem;
}

/* =========================
   12) MAIN + EDITOR
========================= */

.adminMainNew{
  width:min(100%,var(--admin-content-max));
  margin:0 auto;
}

.adminTabsNew{
  margin-bottom:10px;
}

.adminEditor{
  container:admin-editor / inline-size;
  width:100%;
  min-height:max(0px,calc(var(--app-height,100dvh) - 130px));
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  overflow:visible;
}

.adminEditorPage,
.adminOnePageEditor{
  width:100%;
  min-width:0;
}

.adminEditorPage{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.adminEditorHeader{
  width:100%;
  min-width:0;
  padding:15px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  border:1px solid var(--admin-line);
  border-radius:var(--admin-radius-lg);
  background:var(--admin-surface);
  box-shadow:var(--admin-shadow-soft);
}

.adminEditorHeader h2,
.adminEditorHeader h3{
  margin:0;
  color:var(--admin-secondary);
  font-size:1.35rem;
  line-height:1.2;
}

.adminEditorHeader p{
  margin:4px 0 0;
  color:var(--admin-muted);
  font-size:.85rem;
  line-height:1.45;
}

.adminEditorBlock{
  width:100%;
  min-width:0;
  padding:15px;
  border:1px solid var(--admin-line);
  border-radius:var(--admin-radius-lg);
  background:var(--admin-surface);
  box-shadow:var(--admin-shadow-soft);
}

.adminEmptyState{
  min-height:190px;
  padding:24px;
  display:grid;
  place-items:center;
  border:1px dashed #BCC6CE;
  border-radius:var(--admin-radius-lg);
  color:var(--admin-muted);
  background:rgba(246,247,249,.82);
  text-align:center;
  font-size:.98rem;
  line-height:1.6;
}

/* =========================
   13) HOME DASHBOARD
   SIMPLE PROFESSIONAL DESIGN
========================= */

.adminHomePro{
  width:100%;
  min-width:0;

  display:grid;

  gap:12px;
}


/* =========================================================
   HOME STATS
   حالة النموذج / الفقرات الجاهزة / الفقرات الظاهرة
========================================================= */

.adminHomeStats{
  width:100%;
  min-width:0;

  display:grid;

  grid-template-columns:
    repeat(var(--admin-cols-3,3),minmax(0,1fr));

  gap:9px;
}


/* =========================
   STAT CARD
========================= */

.adminHomeStatCard{
  position:relative;

  width:100%;
  min-width:0;

  min-height:72px;

  padding:11px 14px 11px 17px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:12px;

  overflow:hidden;

  border:1px solid
    rgba(35,61,77,.13);

  border-radius:16px;

  background:#FFFFFF;

  box-shadow:
    0 6px 18px
    rgba(35,61,77,.05);
}


/* الخط الجانبي */

.adminHomeStatCard::before{
  content:"";

  position:absolute;

  top:12px;
  right:0;
  bottom:12px;

  width:4px;

  border-radius:
    4px 0 0 4px;

  background:var(--admin-secondary);
}


/* =========================
   STAT LABEL
========================= */

.adminHomeStatCard span{
  min-width:0;

  color:var(--admin-secondary);

  font-size:1.05rem;
  line-height:1.15;

  font-weight:400;
}


/* =========================
   STAT VALUE
========================= */

.adminHomeStatCard strong{
  flex:0 0 auto;

  min-width:58px;
  height:44px;

  padding:0 10px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:12px;

  color:#FFFFFF;

  background:var(--admin-secondary);

  box-shadow:
    0 5px 13px
    rgba(35,61,77,.12);

  font-family:"HanakaDisplay",sans-serif;

  font-size:1.65rem;
  line-height:1;

  font-weight:400;
}


/* =========================
   STAT COLORS
========================= */

.adminHomeStatCard:nth-child(1)::before{
  background:var(--admin-primary);
}

.adminHomeStatCard:nth-child(1) strong{
  background:var(--admin-primary);

  box-shadow:
    0 5px 13px
    rgba(254,127,45,.16);
}


.adminHomeStatCard:nth-child(2)::before{
  background:var(--admin-green);
}

.adminHomeStatCard:nth-child(2) strong{
  background:var(--admin-green);

  box-shadow:
    0 5px 13px
    rgba(0,127,0,.13);
}


.adminHomeStatCard:nth-child(3)::before{
  background:var(--admin-secondary);
}

.adminHomeStatCard:nth-child(3) strong{
  background:var(--admin-secondary);
}


/* =========================================================
   SEGMENTS GRID
========================================================= */

.adminHomeSegmentsGrid{
  width:100%;
  min-width:0;

  display:grid;

  grid-template-columns:
    repeat(var(--admin-cols-4,4),minmax(0,1fr));

  gap:10px;
}


/* =========================
   SEGMENT CARD
========================= */

.adminHomeSegmentCard{
  position:relative;

  width:100%;
  min-width:0;

  overflow:hidden;

  border:1px solid
    rgba(35,61,77,.14);

  border-radius:18px;

  background:#FFFFFF;

  box-shadow:
    0 7px 20px
    rgba(35,61,77,.055);

  transition:
    transform .18s var(--admin-ease),
    border-color .18s var(--admin-ease),
    box-shadow .18s var(--admin-ease);
}


/* =========================
   RIGHT ACCENT
========================= */

.adminHomeSegmentCard::before{
  content:"";

  position:absolute;

  top:14px;
  right:0;
  bottom:14px;

  z-index:2;

  width:4px;

  border-radius:
    4px 0 0 4px;

  background:var(--admin-primary);
}


/* =========================
   TOP ACCENT
========================= */

.adminHomeSegmentCard::after{
  content:"";

  position:absolute;

  top:0;
  left:18px;

  z-index:2;

  width:36px;
  height:4px;

  border-radius:
    0 0 5px 5px;

  background:var(--admin-secondary);
}


/* =========================
   COMPLETE STATE
========================= */

.adminHomeSegmentCard.isDone{
  border-color:
    rgba(0,127,0,.25);
}

.adminHomeSegmentCard.isDone::before{
  background:var(--admin-green);
}


/* =========================
   DISABLED STATE
========================= */

.adminHomeSegmentCard.isDisabled{
  opacity:.56;

  filter:grayscale(.35);
}


/* =========================
   CARD HOVER
========================= */

.adminHomeSegmentCard:hover{
  transform:translateY(-2px);

  border-color:
    rgba(254,127,45,.34);

  box-shadow:
    0 12px 28px
    rgba(35,61,77,.09);
}


/* =========================
   SEGMENT MAIN
========================= */

.adminHomeSegmentMain{
  width:100%;
  min-width:0;

  min-height:118px;

  padding:
    17px
    17px
    13px
    13px;

  display:flex;
  flex-direction:column;

  justify-content:space-between;

  gap:10px;

  color:inherit;

  background:#FFFFFF;

  text-align:right;
}

.adminHomeSegmentMain:hover{
  background:#FFFCFA;
}


/* =========================
   SEGMENT TOP
========================= */

.adminHomeSegmentTop{
  width:100%;
  min-width:0;

  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:9px;
}


/* =========================
   TITLE BOX
========================= */

.adminHomeSegmentTitleBox{
  min-width:0;

  flex:1;
}


/* =========================
   SEGMENT TITLE
========================= */

.adminHomeSegmentTitle{
  min-width:0;

  color:var(--admin-secondary);

  font-size:1.65rem;
  line-height:1.15;

  font-weight:400;

  white-space:normal;
  overflow:visible;
  text-overflow:clip;

  word-break:normal;
  overflow-wrap:break-word;
}

/* =========================
   SEGMENT STATUS
========================= */

.adminHomeSegmentStatus{
  flex:0 0 auto;

  min-width:54px;
  min-height:27px;

  padding:4px 8px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:1px solid transparent;

  border-radius:9px;

  text-align:center;

  font-size:.73rem;
  line-height:1;

  font-weight:400;
}

.adminHomeSegmentStatus.ready{
  color:var(--admin-green);

  border-color:
    rgba(0,127,0,.14);

  background:var(--admin-green-soft);
}

.adminHomeSegmentStatus.missing{
  color:var(--admin-red);

  border-color:
    rgba(127,0,0,.13);

  background:var(--admin-red-soft);
}


/* =========================
   PROGRESS
========================= */

.adminHomeProgress{
  width:100%;
  min-width:0;

  display:grid;

  gap:6px;
}


/* =========================
   PROGRESS INFO
========================= */

.adminHomeProgressInfo{
  width:100%;
  min-width:0;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:8px;

  color:var(--admin-muted);

  font-size:.8rem;
  line-height:1.1;
}

.adminHomeProgressInfo strong{
  color:var(--admin-secondary);

  font-size:.84rem;
  line-height:1;

  font-weight:400;
}


/* =========================
   PROGRESS BAR
========================= */

.adminHomeProgressBar{
  width:100%;

  height:6px;

  overflow:hidden;

  border-radius:999px;

  background:#E7EBEE;
}

.adminHomeProgressBar span{
  display:block;

  width:0;
  height:100%;

  border-radius:inherit;

  background:var(--admin-primary);

  transition:
    width .35s
    var(--admin-ease);
}

.adminHomeSegmentCard.isDone
.adminHomeProgressBar span{
  background:var(--admin-green);
}
/* =========================
   14) UNIFIED SEGMENT HEADER
========================= */

.adminShellNew .adminWorkspace .adminEditor .adminOnePageEditor > :is(
  .adminEditorTopBar,
  .compactAdminEditorTopBar,
  .archiveAdminTopBar
),
.adminShellNew .adminWorkspace .adminEditor .randomChallengeAdminPage > .randomChallengeAdminTopBar{
  width:100%;
  min-width:0;
  margin:0 0 12px;
  padding:12px 15px;
  position:relative;
  z-index:10;
  display:grid;
  grid-template-columns:var(--admin-top-columns,minmax(190px,1fr) auto);
  grid-template-areas:
    "heading actions"
    "tools tools";
  align-items:center;
  gap:10px 14px;
  overflow:visible;
  border:1px solid var(--admin-line);
  border-radius:var(--admin-radius-lg);
  background:var(--admin-surface);
  box-shadow:var(--admin-shadow-soft);
}

.adminShellNew .adminWorkspace .adminEditor :is(
  .adminSectionHeaderPro,
  .adminSectionHeaderInline,
  .adminEditorTopBarWithActions
){
  flex-wrap:unset;
  justify-content:unset;
}

.adminShellNew .adminWorkspace .adminEditor :is(
  .adminEditorTopBar,
  .compactAdminEditorTopBar,
  .archiveAdminTopBar
) .adminSectionTitle::before,
.adminShellNew .adminWorkspace .adminEditor .randomChallengeAdminPage > .randomChallengeAdminTopBar::before{
  content:none;
  display:none;
}

.adminShellNew .adminWorkspace .adminEditor .adminOnePageEditor > :is(
  .adminEditorTopBar,
  .compactAdminEditorTopBar,
  .archiveAdminTopBar
) > :first-child,
.adminShellNew .adminWorkspace .adminEditor .randomChallengeAdminPage > .randomChallengeAdminTopBar > .adminEditorTitleBox{
  grid-area:heading;
  width:100%;
  min-width:0;
  margin:0;
  padding-inline-start:15px;
  position:relative;
  display:grid;
  align-content:center;
  gap:3px;
}

.adminShellNew .adminWorkspace .adminEditor .adminOnePageEditor > :is(
  .adminEditorTopBar,
  .compactAdminEditorTopBar,
  .archiveAdminTopBar
) > :first-child::before,
.adminShellNew .adminWorkspace .adminEditor .randomChallengeAdminPage > .randomChallengeAdminTopBar > .adminEditorTitleBox::before{
  content:"";
  position:absolute;
  inset-block:3px;
  inset-inline-start:0;
  width:4px;
  border-radius:999px;
  background:var(--admin-primary);
}

.adminShellNew .adminWorkspace .adminEditor :is(
  .adminEditorTopBar,
  .compactAdminEditorTopBar,
  .archiveAdminTopBar
) :is(.adminSectionTitle,h2),
.adminShellNew .adminWorkspace .adminEditor .randomChallengeAdminPage > .randomChallengeAdminTopBar .adminEditorTitleBox h2{
  width:auto;
  margin:0;
  padding:0;
  display:block;
  color:var(--admin-secondary);
  font-family:"HanakaText",sans-serif;
  font-size:clamp(1.18rem,2.2vw,1.55rem);
  line-height:1.2;
  text-align:start;
}

.adminShellNew .adminWorkspace .adminEditor :is(
  .adminEditorTopBar,
  .compactAdminEditorTopBar,
  .archiveAdminTopBar
) :is(.adminSectionHint,p,span),
.adminShellNew .adminWorkspace .adminEditor .randomChallengeAdminPage > .randomChallengeAdminTopBar .adminEditorTitleBox span{
  max-width:720px;
  margin:3px 0 0;
  color:var(--admin-muted);
  font-size:.8rem;
  line-height:1.45;
  text-align:start;
}

.adminShellNew .adminWorkspace .adminEditor .adminOnePageEditor > :is(
  .adminEditorTopBar,
  .compactAdminEditorTopBar,
  .archiveAdminTopBar
) > .adminInlineActions{
  grid-area:actions;
  width:auto;
  min-width:0;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:7px;
}

.adminShellNew .adminWorkspace .adminEditor .adminOnePageEditor > :is(
  .adminEditorTopBar,
  .compactAdminEditorTopBar,
  .archiveAdminTopBar
) > .adminInlineActions > button{
  width:auto;
  min-width:96px;
  max-width:none;
  min-height:var(--ui-control-min,44px);
  margin:0;
  padding:8px 12px;
  flex:0 1 auto;
  border-radius:11px;
  font-size:.82rem;
  line-height:1.1;
  white-space:nowrap;
}

.adminShellNew .adminWorkspace .adminEditor .adminOnePageEditor > :is(
  .adminEditorTopBar,
  .compactAdminEditorTopBar,
  .archiveAdminTopBar
) > .adminInlineActions > .adminSaveBtn{
  color:#FFFFFF;
  border:1px solid var(--admin-primary);
  background:var(--admin-primary);
  box-shadow:0 7px 16px rgba(254,127,45,.18);
}

.adminShellNew .adminWorkspace .adminEditor .adminOnePageEditor > :is(
  .adminEditorTopBar,
  .compactAdminEditorTopBar,
  .archiveAdminTopBar
) > .adminInlineActions > .adminBtnMango{
  color:#FFFFFF;
  border:1px solid var(--admin-secondary);
  background:var(--admin-secondary);
  box-shadow:none;
}

.adminShellNew .adminWorkspace .adminEditor .adminOnePageEditor > :is(
  .adminEditorTopBar,
  .compactAdminEditorTopBar,
  .archiveAdminTopBar
) > .adminInlineActions > :is(.adminBtnLight,.adminModelSoftBtn){
  color:var(--admin-secondary);
  border:1px solid var(--admin-line);
  background:var(--admin-soft);
}

.adminShellNew .adminWorkspace .adminEditor .adminOnePageEditor > :is(
  .adminEditorTopBar,
  .compactAdminEditorTopBar,
  .archiveAdminTopBar
) > .adminInlineActions > :is(.adminDeleteBtn,.adminDeleteAllBtn){
  color:var(--admin-red);
  border:1px solid rgba(127,0,0,.18);
  background:var(--admin-red-soft);
  box-shadow:none;
}

.adminShellNew .adminWorkspace .adminEditor .adminOnePageEditor > :is(
  .adminEditorTopBar,
  .compactAdminEditorTopBar,
  .archiveAdminTopBar
) > .adminInlineActions > :is(.adminDeleteBtn,.adminDeleteAllBtn):hover{
  color:#FFFFFF;
  border-color:var(--admin-red);
  background:var(--admin-red);
}

.adminShellNew .adminWorkspace .adminEditor .adminOnePageEditor > :is(
  .adminEditorTopBar,
  .compactAdminEditorTopBar,
  .archiveAdminTopBar
) > .adminSectionToolsRow{
  grid-area:tools;
  width:100%;
  min-width:0;
  margin:0;
  padding:9px 0 0;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:wrap;
  gap:6px;
  overflow:visible;
  border-top:1px solid #EDF0F2;
}

.adminShellNew .adminWorkspace .adminEditor .adminOnePageEditor > :is(
  .adminEditorTopBar,
  .compactAdminEditorTopBar,
  .archiveAdminTopBar
) > .adminSectionToolsRowInline{
  flex-basis:auto;
  padding-top:9px;
  border-top:1px solid #EDF0F2;
}

.adminShellNew .adminWorkspace .adminEditor .adminSectionToolsRow > :is(
  .adminToolTabs,
  .adminToolActions,
  .adminMovedTool
){
  min-width:0;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
}

.adminShellNew .adminWorkspace .adminEditor .adminSectionToolsRow button{
  width:auto;
  min-width:42px;
  min-height:var(--ui-control-min,44px);
  margin:0;
  padding:7px 10px;
  border:1px solid var(--admin-line);
  border-radius:10px;
  color:var(--admin-secondary);
  background:var(--admin-soft);
  font-size:.78rem;
  line-height:1.1;
  white-space:nowrap;
}

.adminShellNew .adminWorkspace .adminEditor .adminSectionToolsRow button:hover{
  border-color:rgba(254,127,45,.30);
  background:var(--admin-primary-soft);
}

.adminShellNew .adminWorkspace .adminEditor .adminSectionToolsRow button.innerTabActive{
  color:#FFFFFF;
  border-color:var(--admin-secondary);
  background:var(--admin-secondary);
  box-shadow:0 6px 14px rgba(35,61,77,.14);
}

.adminShellNew .adminWorkspace .adminEditor .randomChallengeAdminPage > .randomChallengeAdminTopBar{
  grid-template-columns:1fr;
  grid-template-areas:"heading";
  margin-bottom:0;
}

.adminShellNew .adminWorkspace .adminEditor .randomChallengeAdminPage > .randomChallengeAdminTabs{
  margin:0;
}

/* =========================
   15) SHARED EDITOR CARDS
========================= */

.adminOnePageEditor{
  min-width:0;
}

.adminEditCardsGrid{
  width:100%;
  min-width:0;
  display:grid;
  grid-template-columns:repeat(var(--admin-cols-2,2),minmax(0,1fr));
  grid-auto-rows:max-content;
  gap:10px;
  align-items:start;
}

.adminEditCardsGrid.hasOpenCard{
  grid-template-columns:1fr;
}

.adminEditItemCard{
  width:100%;
  min-width:0;
  min-height:0;
  height:auto;
  align-self:start;
  grid-column:auto;
  overflow:hidden;
  border:1px solid var(--admin-line);
  border-radius:var(--admin-radius-md);
  background:#FFFFFF;
  box-shadow:0 6px 18px rgba(35,61,77,.045);
  transition:
    border-color .18s var(--admin-ease),
    background-color .18s var(--admin-ease),
    box-shadow .18s var(--admin-ease);
}

.adminEditItemCard:not([open]){
  grid-column:auto;
  min-height:0;
  height:auto;
}

.adminEditItemCard:not([open]) > :not(summary){
  display:none !important;
}

.adminEditItemCard[open]{
  grid-column:1 / -1;
  height:auto;
  border-color:rgba(254,127,45,.42);
  background:#FFFFFF;
  box-shadow:0 12px 30px rgba(35,61,77,.09);
}

.adminEditItemCard.isDone{
  border-color:rgba(0,127,0,.30);
}

.adminEditItemCard.isDone:not([open]){
  background:#FBFFFB;
}

.adminEditItemCard.isMissing{
  border-color:rgba(127,0,0,.28);
}

.adminEditItemCard.isMissing:not([open]){
  background:#FFFDFD;
}

.adminEditItemCard.isDone .adminEditStatusPill{
  color:var(--admin-green);
  border:1px solid rgba(0,127,0,.18);
  background:var(--admin-green-soft);
}

.adminEditItemCard.isMissing .adminEditStatusPill,
.adminEditItemCard:not(.isDone) .adminEditStatusPill{
  color:var(--admin-red);
  border:1px solid rgba(127,0,0,.16);
  background:var(--admin-red-soft);
}

.adminEditItemCard summary{
  width:100%;
  min-height:66px;
  padding:11px 13px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:11px;
  list-style:none;
  cursor:pointer;
  user-select:none;
  background:transparent;
}

.adminEditItemCard summary::-webkit-details-marker{
  display:none;
}

.adminEditItemCard[open] summary{
  border-bottom:1px solid #EDF0F2;
  background:linear-gradient(180deg,#FFFFFF,var(--admin-soft));
}

.adminEditItemCard summary::after{
  content:"⌄";
  width:32px;
  height:32px;
  min-width:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  color:#FFFFFF;
  background:var(--admin-secondary);
  font-family:Arial,sans-serif;
  font-size:.88rem;
  line-height:1;
  transition:
    transform .18s var(--admin-ease),
    background-color .18s var(--admin-ease);
}

.adminEditItemCard.isDone summary::after{
  background:var(--admin-green);
}

.adminEditItemCard.isMissing summary::after{
  background:var(--admin-red);
}

.adminEditItemCard[open] summary::after{
  transform:rotate(180deg);
  background:var(--admin-primary);
}

.adminEditItemTitle{
  min-width:0;
  flex:1;
  display:grid;
  gap:3px;
}

.adminEditItemTitle strong{
  color:var(--admin-secondary);
  font-size:1.02rem;
  line-height:1.28;
}

.adminEditItemTitle span{
  overflow:hidden;
  color:var(--admin-muted);
  font-size:.78rem;
  line-height:1.35;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.adminEditItemMeta{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
}

.adminEditStatusPill,
.adminEditProgressPill{
  min-height:28px;
  padding:5px 9px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  font-size:.72rem;
  line-height:1;
}

.adminEditProgressPill{
  color:var(--admin-secondary);
  border:1px solid var(--admin-line);
  background:#FFFFFF;
}

.adminEditItemBody{
  width:100%;
  padding:14px;
  animation:none;
}

/* =========================
   16) MEDIA PREVIEW
========================= */

:is(
  .finalAdminImagePreview,
  .finalAdminPreviewBox,
  .adminImagePreview,
  .adminMediaPreview
){
  width:100%;
  min-height:150px;
  overflow:hidden;
  display:grid;
  place-items:center;
  border:1px solid var(--admin-line);
  border-radius:var(--admin-radius-sm);
  background:var(--admin-soft);
}

.previewImg,
:is(
  .finalAdminImagePreview,
  .finalAdminPreviewBox,
  .adminImagePreview,
  .adminMediaPreview
) > :is(img,video){
  width:100%;
  max-height:340px;
  object-fit:contain;
  background:#F0F3F5;
}

.emptyImageHint{
  padding:20px;
  color:var(--admin-muted);
  text-align:center;
}

/* =========================
   17) SETTINGS PAGE
========================= */

.adminSettingsGamePage{
  width:100%;
  display:grid;
  gap:14px;
}

.adminSettingsMainSection{
  width:100%;
  padding:14px;
  display:grid;
  gap:14px;
  border:1px solid var(--admin-line);
  border-radius:var(--admin-radius-lg);
  background:var(--admin-surface);
  box-shadow:var(--admin-shadow-soft);
}

.adminSettingsSectionHead{
  width:100%;
  min-width:0;
  padding-bottom:11px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px solid var(--admin-line);
}

.adminSettingsSectionHead > div{
  min-width:0;
}

.adminSettingsSectionHead h2{
  margin:0;
  color:var(--admin-secondary);
  font-size:1.2rem;
  line-height:1.2;
}

.adminSettingsSectionHead span{
  display:block;
  margin-top:4px;
  color:var(--admin-muted);
  font-size:.78rem;
  line-height:1.35;
}

.adminSettingsSectionHead > strong{
  width:40px;
  height:40px;
  min-width:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  color:#FFFFFF;
  background:var(--admin-secondary);
  font-size:.9rem;
  line-height:1;
}

.adminSettingsGameGrid{
  width:100%;
  display:grid;
  grid-template-columns:repeat(var(--admin-cols-2,2),minmax(0,1fr));
  gap:10px;
}

.adminSettingGameCard{
  min-width:0;
  min-height:120px;
  padding:12px;
  display:grid;
  grid-template-rows:auto 1fr;
  align-content:stretch;
  gap:11px;
  border:1px solid var(--admin-line);
  border-radius:var(--admin-radius-md);
  background:var(--admin-soft);
  box-shadow:none;
}

.adminSettingGameHead{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.adminSettingGameTitleBox{
  min-width:0;
  flex:1;
}

.adminSettingGameTitleBox h3{
  margin:0;
  color:var(--admin-secondary);
  font-size:1.13rem;
  line-height:1.2;
}

.adminSettingGameTitleBox h3 span{
  display:block;
  margin-top:4px;
  color:var(--admin-muted);
  font-size:.74rem;
  line-height:1.3;
}

.adminSettingGameSelected{
  width:40px;
  height:40px;
  min-width:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:12px;
  color:#FFFFFF;
  background:var(--admin-secondary);
  font-size:max(1rem,.92rem);
  line-height:1;
}

.adminSettingGameOptions{
  width:100%;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(46px,1fr));
  align-items:end;
  gap:7px;
}

.adminSettingGameOption{
  width:100%;
  min-width:0;
  min-height:42px;
  padding:7px;
  border:1px solid var(--admin-line);
  border-radius:11px;
  color:var(--admin-secondary);
  background:#FFFFFF;
  font-size:.86rem;
  line-height:1;
  cursor:pointer;
  transition:
    transform .15s var(--admin-ease),
    border-color .15s var(--admin-ease),
    background-color .15s var(--admin-ease),
    color .15s var(--admin-ease);
}

.adminSettingGameOption:hover{
  transform:translateY(-1px);
  border-color:rgba(254,127,45,.42);
  background:var(--admin-primary-soft);
}

.adminSettingGameOption.selected{
  color:#FFFFFF;
  border-color:var(--admin-primary);
  background:var(--admin-primary);
}

.adminSettingGameOption:disabled{
  color:var(--admin-muted);
  background:#E9ECEF;
  cursor:not-allowed;
  transform:none;
}

.adminSettingsEmpty{
  min-height:120px;
  padding:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px dashed var(--admin-line);
  border-radius:var(--admin-radius-md);
  color:var(--admin-muted);
  background:var(--admin-soft);
  font-size:.84rem;
  line-height:1.5;
  text-align:center;
}

/* =========================
   18) CHALLENGE SETTINGS
========================= */

.adminChallengeSettingsSection{
  width:100%;
  padding:0;
  display:block;
  overflow:hidden;
  border:1px solid var(--admin-line);
  border-radius:var(--admin-radius-lg);
  background:var(--admin-surface);
  box-shadow:var(--admin-shadow-soft);
}

.adminChallengeSettingsSummary{
  width:100%;
  min-height:66px;
  padding:11px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  list-style:none;
  cursor:pointer;
  user-select:none;
  background:var(--admin-soft);
}

.adminChallengeSettingsSummary::-webkit-details-marker{
  display:none;
}

.adminChallengeSettingsSummaryTitle{
  min-width:0;
}

.adminChallengeSettingsSummaryTitle h2{
  margin:0;
  color:var(--admin-secondary);
  font-size:1.16rem;
  line-height:1.2;
}

.adminChallengeSettingsSummaryTitle span{
  display:block;
  margin-top:4px;
  color:var(--admin-muted);
  font-size:.74rem;
  line-height:1.3;
}

.adminChallengeSettingsSummaryMeta{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:7px;
}

.adminChallengeSettingsSummaryMeta > span{
  min-width:44px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  color:#FFFFFF;
  background:var(--admin-primary);
  font-size:.76rem;
  line-height:1;
}

.adminChallengeSettingsArrow{
  width:34px;
  height:34px;
  min-width:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  color:#FFFFFF;
  background:var(--admin-secondary);
  font-size:.68rem;
  line-height:1;
  transition:transform .18s var(--admin-ease);
}

.adminChallengeSettingsDetails[open] .adminChallengeSettingsArrow{
  transform:rotate(180deg);
}

.adminChallengeSettingsBody{
  width:100%;
  padding:12px;
  border-top:1px solid var(--admin-line);
}

.adminChallengeSettingsGrid{
  width:100%;
  display:grid;
  grid-template-columns:repeat(var(--admin-cols-5,5),minmax(0,1fr));
  gap:8px;
  align-items:stretch;
}

.adminChallengeSettingsGrid .adminSettingGameCard{
  min-width:0;
  min-height:124px;
  padding:10px;
  gap:9px;
}

.adminChallengeSettingsGrid .adminSettingGameHead{
  align-items:flex-start;
  flex-direction:column;
}

.adminChallengeSettingsGrid .adminSettingGameTitleBox{
  width:100%;
}

.adminChallengeSettingsGrid .adminSettingGameTitleBox h3{
  font-size:.98rem;
  line-height:1.2;
}

.adminChallengeSettingsGrid .adminSettingGameTitleBox h3 span{
  margin-top:4px;
  font-size:.66rem;
  line-height:1.25;
}

.adminToggleSettingCard{
  transition:
    opacity .16s var(--admin-ease),
    border-color .16s var(--admin-ease),
    background-color .16s var(--admin-ease);
}

.adminToggleSettingCard.isDisabled{
  opacity:.66;
  background:#F4F5F6;
}

.adminToggleSettingCard.isEnabled{
  border-color:rgba(0,127,0,.22);
  background:#F8FFF8;
}

.adminSettingToggleBtn{
  width:100%;
  min-width:0;
  min-height:var(--ui-control-min,44px);
  padding:7px 9px;
  border:1px solid rgba(127,0,0,.16);
  border-radius:10px;
  color:var(--admin-red);
  background:var(--admin-red-soft);
  font-size:.74rem;
  line-height:1;
}

.adminSettingToggleBtn.active{
  color:var(--admin-green);
  border-color:rgba(0,127,0,.18);
  background:var(--admin-green-soft);
}

.adminChallengeAuctionCount{
  display:grid;
  gap:8px;
}

.adminChallengeAuctionCountTitle{
  color:var(--admin-muted);
  font-size:.76rem;
  line-height:1.3;
}

/* =========================
   19) GLOBAL VISIBILITY
========================= */

.globalSegmentVisibilityOverlay,
.adminModalOverlay,
.adminConfirmOverlay{
  position:fixed;
  inset:var(--visual-offset-top,0px) 0 auto;
  height:var(--app-height,100dvh);
  overflow:auto;
  overscroll-behavior:contain;
  z-index:1200;
  padding:
    var(--admin-safe-top)
    var(--admin-safe-right)
    var(--admin-safe-bottom)
    var(--admin-safe-left);
  display:grid;
  place-items:center;
  background:rgba(21,44,57,.54);
  backdrop-filter:blur(2px);
}

.globalSegmentVisibilityPanel{
  width:min(100%,980px);
  max-height:max(0px,calc(var(--app-height,100dvh) - var(--admin-safe-top) - var(--admin-safe-bottom)));
  padding:18px;
  overflow:auto;
  border:1px solid var(--admin-line);
  border-radius:var(--admin-radius-xl);
  background:var(--admin-surface);
  box-shadow:var(--admin-shadow-strong);
}

.globalSegmentVisibilityHead{
  margin-bottom:14px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.globalSegmentVisibilityHead h2{
  margin:0;
  color:var(--admin-secondary);
  font-size:1.3rem;
  line-height:1.25;
}

.globalSegmentVisibilityHead p{
  margin:4px 0 0;
  color:var(--admin-muted);
  font-size:.84rem;
  line-height:1.5;
}

.globalSegmentCardsGrid{
  display:grid;
  grid-template-columns:repeat(var(--admin-cols-3,3),minmax(0,1fr));
  gap:9px;
}

.globalSegmentToggleCard{
  min-height:66px;
  padding:11px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border:1px solid var(--admin-line);
  border-radius:var(--admin-radius-md);
  color:var(--admin-secondary);
  background:var(--admin-soft);
  text-align:right;
}

.globalSegmentToggleCard.isEnabled{
  border-color:rgba(0,127,0,.22);
  background:var(--admin-green-soft);
}

.globalSegmentToggleCard.isDisabled{
  opacity:.68;
}

.globalSegmentToggleTitle{
  min-width:0;
  font-size:.92rem;
  line-height:1.3;
}

.globalSegmentToggleSwitch{
  flex:0 0 auto;
  width:44px;
  height:25px;
  padding:3px;
  direction:ltr;
  border-radius:999px;
  background:#C8D0D6;
  transition:background-color .16s var(--admin-ease);
}

.globalSegmentToggleSwitch span{
  display:block;
  width:19px;
  height:19px;
  border-radius:50%;
  background:#FFFFFF;
  box-shadow:0 3px 8px rgba(35,61,77,.18);
  transform:translateX(0);
  transition:transform .18s var(--admin-ease);
}

.globalSegmentToggleCard.isEnabled .globalSegmentToggleSwitch{
  background:var(--admin-green);
}

.globalSegmentToggleCard.isEnabled .globalSegmentToggleSwitch span{
  transform:translateX(19px);
}

/* =========================
   20) MODALS
========================= */

.adminModalCard,
.adminConfirmCard{
  width:min(100%,560px);
  max-height:max(0px,calc(var(--app-height,100dvh) - var(--admin-safe-top) - var(--admin-safe-bottom)));
  padding:20px;
  overflow:auto;
  border:1px solid var(--admin-line);
  border-radius:var(--admin-radius-xl);
  background:var(--admin-surface);
  box-shadow:var(--admin-shadow-strong);
}

.adminModalTitle{
  margin-bottom:16px;
  color:var(--admin-secondary);
  font-size:1.22rem;
  line-height:1.3;
}

.adminModalActions,
.adminConfirmActions{
  margin-top:16px;
  display:flex;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:8px;
}

.adminConfirmCard{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:13px;
}

.adminConfirmIcon{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:14px;
  color:var(--admin-secondary);
  background:var(--admin-soft);
  font-size:1.12rem;
}

.adminConfirmCard.danger .adminConfirmIcon{
  color:var(--admin-red);
  background:var(--admin-red-soft);
}

.adminConfirmContent h3{
  margin:0;
  color:var(--admin-secondary);
  font-size:1.14rem;
  line-height:1.3;
}

.adminConfirmContent p{
  margin:6px 0 0;
  color:var(--admin-muted);
  font-size:.88rem;
  line-height:1.55;
}

.adminConfirmActions{
  grid-column:1 / -1;
}

/* =========================
   21) MODEL CHECK
========================= */

.modelCheckModalCard{
  width:min(100%,760px);
}

.modelCheckSummary{
  margin-bottom:12px;
  padding:10px 12px;
  border-radius:var(--admin-radius-sm);
  line-height:1.4;
}

.modelCheckSummary.ready{
  color:var(--admin-green);
  background:var(--admin-green-soft);
}

.modelCheckSummary.notReady{
  color:var(--admin-red);
  background:var(--admin-red-soft);
}

.modelCheckList{
  display:grid;
  gap:8px;
}

.modelCheckItem{
  padding:11px;
  border:1px solid var(--admin-line);
  border-radius:var(--admin-radius-sm);
  background:var(--admin-soft);
}

.modelCheckItem.ok{
  border-color:rgba(0,127,0,.20);
  background:var(--admin-green-soft);
}

.modelCheckItem.bad{
  border-color:rgba(127,0,0,.16);
  background:var(--admin-red-soft);
}

.modelCheckItemHead{
  display:flex;
  align-items:center;
  gap:8px;
}

.modelCheckIcon{
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#FFFFFF;
  background:var(--admin-red);
}

.modelCheckItem.ok .modelCheckIcon{
  background:var(--admin-green);
}

.modelCheckDetails{
  margin-top:7px;
  padding-right:32px;
  display:grid;
  gap:3px;
  color:var(--admin-muted);
  font-size:.8rem;
  line-height:1.45;
}

/* =========================
   22) TOAST
========================= */

.gameToast,
#gameToast{
  position:fixed;
  top:calc(16px + env(safe-area-inset-top,0px));
  left:50%;
  right:auto;
  bottom:auto;
  z-index:1500;
  width:max-content;
  min-width:280px;
  max-width:min(460px,calc(100vw - 28px));
  min-height:60px;
  max-height:160px;
  margin:0;
  padding:9px 11px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  direction:rtl;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.18);
  border-radius:16px;
  color:#FFFFFF;
  background:var(--admin-secondary);
  box-shadow:0 14px 34px rgba(21,44,57,.20),0 4px 10px rgba(21,44,57,.09);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateX(-50%) translateY(-10px);
  transition:
    opacity 150ms ease,
    transform 150ms ease,
    visibility 150ms ease;
}

.gameToast.show,
#gameToast.show{
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(0);
}

.gameToast::before,
#gameToast::before{
  content:"";
  position:absolute;
  top:8px;
  right:0;
  bottom:8px;
  width:4px;
  border-radius:4px 0 0 4px;
  background:rgba(255,255,255,.55);
  pointer-events:none;
}

.gameToastIcon,
#gameToastIcon,
#gameToast .gameToastIcon{
  width:40px;
  height:40px;
  min-width:40px;
  min-height:40px;
  flex:0 0 40px;
  margin:0;
  padding:0;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.22);
  border-radius:12px;
  color:#FFFFFF;
  background:rgba(255,255,255,.14);
  font-family:Arial,sans-serif;
  font-size:1rem;
  line-height:1;
}

.gameToastText,
#gameToastText,
#gameToast .gameToastText{
  width:auto;
  min-width:0;
  max-width:380px;
  margin:0;
  flex:1 1 auto;
  display:block;
  color:#FFFFFF;
  font-size:.94rem;
  line-height:1.5;
  text-align:right;
  white-space:normal;
  overflow-wrap:anywhere;
}

.gameToast.success,
#gameToast.success{
  background:linear-gradient(135deg,#148447 0%,#086634 100%);
}

.gameToast.success::before,
#gameToast.success::before{
  background:#8EE0AE;
}

.gameToast.error,
#gameToast.error{
  background:linear-gradient(135deg,#7D2534 0%,#551420 100%);
}

.gameToast.error::before,
#gameToast.error::before{
  background:#E9A0AC;
}

.gameToast.warning,
#gameToast.warning{
  background:linear-gradient(135deg,#922F42 0%,#681D2B 100%);
}

.gameToast.warning::before,
#gameToast.warning::before{
  background:#F1B0BB;
}

.gameToast.info,
#gameToast.info{
  background:linear-gradient(135deg,#29495C 0%,#152C39 100%);
}

.gameToast.info::before,
#gameToast.info::before{
  background:#A9C4D3;
}

/* =========================
   23) SAVING STATE
========================= */

.adminSavingBtn,
.adminIsSaving .adminSaveBtn{
  position:relative;
  overflow:hidden;
}

.adminSavingBtn::after,
.adminIsSaving .adminSaveBtn::after{
  content:"";
  width:15px;
  height:15px;
  border:2px solid rgba(255,255,255,.46);
  border-top-color:#FFFFFF;
  border-radius:50%;
  animation:adminSpin .75s linear infinite;
}

@keyframes adminSpin{
  to{transform:rotate(360deg)}
}

/* =========================
   24) MISC
========================= */

.adminMoreMenuWrap{
  position:relative;
}

.adminMoreMenu{
  position:absolute;
  z-index:50;
  top:calc(100% + 7px);
  left:0;
  min-width:185px;
  padding:7px;
  border:1px solid var(--admin-line);
  border-radius:var(--admin-radius-sm);
  background:#FFFFFF;
  box-shadow:var(--admin-shadow-card);
}

#printPresenterArea{
  display:none;
}

/* =========================
   25) TABLE
========================= */

.adminTable{
  width:100%;
  overflow:hidden;
  border:1px solid var(--admin-line);
  border-radius:var(--admin-radius-md);
  border-collapse:separate;
  border-spacing:0;
  background:#FFFFFF;
}

.adminTable th,
.adminTable td{
  padding:10px 11px;
  border-bottom:1px solid #EDF0F2;
  color:var(--admin-secondary);
  text-align:right;
  font-size:.86rem;
  line-height:1.4;
}

.adminTable th{
  color:var(--admin-secondary);
  background:var(--admin-soft);
}

.adminTable tr:last-child td{
  border-bottom:0;
}

.adminTable tbody tr:hover td{
  background:#FFFCFA;
}

/* =========================
   26) MODEL VISIBILITY PANEL
========================= */

.adminModelVisibilityModal{
  width:min(94vw,900px);
  max-height:calc(var(--app-height,100dvh) - 32px);
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:14px;
  overflow:hidden;
  border-radius:var(--admin-radius-lg);
}

.adminModelVisibilityModalBody{
  min-height:0;
  overflow:auto;
}

.adminModelVisibilitySection{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.adminModelVisibilityHead{
  text-align:center;
}

.adminModelVisibilityHead h2{
  margin:0 0 5px;
  color:var(--admin-text);
  font-size:1.3rem;
  line-height:1.3;
}

.adminModelVisibilityHead span{
  display:block;
  color:var(--admin-muted);
  font-size:.86rem;
  line-height:1.5;
}

.adminModelVisibilityGrid{
  display:grid;
  grid-template-columns:repeat(var(--admin-cols-3,3),minmax(0,1fr));
  gap:9px;
}

.adminModelVisibilityCard{
  min-height:66px;
  padding:11px 13px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border:1px solid var(--admin-line);
  border-radius:var(--admin-radius-md);
  color:var(--admin-text);
  background:var(--admin-surface);
  cursor:pointer;
}

.adminModelVisibilityCard.isEnabled{
  border-color:rgba(254,127,45,.42);
  background:var(--admin-primary-soft);
}

.adminModelVisibilityCard.isDisabled{
  color:#7B8794;
  background:#F8FAFC;
}

.adminModelVisibilityTitle{
  min-width:0;
  flex:1;
  overflow:hidden;
  color:inherit;
  font-size:.98rem;
  line-height:1.3;
  text-align:right;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.adminModelVisibilitySwitch{
  width:44px;
  height:24px;
  flex:0 0 44px;
  padding:3px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  border-radius:999px;
  background:#CBD5E1;
}

.adminModelVisibilitySwitch span{
  width:18px;
  height:18px;
  border-radius:50%;
  background:#FFFFFF;
  box-shadow:0 3px 8px rgba(15,23,42,.16);
  transition:transform .18s var(--admin-ease);
}

.adminModelVisibilityCard.isEnabled .adminModelVisibilitySwitch{
  background:var(--admin-primary);
}

.adminModelVisibilityCard.isEnabled .adminModelVisibilitySwitch span{
  transform:translateX(-20px);
}

.adminChallengeSettingsGrid
.adminToggleSettingCard.isChallengeParentDisabled{
  opacity:.42;
  filter:grayscale(.35);
}

.adminChallengeSettingsGrid
.adminToggleSettingCard.isChallengeParentDisabled
button{
  cursor:not-allowed;
}

#randomChallengeMainToggleCard{
  opacity:1;
  filter:none;
}

/* =========================
   27) STATUS TEXT COLORS
========================= */

.adminStatusDone{
  color:var(--admin-green) !important;
  background:var(--admin-green-soft) !important;
  border-color:rgba(0,127,0,.22) !important;
}

.adminStatusMissing{
  color:var(--admin-red) !important;
  background:var(--admin-red-soft) !important;
  border-color:rgba(127,0,0,.20) !important;
}

/* =========================
   28) REDUCED MOTION
========================= */

@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    scroll-behavior:auto;
    animation-duration:.01ms;
    animation-iteration-count:1;
    transition-duration:.01ms;
  }
}