/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Override theme-level placement so the science compute button spans and left-aligns */
.utility-modal .utility-container .card button[id*="scienceComputeBtn"],
.utility-modal.modal-theme-yellow .utility-container .card button[id*="scienceComputeBtn"] {
  grid-column: 1 / -1 !important;
  place-self: start start !important;
  justify-self: start !important;
}

/* Metin Karşılaştırıcı Stilleri */
.diff-added {
    background-color: rgba(0, 255, 0, 0.2);
    color: #00ff00;
    padding: 2px 0;
}

.diff-removed {
    background-color: rgba(255, 0, 0, 0.2);
    color: #ff6b6b;
    padding: 2px 0;
    text-decoration: line-through;
}

.diff-unchanged {
    color: #ffffff;
}

.error-message {
    color: #ff6b6b;
    background-color: rgba(255, 0, 0, 0.1);
    padding: 10px;
    border-radius: 5px;
    text-align: center;
}

.success-message {
    color: #00ff00;
    background-color: rgba(0, 255, 0, 0.1);
    padding: 10px;
    border-radius: 5px;
    text-align: center;
}

/* Regex Test Aracı Stilleri */
.regex-matches {
    margin-top: 15px;
}

.regex-match {
    background-color: rgba(255, 255, 255, 0.05);
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    border-left: 3px solid #00d4ff;
}

.match-index {
    font-weight: bold;
    color: #00d4ff;
}

.match-value {
    color: #ffffff;
    background-color: rgba(0, 212, 255, 0.2);
    padding: 2px 5px;
    border-radius: 3px;
}

.match-groups {
    margin-top: 8px;
    font-weight: bold;
    color: #aaa;
}

.match-group {
    margin-left: 15px;
    color: #ff6b6b;
    font-family: monospace;
}

body {
    font-family: 'Exo 2', sans-serif;
    background: linear-gradient(135deg, #0e0e10 0%, #1a1a1d 50%, #212225 100%);
    color: #ffffff;
    min-height: 100vh;
    overflow-x: hidden;
}

/* Animated Background */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 20% 80%, rgba(110, 110, 140, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(80, 80, 90, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(100, 120, 140, 0.12) 0%, transparent 50%);
    animation: backgroundShift 20s ease-in-out infinite;
    z-index: -1;
}

@keyframes backgroundShift {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

/* Container */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
    position: relative;
    z-index: 1;
}

/* Header */
.header {
    text-align: center;
    margin-bottom: 40px;
    padding: 30px 0;
}

.logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
}

.logo i {
    font-size: 3rem;
    color: #00d4ff;
    animation: pulse 2s ease-in-out infinite;
}

.logo h1 {
    font-family: 'Orbitron', monospace;
    font-size: 3rem;
    font-weight: 900;
    background: linear-gradient(45deg, #00d4ff, #ff6b6b, #4ecdc4);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 3s ease-in-out infinite;
}

.version {
    font-size: 0.9rem;
    color: #888;
    background: rgba(0, 212, 255, 0.1);
    padding: 5px 10px;
    border-radius: 15px;
    border: 1px solid rgba(0, 212, 255, 0.3);
}

.subtitle {
    font-size: 1.2rem;
    color: #aaa;
    font-weight: 300;
    letter-spacing: 2px;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Search Container */
.search-container {
    margin-bottom: 40px;
    text-align: center;
}

.search-box {
    position: relative;
    display: inline-block;
    margin-bottom: 20px;
}

.search-box i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #aaa;
    font-size: 1.2rem;
}

.search-box input {
    width: 400px;
    padding: 15px 15px 15px 50px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
    font-size: 1rem;
    outline: none;
    transition: all 0.3s ease;
}

.search-box input:focus {
    border-color: #00d4ff;
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.2);
}

.search-box input::placeholder {
    color: #aaa;
}

.filter-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.filter-btn {
    padding: 10px 20px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 25px;
    background: rgba(255, 255, 255, 0.05);
    color: #aaa;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
    font-weight: 500;
}

.filter-btn:hover {
    border-color: #00d4ff;
    color: #00d4ff;
    transform: translateY(-2px);
}

.filter-btn.active {
    border-color: #00d4ff;
    background: rgba(0, 212, 255, 0.1);
    color: #00d4ff;
}

/* Utilities Grid */
.utilities-grid {
    display: grid;
    /* Kart genişliği ve boşluk için değişkenler */
    --card-width: 240px;
    --grid-gap: 6px;
    /* Sütunlar geniş ekranda otomatik sığsın, kart genişliği sabit kalsın */
    grid-template-columns: repeat(auto-fit, minmax(var(--card-width), 1fr));
    gap: var(--grid-gap);
    container-type: inline-size;
    margin-bottom: 40px;
    /* Çok dar pencerede en az 4 sütunu koru: yatay kaydırma ile */
    min-width: calc(4 * var(--card-width) + 3 * var(--grid-gap));
    overflow-x: auto;
}

/* Taban kart genişliğini kolayca değiştirmek için yardımcı sınıflar */
.utilities-grid.grid-200 { --card-width: 200px; }
.utilities-grid.grid-240 { --card-width: 240px; }

.utility-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    /* Köşe yarıçapı ve padding ~%40 daha küçük */
    border-radius: clamp(6px, 1.6cqw, 9px);
    padding: clamp(5px, 2cqw, 8px) clamp(6px, 2.4cqw, 11px);
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.utility-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
}

.utility-card:hover::before {
    left: 100%;
}

.utility-card:hover {
    transform: translateY(-8px);
    border-color: rgba(0, 212, 255, 0.5);
    box-shadow: 
        0 15px 35px rgba(0, 212, 255, 0.2),
        0 0 20px rgba(0, 212, 255, 0.1);
}

.card-icon {
    /* İkon alt boşluğu ~%40 azalt */
    margin-bottom: clamp(4px, 1.4cqw, 5px);
}

.card-icon i {
    font-size: 2.5rem;
    color: #00d4ff;
    transition: all 0.3s ease;
}

.utility-card:hover .card-icon i {
    transform: scale(1.2) rotate(5deg);
    color: #ff6b6b;
}

.utility-card h3 {
    font-family: 'Orbitron', monospace;
    /* Başlık boyutunu sabit tut: dar enlerde küçülmesin */
    font-size: 0.78rem;
    /* Başlık alt boşluğu daha da azalt */
    margin: 0 0 clamp(0px, 1cqw, 1px) 0;
    color: #ffffff;
    font-weight: 600;
}

.utility-card p {
    color: #aaa;
    /* Açıklama fontu ölçülü küçültülür, boşluk daha dar */
    font-size: clamp(0.62rem, 2.4cqw, 0.75rem);
    margin-bottom: clamp(4px, 2cqw, 6px);
    line-height: 1.35;
}

.use-btn {
    /* Buton padding ve radius ~%40 azalt */
    padding: clamp(4px, 1.8cqw, 7px) clamp(8px, 2.2cqw, 15px);
    border: 2px solid #00d4ff;
    border-radius: clamp(10px, 2cqw, 15px);
    background: transparent;
    color: #00d4ff;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.use-btn:hover {
    background: #00d4ff;
    color: #000;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 212, 255, 0.3);
}

/* Category Colors */
.utility-card[data-category="text"] .card-icon i {
    color: #4ecdc4;
}

.utility-card[data-category="image"] .card-icon i {
    color: #ff6b6b;
}

.utility-card[data-category="conversion"] .card-icon i {
    color: #45b7d1;
}

.utility-card[data-category="generator"] .card-icon i {
    color: #96ceb4;
}

.utility-card[data-category="calculator"] .card-icon i {
    color: #feca57;
}

/* Footer */
.footer {
    text-align: center;
    padding: 30px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 40px;
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.footer p {
    color: #888;
    font-size: 0.9rem;
}

.social-links {
    display: flex;
    gap: 20px;
}

.social-links a {
    color: #aaa;
    font-size: 1.5rem;
    transition: all 0.3s ease;
}

.social-links a:hover {
    color: #00d4ff;
    transform: scale(1.2);
}

/* Responsive rules removed for homepage modals */
/* Loading Animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.utility-card {
    animation: fadeInUp 0.6s ease forwards;
}

.utility-card:nth-child(1) { animation-delay: 0.1s; }
.utility-card:nth-child(2) { animation-delay: 0.2s; }
.utility-card:nth-child(3) { animation-delay: 0.3s; }
.utility-card:nth-child(4) { animation-delay: 0.4s; }
.utility-card:nth-child(5) { animation-delay: 0.5s; }
.utility-card:nth-child(6) { animation-delay: 0.6s; }
.utility-card:nth-child(7) { animation-delay: 0.7s; }
.utility-card:nth-child(8) { animation-delay: 0.8s; }
.utility-card:nth-child(9) { animation-delay: 0.9s; }
.utility-card:nth-child(10) { animation-delay: 1.0s; }

/* Modal Styles */
.utility-modal {
    position: fixed;
    top: 10px !important; /* tüm modal bloğunu 10px aşağı indir */
    left: 0;
    width: 100%;
    height: calc(100% - 10px) !important; /* yükseklik telafisi: ekranın tamamı kadar kapla */
    z-index: 1000;
    animation: fadeIn 0.3s ease;
    /* Modal ölçeğini sayfa ölçeği ile senkronize et */
    --modal-scale: var(--page-scale, 1);
    /* Modal genel katmanı sadece görsel amaçlı; etkileşim içerikte olmalı */
    /* Not: dışarı tıklama JS ile belgeden yakalanır (aşağıda eklenecek) */
}

/* Modal overlay padding: reduce outer spacing */
.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Dış boşluğu daha da azalt */
  padding: 2px;
  /* Overlay’yi sabit boyutla tut: ölçekleme yok */
  /* Allow capturing outside clicks; keep content clickable */
  pointer-events: auto;
}

/* Shift modal up globally */
.modal-content {
    background: linear-gradient(135deg, var(--bg1, #1a1a2e) 0%, var(--bg2, #16213e) 100%);
    border: 1px solid color-mix(in oklab, var(--accent, rgba(255,255,255,0.6)) 25%, rgba(255, 255, 255, 0.1));
    border-radius: 20px;
    /* Kutuyu bütün olarak aynı oranda küçültmek için doğrudan boyutlar */
    max-width: 780px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    overflow-x: hidden;
    backdrop-filter: blur(10px);
    /* Ölçek overlay’de; içerik üzerinde transform uygulama */
    transform: none !important;
    /* Tipografi tabanı sabit: içerik ve alt elemanlar küçülmesin */
    font-size: 1rem !important;
    /* Kritik düzeltme: içerik tıklanabilir ve üstte olmalı */
    position: relative;
    z-index: 1;
    pointer-events: auto;
}

.modal-header {
  display: grid;
  grid-template-columns: auto 1fr auto; /* ikon | başlık | close */
  align-items: center;
  gap: 5px; /* öğeler arası boşluk 5px */
  /* Modal başlık ile içerik arasındaki dikey boşluğu agresif şekilde azalt */
  padding: 6px 3px; /* sol/sağ 3px boşluk */
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-sizing: border-box;
}

.modal-header h2 {
  font-family: 'Orbitron', monospace;
  color: var(--accent, #00d4ff);
  font-size: 1.2em; /* başlık, header bazına orantılı */
  line-height: 1.2;
  /* Grid’de orta sütun: genişlik kontrolü ve taşma engeli */
  overflow: hidden;
  white-space: nowrap; /* tek satırda tut */
  text-overflow: ellipsis; /* taşma olursa ... göster */
  /* Varsayılan h2 üst/alt marjını sıfırla */
  margin: 0 !important;
}

.close {
  background: none;
  border: none;
  color: #aaa;
  font-size: 1em; /* ikon metinle orantılı */
  cursor: pointer;
  transition: color 0.3s ease;
  flex: 0 0 auto;
}

/* Başlık yanında ikon varsa, orantıyı koru */
.modal-header i {
  font-size: 1em;
}

.close:hover {
  color: color-mix(in oklab, var(--accent, #ff6b6b) 65%, #ffffff 10%);
}

.modal-body {
  /* Modal içeriğinde genel boşluğu daha kompakt hale getir */
  padding: 6px;
  overflow-x: hidden;
}

/* Theming: modal category palettes */
.utility-modal.modal-theme-survival { --accent: #4ecdc4; --bg1: #132a2f; --bg2: #0f2225; }
.utility-modal.modal-theme-firstaid { --accent: #ff6b6b; --bg1: #2b1214; --bg2: #1a0c0e; }
.utility-modal.modal-theme-sar { --accent: #ffd166; --bg1: #2a2a12; --bg2: #1d1d0c; }
.utility-modal.modal-theme-navigation { --accent: #00d4ff; --bg1: #0f2230; --bg2: #0b1a26; }
/* Navigasyon temalı modallarda başlık ve grid boşluklarının mikro ayarı */
.utility-modal.modal-theme-navigation .modal-header .modal-title,
.utility-modal.modal-theme-navigation .modal-body h2 {
  margin: 0 0 6px !important;
  line-height: 1.15 !important;
  font-size: clamp(0.92rem, 2.8vw, 1rem) !important;
  letter-spacing: 0.2px !important;
}
.utility-modal.modal-theme-navigation .utility-grid {
  gap: 12px !important;
}
.utility-modal.modal-theme-navigation .guide-sections .converter-tabs {
  gap: 4px !important;
}
.utility-modal.modal-theme-navigation .guide-sections .converter-tabs .tab-btn,
.utility-modal.modal-theme-navigation .guide-sections .converter-tabs .generate-btn {
  padding: 2px 6px !important;
  min-height: 22px !important;
  line-height: 1.10 !important;
}
.utility-modal.modal-theme-weather { --accent: #7bdff2; --bg1: #14212b; --bg2: #0e1a22; }
.utility-modal.modal-theme-signal { --accent: #cdb4db; --bg1: #251f2a; --bg2: #1a1720; }
/* Sarı tema: bilim/fizik/elektronik vb. modallar için ortak vurgu rengi */
.utility-modal.modal-theme-yellow { --accent: #ffc107; }
/* Sağlık ve Güzellik modalları için açık pembe vurgu teması */
.utility-modal.modal-theme-health { --accent: #ffb3c7; --bg1: #241a22; --bg2: #1b141a; }
.utility-modal.modal-theme-beauty { --accent: #ffb3c7; --bg1: #241a22; --bg2: #1b141a; }

/* (Revert) Terapiler için sabit 20px buton yüksekliği kaldırıldı */

/* Modal toolbar styling */
.utility-modal .modal-toolbar { display: flex; gap: 8px; align-items: center; padding: 4px 6px; }
.utility-modal .modal-toolbar .mt-btn { appearance: none; border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.06); color: #ddd; padding: 5px 8px; border-radius: 8px; cursor: pointer; font-size: 0.9em; }
.utility-modal .modal-toolbar .mt-btn:hover { border-color: var(--accent, #00d4ff); color: var(--accent, #00d4ff); }

/* Neutral compact button for modal content as well */
.utility-modal .mt-btn { appearance: none; border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.06); color: #ddd; padding: 6px 10px; border-radius: 8px; cursor: pointer; font-size: 0.95em; }
.utility-modal .mt-btn:hover { border-color: var(--accent, #00d4ff); color: var(--accent, #00d4ff); }

/* Flow / workflow diagrams */
.utility-modal .modal-flow { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 6px; border-left: 2px dashed rgba(255,255,255,0.08); background: rgba(255,255,255,0.03); border-radius: 10px; }
.utility-modal .flow-title { font-weight: 700; color: var(--accent, #00d4ff); }
.utility-modal .flow-row { display: flex; align-items: center; gap: 10px; }
.utility-modal .flow-node { flex: 0 0 auto; padding: 6px 10px; border-radius: 8px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: #eee; font-weight: 600; }
.utility-modal .flow-arrow { flex: 0 0 auto; color: var(--accent, #00d4ff); font-weight: 800; }
.utility-modal .flow-note { font-size: 0.9em; color: #bbb; }

/* Flow SVG styling */
.utility-modal .flow-svg { width: 100%; max-width: 720px; height: auto; display: block; }
.utility-modal .flow-svg .node { fill: rgba(255,255,255,0.06); stroke: color-mix(in oklab, var(--accent, #00d4ff) 60%, #ffffff 5%); stroke-width: 1.2px; }
.utility-modal .flow-svg .node-text { fill: #eee; font-weight: 600; font-size: 12px; }
.utility-modal .flow-svg .arrow { stroke: color-mix(in oklab, var(--accent, #00d4ff) 70%, #ffffff 5%); stroke-width: 1.4px; fill: none; }
.utility-modal .flow-svg .arrow-marker path { fill: color-mix(in oklab, var(--accent, #00d4ff) 70%, #ffffff 5%); }

/* Accordion guide */
.utility-modal .accordion { border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; background: rgba(255,255,255,0.05); overflow: hidden; grid-column: 1 / -1; width: 100%; }
.utility-modal .accordion-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; cursor: pointer; }
.utility-modal .accordion-header h3 { margin: 0; color: var(--accent, #00d4ff); font-size: 1.05em; }
.utility-modal .accordion-toggle { appearance: none; border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.08); color: #ddd; padding: 4px 8px; border-radius: 8px; cursor: pointer; font-size: 0.9em; }
.utility-modal .accordion-toggle:hover { border-color: var(--accent, #00d4ff); color: var(--accent, #00d4ff); }
.utility-modal .accordion-content { padding: 8px 10px; display: block; }
.utility-modal .accordion-content[hidden] { display: none; }
.utility-modal .accordion-content ul { padding-left: 18px; }
.utility-modal .accordion-content li { margin: 4px 0; }

/* Guide blocks */
.utility-modal .guide-block { padding: 8px; border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; background: rgba(255,255,255,0.05); }
.utility-modal .guide-block h3 { margin: 0 0 6px 0; color: var(--accent, #00d4ff); font-size: 1.05em; }
.utility-modal .guide-block ul { padding-left: 18px; }
.utility-modal .guide-block li { margin: 4px 0; }

.utility-container {
  display: flex;
  flex-direction: column;
}

.utility-modal .utility-container * { box-sizing: border-box; }

.utility-modal .utility-container label { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.utility-modal .utility-container .two-col-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; width: 100%; }

.utility-modal .utility-container .two-col-grid > * { min-width: 0; }

.utility-modal .utility-container .utility-input,
.utility-modal .utility-container select,
.utility-modal .utility-container input,
.utility-modal .utility-container textarea,
.utility-modal .utility-container button { width: 100%; max-width: 100%; }

.utility-modal .utility-container select { padding: 10px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; background: rgba(255, 255, 255, 0.05); color: #fff; font-family: 'Exo 2', sans-serif; }

.utility-modal .utility-container .generate-btn { width: 100%; }


/* Enforce consistent spacing between modal grid items */
.utility-modal .utility-grid { gap: 12px !important; }

/* Dar ekranda yan yana modal sayısını azalt: 900px→3, 600px→2, 400px→1 sütun */
@media (max-width: 900px) {
.utility-modal .utility-grid { grid-template-columns: repeat(3, minmax(40px, 1fr)) !important; gap: 12px !important; }
.utility-modal .utility-container .card { grid-template-columns: repeat(3, minmax(40px, 1fr)) !important; gap: 12px !important; }
}
@media (max-width: 600px) {
.utility-modal .utility-grid { grid-template-columns: repeat(2, minmax(40px, 1fr)) !important; gap: 12px !important; }
.utility-modal .utility-container .card { grid-template-columns: repeat(2, minmax(40px, 1fr)) !important; gap: 12px !important; }
  .utility-modal .utility-grid > * { min-width: 0; }
}
@media (max-width: 400px) {
.utility-modal .utility-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
.utility-modal .utility-container .card { grid-template-columns: 1fr !important; gap: 12px !important; }
}

.utility-container textarea {
  width: 100%;
  padding: 15px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-family: 'Exo 2', sans-serif;
  resize: vertical;
}

.utility-container input[type="text"], 
.utility-container input[type="number"] {
  width: 100%;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-family: 'Exo 2', sans-serif;
}


.button-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.button-group button {
  padding: 10px 20px;
  border: 1px solid #00d4ff;
  border-radius: 8px;
  background: transparent;
  color: #00d4ff;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 600;
}

.button-group button:hover {
  background: #00d4ff;
  color: #000;
}

.generate-btn, .convert-btn {
  padding: 12px 20px; /* yatayda en çok 20px */
  border: none;
  border-radius: 8px;
  background: linear-gradient(45deg, #00d4ff, #4ecdc4);
  color: #000;
  cursor: pointer;
  font-weight: 600;
  transition: transform 0.2s;
}

.generate-btn:hover, .convert-btn:hover {
  transform: translateY(-2px);
}

/* Utility modal ana içerik aksiyon düğmelerini %40 küçült (Hesapla/Göster/Öner) */
/* (küçültme kaldırıldı — mavi aksiyon butonları orijinal boyutunda kalsın) */


/* (accordion içindeki üst butonlar için özel stil uygulama — varsayılanı kullan) */

.counter-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 15px;
}

.stat {
  text-align: center;
  padding: 15px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-label {
  display: block;
  color: #aaa;
  font-size: 0.9rem;
  margin-bottom: 5px;
}

.stat-value {
  display: block;
  color: #00d4ff;
  font-size: 1.5rem;
  font-weight: 700;
}

.password-options, .generator-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.password-options label, .generator-options label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #ccc;
}

.password-options input {
  width: auto;
}
.generator-options input[type="text"],
.generator-options input[type="number"] {
  flex: 1;
}
.generator-options input[type="checkbox"],
.generator-options input[type="radio"] {
  width: auto;
}

.password-result {
  display: flex;
  gap: 10px;
  align-items: center;
}

.password-result input {
  flex: 1;
}

.converter-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px; /* compact spacing */
  margin-bottom: 10px;
}
/* Tab button strip: 3-column grid for dense tab sets */
.converter-tabs.tab-btns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px; /* compact spacing */
}

.tab-btn {
  padding: 4px 8px; /* compact spacing without changing font-size */
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 5px;
  background: transparent;
  color: #ccc;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  flex: 0 0 auto;
  font-size: 0.84rem;
  line-height: 1.15;
}

.tab-btn.active {
  background: #00d4ff;
  color: #000;
  border-color: #00d4ff;
}

/* — Bilgi sekme grubu: info tabs için görünümü küçült ve renkleri uygula — */
.utility-modal .info-tabs-injected .tab-btn {
  /* Daha görünür küçültme: yazı ve satır yüksekliği */
  font-size: 1.12rem !important;
  line-height: 1.18 !important;
  padding: 5px; /* sekme yazısı ile kutu kenarı: 5px */
  background: #2b2b2b;
  color: #eee;
  border-color: #444;
}
.utility-modal .info-tabs-injected .tab-btn:hover {
  border-color: #666;
}
.utility-modal .info-tabs-injected .tab-btn.active {
  background: #ffd166; /* sarı */
  color: #000;
  border-color: #ffd166;
}

/* Sadece popup içindeki beyaz/neutral sekme butonlarını 30px yüksekliğe sabitle */
.utility-modal .info-tabs-injected .tab-btn {
  height: 30px !important;
  line-height: 30px !important;
  padding: 0 10px !important;
}

/* Info sekmeleri konteyneri: sekmeler arası boşluk 5px, sarmalı ve hizalamayı düzenle */
.utility-modal .info-tabs-injected {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px !important; /* sekmeler arasındaki boşluk 5px */
}

/* Global override: utility modaldaki tüm sekme butonlarında iç boşluk 5px olsun */
.utility-modal .tab-btn {
  padding: 5px !important; /* sekme yazısı ile kutu kenarı: 5px */
}

/* Converter tab şeritlerinde de 5px boşluk kullan */
.utility-modal .converter-tabs {
  gap: 3px !important; /* sekmeler arası boşluğu biraz daha küçült */
}
.utility-modal .converter-tabs .tab-btn {
  padding: 5px !important; /* mevcut iç boşluğu koru */
  font-size: 0.86rem !important; /* bir adım daha büyüt */
  line-height: 1.18 !important; /* dikey yüksekliği uyumlu artır */
}

/* Utility modal içinde eşit genişlikli grid kullanma: esnek genişlikli butonlar olsun */
.utility-modal .converter-tabs.tab-btns {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

/* 6×2 düzeninde metinlerin sığması için kompakt buton ayarları */
.utility-modal .converter-tabs .tab-btn {
  white-space: normal !important; /* metni çok satıra izin ver */
  word-break: break-word !important;
  text-align: center !important;
  padding: 4px 6px !important;
  min-height: 28px !important;
}

/* Büyük sekme setlerinde de kompakt görünüm uygula */
.utility-modal .info-tabs-large .tab-btn {
  font-size: 0.86rem !important;
}

.color-picker-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}

.color-picker-container input[type="color"] {
  width: 50px;
  height: 40px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

/* Gradient Üretici: üçlü grid düzeni (renk1, renk2, önizleme) */
.gradient-picker-grid {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 12px;
  align-items: center;
}
.gradient-picker-grid #gradPreview {
  height: 50px;
  border-radius: 8px;
  margin-top: 0;
}

/* Color input’lar: width/height değerlerini güçlü şekilde uygula */
.utility-modal .modal-body input[type="color"] {
  width: 50px !important;
  height: 40px !important;
  min-width: 50px !important;
  max-width: 50px !important;
  box-sizing: border-box !important;
  flex: 0 0 50px !important;
}

.color-info {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
}

.color-preview {
  width: 100%;
  height: 50px;
  border-radius: 10px;
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.color-values {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.color-value {
  display: flex;
  align-items: center;
  gap: 10px;
}

.color-value label {
  min-width: 50px;
  color: #ccc;
}

.color-value input {
  flex: 1;
}

.calculator {
  max-width: 740px; /* ekranı yatayda genişlet – daha fazla basamak sığsın */
  margin: 0 auto;
}

.calculator-display {
  margin-bottom: 15px;
}

.calculator-display input {
  width: 100%;
  padding: 20px;
  font-size: 1.5rem;
  text-align: right;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  color: #fff;
}

.calculator-buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

/* Utility modal içinde hesap tuşlarını kesin olarak büyüt (genel override) */
.utility-modal .modal-content .calc-btn {
  padding: 18px !important;
  font-size: 1.2rem !important;
}

/* Scientific modal inline gap değerini baskıla */
.utility-modal .calculator-buttons {
  gap: 12px !important;
}

.calc-btn {
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  cursor: pointer;
  font-size: 1.2rem;
  font-weight: 600;
  transition: all 0.3s ease;
  box-sizing: border-box;
  min-height: 48px;
}

.calc-btn:hover {
  background: rgba(0, 212, 255, 0.2);
  border-color: #00d4ff;
}

.calc-btn.operator {
  background: rgba(0, 212, 255, 0.1);
  color: #00d4ff;
}

.calc-btn.equals {
  background: linear-gradient(45deg, #00d4ff, #4ecdc4);
  color: #000;
}

.calc-btn.clear {
  background: rgba(255, 107, 107, 0.2);
  color: #ff6b6b;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Mobile optimizations removed */
.filter-buttons {
    gap: 8px;
}
.filter-btn {
    padding: 8px 16px;
    font-size: 0.8rem;
}
.logo h1 {
    font-size: 2rem;
}
.logo i {
    font-size: 2rem;
}

/* Global modal icon sizing across all modals in utility page (3x) */
.modal { container-type: inline-size; }
.modal .modal-header i,
.modal .close,
.modal .close-btn {
  font-size: 1em !important;
  line-height: 1 !important;
}
@container (min-width: 420px) {
  .modal .modal-header i,
  .modal .close,
  .modal .close-btn { font-size: clamp(2rem, 3em, 5rem) !important; }
}
@container (max-width: 420px) {
  .modal .modal-header i,
  .modal .close,
  .modal .close-btn { font-size: clamp(2rem, 3em, 5rem) !important; }
}
/* Removed global modal content font scaling */
.modal .modal-header h2 { font-size: calc(1.25em + 3pt) !important; line-height: 1.15; }
.modal .modal-content p,
.modal .modal-content label,
.modal .modal-content span,
.modal .modal-content li,
.modal .modal-content input,
.modal .modal-content textarea,
.modal .modal-content select,
.modal .modal-content button {
  font-size: inherit !important;
  line-height: normal !important;
  font-weight: inherit !important;
}
/* cleanup: removed duplicate container tweaks added by mistake */
/* Extra-aggressive downsizing for very narrow modals */
@container (max-width: 360px) {
  .modal-content { font-size: 0.4rem; padding: 0.45rem; }
.modal-header h2 { font-size: calc(0.48rem + 3pt); }
  .modal-header i, .close { font-size: 2rem !important; }
  .modal-body, .utility-container { font-size: 0.44rem; line-height: 1.2; }
  .utility-container textarea, .utility-container input, .modal-body input, .modal-body textarea { font-size: 0.44rem; }
  .button-group button, .tab-btn { font-size: 0.46rem; }
  .search-box input { font-size: 0.46rem; }
  .search-box i { font-size: 0.5rem; }
}
@container (max-width: 300px) {
  .modal-content { font-size: 0.37rem; padding: 0.4rem; }
.modal-header h2 { font-size: calc(0.44rem + 3pt); }
  .modal-header i, .close { font-size: 0.48rem; }
  .modal-body, .utility-container { font-size: 0.4rem; line-height: 1.15; }
  .utility-container textarea, .utility-container input, .modal-body input, .modal-body textarea { font-size: 0.4rem; }
  .button-group button, .tab-btn { font-size: 0.42rem; }
  .search-box input { font-size: 0.42rem; }
  .search-box i { font-size: 0.48rem; }
}

/* Ensure modal content base styles remain while applying typography scaling */
.utility-modal .modal-content {
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  /* Varsayılan modal genişliği: 560px (viewport’a sığacak şekilde) */
  width: min(92vw, 400px);
  max-width: 400px;
  overflow-x: hidden;
  overflow-y: auto;
  /* Ölçek overlay’de uygulandığı için içerikte transform kullanma */
  transform: none !important;
  /* Tipografi: modal içinde oran sabit kalsın diye baz büyüklük 1rem */
  font-size: 1rem;
  font-weight: 300; /* Light font weight */
}

/* (Revert) tablolara eklenen zorlayıcı genişlik ve layout kaldırıldı */

/* Apply typography scaling strongly to override any previous rules */
.utility-modal .modal-content, .utility-modal .modal-content p, .utility-modal .modal-content label,
.utility-modal .modal-content span, .utility-modal .modal-content li,
.utility-modal .modal-content input, .utility-modal .modal-content textarea,
.utility-modal .modal-content select, .utility-modal .modal-content button {
  /* revert aggressive downsizing */
  font-size: inherit !important;
  line-height: normal !important;
  font-weight: inherit !important;
}

.utility-modal .modal-content h1, .utility-modal .modal-content h2, .utility-modal .modal-content h3,
.utility-modal .modal-content h4, .utility-modal .modal-content h5, .utility-modal .modal-content h6,
.utility-modal .modal-header h1, .utility-modal .modal-header h2, .utility-modal .modal-header h3,
.utility-modal .modal-header h4, .utility-modal .modal-header h5, .utility-modal .modal-header h6 {
  /* revert heading downsizing */
  font-size: inherit !important;
  line-height: normal !important;
  font-weight: inherit !important;
}

/* Masaüstü: tüm utility modalları 400px genişlikte (periyodik cetvel hariç) */
.utility-modal .modal-content { 
  width: min(92vw, 400px); 
  max-width: 95vw; 
  overflow: auto; 
  resize: both;
  min-width: 300px;
}

/* Mobilde de genişliği 500px üst limitle sınırla */
@media (max-width: 768px) {
  /* Viewport’a yasla, üst limit 400px */
  .utility-modal .modal-content { width: min(95vw, 400px); max-width: 400px; overflow-x: hidden; overflow-y: auto; }
  .utility-modal .modal-body input,
  .utility-modal .modal-body select,
  .utility-modal .modal-body textarea {
      min-height: 28px;
  }
  .utility-modal .modal-body button { min-height: 32px; }
}

/* Periyodik Tablo modali: daha geniş içerik alanı (yalnızca bu modal) */
.utility-modal[data-utility-type="science-periodic-table"] .modal-content {
  width: min(100vw - 24px, 1024px);
  max-width: 1024px;
}

@media (max-width: 768px) {
  .utility-modal[data-utility-type="science-periodic-table"] .modal-content {
    width: min(100vw - 12px, 720px);
    max-width: 720px;
  }
}

/* Revert no-shrink overrides: use base modal sizes */

/* --- Reinforce responsive grid columns for utility modal item grids --- */
@media (max-width: 900px) {
  .utility-modal .utility-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
  }
}
@media (max-width: 600px) {
  .utility-modal .utility-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
}
@media (max-width: 400px) {
  .utility-modal .utility-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}
/* Basit giriş doğrulama: geçersiz format vurgulama */
.utility-modal .utility-input.invalid {
    border-color: #ff6b6b !important;
    box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.2) inset;
}

/* Icon scaling for utility modal content */
.utility-modal .modal-content svg, .utility-modal .modal-content i, .utility-modal .modal-content .icon {
  /* revert icon scale */
  transform: none !important;
  font-size: inherit !important;
}

/* --- Strong overrides appended at end to ensure cascade wins --- */
.utility-modal .modal-content .calculator-buttons {
  gap: 12px !important;
}
.utility-modal .modal-content .calc-btn,
.utility-modal .modal-content button.calc-btn {
  padding: 18px !important;
  font-size: 1.2rem !important;
}

.button-group button, .tab-btn { font-size: clamp(0.46rem, 2.2cqw, 0.78rem); }
.search-box input { font-size: clamp(0.5rem, 2.6cqw, 0.95rem); }
.search-box i { font-size: clamp(0.55rem, 4cqw, 1.1rem); }

/* Tight container tweaks to avoid clipping */
@container (max-width: 420px) {
.modal-content { padding: 0.3rem; }
  .modal-header h2 { margin: 0; }
  .button-group { gap: 0.4rem; }
}
/* Title no-wrap to avoid vertical stacking specifically */
/* Global modallar için no-wrap bırak, utility modalda sarmayı aç */
.modal .modal-header h2, .modal #modal-title {
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}
.utility-modal .modal-header h2, .utility-modal #modal-title {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  hyphens: auto !important;
}

/* Normalize wrapping on modal containers to avoid per-character vertical stacking */
.modal-body, .utility-container, .modal-content, .modal-header h2 {
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

/* Tighten padding/margins for smaller containers */
.modal-content { padding: 0.28rem; }
.modal-header h2 { margin: 0; }
  .button-group { gap: 0.4rem; }
/* Normalize wrapping on modal containers (single declaration block) */
.modal-body, .utility-container, .modal-content, .modal-header h2 {
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

/* Extra-aggressive downsizing for very narrow modals */
@container (max-width: 360px) {
.modal-content { font-size: 0.4rem; padding: 0.25rem; }
.modal-header h2 { font-size: calc(0.48rem + 3pt); }
  .modal-header i, .close { font-size: 0.5rem; }
  .modal-body, .utility-container { font-size: 0.44rem; line-height: 1.2; }
  .utility-container textarea, .utility-container input, .modal-body input, .modal-body textarea { font-size: 0.44rem; }
  .button-group button, .tab-btn { font-size: 0.46rem; }
  .search-box input { font-size: 0.46rem; }
  .search-box i { font-size: 0.5rem; }
}
@container (max-width: 300px) {
.modal-content { font-size: 0.37rem; padding: 0.24rem; }
.modal-header h2 { font-size: calc(0.44rem + 3pt); }
  .modal-header i, .close { font-size: 0.48rem; }
  .modal-body, .utility-container { font-size: 0.4rem; line-height: 1.15; }
  .utility-container textarea, .utility-container input, .modal-body input, .modal-body textarea { font-size: 0.4rem; }
  .button-group button, .tab-btn { font-size: 0.42rem; }
  .search-box input { font-size: 0.42rem; }
  .search-box i { font-size: 0.48rem; }
}

/* Make utility modal close icon much larger */

.utility-modal .close {
  font-size: 1.5rem !important; /* %50 küçültme: 3rem → 1.5rem */
}

/* Compact inputs: spacing and density for survival utilities */
.utility-modal.compact-inputs .modal-body label { margin: 6px 0 !important; }
.utility-modal.compact-inputs .modal-body input,
.utility-modal.compact-inputs .modal-body select,
.utility-modal.compact-inputs .modal-body textarea {
  padding: 8px 10px !important;
  line-height: 1.3 !important;
  border-radius: 8px !important;
}
.utility-modal.compact-inputs .button-group { gap: 8px !important; }

/* Long-text output wrapping and overflow handling */
.utility-modal .modal-body pre,
.utility-modal .modal-content pre,
.utility-modal .modal-body textarea[readonly],
.utility-modal .modal-content textarea[readonly],
.utility-modal .modal-body .mini-out,
.utility-modal .modal-content .mini-out {
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}
.utility-modal .modal-body textarea[readonly],
.utility-modal .modal-content textarea[readonly] {
  max-height: 280px;
  overflow: auto;
}
@container (max-width: 360px) {
  .utility-modal .close { font-size: 1.3rem !important; width: 21px !important; height: 21px !important; }
}
@container (max-width: 300px) {
  .utility-modal .close { font-size: 1.15rem !important; width: 19px !important; height: 19px !important; }
}

/* Utility modal tipografi oranlarını sabitle: başlık ve ikonlar içerikle orantılı */
.utility-modal .modal-header h2,
.utility-modal #modal-title {
  font-size: inherit !important;
  line-height: inherit !important;
}
.utility-modal .modal-header i,
.utility-modal .close,
.utility-modal .close-btn {
  font-size: 1.15em !important;
  line-height: 1 !important;
}

/* Küçülen pencerede modal içerik ve tipografi ölçeklenmesin (sabit oran) */
@container (max-width: 900px) {
.utility-modal .modal-content { font-size: 1.275rem !important; }
  /* Başlıkları %30 küçült */
  .utility-modal .modal-header h2 { font-size: calc(0.7 * (1.25em + 3pt)) !important; line-height: 1.1 !important; }
  .utility-modal .modal-header i, .utility-modal .close, .utility-modal .close-btn { font-size: 1.15em !important; }
}

/* Removed forced header shrinking rules */

/* Utility modal başlık yerleşimini flex’e çevirerek boş kolonu kaldır ve sarmayı aç */
.utility-modal .modal-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 12px 14px !important;
}
.utility-modal .modal-header h2 {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.utility-modal .close {
  flex: 0 0 auto !important;
}

/* Utility modal: yan iç boşluğu kesin 3px olacak şekilde sabitle */
/* Remove forced side paddings on modal-content */

/* --- Header düzeni: başlık solda, kapatma sağda --- */
.utility-modal .modal-header { justify-content: flex-start !important; }
.utility-modal .modal-header-actions {
  margin-left: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.utility-modal .modal-header .modal-icon {
  flex: 0 0 auto !important;
  font-size: 1.25rem !important;
  margin-right: 8px !important;
  color: #ffd93d !important; /* başlığa içerik-ilişkili vurgulu ikon */
}

/* Astronomy theme: use Astrolab bright green for header icon */
.utility-modal.modal-theme-astronomy { --accent: #00FF7F; }
.utility-modal.modal-theme-astronomy .modal-header .modal-icon {
  color: #00FF7F !important;
}
/* Sarı temayı daha güçlü yapmak için en sona ekleyerek kazanmasını sağla */
.utility-modal.modal-theme-yellow .modal-header .modal-icon { color: var(--accent) !important; }
/* Sağlık & Güzellik modal başlığında ikon rengi: açık pembe */
.utility-modal.modal-theme-health .modal-header .modal-icon { color: #ffb3c7 !important; }
.utility-modal.modal-theme-beauty .modal-header .modal-icon { color: #ffb3c7 !important; }
/* İkon kategori renkleri */
.utility-modal .modal-header .modal-icon.icon-cat-video { color: #e66a6a !important; }
.utility-modal .modal-header .modal-icon.icon-cat-audio { color: #e6a86a !important; }
.utility-modal .modal-header .modal-icon.icon-cat-map { color: #6aa86a !important; }
.utility-modal .modal-header .modal-icon.icon-cat-image { color: #6aa8e6 !important; }
.utility-modal .modal-header .modal-icon.icon-cat-pdf { color: #a86ae6 !important; }
.utility-modal .modal-header .modal-icon.icon-cat-color { color: #e66ad7 !important; }
.utility-modal .modal-header .modal-icon.icon-cat-data { color: #6ae6c7 !important; }
.utility-modal .modal-header .modal-icon.icon-cat-security { color: #b36ae6 !important; }
.utility-modal .modal-header .modal-icon.icon-cat-dev { color: #a6a6a6 !important; }
.utility-modal .modal-header .modal-icon.icon-cat-general { color: #6a6ae6 !important; }
.utility-modal .close {
  order: 0 !important; /* reset previous left-ordering */
  margin-right: 0 !important;
  position: static !important;
  cursor: pointer;
}
.utility-modal .close:hover { opacity: 0.9; }
.utility-modal .profile-toggle {
  display: inline-flex !important;
  align-items: center !important;
  padding: 6px 10px !important;
  border-radius: 6px !important;
  background: #222 !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
}

/* Final override: shrink X close icon by 50% */
.utility-modal .modal-header .close {
  font-size: 1.4rem !important; /* %50 küçültme: 2.8rem → 1.4rem */
  width: 24px !important;       /* 48px → 24px */
  height: 24px !important;      /* 48px → 24px */
}
@container (max-width: 360px) {
  .utility-modal .modal-header .close {
    font-size: 1.2rem !important; /* 2.4rem → 1.2rem */
    width: 22px !important;       /* 44px → 22px */
    height: 22px !important;      /* 44px → 22px */
  }
}
/* Survival kart ikonlarını #ff1744 ile sabitle */
.service-card[data-service^="survival-"] .card-icon i {
    color: #ff1744;
}
.service-card[data-service^="survival-"] .card-icon i:hover, 
.service-card[data-service^="survival-"] .card-icon i:focus {
    color: #ff1744;
}

/* Utility header aksiyonları */

/* Generic help panel */

/* Specific help: adımlı liste ve örnek blok */
.step-help{ margin:6px 0; padding-left: 18px; }
.step-help li{ margin: 2px 0; }

/* Preset bar for image tools */
.preset-select{ font-size:13px; }

/* Text options */

/* Calculator result formatting */

/* Survival kart toolbar ve checklist stilleri */
.card-toolbar{ display:flex; gap:6px; justify-content:flex-end; align-items:center; margin:4px 0 8px; }
.card-toolbar .tb-btn{ font-size:12px; padding:4px 8px; border:1px solid var(--border-color, #ccc); background: var(--btn-bg, #fff); color: var(--text-color, #222); border-radius:6px; cursor:pointer; }
.card-toolbar .tb-btn:hover{ background: var(--btn-hover-bg, #f2f2f2); }
.surv-title-emoji{ margin-right:4px; opacity:0.9; }
.surv-help{ margin:6px 0; border:1px dashed var(--border-color, #ccc); border-radius:6px; padding:6px; background: var(--panel-bg, #fafafa); }
.surv-help summary{ cursor:pointer; font-weight:600; }
.surv-checklist{ border:1px solid var(--border-color, #ddd); border-radius:6px; padding:8px; background: var(--panel-bg, #fbfbfb); }
.surv-check-row{ display:flex; gap:8px; align-items:center; margin:4px 0; font-size:13px; }
/* Survival Guide Panel */
.survival-guide-section {
  margin-top: 12px;
  border: 1px dashed rgba(255,255,255,0.25);
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
}
.survival-guide-summary {
  cursor: pointer;
  padding: 8px 10px;
  background: linear-gradient(90deg, rgba(255,217,61,0.18), rgba(160,231,229,0.18));
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  font-weight: 600;
}
.survival-guide-summary .guide-toggle {
  margin-left: 8px;
  font-size: 12px;
  padding: 2px 8px;
  border: 1px solid rgba(255,255,255,0.20);
  background: rgba(255,255,255,0.06);
  color: inherit;
  border-radius: 12px;
  cursor: pointer;
}
.survival-guide-summary .guide-toggle:hover {
  background: rgba(255,255,255,0.10);
}
.survival-guide-section .survival-guide-summary::after {
  content: '▼';
  margin-left: auto;
  opacity: 0.8;
}
.survival-guide-section:not([open]) .survival-guide-summary::after {
  content: '▶';
}
.survival-guide-icon {
  vertical-align: middle;
}
.survival-guide-table {
  width: 100%;
  border-collapse: collapse;
  margin: 6px 0 4px 0;
}
.visual-banner {
  margin: 8px 0;
  padding: 8px 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
}
.visual-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
.visual-item {
  margin: 0;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  overflow: hidden;
}
.visual-item img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  display: block;
}
.visual-item figcaption {
  font-size: 12px;
  padding: 6px 8px;
  color: #bbb;
}
.visual-item .credit {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  color: #9a9a9a;
  text-transform: lowercase;
}
/* Kredi bağlantıları: galeri ile uyumlu, düşük kontrast ve altı çizili */
.visual-item .credit a {
  color: #9a9a9a;
  text-decoration: underline;
  font-size: 10px;
}
.visual-item .credit a:hover {
  color: #b3b3b3;
}
.survival-guide-table th, .survival-guide-table td {
  border: 1px solid rgba(255,255,255,0.12);
  padding: 6px;
  font-size: 0.92em;
}
.survival-guide-table th {
  background: rgba(255,255,255,0.06);
}
/* Revert close icon to default placement within header */
.utility-modal .version-badge {
  display: inline-block;
  font-size: 0.75em;
  padding: 4px 8px;
  border-radius: 12px;
  background: linear-gradient(90deg, #4ade80, #22d3ee);
  color: #08212d;
  margin-right: 8px;
  font-weight: 600;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.15) inset;
}
.utility-modal .modal-header h2,
.utility-modal #modal-title { padding-right: 0 !important; }
/* Remove forced shifts for toolbar, save and profile buttons */
.utility-modal .modal-toolbar,
.utility-modal button[id$="SaveBtn"],
.utility-modal .generate-btn[id$="SaveBtn"],
.utility-modal .profile-toggle { transform: none !important; }

/* Close icon: reduce size by ~30% */
/* Use default close icon sizing */
/* Removed container-specific close icon overrides */
/* Info tabs content typography: slightly reduced for dense content */
.info-tabs-injected { font-size: 0.82rem; line-height: 1.25; }
.info-tabs-injected ul { margin: 6px 0; padding-left: 1.1em; }
.info-tabs-injected li { margin: 2px 0; }
/* Guide-sections bilgi sekmeleri: sadece utility modal içindeki generate-btn düğmelerini küçült */
.utility-modal .guide-sections .generate-btn {
  /* Üst bilgi sekmeleri: kompakt ve pencereye sığacak şekilde */
  padding: 2px 6px !important;
  font-size: 0.92rem !important;
  line-height: 1.08 !important;
  border-radius: 4px !important;
  /* Global min-height (32px) kuralını sadece bu düğmeler için devre dışı bırak */
  min-height: 0 !important;
}

/* İstenen hedef: modal içi butonları 30px yüksekliğe sabitle */
.utility-modal .generate-btn,
.utility-modal .convert-btn,
.utility-modal .mt-btn {
  height: 30px !important;
  min-height: 30px !important;
}
/* Generate/convert butonlarını modal içinde yatayda belirgin şekilde kısalt */
.utility-modal .generate-btn,
.utility-modal .convert-btn {
  line-height: 30px !important;
  padding: 0 8px !important; /* önceki 14px → 8px, ciddi daralma */
  font-size: 0.92rem !important; /* metni biraz küçült, daha dar görünüm */
  white-space: nowrap !important; /* metin tek satır, taşmayı önle */
  width: auto !important; /* inline width:100%’leri geçersiz kıl */
  max-width: fit-content !important; /* içeriğe sığacak en küçük genişlik */
  min-width: 0 !important;
  flex: 0 0 auto !important; /* flex büyümesini engelle */
  display: inline-flex !important; /* içeriğe göre kompakt genişlik */
  align-items: center !important; /* dikey ortalama */
  justify-content: center !important; /* yatay ortalama */
}

/* Genel modal mavi butonları da kompakt hale getir (utility dışı modallar) */
.modal .generate-btn,
.modal .convert-btn,
.modal .mt-btn {
  height: 30px !important;
  min-height: 30px !important;
  line-height: 30px !important;
  padding: 0 8px !important;
  font-size: 0.92rem !important;
  white-space: nowrap !important;
  width: auto !important;
  max-width: fit-content !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Modal içindeki select’ler bazı yerlerde inline width:100% ile çok geniş.
   Taşmayı önlemek için içeriğe göre genişlik ver, üst sınırı konteynıra göre ayarla */
.utility-modal select {
  width: auto !important;
  max-width: min(100%, 240px) !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
  display: inline-block !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
}

/* PT kontrol satırındaki Tema butonu için zorlayıcı daraltma (script stiline karşı) */
.pt-controls #ptThemeBtn.generate-btn {
  width: auto !important;
  max-width: fit-content !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 8px !important;
  height: 30px !important;
  line-height: 30px !important;
}

/* --- Responsive overflow fixes for inline two-column grids in utility modals --- */
/* Many modals use inline styles like grid-template-columns: 1fr 1fr; ensure stacking on narrow screens */
/* Base: in two-column inline grids, children fill their cell equally */
.utility-modal .modal-body [style*="grid-template-columns: 1fr 1fr"] > * {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
@media (max-width: 768px) {
  .utility-modal .modal-body [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  .utility-modal .modal-body [style*="grid-template-columns: 1fr 1fr"] > * {
    min-width: 0 !important; /* allow children to shrink to container */
  }
}

/* Ensure common inputs/selects/textarea don't overflow horizontally and fill their cell on small screens */
@media (max-width: 768px) {
  .utility-modal .modal-body input,
  .utility-modal .modal-body textarea,
  .utility-modal .modal-body select {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}

/* Generic containment: avoid accidental horizontal scroll within utility containers */
.utility-modal .modal-body .utility-container {
  overflow-x: hidden !important;
}

/* Inline style ile genişliği 100% olan select’leri zorla kısalt */
.utility-modal select[style*="width"] {
  width: auto !important;
  max-width: min(100%, 240px) !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
}

/* Modal içindeki input/textarea’ların yatay taşmasını engelle */
.utility-modal .modal-body .utility-input,
.utility-modal .modal-body input,
.utility-modal .modal-body textarea {
  max-width: 100% !important;
  min-width: 0 !important;
  width: auto !important;
  box-sizing: border-box !important;
  flex: 0 1 auto !important;
}
.utility-modal .modal-body :is(input, textarea, select) {
  padding-inline-start: 0 !important; /* LTR: sol iç boşluğu sıfırla */
}
/* Number inputlarda UA spin etkilerini azalt */
.utility-modal .modal-body input[type="number"] {
  appearance: textfield !important;
  -moz-appearance: textfield !important;
  -webkit-appearance: none !important; /* Chrome/Safari varsayılan iç boşlukları kaldır */
}
.utility-modal .modal-body :is(input[type="text"], input[type="number"], input[type="search"], input[type="email"], input[type="tel"], input[type="date"], input[type="time"]) {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
}
.utility-modal .modal-body input[type="number"]::-webkit-outer-spin-button,
.utility-modal .modal-body input[type="number"]::-webkit-inner-spin-button {
  margin: 0 !important;
}

/* Global: metin/sayı/select/textarea türündeki girişleri tam genişlik yap (tüm modallar) */
.utility-modal .modal-body :is(input[type="text"], input[type="number"], input[type="email"], input[type="tel"], input[type="date"], select, textarea) {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  flex: 1 1 auto !important;
}

/* İstenen modallar: tüm giriş alanlarını yatayda tam genişlik yap */
.utility-modal[data-utility-type="schengen-90-180-calculator"] .modal-body :is(input[type="text"], input[type="number"], input[type="email"], input[type="tel"], input[type="date"], select, textarea),
.utility-modal[data-utility-type="word-counter"] .modal-body :is(input[type="text"], input[type="number"], input[type="email"], input[type="tel"], input[type="date"], select, textarea),
.utility-modal[data-utility-type="slugify-tool"] .modal-body :is(input[type="text"], input[type="number"], input[type="email"], input[type="tel"], input[type="date"], select, textarea),
.utility-modal[data-utility-type="text-reverser"] .modal-body :is(input[type="text"], input[type="number"], input[type="email"], input[type="tel"], input[type="date"], select, textarea),
.utility-modal[data-utility-type="line-sorter"] .modal-body :is(input[type="text"], input[type="number"], input[type="email"], input[type="tel"], input[type="date"], select, textarea),
.utility-modal[data-utility-type="remove-duplicates"] .modal-body :is(input[type="text"], input[type="number"], input[type="email"], input[type="tel"], input[type="date"], select, textarea),
.utility-modal[data-utility-type="trim-whitespace"] .modal-body :is(input[type="text"], input[type="number"], input[type="email"], input[type="tel"], input[type="date"], select, textarea) {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Akış satırlarında taşma yerine satır kırılmasına izin ver */
.utility-modal .flow-row { flex-wrap: wrap !important; }

/* Popup/select listeleri (aylar ve bitkiler dahil) 30px yüksekliğe sabitle */
  .utility-modal .modal-content select,
  .utility-modal .modal-body select,
  .utility-modal .generate-select,
  .utility-modal .preset-select,
  .utility-modal .enc-select,
  .utility-modal .unit-select {
  
  height: auto !important;
  min-height: 24px !important;
  line-height: 1.2 !important;
  font-size: 0.95rem !important;
  padding: 4px 8px !important;
  box-sizing: border-box !important;
}
/* Global: select’lerde uzun varsayılan etiketlerin kırpılmasını önlemek için genişliği esnekleştir */
.utility-modal .modal-content select,
.utility-modal .modal-body select,
.utility-modal .generate-select,
.utility-modal .preset-select,
.utility-modal .enc-select,
.utility-modal .unit-select {
  min-width: clamp(200px, 40cqw, 480px);
  max-width: 100%;
  width: auto;
  flex: 1 1 auto;
}
/* Scientific calculator: larger, readable buttons inside utility modal */
.utility-modal #sciButtons {
  display: grid !important;
  /* Yatay +%20, dikey −%40 */
  /* +%10 ek genişleme ve yükseklik */
  grid-template-columns: repeat(5, calc(48px * 1.32)) !important;
  grid-auto-rows: calc(48px * 0.66) !important;
  gap: 6px !important;
  justify-content: flex-start !important;
  width: max-content !important;
}
.utility-modal #sciButtons .calc-btn,
.utility-modal .modal-content #sciButtons .calc-btn {
  width: calc(48px * 1.32) !important;
  height: calc(48px * 0.66) !important;
  min-height: calc(48px * 0.66) !important;
  min-width: calc(48px * 1.32) !important;
  max-width: calc(48px * 1.32) !important;
  padding: 0 !important;
  font-size: 0.95rem !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Scientific Calculator modal: yataydan 60px daraltma (30px sağ/sol iç boşluk) */
.utility-modal[data-utility-type="scientific-calculator"] .modal-content {
  box-sizing: border-box !important;
  /* Sol taraftaki büyük boşlukları kaldır, iç kenar boşluklarını daralt */
  padding-left: 6px !important;
  padding-right: 6px !important;
}

/* Scientific: form kontrolleri taşma yapmasın ve 60px daraltmayı gözeterek esnesin */
.utility-modal[data-utility-type="scientific-calculator"] .calculator input,
.utility-modal[data-utility-type="scientific-calculator"] .calculator select,
.utility-modal[data-utility-type="scientific-calculator"] .calculator textarea {
  min-width: 0 !important;
  max-width: 100% !important;
}

/* Scientific: grid ve flex satırlardaki büyük butonlar (calc-btn hariç) konteyner genişliğini aşmasın */
.utility-modal[data-utility-type="scientific-calculator"] .calculator button:not(.calc-btn) {
  max-width: 100% !important;
}

/* Scientific: input/select/button (calc-btn hariç) için 80px genişlik */
.utility-modal[data-utility-type="scientific-calculator"] .calculator input:not(#sciCalcDisplay):not([type="color"]):not([type="checkbox"]) {
  width: 80px !important;
}
.utility-modal[data-utility-type="scientific-calculator"] #sciAngleMode,
.utility-modal[data-utility-type="scientific-calculator"] .calculator select {
  width: 80px !important;
}
.utility-modal[data-utility-type="scientific-calculator"] .calculator button.generate-btn {
  width: 80px !important;
}

/* Scientific: yatay ve dikey merkez hizalama (tuş takımı hariç) */
.utility-modal[data-utility-type="scientific-calculator"] .sci-program-controls {
  /* Blokları hizalı şekilde sola yasla */
  justify-items: start !important;
  align-items: start !important;
}
.utility-modal[data-utility-type="scientific-calculator"] .sci-plot-opts {
  /* Flex kolon içerisinde sol hizalama */
  align-items: flex-start !important;
}
.utility-modal[data-utility-type="scientific-calculator"] .sci-plot-opts > div[style*="display:grid"] {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-flow: row dense !important;
  gap: 4px !important;
  justify-items: start !important;
  align-items: start !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.utility-modal[data-utility-type="scientific-calculator"] .sci-plot-opts > div[style*="display:grid"] > * { min-width: 0 !important; }
.utility-modal[data-utility-type="scientific-calculator"] .sci-plot-opts :is(input[type="text"], input[type="number"], select, .generate-btn) {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.utility-modal[data-utility-type="scientific-calculator"] :is(#sciAngleMode, #sciFuncName, #sciFuncParams, #sciFuncExpr, #sciPlotExpr, #sciXMin, #sciXMax, #sciYMin, #sciYMax, #sciSamples, #sciPlotColor, #sciPlotColor2, #sciPlotLineWidth, #sciPlotPointSize, #sciPlotLineWidth2, #sciPlotPointSize2) {
  width: 60px !important;
  max-width: 60px !important;
  min-width: 60px !important;
  box-sizing: border-box !important;
}
/* Seçenekler alanında metinleri biraz küçült */
.utility-modal[data-utility-type="scientific-calculator"] .sci-plot-opts {
  font-size: 0.9rem;
}
/* Inline font-size etiketlerini daha küçük göster */
.utility-modal[data-utility-type="scientific-calculator"] .sci-plot-opts div > div[style*="font-size:"] {
  font-size: 0.8rem !important;
}
/* Sayı girişlerini kompaktlaştır */
.utility-modal[data-utility-type="scientific-calculator"] #sciPlotLineWidth,
.utility-modal[data-utility-type="scientific-calculator"] #sciPlotPointSize {
  width: 60px !important;
}
/* Inline flex satırlarını ortala (açı birimi ve küçük giriş grupları) */
.utility-modal[data-utility-type="scientific-calculator"] .calculator [style*="display: flex"] {
  justify-content: flex-start !important;
  align-items: center !important;
}

/* Therapy specific warning ribbon inside header */
.utility-modal .therapy-warning-ribbon {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  margin-bottom: 6px;
  border-radius: 6px;
  border: 1px solid rgba(255, 83, 83, 0.35);
  background: linear-gradient(90deg, rgba(255,83,83,0.18), rgba(255,83,83,0.06));
  color: #ff6b6b;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

/* --- Casio tarzı görünüm --- */
.utility-modal[data-utility-type="scientific-calculator"] .casio-calc .calculator-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: 'brand model' 'natural edition';
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
  color: #e6e6e6;
  font-weight: 600;
}
.utility-modal[data-utility-type="scientific-calculator"] .casio-calc .brand { grid-area: brand; font-size: 0.9rem; letter-spacing: 1px; }
.utility-modal[data-utility-type="scientific-calculator"] .casio-calc .model { grid-area: model; justify-self: end; font-size: 0.9rem; opacity: 0.9; }
.utility-modal[data-utility-type="scientific-calculator"] .casio-calc .natural { grid-area: natural; color: #9bdc00; font-size: 0.85rem; }
.utility-modal[data-utility-type="scientific-calculator"] .casio-calc .edition { grid-area: edition; justify-self: end; font-size: 0.75rem; opacity: 0.8; }

.utility-modal[data-utility-type="scientific-calculator"] .casio-display {
  background: #0f1418;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  padding: 6px 8px;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 10px auto 10px;
}
.utility-modal[data-utility-type="scientific-calculator"] .casio-display .lcd-line {
  background: linear-gradient(180deg, rgba(130,180,120,0.25), rgba(130,180,120,0.1));
  border-radius: 3px;
}
.utility-modal[data-utility-type="scientific-calculator"] .casio-display input#sciCalcDisplay {
  width: 100% !important;
  padding: 8px !important;
  /* Sağ tarafta kesilmeyi önlemek için kutu modeli ve sağ iç boşluk */
  box-sizing: border-box !important;
  padding-right: 8px !important;
  font-size: 1.05rem !important;
  text-align: center !important;
  font-family: Consolas, 'Courier New', monospace !important;
  letter-spacing: -0.2px !important;
  justify-self: center !important; /* grid içinde ortala */
  margin: 0 auto !important; /* ek güvence: ortalama */
  background: #0f1418 !important;
  color: #ccf2d3 !important;
  border: none !important;
}

.utility-modal[data-utility-type="scientific-calculator"] .top-controls {
  display: grid;
  /* 6 öğe: SHIFT, ALPHA, DRG, MODE SETUP, ON/AC, Derece menüsü */
  grid-template-columns: repeat(6, max-content);
  gap: 3px;
  justify-content: start;
  align-items: center;
  width: 100% !important;
  margin: 8px 0;
}
.utility-modal[data-utility-type="utility-category-image"] .utility-category-grid.two-col-wide,
.utility-modal[data-utility-type="utility-category-conversion"] .utility-category-grid.two-col-wide,
.utility-modal[data-utility-type="utility-category-generator"] .utility-category-grid.two-col-wide,
.utility-modal[data-utility-type="utility-category-image"] .utility-container > div,
.utility-modal[data-utility-type="utility-category-conversion"] .utility-container > div,
.utility-modal[data-utility-type="utility-category-generator"] .utility-container > div {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  justify-items: center !important;
  width: 100% !important;
}
.utility-modal[data-utility-type="utility-category-image"] .utility-category-grid.two-col-wide .generate-btn,
.utility-modal[data-utility-type="utility-category-conversion"] .utility-category-grid.two-col-wide .generate-btn,
.utility-modal[data-utility-type="utility-category-generator"] .utility-category-grid.two-col-wide .generate-btn,
.utility-modal[data-utility-type="utility-category-image"] .utility-container > div .generate-btn,
.utility-modal[data-utility-type="utility-category-conversion"] .utility-container > div .generate-btn,
.utility-modal[data-utility-type="utility-category-generator"] .utility-container > div .generate-btn {
  width: 300px !important;
  min-width: 300px !important;
  max-width: 300px !important;
}
/* Üst kontrol tuşları: yükseklik %50, yatayda kısa, yazı küçük */
.utility-modal[data-utility-type="scientific-calculator"] .top-controls .calc-btn {
  height: calc(48px * 0.5) !important;
  min-height: calc(48px * 0.5) !important;
  width: auto !important;
  padding: 2px calc(8px * 1.5) !important; /* yatayda ekstra genişlik */
  font-size: 0.8rem !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
}
/* Derece menüsü: üst kontrol satırına uyumlu yükseklik ve yazı boyutu */
.utility-modal[data-utility-type="scientific-calculator"] .top-controls #sciAngleMode {
  height: calc(48px * 0.5) !important;
  font-size: 0.85rem !important;
  padding: 2px 6px !important;
  width: 60px !important;
}
.utility-modal[data-utility-type="scientific-calculator"] .shift-key { background: #f7c05c !important; color: #1b1b1b !important; }
.utility-modal[data-utility-type="scientific-calculator"] .alpha-key { background: #e66b6b !important; color: #1b1b1b !important; }
.utility-modal[data-utility-type="scientific-calculator"] .green-key { background: #a2d85e !important; color: #1b1b1b !important; }
.utility-modal[data-utility-type="scientific-calculator"] .calc-btn.active { box-shadow: 0 0 0 2px rgba(255,255,255,0.25) inset; }

.utility-modal[data-utility-type="scientific-calculator"] .casio-keys {
  display: grid;
  /* +%10 ek genişleme ve yükseklik */
  grid-template-columns: repeat(5, calc(48px * 1.32));
  grid-auto-rows: calc(48px * 0.66);
  gap: 6px;
  justify-content: flex-start;
  width: max-content;
  margin: 8px 0;
}

/* Global merkezleme kurallarını bastırmak için daha spesifik bir override */
.utility-modal[data-utility-type="scientific-calculator"] #sciButtons {
  justify-content: flex-start !important;
  margin: 8px 0 !important;
}
.utility-modal[data-utility-type="scientific-calculator"] .calc-btn {
  background: #2a2e31;
  color: #eee;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
}
.utility-modal[data-utility-type="scientific-calculator"] .calc-btn.number { background: #3a3f42; }
.utility-modal[data-utility-type="scientific-calculator"] .calc-btn.equals { background: #5561d6; }

.utility-modal[data-utility-type="scientific-calculator"] .sci-program-controls {
  display: grid;
  grid-template-columns: 1fr; /* Tek sütun: sola hizalama için */
  justify-items: start; /* İçeriği sola hizala */
  gap: 10px;
  margin: 10px 0;
}
.utility-modal[data-utility-type="scientific-calculator"] .sci-program-controls .row {
  /* Değişken satırını iki satır olacak şekilde sarmaya izin ver */
  flex-wrap: wrap;
}
/* Değişken Ekle: iki giriş ilk satırda, buton ikinci satırda tam genişlik */
/* Değişken Ekle kaldırıldı: ilgili genişlik kuralları silindi */
.utility-modal[data-utility-type="scientific-calculator"] .casio-calc .row { display: flex; gap: 6px; align-items: center; }
.utility-modal[data-utility-type="scientific-calculator"] .casio-calc .muted { margin-top: 6px; font-size: 0.9rem; opacity: 0.85; }

.utility-modal[data-utility-type="scientific-calculator"] .plot-block { margin-top: 12px; padding: 8px; background: rgba(255,255,255,0.05); border-radius: 8px; }
.utility-modal[data-utility-type="scientific-calculator"] .plot-block label { display:block; margin-bottom:6px; }
.utility-modal[data-utility-type="scientific-calculator"] .plot-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  align-items: center;
}
.utility-modal[data-utility-type="scientific-calculator"] .plot-block,
.utility-modal[data-utility-type="scientific-calculator"] .plot-grid {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.utility-modal[data-utility-type="scientific-calculator"] .plot-grid > * {
  min-width: 0 !important;
  box-sizing: border-box !important;
  flex: 0 0 calc(50% - 3px) !important;
  max-width: calc(50% - 3px) !important;
}
.utility-modal[data-utility-type="scientific-calculator"] .plot-grid :is(input[type="text"], input[type="number"], .generate-btn) {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.utility-modal[data-utility-type="scientific-calculator"] #sciPlotCanvas { max-width: 100% !important; }
/* Plot inputlarını ve butonu yarı genişlikte tut */
.utility-modal[data-utility-type="scientific-calculator"] .plot-grid #sciPlotExpr { grid-column: auto !important; }
.utility-modal[data-utility-type="scientific-calculator"] #sciPlotExpr2 { grid-column: auto !important; }
.utility-modal[data-utility-type="scientific-calculator"] .eval-block { margin-top: 12px; padding: 10px; background: rgba(255,255,255,0.05); border-radius: 8px; }
.utility-modal[data-utility-type="scientific-calculator"] .eval-block label { display:block; margin-bottom:6px; }
.utility-modal[data-utility-type="scientific-calculator"] .eval-block .row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  align-items: center;
}
.utility-modal[data-utility-type="scientific-calculator"] .eval-block .row > * {
  min-width: 0 !important;
  flex: 0 0 calc(50% - 3px) !important;
  max-width: calc(50% - 3px) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.utility-modal[data-utility-type="scientific-calculator"] #sciFuncName,
.utility-modal[data-utility-type="scientific-calculator"] #sciFuncParams,
.utility-modal[data-utility-type="scientific-calculator"] #sciFuncExpr {
  width: 56px !important;
  max-width: 56px !important;
}
.utility-modal[data-utility-type="scientific-calculator"] #sciPlotExpr,
.utility-modal[data-utility-type="scientific-calculator"] #sciXMin,
.utility-modal[data-utility-type="scientific-calculator"] #sciXMax,
.utility-modal[data-utility-type="scientific-calculator"] #sciYMin,
.utility-modal[data-utility-type="scientific-calculator"] #sciYMax,
.utility-modal[data-utility-type="scientific-calculator"] #sciSamples {
  flex: 0 0 calc(35% - 3px) !important;
  max-width: calc(35% - 3px) !important;
  width: 100% !important;
}
.utility-modal[data-utility-type="scientific-calculator"] #sciPlotColor,
.utility-modal[data-utility-type="scientific-calculator"] #sciPlotColor2 {
  width: 16px !important;
}
.utility-modal[data-utility-type="scientific-calculator"] #sciPlotLineWidth,
.utility-modal[data-utility-type="scientific-calculator"] #sciPlotPointSize,
.utility-modal[data-utility-type="scientific-calculator"] #sciPlotLineWidth2,
.utility-modal[data-utility-type="scientific-calculator"] #sciPlotPointSize2 {
  width: 32px !important;
  max-width: 32px !important;
}
.utility-modal.modal-theme-health .therapy-warning-ribbon {
  border-color: rgba(255, 83, 83, 0.45);
  background: linear-gradient(90deg, rgba(255,83,83,0.24), rgba(255,83,83,0.08));
  color: #ff6b6b;
}
.utility-modal .therapy-warning-ribbon i {
  font-size: 14px;
}

/* --- Coffee Ratio + TDS modal: compact ratio buttons only in this modal --- */
.utility-modal .coffee-ratio-tds .mt-btn,
.utility-modal .coffee-ratio-tds .ratio-btn {
  padding: 5px !important;
  font-size: 0.92rem !important;
  line-height: 1.12 !important;
  border-radius: 6px !important;
  min-height: 0 !important;
  width: auto !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  max-width: max-content !important;
  justify-self: start !important;
  align-self: center !important;
}

/* Coffee modal: compact the primary compute button too */
.utility-modal .coffee-ratio-tds .generate-btn#cfComputeBtn,
.utility-modal .coffee-ratio-tds .generate-btn {
  padding: 5px !important;
  font-size: 0.92rem !important;
  line-height: 1.12 !important;
  border-radius: 6px !important;
  min-height: 0 !important;
  width: auto !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  max-width: max-content !important;
}

/* Therapy modal: align summary/benefits/warnings/sources in two-column grid */
.utility-modal .therapy-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}
.utility-modal .therapy-grid label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.utility-modal .therapy-grid textarea.utility-input {
  width: 100%;
  min-height: 140px;
}
@media (max-width: 540px) {
  .utility-modal .therapy-grid { grid-template-columns: 1fr; }
}

/* Generic two-column grid for photo info and similar modals */
.utility-modal .two-col-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}
.utility-modal .two-col-grid label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.utility-modal .two-col-grid .utility-input[type="text"],
.utility-modal .two-col-grid textarea.utility-input,
.utility-modal .two-col-grid input.utility-input {
  width: 100%;
}
.utility-modal .two-col-grid textarea.utility-input {
  min-height: 130px;
}
@media (max-width: 540px) {
  .utility-modal .two-col-grid { grid-template-columns: 1fr; }
}

/* --- Final overrides removed per user request --- */

/* Generic dropdown/popup layering inside utility modal */
.utility-modal { z-index: 10000; }
.utility-modal .dropdown,
.utility-modal .dropdown-menu,
.utility-modal .popup,
.utility-modal .menu,
.utility-modal .autocomplete-list,
.utility-modal .select-menu {
  position: absolute;
  z-index: 10001;
  max-width: calc(100% - 12px);
  overflow: auto;
}

/* --- Header Save button: 30% smaller text (global override) --- */
.utility-modal .modal-toolbar .mt-btn {
  font-size: calc(0.9em * 0.7) !important; /* ~0.63em */
  white-space: nowrap !important;
  min-width: max-content;
}

/* --- Modal title: 30% smaller across all utility modals --- */
.utility-modal .modal-header h2,
.utility-modal #modal-title {
  font-size: calc((1.25em + 3pt) * 0.7) !important;
  line-height: 1.1 !important;
}

/* === Equal controls & alignment pack (reversible override) === */
.utility-modal {
  --control-width: 200px;
  --popup-width: 240px;
  --gap: 6px;
}

/* Grey input labels top-left with 2px gap — exclude periodic table */
.utility-modal:not([data-utility-type="science-periodic-table"]) .modal-body label {
  color: #cfcfcf !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  gap: 2px !important;
  margin-bottom: 0 !important; /* ensure exact 2px gap via sibling margin */
}
.utility-modal:not([data-utility-type="science-periodic-table"]) .modal-body label > :is(input, select, textarea) {
  align-self: flex-start !important;
}
.utility-modal:not([data-utility-type="science-periodic-table"]) .modal-body label + :is(input, select, textarea),
.utility-modal:not([data-utility-type="science-periodic-table"]) .modal-body label + * :is(input, select, textarea) {
  margin-top: 2px !important; /* exact vertical gap between label and control */
}
/* Align labels and common groups horizontally & vertically, keep min 5-6px gap */
.utility-modal .modal-body label {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap);
  white-space: normal;
  overflow-wrap: anywhere;
  margin-bottom: 0 !important; /* Seçenek A: label→input boşluğu sadece 2px olacak */
}
.utility-modal .modal-body :is(.form-group, .control-row) {
  margin-bottom: 32px !important; /* satırlar arası 32px aralık konteyner üzerinden */
}
/* Utility-col: remove forced group spacing, keep original layout */
/* Equal width/height for text inputs and selects */
.utility-modal .modal-body :is(input[type="text"], input[type="number"], input[type="email"], input[type="tel"], select) {
  width: min(100%, var(--control-width)) !important;
  max-width: var(--control-width) !important;
  min-width: 0 !important;
  height: 32px !important;
  box-sizing: border-box !important;
}
/* Textareas: shorten horizontally but keep reasonable height */
.utility-modal .modal-body textarea.utility-input,
.utility-modal .modal-body textarea {
  max-width: var(--control-width) !important;
  width: min(100%, var(--control-width)) !important;
  min-height: 90px !important;
  box-sizing: border-box !important;
}
/* Buttons: equal width/height and centered content */
.utility-modal .modal-body :is(.mt-btn, .generate-btn, button) {
  max-width: var(--control-width) !important;
  width: min(100%, var(--control-width)) !important;
  min-width: 0 !important;
  min-height: 34px !important;
  height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
/* Checkboxes: vertical middle and consistent gap with label */
.utility-modal input[type="checkbox"] { vertical-align: middle !important; width: 14px !important; height: 14px !important; }
.utility-modal .checkbox,
.utility-modal label {
  display: inline-flex;
  align-items: center;
  gap: var(--gap);
}
/* Popup/select menus: shorten horizontally to equal width */
.utility-modal :is(.dropdown-menu, .popup, .select-menu) {
  max-width: min(var(--popup-width), calc(100% - 12px)) !important;
  width: min(100%, var(--popup-width)) !important;
}

/* Containment & long text handling inside modal */
.utility-modal .modal-content,
.utility-modal .modal-body {
  box-sizing: border-box;
  max-width: 100%;
}
.utility-modal .modal-body { overflow-x: hidden; }
.utility-modal .modal-body p,
.utility-modal .modal-body pre,
.utility-modal .modal-body code,
.utility-modal .modal-body .output,
.utility-modal .modal-body .result,
.utility-modal .modal-body .result-text,
.utility-modal .modal-body .preview,
.utility-modal .modal-body .display {
  max-inline-size: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.utility-modal .modal-body img,
.utility-modal .modal-body canvas,
.utility-modal .modal-body svg {
  max-width: 100%;
  height: auto;
}

/* Button rows align neatly with equal spacing */
.utility-modal .form-actions,
.utility-modal .actions-row,
.utility-modal .button-row,
.utility-modal .modal-footer {
  display: flex;
  align-items: center;
  gap: var(--gap);
  flex-wrap: wrap;
}
.utility-modal .form-actions > *,
.utility-modal .actions-row > *,
.utility-modal .button-row > *,
.utility-modal .modal-footer > * {
  flex: 1 1 0 !important; /* eşit paylaştır, genişliğini max 200px ile sınırlı tut */
  max-width: var(--control-width) !important;
}
.utility-modal .modal-body .mt-btn + .mt-btn,
.utility-modal .modal-body .generate-btn + .generate-btn { margin-left: 0; }

/* Özel düzen: MTV 2026 (tax-calculator) ve Köprü/Otoyol Ceza (toll-fine-calculator)
   modallarında yazıları sıkıştırmadan yatay sığdır, girişleri dört satıra yay. */
.utility-modal[data-utility-type="tax-calculator"] .modal-content,
.utility-modal[data-utility-type="toll-fine-calculator"] .modal-content {
  width: min(95vw, 720px);
  max-width: 720px;
}

.utility-modal[data-utility-type="tax-calculator"],
.utility-modal[data-utility-type="toll-fine-calculator"] {
  font-size: clamp(0.85rem, 1.8cqw, 1rem);
}

/* Satır kapsayıcıları: kart benzeri blok ve 4 satırlı yerleşim */
.utility-modal[data-utility-type="tax-calculator"] #tax_rows,
.utility-modal[data-utility-type="toll-fine-calculator"] #tf_rows {
  display: grid;
  gap: 10px;
}

.utility-modal[data-utility-type="tax-calculator"] .tax_row,
.utility-modal[data-utility-type="toll-fine-calculator"] .tf_row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: auto;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border-color, #ddd);
  border-radius: 8px;
  background: var(--card-bg, rgba(0,0,0,0.02));
}

.utility-modal[data-utility-type="tax-calculator"] .tax_row .field,
.utility-modal[data-utility-type="toll-fine-calculator"] .tf_row .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0; /* İçerik kırpılmadan esnesin */
}

/* 4 satırlı yerleşim tanımları */
.utility-modal[data-utility-type="tax-calculator"] .tax_row .field.tagcat { grid-column: 1 / 3; }
.utility-modal[data-utility-type="tax-calculator"] .tax_row .field.desc    { grid-column: 1 / 4; }
.utility-modal[data-utility-type="tax-calculator"] .tax_row .field.amounts { grid-column: 1 / 3; }
.utility-modal[data-utility-type="tax-calculator"] .tax_row .field.options { grid-column: 3 / 4; align-self: end; }
.utility-modal[data-utility-type="tax-calculator"] .tax_row .outputs       { grid-column: 1 / 4; }

.utility-modal[data-utility-type="toll-fine-calculator"] .tf_row .field.tagline { grid-column: 1 / 4; }
.utility-modal[data-utility-type="toll-fine-calculator"] .tf_row .field.desc    { grid-column: 1 / 4; }
.utility-modal[data-utility-type="toll-fine-calculator"] .tf_row .field.inputs  { grid-column: 1 / 3; }
.utility-modal[data-utility-type="toll-fine-calculator"] .tf_row .outputs       { grid-column: 3 / 4; align-self: end; }

/* Tam genişlik ve metin sarımı */
.utility-modal[data-utility-type="tax-calculator"] .tax_row input,
.utility-modal[data-utility-type="tax-calculator"] .tax_row select,
.utility-modal[data-utility-type="toll-fine-calculator"] .tf_row input,
.utility-modal[data-utility-type="toll-fine-calculator"] .tf_row select,
.utility-modal[data-utility-type="toll-fine-calculator"] .tf_row textarea {
  width: 100%;
}

.utility-modal[data-utility-type="tax-calculator"] .tax_row label,
.utility-modal[data-utility-type="toll-fine-calculator"] .tf_row label {
  white-space: normal;
  word-break: break-word;
}

/* Çıktı kutuları */
.utility-modal[data-utility-type="tax-calculator"] .tax_row .outputs,
.utility-modal[data-utility-type="toll-fine-calculator"] .tf_row .outputs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}

.utility-modal[data-utility-type="tax-calculator"] .tax_row .out-box,
.utility-modal[data-utility-type="toll-fine-calculator"] .tf_row .out-box {
  border: 1px dashed var(--border-color, #ddd);
  border-radius: 6px;
  padding: 8px;
}

/* Küçük ekran uyumu */
@media (max-width: 600px) {
  .utility-modal[data-utility-type="tax-calculator"] .modal-content,
  .utility-modal[data-utility-type="toll-fine-calculator"] .modal-content {
    width: 96vw;
    max-width: none;
  }
  .utility-modal[data-utility-type="tax-calculator"],
  .utility-modal[data-utility-type="toll-fine-calculator"] {
    font-size: clamp(0.78rem, 3.2vw, 0.95rem);
  }
}
/* --- Bilim/teknik modallar için sağa hizalama ve eşit genişlik (modal-theme-yellow) --- */
/* Etiket ve girişleri sağa hizala; metinleri sağdan blokla; girişleri sabit genişlikte tut */
.utility-modal.modal-theme-yellow .utility-container .card label {
  display: block !important;
  text-align: right !important;
}

.utility-modal.modal-theme-yellow .utility-container .card label :is(input, select, textarea) {
  display: block !important; /* etiketten sonra alt satıra geç */
  width: 160px !important; /* eşit yatay uzunluk: 160px */
  max-width: 100% !important;
  min-width: 0 !important;
  margin-inline: auto !important; /* yatayda ortala */
  text-align: center !important; /* giriş içi metni ortala */
  box-sizing: border-box !important;
}

/* Eşitlik kuralını mobilde taşma olmaması için 100% yap */
@media (max-width: 600px) {
  .utility-modal.modal-theme-yellow .utility-container .card label :is(input, select, textarea) {
    width: 100% !important;
  }
}

/* Etiketlerin tek satırda sıkışmasını önle, çok uzun başlıklarda metin kırılabilsin */
.utility-modal.modal-theme-yellow .utility-container .card label {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

/* Bu temadaki diğer tekil girişler (etiket içinde olmayanlar) için de sağa hizalama ve eşit genişlik uygula */
.utility-modal.modal-theme-yellow .modal-body :is(input[type="text"], input[type="number"], input[type="email"], input[type="tel"], input[type="date"], select, textarea) {
  width: 160px !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-inline: auto !important;
  text-align: center !important;
  box-sizing: border-box !important;
}
@media (max-width: 600px) {
  .utility-modal.modal-theme-yellow .modal-body :is(input[type="text"], input[type="number"], input[type="email"], input[type="tel"], input[type="date"], select, textarea) {
    width: 100% !important;
  }
}
/* --- Genel kural: utility modallarda label üzeri metni sağa hizala, girişleri alt satırda sağa yasla --- */
.utility-modal .modal-body label {
  text-align: right;
}
.utility-modal .modal-body label :is(input.utility-input, select, textarea, input[type="text"], input[type="number"], input[type="email"], input[type="tel"], input[type="date"], input[type="password"], input[type="range"]) {
  display: block;
  width: 160px !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-left: auto !important;
  text-align: center !important;
  box-sizing: border-box !important;
}
@media (max-width: 600px) {
  .utility-modal .modal-body label :is(input.utility-input, select, textarea, input[type="text"], input[type="number"], input[type="email"], input[type="tel"], input[type="date"], input[type="password"], input[type="range"]) {
    width: 100% !important;
  }
}

/* Override: label içindeki tüm input/select/textarea için sol hizalı ve 120px sabit genişlik */
.utility-modal .modal-body label :is(input, select, textarea) {
  display: inline-block !important;
  width: 120px !important;
  max-width: 120px !important;
  min-width: 0 !important;
  text-align: left !important;
  box-sizing: border-box !important;
}

/* Tema (navigation/yellow) içindeki etiket-altı girişleri 120px ve sola hizalı yap */
.utility-modal.modal-theme-yellow .utility-container .card label :is(input, select, textarea) {
  display: inline-block !important;
  width: 120px !important;
  max-width: 120px !important;
  min-width: 0 !important;
  margin-inline: 0 !important;
  text-align: left !important;
  box-sizing: border-box !important;
}
.utility-modal.modal-theme-yellow .modal-body :is(input[type="text"], input[type="number"], input[type="email"], input[type="tel"], input[type="date"], select, textarea) {
  width: 120px !important;
  max-width: 120px !important;
  min-width: 0 !important;
  text-align: left !important;
}

/* Bearing için etiket-altı girişleri ve textarea'yı sola hizalı ve 120px yap */
.utility-modal[data-utility-type="survival-bearing-calc"] .modal-body label :is(input.utility-input, select) {
  display: inline-block !important;
  width: 120px !important;
  max-width: 120px !important;
  min-width: 0 !important;
  text-align: left !important;
}
.utility-modal[data-utility-type="survival-bearing-calc"] #br_points {
  text-align: left !important;
}

/* Global: label'ları yatay hizada tutmak için flex hizalama uygula */
.utility-modal .modal-body label {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 2px !important;
  text-align: left !important;
}
@media (max-width: 600px) {
  .utility-modal .modal-body label {
    display: block !important;
    text-align: left !important;
  }
}

/* --- İki sütunlu düzen: Bilim/teknik kart içeriğini grid ile hizala --- */
.utility-modal.modal-theme-yellow .utility-container .card {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* iki sütun */
  grid-auto-flow: row !important;
  gap: var(--gap, 8px) !important;
  align-items: start !important; /* dikey hizalama */
  justify-items: end !important; /* yatayda sağa hizala */
}
@media (max-width: 700px) {
  .utility-modal.modal-theme-yellow .utility-container .card {
    grid-template-columns: 1fr !important; /* mobilde tek sütun */
    justify-items: stretch !important;
  }
}

/* Kart içindeki sonuç ve aksiyon bloklarını tam genişlikte göster */
.utility-modal.modal-theme-yellow .utility-container .card :is(.form-actions, .actions-row, .button-row, .modal-footer, .result, .result-text, .output, .preview, .display) {
  grid-column: 1 / -1 !important;
  justify-self: stretch !important;
}

/* --- Buton ve popup menü (select) genişliklerini 160px yap ve hizala --- */
.utility-modal.modal-theme-yellow .utility-container .card button,
.utility-modal.modal-theme-yellow .utility-container .card .mt-btn,
.utility-modal.modal-theme-yellow .utility-container .card .generate-btn {
  width: 160px !important;
  max-width: 160px !important;
  min-width: 0 !important;
  justify-self: end !important; /* grid içinde sağa hizala */
  align-self: start !important;  /* dikeyde üstten hizala */
  text-align: center !important;
}

.utility-modal.modal-theme-yellow .utility-container .card select {
  width: 160px !important;
  max-width: 100% !important;
  min-width: 0 !important;
  justify-self: end !important;
  align-self: start !important;
}

/* Aksiyon satırlarında (form-actions vb.) çocukları sabit genişlikte ve sağda hizala */
.utility-modal.modal-theme-yellow .utility-container .card :is(.form-actions, .actions-row, .button-row, .modal-footer) {
  display: flex !important;
  justify-content: flex-end !important; /* yatayda sağa */
  align-items: center !important;        /* dikeyde ortala */
  gap: var(--gap, 8px) !important;
  flex-wrap: wrap !important;
}
.utility-modal.modal-theme-yellow .utility-container .card :is(.form-actions, .actions-row, .button-row, .modal-footer) > * {
  flex: 0 0 auto !important;
  width: 160px !important;
  max-width: 160px !important;
}

/* --- Genel: Tüm utility modallarda kart içeriklerini iki sütunlu grid ve sağ hizalama --- */
.utility-modal .utility-container .card {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-flow: row dense !important;
  gap: var(--gap, 12px) !important;
  row-gap: var(--row-gap, 12px) !important;
  align-items: start !important;
  justify-items: center !important;
}
@media (max-width: 700px) {
  .utility-modal .utility-container .card {
    grid-template-columns: 1fr !important;
    justify-items: stretch !important;
  }
}
/* Kart içindeki sonuç/aksiyon/önizleme bloklarını tam genişlikte hizala */
.utility-modal .utility-container .card :is(.form-actions, .actions-row, .button-row, .modal-footer, .result, .result-text, .output, .preview, .display) {
  grid-column: 1 / -1 !important;
  justify-self: stretch !important;
}
/* Kartlarda dikey aralık: periyodik tablo hariç 32px satır aralığı */
.utility-modal:not([data-utility-type="science-periodic-table"]) .utility-container .card {
  --row-gap: 32px;
  row-gap: 32px !important;
}

/* QR 9 Tip: iki sütun düzeni, 40px boşluk ve hizalama */
.utility-modal[data-utility-type="qr-multi-generator"] .utility-container {
  --gap: 20px;
  --row-gap: 20px;
}
.utility-modal[data-utility-type="qr-multi-generator"] .qr9-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
  width: 100%;
}
.utility-modal[data-utility-type="qr-multi-generator"] .qr9-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(200px, 1fr));
  column-gap: 20px !important;
  row-gap: 20px;
  align-items: start;
  width: 100%;
}
.utility-modal[data-utility-type="qr-multi-generator"] .qr9-top-grid {
  display: grid !important;
  grid-template-columns: max-content max-content max-content !important;
  column-gap: 20px !important;
  row-gap: 20px !important;
  gap: 20px !important;
  justify-content: start !important;
}
.utility-modal[data-utility-type="qr-multi-generator"] .qr9-top-grid > label {
  width: max-content !important;
}
.utility-modal[data-utility-type="qr-multi-generator"] .qr9-form-grid > label {
  width: 100%;
  min-width: 0;
}
.utility-modal[data-utility-type="qr-multi-generator"] .qr9-form-grid label :is(input, select, textarea) {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  text-align: left !important;
}
.utility-modal[data-utility-type="qr-multi-generator"] .qr9-preview-card {
  grid-column: 1 / -1;
}
.utility-modal[data-utility-type="qr-multi-generator"] .qr9-full {
  grid-column: 1 / -1;
}
.utility-modal[data-utility-type="qr-multi-generator"] .utility-container .card {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  justify-items: stretch !important;
}
.utility-modal[data-utility-type="qr-multi-generator"] .utility-container label {
  align-items: flex-start;
}
.utility-modal[data-utility-type="qr-multi-generator"] #qr9Type {
  width: 150px !important;
  max-width: 150px !important;
  min-width: 150px !important;
}
.utility-modal[data-utility-type="qr-multi-generator"] #qr9Size,
.utility-modal[data-utility-type="qr-multi-generator"] #qr9Ecc {
  width: 60px !important;
  max-width: 60px !important;
  min-width: 60px !important;
}
.utility-modal[data-utility-type="qr-multi-generator"] #qr9Fg,
.utility-modal[data-utility-type="qr-multi-generator"] #qr9Bg {
  width: 40px !important;
  max-width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
}


/* QR 9 Tip: Metin alanları için 200px boyut */
.utility-modal[data-utility-type="qr-multi-generator"] textarea.utility-input {
  width: 200px !important;
  height: 200px !important;
  min-width: 200px !important;
  min-height: 200px !important;
  max-width: 200px !important;
  max-height: 200px !important;
  resize: both !important;
}
.utility-modal[data-utility-type="qr-multi-generator"] #qr9Email,
.utility-modal[data-utility-type="qr-multi-generator"] #qr9EmailSubject,
.utility-modal[data-utility-type="qr-multi-generator"] #qr9SmsBody,
.utility-modal[data-utility-type="qr-multi-generator"] #qr9VEmail,
.utility-modal[data-utility-type="qr-multi-generator"] #qr9Text,
.utility-modal[data-utility-type="qr-multi-generator"] #qr9EmailBody,
.utility-modal[data-utility-type="qr-multi-generator"] #qr9EventDesc {
  width: 200px !important;
  max-width: 200px !important;
  min-width: 200px !important;
}
.utility-modal[data-utility-type="qr-multi-generator"] #qr9VAddr {
  width: 320px !important;
  max-width: 320px !important;
  min-width: 320px !important;
  height: 140px !important;
}

/* QR 9 Tip: Butonlar için özel stiller */
.utility-modal[data-utility-type="qr-multi-generator"] .actions-row {
  display: grid !important;
  grid-template-columns: repeat(4, max-content) !important;
  gap: 12px !important;
  justify-content: center !important;
  align-items: center !important;
  justify-items: center !important;
}
.utility-modal[data-utility-type="qr-multi-generator"] .actions-row > * {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 6px 10px !important;
  line-height: 1 !important;
  text-align: center !important;
  border: none !important;
  box-shadow: none !important;
  background: #1f1f1f !important;
  color: #eee !important;
  border-radius: 8px !important;
}

/* Konvektif h Katsayısı: kartta tam iki sütun ve iki bloklu (üstte etiket, altta input) düzen */
.utility-modal[data-utility-type="convective-h-coefficient"] .utility-container .card {
  grid-template-columns: repeat(2, minmax(220px, 1fr)) !important;
}
.utility-modal[data-utility-type="convective-h-coefficient"] .modal-body label {
  display: flex !important;
  flex-direction: column !important; /* etiket üstte, input altta */
  align-items: flex-start !important;
  gap: 2px !important; /* fotoğraftaki gibi 2px boşluk */
  text-align: left !important;
}
/* Bu modalda input genişliğini sütunu dolduracak şekilde ayarla */
.utility-modal[data-utility-type="convective-h-coefficient"] .utility-container .card :is(input[type="text"], input[type="number"], select, textarea) {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* Tüm Bilim modalları için ortak iki bloklu düzen (etiket üstte, input altta) */
.utility-modal .science-card {
  grid-template-columns: repeat(2, minmax(220px, 1fr)) !important;
}
.utility-modal .science-card label {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px !important;
  text-align: left !important;
}
.utility-modal .science-card :is(input[type="text"], input[type="number"], select, textarea) {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
/* Popup/dropdown/select menüler: sütunla aynı genişlikte ve taşma olmadan */
.utility-modal .science-card :is(.dropdown-menu, .popup, .select-menu) {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
/* Butonlar ve select menüler: 160px genişlik ve sağ/üst hizalama */
.utility-modal .utility-container .card button,
.utility-modal .utility-container .card .mt-btn,
.utility-modal .utility-container .card .generate-btn,
.utility-modal .utility-container .card .convert-btn,
.utility-modal .utility-container .card .calc-btn {
  width: min(160px, 100%) !important; /* kısa ve taşmadan */
  max-width: 160px !important;
  min-width: 0 !important;
  justify-self: end !important;      /* kart içinde sağa hizala */
  align-self: end !important;
  text-align: center !important;
  height: 34px !important;
  min-height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.utility-modal .utility-container .card select {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  justify-self: stretch !important;
  align-self: center !important;
  height: 32px !important;
}
/* Aksiyon satırları: sağa hizalı, sabit genişlikli çocuklar */
.utility-modal .utility-container .card :is(.form-actions, .actions-row, .button-row, .modal-footer) {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: var(--gap, 8px) !important;
  flex-wrap: wrap !important;
}
.utility-modal .utility-container .card :is(.form-actions, .actions-row, .button-row, .modal-footer) > * {
  flex: 0 0 auto !important;
  width: 160px !important;
  max-width: 160px !important;
}
/* Etiket yazısı: uzun metinlerde satır kır ve taşmayı önle */
.utility-modal .utility-container .card label {
  white-space: normal !important;
  word-break: break-word !important;
}
/* Kart içindeki tipik girişleri 160px yap ve sağa hizala (mobilde %100) */
.utility-modal .utility-container .card :is(input[type="text"], input[type="number"], input[type="email"], input[type="tel"], input[type="date"], select, textarea) {
  width: 100% !important;   /* sütunu tamamen doldur */
  max-width: 100% !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  justify-self: stretch !important;
  text-align: left !important;
  box-sizing: border-box !important;
}
/* Girdi yüksekliklerini butonla eşitle (textarea hariç) */
.utility-modal .utility-container .card :is(input[type="text"], input[type="number"], input[type="email"], input[type="tel"], input[type="date"], select) {
  height: 32px !important;
  min-height: 32px !important;
}
@media (max-width: 600px) {
  .utility-modal .utility-container .card :is(input[type="text"], input[type="number"], input[type="email"], input[type="tel"], input[type="date"], select, textarea) {
    width: 100% !important;
  }
}

/* Bilim kayıt defteri modallarında Hesapla butonunu tam satıra sabitle */
.utility-modal .utility-container .card button[id*="scienceComputeBtn"] {
  grid-column: 1 / -1 !important;
  justify-self: start !important;
}

/* Sarı temalı modallarda kart içi boşlukları eşitle ve hizalamayı düzelt */
.utility-modal.modal-theme-yellow .utility-container .card {
  gap: 12px !important;
  row-gap: 12px !important;
  align-items: start !important;
  justify-items: center !important;
}

/* Hesapla butonunu mavi yap ve durumlarını belirginleştir */
.utility-modal .utility-container .card button[id*="scienceComputeBtn"] {
  background: #3b82f6 !important;
  border-color: #3b82f6 !important;
  color: #fff !important;
}
.utility-modal .utility-container .card button[id*="scienceComputeBtn"]:hover,
.utility-modal .utility-container .card button[id*="scienceComputeBtn"]:focus {
  background: #3b82f6 !important;
  color: #fff !important;
  box-shadow: 0 0 0 2px rgba(59,130,246,0.35) inset !important;
}

/* Basit modallar (card kullanılmayanlar) için dikey ayrım ve eş genişlik */
.utility-modal .utility-container > * + * { margin-top: 8px !important; }
.utility-modal .utility-container > :is(input[type="text"], input[type="number"], select, textarea) {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 32px !important;
  box-sizing: border-box !important;
}
.utility-modal .utility-container > :is(button, .mt-btn, .generate-btn, .calc-btn, .convert-btn) {
  width: min(160px, 100%) !important; /* kısa ve duyarlı */
  max-width: 160px !important;
  min-width: 0 !important;
  height: 34px !important;
  margin-left: auto !important;  /* ortala */
  margin-right: auto !important;
}
.utility-modal .utility-container .card button[id*="scienceComputeBtn"]:active {
  background: #2b6fe0 !important;
  border-color: #2b6fe0 !important;
}
/* Guide sections final override: modalı büyütmeden sekme butonlarını küçült ve sığdır */
.utility-modal .guide-sections .converter-tabs {
  max-width: 100% !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 3px !important;
}
.utility-modal .guide-sections .converter-tabs .generate-btn,
.utility-modal .guide-sections .converter-tabs .tab-btn {
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  font-size: 0.86rem !important;
  padding: 2px 6px !important;
  line-height: 1.10 !important;
  height: auto !important;
  min-height: 22px !important;
  white-space: normal !important;
  word-break: break-word !important;
  text-align: center !important;
}
/* Tabs: tek satır ve en kısa yükseklik uyumluluğu için küçük ayar */
.utility-modal .guide-sections .converter-tabs .tab-btn{
  white-space: nowrap;
  padding-top: 0;
  padding-bottom: 0;
}

/* --- Bearing Hesabı: etiket ve girişleri tek satırda yatay hizala --- */
.utility-modal[data-utility-type="survival-bearing-calc"] .modal-body label {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  text-align: left !important;
  margin-bottom: 0 !important; /* Seçenek A: label alt boşluğunu sıfırla */
}
.utility-modal[data-utility-type="survival-bearing-calc"] .modal-body label :is(input.utility-input, select) {
  display: inline-block !important;
  width: clamp(140px, 32%, 180px) !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  text-align: center !important;
}

/* Bearing Hesabı: label sonrası gelen input/select genişliklerini kısalt ve yan yana tut */
.utility-modal[data-utility-type="survival-bearing-calc"] .modal-body label + :is(input[type="text"], input[type="number"], select, textarea) {
  width: clamp(140px, 40%, 240px) !important;
  max-width: 240px !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
}

/* (Removed) Survival Bearing vertical override: revert to original modal’s layout */

/* Afet Hijyeni: grid hücrelerinde label + input/select yan yana, dengeli hizala */
.utility-modal[data-utility-type="hygiene-in-disasters"] .modal-body .utility-container > div {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: var(--gap) !important;
}
.utility-modal[data-utility-type="hygiene-in-disasters"] .modal-body .utility-container > div label {
  flex: 1 1 auto !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
}
.utility-modal[data-utility-type="hygiene-in-disasters"] .modal-body .utility-container > div :is(input, select, textarea) {
  width: 120px !important;
  max-width: 120px !important;
  min-width: 0 !important;
  flex: 0 0 120px !important;
  font-size: 0.85em !important;
  line-height: 1.2 !important;
  text-align: left !important;
}

/* --- Afet Hijyeni: grid kolonlarını auto-fit ile düzelt ve alanları hizala --- */
.utility-modal[data-utility-type="hygiene-in-disasters"] .utility-container > div[style*="grid-template-columns"] {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 12px !important;
}
.utility-modal[data-utility-type="hygiene-in-disasters"] .utility-container > div label {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  color: #ddd !important;
}
.utility-modal[data-utility-type="hygiene-in-disasters"] .utility-container > div :is(input, select, textarea) {
  width: 100% !important;
  box-sizing: border-box !important;
}
.utility-modal[data-utility-type="hygiene-in-disasters"] .utility-container .card label {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.utility-modal[data-utility-type="hygiene-in-disasters"] .utility-container .card label input[type="checkbox"] {
  flex: 0 0 auto !important;
}
/* Tabs: tek satır, ellipsis ve eşit kısa yükseklik */
.utility-modal .guide-sections .converter-tabs .tab-btn,
.utility-modal .guide-sections .converter-tabs .generate-btn{
  height: 18px;
  min-height: 18px;
  line-height: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-top: 0;
  padding-bottom: 0;
}

/* --- Global dikey yazı düzeltme: tüm modallarda metinleri yatay yazı moduna zorla --- */
.utility-modal .modal-body :is(label, .form-group, .control-row, .utility-label) {
  writing-mode: horizontal-tb !important;
  transform: none !important;
}

/* --- Global input/textarea küçültme ve sol-üst hizalama (2px) --- */
.utility-modal .modal-body :is(input[type="text"], input[type="number"], input[type="email"], input[type="tel"], input[type="date"], input[type="time"], input[type="url"]) {
  width: 120px !important;
  max-width: 120px !important;
  min-width: 0 !important;
  height: 32px !important;
  min-height: 32px !important;
  font-size: 1.2rem !important; /* kullanıcı talebi: 1.2rem */
  line-height: 1.2rem !important; /* metni dikeyde üste çek */
  text-align: left !important;
  padding-left: 0 !important; /* sol tarafta bloklu hizalama */
  padding-top: 2px !important; /* sol-üstte 2px boşluk */
  padding-bottom: 0 !important;
  text-indent: 0 !important;
  display: inline-block !important;
  box-sizing: border-box !important;
}
/* Select’ler metni ortalı tutsun; yükseklik 32px olarak kalır */
.utility-modal .modal-body select {
  width: 120px !important;
  max-width: 120px !important;
  min-width: 0 !important;
  height: 32px !important;
  min-height: 32px !important;
  font-size: 1.2rem !important;
  line-height: 32px !important;
  text-align: left !important;
  padding-left: 0 !important; /* sol tarafta bloklu hizalama */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: inline-block !important;
  box-sizing: border-box !important;
}
.utility-modal .modal-body textarea {
  width: 120px !important;
  max-width: 120px !important;
  min-width: 0 !important;
  min-height: 80px !important;
  font-size: 1.2rem !important; /* kullanıcı talebi: 1.2rem */
  line-height: 1.2 !important;
  text-align: left !important;
  padding-top: 2px !important;
  padding-left: 0 !important; /* sol tarafta bloklu hizalama */
  padding-right: 4px !important;
  padding-bottom: 0 !important;
  display: inline-block !important;
  box-sizing: border-box !important;
}
.utility-modal .modal-body :is(input, textarea)::placeholder {
  font-size: 0.8em !important; /* placeholder da küçülsün */
  opacity: 0.85 !important;
}

/* Label ve grup hizalama: solda metin, sağda kısa giriş; modal genişliği sabit kalır */
.utility-modal .modal-body label {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 2px !important;
  text-align: left !important;
  margin-bottom: 0 !important; /* Seçenek A: label→input boşluğu 2px olacak şekilde ayarla */
}
.utility-modal .modal-body label :is(input, select, textarea) {
  flex: 0 0 auto !important;
  display: inline-block !important;
}

/* Evrensel select kısaltma ve flex-basis ayarı */
.utility-modal .modal-body select {
  width: 120px !important;
  max-width: 120px !important;
  min-width: 0 !important;
  flex: 0 0 120px !important;
  display: inline-block !important;
}

/* Label doğrudan çocuğu olan girdileri kesin 120px genişliğe zorla ve flex-basis ayarla */
.utility-modal .modal-body label > input.utility-input,
.utility-modal .modal-body label > select,
.utility-modal .modal-body label > textarea {
  width: 120px !important;
  max-width: 120px !important;
  min-width: 0 !important;
  flex: 0 0 120px !important;
  display: inline-block !important;
}

/* --- Tipografi güncellemeleri: input metni büyüt, label açıklamayı küçült --- */
/* Input, select ve textarea içindeki yazıyı %80 büyüt */
.utility-modal .modal-body input,
.utility-modal .modal-body select,
.utility-modal .modal-body textarea {
  font-size: 1.2rem !important; /* kullanıcı talebi: 1.2rem */
}

/* Yüksek özgüllük: label içindeki utility-input sınıfına doğrudan uygula */
.utility-modal .modal-body label > input.utility-input,
.utility-modal .modal-body input.utility-input {
  font-size: 1.2rem !important; /* kullanıcı talebi: 1.2rem */
}

/* Label açıklama metnini %30 küçült, açık gri renk ve condensed tip */
.utility-modal .modal-body label {
  font-size: 0.7rem !important;
  color: #cfcfcf !important; /* açık gri */
  font-stretch: condensed; /* yataydan kısa görünüm */
  letter-spacing: -0.01em; /* hafif sıkıştırma */
}

/* Label dışındaki genel girdiler için de güçlü kısaltma uygula */
.utility-modal .modal-body :is(input, select, textarea).utility-input,
.utility-modal .modal-body > :is(input, select, textarea) {
  width: 120px !important;
  max-width: 120px !important;
  min-width: 0 !important;
  flex: 0 0 120px !important;
  display: inline-block !important;
}

/* Son aşama override: Bilim periyodik tablo haricindeki tüm input/select yüksekliğini 28px'e sabitle */
.utility-modal:not([data-utility-type="science-periodic-table"]) :is(input, select) {
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  box-sizing: border-box !important;
  align-self: center !important;
  overflow: hidden !important;
}

/* Dikey hizalama: input metni üstte dursun (textarea hariç) */
.utility-modal:not([data-utility-type="science-periodic-table"]) :is(input[type="text"], input[type="number"], input[type="date"], input[type="time"], input[type="email"], input[type="search"], input[type="tel"]) {
  line-height: 1.2rem !important;
}
.utility-modal:not([data-utility-type="science-periodic-table"]) select {
  line-height: 32px !important;
}

/* Utility input özel durumu: üst/alt dolgu simetrik tutarak daha iyi hizalama */
.utility-modal .utility-input:is(input, select) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  align-self: center !important; /* grid stretching etkisini azalt */
}

/* Ek son aşama override: .utility-input sınıfında da 2px üst boşluk kullan */
.utility-modal:not([data-utility-type="science-periodic-table"]) input.utility-input {
  height: 32px !important;
  min-height: 32px !important;
  line-height: 1.2rem !important;
  padding-top: 2px !important;
  padding-bottom: 0 !important;
  box-sizing: border-box !important;
}
.utility-modal:not([data-utility-type="science-periodic-table"]) select.utility-input {
  height: 32px !important;
  min-height: 32px !important;
  line-height: 32px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  box-sizing: border-box !important;
}

/* Compact modallar için tutarlı 2px üst boşluk (input); select ortalı kalsın */
.utility-modal.compact-inputs input:not([type="checkbox"]):not([type="radio"]) {
  height: 32px !important;
  min-height: 32px !important;
  line-height: 1.2rem !important;
  padding-top: 2px !important;
  padding-bottom: 0 !important;
}
.utility-modal.compact-inputs select:not([type="checkbox"]):not([type="radio"]) {
  height: 32px !important;
  min-height: 32px !important;
  line-height: 32px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Textarea'ları da evrensel olarak kısalt (liste ve not alanları dahil) */
.utility-modal .modal-body textarea {
  width: 120px !important;
  max-width: 120px !important;
  min-width: 0 !important;
  display: inline-block !important;
}

/* Bearing Hesabı: br_points alanını da kısalt */
.utility-modal[data-utility-type="survival-bearing-calc"] #br_points {
  width: 120px !important;
  max-width: 120px !important;
  display: inline-block !important;
  flex: 0 0 120px !important;
  padding: 2px 4px !important;
  font-size: 0.85em !important;
}

/* Script.js’de tanımlı .utility-textarea varsayılan dolgusunu küçült */
.utility-modal .modal-body .utility-textarea {
  padding: 2px 4px !important;
  font-size: 0.85em !important;
}

/* Seçili textarea’larda inline-block zorlaması (hedefli kullanım için) */
.utility-modal .modal-body textarea.utility-textarea,
.utility-modal .modal-body textarea[id*="points"],
.utility-modal .modal-body textarea[id*="note"] {
  display: inline-block !important;
}

/* Küçük ekran geri dönüşü: tüm giriş/seçim/textarea genişliğini %100 yap */
@media (max-width: 600px) {
  .utility-modal .modal-body :is(input, select, textarea) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }
}
/* Global override: tüm modallarda input/select/textarea metni %30 küçült */
.modal .modal-content .modal-body :is(input, select, textarea),
.utility-modal .modal-content .modal-body :is(input, select, textarea) {
  font-size: 1.2rem !important; /* kullanıcı talebi: 1.2rem */
}
/* ===== Modal label alignment (top-left) with 2px gap — rollback ready ===== */
.utility-modal .modal-content .modal-body label,
.modal .modal-content .modal-body label,
body .utility-modal .modal-content .modal-body label {
  display: flex; /* stack label text above control */
  flex-direction: column !important;
  align-items: flex-start !important; /* left align */
  gap: 2px !important; /* requested 2px space between text and control */
  row-gap: 2px !important; /* ensure row-gap explicitly */
  text-align: left !important;
  margin: 0; /* control spacing via gap/margins */
}

/* Gap when input/select/textarea are inside the label */
.utility-modal .modal-body label > input,
.utility-modal .modal-body label > select,
.utility-modal .modal-body label > textarea,
.modal .modal-body label > input,
.modal .modal-body label > select,
.modal .modal-body label > textarea {
  margin-top: 2px !important;
}

/* Gap when label is an immediate sibling before the control */
.utility-modal .modal-body label + input,
.utility-modal .modal-body label + select,
.utility-modal .modal-body label + textarea,
.modal .modal-body label + input,
.modal .modal-body label + select,
.modal .modal-body label + textarea {
  margin-top: 2px !important;
}

/* Gap when label and control are wrapped in an intermediate container */
.utility-modal .modal-body label + * input,
.utility-modal .modal-body label + * select,
.utility-modal .modal-body label + * textarea,
.modal .modal-body label + * input,
.modal .modal-body label + * select,
.modal .modal-body label + * textarea{
  margin-top: 2px !important;
}
/* ===== End: Modal label alignment block ===== */
/* Global height override: 32px for inputs/selects except periodic table */
.utility-modal:not([data-utility-type="science-periodic-table"]) .modal-body :is(input[type="text"], input[type="number"], input[type="email"], input[type="tel"], input[type="date"], select) {
  height: 32px !important;
  min-height: 32px !important;
}

/* Generic LED/Calculator Form Grid */
.utility-modal .led-form-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: 12px !important;
  row-gap: 32px !important;
  align-items: end !important;
  justify-items: start !important;
  background-color: #111111 !important;
  padding: 16px !important;
  border-radius: 8px !important;
  margin-bottom: 16px !important;
}

.utility-modal .led-form-grid .field {
  display: block !important;
  width: 100% !important;
}

.utility-modal .led-form-grid .field label {
  display: block !important;
  margin: 0 0 2px 0 !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: visible !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  max-width: none !important;
  width: auto !important;
}

.utility-modal .led-form-grid > label {
  display: block !important;
  margin: 0 0 2px 0 !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: visible !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  max-width: none !important;
  width: auto !important;
}

.utility-modal .led-form-grid .field label sub {
  font-size: 8px !important;
  line-height: 0 !important;
  vertical-align: baseline !important;
}

/* Input ve Buton Boyutları: 120x28px */
.utility-modal .led-form-grid .field :is(input[type="text"], input[type="number"], select, textarea),
.utility-modal .led-form-grid > :is(input[type="text"], input[type="number"], select, textarea),
.utility-modal .led-form-grid .led-calc-btn {
  width: 120px !important;
  max-width: 120px !important;
  min-width: 120px !important;
  height: 28px !important;
  min-height: 28px !important;
  box-sizing: border-box !important;
  padding: 0 4px !important;
  margin: 0 !important;
}

/* Buton hizalaması */
.utility-modal .led-form-grid .led-calc-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Sonuç Alanı */
.utility-modal .led-form-grid .led-result-wrapper {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  margin-top: 0 !important;
  text-align: left !important;
}

.utility-modal .led-form-grid .led-result-wrapper h3 {
    margin: 0 0 4px 0 !important;
    font-size: 1.1em !important;
}

.utility-modal .led-form-grid h3 {
    grid-column: 1 / -1 !important;
    margin: 10px 0 4px 0 !important;
    font-size: 1.1em !important;
    color: #0f0 !important;
}

.utility-modal .led-form-grid h3 + div {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    text-align: left !important;
}

.utility-modal .led-form-grid h4 { grid-column: 1 / -1 !important; margin: 0 0 10px 0 !important; color: #0f0 !important; }
.utility-modal .utility-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: start !important;
}
.utility-modal .utility-grid > * {
  min-width: 0 !important;
}
.utility-modal .utility-grid label {
  width: 100% !important;
  max-width: 100% !important;
}
.utility-modal .utility-grid :is(input, select, textarea, .utility-input) {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}
.utility-modal .utility-grid :is(.button-group, .actions-row, .button-row, .result, .result-text, .result-output, .output, .preview) {
  grid-column: 1 / -1 !important;
}

.utility-modal[data-utility-type="formula-kinematics"] .utility-container .card {
  display: block !important;
}

.utility-modal[data-utility-type="formula-kinematics"] .kin-form {
  --kin-gap: 24px;
  --kin-row-gap: 25px;
  --kin-col-w: min(170px, calc((100% - var(--kin-gap)) / 2));
  display: grid !important;
  grid-template-columns: var(--kin-col-w) var(--kin-col-w) !important;
  column-gap: var(--kin-gap) !important;
  row-gap: var(--kin-row-gap) !important;
  justify-content: center !important;
  align-items: start !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.utility-modal[data-utility-type="formula-kinematics"] .kin-card > h4 {
  color: #666 !important;
  margin-bottom: 25px !important;
}

.utility-modal[data-utility-type="formula-kinematics"] .kin-form > label {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 2px !important;
  margin: 0 !important;
}

.utility-modal[data-utility-type="formula-kinematics"] .kin-form > label > :is(input, select, textarea) {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.utility-modal[data-utility-type="formula-kinematics"] .kin-form > :is(button.generate-btn, button.convert-btn, button.mt-btn) {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  justify-self: stretch !important;
  margin: 0 !important;
}

@keyframes kinResultColorShift {
  0%   { color: #ffffff; }
  25%  { color: #ffd93d; }
  50%  { color: #ffffff; }
  75%  { color: #ff8c00; }
  100% { color: #ffffff; }
}

.utility-modal[data-utility-type="formula-kinematics"] .kin-form > .result-output {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  text-align: center !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  overflow-wrap: anywhere !important;
  animation: kinResultColorShift 2.5s linear infinite;
}

.utility-modal[data-utility-type="formula-dynamics"] .dyn-card {
  display: block !important;
}

.utility-modal[data-utility-type="formula-dynamics"] .dyn-form {
  --dyn-gap: 24px;
  --dyn-row-gap: 25px;
  --dyn-col-w: min(170px, calc((100% - var(--dyn-gap)) / 2));
  display: grid !important;
  grid-template-columns: var(--dyn-col-w) var(--dyn-col-w) !important;
  column-gap: var(--dyn-gap) !important;
  row-gap: var(--dyn-row-gap) !important;
  justify-content: center !important;
  align-items: start !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.utility-modal[data-utility-type="formula-dynamics"] .dyn-card > h4 {
  color: #666 !important;
  margin-bottom: 25px !important;
}

.utility-modal[data-utility-type="formula-dynamics"] .dyn-form > label {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 2px !important;
  margin: 0 !important;
}

.utility-modal[data-utility-type="formula-dynamics"] .dyn-form > label > :is(input, select, textarea) {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.utility-modal[data-utility-type="formula-dynamics"] .dyn-form > :is(button.generate-btn, button.convert-btn, button.mt-btn) {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  justify-self: stretch !important;
  margin: 0 !important;
}

.utility-modal[data-utility-type="formula-dynamics"] .dyn-form > .result-output {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  text-align: center !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  overflow-wrap: anywhere !important;
  animation: kinResultColorShift 2.5s linear infinite;
}

.utility-modal :is(.science-card, .science-form-card, .science-form-block) {
  --science-gap: 24px;
  --science-row-gap: 25px;
  --science-col-w: min(220px, calc((100% - var(--science-gap)) / 2));
  display: grid !important;
  grid-template-columns: var(--science-col-w) var(--science-col-w) !important;
  column-gap: var(--science-gap) !important;
  row-gap: var(--science-row-gap) !important;
  grid-auto-flow: row !important;
  justify-content: center !important;
  align-items: start !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 520px) {
  .utility-modal :is(.science-card, .science-form-card, .science-form-block) {
    grid-template-columns: 1fr !important;
    justify-content: stretch !important;
  }
}

.utility-modal :is(.science-card, .science-form-card, .science-form-block) > :is(h3, h4) {
  grid-column: 1 / -1 !important;
  color: #666 !important;
  margin-bottom: 25px !important;
}

.utility-modal :is(.science-card, .science-form-card, .science-form-block) > label {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 2px !important;
  margin: 0 !important;
}

.utility-modal :is(.science-card, .science-form-card, .science-form-block) > label > :is(input, select, textarea) {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.utility-modal :is(.science-card, .science-form-card, .science-form-block) > :is(button.generate-btn, button.convert-btn, button.mt-btn, button.calc-btn, .generate-btn, .convert-btn, .mt-btn) {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  justify-self: stretch !important;
  margin: 0 !important;
}

.utility-modal :is(.science-card, .science-form-card, .science-form-block) > .result-output {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  text-align: center !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  overflow-wrap: anywhere !important;
  animation: kinResultColorShift 2.5s linear infinite;
}

@keyframes resultWhiteYellowWhiteOrangeShift {
  0% { color: #ffffff; }
  25% { color: #ffd93d; }
  50% { color: #ffffff; }
  75% { color: #ff8c1a; }
  100% { color: #ffffff; }
}

.utility-modal:not(.no-result-anim) :is(
  .result-output,
  .result,
  .result-text,
  .output,
  .generated-output,
  .display,
  [id$="Out"],
  [id$="out"],
  [id$="Output"],
  [id$="output"],
  [id$="Result"],
  [id$="result"]
):not(input):not(select):not(button) {
  font-size: 16px !important;
  animation: resultWhiteYellowWhiteOrangeShift 2.5s linear infinite !important;
}

.utility-modal.compact-controls .modal-body :is(input, select, textarea) {
  width: 140px !important;
  max-width: 140px !important;
  min-width: 0 !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  padding: 0 6px !important;
  box-sizing: border-box !important;
  font-size: 12px !important;
  line-height: 30px !important;
  text-align: center !important;
}

.utility-modal.compact-controls .modal-body textarea {
  resize: none !important;
  overflow: auto !important;
}

.utility-modal.compact-controls :is(.dropdown-menu, .popup, .select-menu) {
  width: 140px !important;
  max-width: 140px !important;
  font-size: 12px !important;
}

.utility-modal.compact-controls .modal-body :is(
  .utility-container,
  .utility-container > [style*="display:grid"],
  .utility-container .card,
  .utility-container .card [style*="display:grid"]
) {
  column-gap: 50px !important;
}

.utility-modal.compact-controls .modal-body :is(button.generate-btn, button.convert-btn, button.mt-btn, button[id$="ComputeBtn"], button[id$="ConvertBtn"], button[id$="GenBtn"], button[id$="CreateBtn"], button[id$="EncodeBtn"], button[id$="DecodeBtn"]) {
  width: 80px !important;
  max-width: 80px !important;
  min-width: 80px !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  padding: 0 4px !important;
  font-size: 12px !important;
  line-height: 30px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  background: #00d9ff !important;
  border-color: #00d9ff !important;
  color: #001821 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.utility-modal.compact-controls .modal-body .converter-tabs :is(button, .tab-btn, .generate-btn) {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
}

.utility-modal.compact-controls .modal-body label {
  font-size: 10px !important;
  line-height: 1.2 !important;
  text-align: left !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  flex-wrap: nowrap !important;
}

.utility-modal.compact-controls .modal-body label br {
  display: none !important;
}

.utility-modal.font14-controls .modal-content .modal-body :is(input, select, textarea) {
  font-size: 14px !important;
}

.utility-modal.font14-controls .modal-content .modal-body :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  text-align: center !important;
}

.utility-modal.font14-controls:not(.compact-controls) .modal-content .modal-body :is(input:not([type="checkbox"]):not([type="radio"]), select) {
  line-height: 32px !important;
}

.utility-modal.font14-controls.compact-controls .modal-body :is(input:not([type="checkbox"]):not([type="radio"]), select) {
  line-height: 30px !important;
}

.utility-modal.font14-controls .modal-body :is(
  button.generate-btn,
  button.convert-btn,
  button.mt-btn,
  button[id$="ComputeBtn"],
  button[id$="ConvertBtn"],
  button[id$="GenBtn"],
  button[id$="CreateBtn"],
  button[id$="EncodeBtn"],
  button[id$="DecodeBtn"]
) {
  font-size: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.utility-modal.font14-controls :is(.dropdown-menu, .popup, .select-menu) {
  font-size: 14px !important;
}

.utility-modal.font14-controls :is(.dropdown-menu, .popup, .select-menu) :is(button, a, li, span, div) {
  font-size: 14px !important;
}

.utility-modal :is(.info-tabs-injected, .guide-sections) .tab-btn:is(
  [data-key="design"],
  [data-key="pitfalls"],
  [data-key="limits"],
  [data-key="standards"],
  [data-key="sim"]
) {
  font-size: 0.56rem !important;
}

.utility-modal .modal-header :is(h2, #modal-title, .modal-title) {
  color: #fff !important;
}

.utility-modal .modal-header :is(i, .modal-icon) {
  color: #fff !important;
}

/* Science calculators: hard override at end (wins cascade) */
body .utility-modal.science-two-col .modal-body .science-card.two-col-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: start !important;
}
body .utility-modal.science-two-col .modal-body .science-card.two-col-grid label {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  text-align: left !important;
  gap: 6px !important;
}
body .utility-modal.science-two-col .modal-body .science-card.two-col-grid :is(input, select, textarea) {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  box-sizing: border-box !important;
}
body .utility-modal.science-two-col .modal-body .science-card.two-col-grid .science-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
}
body .utility-modal.science-two-col .modal-body .science-card.two-col-grid .science-unit-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 96px !important;
  gap: 8px !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
body .utility-modal.science-two-col .modal-body .science-card.two-col-grid .science-unit-row.science-unit-sm {
  grid-template-columns: minmax(0, 1fr) 48px !important;
}
body .utility-modal.science-two-col .modal-body .science-card.two-col-grid .science-unit-row > input {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
body .utility-modal.science-two-col .modal-body .science-card.two-col-grid .science-unit-row > select {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
body .utility-modal.science-two-col .modal-body .science-card.two-col-grid .science-unit-row > select.science-unit-select-sm {
  width: 48px !important;
  max-width: 48px !important;
  min-width: 48px !important;
  justify-self: end !important;
  padding-left: 6px !important;
  padding-right: 18px !important;
  text-align: center !important;
}

body .utility-modal[data-utility-type="cozelti-seyreltme-hesaplayici"] .modal-body .science-card.two-col-grid,
body .utility-modal[data-utility-type="konsantrasyon-hesaplayici"] .modal-body .science-card.two-col-grid {
  column-gap: 20px !important;
}

body .utility-modal[data-utility-type="cozelti-seyreltme-hesaplayici"] .modal-body .science-card.two-col-grid .science-unit-row.science-unit-sm,
body .utility-modal[data-utility-type="konsantrasyon-hesaplayici"] .modal-body .science-card.two-col-grid .science-unit-row.science-unit-sm {
  grid-template-columns: minmax(0, 1fr) 20px !important;
  gap: 20px !important;
}

body .utility-modal[data-utility-type="cozelti-seyreltme-hesaplayici"] #dV1u,
body .utility-modal[data-utility-type="cozelti-seyreltme-hesaplayici"] #dV2u,
body .utility-modal[data-utility-type="konsantrasyon-hesaplayici"] #kcVolMolUnit,
body .utility-modal[data-utility-type="konsantrasyon-hesaplayici"] #kcVolMassUnit {
  width: 20px !important;
  max-width: 20px !important;
  min-width: 20px !important;
  padding-left: 2px !important;
  padding-right: 2px !important;
  text-align: center !important;
  text-align-last: center !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
}
body .utility-modal.science-two-col .modal-body .science-card.two-col-grid .science-step-row {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
body .utility-modal.science-two-col .modal-body .science-card.two-col-grid .science-steps {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
}
body .utility-modal.science-two-col .modal-body .science-card.two-col-grid .science-inline-btn {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: end !important;
}
body .utility-modal.science-two-col .modal-body .science-card.two-col-grid .science-inline-btn :is(.mt-btn, .generate-btn, button) {
  width: 100% !important;
}
body .utility-modal.science-two-col .modal-body .science-card.two-col-grid :is(.generate-btn, .mt-btn) {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
body .utility-modal.science-two-col .modal-body .science-card.two-col-grid .result-output {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
body .utility-modal.survival-two-col .modal-body .utility-container {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: start !important;
}
body .utility-modal.survival-two-col .modal-body .utility-container label {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  text-align: left !important;
  gap: 6px !important;
}
body .utility-modal.survival-two-col .modal-body .utility-container :is(input, select, textarea) {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  box-sizing: border-box !important;
}
body .utility-modal.survival-two-col .modal-body .utility-container :is(.generate-btn, .result-output, p, ul, ol, hr, h3, h4, h5, pre, textarea) {
  grid-column: 1 / -1 !important;
}
@media (max-width: 720px) {
  body .utility-modal.survival-two-col .modal-body .utility-container {
    grid-template-columns: 1fr !important;
  }
}
body .utility-modal[data-utility-type="scientific-calculator"] .top-controls #sciAngleMode {
  width: 22px !important;
}
body .utility-modal[data-utility-type="scientific-calculator"] #sciFuncName,
body .utility-modal[data-utility-type="scientific-calculator"] #sciFuncParams,
body .utility-modal[data-utility-type="scientific-calculator"] #sciFuncExpr {
  width: 56px !important;
  max-width: 56px !important;
}
body .utility-modal[data-utility-type="scientific-calculator"] #sciPlotExpr,
body .utility-modal[data-utility-type="scientific-calculator"] #sciXMin,
body .utility-modal[data-utility-type="scientific-calculator"] #sciXMax,
body .utility-modal[data-utility-type="scientific-calculator"] #sciYMin,
body .utility-modal[data-utility-type="scientific-calculator"] #sciYMax,
body .utility-modal[data-utility-type="scientific-calculator"] #sciSamples {
  flex: 0 0 calc(35% - 3px) !important;
  max-width: calc(35% - 3px) !important;
  width: 100% !important;
}
body .utility-modal[data-utility-type="scientific-calculator"] #sciPlotColor,
body .utility-modal[data-utility-type="scientific-calculator"] #sciPlotColor2 {
  width: 16px !important;
}
body .utility-modal[data-utility-type="scientific-calculator"] #sciPlotLineWidth,
body .utility-modal[data-utility-type="scientific-calculator"] #sciPlotPointSize,
body .utility-modal[data-utility-type="scientific-calculator"] #sciPlotLineWidth2,
body .utility-modal[data-utility-type="scientific-calculator"] #sciPlotPointSize2 {
  width: 32px !important;
  max-width: 32px !important;
}
body .utility-modal[data-utility-type^="game-"] .modal-content,
body .utility-modal[data-utility-type="sudoku-solver"] .modal-content,
body .utility-modal[data-utility-type="sudoku-generator"] .modal-content {
  width: min(95vw, 520px) !important;
  max-width: 520px !important;
  max-height: 90vh !important;
  margin: auto !important;
  resize: none !important;
}
body .utility-modal[data-utility-type^="game-"] .modal-body,
body .utility-modal[data-utility-type="sudoku-solver"] .modal-body,
body .utility-modal[data-utility-type="sudoku-generator"] .modal-body {
  overflow: auto !important;
}
body .utility-modal[data-utility-type^="game-"] canvas {
  max-width: 100% !important;
  height: auto !important;
  display: block; /* Remove inline-block gap */
}
body .utility-modal[data-utility-type^="game-"] .game-container {
  width: 100%;
  max-width: 100%;
  overflow: hidden; /* Prevent spillover */
}