/* Path: /public/assets/css/home-min.css (REPLACE FULL FILE) */

/* ✅ prevent weird auto-dark / keep UA consistent */
:root{
  color-scheme: light;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

.home-min{
  width:min(1100px, calc(100% - 32px));
  margin:0 auto;
  padding:22px 0 54px;
  color:var(--text);
}

/* --- HERO (modern soft) --- */
.hm-hero{
  background:linear-gradient(135deg, rgba(124,58,237,.10), rgba(34,158,217,.08), rgba(255,255,255,.92));
  border:1px solid rgba(15,23,42,.10);
  border-radius:22px;
  padding:18px;
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:14px;
  box-shadow:0 14px 34px rgba(15,23,42,.08);
  backdrop-filter:saturate(160%) blur(8px);
}

.hm-brand{
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  font-weight:900;
  font-size:13px;
  color:#4c1d95;
  background:linear-gradient(135deg, rgba(124,58,237,.12), rgba(34,158,217,.08));
  border:1px solid rgba(124,58,237,.18);
  width:max-content;
}

.hm-title{
  margin:10px 0 6px;
  font-size:24px;
  font-weight:900;
  letter-spacing:-.3px;
  color:var(--text);
}
.hm-sub{
  color:var(--muted);
  font-weight:800;
  font-size:13px;
  line-height:1.9;
}

.hm-actions{
  margin-top:14px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* right side */
.hm-right{
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* clock */
.hm-clock{
  border:1px solid rgba(15,23,42,.10);
  border-radius:18px;
  padding:14px;
  background:rgba(255,255,255,.86);
  box-shadow:0 12px 28px rgba(15,23,42,.06);
  backdrop-filter:saturate(160%) blur(8px);
}
.hm-clock-k{
  font-size:12px;
  font-weight:900;
  color:var(--muted);
}
.hm-clock-v{
  margin-top:6px;
  font-size:34px;
  font-weight:900;
  letter-spacing:-.6px;
  font-variant-numeric:tabular-nums;
  color:var(--text);
}
.hm-clock-s{
  margin-top:6px;
  font-size:12px;
  color:var(--muted);
  font-weight:700;
}

/* go */
.hm-go{
  border:1px solid rgba(15,23,42,.10);
  border-radius:18px;
  padding:14px;
  background:rgba(255,255,255,.86);
  box-shadow:0 12px 28px rgba(15,23,42,.06);
  backdrop-filter:saturate(160%) blur(8px);
}
.hm-go-k{
  font-size:13px;
  font-weight:900;
  margin-bottom:10px;
  color:var(--text);
}
.hm-go-row{
  display:flex;
  gap:10px;
  align-items:center;
}
.hm-go-row .input{
  flex:1;
  background:#fff;
  border-radius:14px;
}

/* pills */
.hm-pills{
  margin-top:10px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(255,255,255,.92);
  font-size:12px;
  font-weight:900;
  color:rgba(15,23,42,.82);
  transition:transform .12s ease, background .12s ease, border-color .12s ease;
}
.pill:hover{
  transform:translateY(-1px);
  background:#f8fafc;
  border-color:rgba(124,58,237,.18);
}
.pill.on{
  background:linear-gradient(135deg, rgba(124,58,237,.95), rgba(167,139,250,.95));
  border-color:rgba(124,58,237,.75);
  color:#fff;
}

/* --- TOOLS --- */
.hm-tools{
  margin-top:16px;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(15,23,42,.10);
  border-radius:22px;
  padding:16px;
  box-shadow:0 14px 34px rgba(15,23,42,.06);
  backdrop-filter:saturate(160%) blur(8px);
}

.hm-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
}
.hm-head h2{
  margin:0 0 6px;
  font-size:18px;
  font-weight:900;
  color:var(--text);
}

.hm-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
  gap:12px;
}

.hm-card{
  border:1px solid rgba(15,23,42,.10);
  background:linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.84));
  border-radius:18px;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
  box-shadow:0 10px 24px rgba(15,23,42,.06);
  transition:transform .14s ease, border-color .14s ease, box-shadow .14s ease, background .14s ease;
}
.hm-card:hover{
  transform:translateY(-2px);
  border-color:rgba(109,40,217,.22);
  box-shadow:0 16px 34px rgba(15,23,42,.10);
  background:linear-gradient(135deg, rgba(238,242,255,.60), rgba(255,255,255,.90));
}

.hm-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.hm-card-title{
  font-size:15px;
  font-weight:900;
  color:var(--text);
}
.hm-tag{
  font-size:11px;
  font-weight:900;
  padding:5px 8px;
  border-radius:999px;
  background:linear-gradient(135deg, rgba(15,23,42,.04), rgba(15,23,42,.02));
  border:1px solid rgba(15,23,42,.08);
  color:rgba(15,23,42,.72);
}
.hm-card-desc{
  color:var(--muted);
  font-size:13px;
  line-height:1.9;
}
.hm-card-more{
  margin-top:auto;
  font-size:12px;
  font-weight:900;
  color:var(--primary);
}

/* soft color rotation for cards */
.hm-grid .hm-card:nth-child(5n+1){background:linear-gradient(135deg, rgba(238,242,255,.80), rgba(255,255,255,.90)); border-color:rgba(79,70,229,.14)}
.hm-grid .hm-card:nth-child(5n+2){background:linear-gradient(135deg, rgba(236,254,255,.80), rgba(255,255,255,.90)); border-color:rgba(6,182,212,.14)}
.hm-grid .hm-card:nth-child(5n+3){background:linear-gradient(135deg, rgba(255,247,237,.82), rgba(255,255,255,.90)); border-color:rgba(249,115,22,.16)}
.hm-grid .hm-card:nth-child(5n+4){background:linear-gradient(135deg, rgba(240,253,244,.82), rgba(255,255,255,.90)); border-color:rgba(34,197,94,.14)}
.hm-grid .hm-card:nth-child(5n+5){background:linear-gradient(135deg, rgba(253,242,248,.82), rgba(255,255,255,.90)); border-color:rgba(236,72,153,.14)}

/* keep hover consistent */
.hm-grid .hm-card:hover{
  border-color:rgba(124,58,237,.22);
}

/* --- FOOT TEXT --- */
.hm-foot{
  margin-top:16px;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(15,23,42,.10);
  border-radius:22px;
  padding:16px;
  box-shadow:0 14px 34px rgba(15,23,42,.06);
  backdrop-filter:saturate(160%) blur(8px);
}
.hm-foot h2{
  margin:0 0 10px;
  font-size:18px;
  font-weight:900;
  color:var(--text);
}
.hm-foot p{
  margin:0;
  color:rgba(15,23,42,.88);
  font-size:14px;
  line-height:2;
}

/* --- responsive --- */
@media (max-width:980px){
  .hm-hero{grid-template-columns:1fr}
}
@media (max-width:560px){
  .home-min{width:calc(100% - 26px);padding:16px 0 46px}
  .hm-hero{border-radius:20px;padding:14px}
  .hm-title{font-size:20px}
  .hm-clock-v{font-size:30px}
  .hm-go-row{flex-direction:column}
  .hm-go-row .btn{width:100%}
  .hm-actions .btn{flex:1}
  .hm-grid{grid-template-columns:1fr}
  .hm-tools,.hm-foot{border-radius:20px}
  .hm-card{border-radius:18px}
}

/* --- GROUPS (added for categorized tools) --- */
.hm-group{
  margin-top:18px;
  padding-top:12px;
  border-top:1px dashed rgba(15,23,42,.10);
}
.hm-group:first-of-type{
  margin-top:6px;
  padding-top:0;
  border-top:none;
}

.hm-group-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  margin:6px 2px 10px;
}
.hm-group-title{
  margin:0;
  font-size:15px;
  font-weight:950;
  color:var(--text);
}
.hm-group-desc{
  font-size:12px;
  font-weight:800;
  color:var(--muted);
  line-height:1.7;
  text-align:left;
  max-width:420px;
}

@media (max-width:560px){
  .hm-group-head{
    flex-direction:column;
    align-items:flex-start;
  }
  .hm-group-desc{
    text-align:right;
    max-width:unset;
  }
}

/* =========================
   ✅ DARK MODE FIX (iPhone/Android)
   Problem: text becomes light but cards stay light -> unreadable
   ========================= */
@media (prefers-color-scheme: dark){

  :root{
    color-scheme: dark;
  }

  /* HERO */
  .hm-hero{
    background:linear-gradient(135deg, rgba(167,139,250,.14), rgba(34,158,217,.10), rgba(255,255,255,.03));
    border-color:rgba(255,255,255,.14);
    box-shadow:none;
  }

  .hm-brand{
    color:rgba(234,241,255,.92);
    background:rgba(167,139,250,.14);
    border-color:rgba(167,139,250,.22);
  }

  .hm-title{color:var(--text);}
  .hm-sub{color:var(--muted);}

  /* RIGHT CARDS */
  .hm-clock,
  .hm-go{
    background:rgba(255,255,255,.06);
    border-color:rgba(255,255,255,.14);
    box-shadow:none;
  }

  .hm-clock-v{color:var(--text);}

  .hm-go-k{color:var(--text);}

  .hm-go-row .input{
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.14);
    color:var(--text);
  }

  /* pills */
  .pill{
    background:rgba(255,255,255,.05);
    border-color:rgba(255,255,255,.14);
    color:rgba(234,241,255,.86);
  }
  .pill:hover{
    background:rgba(255,255,255,.08);
    border-color:rgba(167,139,250,.22);
  }
  .pill.on{
    background:linear-gradient(135deg, rgba(167,139,250,.45), rgba(124,58,237,.45));
    border-color:rgba(167,139,250,.28);
    color:#fff;
  }

  /* TOOLS WRAPPER + FOOT */
  .hm-tools,
  .hm-foot{
    background:rgba(255,255,255,.06);
    border-color:rgba(255,255,255,.14);
    box-shadow:none;
  }

  .hm-head h2{color:var(--text);}
  .hm-foot p{color:rgba(234,241,255,.78);}

  /* GROUP DIVIDER */
  .hm-group{
    border-top-color:rgba(255,255,255,.12);
  }

  /* CARDS */
  .hm-card{
    background:rgba(255,255,255,.05);
    border-color:rgba(255,255,255,.12);
    box-shadow:none;
  }
  .hm-card:hover{
    background:rgba(255,255,255,.07);
    border-color:rgba(167,139,250,.26);
    box-shadow:none;
  }

  .hm-card-title{color:var(--text);}
  .hm-card-desc{color:var(--muted);}
  .hm-card-more{color:var(--primary);}

  .hm-tag{
    background:rgba(255,255,255,.06);
    border-color:rgba(255,255,255,.12);
    color:rgba(234,241,255,.78);
  }

  /* ✅ override the nth-child pastel backgrounds (they were staying light) */
  .hm-grid .hm-card:nth-child(5n+1){background:linear-gradient(135deg, rgba(124,58,237,.18), rgba(255,255,255,.03)); border-color:rgba(167,139,250,.22)}
  .hm-grid .hm-card:nth-child(5n+2){background:linear-gradient(135deg, rgba(34,158,217,.16), rgba(255,255,255,.03)); border-color:rgba(34,158,217,.22)}
  .hm-grid .hm-card:nth-child(5n+3){background:linear-gradient(135deg, rgba(249,115,22,.16), rgba(255,255,255,.03)); border-color:rgba(249,115,22,.22)}
  .hm-grid .hm-card:nth-child(5n+4){background:linear-gradient(135deg, rgba(34,197,94,.14), rgba(255,255,255,.03)); border-color:rgba(34,197,94,.20)}
  .hm-grid .hm-card:nth-child(5n+5){background:linear-gradient(135deg, rgba(236,72,153,.14), rgba(255,255,255,.03)); border-color:rgba(236,72,153,.20)}
}

/* Forced colors stability */
@media (forced-colors: active){
  .hm-hero,.hm-clock,.hm-go,.hm-tools,.hm-card,.hm-foot{forced-color-adjust:auto}
}