:root{
 --navy:#0d1d36;--navy2:#132a4a;--bg:#f3f7fb;--panel:#fff;--text:#13213b;--muted:#74839b;--line:#e3eaf2;
 --blue:#1687ff;--green:#10a85a;--orange:#ff9817;--purple:#7047ec;--pink:#e9336f;--cyan:#0da4b8;--red:#f04444;
 --shadow:0 8px 28px rgba(24,45,79,.07);--radius:14px
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
a{text-decoration:none;color:inherit}button,input,select,textarea{font:inherit}.app-shell{min-height:100vh;display:grid;grid-template-columns:250px 1fr}
.sidebar{background:linear-gradient(180deg,#0b1a31,#10233f 72%,#0c1a2d);color:#dbe7f6;padding:18px 12px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.brand{display:flex;gap:12px;align-items:center;padding:0 8px 22px;color:#fff}.brand-icon{width:44px;height:44px;border:2px solid #70b7ff;border-radius:9px;display:grid;place-items:center;font-size:27px}.brand b{display:block;font-size:19px}.brand span{display:block;font-size:11px;color:#a8bbd2;margin-top:2px}
.sidebar nav{display:grid;gap:5px}.sidebar nav a{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:9px;color:#c6d4e8;font-weight:600;font-size:14px;position:relative}.sidebar nav a span{width:25px;font-size:18px;text-align:center}.sidebar nav a:hover,.sidebar nav a.active{background:linear-gradient(90deg,#1889ff,#1679ea);color:#fff}.sidebar nav a em{margin-left:auto;background:#f42c3c;color:#fff;border-radius:999px;font-style:normal;padding:2px 7px;font-size:11px}
.sidebar-bottom{margin-top:auto}.admin-mini{display:flex;align-items:center;gap:10px;border:1px solid #2b4564;padding:10px;border-radius:11px}.admin-mini b,.admin-mini span{display:block}.admin-mini span{font-size:11px;color:#9db1ca}.avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#1687ff,#6648e6);color:#fff;display:grid;place-items:center;font-weight:800}.avatar.big{width:50px;height:50px}
.logout{display:flex;gap:10px;margin-top:8px;padding:12px 14px;border:1px solid #263f5f;border-radius:10px;color:#ff5656;font-weight:700}
.main{min-width:0}.topbar{height:62px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:15px;padding:0 22px;position:sticky;top:0;z-index:10}.mobile-menu{border:0;background:none;font-size:22px;display:none}.searchbox{width:min(540px,52vw);background:#f3f6fa;border:1px solid #dce5ef;border-radius:8px;padding:8px 12px;color:#8794a8}.searchbox input{border:0;background:none;outline:none;width:90%;margin-left:6px}.top-right{margin-left:auto;display:flex;align-items:center;gap:14px;font-size:13px}.bell{position:relative;font-size:17px}.bell b{position:absolute;top:-9px;right:-10px;background:red;color:#fff;border-radius:999px;font-size:10px;padding:2px 5px}
.page-head{display:flex;justify-content:space-between;align-items:flex-start;padding:22px 24px 14px}.page-head h1{margin:0;font-size:28px}.page-head p{margin:4px 0 0;color:var(--muted)}.quote{font-style:italic;color:#45618b}
.summary-grid{display:grid;gap:12px;padding:0 24px 16px}.summary-grid.seven{grid-template-columns:repeat(7,minmax(150px,1fr));overflow-x:auto}.summary-grid.three{grid-template-columns:repeat(3,1fr)}.summary-card{min-width:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:15px;display:flex;gap:12px;align-items:center;box-shadow:var(--shadow);transition:.2s}.summary-card:hover{transform:translateY(-2px)}.summary-card .ico{width:52px;height:52px;border-radius:12px;color:#fff;display:grid;place-items:center;font-size:25px;font-weight:800}.summary-card span,.summary-card small{display:block}.summary-card span{font-size:12px;font-weight:700}.summary-card strong{display:block;font-size:24px;margin:3px 0}.summary-card small{font-size:11px}.summary-card.blue .ico,.summary-card.cyan .ico{background:var(--blue)}.summary-card.green .ico{background:var(--green)}.summary-card.orange .ico{background:var(--orange)}.summary-card.purple .ico{background:var(--purple)}.summary-card.pink .ico{background:var(--pink)}.summary-card.slate .ico{background:#4f6381}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);margin:0 24px 14px;padding:14px;box-shadow:var(--shadow)}.panel-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}.panel-head h2{margin:0;font-size:17px}.panel-head p{margin:3px 0 0;color:var(--muted);font-size:12px}.panel-head a{color:#087bff;font-size:12px;font-weight:700}
.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}th{background:#eff4f9;color:#36506f;text-align:left;font-size:11px;padding:8px}td{padding:8px;border-bottom:1px solid #e8edf3;font-size:12px}tr.click-row{cursor:pointer}.click-row:hover{background:#f7fbff}
.status{display:inline-block;min-width:80px;text-align:center;padding:4px 8px;border-radius:999px;font-size:11px;font-weight:800}.status.active{background:#e8eef5;color:#49607a}.status.soon{background:#d9f7e6;color:#167a4a}.status.urgent{background:#ffe0e0;color:#d62525}.status.expired{background:#7c1d1d;color:#fff}.urgent-text{color:#ef2e2e}.soon-text{color:#0b8b53}.expired-text{color:#8e1616}.urgent-row{background:#fff8f8}.soon-row{background:#f8fff9}.expired-row{background:#fff0f0}
.split-main{display:grid;grid-template-columns:2.2fr 1fr;gap:0}.split-main>.panel:first-child{margin-right:7px}.split-main>.panel:last-child{margin-left:7px}
.member-card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.member-card{border:1px solid var(--line);border-radius:12px;padding:12px;background:linear-gradient(180deg,#fff,#f9fbff)}.member-head{display:flex;gap:10px;align-items:center}.member-head h3{margin:0}.member-head span{font-size:11px;color:var(--muted)}.two-col{display:grid;grid-template-columns:1fr 1fr;margin:12px 0}.two-col>div{padding:4px 8px;border-right:1px solid var(--line)}.two-col>div:last-child{border-right:0}.two-col span,.two-col b{display:block}.two-col span{font-size:11px;color:var(--muted)}.two-col b{font-size:17px;margin-top:3px}.result{border-radius:10px;padding:10px}.result span,.result small{display:block}.result strong{font-size:22px}.result.receive{background:#dff8e9;color:#0b7d45}.result.pay{background:#ffe5e5;color:#dc2525}.result.settled{background:#e7f0ff;color:#1a69c8}.result small{color:#36506f;font-weight:700}.open-link{text-align:center;color:#087bff;font-size:11px;margin-top:9px}
.transfer{display:grid;grid-template-columns:1fr 30px 1fr auto;gap:8px;align-items:center;border:1px solid #ffd1d1;background:#fff6f6;border-radius:10px;padding:11px;margin-bottom:9px}.transfer span{text-align:center;color:#e32424;font-size:20px}.transfer strong{color:#e32424;font-size:19px}.success-box{background:#ddf9e8;color:#166f47;border-radius:10px;padding:12px;font-weight:700;font-size:12px}
.dashboard-bottom{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:0}.dashboard-bottom>.panel{margin-left:7px;margin-right:7px}.dashboard-bottom>.panel:first-child{margin-left:24px}.dashboard-bottom>.panel:last-child{margin-right:24px}
.list{display:grid;gap:6px}.list-row{display:grid;grid-template-columns:14px 1fr auto;align-items:center;gap:8px;border-bottom:1px solid #edf1f5;padding:7px 0;font-size:12px}.list-row .dot{width:9px;height:9px;background:#1486ff;border-radius:50%}.urgent-dot{background:#f02d2d!important}.list-row small{color:var(--muted)}
.btn{border:0;border-radius:9px;padding:9px 13px;cursor:pointer;font-weight:750}.btn.primary{background:#1687ff;color:#fff}.btn.soft{background:#eaf3ff;color:#126dd1}.btn.tiny{padding:5px 10px;font-size:11px}.btn.wide{width:100%}.flash{margin:0 24px 14px;padding:11px 13px;border-radius:9px}.flash.success{background:#e4faec;color:#126d43}.flash.error{background:#ffe6e6;color:#a51818}
.member-admin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:0 24px 18px}.member-admin-grid.compact{padding:0;grid-template-columns:repeat(2,1fr)}.admin-card{background:#fff;border:1px solid var(--line);border-radius:13px;padding:14px;box-shadow:var(--shadow)}.card-stat{margin:15px 0;background:#f4f7fb;border-radius:9px;padding:10px}.card-stat b{float:right}.admin-card p{color:var(--muted);font-size:12px}
.modal{position:fixed;inset:0;background:rgba(6,18,36,.5);display:none;align-items:center;justify-content:center;z-index:50;padding:18px}.modal.show{display:flex}.modal-card{width:min(620px,96vw);background:#fff;border-radius:16px;padding:22px;position:relative;max-height:90vh;overflow:auto}.modal-card>button{position:absolute;right:15px;top:10px;border:0;background:none;font-size:28px;cursor:pointer;color:#718096}.modal-card h2{margin-top:0}
.form-grid{display:grid;gap:13px}.form-grid.two{grid-template-columns:1fr 1fr}.form-grid.one{grid-template-columns:1fr}.form-grid label{display:grid;gap:6px;font-size:12px;font-weight:700}.form-grid input,.form-grid select,.form-grid textarea{width:100%;padding:10px;border:1px solid #d7e0eb;border-radius:8px;outline:none}.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{border-color:#75aefc;box-shadow:0 0 0 3px #eaf3ff}.span2{grid-column:1/-1}
.section-title{margin:0 24px 10px}.settings-panel{max-width:850px}.info-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.info-grid div{background:#f6f8fb;padding:12px;border-radius:10px}.info-grid span,.info-grid b{display:block}.info-grid span{font-size:11px;color:var(--muted)}.security-note{margin-top:15px;background:#fff6da;border:1px solid #f2df98;padding:12px;border-radius:9px;font-size:12px}
.footer{padding:8px 24px 20px;color:#74839b;font-size:11px}
.login-page{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at top,#e6efff,#f7f9fc 55%);padding:20px}.login-card{width:min(420px,100%);background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px;box-shadow:0 20px 70px rgba(20,40,80,.12)}.login-logo{width:58px;height:58px;border-radius:14px;background:linear-gradient(135deg,#1687ff,#7047ec);color:#fff;display:grid;place-items:center;font-size:30px}.login-card h1{margin:15px 0 3px}.login-card>p,.login-card small{color:var(--muted)}code{background:#eef2f7;padding:2px 5px;border-radius:5px}

@media(max-width:1200px){.summary-grid.seven{grid-template-columns:repeat(4,1fr)}.split-main{grid-template-columns:1fr}.split-main>.panel{margin-left:24px!important;margin-right:24px!important}.dashboard-bottom{grid-template-columns:1fr}.dashboard-bottom>.panel{margin-left:24px!important;margin-right:24px!important}.member-admin-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:800px){.app-shell{grid-template-columns:1fr}.sidebar{position:fixed;left:-260px;z-index:60;width:250px;transition:.2s}.sidebar.open{left:0}.mobile-menu{display:block}.main{width:100%}.topbar{padding:0 12px}.searchbox{width:60vw}.top-right>span:first-child{display:none}.page-head{padding:16px}.summary-grid{padding:0 16px 12px}.summary-grid.seven,.summary-grid.three{grid-template-columns:1fr 1fr}.panel{margin-left:16px!important;margin-right:16px!important}.member-card-grid,.member-admin-grid{grid-template-columns:1fr}.form-grid.two{grid-template-columns:1fr}.span2{grid-column:auto}.info-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.summary-grid.seven,.summary-grid.three{grid-template-columns:1fr}.top-right .admin-name{display:none}.searchbox{width:68vw}.member-admin-grid{padding:0 16px 14px}.member-admin-grid.compact{grid-template-columns:1fr}.transfer{grid-template-columns:1fr 22px 1fr}.transfer strong{grid-column:1/-1;text-align:right}}


.field-help{display:block;color:#718096;font-size:10px;font-weight:500;margin-top:3px}
@media(max-width:800px){
  body{overflow-x:hidden}
  .topbar{height:auto;min-height:58px;flex-wrap:wrap;padding:9px 12px}
  .searchbox{order:3;width:100%;max-width:none}
  .top-right{font-size:11px;gap:9px}
  .page-head{gap:12px;flex-direction:column}
  .page-head .btn,.page-head form,.page-head form .btn{width:100%}
  .summary-grid.seven,.summary-grid.three{grid-template-columns:1fr 1fr}
  .summary-card{min-height:92px}
  .panel-head{align-items:flex-start;flex-wrap:wrap}
  table{min-width:760px}
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:10px}
  .member-card-grid{grid-template-columns:1fr}
  .split-main{display:block}
  .dashboard-bottom{display:block}
}
@media(max-width:540px){
  .summary-grid.seven,.summary-grid.three{grid-template-columns:1fr}
  .summary-card{min-height:auto}
  .page-head h1{font-size:23px}
  .panel{padding:12px}
  .top-right .admin-name{display:none}
  .form-grid.two{grid-template-columns:1fr}
  .form-grid.two .span2{grid-column:auto}
  .modal{padding:8px}
  .modal-card{padding:18px 14px}
}


/* ===== EJSIR PUBLICATION CARD DASHBOARD V3 ===== */
.dashboard-section{padding:18px}
.expiry-card-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.expiry-card{
  display:block;
  border:1px solid #dfe8f3;
  border-radius:16px;
  padding:16px;
  background:linear-gradient(180deg,#ffffff,#f8fbff);
  box-shadow:0 8px 22px rgba(27,59,103,.07);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.expiry-card:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 34px rgba(27,59,103,.12);
  border-color:#b9d6ff;
}
.expiry-card-head{
  display:grid;
  grid-template-columns:46px 1fr auto;
  gap:11px;
  align-items:center;
}
.expiry-icon{
  width:46px;height:46px;border-radius:13px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,#6d46e9,#8d6bf2);
  color:#fff;font-size:24px;font-weight:800;
}
.expiry-icon.server{background:linear-gradient(135deg,#e72f69,#f15a86)}
.expiry-card h3{margin:0 0 3px;font-size:17px}
.expiry-card-head>div:nth-child(2)>span{font-size:11px;color:#7b8799}
.expiry-card-dates{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  margin:15px 0 11px;
}
.expiry-card-dates>div{
  border:1px solid #e6edf5;
  background:#fff;
  border-radius:10px;
  padding:10px;
}
.expiry-card-dates span,.expiry-card-dates b{display:block}
.expiry-card-dates span{font-size:10px;color:#7c8ba0;margin-bottom:4px}
.expiry-card-dates b{font-size:13px}
.linked-domain{
  margin-top:12px;padding:9px 10px;border-radius:9px;
  background:#f2f6fb;color:#60718a;font-size:11px
}
.countdown-box{
  display:flex;justify-content:space-between;align-items:center;
  border-radius:11px;padding:10px 12px;font-size:11px;font-weight:700;
}
.countdown-box strong{font-size:18px}
.countdown-box.active{background:#eef4fa;color:#42566f}
.countdown-box.soon{background:#ddf8e8;color:#137448}
.countdown-box.urgent{background:#ffe1e1;color:#d82828}
.countdown-box.expired{background:#7b1f1f;color:#fff}
.expiry-card.soon{border-color:#a7e5c3}
.expiry-card.urgent{border-color:#ffbcbc;background:linear-gradient(180deg,#fff,#fff8f8)}
.expiry-card.expired{border-color:#b45b5b}
@media(max-width:1100px){
  .expiry-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:650px){
  .expiry-card-grid{grid-template-columns:1fr}
  .expiry-card{padding:14px}
  .expiry-card-head{grid-template-columns:42px 1fr auto}
  .expiry-icon{width:42px;height:42px}
  .expiry-card-dates{grid-template-columns:1fr 1fr}
}
@media(max-width:420px){
  .expiry-card-dates{grid-template-columns:1fr}
  .expiry-card-head{grid-template-columns:40px 1fr}
  .expiry-card-head .status{grid-column:1/-1;justify-self:start}
}


/* ===== ALL SECTION CARD SYSTEM V5 ===== */
.page-head{
  background:linear-gradient(180deg,#f8fbff,#f3f7fb);
  border-bottom:1px solid #e6edf5;
  margin-bottom:8px;
}
.section-card-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  padding:0 24px 18px;
}
.section-card{
  background:#fff;
  border:1px solid #e2eaf3;
  border-radius:16px;
  padding:16px;
  box-shadow:0 8px 24px rgba(21,43,75,.07);
}
.section-card:hover{
  box-shadow:0 12px 30px rgba(21,43,75,.11);
  transform:translateY(-2px);
}
.section-card h3{margin:0 0 6px;font-size:17px}
.section-card p{margin:0;color:#75839a;font-size:12px}
.section-card .card-value{font-size:28px;font-weight:800;margin-top:10px}
.section-card .card-meta{font-size:11px;color:#708096;margin-top:4px}
.admin-card,.member-card,.summary-card,.panel{
  border-radius:16px!important;
}
.table-card{
  background:#fff;
  border:1px solid #e2eaf3;
  border-radius:16px;
  padding:14px;
  box-shadow:0 8px 24px rgba(21,43,75,.06);
  margin:0 24px 16px;
}
.table-card .table-wrap{border-radius:11px;border:1px solid #edf2f7}
.form-card{
  background:#fff;
  border:1px solid #e2eaf3;
  border-radius:16px;
  padding:16px;
  box-shadow:0 8px 24px rgba(21,43,75,.06);
}
.notification-card{
  display:grid;
  grid-template-columns:14px 1fr auto;
  gap:10px;
  align-items:center;
  background:#fff;
  border:1px solid #e7edf4;
  border-radius:12px;
  padding:11px 12px;
  margin-bottom:8px;
}
.activity-card{
  background:#fff;
  border:1px solid #e7edf4;
  border-radius:12px;
  padding:12px;
  margin-bottom:8px;
}
.settings-panel .info-grid>div{
  background:linear-gradient(180deg,#fff,#f8fbff);
  border:1px solid #e5edf5;
  border-radius:12px;
  box-shadow:0 4px 14px rgba(21,43,75,.04);
}
.sidebar nav a{
  border:1px solid transparent;
}
.sidebar nav a:hover,.sidebar nav a.active{
  box-shadow:0 6px 18px rgba(13,109,230,.22);
}
@media(max-width:1100px){
  .section-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
  .section-card-grid{grid-template-columns:1fr;padding:0 16px 14px}
  .table-card{margin:0 16px 14px}
}