*{box-sizing:border-box}
:root{--blue:#0649b9;--cyan:#12d7f5;--purple:#6515ff;--red1:#ff183d;--red2:#b90012}
html{min-height:100%;background:#061b57}
body{margin:0;min-height:100vh;padding:24px 14px;display:flex;justify-content:center;align-items:center;font-family:Arial,Helvetica,sans-serif;color:#fff;background:
radial-gradient(ellipse at 50% 18%,rgba(0,142,255,.72),transparent 38%),
radial-gradient(ellipse at 100% 55%,rgba(115,0,255,.78),transparent 38%),
radial-gradient(ellipse at 0% 85%,rgba(69,0,255,.78),transparent 35%),
linear-gradient(135deg,#09236f 0%,#0054c9 35%,#061d64 70%,#3e0db5 100%);background-attachment:fixed}
.home-card{width:min(100%,870px);padding:38px clamp(20px,7vw,70px) 24px;border:2px solid rgba(126,197,255,.55);border-radius:52px;position:relative;overflow:hidden;background:linear-gradient(145deg,rgba(0,91,208,.68),rgba(3,28,91,.9) 58%,rgba(63,10,160,.82));box-shadow:0 0 30px rgba(0,195,255,.28),inset 0 0 25px rgba(92,184,255,.12)}
.home-card:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(145deg,transparent 25%,rgba(41,171,255,.18) 25.2%,transparent 35%),linear-gradient(320deg,transparent 68%,rgba(29,143,255,.18) 68.2%,transparent 79%);z-index:0}
.home-card>*{position:relative;z-index:1}
.router-frame{width:230px;height:230px;max-width:65vw;max-height:65vw;margin:0 auto 20px;border-radius:50%;overflow:hidden;border:6px solid #eafaff;box-shadow:0 0 10px #fff,0 0 25px #00dfff,0 0 38px #c32dff;background:#fff;display:flex;align-items:center;justify-content:center}
.router-frame img{width:100%;height:100%;object-fit:cover}
h1{text-align:center;font-size:clamp(27px,5vw,48px);letter-spacing:.3px;margin:12px 0 30px;font-weight:800;color:#f5f8ff;text-shadow:0 2px 10px rgba(0,0,0,.3)}
h1 strong{color:#15d8f5;text-shadow:0 0 18px rgba(0,224,255,.35)}
.top-actions{display:flex;gap:18px;margin-bottom:18px}
.red-button{display:flex;align-items:center;justify-content:center;gap:14px;min-height:66px;padding:13px 22px;border-radius:999px;text-decoration:none;color:#fff;font-size:clamp(16px,2.4vw,25px);font-weight:700;text-align:center;border:2px solid rgba(255,120,145,.85);background:linear-gradient(180deg,#ff294a 0%,#f00021 46%,#b80013 100%);box-shadow:inset 0 2px 3px rgba(255,255,255,.35),0 5px 14px rgba(0,0,0,.25),0 0 10px rgba(255,0,40,.18);transition:transform .15s,filter .15s}
.red-button:hover{filter:brightness(1.12);transform:translateY(-1px)}
.half{flex:1;min-width:0}
.symbol{font-size:1.45em;line-height:1}
.admin-contact{display:flex;align-items:center;justify-content:center;gap:12px;margin:14px 0 24px;color:#fff;text-decoration:none;font-size:clamp(16px,2.5vw,25px)}
.admin-contact b{font-weight:800}
.person-icon{font-size:25px}
.versions{display:grid;gap:16px;margin-bottom:24px}
.version{width:100%;min-height:76px;display:grid;grid-template-columns:55px 1fr 25px;gap:12px}
.version .symbol{font-size:1.5em}
.arrow{font-size:1.7em;font-weight:400}
.services{border:1px solid rgba(138,187,255,.65);border-radius:30px;padding:22px 24px 20px;background:linear-gradient(145deg,rgba(21,102,236,.52),rgba(5,28,91,.85));box-shadow:inset 0 1px 12px rgba(255,255,255,.15),0 0 20px rgba(0,125,255,.25)}
.service-row{display:flex;align-items:center;gap:20px;min-height:64px;font-size:clamp(16px,2.3vw,24px)}
.service-row+.service-row{border-top:1px solid rgba(198,218,255,.25)}
.service-icon{width:48px;text-align:center;font-size:32px;color:#24e5ff}
.service-icon.wifi{font-size:48px;font-weight:bold}
.whatsapp{margin-top:12px;min-height:74px;display:grid;grid-template-columns:55px 1fr 20px;gap:10px}
.whatsapp-icon{color:#fff;background:#19d66d;border-radius:50%;width:45px;height:45px;display:flex;align-items:center;justify-content:center;font-size:30px;border:3px solid #fff}
footer{text-align:center;color:#dce6ff;font-size:clamp(14px,2vw,20px);padding-top:24px}
footer span{color:#ff1744;font-size:1.25em}
@media(max-width:520px){body{padding:12px 8px;align-items:flex-start}.home-card{padding:24px 15px 18px;border-radius:32px}.router-frame{width:180px;height:180px;margin-bottom:15px}h1{margin:8px 0 22px}.top-actions{gap:10px}.red-button{min-height:54px;padding:10px 12px;gap:8px}.version{min-height:62px;grid-template-columns:34px 1fr 18px}.services{padding:15px 14px;border-radius:22px}.service-row{min-height:56px;gap:12px}.service-icon{width:36px}.whatsapp{grid-template-columns:38px 1fr 14px;min-height:62px}.whatsapp-icon{width:36px;height:36px;font-size:24px}.admin-contact{margin-bottom:18px}.versions{gap:12px}}


/* =========================================================
   MIK N-MOBILE — THREE SELECTABLE HOME PAGE THEMES (V9)
   Theme choice is stored in browser localStorage.
   ========================================================= */
.brand-subtitle{
  display:none;text-align:center;margin:-20px 0 26px;
  font-size:clamp(10px,1.6vw,16px);letter-spacing:4px;
  font-weight:700;color:inherit;opacity:.78;
}
.theme-picker{
  margin:0 auto 22px;max-width:520px;padding:11px 14px;
  border:1px solid rgba(180,220,255,.38);border-radius:18px;
  background:rgba(255,255,255,.08);text-align:center;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.theme-picker-title{font-size:11px;letter-spacing:2px;font-weight:800;margin-bottom:9px;opacity:.8}
.theme-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.theme-option{
  min-width:0;display:flex;align-items:center;justify-content:center;gap:7px;
  padding:8px 5px;border-radius:12px;border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.12);color:inherit;font-size:13px;font-weight:700;
  cursor:pointer;transition:transform .15s,box-shadow .15s,border-color .15s;
}
.theme-option.is-active{border:2px solid #35d8ff;box-shadow:0 0 12px rgba(35,210,255,.5);transform:translateY(-1px)}
.theme-swatch{width:20px;height:20px;display:inline-block;border-radius:50%;border:2px solid rgba(255,255,255,.8);flex:0 0 20px}
.swatch-blue{background:linear-gradient(135deg,#0755e8,#071b67)}
.swatch-glass{background:linear-gradient(135deg,#fff,#8fdcff)}
.swatch-classic{background:linear-gradient(135deg,#ff2449,#a90018)}
.version-section{margin-bottom:24px}
.version-heading{display:none;align-items:center;gap:14px;margin:0 0 13px;font-size:clamp(20px,3vw,30px);font-weight:800}
.version-heading small{display:block;font-size:11px;letter-spacing:2px;margin-top:4px;opacity:.78}
.layers-icon{font-size:34px;line-height:1}
.version-label{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.version-label strong{font-size:1.25em;line-height:1.05}
.version .symbol{font-size:1.6em}
.versions{margin-bottom:0}

/* Theme 1 — Royal blue / vivid colored cards */
body[data-theme="blue"]{
  color:#fff;
  background:
    radial-gradient(ellipse at 50% 5%,rgba(58,107,255,.9),transparent 42%),
    radial-gradient(ellipse at 100% 70%,rgba(0,195,255,.28),transparent 38%),
    linear-gradient(145deg,#071b69 0%,#0755d9 48%,#081b67 100%);
  background-attachment:fixed;
}
body[data-theme="blue"] .home-card{
  background:linear-gradient(150deg,rgba(10,69,190,.78),rgba(3,30,102,.94) 62%,rgba(12,61,170,.86));
  border-color:rgba(93,202,255,.72);box-shadow:0 0 34px rgba(0,183,255,.28),inset 0 0 28px rgba(90,190,255,.15);
}
body[data-theme="blue"] h1 strong{color:#13d7ff}
body[data-theme="blue"] .brand-subtitle{display:none}
body[data-theme="blue"] .theme-picker{background:rgba(5,35,112,.5)}
body[data-theme="blue"] .top-actions .red-button.half:first-child{
  background:linear-gradient(135deg,#ff3155,#d90038);border-color:#ff8ba1;
}
body[data-theme="blue"] .top-actions .red-button.half:last-child{
  background:linear-gradient(135deg,#18c99b,#008e78);border-color:#70f3d2;
}
body[data-theme="blue"] .admin-contact{
  justify-content:space-between;padding:13px 18px;border:1px solid rgba(150,207,255,.55);
  border-radius:20px;background:linear-gradient(110deg,rgba(25,113,238,.48),rgba(18,58,153,.55));
}
body[data-theme="blue"] .person-icon{
  display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;
  border-radius:50%;background:#087be8;color:#fff;font-size:28px;
}
body[data-theme="blue"] .versions{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
body[data-theme="blue"] .version{
  min-height:128px;padding:12px 10px;border-radius:22px;
  display:grid;grid-template-columns:1fr 18px;grid-template-rows:34px 1fr;gap:5px;
  align-items:center;justify-items:start;text-align:left;
}
body[data-theme="blue"] .version .symbol{grid-column:1;grid-row:1;font-size:30px}
body[data-theme="blue"] .version-label{grid-column:1;grid-row:2;font-size:14px}
body[data-theme="blue"] .version .arrow{grid-column:2;grid-row:1 / span 2;justify-self:center}
body[data-theme="blue"] .version-v3{background:linear-gradient(140deg,#0aafff,#183be8);border-color:#38dfff;box-shadow:0 0 13px rgba(0,190,255,.3)}
body[data-theme="blue"] .version-v711{background:linear-gradient(140deg,#f02aa7,#b20b83);border-color:#ff71ce;box-shadow:0 0 13px rgba(238,31,174,.28)}
body[data-theme="blue"] .version-v713{background:linear-gradient(140deg,#813cff,#4c18dc);border-color:#ad83ff;box-shadow:0 0 13px rgba(123,64,255,.3)}
body[data-theme="blue"] .version-label strong{font-size:1.35em}
body[data-theme="blue"] .services{border:0;background:transparent;box-shadow:none;padding:0;display:grid;gap:10px}
body[data-theme="blue"] .service-row{
  min-height:72px;padding:10px 17px;border-radius:18px;
  background:linear-gradient(100deg,#ff9e16,#f07800);border:1px solid rgba(255,221,116,.8);
}
body[data-theme="blue"] .service-row+.service-row{
  border:1px solid rgba(255,235,118,.85);background:linear-gradient(100deg,#ffd62b,#e7a900);
}
body[data-theme="blue"] .service-icon{color:#fff}
body[data-theme="blue"] .whatsapp{margin-top:0;background:linear-gradient(100deg,#087bea,#0753c7);border-color:#42baff;border-radius:18px}
body[data-theme="blue"] footer{border:1px solid rgba(180,218,255,.28);border-radius:18px;background:rgba(255,255,255,.1);margin-top:18px;padding:16px 8px}

/* Theme 2 — Light glass / translucent panels */
body[data-theme="glass"]{
  color:#102e5d;
  background:
    radial-gradient(ellipse at 12% 10%,rgba(255,255,255,.98),transparent 38%),
    radial-gradient(ellipse at 90% 18%,rgba(74,177,255,.42),transparent 42%),
    linear-gradient(135deg,#eaf7ff 0%,#b8dcff 45%,#f7fbff 100%);
  background-attachment:fixed;
}
body[data-theme="glass"] .home-card{
  background:linear-gradient(145deg,rgba(255,255,255,.48),rgba(220,242,255,.32));
  border-color:rgba(255,255,255,.82);box-shadow:0 15px 42px rgba(40,106,177,.18),inset 0 0 22px rgba(255,255,255,.62);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
body[data-theme="glass"] .home-card:before{background:linear-gradient(135deg,transparent 25%,rgba(255,255,255,.48) 25.2%,transparent 37%),linear-gradient(320deg,transparent 65%,rgba(64,165,255,.12) 65.2%,transparent 78%)}
body[data-theme="glass"] h1{color:#092e69;text-shadow:none}
body[data-theme="glass"] h1 strong{color:#087be9;text-shadow:none}
body[data-theme="glass"] .brand-subtitle{display:block;color:#244d7e}
body[data-theme="glass"] .theme-picker,
body[data-theme="glass"] .admin-contact,
body[data-theme="glass"] .version-section,
body[data-theme="glass"] .services,
body[data-theme="glass"] footer{
  background:rgba(255,255,255,.38);border:1px solid rgba(255,255,255,.9);
  box-shadow:0 7px 22px rgba(38,104,171,.12),inset 0 1px 5px rgba(255,255,255,.8);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
body[data-theme="glass"] .theme-option{color:#123767;background:rgba(255,255,255,.5);border-color:rgba(65,139,205,.22)}
body[data-theme="glass"] .theme-option.is-active{border:2px solid #087ce7;box-shadow:0 0 12px rgba(0,126,231,.22)}
body[data-theme="glass"] .admin-contact{justify-content:space-between;padding:12px 18px;border-radius:20px;color:#0c2f62}
body[data-theme="glass"] .person-icon{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:#087ce7;color:#fff;font-size:28px}
body[data-theme="glass"] .version-section{padding:16px;border-radius:24px;margin-bottom:18px}
body[data-theme="glass"] .version-heading{display:flex;color:#123a6b}
body[data-theme="glass"] .versions{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
body[data-theme="glass"] .version{
  min-height:128px;padding:12px 10px;border-radius:22px;
  display:grid;grid-template-columns:1fr 18px;grid-template-rows:34px 1fr;gap:5px;
  align-items:center;justify-items:start;text-align:left;
}
body[data-theme="glass"] .version .symbol{grid-column:1;grid-row:1;font-size:30px}
body[data-theme="glass"] .version-label{grid-column:1;grid-row:2;font-size:14px}
body[data-theme="glass"] .version .arrow{grid-column:2;grid-row:1 / span 2;justify-self:center}
body[data-theme="glass"] .version-v3{background:linear-gradient(140deg,#08aaff,#0752e9);border-color:#45dfff;box-shadow:0 0 12px rgba(0,163,255,.26)}
body[data-theme="glass"] .version-v711{background:linear-gradient(140deg,#b128f1,#6b17db);border-color:#d7a2ff;box-shadow:0 0 12px rgba(153,45,235,.22)}
body[data-theme="glass"] .version-v713{background:linear-gradient(140deg,#12c9dc,#0096bb);border-color:#7cf5ff;box-shadow:0 0 12px rgba(0,195,218,.22)}
body[data-theme="glass"] .services{padding:12px;border-radius:24px;display:grid;gap:10px;background:rgba(255,255,255,.34)}
body[data-theme="glass"] .service-row{
  min-height:68px;padding:10px 16px;border-radius:18px;color:#fff;
  background:linear-gradient(100deg,#ff9f19,#f07800);border:1px solid #ffd17b;
}
body[data-theme="glass"] .service-row+.service-row{border:1px solid #ffb5dc;background:linear-gradient(100deg,#ed2c9b,#c30b7e)}
body[data-theme="glass"] .service-icon{color:#fff}
body[data-theme="glass"] .whatsapp{margin-top:0;background:linear-gradient(100deg,#0785ff,#0757db);border-color:#60caff;border-radius:18px}
body[data-theme="glass"] footer{color:#173d6e;margin-top:18px;padding:16px 8px;border-radius:18px}
body[data-theme="glass"] footer span{color:#ef293f}

/* Theme 3 — Classic dark blue with red pill buttons */
body[data-theme="classic"] .brand-subtitle{display:none}
body[data-theme="classic"] .theme-picker{background:rgba(5,24,89,.55)}
body[data-theme="classic"] .version-heading{display:none}
body[data-theme="classic"] .versions{display:grid;grid-template-columns:1fr;gap:12px}
body[data-theme="classic"] .version{min-height:76px;display:grid;grid-template-columns:55px 1fr 25px}
body[data-theme="classic"] .version-label{display:block}
body[data-theme="classic"] .version-label strong{display:inline;font-size:1em;margin-left:5px}

@media(max-width:520px){
  .theme-picker{padding:9px 8px;margin-bottom:17px}
  .theme-option{font-size:11px;padding:7px 3px;gap:5px}
  .theme-swatch{width:16px;height:16px;flex-basis:16px}
  body[data-theme="blue"] .home-card,body[data-theme="glass"] .home-card{padding:22px 13px 17px}
  body[data-theme="blue"] .versions,body[data-theme="glass"] .versions{gap:7px}
  body[data-theme="blue"] .version,body[data-theme="glass"] .version{min-height:105px;padding:9px 7px;border-radius:17px;grid-template-columns:1fr 14px;grid-template-rows:28px 1fr}
  body[data-theme="blue"] .version-label,body[data-theme="glass"] .version-label{font-size:11px}
  body[data-theme="blue"] .version .symbol,body[data-theme="glass"] .version .symbol{font-size:25px}
  body[data-theme="blue"] .version-label strong,body[data-theme="glass"] .version-label strong{font-size:1.25em}
  body[data-theme="blue"] .admin-contact,body[data-theme="glass"] .admin-contact{font-size:15px;padding:10px 12px}
  body[data-theme="blue"] .person-icon,body[data-theme="glass"] .person-icon{width:42px;height:42px;font-size:23px}
  body[data-theme="blue"] .service-row,body[data-theme="glass"] .service-row{font-size:15px;min-height:60px}
}
@media(max-width:360px){
  .theme-option{font-size:10px}
  body[data-theme="blue"] .version-label,body[data-theme="glass"] .version-label{font-size:10px}
}
