:root{
  --bg:#f7f8fc;
  --bg-2:#eef2f7;
  --bg-gradient:radial-gradient(circle at top left,#fff4e6 0,#f8fafc 38%,#eef2ff 100%);
  --panel:rgba(255,255,255,.72);
  --panel-2:rgba(255,255,255,.94);
  --line:rgba(15,23,42,.10);
  --text:#111827;
  --muted:#64748b;
  --accent:#ff9f43;
  --accent-2:#6c5ce7;
  --good:#16a34a;
  --warn:#d97706;
  --danger:#dc2626;
  --shadow:0 20px 70px rgba(15,23,42,.10);
  --soft-shadow:0 12px 36px rgba(15,23,42,.08);
  --radius:26px;
  --topbar-bg:rgba(255,255,255,.76);
  --input-bg:rgba(255,255,255,.92);
  --media-bg:#f1f5f9;
  --locked-text:rgba(15,23,42,.08);
}

html[data-theme="dark"]{
  --bg:#090a0f;
  --bg-2:#07070b;
  --bg-gradient:radial-gradient(circle at top left,#27202b 0,#090a0f 40%,#07070b 100%);
  --panel:rgba(255,255,255,.07);
  --panel-2:rgba(255,255,255,.10);
  --line:rgba(255,255,255,.14);
  --text:#f5f3ee;
  --muted:#a8abb8;
  --accent:#ffb56b;
  --accent-2:#ff6f91;
  --good:#62e6a8;
  --warn:#ffd166;
  --danger:#ff6b6b;
  --shadow:0 20px 80px rgba(0,0,0,.35);
  --soft-shadow:0 12px 40px rgba(0,0,0,.16);
  --topbar-bg:rgba(12,13,20,.72);
  --input-bg:rgba(0,0,0,.22);
  --media-bg:#111827;
  --locked-text:rgba(255,255,255,.12);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;
  background:var(--bg-gradient);
  color:var(--text);
  min-height:100vh;
  overflow-x:hidden;
  transition:background .25s ease,color .25s ease;
}
a{color:inherit;text-decoration:none}
p{color:var(--muted);line-height:1.7}
h1,h2,h3{letter-spacing:-.04em;margin:.2rem 0 .7rem;color:var(--text)}
h1{font-size:clamp(44px,7vw,92px);line-height:.92}
h2{font-size:clamp(30px,4vw,52px)}
h3{font-size:22px}
.container{width:min(1180px,92vw);margin:0 auto;padding:38px 0 70px}

.topbar{
  position:sticky;
  top:16px;
  z-index:50;
  width:min(1180px,92vw);
  margin:16px auto 0;
  padding:12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border:1px solid var(--line);
  background:var(--topbar-bg);
  backdrop-filter:blur(18px);
  border-radius:999px;
  box-shadow:var(--shadow);
}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:-.03em}
.brand-mark{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff;font-size:13px;box-shadow:0 10px 24px rgba(108,92,231,.20)
}
.nav{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.nav a:not(.btn){padding:10px 12px;color:var(--muted);font-size:14px;border-radius:999px}
.nav a:hover{color:var(--text);background:var(--panel)}
.theme-toggle{
  border:1px solid var(--line);
  background:var(--panel);
  color:var(--text);
  border-radius:999px;
  padding:9px 12px;
  min-height:38px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  cursor:pointer;
  font-family:inherit;
  font-weight:800;
  font-size:13px;
  box-shadow:var(--soft-shadow);
}
.theme-toggle:hover{border-color:rgba(255,159,67,.55)}
.theme-icon{font-size:15px;line-height:1}

.bg-orb{position:fixed;filter:blur(80px);opacity:.26;pointer-events:none;z-index:-1;transition:opacity .25s ease}
.orb-a{width:360px;height:360px;background:#ffb56b;left:-120px;top:120px}
.orb-b{width:440px;height:440px;background:#7c5cff;right:-160px;top:300px}
html[data-theme="dark"] .bg-orb{opacity:.42}

.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:center;padding:42px 0}
.eyebrow{
  display:inline-flex;
  padding:9px 14px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--accent-2);
  background:var(--panel);
  margin-bottom:18px;
  font-weight:800;
  font-size:13px;
  box-shadow:var(--soft-shadow);
}
html[data-theme="dark"] .eyebrow{color:var(--accent)}
.hero p{max-width:620px;font-size:18px}
.hero-card{
  min-height:520px;
  border-radius:42px;
  border:1px solid var(--line);
  background:linear-gradient(140deg,var(--panel-2),rgba(255,255,255,.35));
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
}
html[data-theme="dark"] .hero-card{background:linear-gradient(140deg,rgba(255,255,255,.12),rgba(255,255,255,.04))}
.hero-card:before{
  content:"";position:absolute;inset:12%;border:1px solid var(--line);border-radius:50%;
  box-shadow:0 0 80px rgba(255,181,107,.16)
}
.hero-preview{position:relative;height:100%}
.floating-card{
  position:absolute;
  padding:22px;
  border:1px solid var(--line);
  background:var(--panel-2);
  backdrop-filter:blur(16px);
  border-radius:28px;
  width:250px;
  box-shadow:var(--shadow);
}
html[data-theme="dark"] .floating-card{background:rgba(12,13,20,.72)}
.floating-card.one{top:54px;left:38px}
.floating-card.two{right:32px;top:205px}
.floating-card.three{left:72px;bottom:50px}
.stat-big{font-size:64px;font-weight:900;color:var(--accent)}

.grid{display:grid;gap:18px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card,.notice,.alert{
  border:1px solid var(--line);
  background:var(--panel);
  backdrop-filter:blur(18px);
  border-radius:var(--radius);
  padding:24px;
  box-shadow:var(--soft-shadow);
}
.card.hover{transition:.2s transform,.2s border-color,.2s background,.2s box-shadow}
.card.hover:hover{transform:translateY(-4px);border-color:rgba(255,159,67,.52);background:var(--panel-2);box-shadow:var(--shadow)}
.locked{position:relative;overflow:hidden}
.locked:after{content:"LOCKED";position:absolute;right:-26px;top:22px;transform:rotate(35deg);font-weight:900;color:var(--locked-text);font-size:42px}
.badge{
  display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:999px;
  border:1px solid var(--line);background:var(--panel-2);font-size:12px;font-weight:800;color:var(--text)
}
.badge.success{color:var(--good);border-color:rgba(22,163,74,.25)}
.badge.warn{color:var(--warn);border-color:rgba(217,119,6,.25)}
html[data-theme="dark"] .badge.success{border-color:rgba(98,230,168,.35)}
html[data-theme="dark"] .badge.warn{border-color:rgba(255,209,102,.35)}
.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:16px}
.btn,button.btn{
  border:1px solid var(--line);
  background:var(--panel);
  color:var(--text);
  border-radius:999px;
  padding:12px 18px;
  font-weight:800;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  font-family:inherit;
  box-shadow:var(--soft-shadow);
}
.btn:hover{border-color:rgba(255,159,67,.55)}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;border:0}
.btn.small{padding:8px 12px;min-height:34px;font-size:13px}
.btn.danger{color:#fff;border-color:rgba(220,38,38,.45);background:rgba(220,38,38,.82)}
html[data-theme="dark"] .btn.danger{background:rgba(255,107,107,.12);color:#fff}
.muted{color:var(--muted)}
.form{display:grid;gap:16px}
.form.full{margin-bottom:18px}
.field{display:grid;gap:8px}
label{font-size:13px;color:var(--muted);font-weight:700}
.input,input,select,textarea{
  width:100%;
  border:1px solid var(--line);
  background:var(--input-bg);
  color:var(--text);
  border-radius:18px;
  padding:13px 15px;
  outline:none;
  font-family:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
}
.input:focus,input:focus,select:focus,textarea:focus{border-color:rgba(255,159,67,.62);box-shadow:0 0 0 4px rgba(255,159,67,.12)}
textarea{min-height:120px;resize:vertical}
select option{color:#111;background:#fff}

.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);box-shadow:var(--soft-shadow)}
table{width:100%;border-collapse:collapse;min-width:760px}
th,td{padding:15px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}

.portfolio-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.portfolio-item{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--panel);box-shadow:var(--soft-shadow)}
.portfolio-media{height:220px;background:var(--media-bg);display:grid;place-items:center;color:var(--muted)}
.portfolio-media img,.portfolio-media video{width:100%;height:100%;object-fit:cover}
.portfolio-body{padding:16px}
.calendar{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.date-card{display:block;border:1px solid var(--line);background:var(--panel);border-radius:18px;padding:14px;cursor:pointer;box-shadow:var(--soft-shadow)}
.date-card input{display:none}
.date-card.booked{opacity:.52;cursor:not-allowed;background:rgba(220,38,38,.08)}
html[data-theme="dark"] .date-card.booked{background:rgba(255,107,107,.09)}
.date-card.selected{border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,159,67,.14)}
.alert{margin-bottom:16px}
.alert.success{border-color:rgba(22,163,74,.35);background:rgba(22,163,74,.08)}
.alert.error{border-color:rgba(220,38,38,.4);background:rgba(220,38,38,.08)}
.notice{color:var(--muted)}
.footer{width:min(1180px,92vw);margin:0 auto 30px;padding:24px;color:var(--muted);display:flex;justify-content:space-between;gap:14px;border-top:1px solid var(--line)}

@media(max-width:900px){
  .hero,.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .hero-card{min-height:420px}
  .portfolio-grid{grid-template-columns:1fr}
  .calendar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .topbar{align-items:flex-start;border-radius:28px;flex-direction:column}
  .nav{width:100%}
  .nav a,.theme-toggle{font-size:13px}
  .footer{flex-direction:column}
  .floating-card{position:relative;width:auto;margin:18px}
  .floating-card.one,.floating-card.two,.floating-card.three{top:auto;left:auto;right:auto;bottom:auto}
  .hero-card{height:auto}
  .hero-preview{height:auto;padding:10px}
}