:root{
  --paper:#F6F3EC;
  --panel:#FFFFFF;
  --ink:#14181F;
  --ink-soft:#5A5F6B;
  --indigo:#2A3B8F;
  --indigo-dark:#1D2A67;
  --amber:#E4A11B;
  --green:#2F8F6B;
  --red:#C23B22;
  --line:#DEDACD;
  --line-soft:#ECE7DA;
  --sidebar-w:250px;
}
*{box-sizing:border-box;}
body{margin:0; background:var(--paper); color:var(--ink); font-family:'IBM Plex Sans',sans-serif; -webkit-font-smoothing:antialiased;}
.mono{font-family:'IBM Plex Mono',monospace;}
.display{font-family:'Big Shoulders Display',sans-serif; font-weight:900;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit;}

/* ===== Top bar ===== */
.topbar{
  height:64px; display:flex; align-items:center; justify-content:space-between;
  padding:0 28px; border-bottom:1px solid var(--line); background:var(--panel);
  position:sticky; top:0; z-index:20;
}
.logo{display:flex; align-items:baseline; gap:6px; font-family:'Big Shoulders Display',sans-serif; font-weight:900; font-size:24px;}
.logo span{color:var(--amber);}
.topnav{display:flex; align-items:center; gap:30px;}
.topnav .links{display:flex; gap:26px; font-size:14px; font-weight:500; color:var(--ink-soft);}
.topnav .links a:hover{color:var(--indigo);}
.topnav .auth{display:flex; gap:10px;}
.btn-outline{
  border:1px solid var(--indigo); color:var(--indigo); background:transparent;
  padding:9px 18px; border-radius:4px; font-weight:600; font-size:14px; cursor:pointer;
}
.btn-solid{
  border:none; background:var(--amber); color:#1B1400; padding:9px 18px;
  border-radius:4px; font-weight:700; font-size:14px; cursor:pointer;
}
.btn-solid:hover{background:#cf9013;}
.btn-outline:hover{background:var(--indigo); color:#fff;}
@media(max-width:900px){ .topnav .links{display:none;} .topnav .auth{display:none;} }

/* Prevent horizontal scroll from any stray fixed-width element */
/* NOTE: deliberately NOT using overflow-x:hidden on html/body — it breaks
   position:fixed elements (hamburger menus, sidebar drawers) on many mobile
   browsers. Horizontal overflow is instead fixed at the source: min-width:0
   below, and .table-scroll wrappers around wide tables. */

/* Hamburger button — hidden on desktop, shown once the top nav links collapse */
.hamburger-btn{display:none; background:none; border:none; cursor:pointer; padding:8px; flex-direction:column; gap:5px; width:34px;}
.hamburger-btn span{display:block; height:2.5px; background:var(--ink); border-radius:2px; transition:transform .2s, opacity .2s;}
@media(max-width:900px){ .hamburger-btn{display:flex;} }

/* Mobile menu — combines top nav links + full tool sidebar + auth, since both
   are hidden below 900px/820px with no other way to reach them */
.mobile-menu-overlay{display:none; position:fixed; inset:0; background:rgba(20,24,31,.5); z-index:50;}
.mobile-menu-overlay.show{display:block;}
.mobile-menu-panel{
  position:absolute; top:0; right:0; bottom:0; width:82%; max-width:340px;
  background:var(--panel); overflow-y:auto; padding:18px 0 40px;
  box-shadow:-4px 0 24px rgba(0,0,0,.15);
}
.mmp-header{display:flex; justify-content:space-between; align-items:center; padding:0 20px 16px; border-bottom:1px solid var(--line);}
.mmp-auth{display:flex; gap:10px; padding:16px 20px; border-bottom:1px solid var(--line);}
.mmp-auth button{flex:1;}
.mmp-section-label{padding:16px 20px 6px; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); font-weight:700;}
.mobile-menu-panel a{display:block; padding:11px 20px; font-size:14.5px; color:var(--ink); border-left:3px solid transparent;}
.mobile-menu-panel a:hover, .mobile-menu-panel a.active{background:var(--line-soft); color:var(--indigo); border-left-color:var(--amber);}

/* ===== Shell ===== */
.shell{display:flex; min-height:calc(100vh - 64px);}

/* Sidebar */
.sidebar{
  width:var(--sidebar-w); flex-shrink:0; background:var(--panel);
  border-right:1px solid var(--line); padding:18px 0;
  display:flex; flex-direction:column;
}
.sidebar a{
  display:flex; align-items:center; gap:12px; padding:11px 22px;
  font-size:14px; color:var(--ink-soft); font-weight:500; border-left:3px solid transparent;
}
.sidebar a .ic{width:18px; text-align:center; font-size:14px;}
.sidebar a:hover{background:var(--line-soft); color:var(--ink);}
.sidebar a.active{
  color:var(--indigo); border-left-color:var(--amber); background:#EFF1F9; font-weight:700;
}
.sidebar .badge{
  font-size:9.5px; background:var(--amber); color:#1B1400; padding:1px 6px;
  border-radius:20px; margin-left:auto; font-weight:700;
}
.sidebar-bottom-links{
  margin-top:auto; padding:14px 16px 4px; border-top:1px solid var(--line-soft);
  display:flex; flex-wrap:wrap; gap:4px 10px;
}
.sidebar-bottom-links a{
  padding:4px 0; font-size:11.5px; color:var(--ink-soft); font-weight:500;
  border-left:none;
}
.sidebar-bottom-links a:hover{color:var(--indigo); background:none;}
@media(max-width:820px){ .sidebar{display:none;} }

/* Main */
.main{flex:1; padding:44px 40px 70px; max-width:1080px; min-width:0;}
@media(max-width:600px){ .main{padding:26px 18px 50px;} }
@media(max-width:600px){ .topbar{padding:0 16px;} }
h1{font-size:clamp(24px,3vw,32px); margin:0 0 26px; font-weight:700;}

.check-box{
  background:var(--panel); border:1px solid var(--line); border-radius:8px;
  padding:28px; max-width:760px;
}
.check-box input[type=text]{
  width:100%; padding:15px 16px; border:1px solid var(--line); border-radius:5px;
  font-family:'IBM Plex Mono',monospace; font-size:15px; outline:none; margin-bottom:20px;
  background:#FBFAF6;
}
.check-box input[type=text]:focus{border-color:var(--indigo);}

/* fake recaptcha */
.recaptcha{
  display:flex; align-items:center; justify-content:space-between;
  max-width:304px; border:1px solid #d3d3d3; border-radius:4px; padding:12px 14px;
  background:#f9f9f9; margin-bottom:22px; cursor:pointer; user-select:none;
}
.recaptcha .left{display:flex; align-items:center; gap:12px;}
.recaptcha .box{
  width:26px; height:26px; border:2px solid #999; border-radius:3px; background:#fff;
  display:flex; align-items:center; justify-content:center; transition:.15s;
}
.recaptcha.checked .box{background:var(--green); border-color:var(--green);}
.recaptcha .box svg{display:none; width:16px; height:16px;}
.recaptcha.checked .box svg{display:block;}
.recaptcha .label{font-size:14px; color:#3c4043;}
.recaptcha .badge-r{font-size:9px; color:#999; text-align:center; line-height:1.3;}
@media(max-width:360px){
  .g-recaptcha{transform:scale(0.9); transform-origin:left top;}
}

.btn-check{
  border:none; background:var(--indigo); color:#fff; font-weight:700; font-size:15px;
  padding:14px 30px; border-radius:5px; cursor:pointer; transition:background .15s, opacity .15s;
}
.btn-check:hover{background:var(--indigo-dark);}
.btn-check:disabled{opacity:.45; cursor:not-allowed;}
.form-note{font-size:12.5px; color:#9a9484; margin-top:12px; font-family:'IBM Plex Mono',monospace;}

/* Limit banner */
.limit-banner{
  display:none; max-width:760px; margin-top:18px; background:#FFF6E8; border:1px solid #F0D8A0;
  border-radius:6px; padding:18px 20px; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.limit-banner.show{display:flex;}
.limit-banner p{margin:0; font-size:14px; color:#6b4e10;}

/* Results */
.results{display:none; margin-top:36px; max-width:1000px;}
.results.show{display:block;}
.results-title{font-size:15px; margin-bottom:22px;}
.results-title b{color:var(--indigo);}
.metric-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
@media(max-width:820px){ .metric-grid{grid-template-columns:repeat(2,1fr);} }
.metric-card{
  background:var(--panel); border:1px solid var(--line); border-radius:6px;
  padding:18px 16px; text-align:left;
}
.metric-card .m-label{font-size:12.5px; color:var(--ink-soft); margin-bottom:8px;}
.metric-card .m-value{font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:26px; color:var(--indigo);}
.metric-card.warn .m-value{color:var(--red);}
.metric-card.good .m-value{color:var(--green);}

/* Pricing */
.pricing{margin-top:64px;}
.pricing h2{font-size:24px; margin-bottom:6px;}
.pricing p.sub{color:var(--ink-soft); margin:0 0 26px; font-size:14.5px;}
.plans{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
@media(max-width:820px){ .plans{grid-template-columns:1fr;} }
.plan{
  background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:26px 22px;
  display:flex; flex-direction:column;
}
.plan.featured{border-color:var(--amber); box-shadow:0 0 0 2px var(--amber) inset;}
.plan .p-name{font-weight:700; font-size:16px; margin-bottom:4px;}
.plan .p-tag{font-size:11.5px; color:var(--amber); font-weight:700; text-transform:uppercase; letter-spacing:.06em; margin-bottom:14px;}
.plan .p-price{font-family:'IBM Plex Mono',monospace; font-size:30px; font-weight:600; margin-bottom:4px;}
.plan .p-price span{font-size:13px; color:var(--ink-soft); font-weight:400;}
.plan .p-quota{font-size:13.5px; color:var(--ink-soft); margin-bottom:18px;}
.plan ul{list-style:none; padding:0; margin:0 0 22px; font-size:13.5px; color:var(--ink-soft); line-height:2;}
.plan ul li::before{content:"✓ "; color:var(--green); font-weight:700;}
.plan button{margin-top:auto;}

/* Modal */
.modal-overlay{
  display:none; position:fixed; inset:0; background:rgba(20,24,31,.5); z-index:50;
  align-items:center; justify-content:center; padding:20px;
}
.modal-overlay.show{display:flex;}
.modal{
  background:var(--panel); border-radius:10px; padding:32px; width:100%; max-width:400px;
  position:relative;
}
.modal h3{margin:0 0 6px; font-size:20px;}
.modal p.sub{color:var(--ink-soft); font-size:13.5px; margin:0 0 22px;}
.modal input{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:5px;
  margin-bottom:14px; font-size:14px; outline:none;
}
.modal input:focus{border-color:var(--indigo);}
.modal .close{position:absolute; top:16px; right:18px; cursor:pointer; font-size:18px; color:var(--ink-soft); background:none; border:none;}
.modal .btn-solid{width:100%; padding:13px; font-size:15px; border-radius:5px;}
.modal .switch{font-size:13px; color:var(--ink-soft); text-align:center; margin-top:14px;}
.modal .switch a{color:var(--indigo); font-weight:600;}

.pw-wrap{position:relative;}
.pw-wrap input{padding-right:44px !important;}
.pw-toggle{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  background:none; border:none; color:#9a9484; cursor:pointer;
  padding:6px; border-radius:5px; display:flex; align-items:center; justify-content:center;
  line-height:0;
}
.pw-toggle:hover{color:var(--indigo); background:var(--line-soft);}
.pw-toggle svg{width:18px; height:18px;}

.disclaimer{display:none; max-width:1000px; font-size:12px; color:#9a9484; line-height:1.6; margin-top:40px;}

/* ===== Coming soon stub pages ===== */
.coming-soon{
  background:var(--panel); border:1px solid var(--line); border-radius:8px;
  padding:40px; max-width:640px; text-align:left;
}
.coming-soon .tag{
  display:inline-block; font-size:11.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; color:var(--amber); background:#FFF6E8; padding:4px 10px;
  border-radius:20px; margin-bottom:16px;
}
.coming-soon p{color:var(--ink-soft); line-height:1.6; font-size:15px;}

/* ===== Static content pages (Contact/Terms/Privacy) ===== */
.static-content{max-width:760px;}
.static-content h2{font-size:19px; margin:34px 0 10px;}
.static-content p, .static-content li{color:var(--ink-soft); line-height:1.7; font-size:15px;}
.static-content ul{padding-left:20px;}

.contact-form input, .contact-form textarea{
  width:100%; padding:13px 14px; border:1px solid var(--line); border-radius:5px;
  font-family:inherit; font-size:14px; margin-bottom:14px; background:var(--panel);
}
.contact-form textarea{min-height:130px; resize:vertical;}

/* ===== Blog ===== */
.blog-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:10px;}
@media(max-width:820px){ .blog-grid{grid-template-columns:1fr;} }
.blog-card{
  background:var(--panel); border:1px solid var(--line); border-radius:8px; overflow:hidden;
  display:flex; flex-direction:column;
}
.blog-card img{width:100%; height:160px; object-fit:cover; background:var(--line-soft);}
.blog-card .bc-body{padding:18px 20px;}
.blog-card h3{font-size:17px; margin:0 0 8px;}
.blog-card p{color:var(--ink-soft); font-size:13.5px; line-height:1.55; margin:0 0 12px;}
.blog-card .bc-meta{font-size:12px; color:#9a9484; font-family:'IBM Plex Mono',monospace;}
.blog-empty{color:var(--ink-soft); font-size:14.5px;}

.post-header{max-width:760px; margin-bottom:26px;}
.post-header h1{margin-bottom:10px;}
.post-meta{font-size:13px; color:#9a9484; font-family:'IBM Plex Mono',monospace;}
.post-cover{width:100%; max-width:760px; border-radius:8px; margin:20px 0; display:block;}
.post-body{max-width:760px; font-size:16px; line-height:1.75; color:var(--ink);}
.post-body img{max-width:100%; border-radius:6px;}
.post-body h2{font-size:22px; margin-top:34px;}
.post-body h3{font-size:18px; margin-top:26px;}
.post-body a{color:var(--indigo); text-decoration:underline;}
.post-body blockquote{border-left:3px solid var(--amber); margin:0; padding-left:16px; color:var(--ink-soft);}

/* ===== Admin ===== */
.admin-shell{display:flex; min-height:100vh;}
.admin-sidebar{
  width:220px; background:var(--indigo-dark); color:#fff; padding:24px 0; flex-shrink:0;
}
.admin-sidebar .logo{color:#fff; padding:0 22px 24px;}
.admin-sidebar .logo span{color:var(--amber);}
.admin-sidebar a{
  display:block; padding:11px 22px; font-size:14px; color:#C7CCE2; font-weight:500;
}
.admin-sidebar a:hover, .admin-sidebar a.active{background:rgba(255,255,255,.08); color:#fff;}
.admin-main{flex:1; padding:36px 40px; max-width:960px;}
.admin-main h1{font-size:24px; margin:0 0 24px;}
.admin-table{width:100%; border-collapse:collapse; background:var(--panel); border:1px solid var(--line); border-radius:8px; overflow:hidden;}
.admin-table th, .admin-table td{text-align:left; padding:12px 16px; font-size:14px; border-bottom:1px solid var(--line-soft);}
.admin-table th{background:var(--line-soft); font-weight:700; font-size:12.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft);}
.admin-table tr:last-child td{border-bottom:none;}

/* Same styling as .admin-table — used by public tool pages (Bulk DA PA, Keyword
   Difficulty, Backlink Checker, etc.) so their result tables render properly */
.owner-table{width:100%; border-collapse:collapse; background:var(--panel); border:1px solid var(--line); border-radius:8px; overflow:hidden;}
.owner-table th, .owner-table td{text-align:left; padding:12px 16px; font-size:14px; border-bottom:1px solid var(--line-soft);}
.owner-table th{background:var(--line-soft); font-weight:700; font-size:12.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft);}
.owner-table tr:last-child td{border-bottom:none;}
.table-scroll{width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;}
.table-scroll table{min-width:600px;}
.status-pill{font-size:11px; font-weight:700; padding:3px 9px; border-radius:20px; text-transform:uppercase;}
.status-pill.published{background:#E4F3EC; color:var(--green);}
.status-pill.draft{background:#F0EDE3; color:var(--ink-soft);}
.admin-actions a{margin-right:12px; font-size:13px; color:var(--indigo); font-weight:600;}
.admin-actions a.danger{color:var(--red);}
.admin-form input[type=text], .admin-form input[type=email], .admin-form input[type=password],
.admin-form input[type=datetime-local], .admin-form select{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:5px;
  font-size:14px; margin-bottom:16px; font-family:inherit; background:#fff; color:var(--ink);
  -webkit-appearance:none; appearance:none;
}
.admin-form input[type=datetime-local]{
  font-family:'IBM Plex Mono',monospace; font-size:13.5px; color-scheme:light;
}
.admin-form input[type=text]:focus, .admin-form input[type=email]:focus, .admin-form input[type=password]:focus,
.admin-form input[type=datetime-local]:focus, .admin-form select:focus{
  outline:none; border-color:var(--indigo);
}
.admin-form input[type=file]{
  display:block; width:100%; padding:10px 12px; border:1px dashed var(--line);
  border-radius:5px; font-size:13.5px; margin-bottom:6px; background:#FBFAF6; cursor:pointer;
}
.admin-form label{font-size:13px; font-weight:600; display:block; margin-bottom:6px; color:var(--ink-soft);}
#editor{background:#fff; border:1px solid var(--line); border-radius:5px; min-height:340px; margin-bottom:16px;}
.login-box{max-width:360px; margin:80px auto; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:32px;}
.login-box h1{font-size:20px;}
.admin-alert{padding:12px 14px; border-radius:5px; font-size:13.5px; margin-bottom:16px;}
.admin-alert.error{background:#FCEAE6; color:var(--red);}
.admin-alert.success{background:#E4F3EC; color:var(--green);}

/* ===== Account dashboard ===== */
.account-shell{display:flex; min-height:calc(100vh - 64px);}
.account-sidebar{width:230px; flex-shrink:0; background:var(--panel); border-right:1px solid var(--line); padding:28px 0;}
.account-sidebar .avatar-block{padding:0 22px 20px; text-align:center; border-bottom:1px solid var(--line-soft); margin-bottom:14px;}
.account-sidebar .avatar-block img{width:64px; height:64px; border-radius:50%; object-fit:cover; background:var(--line-soft); margin-bottom:10px;}
.account-sidebar .avatar-block .name{font-weight:700; font-size:14.5px;}
.account-sidebar .avatar-block .plan-tag{font-size:11px; color:var(--amber); font-weight:700; text-transform:uppercase; letter-spacing:.05em;}
.account-sidebar a{display:block; padding:11px 22px; font-size:14px; color:var(--ink-soft); font-weight:500; border-left:3px solid transparent;}
.account-sidebar a:hover{background:var(--line-soft); color:var(--ink);}
.account-sidebar a.active{color:var(--indigo); border-left-color:var(--amber); background:#EFF1F9; font-weight:700;}
.account-main{flex:1; padding:40px 44px; max-width:820px;}
.account-main h1{font-size:24px; margin:0 0 26px;}
@media(max-width:820px){
  .account-sidebar{display:none;}
  .account-main{padding:24px 18px; max-width:100%;}
}
.account-card{background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:26px; margin-bottom:22px;}
.account-card h2{font-size:16px; margin:0 0 18px;}
.account-form label{font-size:13px; font-weight:600; display:block; margin-bottom:6px; color:var(--ink-soft);}
.account-form input[type=text], .account-form input[type=email], .account-form input[type=password], .account-form input[type=tel]{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:5px; font-size:14px; margin-bottom:16px; font-family:inherit;
}
.avatar-row{display:flex; align-items:center; gap:18px; margin-bottom:20px;}
.avatar-row img{width:72px; height:72px; border-radius:50%; object-fit:cover; background:var(--line-soft);}
.danger-zone{border:1px solid #F0C8BC; background:#FFF7F5;}
.danger-zone h2{color:var(--red);}
.plan-current{display:flex; align-items:center; justify-content:space-between; padding:16px 18px; background:#FBFAF6; border-radius:6px; margin-bottom:20px; flex-wrap:wrap; gap:10px;}
.plan-current .p-name{font-weight:700; font-size:15px; text-transform:capitalize;}
.plan-current .p-expiry{font-size:12.5px; color:var(--ink-soft); font-family:'IBM Plex Mono',monospace;}
.plan-options{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
@media(max-width:700px){ .plan-options{grid-template-columns:1fr;} }
.plan-option{border:1px solid var(--line); border-radius:6px; padding:18px; text-align:center;}
.plan-option.current{border-color:var(--indigo); background:#EFF1F9;}
.plan-option .po-name{font-weight:700; margin-bottom:4px;}
.plan-option .po-price{font-family:'IBM Plex Mono',monospace; font-size:20px; margin-bottom:10px;}
.card-display{display:flex; align-items:center; gap:14px; padding:16px 18px; border:1px solid var(--line); border-radius:6px; margin-bottom:18px;}
.card-display .cc-icon{width:42px; height:30px; background:var(--indigo); border-radius:4px; color:#fff; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700;}
.history-table{width:100%; border-collapse:collapse;}
.history-table th, .history-table td{text-align:left; padding:11px 14px; font-size:13.5px; border-bottom:1px solid var(--line-soft);}
.history-table th{color:var(--ink-soft); font-weight:700; text-transform:uppercase; font-size:11.5px; letter-spacing:.04em;}
.pay-status{font-size:11px; font-weight:700; padding:3px 9px; border-radius:20px; text-transform:uppercase;}
.pay-status.paid{background:#E4F3EC; color:var(--green);}
.pay-status.pending{background:#FFF6E8; color:var(--amber);}
.pay-status.failed, .pay-status.cancelled{background:#FCEAE6; color:var(--red);}

/* Modern file upload dropzone — shared across account/profile avatar upload etc */
.modern-upload{position:relative; border:2px dashed var(--line); border-radius:10px; padding:28px 20px; text-align:center; cursor:pointer; transition:border-color .15s, background .15s; background:#fbfaf6;}
.modern-upload:hover, .modern-upload.dragover{border-color:var(--indigo); background:#F1F0FA;}
.modern-upload input[type=file]{position:absolute; inset:0; opacity:0; cursor:pointer;}
.modern-upload .mu-icon{width:34px; height:34px; margin:0 auto 10px; color:var(--indigo);}
.modern-upload .mu-text{font-size:13.5px; color:var(--ink); font-weight:600;}
.modern-upload .mu-sub{font-size:12px; color:var(--ink-soft); margin-top:3px;}
.modern-upload .mu-filename{font-size:12.5px; color:var(--indigo); font-weight:600; margin-top:8px; word-break:break-all;}