/* ============================
   SEORVIA Rank Tracker - Premium Search Theme
   Full CSS (replace all)
============================ */

:root{
  --bg1:#0b122b;
  --bg2:#182a66;
  --bg3:#3556ff;

  --card:#0f1736cc;           /* richer than plain rgba */
  --card-border:rgba(255,255,255,.14);

  --text:#ffffff;
  --muted:rgba(255,255,255,.78);

  --field:#121b3fe6;
  --field-border:rgba(255,255,255,.16);
  --field-border-focus:rgba(255,255,255,.42);

  --accent:#56d3b4;           /* premium mint */
  --accent2:#2ec5ff;          /* subtle blue glow */
  --danger:#ff3b6a;

  --shadow1:0 18px 55px rgba(0,0,0,.38);
  --shadow2:0 10px 25px rgba(0,0,0,.28);

  --radius-lg:20px;
  --radius-md:16px;
  --radius-sm:14px;
}

*{
  box-sizing:border-box;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif
}

html,body{height:100%}

body{
  margin:0;
  color:var(--text);
  /* Premium gradient background (search-engine vibe) */
  background:
    radial-gradient(1200px 800px at 70% 10%, rgba(46,197,255,.25), transparent 55%),
    radial-gradient(900px 700px at 20% 25%, rgba(86,211,180,.18), transparent 55%),
    radial-gradient(1100px 900px at 50% 110%, rgba(53,86,255,.35), transparent 60%),
    linear-gradient(145deg, var(--bg1), var(--bg2) 55%, var(--bg3));
  overflow-x:hidden;
}

/* subtle noise to avoid "flat cheap" look */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
  opacity:.22;
}

/* vignette */
body::after{
  content:"";
  position:fixed; inset:-40px;
  pointer-events:none;
  background:radial-gradient(circle at 50% 20%, transparent 35%, rgba(0,0,0,.35) 100%);
  opacity:.55;
}

/* Layout */
.app{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  position:relative;
  z-index:1;
}

/* Topbar */
.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:14px;
  padding:14px 16px;
  background:rgba(10,14,32,.55);
  border-bottom:1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(14px);
}

.topbar-center{
  display:flex; align-items:center; gap:12px; flex:1;
}

/* Google mark (real-ish) */
.google-mark{
  width:28px;height:28px;border-radius:10px;
  background:
    conic-gradient(from 210deg,
      #4285F4 0 25%,
      #34A853 0 50%,
      #FBBC05 0 75%,
      #EA4335 0 100%);
  position:relative;
  box-shadow:0 10px 20px rgba(0,0,0,.25);
}
.google-mark::after{
  content:"G";
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-weight:900;
  color:#fff;
  font-size:14px;
  text-shadow:0 2px 8px rgba(0,0,0,.35);
}

.topbar-title{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.topbar-title-main{
  font-weight:900;
  letter-spacing:.35px;
  line-height:1.05;
}
.topbar-title-sub{
  font-size:12px;
  color:var(--muted);
}

/* Content wrapper */
.content{
  width:100%;
  max-width:540px;
  margin:0 auto;
  padding:22px 16px 34px;
  display:flex;
  flex-direction:column;
  gap:16px;
}

/* Brand block */
.brand-block{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  margin-top:6px;
}

.hero-logo{
  height:66px;
  max-width:260px;
  object-fit:contain;
  filter:
    drop-shadow(0 18px 28px rgba(0,0,0,.35))
    drop-shadow(0 0 22px rgba(46,197,255,.16));
}

.hero-subtitle{
  font-size:14px;
  color:rgba(255,255,255,.86);
  text-align:center;
}

/* Card */
.card{
  background:linear-gradient(180deg, rgba(18,26,62,.78), rgba(10,14,32,.74));
  border:1px solid var(--card-border);
  border-radius:var(--radius-lg);
  padding:16px;
  box-shadow:var(--shadow1);
  position:relative;
  overflow:hidden;
}

/* card highlight line (premium) */
.card::before{
  content:"";
  position:absolute;
  top:-60px; left:-60px;
  width:180px; height:180px;
  background:radial-gradient(circle, rgba(46,197,255,.35), transparent 60%);
  filter: blur(2px);
  opacity:.55;
}
.card::after{
  content:"";
  position:absolute;
  right:-80px; bottom:-80px;
  width:220px; height:220px;
  background:radial-gradient(circle, rgba(86,211,180,.22), transparent 60%);
  opacity:.65;
}

/* Fields */
.field{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:14px;
  position:relative;
  z-index:1;
}

.label{
  font-size:13px;
  font-weight:800;
  letter-spacing:.2px;
}

.hint{
  font-size:12px;
  color:rgba(255,255,255,.74);
}

.note{
  margin-top:12px;
  font-size:12px;
  color:rgba(255,255,255,.78);
  line-height:1.45;
}

/* Inputs */
.input,.select{
  width:100%;
  border-radius:var(--radius-md);
  border:1px solid var(--field-border);
  background:linear-gradient(180deg, rgba(18,27,63,.92), rgba(12,18,42,.88));
  color:#fff;
  padding:14px 14px;
  outline:none;
  box-shadow:0 10px 18px rgba(0,0,0,.18);
  transition:transform .08s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease;
  -webkit-tap-highlight-color: transparent;
}

.input::placeholder{color:rgba(255,255,255,.62)}

.input:focus,.select:focus{
  border-color:var(--field-border-focus);
  box-shadow:
    0 14px 26px rgba(0,0,0,.22),
    0 0 0 3px rgba(46,197,255,.14);
  background:linear-gradient(180deg, rgba(22,34,78,.96), rgba(14,22,54,.92));
}

.grid-2{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
@media(min-width:520px){
  .grid-2{grid-template-columns:1fr 1fr}
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-align:center;
  padding:15px 16px;
  border-radius:var(--radius-md);
  font-weight:900;
  text-decoration:none;
  color:#fff;
  border:none;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
  transition:transform .09s ease, box-shadow .12s ease, filter .15s ease;
}
.btn:active{transform:scale(.985)}
.btn.full{width:100%}

/* premium primary (search vibe) */
.btn.primary{
  background:linear-gradient(135deg, rgba(86,211,180,1), rgba(46,197,255,.92));
  box-shadow:
    0 14px 26px rgba(0,0,0,.26),
    0 10px 0 rgba(27,120,150,.55);
}
.btn.primary:hover{filter:brightness(1.03)}
.btn.primary:active{
  box-shadow:
    0 10px 18px rgba(0,0,0,.22),
    0 4px 0 rgba(27,120,150,.55);
}

.btn-icon{
  width:28px;height:28px;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.14);
  box-shadow:0 8px 14px rgba(0,0,0,.18) inset;
  font-weight:900;
}

/* Icon button */
.icon-btn{
  width:44px;height:44px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.18);
  color:#fff;
  cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:transform .09s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
  -webkit-tap-highlight-color: transparent;
  box-shadow:0 10px 22px rgba(0,0,0,.22);
}
.icon-btn:active{transform:scale(.97)}
.icon-btn:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.20);
}
.icon-btn.close{width:42px;height:42px}

/* Hamburger */
.hamburger{
  width:18px;height:12px;position:relative;display:block;
}
.hamburger::before,.hamburger::after,.hamburger span{
  content:"";position:absolute;left:0;right:0;height:2px;background:#fff;border-radius:2px;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
}
.hamburger::before{top:0}
.hamburger::after{bottom:0}
.hamburger span{top:5px}

/* Side menu */
.sidemenu{
  position:fixed;
  top:0;left:0;bottom:0;
  width:294px;
  background:linear-gradient(180deg, rgba(10,14,32,.96), rgba(14,20,48,.94));
  backdrop-filter: blur(14px);
  border-right:1px solid rgba(255,255,255,.12);
  transform:translateX(-105%);
  transition:transform .22s ease;
  z-index:30;
  display:flex;
  flex-direction:column;
  box-shadow:0 22px 60px rgba(0,0,0,.45);
}
.sidemenu.open{transform:translateX(0)}

.sidemenu-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px;
  border-bottom:1px solid rgba(255,255,255,.10);
}

.sidemenu-brand{display:flex;align-items:center;gap:12px}

.brand-logo{
  width:44px;height:44px;
  object-fit:contain;
  border-radius:14px;
  background:rgba(255,255,255,.08);
  padding:6px;
  box-shadow:0 14px 26px rgba(0,0,0,.30);
}

.brand-text{display:flex;flex-direction:column;gap:2px}
.brand-name{font-weight:950;letter-spacing:1px}
.brand-sub{font-size:12px;color:rgba(255,255,255,.78)}

.sidemenu-nav{padding:10px;display:flex;flex-direction:column;gap:8px}

.menu-link{
  padding:14px 12px;border-radius:16px;
  color:#fff;text-decoration:none;font-weight:800;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
  transition:transform .09s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
  box-shadow:0 10px 20px rgba(0,0,0,.18);
}
.menu-link:active{transform:scale(.985)}
.menu-link:hover{
  background:rgba(46,197,255,.10);
  border-color:rgba(46,197,255,.22);
}

.sidemenu-foot{
  margin-top:auto;
  padding:14px 16px;
  border-top:1px solid rgba(255,255,255,.10);
}

.muted{
  font-size:12px;
  color:rgba(255,255,255,.75);
  line-height:1.4;
}

/* Backdrop */
.backdrop{
  position:fixed;inset:0;
  background:rgba(0,0,0,.45);
  opacity:0;pointer-events:none;
  transition:opacity .22s ease;
  z-index:25;
}
.backdrop.show{opacity:1;pointer-events:auto}

/* Loader */
#app-loader{
  position:fixed;inset:0;
  background:rgba(0,0,0,.55);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:999;
  backdrop-filter: blur(6px);
}
#app-loader.show{display:flex}

.spinner{
  width:46px;height:46px;
  border:4px solid rgba(255,255,255,.18);
  border-top-color:#fff;
  border-radius:50%;
  animation:spin .8s linear infinite;
  box-shadow:0 14px 30px rgba(0,0,0,.35);
}
@keyframes spin{to{transform:rotate(360deg)}}

/* Results */
.result-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:10px 0;
  border-bottom:1px dashed rgba(255,255,255,.22);
}
.result-row:last-child{border-bottom:none}

.result-row .label{
  font-size:13px;
  color:rgba(255,255,255,.76);
}
.result-row .value{
  font-weight:900;
  text-align:right;
  max-width:60%;
  word-break:break-word;
}

.highlight{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
}

/* Status blocks */
.status-title{
  font-weight:950;
  letter-spacing:.35px;
  margin-bottom:6px;
}
.status-text{
  font-size:14px;
  color:rgba(255,255,255,.84);
  margin-bottom:16px;
  line-height:1.45;
}

.rank-box{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.12));
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  padding:18px;
  text-align:center;
  box-shadow:0 18px 40px rgba(0,0,0,.22);
}

.rank-label{font-size:13px;color:rgba(255,255,255,.78)}
.rank-value{
  font-size:52px;
  font-weight:950;
  margin:6px 0;
  letter-spacing:.6px;
  text-shadow:0 12px 26px rgba(0,0,0,.38);
}
.rank-note{font-size:12px;color:rgba(255,255,255,.78)}

/* Small polish */
select.select{
  appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.8) 50%),
    linear-gradient(135deg, rgba(255,255,255,.8) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 2px),
    calc(100% - 12px) calc(50% - 2px);
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
  padding-right:42px;
}