/* =========================================
   ROOT
========================================= */

:root{

  --bg:#f3f6fb;
  --panel:#ffffff;
  --panel-alt:#f8fafc;

  --border:#dbe3ee;
  --border-strong:#c8d3e1;

  --text:#0f172a;
  --text-soft:#475569;
  --text-light:#64748b;

  --primary:#2563eb;
  --primary-hover:#1d4ed8;

  --success:#16a34a;
  --danger:#dc2626;
  --warning:#f59e0b;

  --shadow-sm:
  0 1px 2px rgba(15,23,42,.04);

  --shadow:
  0 4px 12px rgba(15,23,42,.06);

  --shadow-lg:
  0 10px 30px rgba(15,23,42,.08);

  --radius-sm:10px;
  --radius:16px;
  --radius-lg:22px;

  --transition:
  160ms cubic-bezier(.4,0,.2,1);

  --sidebar-width:260px;
  --topbar-height:72px;

  --container:1600px;

}

/* =========================================
   RESET
========================================= */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:
  Inter,
  ui-sans-serif,
  system-ui,
  -apple-system,
  BlinkMacSystemFont,
  "Segoe UI",
  sans-serif;

  background:var(--bg);
  color:var(--text);

  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/* =========================================
   GLOBAL
========================================= */

img{
  max-width:100%;
  display:block;
}

button,
input,
textarea,
select{
  font:inherit;
}

button{
  border:none;
  background:none;
  cursor:pointer;
}

a{
  text-decoration:none;
  color:inherit;
}

/* =========================================
   PAGE
========================================= */

.admin-page{
  min-height:100vh;
}

/* =========================================
   TOPBAR
========================================= */

.admin-topbar{

  position:sticky;
  top:0;
  z-index:500;

  height:var(--topbar-height);

  background:
  rgba(255,255,255,.82);

  backdrop-filter:blur(14px);

  border-bottom:
  1px solid rgba(219,227,238,.9);

}

.admin-topbar-inner{

  width:100%;
  max-width:var(--container);

  height:100%;

  margin:auto;

  padding:0 2rem;

  display:flex;
  align-items:center;
  justify-content:space-between;

}

.logo-wrap{
  display:flex;
  flex-direction:column;
  gap:.15rem;
}

.logo{

  font-size:1.55rem;
  font-weight:800;
  letter-spacing:-.04em;

  color:var(--text);

}

.logo span{
  color:var(--primary);
}

.logo-tag{

  font-size:.72rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;

  color:var(--text-light);

}

.admin-topbar-right{
  display:flex;
  align-items:center;
  gap:1rem;
}

.admin-status{

  display:flex;
  align-items:center;
  gap:.55rem;

  padding:.7rem 1rem;

  background:#fff;

  border:1px solid var(--border);

  border-radius:999px;

  font-size:.86rem;
  font-weight:600;

  box-shadow:var(--shadow-sm);

}

.status-dot{

  width:10px;
  height:10px;

  border-radius:50%;

  background:var(--success);

  box-shadow:
  0 0 0 4px rgba(22,163,74,.12);

}

/* =========================================
   SHELL
========================================= */

.admin-shell{

  width:100%;
  max-width:var(--container);

  margin:auto;

  display:grid;
  grid-template-columns:var(--sidebar-width) 1fr;

  gap:2rem;

  padding:2rem;

}

/* =========================================
   SIDEBAR
========================================= */

.admin-sidebar{

  position:sticky;
  top:calc(var(--topbar-height) + 2rem);

  align-self:start;

}

.sidebar-section{

  background:var(--panel);

  border:1px solid var(--border);

  border-radius:var(--radius-lg);

  padding:1.2rem;

  box-shadow:var(--shadow);

}

.sidebar-title{

  font-size:.78rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;

  color:var(--text-light);

  margin-bottom:1rem;

}

.admin-nav{

  display:flex;
  flex-direction:column;
  gap:.5rem;

}

.admin-tab{

  width:100%;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:1rem 1rem;

  border-radius:14px;

  color:var(--text-soft);

  font-weight:700;

  transition:var(--transition);

}

.admin-tab:hover{

  background:var(--panel-alt);

  color:var(--text);

}

.admin-tab.active{

  background:var(--primary);

  color:#fff;

  box-shadow:
  0 8px 20px rgba(37,99,235,.24);

}

/* =========================================
   MAIN
========================================= */

.admin-main{
  min-width:0;
}

.admin-panel{
  display:block;
}

/* =========================================
   PAGE HEADER
========================================= */

.page-header{

  margin-bottom:1.75rem;

  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;

}

.page-header h1{

  font-size:2rem;
  font-weight:800;
  letter-spacing:-.04em;

  margin-bottom:.45rem;

}

.page-header p{

  color:var(--text-soft);
  font-size:1rem;

}

/* =========================================
   GRID
========================================= */

.admin-grid{

  display:grid;
  grid-template-columns:
  repeat(auto-fit,minmax(340px,1fr));

  gap:1.5rem;

}

/* =========================================
   CARD
========================================= */

.admin-card{

  background:var(--panel);

  border:1px solid var(--border);

  border-radius:var(--radius-lg);

  padding:1.5rem;

  box-shadow:var(--shadow);

  transition:var(--transition);

}

.admin-card:hover{

  transform:translateY(-2px);

  box-shadow:var(--shadow-lg);

}

.card-content{
  margin-top:1.25rem;
}

.empty-card{

  display:flex;
  flex-direction:column;
  justify-content:center;

  min-height:240px;

  opacity:.8;

}

/* =========================================
   SECTION HEAD
========================================= */

.section-head{

  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;

  margin-bottom:1.5rem;

}

.section-head h2{

  font-size:1.15rem;
  font-weight:800;

  margin-bottom:.35rem;

}

.section-head p{

  color:var(--text-soft);
  font-size:.95rem;

}

/* =========================================
   BADGE
========================================= */

.admin-badge{

  flex-shrink:0;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:34px;

  padding:.5rem .85rem;

  border-radius:999px;

  background:
  rgba(37,99,235,.08);

  color:var(--primary);

  font-size:.78rem;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;

}

/* =========================================
   FORM
========================================= */

.form-grid{

  display:grid;
  grid-template-columns:
  repeat(auto-fit,minmax(220px,1fr));

  gap:1rem;

}

.field{
  display:flex;
  flex-direction:column;
  gap:.55rem;
}

.field.full{
  grid-column:1/-1;
}

.field label{

  font-size:.84rem;
  font-weight:700;

  color:var(--text-soft);

}

input,
textarea,
select{

  width:100%;

  background:#fff;

  border:1px solid var(--border);

  border-radius:14px;

  padding:.95rem 1rem;

  color:var(--text);

  transition:var(--transition);

}

textarea{
  resize:vertical;
  min-height:130px;
}

input:focus,
textarea:focus,
select:focus{

  outline:none;

  border-color:rgba(37,99,235,.55);

  box-shadow:
  0 0 0 4px rgba(37,99,235,.1);

}

/* =========================================
   URL PREVIEW
========================================= */

.url-preview{

  background:var(--panel-alt);

  border:1px dashed var(--border-strong);

  border-radius:14px;

  padding:1rem;

  font-size:.92rem;

  color:var(--text-soft);

  word-break:break-word;

}

/* =========================================
   REVIEW SECTION
========================================= */

.review-section{

  margin-top:2rem;
  padding-top:2rem;

  border-top:1px solid var(--border);

}

.review-section h3{

  font-size:1rem;
  font-weight:800;

  margin-bottom:1.25rem;

}

/* =========================================
   INFO GRID
========================================= */

.info-grid{

  display:grid;
  grid-template-columns:
  repeat(auto-fit,minmax(260px,1fr));

  gap:1rem;

}

.info-grid p{

  background:var(--panel-alt);

  border:1px solid var(--border);

  border-radius:14px;

  padding:1rem;

  font-size:.95rem;

}

/* =========================================
   BUTTONS
========================================= */

.btn{

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;

  min-height:48px;

  padding:.9rem 1.2rem;

  border-radius:14px;

  font-weight:700;

  transition:var(--transition);

}

.btn-primary{

  background:var(--primary);
  color:#fff;

  box-shadow:
  0 8px 20px rgba(37,99,235,.22);

}

.btn-primary:hover{

  background:var(--primary-hover);

  transform:translateY(-1px);

}

.btn-secondary{

  background:#fff;

  border:1px solid var(--border);

  color:var(--text);

}

.btn-secondary:hover{
  background:var(--panel-alt);
}

.btn-danger{

  background:var(--danger);
  color:#fff;

}

.btn-danger:hover{
  filter:brightness(.96);
}

.action-row,
.review-actions{

  margin-top:2rem;

  display:flex;
  flex-wrap:wrap;
  gap:1rem;

}

/* =========================================
   MESSAGES
========================================= */

.admin-message{

  margin-top:1rem;

  padding:1rem 1.1rem;

  border-radius:14px;

  font-size:.92rem;
  font-weight:600;

}

.admin-message.error{

  background:
  rgba(220,38,38,.08);

  border:1px solid
  rgba(220,38,38,.18);

  color:#991b1b;

}

/* =========================================
   STATES
========================================= */

.loading-state{

  display:flex;
  align-items:center;
  justify-content:center;

  min-height:120px;

  border:1px dashed var(--border);

  border-radius:14px;

  background:var(--panel-alt);

  color:var(--text-light);

  font-weight:600;

}

.pending-list{

  display:flex;
  flex-direction:column;
  gap:1rem;

}

/* =========================================
   CHECKBOX
========================================= */

.checkbox-wrap{

  display:flex;
  align-items:center;
  gap:.75rem;

  cursor:pointer;

}

.checkbox-wrap input{
  width:18px;
  height:18px;
}

/* =========================================
   HINT
========================================= */

.hint{

  margin-top:.8rem;

  color:var(--text-light);

  font-size:.9rem;

}

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width:1200px){

  .admin-shell{

    grid-template-columns:1fr;

  }

  .admin-sidebar{

    position:relative;
    top:auto;

  }

  .admin-nav{

    flex-direction:row;
    flex-wrap:wrap;

  }

  .admin-tab{
    width:auto;
  }

}

@media (max-width:768px){

  .admin-topbar-inner{
    padding:0 1rem;
  }

  .admin-shell{
    padding:1rem;
    gap:1rem;
  }

  .admin-card{
    padding:1.2rem;
  }

  .page-header h1{
    font-size:1.7rem;
  }

  .section-head{

    flex-direction:column;
    align-items:flex-start;

  }

  .review-actions,
  .action-row{

    flex-direction:column;

  }

  .btn{
    width:100%;
  }

}

@media (max-width:520px){

  .admin-nav{
    flex-direction:column;
  }

  .admin-tab{
    width:100%;
  }

  .page-header h1{
    font-size:1.45rem;
  }

}
.keyword-editor {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.keyword-chip {
  display: flex;
  align-items: center;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 0.9rem;
}

.keyword-chip input {
  border: none;
  background: transparent;
  outline: none;
  width: auto;
  min-width: 60px;
}

.keyword-remove {
  margin-left: 6px;
  cursor: pointer;
  font-weight: bold;
  color: #dc2626;
}