/* ============================================================
   Oneliners — Professional dark theme with neon green accents
   ============================================================ */

.oneliners-page{
  width:min(1200px, calc(100% - 32px));
  margin:auto;
  padding:56px 0 100px;
  color:#eaf5ef
}

/* Hero */
.oneliners-hero{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  padding-bottom:36px;
  border-bottom:1px solid rgba(151,186,166,.14);
  margin-bottom:40px
}
.oneliners-eyebrow{
  color:#35f27a;
  font-size:.64rem;
  font-weight:850;
  letter-spacing:.18em
}
.oneliners-page h1{
  margin:8px 0 10px;
  color:#fff;
  font:650 clamp(2.4rem, 6vw, 4.4rem)/.93 "Space Grotesk", sans-serif !important;
  letter-spacing:-.055em
}
.oneliners-hero p{
  max-width:560px;
  margin:0;
  color:#82968b;
  font-size:.88rem;
  line-height:1.65
}

/* Layout */
.oneliners-layout{
  display:grid;
  grid-template-columns:minmax(0, 370px) minmax(0, 1fr);
  gap:36px;
  align-items:start
}

/* ---- Submit card ---- */
.oneliners-submit-card{
  padding:28px 24px;
  border:1px solid rgba(151,186,166,.15);
  border-radius:18px;
  background:linear-gradient(160deg, rgba(11,23,18,.92), rgba(8,18,13,.88));
  position:sticky;
  top:24px
}
.oneliners-submit-card h2{
  margin:0 0 22px;
  color:#fff;
  font-size:1.08rem;
  font-weight:750
}

/* Form fields */
.ol-field{
  display:grid;
  gap:7px;
  margin-bottom:16px
}
.ol-field label{
  color:#b9c9c1;
  font-size:.67rem;
  font-weight:700;
  letter-spacing:.03em
}
.ol-field input,
.ol-field textarea{
  width:100%;
  padding:10px 13px;
  border:1px solid rgba(151,186,166,.2);
  border-radius:9px;
  background:#071209;
  color:#eaf5ef;
  font-family:inherit;
  font-size:.8rem;
  line-height:1.5;
  box-sizing:border-box;
  transition:border-color .18s, box-shadow .18s
}
.ol-field textarea{
  resize:vertical;
  min-height:110px;
  font-family:'SF Mono','Fira Code','Fira Mono',monospace;
  font-size:.74rem
}
.ol-field input:focus,
.ol-field textarea:focus{
  outline:none;
  border-color:#35f27a;
  box-shadow:0 0 0 3px rgba(53,242,122,.07)
}
.ol-field input::placeholder,
.ol-field textarea::placeholder{
  color:#60766a
}
.ol-error{
  display:block;
  color:#ff7f8c;
  font-size:.61rem;
  margin-top:3px
}

/* ---- Toggle ---- */
.ol-toggle{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  margin-bottom:20px;
  border:1px solid rgba(151,186,166,.16);
  border-radius:10px;
  background:rgba(0,0,0,.12);
  cursor:pointer;
  transition:border-color .18s
}
.ol-toggle:hover{ border-color:rgba(53,242,122,.3) }
.ol-toggle input{ display:none }
.ol-toggle-track{
  position:relative;
  width:40px; height:22px;
  flex:0 0 40px;
  border-radius:11px;
  background:#1a2e24;
  transition:background .2s
}
.ol-toggle-thumb{
  position:absolute;
  top:3px; left:3px;
  width:16px; height:16px;
  border-radius:50%;
  background:#60766a;
  transition:transform .2s, background .2s
}
.ol-toggle input:checked ~ .ol-toggle-track{ background:#1b4a2e }
.ol-toggle input:checked ~ .ol-toggle-track .ol-toggle-thumb{
  transform:translateX(18px);
  background:#35f27a
}
.ol-toggle-label{ display:grid; gap:3px }
.ol-toggle-label strong{ color:#d8ebe1; font-size:.75rem; font-weight:700 }
.ol-toggle-label small{ color:#71877b; font-size:.6rem }

/* ---- SAVE BUTTON ---- */
.ol-save-btn{
  display:flex;
  width:100%;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:52px;
  padding:0 26px;
  border-radius:13px;
  border:1px solid rgba(53,242,122,.55);
  border-bottom:3px solid rgba(53,242,122,.4);
  background:linear-gradient(165deg, #0c2418 0%, #112e1c 50%, #0d2618 100%);
  color:#4dff96;
  font-size:.9rem;
  font-weight:900;
  letter-spacing:.07em;
  text-transform:uppercase;
  cursor:pointer;
  transition:all .25s cubic-bezier(.34, 1.56, .64, 1);
  position:relative;
  overflow:hidden;
  box-shadow:
    0 4px 14px rgba(53,242,122,.12),
    inset 0 1px 0 rgba(255,255,255,.06)
}
/* shimmer sweep on hover */
.ol-save-btn::after{
  content:'';
  position:absolute;
  top:-50%; left:-70%;
  width:45px; height:200%;
  background:rgba(255,255,255,.06);
  transform:rotate(25deg);
  transition:left .55s ease
}
.ol-save-btn:hover{
  background:linear-gradient(165deg, #112e1c 0%, #1a3d2a 50%, #132a1e 100%);
  border-color:#35f27a;
  border-bottom-color:#28d96a;
  color:#6effa4;
  box-shadow:
    0 6px 28px rgba(53,242,122,.30),
    0 2px 8px rgba(0,0,0,.3),
    inset 0 1px 0 rgba(255,255,255,.1);
  transform:translateY(-3px)
}
.ol-save-btn:hover::after{ left:140% }
.ol-save-btn:active{
  transform:translateY(-1px);
  box-shadow:0 3px 10px rgba(53,242,122,.2), inset 0 1px 0 rgba(255,255,255,.08)
}
.ol-save-btn svg{
  width:19px; height:19px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
  position:relative;
  z-index:1;
  flex-shrink:0
}

/* ---- Sign-in card ---- */
.ol-signin-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:14px;
  padding:40px 24px;
  border:1px solid rgba(151,186,166,.14);
  border-radius:18px;
  background:linear-gradient(160deg, rgba(11,23,18,.92), rgba(8,18,13,.88));
  position:sticky;
  top:24px
}
.ol-signin-icon{
  display:grid;
  width:56px; height:56px;
  place-items:center;
  border:1px solid rgba(53,242,122,.2);
  border-radius:14px;
  background:rgba(53,242,122,.07);
  color:#35f27a
}
.ol-signin-icon svg{
  width:26px; height:26px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round
}
.ol-signin-card h2{ margin:0; color:#fff; font-size:1.1rem; font-weight:750 }
.ol-signin-card p{ margin:0; color:#7f9388; font-size:.76rem; line-height:1.6 }
.ol-signin-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:0 24px;
  border-radius:12px;
  border:1px solid rgba(53,242,122,.45);
  background:linear-gradient(160deg, rgba(53,242,122,.14), rgba(53,242,122,.06));
  color:#6effa4;
  font-size:.8rem;
  font-weight:800;
  text-decoration:none !important;
  transition:all .22s ease
}
.ol-signin-btn:hover{
  border-color:#35f27a;
  background:linear-gradient(160deg, rgba(53,242,122,.22), rgba(53,242,122,.1));
  box-shadow:0 0 20px rgba(53,242,122,.2);
  transform:translateY(-2px)
}

/* ---- Tabs ---- */
.oneliners-tabs{
  display:flex;
  gap:6px;
  margin-bottom:18px
}
.ol-tab{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:40px;
  padding:0 14px;
  border-radius:10px;
  border:1px solid rgba(151,186,166,.15);
  color:#82968b;
  font-size:.72rem;
  font-weight:700;
  text-decoration:none !important;
  transition:.18s
}
.ol-tab:hover{
  border-color:rgba(53,242,122,.28);
  color:#c3d9ce
}
.ol-tab.is-active{
  border-color:#35f27a;
  background:rgba(53,242,122,.1);
  color:#35f27a
}
.ol-tab svg{
  width:17px; height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round
}
.ol-pending-badge{
  display:inline-flex;
  min-width:19px; height:19px;
  padding:0 5px;
  place-items:center;
  border-radius:9px;
  background:#ef3340;
  color:#fff;
  font-size:.56rem;
  font-weight:800
}

/* ---- Search ---- */
.ol-search{
  display:flex;
  gap:8px;
  margin-bottom:20px
}
.ol-search input{
  flex:1;
  min-height:42px;
  padding:0 14px;
  border:1px solid rgba(151,186,166,.2);
  border-radius:10px;
  background:#081209;
  color:#eaf5ef;
  font-size:.8rem;
  box-sizing:border-box
}
.ol-search input:focus{
  outline:none;
  border-color:#35f27a;
  box-shadow:0 0 0 3px rgba(53,242,122,.06)
}
.ol-search input::placeholder{ color:#60766a }
.ol-search button{
  display:grid;
  width:42px; height:42px;
  flex:0 0 42px;
  place-items:center;
  border:1px solid rgba(151,186,166,.18);
  border-radius:10px;
  background:#081209;
  color:#8fa298;
  cursor:pointer;
  transition:.18s
}
.ol-search button:hover{ border-color:#35f27a; color:#35f27a }
.ol-search button svg{
  width:17px; height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:2
}

/* ---- Grid ---- */
.ol-grid{ display:grid; gap:14px }

/* ---- Card ---- */
.ol-card{
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-rows:auto auto;
  border:1px solid rgba(151,186,166,.14);
  border-radius:14px;
  background:#0a1511;
  overflow:hidden;
  transition:border-color .2s, box-shadow .2s, transform .2s
}
.ol-card:hover{
  border-color:rgba(151,186,166,.28);
  box-shadow:0 12px 32px rgba(0,0,0,.16);
  transform:translateY(-1px)
}
.ol-card.is-pending{
  border-color:rgba(255,184,76,.28);
  background:linear-gradient(145deg, rgba(255,184,76,.04), #0a1511)
}
.ol-card-head{
  display:grid;
  grid-column:1;
  padding:16px 16px 12px
}
.ol-card-meta{ display:grid; gap:7px }
.ol-card-meta h3{ margin:0; color:#eaf5ef; font-size:.9rem; font-weight:750; line-height:1.3 }
.ol-card-info{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  font-size:.61rem
}
.ol-visibility{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:3px 8px;
  border-radius:6px;
  font-weight:750
}
.ol-visibility svg{ width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2 }
.ol-visibility-public{
  border:1px solid rgba(77,159,255,.22);
  color:#7cb9ff;
  background:rgba(77,159,255,.06)
}
.ol-visibility-private{
  border:1px solid rgba(151,186,166,.16);
  color:#82968b;
  background:rgba(0,0,0,.08)
}
.ol-card-info time{ color:#60766a }
.ol-author{ color:#60766a }

.ol-card-body{ grid-column:1 / -1; padding:0 16px 14px }
.ol-card-body pre{
  position:relative;
  margin:0;
  padding:13px 44px 13px 14px;
  border:1px solid rgba(151,186,166,.1);
  border-radius:9px;
  background:#050d0a;
  overflow-x:auto
}
.ol-card-body code{
  display:block;
  font-family:'SF Mono','Fira Code','Fira Mono','Courier New',monospace;
  font-size:.73rem;
  line-height:1.65;
  color:#c3d9ce;
  white-space:pre
}

/* Copy button */
.ol-copy{
  position:absolute;
  top:9px; right:9px;
  display:grid;
  width:32px; height:32px;
  place-items:center;
  border:1px solid rgba(151,186,166,.16);
  border-radius:7px;
  background:#08130e;
  color:#8fa298;
  cursor:pointer;
  transition:.18s
}
.ol-copy:hover{ border-color:#35f27a; color:#35f27a; background:rgba(53,242,122,.08) }
.ol-copy.is-copied{ border-color:#35f27a; color:#35f27a }
.ol-copy svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }

/* ---- Card actions (approve / reject / delete) ---- */
.ol-card-actions{
  display:flex;
  flex-direction:row;
  gap:8px;
  padding:14px 16px;
  align-items:center
}
.ol-delete,
.ol-approve,
.ol-reject{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:38px;
  padding:0 14px;
  border-radius:10px;
  border:1px solid rgba(151,186,166,.15);
  background:#08130e;
  color:#8fa298;
  font-size:.69rem;
  font-weight:700;
  cursor:pointer;
  transition:all .2s ease;
  position:relative;
  overflow:hidden;
  text-decoration:none !important
}
/* Approve — green identity by default */
.ol-approve{
  color:#35f27a;
  border-color:rgba(53,242,122,.32);
  background:rgba(53,242,122,.06)
}
/* Reject — subtle danger */
.ol-reject:hover,
.ol-delete:hover{
  border-color:rgba(255,111,125,.5);
  color:#ff7f8c;
  background:rgba(255,111,125,.08);
  box-shadow:0 4px 14px rgba(255,111,125,.12);
  transform:translateY(-1px)
}
.ol-approve:hover{
  border-color:#35f27a;
  background:rgba(53,242,122,.14);
  box-shadow:0 4px 14px rgba(53,242,122,.14);
  transform:translateY(-1px)
}
.ol-delete svg,
.ol-approve svg,
.ol-reject svg{
  width:15px; height:15px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex:0 0 auto
}

/* ---- Tooltip ---- */
.ol-tooltip{
  position:fixed;
  z-index:9999;
  padding:5px 9px;
  border:1px solid rgba(151,186,166,.22);
  border-radius:6px;
  background:#020806;
  box-shadow:0 8px 22px rgba(0,0,0,.35);
  color:#eaf6ef;
  font-size:.58rem;
  font-weight:700;
  white-space:nowrap;
  pointer-events:none
}

/* ---- Empty state ---- */
.ol-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  padding:74px 24px;
  text-align:center;
  border:1px dashed rgba(151,186,166,.2);
  border-radius:14px
}
.ol-empty>span{
  display:grid;
  width:56px; height:56px;
  place-items:center;
  border:1px solid rgba(53,242,122,.15);
  border-radius:14px;
  background:rgba(53,242,122,.07);
  color:#35f27a
}
.ol-empty svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
.ol-empty h3{ color:#fff; font-size:1.05rem }
.ol-empty p{ color:#7f9388; font-size:.76rem; max-width:340px; line-height:1.6 }

/* ============================================================
   Responsive
   ============================================================ */
@media(max-width:900px){
  .oneliners-layout{ grid-template-columns:1fr }
  .oneliners-hero{ flex-direction:column; align-items:flex-start }
  .oneliners-submit-card,
  .ol-signin-card{ position:static }
}

@media(max-width:680px){
  .oneliners-page{ padding-top:32px; width:min(100% - 20px, 1200px) }
  .ol-card{ grid-template-columns:1fr }
  .ol-card-actions{
    flex-direction:row;
    padding:0 14px 14px;
    gap:8px
  }
  .oneliners-tabs{ flex-wrap:wrap }
  .ol-tab{ flex:1; justify-content:center; min-height:38px; font-size:.7rem; padding:0 10px }
  .ol-delete,
  .ol-approve,
  .ol-reject{
    min-height:36px;
    padding:0 12px;
    font-size:.67rem;
    flex:1;
    justify-content:center
  }
  .ol-signin-card{ padding:30px 18px }
  .ol-signin-card h2{ font-size:1rem }
}

@media(max-width:480px){
  .oneliners-submit-card{ padding:22px 16px }
  .oneliners-submit-card h2{ font-size:1rem }
  .ol-save-btn{
    min-height:48px;
    font-size:.82rem;
    padding:0 20px
  }
  .ol-save-btn svg{ width:17px; height:17px }
  .ol-card-body pre{ padding:10px 40px 10px 10px }
  .ol-copy{ top:7px; right:7px; width:28px; height:28px }
  .ol-delete,
  .ol-approve,
  .ol-reject{
    min-height:34px;
    padding:0 10px;
    font-size:.65rem;
    border-radius:8px
  }
  .ol-delete svg,
  .ol-approve svg,
  .ol-reject svg{ width:14px; height:14px }
  .ol-signin-card{ padding:26px 14px }
  .ol-signin-btn{ min-height:42px; font-size:.76rem; width:100% }
  .ol-empty{ padding:56px 18px }
}