:root{
  --bg-1:#0e0f13;
  --bg-2:#12141a;
  --glass:rgba(255,255,255,0.06);
  --border:rgba(255,255,255,0.15);
  --text:#e8eaf0;
  --muted:#9aa0aa;
  --primary:#00ffd0;   /* neon violet */
  --primary-2:#00e5ff; /* cyan accent */
  --danger:#ff4d6d;
  --shadow:0 10px 30px rgba(0,0,0,.55);
}

@font-face {
  font-family: 'CeraPro';
  src: url('fonts/CeraPro-Italic.eot');
  src: local('Cera Pro Italic'), local('CeraPro-Italic'),
  url('fonts/CeraPro-Italic.eot?#iefix') format('embedded-opentype'),
  url('fonts/CeraPro-Italic.woff') format('woff'),
  url('fonts/CeraPro-Italic.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'CeraPro';
  src: url('fonts/CeraPro-Regular.eot');
  src: local('Cera Pro Regular'), local('CeraPro-Regular'),
  url('fonts/CeraPro-Regular.eot?#iefix') format('embedded-opentype'),
  url('fonts/CeraPro-Regular.woff') format('woff'),
  url('fonts/CeraPro-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'CeraPro';
  src: url('fonts/CeraPro-BlackItalic.eot');
  src: local('Cera Pro Black Italic'), local('CeraPro-BlackItalic'),
  url('fonts/CeraPro-BlackItalic.eot?#iefix') format('embedded-opentype'),
  url('fonts/CeraPro-BlackItalic.woff') format('woff'),
  url('fonts/CeraPro-BlackItalic.ttf') format('truetype');
  font-weight: 900;
  font-style: italic;
}

@font-face {
  font-family: 'CeraPro';
  src: url('fonts/CeraPro-Light.eot');
  src: local('Cera Pro Light'), local('CeraPro-Light'),
  url('fonts/CeraPro-Light.eot?#iefix') format('embedded-opentype'),
  url('fonts/CeraPro-Light.woff') format('woff'),
  url('fonts/CeraPro-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'CeraPro';
  src: url('fonts/CeraPro-BoldItalic.eot');
  src: local('Cera Pro Bold Italic'), local('CeraPro-BoldItalic'),
  url('fonts/CeraPro-BoldItalic.eot?#iefix') format('embedded-opentype'),
  url('fonts/CeraPro-BoldItalic.woff') format('woff'),
  url('fonts/CeraPro-BoldItalic.ttf') format('truetype');
  font-weight: bold;
  font-style: italic;
}

@font-face {
  font-family: 'CeraPro';
  src: url('fonts/CeraPro-Black.eot');
  src: local('Cera Pro Black'), local('CeraPro-Black'),
  url('fonts/CeraPro-Black.eot?#iefix') format('embedded-opentype'),
  url('fonts/CeraPro-Black.woff') format('woff'),
  url('fonts/CeraPro-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: 'CeraPro';
  src: url('fonts/CeraPro-Medium.eot');
  src: local('Cera Pro Medium'), local('CeraPro-Medium'),
  url('fonts/CeraPro-Medium.eot?#iefix') format('embedded-opentype'),
  url('fonts/CeraPro-Medium.woff') format('woff'),
  url('fonts/CeraPro-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'CeraPro';
  src: url('fonts/CeraPro-Bold.eot');
  src: local('Cera Pro Bold'), local('CeraPro-Bold'),
  url('fonts/CeraPro-Bold.eot?#iefix') format('embedded-opentype'),
  url('fonts/CeraPro-Bold.woff') format('woff'),
  url('fonts/CeraPro-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'CeraPro';
  src: url('fonts/CeraPro-Thin.eot');
  src: local('Cera Pro Thin'), local('CeraPro-Thin'),
  url('fonts/CeraPro-Thin.eot?#iefix') format('embedded-opentype'),
  url('fonts/CeraPro-Thin.woff') format('woff'),
  url('fonts/CeraPro-Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: 'CeraPro';
  src: url('fonts/CeraPro-MediumItalic.eot');
  src: local('Cera Pro Medium Italic'), local('CeraPro-MediumItalic'),
  url('fonts/CeraPro-MediumItalic.eot?#iefix') format('embedded-opentype'),
  url('fonts/CeraPro-MediumItalic.woff') format('woff'),
  url('fonts/CeraPro-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
}

@font-face {
  font-family: 'CeraPro';
  src: url('fonts/CeraPro-LightItalic.eot');
  src: local('Cera Pro Light Italic'), local('CeraPro-LightItalic'),
  url('fonts/CeraPro-LightItalic.eot?#iefix') format('embedded-opentype'),
  url('fonts/CeraPro-LightItalic.woff') format('woff'),
  url('fonts/CeraPro-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
}

@font-face {
  font-family: 'CeraPro';
  src: url('fonts/CeraPro-ThinItalic.eot');
  src: local('Cera Pro Thin Italic'), local('CeraPro-ThinItalic'),
  url('fonts/CeraPro-ThinItalic.eot?#iefix') format('embedded-opentype'),
  url('fonts/CeraPro-ThinItalic.woff') format('woff'),
  url('fonts/CeraPro-ThinItalic.ttf') format('truetype');
  font-weight: 100;
  font-style: italic;
}


html,body{height:100%;}
body{
  background:
          radial-gradient(1200px 600px at 10% -10%, rgba(138,92,255,.25), transparent 60%),
          radial-gradient(1000px 600px at 110% 10%, rgba(0,229,255,.18), transparent 60%),
          linear-gradient(180deg, var(--bg-1), var(--bg-2));
  color:var(--text);
  font-family:'CeraPro', system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
}

/* Navbar */
.navbar{
  background:rgba(20,22,28,.9);
  backdrop-filter: blur(14px);
  border-bottom:1px solid var(--border)!important;
}
.navbar .nav-link{color:var(--muted)!important; transition:.2s}
.navbar .nav-link:hover{color:#00ffd0!important}
.navbar-brand{color:#fff!important; font-weight:700}

.navbar .nav-link {
color: #fff !important;
  margin-right: 15px;
  font-size: 13px;
}
/* Cards */
.card{
  background: rgba(255,255,255,.04);
  border:1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  transition:.2s;
}
.card:hover{
  border-color:#00ffd0;
  transform:translateY(-2px);
}
.offcanvas.offcanvas-end {
  width: 800px !important;
}
.text-right {
  text-align: right !important;}
/* Buttons */
.btn{
  border-radius: 12px;
  border:1px solid transparent;
  transition:.15s;
}
.btn:active{ transform: translateY(1px) }
.btn-primary{
  background: #00ffd0;
  color:#000;
  border:none !important
}
a {
  color: #00ffd0;
}
.btn-primary:active{background:#00d9b1 !important;border:none !important;color: #000 !important;}
.btn-primary:hover{background:#00d9b1;border:none !important;color: #000;}
.btn-outline-secondary{border-color:var(--border); color:var(--text)}
.btn-outline-danger{border-color:rgba(255,99,132,.4); color:var(--danger)}
.btn-rounded{border-radius:999px}

/* Forms */
.form-control, .form-select{
  background: rgba(255,255,255,.05);
  border:1px solid var(--border);
  color:var(--text);
}
.form-control::placeholder{color:var(--muted)}
.form-control:focus, .form-select:focus{
  border-color: var(--primary);
  box-shadow:0 0 0 .25rem rgba(92, 255, 231, 0.25);
  background: rgba(255,255,255,.08);
  color:var(--text);
}

/* Tables */
.table{
  color:var(--text);
  background: rgba(255,255,255,.03);
  border-collapse:separate;
  border-spacing:0;
  border-radius:12px;
  overflow:hidden;
}
.table thead th{
  background: rgba(255,255,255,.06);
  font-weight:600;
  color:#cfd3dc;
  border-bottom:1px solid var(--border);
}
.table tbody tr{
  background: rgba(255,255,255,.02);
  border-bottom:1px solid var(--border);
  transition: background .15s;
}
.table tbody tr:hover{background: rgba(138,92,255,.08)}
.table td,.table th{border-color:var(--border)!important}
.table .btn{border-radius:8px}

/* Offcanvas */
.offcanvas{
  width:min(600px,100vw);
  background: rgba(20,22,28,.95);
  border-left:1px solid var(--border);
  color:var(--text);
}
.offcanvas-header{border-bottom:1px solid var(--border)}

/* Kanban */
.kb-column{min-width:280px; max-width:360px}
.kb-card{
  background: rgba(255,255,255,.05);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow: var(--shadow);
  position:relative;
  transition:.2s;
}
.kb-card:hover{border-color: transparent !important}
.kb-card:before{
  content:""; position:absolute; inset:-1px; border-radius:14px;
  background: linear-gradient(135deg, rgba(138,92,255,.35), rgba(0,229,255,.25));
  filter: blur(20px); opacity:.35; z-index:-1;
}
.sortable-ghost{opacity:.45}
.text-small-xs {
  font-size: 10px !important;
  line-height: 12px !important;
}
/* Gallery previews */
.preview-img{
  height:90px; width:140px; object-fit:cover;
  border-radius:10px; border:1px solid var(--border)
}

/* Badges & misc */
.badge.text-bg-light{background:rgba(255,255,255,.12)!important; color:#fff}
.text-muted{color:var(--muted)!important}

/* Login page */
.login-wrap{min-height:100vh; display:flex; align-items:center;}
.login-card{
  background: rgba(255,255,255,.05);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow: var(--shadow);
}

/* Charts (Chart.js) */
canvas{background: transparent}

/* Utilities */
.shadow-soft{ box-shadow: var(--shadow) }
.border-glass{ border:1px solid var(--border) }
.bg-glass{ background: var(--glass) }