/* PitchDrop V4 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --bg: #0A0A0A;
  --s1: #141414;
  --s2: #1C1C1C;
  --s3: #242424;
  --border: #2A2A2A;
  --border2: #333;
  --lime: #C8F135;
  --lime2: #A8CC1A;
  --white: #F5F5F0;
  --white2: #C0C0B8;
  --muted: #606058;
  --muted2: #383838;
  --green: #4ADE80;
  --yellow: #FCD34D;
  --red: #F87171;
  --blue: #60A5FA;
  --r: 8px; --r2: 12px; --r3: 16px;
  --t: all 0.18s ease;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--white);line-height:1.5;min-height:100vh;-webkit-font-smoothing:antialiased;}
a{text-decoration:none;color:inherit;}
img{max-width:100%;height:auto;}
::-webkit-scrollbar{width:4px;}
::-webkit-scrollbar-track{background:var(--s1);}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px;}

/* NAV */
.nav{position:sticky;top:0;z-index:50;background:rgba(10,10,10,0.96);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;gap:12px;}
.nav-brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:18px;letter-spacing:-0.3px;white-space:nowrap;}
.nav-brand img{height:28px;width:28px;object-fit:contain;}
.nav-brand em{color:var(--lime);font-style:normal;}
.nav-right{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;}
.nav-right a{font-size:13px;font-weight:500;color:var(--muted);padding:6px 10px;border-radius:var(--r);transition:var(--t);white-space:nowrap;}
.nav-right a:hover{color:var(--white);background:var(--s2);}
.credits-pill{display:flex;align-items:center;gap:5px;background:var(--s2);border:1px solid var(--border);border-radius:999px;padding:4px 12px;font-size:13px;font-weight:600;white-space:nowrap;}
.credits-pill .n{color:var(--lime);}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 18px;border-radius:var(--r);font-family:'Inter',sans-serif;font-weight:600;font-size:14px;border:none;cursor:pointer;transition:var(--t);white-space:nowrap;text-decoration:none;line-height:1;}
.btn:disabled{opacity:0.4;cursor:not-allowed;pointer-events:none;}
.btn-lime{background:var(--lime);color:#000;}
.btn-lime:hover{background:var(--lime2);transform:translateY(-1px);}
.btn-ghost{background:var(--s2);color:var(--white);border:1px solid var(--border);}
.btn-ghost:hover{border-color:var(--border2);}
.btn-outline{background:transparent;color:var(--white);border:1px solid var(--border);}
.btn-outline:hover{border-color:var(--lime);color:var(--lime);}
.btn-danger{background:rgba(248,113,113,0.1);color:var(--red);border:1px solid rgba(248,113,113,0.2);}
.btn-danger:hover{background:rgba(248,113,113,0.2);}
.btn-sm{padding:7px 14px;font-size:12px;}
.btn-lg{padding:13px 24px;font-size:15px;}
.btn-full{width:100%;}

/* FORMS */
.field{margin-bottom:14px;}
.field label{display:block;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:5px;}
.inp{width:100%;padding:11px 14px;background:var(--s2);border:1.5px solid var(--border);border-radius:var(--r);font-size:14px;color:var(--white);transition:var(--t);outline:none;font-family:'Inter',sans-serif;}
.inp:focus{border-color:var(--lime);box-shadow:0 0 0 3px rgba(200,241,53,0.07);}
.inp::placeholder{color:var(--muted2);}
.inp option{background:var(--s2);}
.inp-wrap{position:relative;}
.inp-wrap .inp{padding-right:42px;}
.eye{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--muted);cursor:pointer;font-size:16px;padding:4px;line-height:1;}
.eye:hover{color:var(--white);}

/* CARDS */
.card{background:var(--s1);border:1px solid var(--border);border-radius:var(--r3);padding:20px;}
.card-sm{background:var(--s1);border:1px solid var(--border);border-radius:var(--r2);padding:14px;}

/* BADGES */
.badge{display:inline-flex;align-items:center;gap:3px;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:700;}
.badge-lime{background:rgba(200,241,53,0.1);color:var(--lime);border:1px solid rgba(200,241,53,0.2);}
.badge-green{background:rgba(74,222,128,0.1);color:var(--green);border:1px solid rgba(74,222,128,0.2);}
.badge-yellow{background:rgba(252,211,77,0.1);color:var(--yellow);border:1px solid rgba(252,211,77,0.2);}
.badge-red{background:rgba(248,113,113,0.1);color:var(--red);border:1px solid rgba(248,113,113,0.2);}
.badge-muted{background:var(--s2);color:var(--muted);border:1px solid var(--border);}

/* ALERTS */
.alert{padding:11px 14px;border-radius:var(--r);font-size:13px;font-weight:500;margin-bottom:14px;}
.alert-success{background:rgba(74,222,128,0.08);color:var(--green);border:1px solid rgba(74,222,128,0.2);}
.alert-error{background:rgba(248,113,113,0.08);color:var(--red);border:1px solid rgba(248,113,113,0.2);}
.alert-warning{background:rgba(252,211,77,0.08);color:var(--yellow);border:1px solid rgba(252,211,77,0.2);}
.alert-info{background:rgba(200,241,53,0.06);color:var(--lime);border:1px solid rgba(200,241,53,0.15);}

/* LOADING */
.bar{width:100%;height:3px;background:var(--s3);border-radius:99px;overflow:hidden;}
.bar-fill{height:100%;background:linear-gradient(90deg,var(--lime),var(--lime2));border-radius:99px;animation:barA 1.6s ease-in-out infinite;}
@keyframes barA{0%{width:0%;margin-left:0%;}50%{width:65%;margin-left:18%;}100%{width:0%;margin-left:100%;}}
.spin{width:16px;height:16px;border:2px solid rgba(200,241,53,0.2);border-top-color:var(--lime);border-radius:50%;animation:spinA .65s linear infinite;display:inline-block;flex-shrink:0;}
@keyframes spinA{to{transform:rotate(360deg);}}

/* TABS */
.tabs{display:flex;gap:3px;background:var(--s2);padding:3px;border-radius:var(--r);border:1px solid var(--border);}
.tab{flex:1;padding:8px 6px;border:none;background:transparent;border-radius:6px;font-family:'Inter',sans-serif;font-weight:600;font-size:13px;color:var(--muted);cursor:pointer;transition:var(--t);text-align:center;}
.tab.active{background:var(--s3);color:var(--white);}

/* PANEL (slide from right) */
.panel-ov{position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:200;opacity:0;pointer-events:none;transition:opacity .25s ease;}
.panel-ov.open{opacity:1;pointer-events:all;}
.panel{position:fixed;top:0;right:-100%;width:min(480px,100vw);height:100vh;background:var(--s1);border-left:1px solid var(--border);z-index:201;display:flex;flex-direction:column;transition:right .28s cubic-bezier(.4,0,.2,1);overflow:hidden;}
.panel.open{right:0;}
.panel-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border);flex-shrink:0;}
.panel-head h3{font-size:14px;font-weight:700;}
.panel-x{background:none;border:none;color:var(--muted);font-size:20px;cursor:pointer;padding:2px;line-height:1;border-radius:var(--r);}
.panel-x:hover{color:var(--white);}
.panel-body{flex:1;overflow-y:auto;padding:18px;}

/* SHARE SHEET (slide from bottom) */
.share-bd{position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:201;opacity:0;pointer-events:none;transition:opacity .25s;}
.share-bd.open{opacity:1;pointer-events:all;}
.share-sheet{position:fixed;bottom:-100%;left:0;right:0;background:var(--s1);border-top:1px solid var(--border);border-radius:var(--r3) var(--r3) 0 0;z-index:202;padding:20px;transition:bottom .28s cubic-bezier(.4,0,.2,1);max-width:520px;margin:0 auto;}
.share-sheet.open{bottom:0;}
.share-title{font-size:14px;font-weight:700;text-align:center;margin-bottom:14px;}
.share-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px;}
.share-opt{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 8px;background:var(--s2);border:1px solid var(--border);border-radius:var(--r2);cursor:pointer;transition:var(--t);}
.share-opt:hover{border-color:var(--lime);}
.share-opt .si{font-size:22px;}
.share-opt .sl{font-size:11px;font-weight:600;color:var(--white2);}

/* SCORE BARS */
.sbars{display:flex;flex-direction:column;gap:7px;}
.sbar{display:flex;align-items:center;gap:10px;}
.sbar-n{font-size:12px;color:var(--muted);width:110px;flex-shrink:0;}
.sbar-t{flex:1;height:4px;background:var(--s3);border-radius:99px;overflow:hidden;}
.sbar-f{height:100%;border-radius:99px;background:var(--lime);transition:width .5s ease;}
.sbar-v{font-size:11px;font-weight:700;color:var(--white);width:32px;text-align:right;flex-shrink:0;}

/* LOADING STEPS */
.lstep{display:flex;align-items:flex-start;gap:10px;padding:8px 10px;border-radius:var(--r);font-size:13px;color:var(--muted2);transition:var(--t);}
.lstep.active{background:var(--s2);color:var(--white);}
.lstep.done{color:var(--green);}
.lstep-icon{flex-shrink:0;}
.lstep-main{flex:1;}
.lstep-detail{font-size:11px;color:var(--lime);margin-top:2px;font-weight:600;display:none;}
.lstep.active .lstep-detail{display:block;}
.found-sig{font-size:11px;color:var(--green);display:flex;align-items:center;gap:5px;margin-top:3px;animation:fadeIn .3s ease both;}
@keyframes fadeIn{from{opacity:0;transform:translateX(-4px);}to{opacity:1;transform:translateX(0);}}

/* SIGNAL TAGS */
.sigs{display:flex;flex-wrap:wrap;gap:5px;}
.sig{background:rgba(200,241,53,0.07);border:1px solid rgba(200,241,53,0.15);color:var(--lime);padding:3px 9px;border-radius:999px;font-size:11px;font-weight:500;}

/* SUBJECTS */
.sub-row{display:flex;align-items:center;justify-content:space-between;background:var(--s2);border:1px solid var(--border);border-radius:var(--r);padding:8px 12px;margin-bottom:5px;gap:8px;}
.sub-row span{font-size:13px;color:var(--white2);flex:1;}

/* EMAIL BOX */
.email-box{background:var(--s2);border:1.5px solid var(--border);border-radius:var(--r2);padding:14px;font-size:14px;color:var(--white2);line-height:1.8;white-space:pre-wrap;min-height:110px;outline:none;transition:var(--t);}
.email-box[contenteditable="true"]{border-color:var(--lime);box-shadow:0 0 0 3px rgba(200,241,53,0.07);}

/* HISTORY CARDS */
.hist-card{background:var(--s1);border:1px solid var(--border);border-radius:var(--r2);padding:14px 16px;margin-bottom:8px;transition:var(--t);}
.hist-card:hover{border-color:var(--border2);}
.hist-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:6px;}
.hist-url{font-weight:600;font-size:13px;color:var(--white);word-break:break-all;flex:1;}
.hist-meta{display:flex;align-items:center;gap:5px;flex-shrink:0;}
.hist-preview{font-size:12px;color:var(--muted);line-height:1.5;margin-bottom:10px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.hist-actions{display:flex;gap:5px;flex-wrap:wrap;}

/* TABLES */
.table-wrap{overflow-x:auto;border-radius:var(--r2);border:1px solid var(--border);}
table{width:100%;border-collapse:collapse;}
thead tr{background:var(--s2);}
th{padding:10px 14px;text-align:left;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:0.06em;border-bottom:1px solid var(--border);}
td{padding:11px 14px;font-size:13px;border-bottom:1px solid var(--s2);color:var(--white2);}
tr:last-child td{border-bottom:none;}
tr:hover td{background:var(--s2);}

/* MISC */
.sec-label{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:0.07em;margin-bottom:7px;}
.divider{height:1px;background:var(--border);margin:14px 0;}
.text-lime{color:var(--lime);} .text-muted{color:var(--muted);} .text-center{text-align:center;} .hidden{display:none!important;} .w-full{width:100%;}
.flex{display:flex;} .flex-center{display:flex;align-items:center;justify-content:center;} .flex-between{display:flex;align-items:center;justify-content:space-between;}
.gap-6{gap:6px;} .gap-8{gap:8px;} .gap-12{gap:12px;} .gap-16{gap:16px;}
.mt-8{margin-top:8px;} .mt-12{margin-top:12px;} .mt-16{margin-top:16px;} .mt-20{margin-top:20px;}
.mb-8{margin-bottom:8px;} .mb-12{margin-bottom:12px;} .mb-16{margin-bottom:16px;}

/* RESPONSIVE */
@media(max-width:768px){
  .nav{padding:0 12px;}
  .nav-right a.hide-sm{display:none;}
  .card{padding:14px;}
  .panel{width:100vw;}
  .share-grid{grid-template-columns:repeat(4,1fr);}
}
@media(max-width:480px){
  .nav-brand{font-size:16px;}
  .credits-pill .hide-xs{display:none;}
  .btn-lg{padding:12px 20px;font-size:14px;}
  .share-grid{grid-template-columns:repeat(2,1fr);}
  .nav-right a:not(.btn):not([style*="color:var(--red)"]){display:none;}
}
@media(min-width:1024px){
  .nav{padding:0 32px;}
}
