/* =========================================================
   Christo Screen — application styles (style.css is the base, proj.css the projection screen).
   ========================================================= */

/* ---------- dashboard in dark mode (style.css itself is light only) ---------- */

body[data-page="dashboard"]:not(.op-light),
body[data-page="manual"]:not(.op-light) {
  --bg: #17181C; --card: #1F2026; --ink: #EDEDEA; --ink-2: #B4B4BC; --ink-3: #8A8A93;
    --line: #33343C; --gold-15: rgba(227,161,0,.16); --gold-deep: #EEC766;
    --ok-bg: rgba(46,158,91,.18); --err-bg: rgba(214,69,69,.18); --warn-bg: rgba(185,111,0,.2);
    --info-bg: rgba(60,120,220,.18);
    background: var(--bg); color: var(--ink);
}

body[data-page="dashboard"]:not(.op-light) .topbar,
body[data-page="manual"]:not(.op-light) .topbar { background: #1F2026; border-color: var(--line); }

body[data-page="dashboard"]:not(.op-light) .input,
body[data-page="dashboard"]:not(.op-light) .select { background: #26272E; color: var(--ink); border-color: var(--line); }

body[data-page="dashboard"]:not(.op-light) .modal,
body:not(.op-light) .yse-dlg { background: #1F2026; color: var(--ink); }

body[data-page="dashboard"]:not(.op-light) .btn-ghost { color: var(--ink); border-color: var(--line); }

body[data-page="dashboard"]:not(.op-light) .badge-grey { background: #2C2D35; color: var(--ink-2); }

.files-note { font-size: 12px; color: var(--ink-3); margin-top: 8px; line-height: 1.5; }

.files-list { max-height: 420px; overflow-y: auto; overflow-x: hidden; padding-right: 2px; margin-bottom: 16px; }

.files-empty { padding: 18px; text-align: center; color: var(--ink-3); font-size: 13px; border: 1.5px dashed var(--line); border-radius: var(--radius); }

.card .nm { cursor: default; }

.session-card .nm { cursor: pointer; }

/* ---------- own dialogs (alert / confirm / prompt) ---------- */

.yse-dlg-back { z-index: 2000; }

.yse-dlg { max-width: 420px; }

.yse-dlg-msg { white-space: pre-line; font-size: 14px; line-height: 1.55; color: var(--ink); margin-bottom: 4px; }

.yse-dlg .yse-dlg-input { margin-top: 14px; width: 100%; }

.yse-dlg-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }

body.op-body .yse-dlg { background: var(--opanel); color: var(--ofg); }

body.op-body .yse-dlg .yse-dlg-msg { color: var(--ofg); }

body.op-body .yse-dlg .btn-ghost { color: var(--ofg); border-color: var(--oline); }

body.op-body .yse-dlg .input { background: var(--opanel-2); color: var(--ofg); border-color: var(--oline); }

/* ---------- library import dialog ---------- */

#importModal { z-index: 1500; }

#importModal .modal { max-width: 500px; }

#importModal .sub { color: var(--ink-2); font-size: 13px; margin-bottom: 14px; line-height: 1.55; }

#importModal .drop-zone {
  display: block; background: var(--card); color: var(--ink-2); margin-bottom: 10px;
    border: 1px solid var(--line); border-radius: 12px; padding: 22px 16px;
    transition: border-color .15s, background .15s, box-shadow .15s;
}

#importModal .drop-zone:hover,
#importModal .drop-zone.over { border-color: var(--gold); background: var(--gold-15); color: var(--ink); }

#importModal .drop-zone.over { box-shadow: 0 0 0 3px var(--gold-15); }

#importModal .drop-zone .big { font-size: 28px; line-height: 1; margin-bottom: 10px; }

#importModal .drop-zone b { color: var(--ink); font-size: 14px; }

#importModal .modal { max-height: calc(100dvh - 40px); overflow-y: auto; }

#importModal .modal h3 { margin-bottom: 8px; }

#importStatus.bad { line-height: 1.45; }

#importClose { min-width: 96px; }

@media (hover: none), (max-width: 560px) {
  #importModal .drop-zone [data-i18n="importDrag"] { display: none; }
  /* no drag-and-drop on a phone */
}

@media (max-width: 560px) {
  #importModal { padding: 12px; align-items: flex-end; }
  #importModal .modal { padding: 20px 18px; border-radius: 16px; max-height: calc(100dvh - 24px); }
  #importClose { width: 100%; }
}

#importBar { height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; margin: 12px 0 6px; display: none; }

#importBar > i { display: block; height: 100%; width: 0; background: var(--gold); transition: width .15s; }

#importStatus { font-size: 12.5px; color: var(--ink-2); min-height: 18px; }

#importStatus.bad { color: var(--err); }

body:not(.op-light) #importModal .modal { background: #1F2026; color: var(--ink); }

body:not(.op-light) #importModal { --ink: #EDEDEA; --ink-2: #B4B4BC; --line: #33343C; --card: #26272E; }

/* =========================================================
   Operator panels: timer, custom slides, logo row
   ========================================================= */

body.op-body { --paccent: #9A6E00; }

body.op-body:not(.op-light) { --paccent: #EEC766; }

body.op-body { --yse-btn-gold: #e3a300; --yse-btn-gold-text: #000; }

body.op-body:not(.op-light) { --yse-btn-gold: #ffb300; --yse-btn-gold-text: #000; }

#yseLogoRow .quick-btn.on { background: var(--yse-btn-gold, #e3a300); border-color: var(--yse-btn-gold, #e3a300); color: var(--yse-btn-gold-text, #000); }

#yseTimerPanel {
  display: none;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    margin: 8px 12px;
    box-sizing: border-box;
    border: 1px solid var(--oline, #ddd);
    border-radius: 8px;
    background: var(--opanel-2, #f6f6f4);
    color: var(--ofg, #26262A);
}

#yseTimerPanel.open { display: flex; }

.yse-t-size-row {
  display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border: 1px solid var(--oline, #eee);
    border-radius: 8px; background: var(--opanel-2, #fff);
    box-sizing: border-box;
}

.yse-t-size-row label { font-size: 11px; font-weight: 700; color: var(--ofg-3, #888); text-transform: uppercase; letter-spacing: .03em; flex: none; }

.yse-t-size-row input[type="range"] { flex: 1; }

.yse-t-size-row #yseTimerSizeLabel { font-size: 12px; font-weight: 800; color: var(--paccent, #9A6E00); min-width: 38px; text-align: right; }

#yseTimerOvertimeBtn.on { border-color: var(--paccent, #9A6E00); background: rgba(154,110,0,.12); color: var(--paccent, #9A6E00); font-weight: 700; }

#yseTimerShow.yse-t-showing { border-color: #e1432b; background: rgba(225,67,43,.10); color: #e1432b; font-weight: 700; animation: yse-show-glow 2.6s ease-in-out infinite; }

#yseTimerShow.yse-t-showing:hover { background: rgba(225,67,43,.18); }

@keyframes yse-show-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(225,67,43,.18); }
  50% { box-shadow: 0 0 0 4px rgba(225,67,43,.06); }
}

@media (prefers-reduced-motion: reduce) {
  #yseTimerShow.yse-t-showing { animation: none; }
}

body.op-body:not(.op-light) #yseTimerShow.yse-t-showing { border-color: #ff6b57; background: rgba(255,107,87,.14); color: #ff8a75; }

.yse-t-quick { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; }

.yse-t-input-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

.yse-t-minsec-group { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; }

.yse-t-input-row .yse-t-input {
  flex: 1 1 0;
    min-width: 0;
    padding: 6px 2px;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    box-sizing: border-box;
    border-radius: 999px;
    border: 1px solid var(--oline, #ccc);
    background: transparent;
    color: var(--ofg, #26262A);
}

.yse-t-input-row .yse-t-apply-btn { flex: 1; min-width: 0; box-sizing: border-box !important; }

.yse-t-preset-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

.yse-t-quick .yse-t-apply-btn {
  flex: 1;
    padding: 6px 0;
    box-sizing: border-box !important;
    border-radius: 999px; font-size: 11px; font-weight: 700;
    border: 1px solid var(--paccent, #9A6E00); background: rgba(154,110,0,.12); color: var(--paccent, #9A6E00); cursor: pointer; text-align: center;
}

.yse-t-quick .yse-t-apply-btn:hover { background: rgba(154,110,0,.2); }

.yse-t-preset-btn {
  flex: 1; min-width: 0; box-sizing: border-box !important;
    font-size: 11px; font-weight: 700; padding: 6px 0; border-radius: 999px;
    border: 1px dashed var(--oline, #ccc); background: transparent; cursor: pointer;
    color: var(--ofg, #26262A);
    user-select: none;
}

.yse-t-preset-btn:hover { background: var(--opanel, #eee); border-style: solid; }

.yse-t-preset-edit-wrap { display: flex; align-items: center; justify-content: center; gap: 2px; width: 100%; }

.yse-t-preset-edit-sep { font-weight: 700; color: var(--paccent, #9A6E00); }

.yse-t-preset-edit-input {
  flex: 1 1 0;
    min-width: 0;
    width: 0; 
    border: none;
    background: transparent;
    outline: none;
    font: inherit;
    font-weight: 700;
    color: var(--paccent, #9A6E00);
    text-align: center;
    padding: 0;
}

.yse-t-preset-edit-input::-webkit-outer-spin-button,
.yse-t-preset-edit-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.yse-t-preset-edit-input[type="number"] { -moz-appearance: textfield; }

.yse-t-top-row {
  display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    padding: 10px;
    border: none;
    border-radius: 8px;
    background: var(--opanel-2, #fff);
}

.yse-t-grid {
  flex: 1 1 240px;
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    gap: 6px;
}

.yse-t-grid .yse-t-control-buttons { grid-column: 1 / -1; }

.yse-t-preview { min-width: 90px; display: flex; align-items: center; justify-content: center; }

.yse-t-control-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

.yse-t-control-buttons button {
  min-width: 0; 
    width: 100%;
    height: 28px;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 8px; font-size: 11px;
    border-radius: 6px;
}

#yseTimerPanel .yse-t-display { font-weight: 800; font-size: 26px; min-width: 90px; text-align: center; font-variant-numeric: tabular-nums; color: var(--ofg, #26262A); }

#yseTimerPanel .yse-t-display.warn { color: #e0a730; }

#yseTimerPanel .yse-t-display.danger { color: #e1432b; animation: yse-pulse 1s ease-in-out infinite; }

.yse-t-pos-grid { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: none; padding-left: 0; border-left: none; }

.yse-t-pos-grid > label { font-size: 10px; font-weight: 700; color: var(--ofg-3, #888); text-transform: uppercase; letter-spacing: .03em; }

.yse-t-pos-buttons { display: grid; grid-template-columns: repeat(3, 32px); gap: 3px; }

.yse-t-pos-buttons button {
  width: 32px; height: 32px; font-size: 13px; border: 1px solid var(--oline, #ddd); border-radius: 5px;
    background: var(--opanel-2, #fff); cursor: pointer; display: flex; align-items: center; justify-content: center;
    color: var(--ofg, #26262A);
}

.yse-t-pos-buttons button:hover { background: var(--opanel, #eee); }

.yse-t-pos-buttons button.on { border-color: var(--paccent, #9A6E00); background: rgba(154,110,0,.15); }

#panel-yseslide { display: none; }

#panel-yseslide.op-panel { border-left: none !important; }

#panel-yseslide.active { display: block; }

.yse-type-picker { display: flex; gap: 8px; margin-bottom: 14px; }

.yse-type-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 12px 8px; border: 1px solid var(--oline, #ddd); border-radius: 10px;
    background: var(--opanel-2, #fff); cursor: pointer; font-size: 12.5px; font-weight: 700;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .12s ease;
    box-sizing: border-box; position: relative; z-index: 1;
}

.yse-type-btn .ic { font-size: 20px; }

.yse-type-btn.on { border-color: var(--paccent, #9A6E00); background: rgba(154,110,0,.08); }

.yse-type-btn:hover:not(.on) { border-color: var(--paccent, #9A6E00); background: rgba(154,110,0,.05); transform: translateY(1px); box-shadow: 0 2px 8px rgba(154,110,0,.15); }

.yse-type-btn.on:hover { transform: translateY(1px); box-shadow: 0 2px 8px rgba(154,110,0,.2); }

.yse-slide-field { margin-bottom: 12px; }

.yse-slide-field label { display: block; font-size: 11.5px; font-weight: 700; color: var(--ofg-3, #888); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .03em; }

.yse-slide-field textarea.op-input { width: 100%; min-height: 90px; resize: vertical; font-family: inherit; padding: 8px 10px; box-sizing: border-box; }

.yse-slide-field .op-hint { margin-top: 4px; }

.yse-slide-hidden { display: none !important; }

.yse-slide-row { display: flex; gap: 8px; margin-top: 4px; }

.yse-slide-row .btn { flex: 1; }

.yse-slide-editing-tag {
  display: none; align-items: center; gap: 6px; font-size: 12px; font-weight: 700;
    color: var(--paccent, #9A6E00); background: rgba(154,110,0,.08);
    padding: 6px 10px; border-radius: 8px; margin-bottom: 10px;
}

.yse-slide-editing-tag.show { display: flex; }

.yse-slide-editing-tag button { margin-left: auto; border: none; background: none; cursor: pointer; font-size: 12px; font-weight: 700; color: inherit; text-decoration: underline; }

.yse-saved-list { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }

#panel-yseslide .yse-slide-row .btn,
#panel-yseslide #yseViewNewBtn { transition: background .15s ease, border-color .15s ease, transform .12s ease, box-shadow .15s ease; }

#panel-yseslide .yse-slide-row .btn:hover:not(:disabled),
#panel-yseslide #yseViewNewBtn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,.12); }

#panel-yseslide .btn-primary,
#panel-yseslide .btn-primary:hover:not(:disabled) { background: var(--yse-btn-gold, #e3a300); border-color: var(--yse-btn-gold, #e3a300); color: var(--yse-btn-gold-text, #000); }

#panel-yseslide #yseViewEditBtn:hover:not(:disabled) { filter: brightness(0.92); }

#panel-yseslide .btn-ghost { background: transparent; border-color: var(--oline, #ddd); color: var(--ofg, #26262A); }

#panel-yseslide .btn-ghost:hover:not(:disabled) { background: var(--yse-btn-gold, #e3a300); border-color: var(--yse-btn-gold, #e3a300); color: var(--yse-btn-gold-text, #000) !important; }

#panel-yseslide #yseViewNewBtn { background: var(--yse-btn-gold, #e3a300); border-color: var(--yse-btn-gold, #e3a300); color: var(--yse-btn-gold-text, #000); }

#panel-yseslide #yseViewNewBtn:hover:not(:disabled) { filter: brightness(0.92); }

#panel-yseslide #yseEditCancel { background: #dc2626; border-color: #dc2626; color: #fff; }

#panel-yseslide #yseEditCancel:hover:not(:disabled) { background: #b91c1c; border-color: #b91c1c; color: #fff !important; }

body.op-body:not(.op-light) #panel-yseslide #yseEditCancel { background: #ef4444; border-color: #ef4444; color: #fff; }

body.op-body:not(.op-light) #panel-yseslide #yseEditCancel:hover:not(:disabled) { background: #dc2626; border-color: #dc2626; color: #fff !important; }

#panel-yseslide .op-input:disabled,
#panel-yseslide .yse-type-btn:disabled,
#panel-yseslide .btn:disabled { opacity: .55; cursor: not-allowed; pointer-events: none; }

.yse-saved-item {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
    border: 1px solid var(--oline, #eee); border-radius: 9px; background: var(--opanel-2, #fff);
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .15s ease;
}

.yse-saved-item:hover {
  border: 1px solid #e3a300 !important;
    border-left: 1px solid #e3a300 !important;
    background: #fcf6e6;
    box-shadow: 0 0 0 1px #ecd6a3;
    transform: translateX(2px);
    cursor: pointer;
    color: #241a00;
}

.yse-saved-item:hover .t1,
.yse-saved-item:hover .t2 { color: #241a00; }

body.op-body:not(.op-light) .yse-saved-item:hover { background: #332e22; border: 1px solid #e3a100 !important; border-left: 1px solid #e3a100 !important; box-shadow: 0 0 0 1px #ecd6a3; color: #fff; }

body.op-body:not(.op-light) .yse-saved-item:hover .t1,
body.op-body:not(.op-light) .yse-saved-item:hover .t2 { color: #fff; }

.yse-saved-item .ic { font-size: 16px; }

.yse-saved-item .tx { flex: 1; min-width: 0; }

.yse-saved-item .t1 { font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.yse-saved-item .t2 { font-size: 10.5px; color: var(--ofg-3, #888); }

.yse-saved-item button { border: none; background: none; cursor: pointer; font-size: 13px; padding: 4px 6px; border-radius: 6px; }

.yse-saved-item button:hover { background: var(--opanel, #eee); }

.yse-saved-item.yse-editing { border: 1px solid #e3a300 !important; border-left: 1px solid #e3a300 !important; background: #fcf6e6; box-shadow: 0 0 0 1px #ecd6a3; transform: none; }

.yse-saved-item.yse-editing .t1,
.yse-saved-item.yse-editing .t2 { color: #241a00; }

body.op-body:not(.op-light) .yse-saved-item.yse-editing { background: #332e22; border: 1px solid #e3a100 !important; border-left: 1px solid #e3a100 !important; box-shadow: 0 0 0 1px #ecd6a3; color: #fff; }

body.op-body:not(.op-light) .yse-saved-item.yse-editing .t1,
body.op-body:not(.op-light) .yse-saved-item.yse-editing .t2 { color: #fff; }

.yse-saved-item.yse-selected {
  border: 1px solid #3b82f6 !important;
    border-left: 3px solid #3b82f6 !important;
    background: #eef4ff;
    box-shadow: 0 0 0 1px rgba(59,130,246,.25);
    transform: none;
}

.yse-saved-item.yse-selected .t1,
.yse-saved-item.yse-selected .t2 { color: #14294d; }

body.op-body:not(.op-light) .yse-saved-item.yse-selected {
  border: 1px solid #60a5fa !important;
    border-left: 3px solid #60a5fa !important;
    background: #1e293b;
    box-shadow: 0 0 0 1px rgba(96,165,250,.3);
    color: #fff;
}

body.op-body:not(.op-light) .yse-saved-item.yse-selected .t1,
body.op-body:not(.op-light) .yse-saved-item.yse-selected .t2 { color: #fff; }

body.op-body:not(.op-light) .yse-slide-field label { color: #ddd; }

body.op-body:not(.op-light) .yse-slide-field textarea.op-input { background: #2a2a2a; color: #fff; border-color: #555; }

body.op-body:not(.op-light) .yse-slide-field textarea.op-input { color-scheme: dark; }

.yse-slide-field textarea.op-input { color-scheme: light; }

body.op-body:not(.op-light) .yse-slide-field textarea.op-input:focus { border-color: var(--paccent); outline: none; }

body.op-body:not(.op-light) body.op-body:not(.op-light) #yseTimerPanel .btn-ghost:not(.on):not(.yse-t-showing) { color: #ddd; border-color: #555; }

body.op-body:not(.op-light) #yseTimerPanel .btn-ghost:not(.on):not(.yse-t-showing):hover:not(:disabled) { background: var(--yse-btn-gold, #ffb300); border-color: var(--yse-btn-gold, #ffb300); color: var(--yse-btn-gold-text, #000); }

body.op-body:not(.op-light) .yse-t-preset-btn { color: #fff; }

body.op-body:not(.op-light) .yse-t-size-row label,
body.op-body:not(.op-light) .yse-t-pos-grid > label { color: #bbb; }

body.op-body:not(.op-light) .yse-t-pos-buttons button { color: #fff; }

body.op-body:not(.op-light) .yse-type-btn { background: #2a2a2a; border-color: #555; color: #ddd; }

body.op-body:not(.op-light) .yse-type-btn.on { border-color: var(--paccent); background: rgba(255,180,0,.16); }

body.op-body:not(.op-light) .yse-slide-editing-tag { background: rgba(255,180,0,.16); color: var(--paccent); }

body.op-body:not(.op-light) #panel-yseslide .btn-primary,
body.op-body:not(.op-light) #panel-yseslide .btn-primary:hover:not(:disabled) { background: var(--yse-btn-gold, #ffb300); border-color: var(--yse-btn-gold, #ffb300); color: var(--yse-btn-gold-text, #000); }

body.op-body:not(.op-light) #panel-yseslide .btn-ghost { background: transparent; border-color: #555; color: #ddd; }

body.op-body:not(.op-light) #panel-yseslide .btn-ghost:hover:not(:disabled) { background: var(--yse-btn-gold, #ffb300); border-color: var(--yse-btn-gold, #ffb300); color: var(--yse-btn-gold-text, #000) !important; }

#yseSavedSort {
  appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23666666' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px 6px;
    padding-right: 28px !important;
}

body.op-body:not(.op-light) #yseSavedSort { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23cccccc' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* ---------- small shared pieces ---------- */

.yse-saved-head { display: flex; align-items: center; justify-content: space-between; }

.yse-saved-tools { display: inline-flex; gap: 6px; }

.yse-saved-tools .icon-btn { font-size: 11.5px; padding: 4px 9px; width: auto; height: auto; }

.yse-saved-filter { display: flex; gap: 8px; margin-bottom: 8px; }

.yse-saved-filter .op-input { flex: 1; min-width: 0; }

.yse-saved-filter .op-select { flex: none; width: 112px; padding-left: 10px; padding-right: 6px; }

.yse-saved-list { display: flex; flex-direction: column; gap: 6px; }

.yse-slide-textarea { width: 100%; resize: vertical; min-height: 64px; font-family: inherit; line-height: 1.45; }

.yse-slide-editing-tag { display: none; }

.yse-slide-editing-tag.show { display: block; }

/* logo row: the custom-logo split button is exactly one "Layar Hitam" column wide;
   the timer button (Tools) is exactly as wide as the Warta button above it */

#yseLogoRow > .yse-logocustom-split { flex: 0 0 calc((100% - 16px) / 3); }

#yseTimerRow > .quick-btn { flex: 0 0 calc((100% - 186px) / 2); }

/* 186 = − + 100% buttons (154) + gaps (32) */

.yse-logocustom-split { display: flex; min-width: 0; }

.yse-logocustom-split .yse-logocustom-main { flex: 1 1 auto; min-width: 0; border-radius: 9px 0 0 9px; }

.yse-logocustom-split .yse-logocustom-plus { flex: 0 0 40px; border-radius: 0 9px 9px 0; margin-left: -1px; padding-left: 0; padding-right: 0; font-size: 17px; font-weight: 700; }

.yse-lc-pop {
  position: fixed; z-index: 1600; width: 290px; max-height: 60vh; overflow: auto; padding: 12px;
    background: var(--opanel); color: var(--ofg); border: 1px solid var(--oline); border-radius: 12px;
    box-shadow: 0 12px 34px rgba(0,0,0,.28);
}

.yse-lc-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 13px; }

.yse-lc-x { background: none; border: 0; color: var(--ofg-3); cursor: pointer; font-size: 14px; }

.yse-lc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }

.yse-lc-item { position: relative; border: 1.5px solid var(--oline); border-radius: 10px; padding: 6px; cursor: pointer; text-align: center; background: var(--opanel-2); }

.yse-lc-item:hover,
.yse-lc-item.sel { border-color: var(--gold); }

.yse-lc-item img { width: 100%; height: 54px; object-fit: contain; display: block; }

.yse-lc-nm { display: block; font-size: 10.5px; color: var(--ofg-3); margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.yse-lc-del { position: absolute; top: 2px; right: 2px; border: 0; background: rgba(0,0,0,.45); color: #fff; width: 18px; height: 18px; border-radius: 50%; font-size: 10px; cursor: pointer; line-height: 1; }

.yse-lc-up { width: 100%; }

.yse-wn { max-width: 520px; }

.yse-wn-body { max-height: 58vh; overflow: auto; margin: 6px 0 4px; }

.yse-wn-sec h4 { font-size: 13px; margin: 14px 0 6px; }

.yse-wn-sec ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.55; color: var(--ink-2); }

body.op-body .yse-wn { background: var(--opanel); color: var(--ofg); }

body.op-body .yse-wn-sec ul { color: var(--ofg-2); }

/* =========================================================
   Uniform control sizes (operator page)
     L 38px  .btn · top-bar .icon-btn · text inputs and dropdowns
     M 36px  .quick-btn · .op-tab
     S 32px  .btn-sm · small icon buttons · everything inside the timer panel and logo picker
   Emoji made some buttons taller than others (Logo, Timer, What's New…), so heights are fixed here.
   ========================================================= */

body.op-body { --ctl-l: 38px; --ctl-m: 36px; --ctl-s: 32px; }

body.op-body .btn,
body.op-body .icon-btn {
  box-sizing: border-box; height: var(--ctl-l); padding-top: 0; padding-bottom: 0; line-height: 1.2;
    display: inline-flex; align-items: center; justify-content: center;
}

body.op-body .avatar { width: var(--ctl-l); height: var(--ctl-l); }

body.op-body .quick-btn,
body.op-body .op-tab {
  box-sizing: border-box; height: var(--ctl-m); padding-top: 0; padding-bottom: 0; line-height: 1.2;
    display: flex; align-items: center; justify-content: center; gap: 6px;
}

body.op-body .quick-btn.q-sym { line-height: 1; padding-bottom: 2px; }

body.op-body input.op-input:not([type=checkbox]):not([type=range]):not([type=color]):not([type=file]),
body.op-body select.op-select { box-sizing: border-box; height: var(--ctl-l); }

/* small tier */

body.op-body .btn-sm,
body.op-body .file-row .icon-btn,
body.op-body .yse-saved-tools .icon-btn { height: var(--ctl-s); padding-left: 11px; padding-right: 11px; font-size: 12px; }

body.op-body .file-row .btn-sm,
body.op-body .file-row .icon-btn { min-width: var(--ctl-s); padding-left: 8px; padding-right: 8px; }

/* custom slide: the action rows use full-size buttons like the Bible / hymn tabs */

#panel-yseslide .yse-slide-row .btn { height: var(--ctl-l); min-width: 0; padding: 0 10px; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: 10px; }

/* timer panel + logo picker: compact, but one size and the same corner radius */

#yseTimerPanel .yse-t-apply-btn,
#yseTimerPanel .yse-t-preset-btn,
#yseTimerPanel .yse-t-control-buttons button,
#yseTimerPanel .yse-t-input {
  box-sizing: border-box; height: var(--ctl-s); min-height: var(--ctl-s); padding-top: 0; padding-bottom: 0;
    font-size: 12px; line-height: 1; border-radius: 9px;
}

#yseTimerPanel .yse-t-pos-buttons button { width: var(--ctl-s); height: var(--ctl-s); border-radius: 9px; }

.yse-lc-pop .btn { height: var(--ctl-s); }

/* top bar: the logo sat on the text baseline of a taller line box, so it looked too high */

body.op-body .op-top .brand { display: flex; align-items: center; height: var(--ctl-l); }

body.op-body .op-top .brand img { display: block; }

/* ---------- Google Drive card (dashboard) ---------- */

#gdMsg { min-height: 16px; white-space: pre-line; }

#gdSetup code { background: var(--gold-15); padding: 1px 5px; border-radius: 4px; }

/* ---------- profile picker (Chrome "who is using" style) ---------- */

body[data-page="dashboard"] { min-height: 100vh; display: flex; flex-direction: column; }

.pk-stage { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 20px; box-sizing: border-box; }

.pk-center { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 780px; }

.pk-logo { width: 56px; height: 56px; margin-bottom: 18px; border-radius: 14px; }

.pk-center h1 { font-size: 22px; margin-bottom: 6px; }

.pk-center .sub { color: var(--ink-2); font-size: 13.5px; margin-bottom: 34px; max-width: 480px; }

/* ---------- phone layout ---------- */

/* On the dashboard <body> is a flex column; .page has auto side margins there, which shrink-wraps it
   to its widest content instead of the screen — that pushed everything past the right edge. */

.page { width: 100%; }

.file-row > div:not(.right):not(.ic) { min-width: 0; }

@media (max-width: 560px) {
  .topbar { gap: 8px; }
  .topbar { padding: 10px 12px; }
  .topbar .btn-sm span[data-i18n] { display: none; }
  /* icon-only buttons; the labels do not fit beside the status pill */
  .topbar .btn-sm { padding-left: 11px; padding-right: 11px; font-size: 15px; }
  .conn-pill { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .conn-pill { white-space: nowrap; padding: 5px 10px; font-size: 11.5px; }
  .page-head { align-items: stretch; }
  .page-head .btn-lg { width: 100%; justify-content: center; }
  .file-row { flex-wrap: wrap; }
  .file-row .right { flex: 1 1 100%; justify-content: flex-end; }
  .modal-back { padding: 12px; }
  .modal { padding: 20px 18px; }
}

/* .op-field label (block, 11.5px) was winning over .op-check, which stacked the box above its text */

.op-field label.op-check { display: inline-flex; margin-bottom: 0; font-size: 13px; color: var(--ofg-2); }

.op-field label.op-check.on { color: var(--goldtx); }

.op-check input { flex: none; width: 16px; height: 16px; margin: 0; }

@media (max-width: 920px) {
  /* operator top bar on a phone: name row, then clock / tools, then one full-width projection button */
  .op-top { gap: 8px 10px; padding: 10px 12px; }
  body.op-body .op-top .brand,
.op-top .spacer { display: none; }
  .op-top .sess-name { flex: 1 1 0; min-width: 0; max-width: none; }
  .op-top #openProjBtn { order: 9; flex: 1 1 100%; justify-content: center; }
}

@media (max-width: 560px) {
  #yseWhatsNewBtn { display: none; }
}

@media (max-width: 920px) {
  .op-top .sess-name { flex: 1 1 140px; }
}

/* ---------- custom slide actions: wrap instead of clipping a long label ---------- */

.yse-slide-row { flex-wrap: wrap; }

#panel-yseslide .yse-slide-row .btn { flex: 1 1 96px; height: auto; min-height: var(--ctl-l); padding: 6px 10px; white-space: normal; line-height: 1.2; text-overflow: clip; }

/* ---------- phone: quick actions and tools ---------- */

@media (max-width: 920px) {
  #panel-yseslide #yseSlidePresent { flex-basis: 100%; }
  .quick-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 42px; padding: 8px 4px; white-space: nowrap; }
  /* Warta / Penunjuk on one line, then − + 100% as an even row */
  .quick-row:has(#qZoomOut) { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
  #qAnn,
#qLaser { grid-column: span 3; }
  #qZoomOut,
#qZoomIn,
#qZoomReset { grid-column: span 2; }
  #yseTimerRow > .quick-btn { flex: 1 1 100%; }
  .op-hint[data-i18n="pointZoomHint"] { padding: 0 16px !important; }
  .ann-foot { flex-wrap: wrap; }
  .ann-tip { flex: 1 1 100%; order: 3; }
}

/* ---------- add-content tabs: four equal columns that always fit the column ---------- */

.op-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }

.op-tab { min-width: 0; }

@media (max-width: 1260px) {
  body.op-body .op-tab { flex-direction: column; gap: 3px; height: auto; min-height: var(--ctl-m); padding: 7px 2px; font-size: 11.5px; line-height: 1.15; }
  .op-tab > span:last-child { white-space: normal; overflow-wrap: anywhere; text-align: center; }
}

/* v35 — automatic-sync status: hairline progress at the very top + a chip beside the connection pill (js/syncui.js) */

.sync-bar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 260; opacity: 0; transition: opacity .2s; pointer-events: none; }

.sync-bar.on { opacity: 1; }

.sync-bar i { display: block; height: 100%; width: 0; background: var(--gold); border-radius: 0 3px 3px 0; transition: width .25s; }

.sync-chip { display: none; align-items: center; font-size: 12px; font-weight: 600; color: var(--ink-2); padding: 6px 12px; border: 1px solid var(--line); border-radius: 99px; white-space: nowrap; max-width: 42vw; overflow: hidden; text-overflow: ellipsis; }

.sync-chip.show { display: inline-flex; }

.sync-chip.bad { color: var(--warn); border-color: var(--warn-bg); background: var(--warn-bg); }

@media (max-width: 720px) {
  .sync-chip { padding: 5px 10px; font-size: 11.5px; }
}

/* v35 — spacing above the "Cadangan" group in the account menu */

.acct-menu .am-sec-gap { margin-top: 12px; }

/* v39: "open in another tab/device" badge on a session card (was an inline style in dashboard.js) */

.open-badge { display: inline-block; margin-left: 8px; padding: 2px 6px; background: #FFB020; color: #000; font-size: 10px; font-weight: 700; border-radius: 3px; vertical-align: middle; }