/*
// ------------------------------------------------------------------------------
// Author:  HAKROS INTERACTIVE
// Website: https://www.hakros.com/
// Project: ULTRASEARCH
// Website: https://ultrasearch.hakros.com/
// Created: JUNE 2026
// ------------------------------------------------------------------------------
*/

:root{
  --bg:#2b3035;
  --bg-2:#343a40;
  --panel:#343a40;
  --panel-2:#3d454d;
  --line:#4b5964;
  --line-soft:#414a52;
  --txt:#f2f5f7;
  --txt-dim:#c5ced6;
  --txt-faint:#98a3ad;
  --amber:#59b8ff;
  --brand:#59b8ff;
  --amber-dim:#6ca5cc;
  --shadow:0 8px 24px rgba(0,0,0,.22);
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box}

html,body{
  width:100%;
  height:100%;
  margin:0;
}

body{
  background:var(--bg);
  color:var(--txt);
  font-family:var(--sans);
  font-size:14px;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}

/* Same DRB-style top header */
header{
  height:59px;
  display:flex;
  align-items:center;
  padding:10px 14px;
  background:var(--panel);
  border-bottom:1px solid var(--line);
}

.brand{
  display:flex;
  align-items:center;
  gap:11px;
  user-select:none;
}

.brand-text{
  gap:4px;
  white-space:nowrap;
  line-height:1;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:16px;
  font-weight:800;
  letter-spacing:.02em;
}

.brand-hakros{
  color:#59b8ff;
}

.brand-ultrasearch{
  color:#f2f5f7;
}


.brand .mark{
  width:38px;
  height:38px;
  border-radius:50%;
  background:var(--brand);
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  font-weight:800;
  font-size:13px;
  letter-spacing:.04em;
  color:#20262b;
}

.brand .wm{
  line-height:1;
}

.brand .n1{
  font-weight:800;
  font-size:11px;
  letter-spacing:.30em;
  color:var(--brand);
}

.brand .n2{
  margin-top:4px;
  font-weight:700;
  font-size:16.5px;
  letter-spacing:.10em;
  color:#f2f5f7;
  text-transform:uppercase;
}

/* Main choice area */
main{
  height:calc(100% - 59px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:30px;
}

.choices{
  width:min(100%, 662px);
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:22px;
}

.choices .choice:last-child{
  grid-column:auto;
}

.choice{
  min-height:150px;
  padding:26px 24px;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--panel);
  color:var(--txt);
  text-decoration:none;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:9px;
  cursor:pointer;
  box-shadow:var(--shadow);
  transition:
    border-color .12s ease,
    background .12s ease,
    transform .12s ease,
    box-shadow .12s ease;
}

.choice:hover{
  border-color:var(--amber-dim);
  background:var(--bg-2);
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(0,0,0,.30);
}

.choice:active{
  transform:translateY(0);
}

.choice:focus-visible{
  outline:2px solid var(--amber);
  outline-offset:3px;
}

.choice .primary{
  color:var(--amber);
  font-size:22px;
  line-height:1;
  font-weight:800;
  letter-spacing:.08em;
}

.choice .secondary{
  color:var(--txt-dim);
  font-size:12px;
  line-height:1.2;
  font-weight:700;
  letter-spacing:.14em;
}

.choice .icon{
  width:32px;
  height:32px;
  margin-bottom:4px;
  color:var(--txt-dim);
  display:flex;
  align-items:center;
  justify-content:center;
}

.choice:hover .icon{
  color:var(--amber);
}

.choice svg{
  width:28px;
  height:28px;
  display:block;
}

@media (max-width:720px){
  body{overflow:auto}

  header{
    height:auto;
    min-height:59px;
  }

  .brand .n2{
    font-size:13px;
    letter-spacing:.07em;
  }

  main{
    height:auto;
    min-height:calc(100vh - 59px);
    padding:30px 18px;
  }

  .choices{
    width:min(100%, 340px);
    grid-template-columns:1fr;
  }

  .choice{
    min-height:135px;
  }
}