:root{
  --bg:#00060d;
  --fg:#d6ecff;
  --accent:#39d0ff;
  --panel:#031225;
  --line:#0e2541;
  --shadow:0 0 24px rgba(57,208,255,.25), 0 0 48px rgba(255,61,242,.08);
}

/* UI font */
@font-face{font-family:"AppFont";src:url("./assets/fonts/AppFont.ttf") format("truetype");font-display:swap;}

/* Signature fonts (alphabetical) */
@font-face{font-family:"Allura";src:url("./assets/fonts/Allura-Regular.ttf") format("truetype");font-display:swap;}
@font-face{font-family:"GreatVibes";src:url("./assets/fonts/GreatVibes-Regular.ttf") format("truetype");font-display:swap;}
@font-face{font-family:"Sacramento";src:url("./assets/fonts/Sacramento-Regular.ttf") format("truetype");font-display:swap;}
@font-face{font-family:"Satisfy";src:url("./assets/fonts/Satisfy-Regular.ttf") format("truetype");font-display:swap;}
@font-face{font-family:"Tangerine";src:url("./assets/fonts/Tangerine-Regular.ttf") format("truetype");font-display:swap;}

*{box-sizing:border-box}
html,body{
  height:100%;
  margin:0;
  background:
    radial-gradient(1200px 600px at 20% -10%, #001933 0%, #00060d 60%, #000 100%),
    var(--bg);
  color:var(--fg);
  font-family: AppFont, "DejaVu Sans Mono", "Courier New", monospace;
  letter-spacing:.3px;
}

/* Header with logo right */
.brand{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:16px; padding:28px 20px 8px;
}
.brand-left h1{margin:0; font-size:52px; text-shadow:var(--shadow)}
.brand-left .accent{color:var(--accent)}
.brand-left .tag{margin:4px 0 0; color:#9ed0ff; font-size:20px}
.brand-right .logo{
  height:48px; width:auto; filter: drop-shadow(0 0 12px rgba(57,208,255,.35));
}

/* 2-column layout */
.grid-2{display:grid; gap:16px; padding:16px 20px 20px; grid-template-columns:1fr 1fr;}
@media (max-width:980px){ .grid-2{grid-template-columns:1fr} }

.panel{
  background: linear-gradient(180deg, rgba(3,18,37,.6), rgba(3,18,37,.3));
  border:1px solid var(--line); border-radius:16px; padding:16px; box-shadow:var(--shadow);
}
.panel.sub{ margin-top:12px; background: linear-gradient(180deg, rgba(3,18,37,.45), rgba(3,18,37,.2)); }
h2{margin:6px 0 10px; font-size:28px; color:var(--accent); font-weight:normal}

input,select,button{
  font-family: inherit; font-size:18px; color:var(--fg);
  background:#071a33; border:1px solid var(--line); border-radius:12px; padding:8px 12px;
}
button{cursor:pointer; transition:border-color .2s, box-shadow .2s}
button:hover{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent)}
button:disabled{opacity:.5; cursor:not-allowed}
select{background-image: linear-gradient(to bottom, #071a33, #021126)}

.row{display:flex; gap:10px; align-items:center; margin:10px 0}
.wrap{flex-wrap:wrap}
.gap12{gap:12px}
.minw-280{min-width:280px}
.hint{color:#9ed0ff; font-size:15px}
.micro{color:#88a7c7; font-size:13px}

canvas{
  width:100%; height:auto; border:1px dashed var(--accent);
  border-radius:12px; background:#031225; margin-top:6px;
}

/* Ad area (replace with AdSense on deploy) */
.ad-bottom{
  display:flex; justify-content:center; align-items:center;
  padding:14px 20px 28px; margin-top:6px;
}
.ad-placeholder{
  width:728px; max-width:100%; height:90px;
  border:1px dashed #2a74a0; border-radius:12px; color:#9ed0ff;
  display:flex; align-items:center; justify-content:center;
  background: #04162d;
}

/* Sliders */
input[type="range"]{accent-color: var(--accent); cursor:pointer; height:6px; border-radius:6px}

/* Dropdown */
select option{background-color:#031225; color:var(--fg)}

/* Links */
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

/* Scrollbar */
::-webkit-scrollbar{width:10px; height:10px}
::-webkit-scrollbar-thumb{background: var(--accent); border-radius:5px}
::-webkit-scrollbar-track{background:#021126}