:root{ --brand:#781531; --brand-2:#b83a56; --ink:#1b1b1b; --glass: rgba(255,255,255,0.70); --radius: 16px; --shadow: 0 18px 36px rgba(0,0,0,.22); }
*{box-sizing:border-box}
html,body,#root{height:100%;margin:0;padding:0;overflow-x:hidden;width:100%}
body{font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu; color:var(--ink); background:#efe6db}
.bg{position:fixed; inset:0; background:url('/background-800.jpg') center/cover no-repeat; filter:contrast(1.05) saturate(1.05); z-index:-2}
@media(min-width:601px){.bg{background:url('/background-1200.jpg') center/cover no-repeat}}
@media(min-width:1201px){.bg{background:url('/background-1920.jpg') center/cover no-repeat}}
.vg{position:fixed; inset:0; background: radial-gradient(ellipse at center, rgba(255,255,255,.4), rgba(255,255,255,.9) 65%, #f5eee5 100%); z-index:-1}
.container{width:100%;max-width:100vw;margin:0;padding:8px}
@media(min-width:640px){.container{padding:12px 16px}}
@media(min-width:1200px){.container{max-width:1100px;margin:0 auto}}

.container-with-nav{width:100%;max-width:100vw;margin:0;padding:8px;padding-top:20px}
@media(min-width:640px){.container-with-nav{padding:20px 16px}}
@media(min-width:768px){.container-with-nav{padding:20px 16px;padding-bottom:20px}}
@media(min-width:1200px){.container-with-nav{max-width:1100px;margin:0 auto}}
.header{display:flex;justify-content:center;padding:8px}
@media(min-width:640px){.header{padding:12px 8px}}
.header .logo-top img{width:min(90vw);width:max(300px);height:auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.25))}
.grid{display:grid;grid-template-columns:1fr;gap:12px;width:100%}
@media(min-width:640px){.grid{gap:16px}}
@media(min-width:900px){.grid{grid-template-columns:1.1fr .9fr}}
.card{background:var(--glass);backdrop-filter:blur(6px);border:1px solid rgba(120,21,49,.15);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;width:100%;min-width:0}
.card .head{padding:16px 20px;background:linear-gradient(180deg, rgba(120,21,49,.08), rgba(120,21,49,.02));border-bottom:1px solid rgba(120,21,49,.15);display:flex;justify-content:space-between;align-items:center;gap:12px}
.badge{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:rgba(120,21,49,.08);border:1px solid rgba(120,21,49,.22);color:var(--brand);font-weight:700;font-size:13px}
.content{padding:12px}
@media(min-width:640px){.content{padding:20px}}
label{font-size:13px;font-weight:700;color:#3d2330;margin-bottom:6px;display:block}
.control{display:flex;flex-direction:column}
input,select{padding:12px 14px;border:1px solid rgba(120,21,49,.25);border-radius:12px;background:#fff;font-size:15px;outline:none;width:100%;max-width:100%;box-sizing:border-box}
input:focus,select:focus{border-color:var(--brand-2);box-shadow:0 0 0 4px rgba(184,58,86,.15)}
.row{display:grid;grid-template-columns:1fr;gap:8px;width:100%}
@media(min-width:640px){.row{grid-template-columns:1fr 1fr;gap:12px}}
.phone-row{display:grid;grid-template-columns:130px 1fr;gap:12px;width:100%;max-width:100%}
.codebox{display:flex;align-items:center;justify-content:center;padding:12px 14px;border:1px solid rgba(120,21,49,.25);border-radius:12px;background:#fff;font-weight:800}
.help{font-size:12px;color:#806c6c}
.actions{margin-top:8px;display:flex;gap:10px;flex-wrap:wrap}
.btn{appearance:none;border:none;cursor:pointer;padding:12px 18px;border-radius:12px;font-weight:800;letter-spacing:.02em;box-shadow:var(--shadow)}
.btn--primary{background:linear-gradient(135deg, var(--brand), var(--brand-2));color:#fff}
.btn--ghost{background:transparent;color:var(--brand);border:1px solid rgba(120,21,49,.25)}
.side{display:grid;gap:14px}
.pill{padding:14px 16px;background:rgba(255,255,255,.85);border:1px solid rgba(120,21,49,.18);border-radius:14px;box-shadow:0 12px 24px rgba(0,0,0,.14)}
footer{text-align:center;padding:18px;font-size:12px;color:#7a6a6a}
.logo-top{display:flex;justify-content:center}
.qr{display:flex;justify-content:center;align-items:center;padding:16px}
table{width:100%;border-collapse:collapse;font-size:14px;min-width:0;table-layout:auto}
@media(max-width:640px){table{font-size:12px}}
th,td{padding:6px 4px;border-bottom:1px solid rgba(120,21,49,.15);text-align:left;word-break:break-word}
@media(min-width:640px){th,td{padding:8px}}
th{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#583544}
.search{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
input[type='search']{flex:1}

/* Phone Input Components */
.phone-input-container .country-selector:hover {
  background-color: rgba(120,21,49,.05) !important;
}

.phone-input-container .country-dropdown {
  scrollbar-width: thin;
  scrollbar-color: rgba(120,21,49,.3) transparent;
}

.phone-input-container .country-dropdown::-webkit-scrollbar {
  width: 6px;
}

.phone-input-container .country-dropdown::-webkit-scrollbar-track {
  background: transparent;
}

.phone-input-container .country-dropdown::-webkit-scrollbar-thumb {
  background-color: rgba(120,21,49,.3);
  border-radius: 3px;
}

/* PIN Input Components */
.pin-input-container input[type="text"],
.pin-input-container input[type="password"] {
  transition: all 0.2s ease;
}

.pin-input-container input[type="text"]:focus,
.pin-input-container input[type="password"]:focus {
  transform: scale(1.05);
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .phone-input-container .country-dropdown {
    width: 260px;
  }
  
  .pin-input-container input[type="text"],
  .pin-input-container input[type="password"] {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }
}