/* ============================================================
   KEMETI CALENDAR v5.0 — settings.css
   Settings + Backup + About + Methodology
   ============================================================ */

/* ============ SETTING ROW ============ */
.setting-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:14px 4px;
  border-bottom:1px solid var(--line-soft);
  flex-wrap:wrap;
}

.setting-row:last-child{border-bottom:none}

.setting-label{flex:1;min-width:180px}
.setting-label .sl-title{
  font-size:13.5px;color:var(--text);font-weight:800;margin-bottom:3px;
}

.setting-label .sl-sub{
  font-size:11px;color:var(--muted);line-height:1.5;
}

/* ============ SELECT ============ */
.setting-select{
  padding:9px 12px;background:var(--card2);
  border:1px solid var(--line-soft);border-radius:6px;
  color:var(--text);font-size:12.5px;font-weight:700;
  cursor:pointer;min-width:150px;max-width:220px;outline:none;
}

.setting-select:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(212,175,55,.1);
}

.setting-select option{background:#1a1a24;color:var(--text)}

body.light .setting-select option{background:#faf5e6;color:#2a2010}

/* ============ SLIDER ============ */
.setting-range{
  flex:1;min-width:120px;max-width:220px;
  -webkit-appearance:none;appearance:none;
  height:6px;background:rgba(212,175,55,.2);
  border-radius:4px;outline:none;
}

.setting-range::-webkit-slider-thumb{
  -webkit-appearance:none;width:18px;height:18px;border-radius:50%;
  background:linear-gradient(180deg,var(--gold-bright),var(--gold-dark));
  border:1px solid var(--gold-bright);cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,.3);
}

.setting-range::-moz-range-thumb{
  width:18px;height:18px;border-radius:50%;
  background:linear-gradient(180deg,var(--gold-bright),var(--gold-dark));
  border:1px solid var(--gold-bright);cursor:pointer;
}

.setting-value{
  font-size:12px;font-weight:800;color:var(--gold);
  min-width:50px;text-align:left;font-variant-numeric:tabular-nums;
}

/* ============ FONT SIZE CONTROL ============ */
.font-size-control{
  display:flex;gap:4px;background:var(--card2);
  padding:4px;border-radius:6px;border:1px solid var(--line-soft);
}

.fs-btn{
  padding:6px 12px;background:transparent;border:none;
  color:var(--muted);font-weight:800;
  border-radius:4px;transition:all .2s;line-height:1;
}

.fs-btn:nth-child(1){font-size:11px}
.fs-btn:nth-child(2){font-size:13px}
.fs-btn:nth-child(3){font-size:16px}
.fs-btn:nth-child(4){font-size:19px}

.fs-btn:hover{color:var(--gold)}

.fs-btn.active{
  background:linear-gradient(180deg,var(--gold-bright),var(--gold-dark));
  color:var(--on-gold);
}

/* ============ TOGGLE SWITCH ============ */
.switch{
  position:relative;display:inline-block;
  width:52px;height:28px;flex-shrink:0;
}

.switch input{opacity:0;width:0;height:0}

.switch .slider{
  position:absolute;cursor:pointer;inset:0;
  background:rgba(0,0,0,.4);
  border:1px solid var(--line-soft);border-radius:28px;
  transition:.3s;
}

.switch .slider::before{
  content:'';position:absolute;
  height:20px;width:20px;left:3px;bottom:3px;
  background:var(--muted);border-radius:50%;
  transition:.3s;
  box-shadow:0 2px 4px rgba(0,0,0,.3);
}

.switch input:checked + .slider{
  background:linear-gradient(90deg,var(--gold-dark),var(--gold));
  border-color:var(--gold);
}

.switch input:checked + .slider::before{
  transform:translateX(24px);
  background:var(--on-gold);
  box-shadow:0 2px 6px rgba(212,175,55,.5);
}

/* ============ BACKUP INFO ============ */
.backup-info{
  padding:12px 14px;
  background:rgba(212,175,55,.05);
  border-radius:8px;
  border-right:3px solid var(--gold-dark);
  margin-bottom:12px;
}

.backup-info.danger{
  background:rgba(230,100,100,.08);
  border-right-color:#e06464;
}

.backup-info .bi-title{
  font-size:13px;color:var(--text);font-weight:800;margin-bottom:4px;
}

.backup-info .bi-sub{
  font-size:11px;color:var(--muted);line-height:1.6;
}

.backup-actions{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
}

.backup-actions .btn{
  width:100%;padding:11px 12px;font-size:11.5px;
}

/* ============ STORAGE ============ */
.storage-usage{
  margin-top:14px;padding:10px 12px;
  background:var(--card2);border-radius:6px;
  font-size:11px;color:var(--muted);text-align:center;
  font-weight:700;font-variant-numeric:tabular-nums;
}

/* ============ BACKUP PREVIEW ============ */
.backup-preview{
  margin-top:12px;padding:14px;
  background:var(--card2);border:1px solid var(--line-soft);
  border-radius:8px;display:none;
}

.backup-preview.on{display:block}

.backup-preview .bp-title{
  font-size:12px;color:var(--gold);font-weight:800;margin-bottom:8px;
}

.backup-preview .bp-stats{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:11px;
}

.backup-preview .bp-stat{
  padding:8px 10px;background:rgba(0,0,0,.2);border-radius:6px;
}

.backup-preview .bp-stat .lbl{
  color:var(--muted);font-size:10px;margin-bottom:3px;
}

.backup-preview .bp-stat .val{
  color:var(--gold);font-weight:800;font-size:13px;
}

/* ============ ABOUT ============ */
.about-box{text-align:center;padding:16px 12px}

.about-logo{
  font-size:56px;color:var(--gold);
  font-family:'Noto Sans Egyptian Hieroglyphs',serif;
  margin-bottom:8px;
  text-shadow:0 0 24px rgba(212,175,55,.5);
}

.about-name{
  font-size:16px;color:var(--gold-bright);font-weight:800;margin-bottom:4px;
}

.about-version{
  font-size:11.5px;color:var(--muted);margin-bottom:14px;
}

.about-version strong{color:var(--gold)}

.about-desc{
  font-size:12.5px;color:var(--text);line-height:1.8;
  margin-bottom:16px;padding:0 8px;
}

.about-links{
  display:flex;gap:8px;justify-content:center;
  flex-wrap:wrap;margin-bottom:14px;
}

.about-links a{
  display:inline-flex;align-items:center;gap:5px;
  padding:7px 12px;background:var(--card2);
  border:1px solid var(--line-soft);border-radius:6px;
  color:var(--gold);font-size:11px;font-weight:700;
  text-decoration:none;transition:all .2s;
}

.about-links a:hover{
  border-color:var(--gold);
  background:rgba(212,175,55,.08);
}

.about-links a svg{width:12px;height:12px}

.about-note{
  font-size:10.5px;color:var(--muted);line-height:1.7;
  padding-top:12px;border-top:1px dashed var(--line-soft);
  font-style:italic;
}

/* ============ METHODOLOGY ============ */
.methodology-hero{
  background:linear-gradient(135deg,rgba(212,175,55,.12),rgba(74,144,217,.06));
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px 18px;
  margin-bottom:14px;
  position:relative;overflow:hidden;
}

.methodology-hero::before{
  content:'𓂀';
  position:absolute;
  top:-20px;left:-10px;
  font-size:140px;
  color:var(--gold);opacity:.05;
  font-family:'Noto Sans Egyptian Hieroglyphs',serif;
  pointer-events:none;
}

.methodology-hero .mh-title{
  font-size:18px;color:var(--gold-bright);font-weight:800;
  margin-bottom:8px;
  display:flex;align-items:center;gap:10px;
  position:relative;
}

.methodology-hero .mh-sub{
  font-size:13px;color:var(--text);line-height:1.9;position:relative;
}

.methodology-grid{
  display:grid;grid-template-columns:1fr;gap:10px;margin-top:14px;
}

@media (min-width:768px){
  .methodology-grid{grid-template-columns:1fr 1fr;}
}

.method-card{
  padding:14px;border-radius:8px;
  border:1px solid var(--line-soft);background:var(--card2);
  position:relative;
}

.method-card.tier-official{border-right:4px solid #7fb069}
.method-card.tier-heritage{border-right:4px solid #e6c878}
.method-card.tier-cultural{border-right:4px solid #c98ac9}
.method-card.tier-recon{border-right:4px solid #e69b72}

.method-card .mc-head{
  display:flex;align-items:center;gap:8px;margin-bottom:8px;
}

.method-card .mc-badge{
  font-size:9px;font-weight:800;
  padding:3px 9px;border-radius:999px;letter-spacing:.5px;
}

.method-card.tier-official .mc-badge{
  background:rgba(127,176,105,.2);color:#8fd18f;
  border:1px solid rgba(127,176,105,.4);
}

.method-card.tier-heritage .mc-badge{
  background:rgba(230,200,120,.2);color:#e8c56a;
  border:1px solid rgba(230,200,120,.4);
}

.method-card.tier-cultural .mc-badge{
  background:rgba(201,138,201,.2);color:#d99fd9;
  border:1px solid rgba(201,138,201,.4);
}

.method-card.tier-recon .mc-badge{
  background:rgba(230,155,114,.2);color:#e69b72;
  border:1px solid rgba(230,155,114,.4);
}

.method-card .mc-title{font-size:13px;color:var(--text);font-weight:800}
.method-card .mc-desc{font-size:11.5px;color:var(--muted);line-height:1.85}

.method-card .mc-examples{
  margin-top:8px;padding-top:8px;
  border-top:1px dashed var(--line-soft);
  font-size:10.5px;color:var(--muted);line-height:1.7;
}

.method-card .mc-examples strong{color:var(--gold)}

.methodology-principles{
  margin-top:14px;padding:14px;border-radius:8px;
  background:rgba(212,175,55,.05);
  border:1px dashed var(--line);
}

.methodology-principles .mp-title{
  font-size:12px;color:var(--gold);font-weight:800;
  margin-bottom:8px;display:flex;align-items:center;gap:6px;
}

.methodology-principles ul{list-style:none;padding:0;margin:0}

.methodology-principles li{
  font-size:11.5px;color:var(--text);line-height:1.85;
  padding:5px 0 5px 18px;position:relative;
}

.methodology-principles li::before{
  content:'◆';position:absolute;right:0;
  color:var(--gold);font-size:9px;top:8px;
}

.disclaimer-box{
  margin-top:14px;padding:12px 14px;border-radius:6px;
  background:rgba(230,155,114,.08);
  border-right:3px solid #e69b72;
  font-size:11.5px;color:var(--text);line-height:1.85;
}

.disclaimer-box strong{color:#e69b72}