:root{
  --bg:#0a0b13;
  --card:#151827;
  --card2:#1a1f33;
  --line:#2a3150;
  --text:#f4f6ff;
  --muted:#adb6d9;
  --brand:#ff4f8b;
  --brand2:#7d5cff;
}
*{box-sizing:border-box}
body{
  margin:0;
  min-height:100vh;
  background:radial-gradient(circle at 10% 0%,#211035 0%,#101223 50%,#0a0b13 100%);
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  display:flex;
  justify-content:center;
  padding:12px;
}
.phone{
  width:min(460px,100%);
  background:rgba(11,13,24,.74);
  border:1px solid #293051;
  border-radius:24px;
  padding:14px;
  box-shadow:0 20px 60px rgba(0,0,0,.45);
}
.app-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:10px;
}
.app-header h1{
  margin:0;
  font-size:1.55rem;
  line-height:1;
  background:linear-gradient(120deg,var(--brand),var(--brand2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.app-header p{margin:4px 0 0;color:var(--muted);font-size:.84rem}
.auth-pill{font-size:.73rem;padding:6px 10px;border-radius:999px;background:#1a1f34;border:1px solid var(--line);color:var(--muted)}

.trial-strip{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.trial-strip span{font-size:.72rem;background:#1a1f34;border:1px solid var(--line);padding:6px 9px;border-radius:999px}

.tab-content{display:none}
.tab-content.active{display:block}

.date-card{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line);height:400px;background:#101320}
.date-card img{width:100%;height:100%;object-fit:cover;display:block}
.date-overlay{position:absolute;left:0;right:0;bottom:0;padding:14px;background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.82) 68%)}
.date-overlay h2{margin:0 0 4px}
.date-overlay p{margin:0;color:#e2e7ff;font-size:.91rem}
.badge-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.badge-row span{font-size:.73rem;padding:5px 8px;border-radius:999px;background:rgba(255,255,255,.16)}

.swipe-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}
.action{border:0;border-radius:12px;padding:12px;background:linear-gradient(120deg,var(--brand),var(--brand2));color:#fff;font-weight:700}
.action.ghost{background:#252b45}

.panel{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
  margin:10px 0;
}
.panel h3{margin:0 0 8px;font-size:1rem}

input,textarea{
  width:100%;
  border:1px solid #323a60;
  background:var(--card2);
  color:#fff;
  border-radius:10px;
  padding:10px;
  font:inherit;
  margin-top:8px;
}
input:focus,textarea:focus{outline:none;border-color:#8677ff}

button{
  width:100%;
  border:0;
  border-radius:10px;
  margin-top:9px;
  padding:10px;
  background:linear-gradient(120deg,var(--brand),var(--brand2));
  color:#fff;
  font-weight:700;
  cursor:pointer;
}
button.danger{background:linear-gradient(120deg,#ff5d62,#ff8655)}

.output pre{margin:0;background:#0e1120;border:1px solid #323a60;border-radius:10px;padding:10px;min-height:120px;max-height:250px;overflow:auto;white-space:pre-wrap}

.bottom-nav{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:6px;
  margin-top:10px;
  position:sticky;
  bottom:8px;
  background:rgba(12,14,24,.95);
  padding:8px;
  border:1px solid var(--line);
  border-radius:14px;
}
.bottom-nav .tab{
  border:1px solid var(--line);
  background:#1b2036;
  color:#d8defb;
  padding:8px 6px;
  border-radius:9px;
  font-size:.78rem;
  font-weight:700;
  cursor:pointer;
}
.bottom-nav .tab.active{background:linear-gradient(120deg,var(--brand),var(--brand2));border-color:transparent;color:#fff}