:root{
  --teal-900:#026f69; --teal-700:#5ad1c8; --teal-600:#0f7a6f;
  --paper:#f6f3ea; --paper-2:#efe9d8; --ink:#1c2420; --ink-soft:#4b564f;
  --gold:#b9862f; --gold-light:#e7c877; --red:#a5372f; --green:#2f6b46;
  --line:#c9c0a4; --white:#ffffff; --radius:2px;
  --shadow:0 2px 0 rgba(11,61,58,.06),0 12px 30px -14px rgba(11,61,58,.25);
  --gg:#0a383a;
  --teal-l:#c9efec2e;
}
@font-face {
    font-family: 'Inter';
    src: url('fonts/inter/Inter-VariableFont_opsz,wght.ttf') format('truetype');
    font-weight: 100 900; /* Supports all weights from thin to bold */
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Noto Sans Bengali';
    src: url('fonts/Noto_Sans_Bengali/NotoSansBengali-VariableFont_wdth,wght.ttf') format('truetype');
    font-weight: 400 700;       /* Restricts and maps the variable weights from 400 to 700 */
    font-style: normal;
    font-display: swap;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:radial-gradient(1200px 500px at 10% -10%,#eef3ea 0%,transparent 60%),#f6f3ea00;
  color:var(--ink); font-family: 'Inter', sans-serif; min-height:100vh; line-height:1.5;
}
.bn{font-family:'Noto Sans Bengali','Inter',sans-serif;}
h1,h2,h3,.display{font-family:'Fraunces',serif; letter-spacing:.01em;}
.mono{font-family:'IBM Plex Mono',monospace; letter-spacing:.02em;}
.app{min-height:100vh; display:flex; flex-direction:column;}
.letterhead{background:linear-gradient(180deg,var(--gg),var(--gg)); color:var(--white);
  padding:18px 22px; display:flex; align-items:center; gap:14px; border-bottom:2px solid var(--gold-light);}
.seal{width:46px; height:46px; flex:none;}
.letterhead .brand{display:flex; flex-direction:column;}
.letterhead .brand .top{font-family:'Fraunces',serif; font-weight:600; font-size:19px; letter-spacing:.02em;}
.letterhead .brand .sub{font-size:11.5px; opacity:1.82; letter-spacing:.09em; text-transform:uppercase; margin-top:2px;}
.letterhead .right{margin-left:auto; text-align:right; font-size:12px; opacity:.85;}
.letterhead .right a.btn-link{background:transparent; border:1px solid rgba(255,255,255,.5); color:var(--white);
  padding:6px 12px; border-radius:var(--radius); font-size:12px; cursor:pointer; text-decoration:none;}
.letterhead .right a.btn-link:hover{background:rgba(255,255,255,.12);}
.stage{flex:1; display:flex; justify-content:center; padding:34px 16px 60px;}
.container{width:100%; max-width:720px;}
.container.wide{max-width:1080px;}
.card{background:var(--white); border:1px solid var(--line); box-shadow:var(--shadow); border-radius:var(--radius); position:relative;border-radius: 10px;}
.card::before{content:""; position:absolute; inset:6px; border:1px solid var(--teal-600); opacity:.35; pointer-events:none; border-radius: 10px;}
.card-inner{padding:30px 34px; position:relative;}
.card-inner.tight{padding:22px 26px;}
.eyebrow{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); font-weight:700; margin-bottom:6px; text-align: center;}
.title{font-size:24px; font-weight:600; color:var(--teal-900); margin:0 0 4px; text-align: center;}
.desc{color:var(--ink-soft); font-size:14px; margin:0 0 22px;}
.field{margin-bottom:16px;}
.field label{display:block; font-size:12.5px; font-weight:600; color:var(--teal-900); margin-bottom:6px; letter-spacing:.02em;}
.field input,.field select{width:100%; padding:11px 12px; border:1.5px solid var(--line); border-radius:var(--radius);
  background:var(--paper); font-size:14.5px; font-family:'Inter'; color:var(--ink);}
.field input:focus,.field select:focus{outline:none; border-color:var(--teal-600); background:var(--white);}
.field .hint{font-size:11.5px; color:var(--ink-soft); margin-top:5px;}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
@media (max-width:560px){.row2{grid-template-columns:1fr;}}
/* .btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 22px; border-radius:var(--radius);
  font-size:14px; font-weight:600; border:1.5px solid transparent; cursor:pointer; font-family:'Inter'; letter-spacing:.01em;} */
/* .btn-primary{background:var(--teal-700); color:var(--white);}
.btn-primary:hover{background:var(--teal-900);} */
/* .btn-gold{background:var(--gold); color:var(--teal-900);}
.btn-gold:hover{background:var(--gold-light);}
.btn-outline{background:transparent; border-color:var(--teal-700); color:var(--teal-700);}
.btn-outline:hover{background:var(--teal-700); color:var(--white);}
.btn-danger{background:transparent; border-color:var(--red); color:var(--red);}
.btn-danger:hover{background:var(--red); color:var(--white);}
.btn-block{width:100%;}
.btn[disabled]{opacity:.45; cursor:not-allowed;}
.btn-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:6px;} */
.msg{padding:12px 14px; border-radius:var(--radius); font-size:13.5px; margin-bottom:16px; border:1px solid;}
.msg.err{background:#fbeceb; border-color:#e3b3ae; color:var(--red);}
.msg.ok{background:#eaf3ec; border-color:#b6d6bf; color:var(--green);}
.msg.info{background:#eef4f6; border-color:#bcd6db; color:var(--teal-900);}
.roles{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.role-card{background:var(--white); border:1.5px solid var(--line); border-radius:var(--radius); padding:26px 18px;
  text-align:center; cursor:pointer; text-decoration:none; display:block;}
.role-card:hover{border-color:var(--teal-600);}
.role-card .ic{font-size:28px; margin-bottom:10px;}
.role-card .t{font-family:'Fraunces'; font-weight:600; font-size:16px; color:var(--teal-900);}
.role-card .s{font-size:12px; color:var(--ink-soft); margin-top:4px;}
.slip-row{display:flex; padding:9px 0; border-bottom:1px dashed var(--line); font-size:14px;}
.slip-row:last-child{border-bottom:none;}
.slip-row .k{width:170px; color:var(--ink-soft); font-weight:600; font-size:12.5px; text-transform:uppercase; letter-spacing:.03em;}
.slip-row .v{font-weight:600; color:var(--ink);}
.avatar{width:78px; height:96px; border:1.5px solid var(--line); background:var(--paper-2); display:flex;
  align-items:center; justify-content:center; color:var(--ink-soft); font-size:11px; float:right; border-radius:2px;}
ol.rules{margin:0; padding-left:20px;}
ol.rules li{margin-bottom:14px; font-size:14px;}
ol.rules li .bn{display:block; color:var(--teal-900); font-weight:500; margin-bottom:2px;}
ol.rules li .en{display:block; color:var(--ink-soft); font-size:13px;}
.declare{margin-top:20px; padding:14px; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  display:flex; gap:10px; align-items:flex-start;}
.declare input{margin-top:3px;}
.exam-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; flex-wrap:wrap; gap:10px;}
.timer{font-family:'IBM Plex Mono'; font-weight:600; font-size:20px; color:var(--teal-900); background:var(--paper-2);
  border:1.5px solid var(--line); padding:8px 16px; border-radius:var(--radius);}
.timer.low{color:var(--red); border-color:var(--red); background:#fbeceb;}
.progress-track{height:6px; background:#cbe6ff; border-radius:4px; overflow:hidden; margin-bottom:22px;}
.progress-fill{height:100%; background:var(--teal-600);}
.qcard{border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; margin-bottom:16px; background:var(--white);}
.qcard .qnum{font-family:'IBM Plex Mono'; font-size:12px; color:var(--gold); font-weight:700; margin-bottom:6px;}
.qcard .qtext-en{font-size:15px; margin-bottom:2px;}
.qcard .qtext-bn{font-size:13px; color:var(--ink-soft); margin-bottom:14px;}
.opt{display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:var(--radius); cursor:pointer; border:1px solid var(--line); margin-bottom:8px;}
.opt:hover{background:var(--paper);}
.opt.sel{background:#eaf3ec; border-color:var(--green);}
.opt input{margin-top:3px;}
.opt .oe{font-size:14px;}
.opt .ot{font-size:12px; color:var(--ink-soft);}
table.tbl{width:100%; border-collapse:collapse; font-size:13px;}
table.tbl th,table.tbl td{border:1px solid var(--line); padding:8px 10px; text-align:left;background: #86d8db0a;}
table.tbl th{background:var(--gg); color:var(--white); font-weight:600; font-size:11.5px; text-transform:uppercase; letter-spacing:.03em;}
table.tbl tr:nth-child(even) td{background: #86d8db0a;}
.tbl-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius);box-shadow: 0 8px 12px rgba(0, 0, 0, 0.08);}
.tabs{display:flex; gap:4px; border-bottom:2px solid var(--ink); margin-bottom:22px; flex-wrap:wrap;}
.tab{padding:10px 16px; font-size:13px; font-weight:600; color:var(--ink-soft); cursor:pointer; text-decoration:none;
  border-bottom:3px solid transparent; margin-bottom:-2px; display:inline-block;}
.tab.active{color:var(--teal-900); border-width: 4px; border-bottom-color:var(--gold);}
.tab:hover{color:var(--teal-700);}
.panel-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; flex-wrap:wrap; gap:10px;}
.pill{display:inline-block; padding:3px 9px; border-radius:20px; font-size:11px; font-weight:700; letter-spacing:.02em;}
.pill.ok{background:#eaf3ec; color:var(--green);}
.pill.pending{background:#fbf3e3; color:var(--gold);}
.small{font-size:12px; color:var(--ink-soft);}
.action-link{background:none; border:none; color:var(--teal-700); cursor:pointer; font-size:12.5px; font-weight:600; text-decoration:underline; padding:0; margin-right:10px;}
.action-link.danger{color:var(--red);}
.form-box{border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; margin-bottom:22px; background: #86d8db0a; box-shadow: 0 8px 12px rgba(0, 0, 0, 0.08);}
.form-box .ttl{font-family:'Fraunces'; font-weight:600; color:var(--teal-900); margin-bottom:14px; font-size:15px;}
.opt-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px;}
.opt-input-wrap{border:1px solid var(--line); border-radius:var(--radius); padding:8px; background:var(--white); display:flex; gap:8px; align-items:center;}
.opt-input-wrap input[type=text]{border:1px solid var(--line); border-radius:2px; padding:6px 8px; font-size:12.5px; flex:1; min-width:0;}
footer.note{text-align:center; padding:20px; font-size:11.5px; color:var(--ink-soft);}
.brand-link .brand-image {
    float: left;
    line-height: .8;
    margin-left: .8rem;
    margin-right: .5rem;
    margin-top: -3px;
    max-height: 48px;
    width: auto;
}
.bg-white {
    background-color: #fff !important;
}
.img-circle {
    border-radius: 50%;
}
.elevation-3 {
    box-shadow: 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23) !important;
}
.bg-logo-watermark {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70vw;
    max-width: 700px;
    opacity: 0.035;
    pointer-events: none;
    z-index: 0;
    filter: blur(1px);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.bg-logo-watermark .sblogo {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  background-color: transparent !important;
}
.sblogo1{
  box-shadow: 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23) !important;
  border-radius: 100%;
  vertical-align: middle;
  border-style: none;
  background-color: #fff !important;
  width: fit-content;
  height: auto;
  /* display: block; */
  /* width: 100%; */
  /* max-width: 100%; */
  /* height: 100%; */
}
.min-w-100 {
  min-width: 102px;
}
.w-90{
  width: 90%;
}
form .form-group .form-label{color:var(--teal-900); font-weight: 600;}
.select2-container--default .select2-selection--single {
  height: 38px !important;
  border: 1px solid #ced4da !important;
  border-radius: 0.375rem !important;
  display: flex;
  align-items: center;
  padding: 0;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 38px !important;
  padding-left: 0.75rem !important;
  padding-right: 1.75rem !important; /* room for the arrow */
  color: #212529;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 36px !important;
  top: 0 !important;
  right: 6px !important;
}
/* 80px layout with soft rounded corners */
.img-80-rounded {
  width: 80px;
  height: 80px;
  object-fit: cover; /* Prevents stretching */
  border-radius: 12px; /* Soft corners */
  border: 1px solid #0a383a;
}

/* 100px layout with a perfect circle */
.img-100-circle {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 50%; /* Perfect circle */
}
.swal-small-popup {
  width: 320px !important;
  padding: 1rem !important;
}

.swal-small-title {
  font-size: 1.1rem !important;
  color: #d80b0b00;
}

.swal-small-text {
  font-size: 0.85rem !important;
}

.swal-small-btn {
  font-size: 0.8rem !important;
  padding: 0.4rem 1rem !important;
}
.swal2-content {
  font-size: 0.85rem !important;
}

.pagination-container {
  text-align: center; /* Centers the inner layout */
  margin-top: 20px;   /* Optional: adds breathing room under your HTML table */
}

/* Ensure the list stays inline if using text-align */
.pagination {
  display: inline-flex; 
  padding-left: 0;
  list-style: none;
  gap: 5px;
}

.pagination .active a {
  color: #101111;
  font-weight: bold;
} 
.opt-input-wrap {
  appearance: none;
  background-color: var(--bs-body-bg);
  background-clip: padding-box;
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.opt-input-wrap input[type=text] {
  appearance: none;
  background-color: var(--bs-body-bg);
  background-clip: padding-box;
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.img-avatar {
  width: 78px;
  height: 96px;
  object-fit: cover; /* Prevents stretching */
  border: 1px solid #0a383a;
}
.avatar {
  margin-left: 20px;
}
.declare {
  border-radius: 5px;
  background: var(--white);
}
.timer {
  background: var(--white) !important;
  border-radius: 5px !important;
}
.opt {
  border-radius: 5px;
  border-color: var(--bs-border-color);
}
.qcard {
  border-radius: 5px;
  border-color: var(--bs-border-color);
}
.opt:hover {
  background: var(--teal-l);
}
@media print{.no-print{display:none !important;} body{background:white;} .card::before{display:none;}}