@import url('https://fonts.googleapis.com/css2?family=Satisfy&family=EB+Garamond:wght@400;600&display=swap');

:root{
  --bg:#0b1020;
  --ink:#e6e6f0;
  --muted:#b5c0d0;
  --accent:#f3d7b7;
  --brand:#4971c3;
  --panel:rgba(255,255,255,0.06);
  --border:rgba(255,255,255,0.12);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:radial-gradient(ellipse at top, rgba(45,64,89,.8), var(--bg) 60%), url('https://images.unsplash.com/photo-1519681393784-d120267933ba?q=80&w=1400&auto=format&fit=crop') fixed center/cover no-repeat; color:var(--ink); font-family:'EB Garamond', Georgia, serif;}

.container{max-width:1100px; margin:0 auto; padding:2rem 1rem;}
.header{position:sticky; top:0; z-index:50; backdrop-filter:blur(6px); background:rgba(0,0,0,.4); border-bottom:1px solid var(--border);}
.nav{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.9rem 1rem;}
.brand{display:flex; align-items:center; gap:.5rem; font-family:'Satisfy', cursive; font-size:1.6rem; color:#ffefc1; text-decoration:none;}
.navlinks{display:flex; gap:1rem; font-size:.95rem;}
.navlinks a{color:var(--ink); text-decoration:none; opacity:.9;}
.navlinks a:hover{color:#ffec99;}
.btn{display:inline-flex; align-items:center; gap:.5rem; border-radius:12px; padding:.5rem .8rem; font-size:.85rem; border:none; cursor:pointer; color:#0b1020; background:#6473ff20; color:#e8ebff; border:1px solid var(--border);}
.btn.primary{background:#ffcc66; color:#161616; border-color:#d3aa54;}
.btn.ghost{background:transparent; color:var(--ink);}

h1,h2,h3{margin:0 0 .6rem 0;}
h1{font-size:2.2rem; color:#ffecbf;}
h2{font-size:1.6rem; color:#ffe3a3;}
h3{font-size:1.2rem; color:#e8e6ff;}

.panel{background:var(--panel); border:1px solid var(--border); border-radius:18px; padding:1rem;}
.grid{display:grid; gap:1rem;}
.grid-2{grid-template-columns:1fr;}
@media(min-width:900px){ .grid-2{grid-template-columns:1fr 1fr;} }

.hero{display:grid; grid-template-columns:1fr; gap:1rem; align-items:center;}
@media(min-width:900px){ .hero{grid-template-columns:1.2fr .9fr;} }
.hero img{width:100%; height:320px; object-fit:cover; border-radius:22px; border:1px solid var(--border); box-shadow:0 10px 30px rgba(0,0,0,.5);}
.hero .tag{position:absolute; bottom:10px; left:10px; background:rgba(0,0,0,.55); padding:.3rem .6rem; font-size:.78rem; border-radius:999px; border:1px solid var(--border)}

.card{background:rgba(255,255,255,.05); border:1px solid var(--border); border-radius:16px; overflow:hidden;}
.card img{width:100%; height:220px; object-fit:cover;}
.card .card-body{padding:.7rem .9rem; display:flex; align-items:center; justify-content:space-between; gap:.5rem;}
.card .title{font-size:.95rem; opacity:.9}

.toolbar{display:flex; gap:.5rem; align-items:center; justify-content:flex-end; margin-bottom:.7rem;}
.badge{display:inline-flex; align-items:center; gap:.4rem; padding:.25rem .6rem; border-radius:999px; font-size:.75rem; background:rgba(0,0,0,.45); border:1px solid var(--border); color:#fff;}

.list{display:grid; gap:.8rem;}
.list .item{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.7rem .9rem; border:1px solid var(--border); border-radius:14px; background:rgba(255,255,255,.05)}

.footer{border-top:1px solid var(--border); background:rgba(0,0,0,.4); text-align:center; padding:1.2rem; font-size:.8rem; color:#cfd6e6;}
.input, textarea{width:100%; background:rgba(0,0,0,.35); border:1px solid var(--border); color:var(--ink); padding:.55rem .7rem; border-radius:12px; font-size:.95rem;}
label{font-size:.86rem; opacity:.85; margin-bottom:.2rem; display:block;}
.formgrid{display:grid; gap:.7rem;}
@media(min-width:900px){ .formgrid{grid-template-columns:1fr 1fr;} .formgrid .full{grid-column:1/-1;} }

/* Drag styling */
.draggable{cursor:grab;}
.draggable:active{cursor:grabbing;}
.drag-over{outline:2px dashed #ffd57a; outline-offset:2px; border-radius:14px;}
.hint{position:absolute; top:10px; right:10px; font-size:.72rem; opacity:.9;}