/* /v3/open/assets/open.css — v3 (mobile-first, modern, no iOS input zoom) */

/* ===== Variables & base ===== */
:root{
  --bg:#f6f9fc; --card:#fff; --ink:#0f172a; --muted:#64748b;
  --primary:#0ea5e9; --primary-2:#38bdf8;
  --border:#e6ecf5; --shadow:0 8px 24px rgba(2,6,23,.06);
  --safe-top: env(safe-area-inset-top); --safe-bottom: env(safe-area-inset-bottom);
}
*{ box-sizing:border-box; }
html,body{
  margin:0; padding:0; color:var(--ink); background:var(--bg);
  font-family: system-ui, Segoe UI, Arial, Helvetica, sans-serif;
}

/* ===== Appbar ===== */
header.appbar{
  position:sticky; top:0; z-index:30;
  background:var(--card); box-shadow:0 2px 6px rgba(2,6,23,.06);
}
header.appbar .bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:calc(10px + var(--safe-top)) 12px 10px 12px;
  gap:12px;
}
header.appbar h1{ margin:0; font-size:18px; }
header.appbar .eject{
  all:unset; cursor:pointer; display:inline-block; line-height:1;
  font-size:24px; padding:0; -webkit-tap-highlight-color:transparent;
}
header.appbar .eject:hover{ transform: scale(1.05); }

/* ===== Container ===== */
.container{
  max-width:860px; margin:0 auto; padding:10px 12px calc(12px + var(--safe-bottom));
}

/* ===== Card ===== */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:var(--shadow);
  padding:12px;
}

/* ===== Search bar ===== */
/* Ngăn iOS tự zoom: font-size tối thiểu 16px cho input */
.searchbar{
  position:relative; display:flex; align-items:center; gap:8px;
}
.searchbar input{
  flex:1 1 auto;
  font-size:16px;                 /* 👈 fix iOS zoom */
  line-height:1.35;
  padding:12px 96px 12px 12px;    /* chừa chỗ cho nút bên phải */
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff; color:var(--ink);
  outline:none;
}
.searchbar input::placeholder{ color:#94a3b8; }
.searchbar input:focus{
  border-color:#bae6fd;
  box-shadow:0 0 0 4px #e0f2fe;
}

.searchbar .primary{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  font-size:15px; font-weight:700;
  padding:10px 14px;
  border:0; border-radius:10px; cursor:pointer;
  color:#0b1220;
  /* Xanh nhạt */
  background:linear-gradient(180deg, #dbeafe, #93c5fd);
  box-shadow:0 2px 10px rgba(2,6,23,.08);
  -webkit-tap-highlight-color:transparent;
}

.searchbar .primary:active{ transform:translateY(-50%) scale(0.98); }

.hint{
  display:block; margin-top:8px; color:var(--muted); font-size:12px;
}
kbd{
  font:inherit; font-size:11px; padding:2px 6px; border-radius:6px;
  background:#eef2f7; border:1px solid #e2e8f0;
}

/* ===== Results ===== */
.results{
  margin-top:12px;
}
.results .item{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
  box-shadow:0 4px 16px rgba(2,6,23,.04);
}

/* ===== Footer ===== */
footer{
  padding:12px; text-align:center; color:var(--muted);
}

/* ===== Responsive ===== */
@media (max-width: 420px){
  header.appbar h1{ font-size:17px; }
  .searchbar input{ padding-right:90px; }
  .searchbar .primary{ padding:9px 12px; font-size:14px; }
}