/* :root{
  --bg:#fcf7f7; --card:#fff; --muted:#97a0b5; --accent:#00337f;
  --dropdown-max-h: 320px;
} */
*{box-sizing:border-box;  --dropdown-max-h: 320px;
    --bg:#fcf7f7; --card:#fff; --muted:#97a0b5; --accent:#00337f;

}
body{font-family:Inter, system-ui, Arial; margin:24px; color:#102132}
h2{margin:0 0 12px;font-size:20px}
.primary{margin-top:16px;padding:10px 18px;font-size:16px;cursor:pointer;background:var(--accent);color:#000000;border:none;border-radius:8px}

/* Search */
.search-wrap{max-width:820px;margin:0 auto}

#searchInput {
  width: 100%;
  padding: 16px 16px;
  font-size: 16px;
  border-radius: 30px;
  border: 1px solid #d6dbe6;
  background: linear-gradient(180deg,#fff,#fbfdff);
  outline: none;
  transition: box-shadow .15s, border-color .15s;
  resize: none;
  overflow-wrap: break-word;
  white-space: pre-wrap;
  word-wrap: break-word;
  line-height: 1.4em;
  min-height: 56px;
  max-height: 112px; /* 2 lines max */
  overflow-y: auto;
}

/* Mobile: reduce font size & allow 2 lines */
@media (max-width: 600px) {
  #searchInput {
    font-size: 14px;
    padding: 12px 12px;
    min-height: 50px;
    max-height: 100px;
  }
}

@media (max-width: 480px) {
  #searchInput {
    font-size: 12px;
    padding: 10px 10px;
    min-height: 48px;
    max-height: 96px;
  }
}


.hint{display: none; font-size:13px;color:var(--muted);margin-top:6px}

/* Dropdown / cards */
.panel{margin-top:12px; display:none; background:transparent;}
.cards{display:grid;background-color: #585858; grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); gap:10px; 
       max-height: var(--dropdown-max-h); overflow-y:auto; padding:8px; border-radius:8px;}
.card{
  background:var(--card); border-radius:10px; padding:10px; display:flex; align-items:center; gap:10px; cursor:pointer;
  border:1px solid rgba(16,33,50,0.04); transition:transform .12s, box-shadow .12s, border-color .12s;
  position:relative; min-height:56px;
  justify-content: center;
}
.card:hover{transform:translateY(-4px); box-shadow:0 10px 20px rgba(16,33,50,0.06)}
.card.highlight{border-color:#cfe0ff; box-shadow:0 8px 18px rgba(3,51,127,0.06)}
.icon{
  width:46px;height:46px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:700;color:#000000;font-size:18px;
  box-shadow:0 2px 8px rgba(16,33,50,0.06)
}
.meta{flex:1}
.skill-name{font-weight:600; font-size:15px; color:#000000}
.small{font-size:12px; color:var(--muted); margin-top:3px}
/* percent badge */
.percent-badge{
  display: none;
  position:absolute;  top:8px; right:8px; background:rgba(7, 235, 18, 0.06); padding:4px 8px; border-radius:999px; font-weight:600; font-size:12px;
  display:none;align-items:center;gap:6px; color:#0f2b44;
}
.percent-badge .pencil{
 display: none; font-size:12px; cursor:pointer; opacity:.9}
.percent-edit{display: none; width:56px;padding:4px 6px;border-radius:6px;border:1px solid #d6dbe6;font-weight:600}

/* Selected list styling (unified panel) */
#selectedWrap{max-width:820px;margin:18px auto}
.selected-list{display:flex;flex-wrap:wrap;gap:10px}
.skill-tag{
  background:#00337f;color:rgb(0, 0, 0);padding:6px 10px;border-radius:14px;display:flex;align-items:center;gap:8px;
  min-width:160px;
}
.skill-tag .icon{width:36px;height:36;border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:700}
.skill-tag input{width:48px;padding:4px;border-radius:6px;border:none;font-size:13px}
.remove-btn{cursor:pointer;font-weight:700}

/* colors for icons (extend as needed) */
.ic-html{background:#e44d26} .ic-css{background:#0b6ebf} .ic-js{background:#f1c40f;color:#111}
.ic-py{background:#3572A5} .ic-node{background:#3c873a} .ic-react{background:#61dafb;color:#021124}
.ic-sql{background:#6f42c1} .ic-java{background:#d14b3f} .ic-cpp{background:#00599c}
.ic-hack{background:#444} .ic-office{background:#ff8b2b}

/* STEP-2 styles (fields explorer) */
#fieldsSystem { max-width:1100px;justify-content: center; }
#fieldsMain { background:transparent; padding:6px; }
.field-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:-10px;justify-content: center;}
.field-card{
  flex:0 0 220px;
  min-width:160px;
  background:#ffffff;color:black;border-radius:10px;border:1px solid #e6e9f2;cursor:pointer;
  display:flex;align-items:center;text-align: start; gap:10px;box-shadow:0 6px 18px rgba(3,51,127,0.02);
}
.field-card.active{border-color:#cfe0ff; box-shadow:0 10px 24px rgba(3,51,127,0.06)}
.field-card .icon{width:46px;height:46px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#000000;font-weight:700}
.field-title{font-weight:700;font-size:15px}

/* subcategory & skill areas */
.subcat-area{margin:12px 0 20px;padding:10px 6px;background:transparent}
.subcat-grid{display:flex;flex-wrap:wrap;gap:10px}
.subcat-card{background:#585858;padding:10px;border-radius:8px;cursor:pointer;border:1px solid #e8eefc;min-width:140px}
.skills-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin-top:12px}
.skill-card{background:#585858;border-radius:10px;padding:10px;border:1px solid #eef3ff;position:relative;cursor:pointer;min-height:70px;display:flex;align-items:center;gap:8px}
.skill-card .icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#000000;font-weight:700}
.skill-name{font-weight:600;}
.pct-badge{position:absolute;top:8px;right:8px;background:rgba(0,0,0,0.06);padding:4px 8px;border-radius:12px;display:flex;align-items:center;gap:6px;font-weight:700}
.pct-badge .pencil{cursor:pointer}

/* back */
.back-btn{display:none;margin:12px 0;padding:8px 12px;border-radius:8px;border:none;background:#00337f;color:#000000;cursor:pointer}

/* small helpers */
.hidden{display:none!important}
@media (max-width:900px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .field-row{justify-content:center}
}

.icon-fallback-text {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;       /* match the parent .icon size */
  height: 100%;      /* match the parent .icon size */
  color: #000000;       /* fallback text color */

  border-radius: 4px; /* optional rounded corners */
  text-align: center;
  line-height: 1;
  user-select: none;
}




/* Wrap input in relative container if not already */
.search-wrap { position: relative; }

/* Ghost cursor overlay */
#searchInput.blink + .auto-ghost::after {
  content: '|';
  animation: blink 1s step-start infinite;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #000;
}

@keyframes blink {
  50% { opacity: 0; }
}


/* ===== Mobile: Skills list one column ===== */
@media (max-width: 600px) {
  #cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
  }

  .card {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
  }
}
/* @media (max-width: 480px){
  #searchInput { padding:12px 10px; font-size:1px; }
} */