/* JJ Dev Tools - scoped styles */
.jjdt-app{
  --bg:#f6f8fb;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --line:#e5e7eb;
  --blue:#2563eb;
  --blue2:#1d4ed8;
  --green:#16a34a;
  --red:#ef4444;
  --amber:#f59e0b;
  --beige:#fff7e6;
  --beige2:#fff1d6;
  --shadow: 0 12px 28px rgba(2,6,23,.08);
  --radius: 16px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: inherit;
  font-family: var(--sans);
  color: var(--text);
}
.jjdt-app *{ box-sizing: border-box; }
.jjdt-app a{ color: var(--blue); text-decoration: none; }
.jjdt-app a:hover{ text-decoration: underline; }

.jjdt-card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
}

.jjdt-header{
  display:flex;
  gap: 12px 16px;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  margin-bottom: 12px;
}
.jjdt-title h1{
  margin:0;
  font-size: 22px;
  letter-spacing: -.3px;
}
.jjdt-title p{
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.jjdt-topbar{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
}

/* Guide toggle button (active state) */
.jjdt-topbar .jjdt-btn.active{
  background: var(--beige2);
  border-color: rgba(37,99,235,.28);
  box-shadow: 0 12px 26px rgba(2,6,23,.08);
}

.jjdt-btn{
  appearance:none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--line);
  background:#fff;
  color: var(--text);
  padding: 10px 12px;
  border-radius: 12px;
  cursor:pointer;
  font-weight: 800;
  font-size: 13px;
  line-height: 1;
  transition: transform .05s ease, border-color .15s ease, background .15s ease;
  user-select:none;
}
.jjdt-btn:hover{ border-color:#cbd5e1; }
.jjdt-btn:active{ transform: translateY(1px); }

/* Button icons (SVG inserted by setButtonIconAndLabel) */
.jjdt-btnIco{
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  opacity: .95;
  transition: transform .08s ease, opacity .12s ease, filter .12s ease;
  filter: drop-shadow(0 8px 14px rgba(2,6,23,.10)) drop-shadow(0 2px 10px rgba(51,138,255,.14));
}
.jjdt-btn:hover .jjdt-btnIco{
  opacity: 1;
  transform: translateY(-0.5px);
  filter: drop-shadow(0 12px 20px rgba(2,6,23,.14)) drop-shadow(0 4px 14px rgba(51,138,255,.22));
}
.jjdt-btn:active .jjdt-btnIco{
  transform: translateY(0);
}
.jjdt-btn.primary{
  background: var(--blue);
  border-color: var(--blue);
  color:#fff;
}
.jjdt-btn.primary:hover{ background: var(--blue2); border-color: var(--blue2); }
.jjdt-btn.ghost{
  background:#fff;
  border-color: var(--line);
}
.jjdt-btn.danger{
  background:#fff;
  border-color:#fecaca;
  color:#b91c1c;
}

/* Quick chips ("자주 쓰는 타임존") - theme-independent styling */
.jjdt-chip{
  appearance:none;
  border:1px solid rgba(37,99,235,.25);
  background: linear-gradient(180deg, rgba(37,99,235,.98) 0%, rgba(29,78,216,.98) 100%);
  color:#fff !important;
  padding: 9px 14px;
  border-radius: 999px;
  cursor:pointer;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: -.2px;
  line-height: 1;
  box-shadow: 0 12px 24px rgba(37,99,235,.18);
  user-select:none;
}
.jjdt-chip:hover{ filter: brightness(1.03); }
.jjdt-chip:active{ transform: translateY(1px); }
.jjdt-chip:focus{ outline: 3px solid rgba(37,99,235,.22); outline-offset: 2px; }

.jjdt-seg{
  display:inline-flex;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow:hidden;
  background:#fff;
}
.jjdt-seg button{
  border:0;
  background:transparent;
  padding: 9px 10px;
  cursor:pointer;
  font-weight:900;
  font-size: 12px;
  color: var(--muted);
}
.jjdt-seg button.active{
  background: rgba(37,99,235,.12);
  color: var(--blue2);
}

.jjdt-grid{
  display:grid;
  /* Prevent long inline content (e.g., timezone chips with +1d/-1d) from expanding the left
     column and squeezing/clipping the right panel. */
  /* Give the Timeline panel more horizontal room (blue arrows) by slightly
     shrinking the left panel (red arrows). */
  grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
  gap: 14px;
}
.jjdt-grid > *{ min-width: 0; }
@media (max-width: 980px){
  .jjdt-grid{ grid-template-columns: 1fr; }
}

.jjdt-sectionTitle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin:0 0 10px;
}
.jjdt-sectionTitle h2{
  margin:0;
  /* Slightly smaller to keep headings premium and reduce visual noise */
  font-size: 14px;
  letter-spacing:-.2px;
}
.jjdt-hint{
  color: var(--muted);
  font-size: 12px;
}



/* Subtext used across tools (helper copy). */
.jjdt-sub{
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
  margin: 0;
}
@media (max-width: 520px){
  .jjdt-sub{ font-size: 11px; }
}
.jjdt-step{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom: 10px;
}
.jjdt-stepnum{
  width: 28px; height: 28px;
  border-radius: 999px;
  background: rgba(37,99,235,.12);
  color: var(--blue2);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  font-size: 13px;
  flex: 0 0 28px;
}
.jjdt-step h3{
  margin:0;
  font-size: 13px;
  letter-spacing:-.1px;
}
.jjdt-step .jjdt-hint{ margin-left:auto; }

.jjdt-row{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  align-items:center;
}
.jjdt-col{
  flex:1;
  min-width: 220px;
}
.jjdt-label{
  font-size: 12px;
  color: var(--muted);
  display:block;
  margin-bottom: 6px;
}
.jjdt-field,
.jjdt-app input[type="text"],
.jjdt-app input[type="number"],
.jjdt-app input[type="datetime-local"],
.jjdt-app select,
.jjdt-app textarea{
  width:100%;
  box-sizing:border-box;
  padding: 10px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--beige);
  color: var(--text);
  outline:none;
  font-size: 14px;
}
.jjdt-app textarea{
  min-height: 170px;
  resize: vertical;
  font-family: var(--mono);
  background: #fff;
}
.jjdt-app input[type="number"]{ font-family: var(--mono); }
.jjdt-app input:focus,
.jjdt-app select:focus,
.jjdt-app textarea:focus{
  border-color: rgba(37,99,235,.55);
  box-shadow: 0 0 0 4px rgba(37,99,235,.12);
  background: #fff;
}

.jjdt-tabs{
  display:flex;
  gap: 8px;
  flex-wrap:wrap;
  margin: 10px 0;
}
.jjdt-tab{
  border: 1px solid var(--line);
  background:#fff;
  color: var(--muted);
  padding: 8px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  cursor:pointer;
}
.jjdt-tab.active{
  background: rgba(37,99,235,.12);
  border-color: rgba(37,99,235,.25);
  color: var(--blue2);
}

.jjdt-kpi{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (max-width: 980px){
  .jjdt-kpi{ grid-template-columns: 1fr; }
}
.jjdt-kpi .box{
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 10px;
  background:#fff;
}
.jjdt-kpi .box.emph{ background: var(--beige); border-color: #fde68a; }
.jjdt-kpi .label{ font-size: 12px; color: var(--muted); }
.jjdt-kpi .value{
  margin-top: 6px;
  font-size: 18px;
  font-weight: 900;
  letter-spacing:-.3px;
  font-family: var(--mono);
  word-break: break-word;
}
.jjdt-kpi .sub{ margin-top: 6px; font-size: 12px; color: var(--muted); line-height:1.4; }

.jjdt-status{
  display:flex;
  gap:8px;
  align-items:center;
  font-size: 12px;
  color: var(--muted);
}
.jjdt-badge{
  display:inline-flex;
  align-items:center;
  padding: 5px 10px;
  border-radius: 999px;
  border:1px solid var(--line);
  background:#fff;
  font-weight: 900;
  font-size: 12px;
}
.jjdt-badge.good{ border-color:#bbf7d0; background:#f0fdf4; color:#166534; }
.jjdt-badge.bad{ border-color:#fecaca; background:#fef2f2; color:#991b1b; }
.jjdt-badge.warn{ border-color:#fde68a; background:#fffbeb; color:#92400e; }

.jjdt-hr{ height:1px; background: var(--line); margin: 16px 0; }

.jjdt-table{
  width:100%;
  border-collapse: collapse;
  font-size: 13px;
}
.jjdt-table th, .jjdt-table td{
  border-bottom: 1px solid var(--line);
  padding: 10px 8px;
  text-align:left;
  vertical-align: top;
}
.jjdt-table th{
  background:#f8fafc;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

/* Time conversion table: tint each record row by the time-of-day band
   (matches the Timeline bar palette: night / morning / work / evening). */
.jjdt-table tbody tr.jjdt-tzRow-night{
  background: linear-gradient(90deg, rgba(2,6,23,.075) 0%, rgba(2,6,23,.02) 100%);
}
.jjdt-table tbody tr.jjdt-tzRow-morning{
  background: linear-gradient(90deg, rgba(59,130,246,.070) 0%, rgba(59,130,246,.030) 100%);
}
.jjdt-table tbody tr.jjdt-tzRow-work{
  background: linear-gradient(90deg, rgba(16,185,129,.080) 0%, rgba(16,185,129,.035) 100%);
}
.jjdt-table tbody tr.jjdt-tzRow-evening{
  background: linear-gradient(90deg, rgba(245,158,11,.085) 0%, rgba(245,158,11,.035) 100%);
}
/* Make row tint feel like a single continuous band across all columns */
.jjdt-table tbody tr[class^='jjdt-tzRow-'] td{ background: transparent !important; }


/* Keep the copy button readable on tinted rows */
.jjdt-table tbody tr[class^='jjdt-tzRow-'] .jjdt-iconbtn{
  background: rgba(255,255,255,.80);
  border-color: rgba(148,163,184,.35);
}


/* Row hover/focus polish: keep the tint unified and slightly emphasize the active row */
.jjdt-table tbody tr[class^='jjdt-tzRow-']{
  transition: background 160ms ease;
}
.jjdt-table tbody tr.jjdt-tzRow-night:hover,
.jjdt-table tbody tr.jjdt-tzRow-night:focus-within{
  background: linear-gradient(90deg, rgba(2,6,23,.095) 0%, rgba(2,6,23,.030) 100%);
}
.jjdt-table tbody tr.jjdt-tzRow-morning:hover,
.jjdt-table tbody tr.jjdt-tzRow-morning:focus-within{
  background: linear-gradient(90deg, rgba(59,130,246,.090) 0%, rgba(59,130,246,.040) 100%);
}
.jjdt-table tbody tr.jjdt-tzRow-work:hover,
.jjdt-table tbody tr.jjdt-tzRow-work:focus-within{
  background: linear-gradient(90deg, rgba(16,185,129,.105) 0%, rgba(16,185,129,.050) 100%);
}
.jjdt-table tbody tr.jjdt-tzRow-evening:hover,
.jjdt-table tbody tr.jjdt-tzRow-evening:focus-within{
  background: linear-gradient(90deg, rgba(245,158,11,.115) 0%, rgba(245,158,11,.050) 100%);
}
.jjdt-table tbody tr[class^='jjdt-tzRow-']:hover .jjdt-iconbtn,
.jjdt-table tbody tr[class^='jjdt-tzRow-']:focus-within .jjdt-iconbtn{
  background: rgba(255,255,255,.92);
  border-color: rgba(148,163,184,.45);
}

.jjdt-code{
  font-family: var(--mono);
  font-size: 13px;
  background: #0b1220;
  color: #e2e8f0;
  border-radius: 14px;
  padding: 12px;
  overflow:auto;
  line-height:1.5;
}
.jjdt-code .muted{ color:#94a3b8; }

/* Cron: next run list */
.jjdt-runList{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top: 10px;
}
.jjdt-runItem{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(148,163,184,.28);
  box-shadow: 0 10px 25px rgba(2,6,23,.06);
}
.jjdt-runTime{
  font-family: var(--mono);
  font-weight: 900;
  font-size: 13px;
  letter-spacing:-.2px;
  white-space: nowrap;
}
.jjdt-runMeta{
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}
.jjdt-cronExpr{
  min-height: 96px;
  resize: vertical;
}

@media (max-width: 520px){
  .jjdt-runTime{ white-space: normal; }
}


.jjdt-note{
  padding: 10px 12px;
  border-radius: 14px;
  background:#f8fafc;
  border:1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}
.jjdt-note strong{ color: var(--text); }

.jjdt-footerCta{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  margin-top: 22px;
}
.jjdt-ctaTitle{
  font-weight: 900;
  letter-spacing:-.2px;
}
.jjdt-ctaSub{
  color: var(--muted);
  font-size: 12px;
  margin-top: 4px;
  line-height: 1.5;
}

.jjdt-toast{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  background: rgba(15,23,42,.92);
  color:#fff;
  padding: 10px 12px;
  border-radius: 999px;
  font-size: 12px;
  opacity: 0;
  pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 9999;
}
.jjdt-toast.show{
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
}

.jjdt-loading{
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.jjdt-loading-title{
  font-weight: 900;
  letter-spacing:-.2px;
}
.jjdt-loading-sub{
  color: var(--muted);
  font-size: 12px;
  line-height:1.4;
}

.jjdt-small{
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

.jjdt-app .mono{ font-family: var(--mono); }
.jjdt-app mark{ background: rgba(37,99,235,.18); color: inherit; padding: 0 .15em; border-radius: .35em; }


/* =========================
   Premium UI overrides
   ========================= */
.jjdt-app{
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(248,250,252,.85), rgba(255,255,255,.85));
}
.jjdt-app::before{
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 400px at 20% 0%, rgba(59,130,246,.10), transparent 60%),
    radial-gradient(800px 500px at 85% 100%, rgba(16,185,129,.10), transparent 55%);
  opacity: .9;
}
.jjdt-app > *{
  position: relative;
  z-index: 1;
}

.jjdt-card{
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,1));
  border: 1px solid rgba(226,232,240,.95);
  box-shadow: 0 18px 55px rgba(2,6,23,.10);
}
@supports (backdrop-filter: blur(10px)){
  .jjdt-card{
    background: rgba(255,255,255,.84);
    backdrop-filter: blur(10px);
  }
}

.jjdt-input, .jjdt-textarea, .jjdt-select{
  background: rgba(241,245,249,.92);
  border-color: rgba(203,213,225,.95);
}
.jjdt-input:focus, .jjdt-textarea:focus, .jjdt-select:focus{
  outline: none;
  box-shadow: 0 0 0 4px rgba(59,130,246,.18);
  border-color: rgba(59,130,246,.60);
}

/* =========================
   Timezone tool (GUI-like)
   ========================= */
.jjdt-step{
  display:flex;
  align-items:center;
  gap:10px;
  margin: 14px 0 8px;
}
.jjdt-stepBadge{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  color: var(--accent);
  background: rgba(59,130,246,.12);
  border: 1px solid rgba(59,130,246,.25);
}
.jjdt-stepLabel{
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -0.01em;
  /* Reduce step title size (requested) */
  font-size: 13px;
}

.jjdt-iconbtn{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(226,232,240,1);
  background: rgba(255,255,255,.85);
  box-shadow: 0 10px 26px rgba(2,6,23,.08);
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  user-select: none;
  position: relative;
  transition: transform .08s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.jjdt-iconbtn:hover{
  transform: translateY(-1px);
  border-color: rgba(51,138,255,.55);
  box-shadow: 0 14px 32px rgba(2,6,23,.10), 0 0 0 3px rgba(51,138,255,.10);
}
.jjdt-iconbtn:active{
  transform: translateY(0);
}

.jjdt-iconbtn:focus-visible{
  outline: none;
  border-color: rgba(51,138,255,.65);
  box-shadow: 0 0 0 3px rgba(51,138,255,.18), 0 14px 32px rgba(2,6,23,.10);
}

.jjdt-iconbtn svg{
  opacity: 1;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.22)) drop-shadow(0 2px 10px rgba(51,138,255,.16));
}

.jjdt-tzCombo{
  position: relative;
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.jjdt-tzCombo .jjdt-input{
  flex: 1;
}

.jjdt-tzMenu{
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 50;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(226,232,240,1);
  border-radius: 14px;
  box-shadow: 0 22px 70px rgba(2,6,23,.18);
  padding: 8px;
  max-height: 360px;
  overflow: auto;
}
.jjdt-tzMenuItem{
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 10px 10px;
  border-radius: 12px;
  cursor: pointer;
}
.jjdt-tzMenuItem:hover, .jjdt-tzMenuItem.active{
  background: rgba(59,130,246,.10);
}
.jjdt-tzMenuMain{
  font-weight: 900;
  color: var(--ink);
}
.jjdt-tzMenuSub{
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
}
.jjdt-tzMenuFooter{
  padding-top: 8px;
  margin-top: 6px;
  border-top: 1px solid rgba(226,232,240,1);
  display: flex;
  justify-content: flex-end;
}
.jjdt-tzMenuEmpty{
  padding: 12px;
  color: var(--muted);
}

/* Time scrub bar */
.jjdt-tzScrub{
  margin-top: 10px;
}
.jjdt-tzScrubBar{
  position: relative;
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  gap: 2px;
  padding: 6px;
  border-radius: 14px;
  border: 1px solid rgba(226,232,240,1);
  background: rgba(255,255,255,.65);
  user-select: none;
  touch-action: none;
}
.jjdt-tzScrubCell{
  height: 22px;
  border-radius: 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 11px;
  color: rgba(15,23,42,.65);
  background: rgba(148,163,184,.14);
}
.jjdt-tzScrubCell:nth-child(-n+7),
.jjdt-tzScrubCell:nth-child(n+22){
  background: rgba(2,6,23,.10);
  color: rgba(15,23,42,.62);
}
.jjdt-tzScrubMarker{
  position: absolute;
  top: 4px;
  bottom: 4px;
  width: 3px;
  border-radius: 6px;
  background: rgba(59,130,246,.95);
  /* Keep marker styling consistent across the app (timeline + base time bar) */
  box-shadow:
    0 0 0 3px rgba(59,130,246,.18),
    0 6px 16px rgba(59,130,246,.22);
  transform: translateX(-1.5px);
  pointer-events: none;
}

/* Selected zone chips */
.jjdt-zoneChips{
  margin: 8px 0 12px;
  min-width: 0;
  max-width: 100%;
}

/* Selected time zone chips
   - Max 2 chips per row (wrap to next row)
   - Prevent long labels (e.g., "Los Angeles") from widening the left column
   - Use ellipsis inside chip instead of expanding layout */
.jjdt-zoneChips .jjdt-row{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 4px 2px;
  max-width: 100%;
}
@media (max-width: 520px){
  .jjdt-zoneChips .jjdt-row{ grid-template-columns: 1fr; }
}
.jjdt-zoneChips .jjdt-zoneChip{
  margin: 0;
  width: 100%;
  min-width: 0;
}
.jjdt-zoneChip{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(226,232,240,1);
  background: rgba(255,255,255,.78);
  box-shadow: 0 10px 24px rgba(2,6,23,.08);
  margin: 6px 6px 0 0;
  min-width: 0;
}
.jjdt-zoneChipText{
  font-weight: 900;
  letter-spacing: -0.01em;
  /* Slightly smaller city label to avoid over-dominating the chip */
  font-size: 13px;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jjdt-zoneChipMeta{
  font-size: 11px;
  color: rgba(15,23,42,.62);
}
.jjdt-zoneChipShift{
  font-size: 11px;
}
.jjdt-zoneChipMeta{
  flex: 0 0 auto;
  white-space: nowrap;
}
.jjdt-zoneChipShift{
  flex: 0 0 auto;
  white-space: nowrap;
}
.jjdt-zoneChipX{
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(226,232,240,1);
  background: rgba(148,163,184,.14);
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  color: rgba(15,23,42,.70);
  flex: 0 0 auto;
  margin-left: auto;
}
.jjdt-zoneChipX:hover{ background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.30); color: rgba(239,68,68,.95); }

/* =========================
   Timezone tool v2 additions
   ========================= */

/* Clock section header: hint + collapse control */
.jjdt-clockSecRight{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap:wrap;
  justify-content:flex-end;
  text-align:right;
}
.jjdt-clockSecRight .jjdt-sub{
  margin: 0;
}

/* Collapsed clocks header layout + inline local clock */
.jjdt-clockSecTitle{
  justify-content: flex-start;
  flex-wrap: wrap;
}
.jjdt-clockSecTitle .jjdt-clockSecRight{
  margin-left: auto;
}
.jjdt-clockSecMid{
  /* Place the compact digital clock near the section title (premium, low-noise).
     Do NOT let it stretch and create a big empty area in the header. */
  flex: 0 0 auto;
  min-width: auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-left: 10px;
}

.jjdt-clockInline{
  display: none; /* toggled by JS when clocksCollapsed */
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.72));
  box-shadow: 0 14px 32px rgba(2,6,23,.08);
  backdrop-filter: blur(12px);
  font-family: var(--mono);
  font-weight: 950;
  letter-spacing: -0.02em;
  color: rgba(15,23,42,.86);
  --accent: rgba(59,130,246,.95);
  position: relative;
}
.jjdt-clockInline::before{
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  pointer-events: none;
  background:
    radial-gradient(70% 140% at 18% 0%, rgba(59,130,246,.22), transparent 60%),
    radial-gradient(70% 140% at 92% 100%, rgba(16,185,129,.18), transparent 62%);
  opacity: .55;
}
.jjdt-clockInline > *{ position: relative; z-index: 1; }
.jjdt-clockInlineIcon{
  width: 18px;
  height: 18px;
  color: var(--accent);
  display: inline-flex;
}
.jjdt-clockInlineIcon svg{
  width: 18px;
  height: 18px;
  display: block;
}
.jjdt-clockInlineDigits{
  font-size: 14px;
  line-height: 1;
}
.jjdt-clockInlineTz{
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 900;
  color: rgba(100,116,139,.92);
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.26);
  background: rgba(148,163,184,.10);
  line-height: 1;
  white-space: nowrap;
}
@media (max-width: 740px){
  .jjdt-clockSecMid{ flex-basis: 100%; justify-content: flex-start; margin-left: 0; margin-top: 8px; }
}
@media (max-width: 520px){
  .jjdt-clockInlineTz{ display: none; }
}

/* Chip day-shift badge (+1d / -1d) */
.jjdt-zoneChipShift{
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 900;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.25);
  background: rgba(148,163,184,.10);
  color: rgba(15,23,42,.78);
  line-height: 1;
  user-select: none;
}
.jjdt-zoneChipShift.plus{
  background: rgba(16,185,129,.14);
  border-color: rgba(16,185,129,.28);
  color: rgba(22,101,52,.95);
}
.jjdt-zoneChipShift.minus{
  background: rgba(59,130,246,.14);
  border-color: rgba(59,130,246,.28);
  color: rgba(29,78,216,.95);
}

.jjdt-tzTabs{
  margin-top: 8px;
  margin-bottom: 10px;
}
.jjdt-tzPanel{
  margin-top: 12px;
}

/* Small buttons (used in timezone tool only) */
.jjdt-tz .jjdt-btn.sm{
  padding: 8px 10px;
  font-size: 12px;
  border-radius: 10px;
}

/* Zone chip: base star + offset meta */
.jjdt-zoneChipStar{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(226,232,240,1);
  background: rgba(148,163,184,.12);
  color: rgba(15,23,42,.72) !important;
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  font-size: 14px;
  line-height: 1;
  user-select: none;
}
.jjdt-zoneChipStar:hover{
  background: rgba(37,99,235,.12);
  border-color: rgba(37,99,235,.22);
  color: rgba(29,78,216,.95) !important;
}
.jjdt-zoneChipStar:active{ transform: translateY(1px); }

.jjdt-zoneChipStar:disabled,
.jjdt-zoneChipStar.disabled{
  opacity: .45;
  cursor: not-allowed;
  background: rgba(148,163,184,.10);
  border-color: rgba(226,232,240,.9);
  color: rgba(15,23,42,.45) !important;
  transform: none;
}
.jjdt-zoneChipStar:disabled:hover,
.jjdt-zoneChipStar.disabled:hover{
  background: rgba(148,163,184,.10);
  border-color: rgba(226,232,240,.9);
  color: rgba(15,23,42,.45) !important;
}

.jjdt-zoneChipMeta{
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  opacity: .9;
}

/* Timeline legend */
.jjdt-tzLegend{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin: 4px 0 2px;
}
.jjdt-tzLegendItem{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
}
.jjdt-tzLegendSwatch{
  width: 12px;
  height: 12px;
  border-radius: 4px;
  border: 1px solid rgba(148,163,184,.22);
  background: rgba(148,163,184,.14);
}
.jjdt-tzLegendSwatch.night{ background: rgba(2,6,23,.16); }
.jjdt-tzLegendSwatch.morning{ background: rgba(59,130,246,.14); }
.jjdt-tzLegendSwatch.work{ background: rgba(16,185,129,.18); }
.jjdt-tzLegendSwatch.evening{ background: rgba(245,158,11,.20); }

.jjdt-tzTableWrap{
  margin-top: 10px;
}

/* Timeline */
.jjdt-tzTimeline{
  margin-top: 12px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(148,163,184,.28);
  background:
    radial-gradient(860px 340px at 12% 0%, rgba(59,130,246,.14), transparent 60%),
    radial-gradient(760px 320px at 100% 0%, rgba(16,185,129,.12), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(240,249,255,.70) 45%, rgba(240,253,244,.55) 100%);
  box-shadow: 0 14px 32px rgba(2,6,23,.08);
}

.jjdt-tzTimelineAxis{
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  gap: 2px;
  margin-top: 10px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 800;
  color: rgba(15,23,42,.55);
  letter-spacing: .1px;
  user-select: none;
}
.jjdt-tzAxisTick{
  text-align: center;
}
.jjdt-tzTimelineHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 14px;
  margin-bottom: 10px;
}
.jjdt-tzTimelineTitle{
  font-weight: 900;
  letter-spacing: -0.01em;
}
.jjdt-tzTimelineGridHead{
  display:grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  gap: 2px;
  margin: 8px 0 10px;
}
.jjdt-tzTH{
  font-size: 10px;
  text-align: center;
  color: rgba(15,23,42,.55);
}
.jjdt-tzTimelineRow{
  display: grid;
  /*
    Use minmax(0, …) to prevent long labels / 24-cell grids from
    forcing the row to overflow its card (common grid min-width issue).
  */
  /* Give more room to the 24-cell time bar.
     - label column is auto-tuned via CSS var set from JS (based on the longest label)
     - smaller copy button column
  */
  grid-template-columns:
    minmax(0, var(--jjdt-tzLabelCol, 140px))
    minmax(0, 1fr)
    var(--jjdt-tzCopyCol, 30px);
  gap: 8px;
  align-items: center;
  padding: 8px 0;
}

/* When the available width is too tight for 24 in-cell hour labels (numbers overlap),
   switch each timeline row to a 2-line layout:
   - Line 1: Time zone label + offset
   - Line 2: Time bar + copy button
   This keeps the time bar as wide as possible without forcing global horizontal scrolling. */
.jjdt-tzTimeline.twoline .jjdt-tzTimelineRow{
  grid-template-columns: minmax(0, 1fr) var(--jjdt-tzCopyCol, 30px);
  grid-template-rows: auto auto;
  grid-template-areas:
    "label label"
    "grid copy";
  align-items: start;
  padding: 10px 0;
}
.jjdt-tzTimeline.twoline .jjdt-tzTimelineLabel{ grid-area: label; }
.jjdt-tzTimeline.twoline .jjdt-tzTimelineGrid{ grid-area: grid; }
.jjdt-tzTimeline.twoline .jjdt-tzTimelineRow .jjdt-iconbtn{
  grid-area: copy;
  margin-top: 2px;
}

/* Timeline row copy buttons: smaller to reduce visual weight and free width */
.jjdt-tzTimelineRow .jjdt-iconbtn{
  width: 30px;
  height: 30px;
  border-radius: 10px;
  box-shadow: 0 8px 18px rgba(2,6,23,.07);
}
.jjdt-tzTimelineRow .jjdt-iconbtn svg{
  width: 16px;
  height: 16px;
  opacity: .92;
  filter: none;
}

/* Allow grid children to shrink within the row (avoid horizontal bleed) */
.jjdt-tzTimelineLabel{ min-width: 0; }
.jjdt-tzTimelineGrid{ min-width: 0; max-width: 100%; box-sizing: border-box; }
.jjdt-tzTimelineLabelMain{
  font-weight: 900;
  /* A touch smaller to prioritize the time bar readability */
  font-size: 12px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jjdt-tzTimelineSelected{
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.jjdt-tzTimelineSelectedLabel{
  font-size: 11px;
  font-weight: 800;
  color: rgba(15,23,42,.55);
}
.jjdt-tzSelectedPill{
  --accent: rgba(59,130,246,.95);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(226,232,240,.90);
  background: rgba(255,255,255,.78);
  box-shadow: 0 8px 18px rgba(2,6,23,.06);
  font-family: var(--mono);
  font-weight: 900;
  font-size: 12px;
  color: rgba(15,23,42,.75);
}
.jjdt-tzSelectedDot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(255,255,255,.85);
}
.jjdt-tzSelectedTime{ letter-spacing: -.2px; }

.jjdt-tzSelectedDow{
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid rgba(203,213,225,.85);
  background: rgba(248,250,252,.90);
  color: rgba(15,23,42,.62);
  font-size: 11px;
  font-weight: 900;
}
.jjdt-tzSelectedShift{
  margin-left: 2px;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid rgba(203,213,225,.90);
  background: rgba(241,245,249,.85);
  color: rgba(15,23,42,.60);
  font-size: 11px;
  font-weight: 900;
}

.jjdt-tzTimelineGrid{
  position: relative;
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  gap: 2px;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,.30);
  background: linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(241,245,249,.88) 100%);
  /* Slightly more padding to keep larger hour labels comfortable */
  padding: 7px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 14px 30px rgba(2,6,23,.06);
  cursor: pointer;
}
.jjdt-tzTimelineMarker{
  position: absolute;
  top: 4px;
  bottom: 4px;
  width: 3px;
  border-radius: 6px;
  background: rgba(59,130,246,.95);
  box-shadow:
    0 0 0 3px rgba(59,130,246,.18),
    0 6px 16px rgba(59,130,246,.22);
  transform: translateX(-1.5px);
  pointer-events:none;
}
.jjdt-tzCell{
  height: 16px;
  border-radius: 10px;
  background: rgba(148,163,184,.14);
}
.jjdt-tzCell.night{ background: rgba(2,6,23,.16); }
.jjdt-tzCell.morning{ background: rgba(59,130,246,.14); }
.jjdt-tzCell.work{ background: rgba(16,185,129,.18); }
.jjdt-tzCell.evening{ background: rgba(245,158,11,.20); }
.jjdt-tzCell.dayBreak{
  box-shadow: -2px 0 0 rgba(239,68,68,.45);
}

/* Modal (browse all time zones) */
.jjdt-modal{
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(2,6,23,.55);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.jjdt-modalCard{
  width: min(860px, 96vw);
  max-height: min(84vh, 860px);
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(226,232,240,1);
  background: rgba(255,255,255,.92);
  box-shadow: 0 30px 90px rgba(2,6,23,.35);
  display:flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
}
@supports (backdrop-filter: blur(10px)){
  .jjdt-modalCard{ backdrop-filter: blur(10px); background: rgba(255,255,255,.86); }
}
.jjdt-modalTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.jjdt-modalTitle{
  font-weight: 950;
  letter-spacing: -0.01em;
}
.jjdt-modalList{
  overflow: auto;
  padding: 6px;
  border-radius: 14px;
  border: 1px solid rgba(226,232,240,1);
  background: rgba(248,250,252,.65);
}
.jjdt-modalItem{
  width: 100%;
  text-align: left;
  border: 1px solid rgba(226,232,240,1);
  background: rgba(255,255,255,.75);
  border-radius: 14px;
  padding: 12px;
  cursor: pointer;
  margin-bottom: 10px;
}
.jjdt-modalItem:hover{
  background: rgba(59,130,246,.10);
  border-color: rgba(59,130,246,.25);
}
.jjdt-modalItemMain{
  font-weight: 950;
  color: var(--ink);
}
.jjdt-modalItemSub{
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

/* Responsive */
@media (max-width: 820px){
  .jjdt-tzTimelineRow{
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .jjdt-tzTimelineGridHead{ display:none; }
  .jjdt-tzTimelineGrid{ overflow: hidden; }
}

/* =========================
   Timezone tool enhancements (v1.2+)
   - clock bar
   - stronger button text colors (theme override safe)
========================= */

/* Guard against theme styles that set button text to white */
.jjdt-app .jjdt-btn,
.jjdt-app .jjdt-iconbtn,
.jjdt-app .jjdt-chip,
.jjdt-app .jjdt-pill,
.jjdt-app .jjdt-ghost,
.jjdt-app button.jjdt-btn,
.jjdt-app button.jjdt-iconbtn,
.jjdt-app button.jjdt-chip,
.jjdt-app button.jjdt-ghost{
  color: var(--text) !important;
}
.jjdt-app .jjdt-btn.primary,
.jjdt-app button.jjdt-btn.primary{
  color: #fff !important;
}

.jjdt-clockbar{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 14px;
}
.jjdt-clock{
  flex: 1;
  min-width: 260px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow);
  padding: 14px 14px;
  position: relative;
  overflow: hidden;
}
.jjdt-clock:before{
  content: "";
  position: absolute;
  inset: -40px -80px auto -80px;
  height: 120px;
  background: radial-gradient(closest-side, rgba(37,99,235,.18), rgba(99,102,241,.10), transparent 70%);
  pointer-events: none;
}
.jjdt-clock .cap{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.jjdt-clock .cap .label{
  font-weight: 950;
  letter-spacing: -.2px;
}
.jjdt-clock .cap .tz{
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  background: rgba(241,245,249,.75);
  border: 1px solid var(--line);
  padding: 6px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.jjdt-clock .time{
  position: relative;
  margin-top: 10px;
  font-family: var(--mono);
  font-weight: 1000;
  font-size: 30px;
  letter-spacing: -0.8px;
}
.jjdt-clock .date{
  position: relative;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
}

.jjdt-clockControls{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.jjdt-seg{
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,.75);
}
.jjdt-segbtn{
  appearance: none;
  border: 0;
  background: transparent;
  padding: 9px 12px;
  cursor: pointer;
  font-weight: 950;
  font-size: 12px;
  color: var(--muted) !important;
}
.jjdt-segbtn.active{
  background: var(--beige2);
  color: var(--text) !important;
}

@media (max-width: 820px){
  .jjdt-clock{ min-width: 100%; }
  .jjdt-clockControls{ justify-content: flex-start; }
}


/* ================================
   Timezone tool – Pro clock upgrade
   ================================ */
.jjdt-clockbar{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  margin: 12px 0 14px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.10);
  background:
    radial-gradient(1200px 420px at 18% 0%, rgba(59,130,246,.16), transparent 55%),
    radial-gradient(900px 420px at 100% 0%, rgba(16,185,129,.14), transparent 58%),
    linear-gradient(180deg, #ffffff 0%, #f7fbff 55%, #f6fff9 100%);
  box-shadow: 0 16px 40px rgba(2,6,23,.08);
}
@media (max-width: 920px){
  .jjdt-clockbar{ grid-template-columns: 1fr; }
}

.jjdt-clock.jjdt-clockPro{
  position:relative;
  overflow:hidden;
  border-radius:16px;
  padding:14px;
  background: rgba(255,255,255,.78);
  border:1px solid rgba(15,23,42,.12);
  box-shadow: 0 12px 30px rgba(2,6,23,.10);
  backdrop-filter: blur(10px);
  /* Default accent; dynamically overridden per clock (Night/Morning/Work/Evening) */
  --accent: rgba(59,130,246,.95);
}

.jjdt-clockHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.jjdt-clockHeadLeft{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  min-width:0;
}

.jjdt-clockTz{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight:800;
  color: rgba(15,23,42,.78);
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(15,23,42,.10);
  padding:4px 10px;
  border-radius:999px;
  max-width: 100%;
}

.jjdt-clockCopy{
  border-radius:10px !important;
}

.jjdt-clockBody{
  position:relative;
  margin-top:10px;
  min-height:56px;
  display:flex;
  align-items:flex-end;
}

/* Time-of-day badge (Night/Morning/Work/Evening) */
.jjdt-clockTod{
  position:absolute;
  right: 12px;
  top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.74);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 14px 28px rgba(2,6,23,.10);
  backdrop-filter: blur(10px);
}
.jjdt-clockTodSwatch{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(255,255,255,.85), 0 10px 18px rgba(2,6,23,.16);
}
.jjdt-clockTodIcon{
  width: 18px;
  height: 18px;
  color: var(--accent);
  display: inline-flex;
}
.jjdt-clockTodIcon svg{
  width: 18px;
  height: 18px;
  display:block;
}
.jjdt-clockTodLabel{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: rgba(15,23,42,.74);
}

@media (max-width: 520px){
  .jjdt-clockTod{
    right: 10px;
    top: 6px;
    padding: 6px 8px;
  }
  .jjdt-clockTodLabel{ display: none; }
}

.jjdt-clockRing{
  position:absolute;
  right:-56px;
  top:-70px;
  width:190px;
  height:190px;
  border-radius:999px;
  background: conic-gradient(var(--accent) var(--secDeg, 0deg), rgba(2,6,23,.10) 0);
  opacity:.36;
  pointer-events:none;
}
.jjdt-clockRing::after{
  content:'';
  position:absolute;
  inset:14px;
  border-radius:999px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.4);
}

.jjdt-clockDigits{
  position:relative;
  display:flex;
  align-items:baseline;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing:-1.2px;
  font-weight: 1000;
  font-size: 38px;
  line-height:1;
  color: rgba(2,6,23,.92);
  text-shadow: 0 1px 0 rgba(255,255,255,.65);
}

/* Digit boxes (pro look, consistent across themes) */
.jjdt-clockDigits .jjdt-clockHH,
.jjdt-clockDigits .jjdt-clockMM,
.jjdt-clockDigits .jjdt-clockSS{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 72px;
  padding: 10px 12px;
  border-radius: 14px;
  border:1px solid rgba(15,23,42,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(241,245,249,.98) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 10px 22px rgba(2,6,23,.10);
}

.jjdt-clockDigits .jjdt-clockSS{
  min-width: 58px;
  padding: 8px 10px;
  font-size: 16px;
  font-weight: 850;
  margin-left:6px;
  opacity:.82;
}

.jjdt-clockSep{
  opacity:.70;
  padding: 0 2px;
  animation: jjdt-blink 1s step-start infinite;
}

.jjdt-clockSS{
  font-size: 16px;
  font-weight: 850;
  margin-left:6px;
  opacity:.78;
}

.jjdt-clockFoot{
  position:relative;
  margin-top:10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.jjdt-clockDate{
  font-size:13px;
  font-weight:800;
  color: rgba(15,23,42,.72);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

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

.jjdt-clockOff{
  font-size:12px;
  font-weight:800;
  font-family: var(--mono);
  background: rgba(15,23,42,.04);
  border:1px solid rgba(15,23,42,.10);
  padding:4px 10px;
  border-radius:999px;
  color: rgba(15,23,42,.78);
}

.jjdt-aka{
  font-weight:900;
  opacity:.70;
}

/* Strong theme override guard (Elementor / WP themes) */
.jjdt-app :where(button.jjdt-btn, a.jjdt-btn){
  color: var(--text) !important;
}
.jjdt-app :where(button.jjdt-btn.primary, a.jjdt-btn.primary){
  color: #fff !important;
}
.jjdt-app :where(button.jjdt-btn.danger, a.jjdt-btn.danger){
  color: #b91c1c !important;
}
.jjdt-app :where(button.jjdt-iconbtn, a.jjdt-iconbtn){
  color: var(--text) !important;
}

@keyframes jjdt-blink{
  50%{ opacity:.18; }
}

/* =========================
   Timezone tool UX refinements (v1.2.8)
   - Align left "time bar" visuals with Timeline bars
   - Harmonize section backgrounds with Result panel tone
   - Tone down common timezone chips
========================= */

/* 1) Section tone unification (left fields match Result panel tone) */
.jjdt-tz .jjdt-field{
  /* Glassy gradient, consistent with the Results panel */
  background:
    radial-gradient(120% 120% at 12% 0%, rgba(37,99,235,.10), rgba(255,255,255,0) 55%),
    radial-gradient(120% 120% at 88% 0%, rgba(16,185,129,.10), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.62));
  border-color: rgba(37,99,235,.16);
  backdrop-filter: blur(6px);
}

/* 2) "Common timezones" chips: reduce saturation and keep strong contrast */
.jjdt-tz .jjdt-chip{
  background: rgba(37,99,235,.12);
  color: #1e40af;
  border-color: rgba(37,99,235,.22);
  box-shadow: 0 10px 22px rgba(2,6,23,.06);
}
.jjdt-tz .jjdt-chip:hover{
  background: rgba(37,99,235,.18);
  border-color: rgba(37,99,235,.28);
}
.jjdt-tz .jjdt-chip:active{ transform: translateY(1px); }
.jjdt-tz .jjdt-chip:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(37,99,235,.18), 0 10px 22px rgba(2,6,23,.06);
}

/* 3) Left scrub/time bar: same look & feel as Timeline time bars */
.jjdt-tzScrubBar{
  display:block;
  border: 1px solid rgba(148,163,184,.40);
  background: rgba(255,255,255,.78);
  border-radius: 12px;
  padding: 10px 10px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    0 8px 20px rgba(2,6,23,.06);
}

.jjdt-tzScrubCells{
  display:grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  gap: 2px;
  align-items:center;
  width: 100%;
}

.jjdt-tzScrubCell{
  height: 16px;
  border-radius: 6px;
  border: 1px solid rgba(148,163,184,.22);
  background: rgba(15,23,42,.08);
  cursor:pointer;
  user-select:none;
  /* Show hour numbers in each slot for quick scanning (0~23) */
  display:flex;
  align-items:center;
  justify-content:center;
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.2px;
  color: rgba(15,23,42,.70);
  text-shadow: 0 1px 0 rgba(255,255,255,.55);
}

/* hour bands (same grouping as Timeline: night/morning/work/evening)
   Night: 0–5 & 22–23, Morning: 6–8, Work: 9–17, Evening: 18–21 */
.jjdt-tzScrubCell:nth-child(-n+6){ background: rgba(2,6,23,.10); }
.jjdt-tzScrubCell:nth-child(n+7):nth-child(-n+9){ background: rgba(59,130,246,.14); }
.jjdt-tzScrubCell:nth-child(n+10):nth-child(-n+18){ background: rgba(16,185,129,.18); }
.jjdt-tzScrubCell:nth-child(n+19):nth-child(-n+22){ background: rgba(245,158,11,.18); }
.jjdt-tzScrubCell:nth-child(n+23){ background: rgba(2,6,23,.10); }

.jjdt-tzScrubCell:hover{ filter: brightness(1.02); }

@media (max-width: 520px){
  .jjdt-tzScrubCell{
    font-size: 8px;
    letter-spacing: -0.4px;
  }
}
@media (max-width: 420px){
  .jjdt-tzScrubCell{
    font-size: 7px;
    letter-spacing: -0.6px;
  }
}

.jjdt-tzScrubMarker{
  width: 4px;
  background: rgba(59,130,246,.95);
  border-radius: 999px;
  box-shadow: 0 0 0 3px rgba(59,130,246,.18), 0 6px 16px rgba(59,130,246,.22);
  top: 8px;
  bottom: 8px;
}

/* =========================
   Usage guide (toggle panel)
========================= */

.jjdt-guideWrap{
  margin-top: 0;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-6px);
  transition: max-height .25s ease, opacity .25s ease, transform .25s ease;
}
.jjdt-guideWrap.open{
  margin-top: 18px;
  max-height: 2200px;
  opacity: 1;
  transform: translateY(0);
}

.jjdt-guideCard{
  background:
    radial-gradient(900px 320px at 12% 0%, rgba(59,130,246,.10), transparent 55%),
    radial-gradient(900px 340px at 88% 0%, rgba(16,185,129,.08), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.78));
  border-color: rgba(148,163,184,.22);
  backdrop-filter: blur(8px);
}

.jjdt-guideHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.jjdt-guideTitle{
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: 16px;
}
.jjdt-guideBody{
  font-size: 13px;
  line-height: 1.7;
  color: rgba(15,23,42,.86);
}
.jjdt-guideBody h3{
  margin: 14px 0 6px;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: -0.01em;
}
.jjdt-guideBody ol,
.jjdt-guideBody ul{
  margin: 8px 0 0 18px;
  padding: 0;
}
.jjdt-guideBody li{ margin: 6px 0; }


.jjdt-guideQuick{
  padding: 10px 12px;
  border: 1px solid rgba(148,163,184,.22);
  border-radius: 14px;
  background: rgba(255,255,255,.70);
}
.jjdt-guideQuick h3{ margin-top: 0; }

.jjdt-guideDetails{
  margin-top: 10px;
  border: 1px solid rgba(148,163,184,.20);
  border-radius: 14px;
  padding: 8px 10px;
  background: rgba(255,255,255,.62);
}
.jjdt-guideDetails summary{
  cursor: pointer;
  font-weight: 850;
  user-select: none;
  list-style: none;
}
.jjdt-guideDetails summary::-webkit-details-marker{ display:none; }
.jjdt-guideDetails summary::after{
  content: '+';
  float: right;
  color: rgba(15,23,42,.55);
  font-weight: 900;
}
.jjdt-guideDetails[open] summary::after{ content: '–'; }

.jjdt-guideNote{
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(15,23,42,.04);
  color: rgba(15,23,42,.78);
}
.jjdt-guideBody code{
  font-family: var(--mono);
  font-size: 12px;
  background: rgba(15,23,42,.06);
  padding: 2px 6px;
  border-radius: 8px;
}

.jjdt-copyFmt{
  display:flex;
  align-items:center;
  gap: 8px;
}
.jjdt-copyFmt .jjdt-select{
  height: 30px;
  padding: 5px 12px;
}



/* === JJDT Timezone Tool enhancements (v1.3.1) === */

/* Move hour labels into each cell: hide header row to avoid double hour rows */
.jjdt-tzTimelineGridHead{ display:none; }

/* Timeline cells: show hour label inside each cell */
.jjdt-tzCell{
  display:flex;
  align-items:center;
  justify-content:center;
  font-family: var(--mono);
  font-weight: 900;
  /* Increase readability of the hour labels inside the Timeline bars */
  font-size: 12px;
  line-height: 1;
  color: rgba(15,23,42,.70);
  height: 24px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,.12);
  box-sizing: border-box;
}

/* Relative day tint vs base date (in base timezone) */
.jjdt-tzCell.jjdt-relPrev{ border-color: rgba(239,68,68,.28); }
.jjdt-tzCell.jjdt-relNext{ border-color: rgba(16,185,129,.30); }

/* Base time nudge (±10 minutes) */
.jjdt-timeNudge{
  margin-top: 8px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
}
.jjdt-nudgeBtn{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(226,232,240,1);
  background: rgba(255,255,255,.92);
  /* Some themes (Elementor etc.) globally override <button> text color.
     Keep +/- glyphs readable on light backgrounds. */
  color: var(--text) !important;
  cursor: pointer;
  font-weight: 900;
  font-size: 18px;
  line-height: 1;
  display:flex;
  align-items:center;
  justify-content:center;
  user-select: none;
  touch-action: manipulation;
}
.jjdt-nudgeBtn:active{ transform: translateY(1px); }
.jjdt-nudgeDelta{
  min-width: 84px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(226,232,240,1);
  background: rgba(15,23,42,.03);
  font-family: var(--mono);
  font-weight: 800;
  font-size: 13px;
  text-align: center;
  user-select: none;
}

/* ==================================================
   UI polish (v1.3.3)
   - calmer palette
   - improved typography
   - refined buttons/chips
   - more premium clocks / timeline look
================================================== */

.jjdt-app{
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans KR", "Apple SD Gothic Neo", Arial, "Helvetica Neue", sans-serif;
  --radius: 18px;
  --shadow: 0 16px 44px rgba(2,6,23,.10);
  --shadow2: 0 10px 26px rgba(2,6,23,.08);
  --line: rgba(148,163,184,.28);
  --line2: rgba(148,163,184,.22);
  --muted: #5b6b82;
  --text: #0b1220;
  --bg: #f4f7fb;
  --card: rgba(255,255,255,.92);
  --cardSolid: #ffffff;
}

.jjdt-app{
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

@media (prefers-reduced-motion: no-preference){
  .jjdt-card,
  .jjdt-btn,
  .jjdt-chip,
  .jjdt-iconbtn,
  .jjdt-tzRow{ transition: box-shadow .18s ease, transform .06s ease, background .18s ease, border-color .18s ease, color .18s ease; }
}

.jjdt-header{
  padding: 18px 18px 10px;
  border-radius: 22px;
  background:
    radial-gradient(900px 250px at 10% 0%, rgba(37,99,235,.12), transparent 60%),
    radial-gradient(800px 250px at 90% 0%, rgba(16,185,129,.10), transparent 55%);
  border: 1px solid rgba(148,163,184,.22);
}

.jjdt-title h1{
  font-size: 32px;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.jjdt-title p{
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}

.jjdt-topbar{ gap: 10px; }
.jjdt-topbar .jjdt-btn{ padding: 10px 12px; border-radius: 14px; }

.jjdt-card{
  background: var(--cardSolid);
  border: 1px solid rgba(148,163,184,.22);
  box-shadow: var(--shadow);
}

.jjdt-grid{ gap: 18px; }

.jjdt-sectionTitle h2{
  /* Reduce heading size (requested) while keeping strong hierarchy */
  font-size: 16px;
  letter-spacing: -0.02em;
}

.jjdt-sectionTitle .hint{ color: var(--muted); }

.jjdt-btn{
  border: 1px solid rgba(148,163,184,.28);
  background: rgba(255,255,255,.88);
  box-shadow: 0 8px 18px rgba(2,6,23,.06);
}

.jjdt-btn:hover{
  border-color: rgba(148,163,184,.38);
  box-shadow: 0 10px 22px rgba(2,6,23,.08);
}

.jjdt-btn.primary{
  border-color: transparent;
  background: linear-gradient(180deg, var(--blue), var(--blue2));
  box-shadow: 0 16px 34px rgba(37,99,235,.22);
}

.jjdt-btn.primary:hover{
  box-shadow: 0 18px 40px rgba(37,99,235,.26);
}

.jjdt-btn.danger{ border-color: rgba(248,113,113,.35); }

.jjdt-chip{
  background: rgba(37,99,235,.10);
  color: rgba(15,23,42,.94);
  border: 1px solid rgba(37,99,235,.22);
  box-shadow: 0 10px 22px rgba(2,6,23,.05);
}

.jjdt-chip:hover{
  background: rgba(37,99,235,.16);
  border-color: rgba(37,99,235,.32);
}

.jjdt-iconbtn{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(148,163,184,.26);
  box-shadow: 0 10px 20px rgba(2,6,23,.06);
}

.jjdt-iconbtn:hover{ box-shadow: 0 12px 24px rgba(2,6,23,.08); }

.jjdt-input, .jjdt-select, .jjdt-textarea{
  border: 1px solid rgba(148,163,184,.30);
  background: rgba(255,255,255,.92);
}

.jjdt-input:focus, .jjdt-select:focus, .jjdt-textarea:focus{
  border-color: rgba(37,99,235,.55);
  box-shadow: 0 0 0 4px rgba(37,99,235,.14);
}

.jjdt-pill{
  border: 1px solid rgba(148,163,184,.26);
  background: rgba(248,250,252,.85);
}

/* ---- MeetTimezone: in-app hero + brand typography ---- */

.jjdt-tool-timezone .jjdt-title h1{
  font-size: 28px;
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: -0.035em;
  background: linear-gradient(90deg, #0ea5e9 0%, #60a5fa 35%, #a78bfa 70%, #22c55e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 10px 34px rgba(37,99,235,.18);
}

.jjdt-tool-timezone .jjdt-title .jjdt-sub{
  max-width: 920px;
  font-size: 13px;
  color: #64748b;
}

@media (max-width: 520px){
  .jjdt-tool-timezone .jjdt-title h1{ font-size: 24px; }
}

.jjdt-tool-timezone .jjdt-meetHero{
  width: 100%;
  margin: 10px 0 18px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(148,163,184,.22);
  background: radial-gradient(900px 380px at 18% 0%, rgba(37,99,235,.10), transparent 55%),
              radial-gradient(900px 420px at 88% 0%, rgba(16,185,129,.08), transparent 55%),
              rgba(2,6,23,.02);
  box-shadow: 0 18px 48px rgba(2,6,23,.10);
}

.jjdt-tool-timezone .jjdt-meetHeroImg{
  display: block;
  width: 100%;
  height: auto;
}

/* ---- Timezone tool: make clocks + timeline feel more premium ---- */

.jjdt-tool-timezone .jjdt-tzClocksCard{
  background:
    radial-gradient(900px 260px at 12% 0%, rgba(37,99,235,.12), transparent 55%),
    radial-gradient(900px 300px at 88% 0%, rgba(16,185,129,.10), transparent 55%);
  border: 1px solid rgba(148,163,184,.22);
  margin-bottom: 22px;
}

/* Space between Live Clocks and the meeting planner */
.jjdt-liveHint{
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(226,232,240,.85);
}

.jjdt-tool-timezone .jjdt-tzClocksHead{
  font-weight: 900;
  letter-spacing: -0.02em;
}

.jjdt-tool-timezone .jjdt-tzClock{
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.92));
  border: 1px solid rgba(148,163,184,.22);
  box-shadow: 0 18px 50px rgba(2,6,23,.10);
}

.jjdt-tool-timezone .jjdt-tzClock::before{
  opacity: .55;
}

.jjdt-tool-timezone .jjdt-tzClockLabel{
  font-size: 14px;
  letter-spacing: -0.01em;
}

.jjdt-tool-timezone .jjdt-tzClockTz{
  font-weight: 800;
  color: rgba(15,23,42,.86);
}

.jjdt-tool-timezone .jjdt-tzTime{
  margin-top: 12px;
  gap: 10px;
}

.jjdt-tool-timezone .jjdt-tzTime .t,
.jjdt-tool-timezone .jjdt-tzTime .s{
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-family: var(--mono);
}

.jjdt-tool-timezone .jjdt-tzTime .t{
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(241,245,249,.92));
  border: 1px solid rgba(148,163,184,.25);
  box-shadow: 0 12px 24px rgba(2,6,23,.08);
  font-size: 44px;
  letter-spacing: -0.06em;
}

.jjdt-tool-timezone .jjdt-tzTime .s{
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(241,245,249,.90));
  border: 1px solid rgba(148,163,184,.24);
  box-shadow: 0 12px 24px rgba(2,6,23,.08);
  font-size: 16px;
  min-width: 56px;
}

.jjdt-tool-timezone .jjdt-tzTimeline{
  background:
    radial-gradient(800px 260px at 14% 0%, rgba(37,99,235,.12), transparent 56%),
    radial-gradient(900px 300px at 92% 0%, rgba(16,185,129,.10), transparent 55%);
  border: 1px solid rgba(148,163,184,.22);
}

.jjdt-tool-timezone .jjdt-tzRow{
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(148,163,184,.20);
}

.jjdt-tool-timezone .jjdt-tzRow:hover{
  border-color: rgba(37,99,235,.30);
  box-shadow: 0 12px 28px rgba(2,6,23,.10);
}

.jjdt-tool-timezone .jjdt-tzGrid{
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,250,252,.96));
  border: 1px solid rgba(148,163,184,.22);
}

.jjdt-tool-timezone .jjdt-nudgeDelta{
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(241,245,249,.92));
  border: 1px solid rgba(148,163,184,.26);
  box-shadow: 0 10px 20px rgba(2,6,23,.08);
}

.jjdt-tool-timezone .jjdt-nudgeBtn{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(148,163,184,.26);
  box-shadow: 0 10px 20px rgba(2,6,23,.07);
}

.jjdt-tool-timezone .jjdt-nudgeBtn:hover{
  border-color: rgba(37,99,235,.32);
  box-shadow: 0 12px 24px rgba(2,6,23,.09);
}

/* =====================================================================
   JJ Dev Tools — Pro UI / UX refresh (utility tools)
   Applies to all tools EXCEPT the meeting time converter (timezone tool).
   ===================================================================== */

.jjdt-app:not(.jjdt-tool-timezone){
  /* modern typography */
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Noto Sans KR", "Apple SD Gothic Neo", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* calm palette (light) */
  --bg: #f6f8fc;
  --card: rgba(255,255,255,.92);
  --card2: rgba(255,255,255,.86);
  --text: #0b1220;
  --muted: #5b6b84;
  --line: rgba(15,23,42,.10);
  --line2: rgba(15,23,42,.08);
  --blue: #2563eb;
  --blue2: #1d4ed8;
  --green: #16a34a;
  --red: #e11d48;
  --orange: #f97316;

  /* mapping for legacy "--jjdt-*" vars used by some components */
  --jjdt-bg: var(--bg);
  --jjdt-card: var(--card);
  --jjdt-text: var(--text);
  --jjdt-muted: var(--muted);
  --jjdt-line: var(--line);
  --jjdt-blue: var(--blue);
  --jjdt-blue2: var(--blue2);
  --jjdt-green: var(--green);
  --jjdt-red: var(--red);
  --jjdt-orange: var(--orange);
  --jjdt-shadow: 0 24px 70px rgba(2,6,23,.10);

  font-family: var(--sans);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  position: relative;
  isolation: isolate;
  padding: 18px;
  border-radius: 24px;
  border: 1px solid rgba(148,163,184,.28);
  background:
    radial-gradient(1200px 500px at 12% 0%, rgba(37,99,235,.10), transparent 60%),
    radial-gradient(900px 420px at 88% 0%, rgba(20,184,166,.10), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(246,248,252,.72));
  box-shadow: 0 30px 90px rgba(2,6,23,.10);
}

@media (max-width: 640px){
  .jjdt-app:not(.jjdt-tool-timezone){ padding: 14px; border-radius: 18px; }
}

/* Header */
.jjdt-app:not(.jjdt-tool-timezone) .jjdt-header{
  margin: 0 0 16px;
  padding: 4px 2px 14px;
  border-bottom: 1px solid var(--line);
}

.jjdt-app:not(.jjdt-tool-timezone) .jjdt-title{
  font-size: 30px;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.jjdt-app:not(.jjdt-tool-timezone) .jjdt-desc{
  max-width: 72ch;
  color: var(--muted);
}

.jjdt-app:not(.jjdt-tool-timezone) .jjdt-actions{
  gap: 10px;
}

.jjdt-app:not(.jjdt-tool-timezone) .jjdt-smallBtn{
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(148,163,184,.28);
  box-shadow: 0 10px 22px rgba(2,6,23,.06);
  color: var(--text);
}
.jjdt-app:not(.jjdt-tool-timezone) .jjdt-smallBtn:hover{
  transform: translateY(-1px);
  border-color: rgba(37,99,235,.28);
  box-shadow: 0 14px 30px rgba(2,6,23,.08);
}

.jjdt-app:not(.jjdt-tool-timezone) .jjdt-langToggle{
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(148,163,184,.26);
  box-shadow: 0 10px 22px rgba(2,6,23,.06);
}
.jjdt-app:not(.jjdt-tool-timezone) .jjdt-langToggle button{
  color: var(--muted);
  font-weight: 700;
}
.jjdt-app:not(.jjdt-tool-timezone) .jjdt-langToggle button.active{
  color: var(--text);
  background: rgba(37,99,235,.12);
}

/* Cards */
.jjdt-app:not(.jjdt-tool-timezone) .jjdt-card{
  border: 1px solid rgba(148,163,184,.26);
  background: var(--card);
  border-radius: 18px;
  box-shadow: 0 18px 55px rgba(2,6,23,.08);
}

/* Nested cards become "soft sections" */
.jjdt-app:not(.jjdt-tool-timezone) .jjdt-card .jjdt-card{
  border-color: rgba(148,163,184,.22);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,250,252,.92));
  box-shadow: none;
}

/* Inputs */
.jjdt-app:not(.jjdt-tool-timezone) input,
.jjdt-app:not(.jjdt-tool-timezone) select,
.jjdt-app:not(.jjdt-tool-timezone) textarea{
  font-family: var(--sans);
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(148,163,184,.30);
  border-radius: 12px;
  color: var(--text);
}

.jjdt-app:not(.jjdt-tool-timezone) textarea{ font-family: var(--mono); }

.jjdt-app:not(.jjdt-tool-timezone) input:focus,
.jjdt-app:not(.jjdt-tool-timezone) select:focus,
.jjdt-app:not(.jjdt-tool-timezone) textarea:focus{
  outline: none;
  border-color: rgba(37,99,235,.55);
  box-shadow: 0 0 0 4px rgba(37,99,235,.16);
}

.jjdt-app:not(.jjdt-tool-timezone) input::placeholder,
.jjdt-app:not(.jjdt-tool-timezone) textarea::placeholder{
  color: rgba(91,107,132,.75);
}

/* Buttons */
.jjdt-app:not(.jjdt-tool-timezone) .jjdt-btn{
  border-radius: 12px;
  font-weight: 800;
  letter-spacing: -0.01em;
  box-shadow: 0 14px 34px rgba(2,6,23,.10);
}

.jjdt-app:not(.jjdt-tool-timezone) .jjdt-btnPrimary{
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 60%, #0ea5e9 120%);
  border-color: rgba(37,99,235,.35);
  color: #fff;
}
.jjdt-app:not(.jjdt-tool-timezone) .jjdt-btnPrimary:hover{
  transform: translateY(-1px);
  filter: saturate(1.05);
  box-shadow: 0 18px 44px rgba(37,99,235,.20);
}

.jjdt-app:not(.jjdt-tool-timezone) .jjdt-btnOutline,
.jjdt-app:not(.jjdt-tool-timezone) .jjdt-btnGhost{
  background: rgba(255,255,255,.80);
  border-color: rgba(148,163,184,.28);
  color: var(--text);
  box-shadow: 0 12px 28px rgba(2,6,23,.06);
}
.jjdt-app:not(.jjdt-tool-timezone) .jjdt-btnOutline:hover,
.jjdt-app:not(.jjdt-tool-timezone) .jjdt-btnGhost:hover{
  transform: translateY(-1px);
  border-color: rgba(37,99,235,.26);
  box-shadow: 0 16px 34px rgba(2,6,23,.08);
}

/* Tabs (Base64/URL 등) */
.jjdt-app:not(.jjdt-tool-timezone) .jjdt-tabs{
  background: rgba(2,6,23,.04);
  border: 1px solid rgba(148,163,184,.22);
  padding: 6px;
  border-radius: 999px;
}
.jjdt-app:not(.jjdt-tool-timezone) .jjdt-tab{
  border: 0;
  border-radius: 999px;
  padding: 7px 12px;
  font-weight: 800;
  color: var(--muted);
  background: transparent;
}
.jjdt-app:not(.jjdt-tool-timezone) .jjdt-tab.active{
  background: rgba(255,255,255,.95);
  color: var(--text);
  box-shadow: 0 10px 26px rgba(2,6,23,.10);
}

/* KPI */
.jjdt-app:not(.jjdt-tool-timezone) .jjdt-kpiBox{
  border: 1px solid rgba(148,163,184,.22);
  background:
    radial-gradient(800px 220px at 10% 0%, rgba(37,99,235,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.90), rgba(248,250,252,.90));
  box-shadow: 0 16px 34px rgba(2,6,23,.08);
}

/* Tables */
.jjdt-app:not(.jjdt-tool-timezone) table{
  border-radius: 14px;
  overflow: hidden;
}
.jjdt-app:not(.jjdt-tool-timezone) th{
  background: rgba(2,6,23,.04);
  color: rgba(15,23,42,.78);
  font-weight: 900;
}
.jjdt-app:not(.jjdt-tool-timezone) td{ color: rgba(15,23,42,.85); }

/* Subtle helper text */
.jjdt-app:not(.jjdt-tool-timezone) .jjdt-hint,
.jjdt-app:not(.jjdt-tool-timezone) .jjdt-meta{
  color: rgba(91,107,132,.88);
}

/* Toast */
.jjdt-app:not(.jjdt-tool-timezone) .jjdt-toast{
  border: 1px solid rgba(148,163,184,.22);
  background: rgba(255,255,255,.92);
  box-shadow: 0 18px 40px rgba(2,6,23,.14);
}




/* =========================
   Cron tool – "Astro / Terminal" theme
   (Inspired by the Cron hero image style: space + glass + terminal)
========================= */

.jjdt-app.jjdt-tool-cron{
  /* Theme palette */
  --bg: #050814;
  --card: rgba(15, 23, 42, 0.58);
  --text: rgba(226, 232, 240, 0.96);
  --muted: rgba(148, 163, 184, 0.90);
  --line: rgba(148, 163, 184, 0.22);
  --blue: #38bdf8;
  --blue2: #0ea5e9;
  --shadow: 0 28px 90px rgba(2, 6, 23, 0.55);

  /* Cron hero image (only used in the Cron tool header).
     You can override these in WP custom CSS if you change the image URLs. */
  --jjdt-cron-hero-1024: url("https://axob0tpmsg7x.objectstorage.ap-chuncheon-1.oci.customer-oci.com/n/axob0tpmsg7x/b/blog-images-2025/o/calc-apps%2FCronNextRunCalculator_1024.webp");
  --jjdt-cron-hero-1536: url("https://axob0tpmsg7x.objectstorage.ap-chuncheon-1.oci.customer-oci.com/n/axob0tpmsg7x/b/blog-images-2025/o/calc-apps%2FCronNextRunCalculator_1536.webp");
  /* Optional (if you uploaded smaller sizes):
     --jjdt-cron-hero-768: url("..._768.webp");
     --jjdt-cron-hero-640: url("..._640.webp"); */
  --jjdt-cron-hero-768: var(--jjdt-cron-hero-1024);
  --jjdt-cron-hero-640: var(--jjdt-cron-hero-1024);
  --jjdt-cron-hero-img: var(--jjdt-cron-hero-1024);

  position: relative;
  overflow: hidden;
  border-radius: 22px;
  padding: 18px;
  color: var(--text);

  background:
    radial-gradient(1200px 800px at 18% 10%, rgba(56, 189, 248, 0.18), transparent 55%),
    radial-gradient(900px 700px at 88% 0%, rgba(99, 102, 241, 0.16), transparent 52%),
    radial-gradient(1200px 900px at 50% 110%, rgba(34, 211, 238, 0.12), transparent 55%),
    linear-gradient(180deg, #050814 0%, #070b1d 55%, #060916 100%);
  border: 1px solid rgba(148, 163, 184, 0.16);
  box-shadow: 0 30px 80px rgba(2, 6, 23, 0.55);
}

@media (min-width: 1200px){
  .jjdt-app.jjdt-tool-cron{ --jjdt-cron-hero-img: var(--jjdt-cron-hero-1536); }
}

.jjdt-app.jjdt-tool-cron::before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  background-image:
    radial-gradient(rgba(255,255,255,.75) 1px, transparent 1px),
    radial-gradient(rgba(255,255,255,.45) 1px, transparent 1px),
    radial-gradient(rgba(255,255,255,.25) 1px, transparent 1px);
  background-size: 140px 140px, 220px 220px, 360px 360px;
  background-position: 0 0, 60px 40px, 120px 90px;
  opacity: .10;
  mix-blend-mode: screen;
}

:where(.jjdt-app.jjdt-tool-cron) *{ color: inherit; }


/* Cron: component contrast overrides */
.jjdt-app.jjdt-tool-cron .jjdt-pill{
  color: #eaf3ff;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(160,200,255,.18);
}
.jjdt-app.jjdt-tool-cron .jjdt-pill--ok{
  background: rgba(91,231,196,.14);
  border-color: rgba(91,231,196,.30);
  color: #c9fff2;
}
.jjdt-app.jjdt-tool-cron .jjdt-pill--warn{
  background: rgba(255, 211, 107, .18);
  border-color: rgba(255, 211, 107, .32);
  color: #fff1c9;
}
.jjdt-app.jjdt-tool-cron .jjdt-pill--bad{
  background: rgba(255, 120, 120, .18);
  border-color: rgba(255, 120, 120, .32);
  color: #ffe1e1;
}

/* Cron: summary box */
.jjdt-app.jjdt-tool-cron .jjdt-cronSummaryBox{
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(150,200,255,.16);
  background: linear-gradient(135deg, rgba(7,18,36,.55), rgba(10,30,60,.28));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.jjdt-app.jjdt-tool-cron .jjdt-cronSummaryTitle{
  font-size: 13px;
  font-weight: 800;
  color: #eaf3ff;
  letter-spacing: .04em;
  margin-bottom: 6px;
}
.jjdt-app.jjdt-tool-cron .jjdt-cronSummaryText{
  font-size: 14px;
  line-height: 1.55;
  color: #d8e6ff;
}
.jjdt-app.jjdt-tool-cron .jjdt-cronSummaryText code{
  padding: 2px 6px;
  border-radius: 8px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(160,200,255,.20);
  color: #e8f2ff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
}
.jjdt-app.jjdt-tool-cron .jjdt-cronSummaryMeta{
  margin-top: 10px;
  display: grid;
  gap: 6px;
}
.jjdt-app.jjdt-tool-cron .jjdt-cronMetaRow{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #cfe1ff;
  font-size: 12px;
}
.jjdt-app.jjdt-tool-cron .jjdt-cronMetaLabel{
  min-width: 72px;
  opacity: .85;
  font-weight: 700;
}
.jjdt-app.jjdt-tool-cron .jjdt-cronMetaRow code{
  flex: 1;
  padding: 2px 6px;
  border-radius: 8px;
  background: rgba(0,0,0,.20);
  border: 1px solid rgba(160,200,255,.14);
  color: #e8f2ff;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.jjdt-app.jjdt-tool-cron .jjdt-muted{ color: var(--muted); }
.jjdt-app.jjdt-tool-cron .jjdt-mini{ color: rgba(148,163,184,.92); }

.jjdt-app.jjdt-tool-cron .jjdt-header{
  position: relative;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.58);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 18px;
  padding: 20px 20px 14px;
  backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

.jjdt-app.jjdt-tool-cron .jjdt-header::before{
  content: "";
  position: absolute;
  inset: -26px;
  background-image: var(--jjdt-cron-hero-img);
  background-size: cover;
  background-position: center;
  filter: blur(14px) saturate(1.15) brightness(0.55);
  opacity: 0.90;
  transform: scale(1.08);
  pointer-events: none;
}

.jjdt-app.jjdt-tool-cron .jjdt-header::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 420px at 15% 25%, rgba(56, 189, 248, 0.25), transparent 60%),
    radial-gradient(820px 380px at 85% 10%, rgba(99, 102, 241, 0.22), transparent 62%),
    linear-gradient(180deg, rgba(5, 8, 20, 0.85), rgba(5, 8, 20, 0.45));
  opacity: 1;
  pointer-events: none;
}

.jjdt-app.jjdt-tool-cron .jjdt-header > *{ position: relative; z-index: 1; }

.jjdt-app.jjdt-tool-cron .jjdt-title h1{
  font-size: 28px;
  letter-spacing: -0.02em;
  font-weight: 800;
  background: linear-gradient(90deg, rgba(226,232,240,0.96), rgba(147,197,253,0.96));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.jjdt-app.jjdt-tool-cron .jjdt-title p{ color: rgba(148,163,184,.92); }

.jjdt-app.jjdt-tool-cron .jjdt-card{
  background: var(--card);
  border: 1px solid rgba(148, 163, 184, 0.20);
  box-shadow: 0 22px 70px rgba(2, 6, 23, 0.45);
  backdrop-filter: blur(10px);
}

.jjdt-app.jjdt-tool-cron .jjdt-card.jjdt-cronShell{
  background: rgba(15, 23, 42, 0.38);
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: none;
}

/* Cron: hero image inside the tool body (matches post content width) */
.jjdt-app.jjdt-tool-cron .jjdt-cronHero{
  margin: 0 0 14px 0;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(2, 6, 23, 0.35);
}
.jjdt-app.jjdt-tool-cron .jjdt-cronHero img{
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
}
@media (min-width: 760px){
  .jjdt-app.jjdt-tool-cron .jjdt-cronHero img{ height: 220px; }
}

.jjdt-app.jjdt-tool-cron .jjdt-card.jjdt-cronPanel{
  background: rgba(15, 23, 42, 0.55);
}

.jjdt-app.jjdt-tool-cron .jjdt-sec + .jjdt-sec{
  border-top: 1px solid rgba(148, 163, 184, 0.16);
}

.jjdt-app.jjdt-tool-cron .jjdt-label{ color: rgba(226,232,240,.92); }
.jjdt-app.jjdt-tool-cron .jjdt-input,
.jjdt-app.jjdt-tool-cron .jjdt-textarea,
.jjdt-app.jjdt-tool-cron .jjdt-select{
  /* NOTE: use !important so WP themes (and some browser default/disabled styles)
     don't force white backgrounds that make light text unreadable. */
  background: rgba(2, 6, 23, 0.45) !important;
  border: 1px solid rgba(148, 163, 184, 0.25);
  color: rgba(248,250,252,.96) !important;
  caret-color: rgba(56,189,248,.95);
}

/* Cron: placeholder must stay readable on the dark input surface */
.jjdt-app.jjdt-tool-cron .jjdt-input::placeholder,
.jjdt-app.jjdt-tool-cron .jjdt-textarea::placeholder{
  color: rgba(226,232,240,.58);
}

/* Cron: ensure disabled controls keep the dark surface + readable text */
.jjdt-app.jjdt-tool-cron .jjdt-input:disabled,
.jjdt-app.jjdt-tool-cron .jjdt-textarea:disabled,
.jjdt-app.jjdt-tool-cron .jjdt-select:disabled{
  opacity: 1;
  background: rgba(2, 6, 23, 0.28) !important;
  color: rgba(226,232,240,.55) !important;
  -webkit-text-fill-color: rgba(226,232,240,.55);
}

.jjdt-app.jjdt-tool-cron .jjdt-select option{
  background: #0b1220;
  color: rgba(248,250,252,.95);
}

.jjdt-app.jjdt-tool-cron .jjdt-input:focus,
.jjdt-app.jjdt-tool-cron .jjdt-textarea:focus,
.jjdt-app.jjdt-tool-cron .jjdt-select:focus{
  border-color: rgba(56,189,248,.65);
  box-shadow: 0 0 0 4px rgba(56,189,248,.18);
}

.jjdt-app.jjdt-tool-cron .jjdt-btn{
  background: rgba(2, 6, 23, 0.35);
  border: 1px solid rgba(148,163,184,0.28);
  color: rgba(226,232,240,.96);
}

.jjdt-app.jjdt-tool-cron .jjdt-btn:hover{
  border-color: rgba(56,189,248,.55);
  box-shadow: 0 0 0 4px rgba(56,189,248,.10);
  transform: translateY(-1px);
}

.jjdt-app.jjdt-tool-cron .jjdt-btn.primary{
  border: 0;
  background: linear-gradient(135deg, rgba(56,189,248,0.95), rgba(59,130,246,0.95));
  color: #061122;
  box-shadow: 0 18px 50px rgba(14,165,233,.22);
}

.jjdt-app.jjdt-tool-cron .jjdt-btn.primary:hover{
  box-shadow: 0 22px 65px rgba(14,165,233,.30);
}

/* Make button icons pop on the cron (dark) skin */
.jjdt-app.jjdt-tool-cron .jjdt-btn .jjdt-btnIco{
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.16);
  box-shadow: 0 10px 30px rgba(2,6,23,.35);
}

.jjdt-app.jjdt-tool-cron .jjdt-iconbtn{
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.16);
  color: #eaf3ff;
  box-shadow: 0 20px 55px rgba(2,6,23,.45);
}
.jjdt-app.jjdt-tool-cron .jjdt-iconbtn:hover{
  background: rgba(56,189,248,.14);
  border-color: rgba(56,189,248,.28);
  box-shadow: 0 26px 70px rgba(2,6,23,.55);
}
.jjdt-app.jjdt-tool-cron .jjdt-btn.primary .jjdt-btnIco{
  background: rgba(2,6,23,0.18);
  border-color: rgba(2,6,23,0.18);
}

/* Terminal frame */
.jjdt-app.jjdt-tool-cron .jjdt-terminalFrame{
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.20);
  background: rgba(2, 6, 23, 0.70);
  box-shadow: 0 22px 70px rgba(2, 6, 23, 0.45);
}

.jjdt-app.jjdt-tool-cron .jjdt-terminalBar{
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(15,23,42,0.92), rgba(15,23,42,0.58));
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.jjdt-app.jjdt-tool-cron .jjdt-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display:inline-block;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.12);
}
.jjdt-app.jjdt-tool-cron .jjdt-dot-red{ background:#ff5f56; }
.jjdt-app.jjdt-tool-cron .jjdt-dot-yellow{ background:#ffbd2e; }
.jjdt-app.jjdt-tool-cron .jjdt-dot-green{ background:#27c93f; }

.jjdt-app.jjdt-tool-cron .jjdt-terminalLabel{
  margin-left: 6px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.95);
}

.jjdt-app.jjdt-tool-cron .jjdt-terminalText{
  width: 100%;
  border: 0 !important;
  outline: none;
  background: transparent !important;
  padding: 12px 12px 10px;
  color: rgba(226,232,240,.96);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.55;
  resize: vertical;
}
.jjdt-app.jjdt-tool-cron .jjdt-terminalText::placeholder{
  color: rgba(148,163,184,.65);
}

.jjdt-app.jjdt-tool-cron .jjdt-cronDetected{
  margin: 10px 12px 12px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(15,23,42,0.42);
  font-family: var(--mono);
  font-size: 13px;
  color: rgba(226,232,240,.92);
}

/* "Next runs" items */
.jjdt-app.jjdt-tool-cron .jjdt-runItem{
  background: rgba(15,23,42,0.55);
  border-color: rgba(148,163,184,0.18);
  box-shadow: 0 14px 45px rgba(2,6,23,0.35);
}

.jjdt-app.jjdt-tool-cron .jjdt-runWhen{
  color: rgba(226,232,240,.96);
}

.jjdt-app.jjdt-tool-cron .jjdt-runBadge{
  background: rgba(56,189,248,0.14);
  border-color: rgba(56,189,248,0.28);
  color: rgba(226,232,240,.96);
}

.jjdt-app.jjdt-tool-cron .jjdt-copyBtn{
  background: rgba(2,6,23,0.30);
  border-color: rgba(148,163,184,0.22);
  color: rgba(226,232,240,.96);
}
.jjdt-app.jjdt-tool-cron .jjdt-copyBtn:hover{
  border-color: rgba(56,189,248,.55);
  box-shadow: 0 0 0 4px rgba(56,189,248,.10);
}


/* -------------------------------------------------------
   Cron (next run times) – upcoming runs table + simulation
-------------------------------------------------------- */

.jjdt-app.jjdt-tool-cron .jjdt-note{
  background: rgba(15,23,42,0.42);
  border: 1px solid rgba(148, 163, 184, 0.18);
  color: rgba(226,232,240,.92);
}
.jjdt-app.jjdt-tool-cron .jjdt-note li{
  color: rgba(226,232,240,.88);
}
.jjdt-app.jjdt-tool-cron .jjdt-note small,
.jjdt-app.jjdt-tool-cron .jjdt-note .jjdt-mini{
  color: rgba(148,163,184,.95);
}
.jjdt-app.jjdt-tool-cron .jjdt-cronSupport{
  display:block;
  margin-top: 10px;
  color: rgba(148,163,184,.95);
}

/* Detected schedule / command (mono block) */
.jjdt-app.jjdt-tool-cron .jjdt-cronDetectedLine{
  margin: 0 0 6px;
}
.jjdt-app.jjdt-tool-cron .jjdt-cronDetectedLine:last-child{
  margin-bottom: 0;
}
.jjdt-app.jjdt-tool-cron .jjdt-cronDetectedLine--dim{
  color: rgba(148,163,184,.95);
}
.jjdt-app.jjdt-tool-cron .jjdt-cronDetected code{
  padding: 2px 6px;
  border-radius: 8px;
  background: rgba(2,6,23,0.25);
  border: 1px solid rgba(148,163,184,0.16);
  color: rgba(226,232,240,.95);
}
.jjdt-app.jjdt-tool-cron .jjdt-cronWarn{
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(250,204,21,0.10);
  border: 1px solid rgba(250,204,21,0.22);
  color: rgba(250, 204, 21, 0.96);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 12.5px;
  line-height: 1.35;
}

/* View segment */
.jjdt-app.jjdt-tool-cron .jjdt-cronViewSeg{
  background: rgba(2,6,23,0.30);
  border: 1px solid rgba(148,163,184,0.18);
}
.jjdt-app.jjdt-tool-cron .jjdt-cronViewSeg .jjdt-segBtn{
  color: rgba(226,232,240,.92);
}
.jjdt-app.jjdt-tool-cron .jjdt-cronViewSeg .jjdt-segBtn.active{
  background: rgba(56,189,248,0.22);
  border-color: rgba(56,189,248,0.35);
}
.jjdt-app.jjdt-tool-cron .jjdt-cronViewSeg .jjdt-segBtn:disabled{
  opacity: .45;
}

/* Simulation block */
.jjdt-app.jjdt-tool-cron .jjdt-cronSim{
  margin-top: 14px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(15,23,42,0.35);
  border: 1px solid rgba(148,163,184,0.16);
}
.jjdt-app.jjdt-tool-cron .jjdt-cronSimHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.jjdt-app.jjdt-tool-cron .jjdt-cronSimTitle{
  font-weight: 800;
  color: rgba(226,232,240,.96);
}
.jjdt-app.jjdt-tool-cron .jjdt-cronSimToggle{
  background: rgba(2,6,23,0.35);
  border: 1px solid rgba(148,163,184,0.22);
  color: rgba(226,232,240,.92);
}
.jjdt-app.jjdt-tool-cron .jjdt-cronSimToggle.isOn{
  background: rgba(56,189,248,0.18);
  border-color: rgba(56,189,248,0.38);
  box-shadow: 0 0 0 4px rgba(56,189,248,0.08);
}
.jjdt-app.jjdt-tool-cron .jjdt-cronSimBody{
  margin-top: 12px;
}
.jjdt-app.jjdt-tool-cron .jjdt-cronSimHint{
  margin-top: 8px;
  color: rgba(148,163,184,.95);
}

.jjdt-app.jjdt-tool-cron .jjdt-cronSimPreview{
  margin-top: 10px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(2,6,23,0.28);
  border: 1px solid rgba(56,189,248,0.18);
  box-shadow: 0 12px 34px rgba(0,0,0,0.18);
}

.jjdt-app.jjdt-tool-cron .jjdt-cronSimPreviewHead{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.jjdt-app.jjdt-tool-cron .jjdt-cronSimPreviewTitle{
  font-weight: 850;
  color: rgba(226,232,240,0.95);
  letter-spacing: 0.01em;
}

.jjdt-app.jjdt-tool-cron .jjdt-cronSimPreviewGrid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 860px){
  .jjdt-app.jjdt-tool-cron .jjdt-cronSimPreviewGrid{
    grid-template-columns: 1fr;
  }
}

.jjdt-app.jjdt-tool-cron .jjdt-cronSimPreviewCol{
  padding: 10px;
  border-radius: 14px;
  background: rgba(15,23,42,0.32);
  border: 1px solid rgba(148,163,184,0.14);
}

.jjdt-app.jjdt-tool-cron .jjdt-cronSimPreviewCol.isDelta{
  background: rgba(56,189,248,0.10);
  border-color: rgba(56,189,248,0.20);
}

.jjdt-app.jjdt-tool-cron .jjdt-cronSimPreviewLabel{
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(148,163,184,.96);
  margin-bottom: 6px;
}

.jjdt-app.jjdt-tool-cron .jjdt-cronSimPreviewPhrase{
  font-size: 12px;
  color: rgba(226,232,240,0.92);
  margin-bottom: 8px;
  line-height: 1.35;
}

.jjdt-app.jjdt-tool-cron .jjdt-cronSimPreviewMetrics{
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: rgba(226,232,240,0.90);
}

.jjdt-app.jjdt-tool-cron .jjdt-cronSimPreviewMetric{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.jjdt-app.jjdt-tool-cron .jjdt-cronSimPreviewMetric .k{
  color: rgba(148,163,184,.95);
  font-weight: 750;
  white-space: nowrap;
}

.jjdt-app.jjdt-tool-cron .jjdt-cronSimPreviewMetric .v{
  color: rgba(226,232,240,0.96);
  font-variant-numeric: tabular-nums;
  text-align: right;
}


/* Usage / examples (Cron) */
.jjdt-app.jjdt-tool-cron .jjdt-cronUsage{
  margin-top: 12px;
  padding: 10px 10px;
  border-radius: 16px;
  background: rgba(2,6,23,0.18);
  border: 1px solid rgba(148,163,184,0.16);
  color: rgba(226,232,240,0.88);
}
.jjdt-app.jjdt-tool-cron .jjdt-cronUsage h4{
  margin: 10px 0 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .01em;
  color: rgba(226,232,240,0.94);
}
.jjdt-app.jjdt-tool-cron .jjdt-cronUsage .jjdt-ul{
  margin: 0;
  padding-left: 18px;
  color: rgba(226,232,240,0.84);
}
.jjdt-app.jjdt-tool-cron .jjdt-cronUsage .jjdt-ul li{
  margin: 6px 0;
  line-height: 1.5;
}
.jjdt-app.jjdt-tool-cron .jjdt-cronUsage .jjdt-help{
  margin-top: 10px;
  font-size: 12px;
  color: rgba(226,232,240,0.80);
}
.jjdt-app.jjdt-tool-cron .jjdt-cronUsage .jjdt-code{
  margin-top: 10px;
  background: rgba(2,6,23,0.65);
  border: 1px solid rgba(148,163,184,0.18);
  color: rgba(226,232,240,0.92);
  box-shadow: 0 12px 38px rgba(2,6,23,0.38);
}

/* Simulation bar in results */
.jjdt-app.jjdt-tool-cron .jjdt-cronSimBar{
  margin-top: 10px;
  display:none;
}
.jjdt-app.jjdt-tool-cron .jjdt-cronSimBarInner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(56,189,248,0.10);
  border: 1px solid rgba(56,189,248,0.20);
}
.jjdt-app.jjdt-tool-cron .jjdt-cronSimBarInner code{
  padding: 2px 6px;
  border-radius: 8px;
  background: rgba(2,6,23,0.25);
  border: 1px solid rgba(56,189,248,0.16);
  color: rgba(226,232,240,.96);
}

/* Upcoming runs table (grid) */
.jjdt-app.jjdt-tool-cron .jjdt-cronRuns{
  margin-top: 12px;
}
.jjdt-app.jjdt-tool-cron .jjdt-cronRunsBox{
  border-radius: 18px;
  overflow: hidden;
  background: rgba(2,6,23,0.22);
  border: 1px solid rgba(148,163,184,0.16);
  box-shadow: 0 18px 55px rgba(2,6,23,0.34);
}
.jjdt-app.jjdt-tool-cron .jjdt-cronRunHead{
  display:grid;
  grid-template-columns: 1.15fr 0.85fr 0.95fr 0.85fr 0.85fr 0.85fr;
  gap: 0;
  background: linear-gradient(180deg, rgba(15,23,42,0.86), rgba(15,23,42,0.45));
  border-bottom: 1px solid rgba(148,163,184,0.14);
}
.jjdt-app.jjdt-tool-cron .jjdt-cronRunHead .jjdt-cronHeadCell{
  padding: 10px 12px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(148,163,184,.95);
  border-right: 1px solid rgba(148,163,184,0.10);
}
.jjdt-app.jjdt-tool-cron .jjdt-cronRunHead .jjdt-cronHeadCell:last-child{
  border-right: 0;
}
.jjdt-app.jjdt-tool-cron .jjdt-cronRunBody{
  display:block;
}
.jjdt-app.jjdt-tool-cron .jjdt-cronRunRow{
  display:grid;
  grid-template-columns: 1.15fr 0.85fr 0.95fr 0.85fr 0.85fr 0.85fr;
  gap: 0;
  border-bottom: 1px solid rgba(148,163,184,0.10);
  background: rgba(15,23,42,0.20);
}
.jjdt-app.jjdt-tool-cron .jjdt-cronRunRow:last-child{
  border-bottom: 0;
}
.jjdt-app.jjdt-tool-cron .jjdt-cronRunRow:hover{
  background: rgba(56,189,248,0.08);
}
.jjdt-app.jjdt-tool-cron .jjdt-cronRunRow:focus{
  outline: none;
  box-shadow: inset 0 0 0 2px rgba(56,189,248,0.42);
}
.jjdt-app.jjdt-tool-cron .jjdt-cronCell{
  padding: 10px 10px;
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.1;
  color: rgba(226,232,240,.96);
  border-right: 1px solid rgba(148,163,184,0.10);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  min-height: 48px;
}
.jjdt-app.jjdt-tool-cron .jjdt-cronCell:last-child{
  border-right: 0;
}
.jjdt-app.jjdt-tool-cron .jjdt-cronCell--y{
  justify-content:flex-start;
  font-size: 16px;
  color: rgba(226,232,240,.92);
}
.jjdt-app.jjdt-tool-cron .jjdt-cronCell--m{
  color: rgba(165,243,252,.96);
}
.jjdt-app.jjdt-tool-cron .jjdt-cronCell--d{
  position: relative;
  flex-direction: column;
  gap: 2px;
  color: rgba(253,230,138,.96);
}
.jjdt-app.jjdt-tool-cron .jjdt-cronCellMain{
  font-size: 16px;
}
.jjdt-app.jjdt-tool-cron .jjdt-cronCellSub{
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(148,163,184,.95);
}
.jjdt-app.jjdt-tool-cron .jjdt-cronCell--h,
.jjdt-app.jjdt-tool-cron .jjdt-cronCell--min,
.jjdt-app.jjdt-tool-cron .jjdt-cronCell--s{
  color: rgba(226,232,240,.96);
}
.jjdt-app.jjdt-tool-cron .jjdt-cronRunRow.isOverlap{
  background: rgba(239,68,68,0.08);
}
.jjdt-app.jjdt-tool-cron .jjdt-cronRunRow.isOverlap:hover{
  background: rgba(239,68,68,0.12);
}
.jjdt-app.jjdt-tool-cron .jjdt-cronRunRow.isOverlap:focus{
  box-shadow: inset 0 0 0 2px rgba(239,68,68,0.35);
}

/* Contrast & readability improvements */
.jjdt-app.jjdt-tool-cron .jjdt-muted{
  color: rgba(148,163,184,.86);
}
.jjdt-app.jjdt-tool-cron .jjdt-cronStatusMsg{
  color: rgba(226,232,240,.86);
}
.jjdt-app.jjdt-tool-cron .jjdt-cronStatusMsg b,
.jjdt-app.jjdt-tool-cron .jjdt-cronStatusMsg strong{
  color: rgba(226,232,240,.96);
}

/* Examples (visible on dark hero background) */
.jjdt-app.jjdt-tool-cron .jjdt-example{
  margin-top: 10px;
}
.jjdt-app.jjdt-tool-cron .jjdt-example pre{
  margin: 0;
  background: rgba(2,6,23,0.65);
  border: 1px solid rgba(148,163,184,0.18);
  border-radius: 14px;
  padding: 12px 14px;
  overflow: auto;
}
.jjdt-app.jjdt-tool-cron .jjdt-example code{
  color: rgba(226,232,240,0.92);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 13px;
  line-height: 1.55;
}

/* Simulation template controls */
.jjdt-app.jjdt-tool-cron .jjdt-cronSimParams{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}
.jjdt-app.jjdt-tool-cron .jjdt-cronSimField{
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 120px;
}
.jjdt-app.jjdt-tool-cron .jjdt-cronSimField .jjdt-mini{
  color: rgba(148,163,184,.92);
}

/* Column header tones (designer-style) */
.jjdt-app.jjdt-tool-cron .jjdt-cronRunHead .jjdt-cronCell{
  background: rgba(148,163,184,0.06);
}
.jjdt-app.jjdt-tool-cron .jjdt-cronRunHead .jjdt-cronCell--y{
  background: rgba(96,165,250,0.10);
}
.jjdt-app.jjdt-tool-cron .jjdt-cronRunHead .jjdt-cronCell--m{
  background: rgba(34,211,238,0.12);
}
.jjdt-app.jjdt-tool-cron .jjdt-cronRunHead .jjdt-cronCell--d{
  background: rgba(251,191,36,0.10);
}
.jjdt-app.jjdt-tool-cron .jjdt-cronRunHead .jjdt-cronCell--h,
.jjdt-app.jjdt-tool-cron .jjdt-cronRunHead .jjdt-cronCell--min,
.jjdt-app.jjdt-tool-cron .jjdt-cronRunHead .jjdt-cronCell--s{
  background: rgba(59,130,246,0.10);
}

/* Slightly tighter on narrow screens */
@media (max-width: 680px){
  .jjdt-app.jjdt-tool-cron .jjdt-cronRunHead,
  .jjdt-app.jjdt-tool-cron .jjdt-cronRunRow{
    grid-template-columns: 1.1fr 0.8fr 1fr 0.8fr 0.8fr 0.8fr;
  }
  .jjdt-app.jjdt-tool-cron .jjdt-cronCell{
    padding: 10px 10px;
    font-size: 16px;
  }
}


/* ===== Cron tool contrast fixes (v1.4.11) ===== */
.jjdt-tool-cron .jjdt-example pre,
.jjdt-tool-cron .jjdt-example code{
  background: rgba(2,6,23,.72) !important;
  color: rgba(236,248,255,.92) !important;
}
.jjdt-tool-cron .jjdt-example pre{
  border: 1px solid rgba(148,163,184,.22) !important;
  border-radius: 14px !important;
  padding: 12px 12px !important;
  line-height: 1.55 !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace !important;
}
.jjdt-tool-cron .jjdt-cronStatusMsg{
  color: rgba(236,248,255,.88) !important;
}
.jjdt-tool-cron .jjdt-pill--warn{
  background: rgba(245,158,11,.18) !important;
  border-color: rgba(245,158,11,.35) !important;
  color: rgba(255,241,210,.98) !important;
}
.jjdt-tool-cron .jjdt-pill--bad{
  background: rgba(239,68,68,.18) !important;
  border-color: rgba(239,68,68,.35) !important;
  color: rgba(255,224,224,.98) !important;
}

.jjdt-app.jjdt-tool-cron .jjdt-cronExamples pre{ background: rgba(0,0,0,.25) !important; border: 1px solid rgba(160,200,255,.16) !important; color:#e8f2ff !important; }
.jjdt-app.jjdt-tool-cron .jjdt-cronExamples code{ color:#e8f2ff !important; }


/* ===== Cron tool UX/contrast + summary visibility fixes (v1.4.13) ===== */
.jjdt-app.jjdt-tool-cron .jjdt-pill{
  background: rgba(2,6,23,.55) !important;
  border-color: rgba(160,200,255,.26) !important;
  color: rgba(240,247,255,.98) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.38);
  backdrop-filter: blur(10px);
}
.jjdt-app.jjdt-tool-cron .jjdt-pill--ok{
  background: rgba(91,231,196,.24) !important;
  border-color: rgba(91,231,196,.42) !important;
  color: rgba(214,255,248,.98) !important;
}
.jjdt-app.jjdt-tool-cron .jjdt-pill--warn{
  background: rgba(245,158,11,.22) !important;
  border-color: rgba(245,158,11,.40) !important;
  color: rgba(255,246,224,.98) !important;
}
.jjdt-app.jjdt-tool-cron .jjdt-pill--bad{
  background: rgba(239,68,68,.22) !important;
  border-color: rgba(239,68,68,.42) !important;
  color: rgba(255,232,232,.98) !important;
}
.jjdt-app.jjdt-tool-cron .jjdt-cronStatusMsg{
  color: rgba(236,248,255,.94) !important;
}

/* Usage/help text in dark hero */
.jjdt-app.jjdt-tool-cron .jjdt-note.jjdt-cronUsage{
  background: rgba(2,6,23,.36) !important;
  border-color: rgba(160,200,255,.16) !important;
  color: rgba(236,248,255,.92) !important;
}
.jjdt-app.jjdt-tool-cron .jjdt-note.jjdt-cronUsage *{
  color: inherit !important;
}
.jjdt-app.jjdt-tool-cron .jjdt-note.jjdt-cronUsage small{
  color: rgba(148,163,184,.95) !important;
}

/* Examples text visibility */
.jjdt-app.jjdt-tool-cron .jjdt-example pre{
  background: rgba(2,6,23,.72) !important;
  border-color: rgba(160,200,255,.22) !important;
}
.jjdt-app.jjdt-tool-cron .jjdt-example code{
  color: rgba(236,248,255,.96) !important;
}

/* Upcoming runs: typography + column tinting */
.jjdt-app.jjdt-tool-cron .jjdt-cronCell{
  font-size: 13px !important;
  padding: 9px 10px !important;
  min-height: 44px !important;
}
.jjdt-app.jjdt-tool-cron .jjdt-cronCellMain{ font-size: 14px !important; }
.jjdt-app.jjdt-tool-cron .jjdt-cronCell--y{ font-size: 14px !important; }

/* Subtle per-column backgrounds (body rows) */
.jjdt-app.jjdt-tool-cron .jjdt-cronRunRow .jjdt-cronCell--y{ background: rgba(96,165,250,.06); }
.jjdt-app.jjdt-tool-cron .jjdt-cronRunRow .jjdt-cronCell--m{ background: rgba(34,211,238,.06); }
.jjdt-app.jjdt-tool-cron .jjdt-cronRunRow .jjdt-cronCell--d{ background: rgba(251,191,36,.06); }
.jjdt-app.jjdt-tool-cron .jjdt-cronRunRow .jjdt-cronCell--h,
.jjdt-app.jjdt-tool-cron .jjdt-cronRunRow .jjdt-cronCell--min,
.jjdt-app.jjdt-tool-cron .jjdt-cronRunRow .jjdt-cronCell--s{ background: rgba(59,130,246,.06); }

/* Keep hover feel while preserving column tint */
.jjdt-app.jjdt-tool-cron .jjdt-cronRunRow:hover .jjdt-cronCell--y{ background: rgba(96,165,250,.10); }
.jjdt-app.jjdt-tool-cron .jjdt-cronRunRow:hover .jjdt-cronCell--m{ background: rgba(34,211,238,.10); }
.jjdt-app.jjdt-tool-cron .jjdt-cronRunRow:hover .jjdt-cronCell--d{ background: rgba(251,191,36,.10); }
.jjdt-app.jjdt-tool-cron .jjdt-cronRunRow:hover .jjdt-cronCell--h,
.jjdt-app.jjdt-tool-cron .jjdt-cronRunRow:hover .jjdt-cronCell--min,
.jjdt-app.jjdt-tool-cron .jjdt-cronRunRow:hover .jjdt-cronCell--s{ background: rgba(59,130,246,.10); }

@media (max-width: 680px){
  .jjdt-app.jjdt-tool-cron .jjdt-cronCell{ font-size: 12px !important; }
  .jjdt-app.jjdt-tool-cron .jjdt-cronCellMain{ font-size: 13px !important; }
}

/* Footer spacing ("다른 도구 보기") */
.jjdt-app.jjdt-tool-cron .jjdt-cronMore{
  margin-top: 46px;
}

/* =====================================================================
   JJ When2Overlap – Design Tokens v0.1 (timezone tool)
   - Inherit site typography (e.g., Pretendard on WordPress)
   - Align time-band colors across legend / timeline / table / badges
   - Provide consistent focus-visible ring
   ===================================================================== */

.jjdt-app.jjdt-tool-timezone{
  /* Typography */
  --jjdt-font-family: inherit;
  --jjdt-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --jjdt-num-variant: tabular-nums;

  /* Surfaces & text */
  --jjdt-bg: #f6f7fb;
  --jjdt-surface: #ffffff;
  --jjdt-border: rgba(15,23,42,.10);
  --jjdt-text: rgba(15,23,42,.92);
  --jjdt-text-2: rgba(15,23,42,.70);
  --jjdt-text-3: rgba(15,23,42,.55);

  /* Accent / focus */
  --jjdt-accent: #2563eb;
  --jjdt-focus: rgba(37,99,235,.35);

  /* Shadow & radius */
  --jjdt-shadow-1: 0 1px 2px rgba(2,6,23,.06);
  --jjdt-shadow-2: 0 12px 28px rgba(2,6,23,.08);
  --jjdt-radius: 16px;

  /* Time bands (legend/cell backgrounds) */
  --jjdt-band-night-cell: rgba(2,6,23,.16);
  --jjdt-band-morning-cell: rgba(59,130,246,.14);
  --jjdt-band-work-cell: rgba(16,185,129,.18);
  --jjdt-band-evening-cell: rgba(245,158,11,.20);

  /* Time bands (ink/accent used by badges/clocks) */
  --jjdt-band-night-ink: rgba(2,6,23,.92);
  --jjdt-band-morning-ink: rgba(59,130,246,.95);
  --jjdt-band-work-ink: rgba(16,185,129,.95);
  --jjdt-band-evening-ink: rgba(245,158,11,.98);

  /* Table row tints (subtle gradient) */
  --jjdt-tint-night-0: rgba(2,6,23,.075);
  --jjdt-tint-night-1: rgba(2,6,23,.02);
  --jjdt-tint-morning-0: rgba(59,130,246,.070);
  --jjdt-tint-morning-1: rgba(59,130,246,.030);
  --jjdt-tint-work-0: rgba(16,185,129,.080);
  --jjdt-tint-work-1: rgba(16,185,129,.035);
  --jjdt-tint-evening-0: rgba(245,158,11,.085);
  --jjdt-tint-evening-1: rgba(245,158,11,.035);

  /* Alias legacy vars (keeps existing CSS stable) */
  --sans: var(--jjdt-font-family);
  --mono: var(--jjdt-mono);
  --bg: var(--jjdt-bg);
  --card: var(--jjdt-surface);
  --text: var(--jjdt-text);
  --muted: var(--jjdt-text-2);
  --line: var(--jjdt-border);
  --blue: var(--jjdt-accent);
  --shadow: var(--jjdt-shadow-2);
  --radius: var(--jjdt-radius);

  font-family: var(--jjdt-font-family);
  color: var(--jjdt-text);
}

/* Numeric alignment (prevents jitter, improves readability) */
.jjdt-app.jjdt-tool-timezone .jjdt-tzCell,
.jjdt-app.jjdt-tool-timezone .jjdt-clockDigits,
.jjdt-app.jjdt-tool-timezone .jjdt-tzSelectedTime,
.jjdt-app.jjdt-tool-timezone .jjdt-tzTimelineMarkerLabel,
.jjdt-app.jjdt-tool-timezone .jjdt-tzScrubCell,
.jjdt-app.jjdt-tool-timezone .jjdt-timeInput,
.jjdt-app.jjdt-tool-timezone .jjdt-nudgeDelta{
  font-variant-numeric: var(--jjdt-num-variant);
}

/* Align legend + timeline cell backgrounds with the same tokens */
.jjdt-app.jjdt-tool-timezone .jjdt-tzLegendSwatch.night{ background: var(--jjdt-band-night-cell) !important; }
.jjdt-app.jjdt-tool-timezone .jjdt-tzLegendSwatch.morning{ background: var(--jjdt-band-morning-cell) !important; }
.jjdt-app.jjdt-tool-timezone .jjdt-tzLegendSwatch.work{ background: var(--jjdt-band-work-cell) !important; }
.jjdt-app.jjdt-tool-timezone .jjdt-tzLegendSwatch.evening{ background: var(--jjdt-band-evening-cell) !important; }

.jjdt-app.jjdt-tool-timezone .jjdt-tzCell.night{ background: var(--jjdt-band-night-cell) !important; }
.jjdt-app.jjdt-tool-timezone .jjdt-tzCell.morning{ background: var(--jjdt-band-morning-cell) !important; }
.jjdt-app.jjdt-tool-timezone .jjdt-tzCell.work{ background: var(--jjdt-band-work-cell) !important; }
.jjdt-app.jjdt-tool-timezone .jjdt-tzCell.evening{ background: var(--jjdt-band-evening-cell) !important; }

/* Table row tint tokens */
.jjdt-app.jjdt-tool-timezone .jjdt-table tbody tr.jjdt-tzRow-night{
  background: linear-gradient(90deg, var(--jjdt-tint-night-0) 0%, var(--jjdt-tint-night-1) 100%) !important;
}
.jjdt-app.jjdt-tool-timezone .jjdt-table tbody tr.jjdt-tzRow-morning{
  background: linear-gradient(90deg, var(--jjdt-tint-morning-0) 0%, var(--jjdt-tint-morning-1) 100%) !important;
}
.jjdt-app.jjdt-tool-timezone .jjdt-table tbody tr.jjdt-tzRow-work{
  background: linear-gradient(90deg, var(--jjdt-tint-work-0) 0%, var(--jjdt-tint-work-1) 100%) !important;
}
.jjdt-app.jjdt-tool-timezone .jjdt-table tbody tr.jjdt-tzRow-evening{
  background: linear-gradient(90deg, var(--jjdt-tint-evening-0) 0%, var(--jjdt-tint-evening-1) 100%) !important;
}
/* Ensure cell backgrounds do not reset the gradient per column */
.jjdt-app.jjdt-tool-timezone .jjdt-table tbody tr[class^='jjdt-tzRow-'] td{ background: transparent !important; }


/* Focus-visible ring (keyboard) */
.jjdt-app.jjdt-tool-timezone button:focus-visible,
.jjdt-app.jjdt-tool-timezone input:focus-visible,
.jjdt-app.jjdt-tool-timezone select:focus-visible,
.jjdt-app.jjdt-tool-timezone textarea:focus-visible,
.jjdt-app.jjdt-tool-timezone a:focus-visible{
  outline: 3px solid var(--jjdt-focus);
  outline-offset: 2px;
}


/* ==================================================
   JJ When2Overlap — UI polish (v1.7.9)
   - 8px spacing rhythm
   - prevent hour-label overlap at 100% zoom
   - calmer icon sizing (copy buttons)
================================================== */

/* 1) Spacing rhythm */
.jjdt-app.jjdt-tool-timezone .jjdt-header{ margin-bottom: 16px !important; }
.jjdt-app.jjdt-tool-timezone .jjdt-grid{ gap: 16px !important; }
.jjdt-app.jjdt-tool-timezone .jjdt-sectionTitle{ margin: 0 0 8px !important; }
.jjdt-app.jjdt-tool-timezone .jjdt-tzLegend{ margin: 8px 0 4px !important; }
.jjdt-app.jjdt-tool-timezone .jjdt-tzTimeline{ margin-top: 16px !important; padding: 16px !important; }
.jjdt-app.jjdt-tool-timezone .jjdt-tzTableWrap{ margin-top: 16px !important; }
.jjdt-app.jjdt-tool-timezone .jjdt-step{ margin: 16px 0 8px !important; }
.jjdt-app.jjdt-tool-timezone .jjdt-tzTimelineHead{ margin-bottom: 12px !important; }

/* 2) Timeline hour labels: stop text bleed, adapt label density */
.jjdt-app.jjdt-tool-timezone .jjdt-tzCell{
  overflow: hidden;           /* prevents overlapping into neighboring cells */
  text-overflow: clip;
  white-space: nowrap;
}

/* Dynamic label density (set by JS via data-label-step on .jjdt-tzTimeline) */
.jjdt-app.jjdt-tool-timezone .jjdt-tzTimeline[data-label-step="2"] .jjdt-tzCell{ font-size: 11px !important; }
.jjdt-app.jjdt-tool-timezone .jjdt-tzTimeline[data-label-step="3"] .jjdt-tzCell{ font-size: 10px !important; }
.jjdt-app.jjdt-tool-timezone .jjdt-tzTimeline[data-label-step="4"] .jjdt-tzCell{ font-size: 9px !important; }

/* Advanced base time bar (scrub) — also adapt density when very tight */
.jjdt-app.jjdt-tool-timezone .jjdt-tzScrubCell{
  overflow: hidden;
  white-space: nowrap;
}
.jjdt-app.jjdt-tool-timezone .jjdt-tzScrubCells[data-label-step="2"] .jjdt-tzScrubCell{ font-size: 9px !important; }
.jjdt-app.jjdt-tool-timezone .jjdt-tzScrubCells[data-label-step="3"] .jjdt-tzScrubCell{ font-size: 9px !important; }

/* 3) Copy buttons (timeline + table): slightly smaller and calmer */
.jjdt-app.jjdt-tool-timezone .jjdt-table .jjdt-iconbtn{
  width: 32px !important;
  height: 32px !important;
  border-radius: 10px !important;
  font-size: 13px !important;   /* for the ⧉ glyph */
  box-shadow: 0 8px 18px rgba(2,6,23,.07) !important;
}
.jjdt-app.jjdt-tool-timezone .jjdt-tzTimelineRow .jjdt-iconbtn{
  font-size: 13px !important;   /* keep compact inside timeline rows */
}

/* =========================================================
   1.7.13 — Conversion table hover tone tuning + flat copy button 2nd polish (data-table feel)
   - Fix: Row hover was not visible because tokenized row backgrounds had higher specificity + !important.
   - Change: Use scoped selectors + !important on hover/focus-within backgrounds.
   - Polish: Flatten copy icon button inside the conversion table (no lift, no heavy shadow).
   ========================================================= */
.jjdt-app.jjdt-tool-timezone .jjdt-table tbody tr[class^='jjdt-tzRow-']{
  transition: background 160ms ease, filter 160ms ease;
}

/* Stronger, clearly visible hover while keeping the tint unified (override tokenized base rules) */
.jjdt-app.jjdt-tool-timezone .jjdt-table tbody tr.jjdt-tzRow-night:hover,
.jjdt-app.jjdt-tool-timezone .jjdt-table tbody tr.jjdt-tzRow-night:focus-within{
  background: linear-gradient(90deg, rgba(2,6,23,.105) 0%, rgba(2,6,23,.040) 100%) !important;
}

.jjdt-app.jjdt-tool-timezone .jjdt-table tbody tr.jjdt-tzRow-morning:hover,
.jjdt-app.jjdt-tool-timezone .jjdt-table tbody tr.jjdt-tzRow-morning:focus-within{
  background: linear-gradient(90deg, rgba(59,130,246,.095) 0%, rgba(59,130,246,.040) 100%) !important;
}

.jjdt-app.jjdt-tool-timezone .jjdt-table tbody tr.jjdt-tzRow-work:hover,
.jjdt-app.jjdt-tool-timezone .jjdt-table tbody tr.jjdt-tzRow-work:focus-within{
  background: linear-gradient(90deg, rgba(16,185,129,.105) 0%, rgba(16,185,129,.045) 100%) !important;
}

.jjdt-app.jjdt-tool-timezone .jjdt-table tbody tr.jjdt-tzRow-evening:hover,
.jjdt-app.jjdt-tool-timezone .jjdt-table tbody tr.jjdt-tzRow-evening:focus-within{
  background: linear-gradient(90deg, rgba(245,158,11,.112) 0%, rgba(245,158,11,.045) 100%) !important;
}

/* Hover should feel like a calm data table: avoid saturation boosts. */

/* Copy icon button inside conversion table: flatter premium ghost style (no lift) */
.jjdt-app.jjdt-tool-timezone .jjdt-table .jjdt-iconbtn{
  box-shadow: none !important;
  transform: none !important;
  background: rgba(255,255,255,.44) !important;
  border-color: rgba(148,163,184,.38) !important;
  transition: background 120ms ease, border-color 120ms ease;
}

.jjdt-app.jjdt-tool-timezone .jjdt-table .jjdt-iconbtn:hover{
  transform: none !important;
  box-shadow: none !important;
  background: rgba(255,255,255,.54) !important;
  border-color: rgba(148,163,184,.46) !important;
}

.jjdt-app.jjdt-tool-timezone .jjdt-table .jjdt-iconbtn:active{
  transform: none !important;
  box-shadow: none !important;
  background: rgba(255,255,255,.60) !important;
}

.jjdt-app.jjdt-tool-timezone .jjdt-table tbody tr[class^='jjdt-tzRow-']:hover .jjdt-iconbtn,
.jjdt-app.jjdt-tool-timezone .jjdt-table tbody tr[class^='jjdt-tzRow-']:focus-within .jjdt-iconbtn{
  background: rgba(255,255,255,.48) !important;
  border-color: rgba(148,163,184,.40) !important;
}
/* =========================================================
   JJ When2Overlap — Dark mode (auto)
   - Applies only to the timezone tool (scoped)
   - Keeps Light mode unchanged
   ========================================================= */
@media (prefers-color-scheme: dark){
  .jjdt-app.jjdt-tool-timezone{
    /* Surfaces & text */
    --jjdt-bg: #0b1220;
    --jjdt-surface: #0f172a;
    --jjdt-border: rgba(226,232,240,.12);
    --jjdt-text: rgba(226,232,240,.92);
    --jjdt-text-2: rgba(226,232,240,.72);
    --jjdt-text-3: rgba(226,232,240,.55);

    /* Accent / focus */
    --jjdt-accent: #60a5fa;
    --jjdt-focus: rgba(96,165,250,.40);

    /* Shadow */
    --jjdt-shadow-1: 0 1px 2px rgba(0,0,0,.35);
    --jjdt-shadow-2: 0 12px 28px rgba(0,0,0,.45);

    /* Time bands (legend/cell backgrounds) */
    --jjdt-band-night-cell: rgba(226,232,240,.05);
    --jjdt-band-morning-cell: rgba(96,165,250,.14);
    --jjdt-band-work-cell: rgba(16,185,129,.14);
    --jjdt-band-evening-cell: rgba(245,158,11,.14);

    /* Time bands (ink/accent used by badges/clocks) */
    --jjdt-band-night-ink: rgba(226,232,240,.92);
    --jjdt-band-morning-ink: rgba(147,197,253,.95);
    --jjdt-band-work-ink: rgba(110,231,183,.95);
    --jjdt-band-evening-ink: rgba(252,211,77,.95);

    /* Table row tints (subtle gradient) */
    --jjdt-tint-night-0: rgba(226,232,240,.060);
    --jjdt-tint-night-1: rgba(226,232,240,.020);
    --jjdt-tint-morning-0: rgba(96,165,250,.100);
    --jjdt-tint-morning-1: rgba(96,165,250,.040);
    --jjdt-tint-work-0: rgba(16,185,129,.105);
    --jjdt-tint-work-1: rgba(16,185,129,.040);
    --jjdt-tint-evening-0: rgba(245,158,11,.110);
    --jjdt-tint-evening-1: rgba(245,158,11,.040);
  }

  /* Cards: override light-only backdrop-filter rule */
  .jjdt-app.jjdt-tool-timezone .jjdt-card{
    background: rgba(15,23,42,.86) !important;
    border-color: rgba(226,232,240,.12) !important;
  }
  @supports (backdrop-filter: blur(10px)){
    .jjdt-app.jjdt-tool-timezone .jjdt-card{
      background: rgba(15,23,42,.72) !important;
      backdrop-filter: blur(10px);
    }
  }

  /* Inputs/selects: prevent white focus background in dark mode */
  .jjdt-app.jjdt-tool-timezone .jjdt-input,
  .jjdt-app.jjdt-tool-timezone .jjdt-select,
  .jjdt-app.jjdt-tool-timezone .jjdt-textarea,
  .jjdt-app.jjdt-tool-timezone input[type="text"],
  .jjdt-app.jjdt-tool-timezone input[type="datetime-local"],
  .jjdt-app.jjdt-tool-timezone select,
  .jjdt-app.jjdt-tool-timezone textarea{
    background: rgba(2,6,23,.32) !important;
    border-color: rgba(226,232,240,.14) !important;
    color: rgba(226,232,240,.92) !important;
  }
  .jjdt-app.jjdt-tool-timezone .jjdt-input::placeholder,
  .jjdt-app.jjdt-tool-timezone input::placeholder,
  .jjdt-app.jjdt-tool-timezone textarea::placeholder{
    color: rgba(226,232,240,.52) !important;
  }
  .jjdt-app.jjdt-tool-timezone input:focus,
  .jjdt-app.jjdt-tool-timezone select:focus,
  .jjdt-app.jjdt-tool-timezone textarea:focus,
  .jjdt-app.jjdt-tool-timezone .jjdt-input:focus,
  .jjdt-app.jjdt-tool-timezone .jjdt-select:focus,
  .jjdt-app.jjdt-tool-timezone .jjdt-textarea:focus{
    background: rgba(2,6,23,.40) !important;
    border-color: rgba(96,165,250,.55) !important;
    box-shadow: 0 0 0 4px rgba(96,165,250,.18) !important;
    outline: none !important;
  }

  /* Timeline panel: replace light gradient with dark gradient */
  .jjdt-app.jjdt-tool-timezone .jjdt-tzTimeline{
    border-color: rgba(226,232,240,.12) !important;
    background:
      radial-gradient(860px 340px at 12% 0%, rgba(96,165,250,.18), transparent 62%),
      radial-gradient(760px 320px at 100% 0%, rgba(16,185,129,.16), transparent 64%),
      linear-gradient(180deg, rgba(15,23,42,.92) 0%, rgba(2,6,23,.86) 100%) !important;
    box-shadow: 0 14px 32px rgba(0,0,0,.42) !important;
  }

  /* Inline local digital clock pill */
  .jjdt-app.jjdt-tool-timezone .jjdt-clockInline{
    border-color: rgba(226,232,240,.12) !important;
    background: linear-gradient(180deg, rgba(15,23,42,.92), rgba(2,6,23,.82)) !important;
  }
  .jjdt-app.jjdt-tool-timezone .jjdt-clockInline::before{
    opacity: .35 !important;
  }
  .jjdt-app.jjdt-tool-timezone .jjdt-clockInlineTz{
    color: rgba(226,232,240,.78) !important;
    border-color: rgba(226,232,240,.14) !important;
    background: rgba(255,255,255,.06) !important;
  }

  /* Modal (browse all time zones) */
  .jjdt-app.jjdt-tool-timezone .jjdt-modalCard{
    border-color: rgba(226,232,240,.12) !important;
    background: rgba(15,23,42,.92) !important;
    box-shadow: 0 30px 90px rgba(0,0,0,.62) !important;
  }
  @supports (backdrop-filter: blur(10px)){
    .jjdt-app.jjdt-tool-timezone .jjdt-modalCard{
      background: rgba(15,23,42,.84) !important;
      backdrop-filter: blur(10px);
    }
  }
  .jjdt-app.jjdt-tool-timezone .jjdt-modalList{
    border-color: rgba(226,232,240,.12) !important;
    background: rgba(2,6,23,.22) !important;
  }
  .jjdt-app.jjdt-tool-timezone .jjdt-modalItem{
    border-color: rgba(226,232,240,.12) !important;
    background: rgba(255,255,255,.04) !important;
  }
  .jjdt-app.jjdt-tool-timezone .jjdt-modalItem:hover{
    background: rgba(96,165,250,.12) !important;
    border-color: rgba(96,165,250,.26) !important;
  }

  /* Table header */
  .jjdt-app.jjdt-tool-timezone .jjdt-table th{
    background: rgba(255,255,255,.04) !important;
    color: rgba(226,232,240,.70) !important;
    border-bottom-color: rgba(226,232,240,.10) !important;
  }
  .jjdt-app.jjdt-tool-timezone .jjdt-table td{
    border-bottom-color: rgba(226,232,240,.08) !important;
  }

  /* Conversion table hover (dark variants) */
  .jjdt-app.jjdt-tool-timezone .jjdt-table tbody tr.jjdt-tzRow-night:hover,
  .jjdt-app.jjdt-tool-timezone .jjdt-table tbody tr.jjdt-tzRow-night:focus-within{
    background: linear-gradient(90deg, rgba(226,232,240,.090) 0%, rgba(226,232,240,.032) 100%) !important;
  }
  .jjdt-app.jjdt-tool-timezone .jjdt-table tbody tr.jjdt-tzRow-morning:hover,
  .jjdt-app.jjdt-tool-timezone .jjdt-table tbody tr.jjdt-tzRow-morning:focus-within{
    background: linear-gradient(90deg, rgba(96,165,250,.140) 0%, rgba(96,165,250,.052) 100%) !important;
  }
  .jjdt-app.jjdt-tool-timezone .jjdt-table tbody tr.jjdt-tzRow-work:hover,
  .jjdt-app.jjdt-tool-timezone .jjdt-table tbody tr.jjdt-tzRow-work:focus-within{
    background: linear-gradient(90deg, rgba(16,185,129,.145) 0%, rgba(16,185,129,.052) 100%) !important;
  }
  .jjdt-app.jjdt-tool-timezone .jjdt-table tbody tr.jjdt-tzRow-evening:hover,
  .jjdt-app.jjdt-tool-timezone .jjdt-table tbody tr.jjdt-tzRow-evening:focus-within{
    background: linear-gradient(90deg, rgba(245,158,11,.150) 0%, rgba(245,158,11,.052) 100%) !important;
  }

  /* Copy icon button inside conversion table (dark ghost) */
  .jjdt-app.jjdt-tool-timezone .jjdt-table .jjdt-iconbtn{
    background: rgba(255,255,255,.06) !important;
    border-color: rgba(226,232,240,.14) !important;
  }
  .jjdt-app.jjdt-tool-timezone .jjdt-table .jjdt-iconbtn:hover{
    background: rgba(255,255,255,.08) !important;
    border-color: rgba(226,232,240,.18) !important;
  }
  .jjdt-app.jjdt-tool-timezone .jjdt-table .jjdt-iconbtn:active{
    background: rgba(255,255,255,.10) !important;
  }
  .jjdt-app.jjdt-tool-timezone .jjdt-table tbody tr[class^='jjdt-tzRow-']:hover .jjdt-iconbtn,
  .jjdt-app.jjdt-tool-timezone .jjdt-table tbody tr[class^='jjdt-tzRow-']:focus-within .jjdt-iconbtn{
    background: rgba(255,255,255,.08) !important;
    border-color: rgba(226,232,240,.18) !important;
  }
}