:root{
  --bg:#f6f7fb;
  --card:#ffffff;
  --muted:#5f6673;
  --text:#0b1220;
  --brand:#b58a2b;
  --line:#e7e9f1;
  --ok:#14b86a;
  --danger:#e54545;
  --shadow: 0 12px 30px rgba(15, 23, 42, .08);
  --shadow2: 0 6px 18px rgba(15, 23, 42, .06);
  --pending:#b45309;
  --confirmed:#14b86a;
  --canceled:#e11d48;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:linear-gradient(180deg,#ffffff, var(--bg));
  color:var(--text)
}
a{color:inherit;text-decoration:none}

.container{max-width:1100px;margin:0 auto;padding:18px}

header{
  position:sticky;top:0;
  background:rgba(255,255,255,.82);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
  z-index:10
}

.topbar{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}

.brand{display:flex;gap:10px;align-items:center;min-width:220px}

.logoImg{
  width:56px;height:56px;
  object-fit:contain;
  border-radius:50%;
  background:#fff;
  border:2px solid rgba(181,138,43,.35);
  box-shadow:0 10px 22px rgba(15,23,42,.15);
  padding:6px;
  flex:0 0 auto;
}

.brand h1{font-size:20px;margin:0;letter-spacing:.4px}
.brand .sub{color:var(--muted);font-size:12px;margin-top:2px}

.nav{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
  margin-left:auto;
}

.pill{
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--muted);
  font-size:13px;
  background:#fff;
  box-shadow: var(--shadow2);
  white-space:nowrap;
  cursor:pointer;
}
.pill:hover{border-color:#cfd4e6;color:var(--text)}

.muted{color:var(--muted);line-height:1.7}

.btn{
  cursor:pointer;
  border:1px solid var(--line);
  background:#fff;
  color:var(--text);
  padding:10px 12px;
  border-radius:12px;
  box-shadow: var(--shadow2);
  min-height:44px;
}
.btn:hover{border-color:#cfd4e6}
.btnBrand{
  border-color:rgba(181,138,43,.38);
  background:rgba(181,138,43,.12)
}
.btnBrand:hover{border-color:rgba(181,138,43,.7)}

.box{
  border:1px solid var(--line);
  background:linear-gradient(180deg,#fff,#fbfcff);
  border-radius:18px;
  overflow:hidden;
  box-shadow:var(--shadow)
}

input,select,textarea{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--text);
  outline:none;
  box-shadow: var(--shadow2);
  min-height:44px;
}
input::placeholder{color:#8a92a3}
textarea{min-height:90px;resize:vertical}

.label{display:block;margin-top:10px;margin-bottom:6px;font-weight:700;color:var(--muted);font-size:13px}

footer{
  padding:18px 0 30px;
  color:var(--muted);
  border-top:1px solid var(--line);
  margin-top:18px
}

.loading{
  position:fixed;
  inset:0;
  background:rgba(255,255,255,.72);
  backdrop-filter: blur(6px);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:1000;
}
.loading.show{ display:flex; }
.loadingCard{
  width:min(320px, calc(100vw - 32px));
  padding:18px 16px;
  border-radius:18px;
  background:linear-gradient(135deg, rgba(181,138,43,.10), rgba(255,255,255,.92));
  border:1px solid rgba(231,233,241,.95);
  box-shadow: var(--shadow);
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:center;
}
.spin{
  width:28px;
  height:28px;
  border-radius:999px;
  border:3px solid rgba(11,18,32,.14);
  border-top-color: rgba(181,138,43,.95);
  animation: spin 0.9s linear infinite;
}
.loadingText{
  font-weight:700;
  color:var(--text);
  letter-spacing:.2px;
}
@keyframes spin{
  to{ transform: rotate(360deg); }
}

@media (max-width: 780px){
  .container{padding:14px}
  .logoImg{width:46px;height:46px}
  .brand h1{font-size:18px}
}