/* mole.fabri.cc / moleStyles.css */

/* =========================
   SNIPE THEME TOKENS
   ========================= */

:root,
html[data-theme="light"]{
    
    --font-ui: "Courier Prime", monospace;
    --font-mono: "SN Pro", sans-serif;
    --themeHeaders: "SN Pro", sans-serif;
    --themeBody: "Courier Prime", monospace;
    --themeH2: "SN Pro", sans-serif;
    --themeFontFam: "Courier Prime", monospace;
    
    --ease: cubic-bezier(.2,.8,.2,1);
    --bg: linear-gradient(#f2f5f7, #e8edf1, #dde4ea);
    --text: rgba(15,18,20,.92);
    --muted: rgba(15,18,20,.68);

    --glass: rgba(255,255,255,.56);
    --glass-strong: rgba(255,255,255,.74);
    --glass-soft: rgba(255,255,255,.40);
    --ink: rgba(0,0,0,.05);

    --border: rgba(0,0,0,.10);
    --border-soft: rgba(0,0,0,.07);

    --shadow-lg: 0 20px 60px rgba(0,0,0,.16);
    --shadow-md: 0 14px 40px rgba(0,0,0,.14);
    --shadow-sm: 0 10px 24px rgba(0,0,0,.10);

    --btn-bg: rgba(0,0,0,.05);
    --btn-bg-hover: rgba(0,0,0,.085);
    --btn-border: rgba(74, 81, 83, 0.12);

    --btnColor: #828ca5;
    --btnColorAlt: #afb3bb;
    --btnLight: #afb7bb;
    
    --input-bg: rgba(255,255,255,.76);
    --input-border: rgba(0,0,0,.10);
    --input-text: rgba(15,18,20,.92);
    --placeholder: rgba(15,18,20,.50);
    
    --bg-overlay: rgba(192, 56, 56, 0.29) !important;
    /* old: --overlay: rgba(255,255,255,.42); */

    --accent: #3d465e;
    --accent-strong: #5d6b8e;
    --accent-soft: rgba(52,136,144,.12);

    --panel-bg: var(--glass);
    --panel-bg-strong: var(--glass-strong);
    --card-bg: rgba(255,255,255,.58);

    --topbar-text: rgba(15,18,20,.78);
    --menu-text: rgba(15,18,20,.88);
    
    --modalBG: rgba(255, 255, 255, 0.35);
    
    --mainColor: #828ca5; /* grey */ 
    --invert: #faac18; /* yellow */
    --baseColor: rgba(255,255,255,1); /* white */
    --baseColor018: rgba(255,255,255,.18);
    --baseColor060: rgba(255,255,255,.60);
    --baseColor078: rgba(255,255,255,.78);
    --footColor: #49515b;
    
    --subMenuFake: #ece9ec;
    --matFake: #f7f7f9;
    
    --localBdropBg: url('https://mole.fabri.cc/images/snag-bg.jpg');
}

/* Dark theme */
html[data-theme="dark"]{
    --bg: linear-gradient(#40484f, #41454f, #30373c);
    --text: rgba(255,255,255,.92);
    --muted: rgba(255,255,255,.72);

    --glass: rgba(255,255,255,.08);
    --glass-strong: rgba(255,255,255,.12);
    --glass-soft: rgba(255,255,255,.05);
    --ink: rgba(0,0,0,.12);

    --border: rgba(255,255,255,.18);
    --border-soft: rgba(255,255,255,.10);

    --shadow-lg: 0 20px 60px rgba(0,0,0,.35);
    --shadow-md: 0 14px 40px rgba(0,0,0,.28);
    --shadow-sm: 0 10px 24px rgba(0,0,0,.18);

    --btn-bg: rgba(255,255,255,.10);
    --btn-bg-hover: rgba(255,255,255,.16);
    --btn-border: rgba(255,255,255,.14);
    
    --btnColor: #faac18; /* alt: dc9a32 */
    --btnColorAlt: #9682a7;
    --btnLight: #B0832D;
    
    --input-bg: rgba(0,0,0,.18);
    --input-border: rgba(255,255,255,.18);
    --input-text: rgba(255,255,255,.92);
    --placeholder: rgba(255,255,255,.58);

    --overlay: rgba(19, 14, 32, 0.7);
    --blur: blur(14px) saturate(140%);

    --accent: #faac18;
    --accent-strong: #4ca9bf;
    --accent-soft: rgba(111,184,194,.18);

    --panel-bg: var(--glass);
    --panel-bg-strong: var(--glass-strong);
    --card-bg: rgba(255,255,255,.07);

    --topbar-text: rgba(255,255,255,.82);
    --menu-text: rgba(255,255,255,.88);
    
    --modalBG: rgba(0, 0, 0, 0.35);
    
    --mainColor: #faac18; /* yellow */
    --invert: #828ca5; /* grey */
    --baseColor: rgba(0,0,0,1); /* black */
    --baseColor018: rgba(0,0,0,.18);
    --baseColor060: rgba(34, 32, 38, 0.55);
    --baseColor078: rgba(0,0,0,.78);
    --footColor: #faac18;
    
    --subMenuFake: #000;
    --blackVelvet: rgba(23, 25, 41, 0.7);
    --matFake: #f7f7f9;
}

h1, h2, h3 {
    font-weight:800 !important;
}

/* dashboard area */
#dashboard {
  padding: 14px;
  pointer-events: all;
}

#snagTool {
  background: #fff;
  padding: 14px;
  border-radius: 10px;
  box-shadow: 3px 2px 11px -10px #829599;
  text-align: left;
}

.titleRow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}

.titleRow h2 {
  margin: 0 0 6px;
  font-weight: 500;
  color: #1f7384;
  letter-spacing: 1px;
}

.miniNote {
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  color: #6c6c6c;
}

.optRow {
  margin: 14px 0;
}

.optRow label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: #5e8e97;
  margin-bottom: 6px;
  text-transform: lowercase;
  letter-spacing: 0.6px;
}

.optRow input,
.optRow select {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #d7e4e2;
  background: #f2f7f6;
  border-radius: 6px;
  padding: 12px 12px;
  font-size: 15px;
  font-weight: 400;
  color: #3d4648;
  pointer-events: all;
}

.optRow .hint {
  margin: 6px 0 0;
  font-size: 12px;
  font-weight: 400;
  color: #7a7a7a;
}

.twoCol {
  display: flex;
  gap: 12px;
}

.twoCol .col {
  flex: 1;
}

/* segmented buttons */
.segmented {
  display: flex;
  gap: 8px;
}

.segBtn {
  flex: 1;
  border: 1px solid #cfe0de;
  background: #eef4f3;
  color: #3d4648;
  border-radius: 8px;
  padding: 11px 10px;
  cursor: pointer;
  font-weight: 500;
  font-size: 14px;
  pointer-events: all;
  transition: 0.15s ease;
}

.segBtn i {
  margin-right: 8px;
}

.segBtn.active {
  background: #5e8e97;
  border-color: #5e8e97;
  color: #fff;
}

.segBtn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* action buttons */
.actionRow {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.primaryBtn,
.ghostBtn {
  border: none;
  border-radius: 7px;
  padding: 12px 14px;
  cursor: pointer;
  font-weight: 600;
  pointer-events: all;
}

.primaryBtn {
  background: #5e8e97;
  color: #fff;
  flex: 1;
}

.primaryBtn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.ghostBtn {
  background: #e9efee;
  color: #3d4648;
  width: 120px;
}

/* job area */
.jobArea {
  margin-top: 14px;
  background: #fbfafa;
  border-radius: 10px;
  padding: 12px;
  border: 1px solid #e3e8e7;
}

.jobTop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.jobStatus {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: #3d4648;
}

.muted {
  font-weight: 400;
  color: #6c6c6c;
  margin-left: 8px;
}

/* status pill */
.pill {
  display: inline-block;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  background: #e7ecea;
  color: #3d4648;
  margin-right: 8px;
}

.pill-queued { background: #e7ecea; }
.pill-downloading { background: #dfecef; }
.pill-converting { background: #f1eadf; }
.pill-done { background: #deefe0; }
.pill-error { background: #f2d9d9; }

.progressWrap {
  margin-top: 10px;
}

.progressBar {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: #e7ecea;
  overflow: hidden;
}

.progressFill {
  height: 100%;
  width: 0%;
  background: #5e8e97;
  border-radius: 999px;
  transition: width 0.2s ease;
}

/* log box */
.logWrap {
  margin-top: 12px;
}

.logTitle {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 600;
  color: #5e8e97;
}

.logTail {
  margin: 0;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #e3e8e7;
  background: #ffffff;
  font-family: "Roboto Mono", monospace;
  font-size: 11px;
  line-height: 16px;
  color: #3d4648;
  max-height: 160px;
  overflow: auto;
}

/* help mat */

.howBlock p {
  margin: 12px 0;
  font-weight: 400;
  color: #3d4648;
}

.highLight {
  background: #e7ecea;
  padding: 1px 5px;
  margin-right: 6px;
  display: inline-block;
  border: 0.5px solid #74aeb5;
  font-weight: 500;
  color: #3d4648;
  white-space: nowrap;
  border-radius: 4px;
}

.legalNote {
  margin-top: 12px;
  font-size: 12px;
  font-weight: 400;
  color: #6c6c6c;
}

.logBtns {
    display: flex;
    margin: 17px 0 12px 5px;
    align-items: baseline;
}

#copyLogBtn {
    margin: 0 30px;
    padding: 3px 12px;
    background: #97bcc3;
    border-radius: 4px;
    opacity:0;
    pointer-events:none;
    transition: opacity .2s ease, background .2s ease;
}

#copyLogBtn:hover {
    background: #5e8e97;
}

#copyLogBtn.reveal {
    opacity:1;
    pointer-events:all;
}

.copyStatus {
  margin-left: 8px;
  font-size: 0.85rem;
  color: #3cb371; /* soft green */
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}

.copyStatus.show {
  opacity: 1;
  transform: translateY(0);
}

/* responsive */
@media (max-width: 640px) {

  .twoCol {
    flex-direction: column;
  }

}