@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');
/* public/assets/app.css */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');
:root{
  --bg:#0b1220;
  --card:#0f1a2e;
  --muted:#93a4c7;
  --text:#e8eefc;
  --line:rgba(255,255,255,.08);
  --accent:#6ea8fe;
  --ok:#2dd4bf;
  --danger:#fb7185;
}

body.panel{
  /* Clean corporate light theme */
  --bg:#f5f6f8;
  --card:#ffffff;
  --muted:#6b7280;
  --text:#0f172a;
  --line:#e5e7eb;
  --accent:#0a6a52;
  --accent-2:#0b8a6a;
  background:var(--bg);
  color:var(--text);
  font-family:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;
}

body.panel h1, body.panel h2, body.panel h3{font-family:'Montserrat',inherit}
body.panel h1{font-weight:800}
body.panel h2{font-weight:800;letter-spacing:.2px}
body.panel h3{font-weight:700}

body.panel .topbar{background:rgba(255,255,255,.85);backdrop-filter: blur(10px);border-bottom:1px solid var(--line)}
body.panel .card{
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 10px 30px rgba(2,6,23,.06);
}
body.panel .label, body.panel .lbl{color:#4b5563}
body.panel .input{
  background:#fff;
  color:var(--text);
  border:1px solid var(--line);
  border-radius:14px;
}
body.panel .input:focus{border-color:rgba(10,106,82,.45);box-shadow:0 0 0 4px rgba(10,106,82,.10)}
body.panel .btn{background:#fff;border:1px solid var(--line);color:var(--text)}
body.panel .btn:hover{background:#f8fafc}
body.panel .btn.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
body.panel .btn.btn-primary:hover{background:var(--accent-2);border-color:var(--accent-2)}

/* Color picker rows */
.color-row{display:flex;align-items:center;gap:10px}
input.color{width:46px;height:46px;border-radius:12px;border:1px solid var(--line);padding:0;background:#fff;cursor:pointer}
input.color::-webkit-color-swatch-wrapper{padding:6px}
input.color::-webkit-color-swatch{border:none;border-radius:10px}

body.panel .container{max-width:1180px}
.navlabel{font-weight:800; margin-right:6px}

/* Panel layout (sidebar + content) */
.panel-layout{max-width:1180px;margin:0 auto;display:flex;gap:18px;padding:18px}
.sidebar{width:260px;flex:0 0 260px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px;position:sticky;top:74px;height:fit-content}
.sidebar-title{font-size:12px;color:var(--muted);font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}
.side-link{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:14px;border:1px solid transparent;color:var(--text);font-weight:700;opacity:.95}
.side-link:hover{background:#f8fafc;border-color:var(--line);opacity:1}
.side-link.active{background:rgba(10,106,82,.10);border-color:rgba(10,106,82,.25);color:var(--text)}

.side-sep{height:1px;background:var(--line);margin:8px 6px;border-radius:999px}
.side-ico{width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;color:var(--accent);flex:0 0 20px}
.side-ico svg{width:20px;height:20px;fill:currentColor}

.side-ico{width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;color:var(--accent)}
.side-ico svg{width:20px;height:20px}
.panel-main{flex:1}
@media(max-width:960px){
  .panel-layout{flex-direction:column}
  .sidebar{width:100%;position:relative;top:auto}
}

/* Panel modals */
.modal-wide{max-width:920px}
.modal-iframe{width:100%;height:70vh;border:1px solid var(--line);border-radius:16px;background:#fff}



.nav{display:flex;align-items:center;gap:10px}
.navico{width:18px;height:18px;fill:currentColor;opacity:.92}

/* Top nav pills (panel) */
.navpill{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border-radius:999px;
  border:1px solid var(--line);background:#fff;color:var(--text);font-weight:700;cursor:pointer}
.navpill:hover{background:#f8fafc}
.navpill span{font-weight:700}

/* On dark (non-panel) keep existing look */
body:not(.panel) .navpill{background:rgba(255,255,255,.04);color:var(--text)}
body:not(.panel) .navpill:hover{background:rgba(255,255,255,.06)}


.muted{color:var(--muted)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(max-width:860px){.grid2{grid-template-columns:1fr}}
.row{display:flex;align-items:center}
.lbl{display:block;font-size:12px;color:var(--muted);font-weight:700;margin-bottom:6px}
.socicon{color:var(--accent);display:inline-flex}
.socicon svg{width:26px;height:26px}

/* App-style social icon tiles */
.app-tiles{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px}
.app-tile{display:flex;flex-direction:column;align-items:center;gap:8px}
.app-icon{width:58px;height:58px;display:flex;align-items:center;justify-content:center;border-radius:16px;box-shadow:0 10px 22px rgba(2,6,23,.10)}
.app-icon svg{width:58px;height:58px;display:block}
.app-tile b{font-size:12px;letter-spacing:.2px}

*{box-sizing:border-box}
body{margin:0;font-family:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial; background:linear-gradient(180deg,#070b15 0%, #0b1220 30%, #070b15 100%); color:var(--text);}
body.panel{background:var(--bg)}
a{color:inherit;text-decoration:none}
.container{max-width:1080px;margin:0 auto;padding:18px}
.topbar{position:sticky;top:0;background:rgba(7,11,21,.6);backdrop-filter: blur(10px); border-bottom:1px solid var(--line); z-index:20}
.topbar-inner{display:flex;align-items:center;justify-content:space-between}
.brand a{font-weight:700; letter-spacing:.3px}
.alert{padding:12px 14px;border-radius:14px;margin:12px 0;border:1px solid var(--line); background:rgba(255,255,255,.03)}
.alert-danger{border-color:rgba(251,113,133,.35); color:#ffd1d8}
.alert-ok{border-color:rgba(45,212,191,.35); color:#c9fff7}
/* In panel (light) use a clear green success message */
body.panel .alert-ok{
  border-color: rgba(16,185,129,.35);
  background: #ecfdf5;
  color: #065f46;
}
body.panel .alert-ok{background:#ecfdf5; border-color:#10b98133; color:#065f46}
.grid{display:grid; gap:14px}
.grid-2{grid-template-columns:1fr 1fr}
@media(max-width:860px){.grid-2{grid-template-columns:1fr}}
.card{background:rgba(15,26,46,.7); border:1px solid var(--line); border-radius:22px; padding:16px; box-shadow: 0 10px 40px rgba(0,0,0,.35)}
.card h2{margin:0 0 10px 0;font-size:18px}
.input{width:100%; padding:12px 12px;border-radius:14px;border:1px solid var(--line); background:rgba(255,255,255,.02); color:var(--text); outline:none}
.input:focus{border-color: rgba(110,168,254,.5)}
.label{display:block; margin:12px 0 6px; color:var(--muted); font-size:13px}
.btn{display:inline-flex;align-items:center;justify-content:center; gap:8px; padding:11px 14px;border-radius:14px;border:1px solid var(--line); background:rgba(255,255,255,.04); color:var(--text); cursor:pointer}
.btn:hover{background:rgba(255,255,255,.06)}
.btn-primary{border-color: rgba(110,168,254,.45); background: rgba(110,168,254,.12)}
.btn-danger{border-color: rgba(251,113,133,.45); background: rgba(251,113,133,.10)}
.btn-ok{border-color: rgba(45,212,191,.45); background: rgba(45,212,191,.10)}
.row{display:flex; gap:10px; flex-wrap:wrap}
.table{width:100%; border-collapse:separate; border-spacing:0 10px}
.table th{color:var(--muted); font-weight:600; text-align:left; font-size:13px; padding:0 10px}
.table td{padding:12px 10px; background:rgba(255,255,255,.03); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.table tr td:first-child{border-left:1px solid var(--line); border-top-left-radius:16px; border-bottom-left-radius:16px}
.table tr td:last-child{border-right:1px solid var(--line); border-top-right-radius:16px; border-bottom-right-radius:16px}
.badge{display:inline-flex; padding:5px 10px; border-radius:999px; border:1px solid var(--line); color:var(--muted); font-size:12px}
.footer{border-top:1px solid var(--line); margin-top:26px; padding:18px 0; color:var(--muted)}
hr.sep{border:none;border-top:1px solid var(--line); margin:14px 0}

/* Public profile page */
.profile-wrap{max-width:720px;margin:0 auto}
.profile-card{border-radius:26px; overflow:hidden}
.profile-top{padding:18px; display:flex; gap:14px; align-items:center}
.avatar{width:74px;height:74px;border-radius:18px; object-fit:cover; border:1px solid var(--line); background:rgba(255,255,255,.04)}
.pname{font-size:22px;font-weight:800;margin:0}
.pmeta{color:var(--muted); margin-top:4px}
.actions{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; padding:0 18px 18px}
@media(max-width:520px){.actions{grid-template-columns:repeat(2,1fr)}}
.action{padding:12px;border-radius:18px;border:1px solid var(--line); background:rgba(255,255,255,.03); text-align:center}
.action small{display:block;color:var(--muted); margin-top:6px}
.section{padding:18px}
.item{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 12px; border-radius:18px; border:1px solid var(--line); background:rgba(255,255,255,.02); margin-bottom:10px}
.item .left{display:flex; flex-direction:column}
.item .k{color:var(--muted); font-size:12px}
.item .v{font-weight:600}
.iconbtn{padding:10px 12px;border-radius:14px;border:1px solid var(--line); background:rgba(255,255,255,.03)}
.modal{position:fixed; inset:0; display:none; align-items:center; justify-content:center; padding:18px; background:rgba(0,0,0,.55); z-index:50}
.modal.open{display:flex}
.modal-card{max-width:520px;width:100%; background:rgba(15,26,46,.92); border:1px solid var(--line); border-radius:22px; padding:16px}
.modal-wide{max-width:960px}
.modal-iframe{width:100%; height:70vh; border:1px solid var(--line); border-radius:16px; background:#fff}
body.panel .modal-card{background:#fff; color:var(--text)}
.modal-header{display:flex;align-items:center;justify-content:space-between}
.modal-header h3{margin:0;font-size:16px}

.hint{font-size:12px;color:#6b7280;margin-top:6px}


/* Accordion (panel) */
.accordion .acc-item{border:1px solid var(--line);border-radius:16px;margin-bottom:10px;overflow:hidden;background:var(--card)}
.accordion .acc-sum{list-style:none;cursor:pointer;padding:14px 14px;font-weight:700;display:flex;align-items:center;justify-content:space-between}
.accordion .acc-sum::-webkit-details-marker{display:none}
.accordion .acc-sum:after{content:'+';font-size:18px;color:var(--muted)}
.accordion details[open] .acc-sum:after{content:'–'}
.accordion .acc-body{padding:0 14px 14px 14px}
.link{color:var(--accent);text-decoration:none;font-weight:700}
.link:hover{text-decoration:underline}


/* (end) */
.side-link:hover{
  background:#f7fafc;
  border-color:#e7eaee;
}
.side-link.active{
  background:linear-gradient(180deg, rgba(10,106,82,.12), rgba(10,106,82,.08));
  border-color:rgba(10,106,82,.25);
}
.side-link.active .side-ico{
  background:var(--accent);
  color:#fff;
}
.side-txt{line-height:1.1}

body.panel .card{
  border:1px solid #e7eaee;
  border-radius:22px;
  box-shadow:0 18px 50px rgba(2,6,23,.06);
}
body.panel .card h1, body.panel .card h2{
  color:#0b1220;
}
body.panel input, body.panel select, body.panel textarea{
  background:#fff;
  border:1px solid #e7eaee;
  border-radius:14px;
  padding:11px 12px;
  outline:none;
  box-shadow:0 0 0 0 rgba(10,106,82,0);
  transition:.15s ease;
}
body.panel input:focus, body.panel select:focus, body.panel textarea:focus{
  border-color:rgba(10,106,82,.45);
  box-shadow:0 0 0 4px rgba(10,106,82,.12);
}
body.panel .btn{
  border-radius:14px;
  padding:10px 14px;
  font-weight:800;
}
body.panel .btn.btn-primary{
  background:var(--accent);
  border-color:var(--accent);
  box-shadow:0 10px 20px rgba(10,106,82,.22);
}
body.panel .btn.btn-primary:hover{
  filter:brightness(.98);
}
body.panel .btn.btn-outline{
  background:#fff;
  border:1px solid #e7eaee;
}
body.panel .btn.btn-outline:hover{border-color:#cfd6dd}

body.panel .alert{
  border-radius:16px;
  border:1px solid #e7eaee;
  box-shadow:0 10px 25px rgba(2,6,23,.06);
}



/* Premium social preview tiles (panel) */
.social-preview{display:flex; gap:12px; flex-wrap:wrap}
.social-preview .s-btn{
  width:56px; height:56px;
  border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  background:#fff;
  border:1px solid rgba(15,23,42,.06);
  box-shadow:0 10px 24px rgba(2,6,23,.08);
}
.social-preview .s-img{width:44px;height:44px;border-radius:12px;display:block}
.social-preview .s-instagram{background:linear-gradient(135deg,#F58529,#DD2A7B,#8134AF,#515BD4)}