:root{
  --bg:#0B0F14;
  --panel:#121821;
  --panel-2:#171F2B;
  --line:#232C39;
  --text:#E7ECF2;
  --sub:#8B98A9;
  --accent:#3DDC97;
  --accent-dim:#1F4A3A;
  --warn:#F2B84B;
  --danger:#E85D5D;
  --mono: 'JetBrains Mono','SFMono-Regular',Menlo,Consolas,monospace;
  --sans: 'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:var(--sans);}
body{-webkit-font-smoothing:antialiased;
font-family:var(--sans);}
@keyframes fadeInUp{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
@keyframes progressGrow{from{width:0;}}
.page:not(.hidden){animation:fadeInUp .35s ease both;}
.panel,.stat,.card{transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;}
.panel:hover{border-color:var(--accent-dim);}
.stat{transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;}
.stat:hover{transform:translateY(-2px);border-color:var(--accent-dim);box-shadow:0 8px 24px rgba(61,220,151,.08);}
.card:hover{transform:translateY(-2px);border-color:var(--accent-dim);box-shadow:0 8px 24px rgba(0,0,0,.25);}
.progress-fill{animation:progressGrow .8s ease;}
.navitem{transition:background .15s ease,color .15s ease,padding-left .15s ease;}
.tabbtn,button{transition:background .15s ease,border-color .15s ease,transform .12s ease,box-shadow .15s ease;}
button:active,.tabbtn:active{transform:scale(.97);}
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-thumb{background:#2A3441;border-radius:4px;}

.app{display:flex;min-height:100vh;}

/* Sidebar */
.sidebar{
  width:236px;flex-shrink:0;background:var(--panel);border-right:1px solid var(--line);
  padding:20px 12px;position:sticky;top:0;height:100vh;overflow-y:auto;
}
.brand{padding:6px 10px 18px 10px;border-bottom:1px solid var(--line);margin-bottom:14px;}
.brand .tag{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--accent);text-transform:uppercase;}
.brand h1{font-size:16px;margin:6px 0 0 0;font-weight:700;line-height:1.3;}
.brand .sub{font-size:11px;color:var(--sub);margin-top:4px;}

.navgroup{margin-bottom:14px;}
.navgroup .label{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--sub);padding:8px 10px 4px;text-transform:uppercase;}
.navitem{
  display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;cursor:pointer;
  font-size:13.5px;color:var(--sub);margin-bottom:2px;transition:background .15s,color .15s;
}
.navitem:hover{background:var(--panel-2);color:var(--text);}
.navitem.active{background:var(--accent-dim);color:var(--accent);font-weight:600;}
.navitem .ico{width:16px;text-align:center;font-size:13px;}

/* Main */
.main{flex:1;min-width:0;padding:28px 34px 60px;max-width:1180px;}
.pagehead{margin-bottom:24px;}
.pagehead .eyebrow{font-family:var(--mono);font-size:11px;color:var(--accent);letter-spacing:.08em;text-transform:uppercase;}
.pagehead h2{font-size:26px;margin:6px 0 6px;font-weight:750;letter-spacing:-.01em;}
.pagehead p{color:var(--sub);font-size:13.5px;max-width:720px;margin:0;}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px 20px;margin-bottom:16px;}
.panel h3{font-size:14px;margin:0 0 12px;font-weight:650;}
.grid{display:grid;gap:14px;}
.grid.cols-4{grid-template-columns:repeat(4,1fr);}
.grid.cols-3{grid-template-columns:repeat(3,1fr);}
.grid.cols-2{grid-template-columns:repeat(2,1fr);}
.bento-stats.grid.cols-3{grid-template-columns:1.6fr 1fr 1fr;}
.stat-hero{background:linear-gradient(135deg,var(--panel-2),#14261F);border-color:var(--accent-dim);}
.stat-hero .num{font-size:32px;}
@media(max-width:900px){.grid.cols-4,.grid.cols-3,.grid.cols-2{grid-template-columns:1fr 1fr;}}

.stat{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:14px 16px;}
.stat .num{font-family:var(--mono);font-size:24px;font-weight:700;color:var(--accent);}
.stat .lbl{font-size:11.5px;color:var(--sub);margin-top:2px;}

.progress-track{background:#0E1420;border:1px solid var(--line);border-radius:6px;height:8px;overflow:hidden;margin-top:8px;}
.progress-fill{background:var(--accent);height:100%;border-radius:6px;transition:width .3s;}

table{width:100%;border-collapse:collapse;font-size:12.5px;}
th{text-align:left;font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--sub);padding:8px 10px;border-bottom:1px solid var(--line);}
td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top;}
tr:hover td{background:var(--panel-2);}
select,input[type=text],input[type=number],input[type=date],textarea{
  background:var(--panel-2);border:1px solid var(--line);color:var(--text);border-radius:6px;padding:5px 8px;font-size:12px;font-family:var(--sans);width:100%;
}
textarea{resize:vertical;}

.pill{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:600;font-family:var(--mono);}
.pill.easy,.pill.done,.pill.selected,.pill.free{background:#153A2E;color:var(--accent);}
.pill.medium,.pill.applied,.pill.interview{background:#3A2E15;color:var(--warn);}
.pill.hard,.pill.rejected{background:#3A1919;color:var(--danger);}
.pill.wishlist,.pill.paid{background:#232C39;color:var(--sub);}

.tabs{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap;}
.tabbtn{background:var(--panel);border:1px solid var(--line);color:var(--sub);padding:7px 13px;border-radius:8px;font-size:12.5px;cursor:pointer;font-weight:600;}
.tabbtn.active{background:var(--accent-dim);color:var(--accent);border-color:var(--accent-dim);}

.card{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin-bottom:10px;}
.card .title{font-weight:650;font-size:13.5px;margin-bottom:4px;}
.card .meta{font-size:11px;color:var(--sub);margin-bottom:8px;font-family:var(--mono);}
.card .body{font-size:12.5px;color:var(--text);line-height:1.55;}
.card .body b{color:var(--accent);}
.copybox{background:#0E1420;border:1px dashed var(--line);border-radius:8px;padding:10px 12px;font-family:var(--mono);font-size:11.5px;color:#C9D3DE;white-space:pre-wrap;margin-top:6px;position:relative;}
.copybtn{position:absolute;top:8px;right:8px;background:var(--accent-dim);color:var(--accent);border:none;border-radius:5px;padding:3px 8px;font-size:10px;font-family:var(--mono);cursor:pointer;}
.copybtn:hover{opacity:.85;}

.checklist{list-style:none;padding:0;margin:0;}
.checklist li{display:flex;gap:8px;align-items:flex-start;padding:6px 0;font-size:12.5px;border-bottom:1px solid var(--line);}
.checklist li:last-child{border-bottom:none;}
.checklist input{margin-top:2px;}

.node{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:12px 14px;}
.node .yr{font-family:var(--mono);color:var(--accent);font-size:11px;text-transform:uppercase;letter-spacing:.05em;}
.node h4{margin:4px 0 8px;font-size:14px;}
.node ul{margin:0;padding-left:16px;font-size:12px;color:var(--sub);line-height:1.6;}

.hero{
  position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  background:linear-gradient(135deg,var(--panel) 0%,var(--panel-2) 60%,#0F2A22 100%);
  border:1px solid var(--line);border-radius:16px;padding:26px 28px;margin-bottom:20px;
}
.hero::before{
  content:"";position:absolute;top:-60px;right:-60px;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,rgba(61,220,151,.18),transparent 70%);
}
.hero h2{margin:0 0 8px;font-size:24px;}
.hero p{margin:0;color:var(--sub);max-width:560px;font-size:13px;line-height:1.6;}
.hero-actions{display:flex;gap:10px;flex-shrink:0;position:relative;z-index:1;}
.btn{background:linear-gradient(135deg,var(--accent),#2bbf82);color:#04150F;border:none;border-radius:7px;padding:8px 14px;font-weight:700;font-size:12.5px;cursor:pointer;box-shadow:0 4px 14px rgba(61,220,151,.18);}
.btn:hover{box-shadow:0 6px 20px rgba(61,220,151,.3);transform:translateY(-1px);}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--text);box-shadow:none;}
.btn.ghost:hover{border-color:var(--accent-dim);color:var(--accent);}

.badgebar{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
.badge{font-family:var(--mono);font-size:10.5px;background:var(--panel);border:1px solid var(--line);color:var(--sub);padding:3px 8px;border-radius:5px;}

.note{font-size:11.5px;color:var(--sub);border-left:2px solid var(--accent-dim);padding-left:10px;margin-top:10px;}

.hidden{display:none;}
.section-title{font-family:var(--mono);font-size:11px;color:var(--sub);text-transform:uppercase;letter-spacing:.08em;margin:20px 0 8px;}

.prompt-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

/* =========================================
   90-DAY ROADMAP
   ========================================= */

.ninety-week-plan {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 18px;
}

.ninety-week-plan .panel {
  margin: 0;
  padding: 20px;
}

.ninety-week-plan .eyebrow {
  margin-bottom: 8px;
}

.roadmap-list {
  margin: 0;
  padding-left: 20px;
}

.roadmap-list li {
  margin-bottom: 8px;
  line-height: 1.5;
}

.prompt-action-btn {
  border: 0;
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 12px;
  font-family: var(--mono);
  background: var(--panel-2);
  color: var(--text);
}

.prompt-action-btn:hover {
  opacity: .9;
}

.prompt-action-btn.favorite-active {
  color: var(--accent);
}

/* =========================================
   RESOURCE LIBRARY
   ========================================= */

.resource-controls {

  display: grid;

  grid-template-columns:
    minmax(260px, 2fr)
    minmax(180px, 1fr)
    minmax(180px, 1fr);

  gap: 12px;

  margin-bottom: 16px;

}


.resource-controls label {

  display: block;

  margin-bottom: 6px;

  font-size: 11px;

  font-weight: 600;

  color: var(--sub);

}


.resource-controls input,
.resource-controls select {

  width: 100%;

}


/* ---------- RESULT COUNT ---------- */

.resource-result-count {

  margin: 14px 0;

  padding-left: 2px;

  font-size: 12px;

  color: var(--sub);

}


.resource-result-count strong {

  color: var(--accent);

}


/* ---------- RESOURCE GRID ---------- */

.resource-grid {

  display: grid;
  gap:20px;
  margin:4px;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));


}


/* ---------- RESOURCE CARD ---------- */

.resource-card {

  display: flex;

  flex-direction: column;

  min-height: 245px;

  padding: 18px;

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

  border-radius: 12px;

  background: var(--panel);

  transition:
    transform .15s ease,
    border-color .15s ease,
    box-shadow .15s ease;

}


.resource-card:hover {

  transform: translateY(-2px);

  border-color: var(--accent);

  box-shadow:
    0 8px 24px rgba(0, 0, 0, .16);

}


/* ---------- TITLE ---------- */

.resource-title {

  margin: 0;

  font-size: 16px;

  line-height: 1.35;

  color: var(--text);

}


/* ---------- META ---------- */

.resource-meta {

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 5px;

  margin-top: 7px;

  font-family: var(--mono);

  font-size: 10px;

  color: var(--sub);

  text-transform: none;

}


.resource-dot {

  opacity: .45;

}


.resource-meta .free {

  color: var(--accent);

}


.resource-meta .paid {

  color: var(--danger);

}


/* ---------- TOPIC ---------- */

.resource-topic {

  margin-top: 18px;

  font-size: 12px;

  line-height: 1.5;

  color: var(--text);

}


.resource-topic strong {

  color: var(--accent);

}


/* ---------- DESCRIPTION ---------- */

.resource-description {

  margin: 12px 0 0;

  font-size: 12px;

  line-height: 1.65;

  color: var(--sub);

}


/* ---------- FOOTER ---------- */

.resource-card-footer {

  display: flex;

  align-items: center;

  margin-top: auto;

  padding-top: 18px;

}


/* ---------- OPEN BUTTON ---------- */

.resource-open-btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height: 38px;

  padding: 0 16px;

  border-radius: 7px;

  background: var(--accent);

  color: #06110d;

  font-size: 12px;

  font-weight: 700;

  text-decoration: none;

  transition: opacity .15s ease;

}


.resource-open-btn:hover {

  opacity: .88;

}


/* ---------- EMPTY STATE ---------- */

.resource-empty {

  padding: 40px 20px;

  text-align: center;

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

  border-radius: 12px;

  background: var(--panel);

}


.resource-empty-title {

  font-size: 15px;

  font-weight: 700;

  color: var(--text);

}


.resource-empty-text {

  margin-top: 7px;

  font-size: 12px;

  color: var(--sub);

}


/* =========================================
   RESOURCE RESPONSIVE
   ========================================= */
/* =========================================
   90-DAY PLAN
   ========================================= */

.ninety-week-plan {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

.ninety-week-plan .panel {
  margin: 0;
}

.roadmap-list li {
  line-height: 1.5;
}

.roadmap-list input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
}

@media (max-width: 900px) {

  .resource-controls {

    grid-template-columns: 1fr 1fr;

  }

  .resource-search {

    grid-column: 1 / -1;

  }

  .resource-grid {

    grid-template-columns: 1fr;

  }

}


@media (max-width: 600px) {

  .resource-controls {

    grid-template-columns: 1fr;

  }

  .resource-search {

    grid-column: auto;

  }

  .resource-card {

    padding: 15px;

  }

}

.days-danger {
    color: #dc2626;
}

.days-warning {
    color: #f59e0b;
}

.days-safe {
    color: #16a34a;
}

/* =========================================
   AI PROMPT LIBRARY
   ========================================= */

.prompt-card {
  position: relative;
}

.prompt-category {
  margin-bottom: 12px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.prompt-text {
  line-height: 1.65;
  white-space: pre-wrap;
}

.prompt-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.prompt-action-btn {
  min-width: 100px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 11px;
  font-family: var(--mono);
  font-weight: 600;
  background: var(--panel-2);
  color: var(--text);
  transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease,
    transform .12s ease;
}

.prompt-action-btn:hover {
  border-color: var(--accent-dim);
  transform: translateY(-1px);
}

.prompt-action-btn:active {
  transform: translateY(0);
}

.prompt-action-btn.favorite-active {
  color: var(--accent);
  border-color: var(--accent-dim);
}

.prompt-action-btn.copy-success {
  color: var(--accent);
  border-color: var(--accent-dim);
}

.prompt-count {
  margin-bottom: 12px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--sub);
}

.prompt-library-footer {
  margin-top: 18px;
}



/* =========================================
   PROMPT LIBRARY — BUTTON INTERACTIONS
   ========================================= */

.prompt-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    flex-wrap: wrap;
}

/* Medium-sized prompt buttons */

.prompt-action-btn {
    min-width: 108px;
    height: 36px;
    padding: 0 14px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    border: 1px solid var(--line);
    border-radius: 7px;

    background: var(--panel-2);
    color: var(--text);

    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;

    cursor: pointer;

    transition:
        background-color 180ms ease,
        color 180ms ease,
        border-color 180ms ease,
        transform 180ms ease,
        box-shadow 180ms ease;
}

/* Hover animation */

@media (hover: hover) {

    .prompt-action-btn:hover {
        transform: translateY(-2px);
        border-color: var(--accent-dim);
        background: var(--panel);
        color: var(--accent);

        box-shadow:
            0 4px 10px rgba(0, 0, 0, 0.12);
    }

}

/* Click animation */

.prompt-action-btn:active {
    transform: translateY(0) scale(0.97);
}

/* Keyboard focus */

.prompt-action-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* COPY — successful state */

.prompt-action-btn.copy-success {
    background: rgba(34, 197, 94, 0.14);
    border-color: rgba(34, 197, 94, 0.55);
    color: #22c55e;
}

/* FAVORITE — active state */

.prompt-action-btn.favorite-active {
    background: rgba(245, 158, 11, 0.14);
    border-color: rgba(245, 158, 11, 0.55);
    color: #f59e0b;
}

/* Favorite hover */

@media (hover: hover) {

    .prompt-action-btn.favorite-active:hover {
        background: rgba(245, 158, 11, 0.20);
        border-color: rgba(245, 158, 11, 0.70);
        color: #fbbf24;
    }

}

/* Prompt card hover */

@media (hover: hover) {

    .prompt-card {
        transition:
            transform 180ms ease,
            border-color 180ms ease,
            box-shadow 180ms ease;
    }

    .prompt-card:hover {
        transform: translateY(-2px);
        border-color: var(--accent-dim);

        box-shadow:
            0 6px 16px rgba(0, 0, 0, 0.10);
    }

}


/* =========================================
   LIVE GITHUB ACCOUNT
   ========================================= */

.github-live-panel {
    overflow: hidden;
}

.github-live-panel .stat {
    min-width: 0;
}

#githubRepositories .card {
    height: 100%;
}

#githubRepositories a {
    text-decoration: none;
}

@media (max-width: 800px) {

    #githubLiveProfile > div:first-child {
        align-items: flex-start;
    }

    #githubProfileLink {
        width: 100%;
    }

}


.github-audit-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    margin-bottom: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel-2);
}

.github-audit-item:last-child {
    margin-bottom: 0;
}

.github-audit-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
}

.github-audit-item.good .github-audit-icon {
    background: rgba(34, 197, 94, 0.14);
    color: #22c55e;
}

.github-audit-item.warning .github-audit-icon {
    background: rgba(245, 158, 11, 0.14);
    color: #f59e0b;
}

.github-audit-content {
    flex: 1;
    min-width: 0;
}

.github-audit-content strong {
    display: block;
    margin-bottom: 4px;
}

.github-audit-content p {
    margin: 0;
    line-height: 1.5;
}

.github-repository-analysis {
    margin-bottom: 14px;
}

.github-repository-analysis:last-child {
    margin-bottom: 0;
}

.github-repository-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
}

.github-repository-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 12px;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
}

.github-analysis-section {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

.github-analysis-section strong {
    display: block;
    margin-bottom: 7px;
}

.github-analysis-section ul {
    margin: 0;
    padding-left: 18px;
}

.github-analysis-section li {
    margin-bottom: 4px;
    color: var(--muted);
}

.github-repository-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.github-repository-actions a {
    text-decoration: none;
}

@media (max-width: 650px) {
    .github-repository-header {
        flex-direction: column;
    }

    .github-repository-meta {
        gap: 8px;
    }
}

.github-analyzer-summary {
    margin-bottom: 14px;
}

.github-overview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 14px;
}

.github-overview-grid > div {
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel-2);
}

.github-overview-grid strong {
    display: block;
    font-size: 22px;
}

.github-overview-grid span {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-family: var(--mono);
    font-size: 11px;
}

.github-improvement-list {
    display: grid;
    gap: 8px;
    margin-top: 10px;
}

.github-improvement-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--panel-2);
}

.github-priority {
    display: inline-block;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.github-growth-box {
    margin-top: 16px;
    padding: 14px;
    border: 1px solid var(--accent-dim);
    border-radius: 8px;
    background: var(--panel-2);
}

.github-growth-box p {
    margin-bottom: 0;
}

@media (max-width: 650px) {

    .github-overview-grid {
        grid-template-columns: 1fr;
    }

    .github-improvement-item {
        flex-direction: column;
        gap: 8px;
    }
}


.linkedin-banner-preview {
    min-height: 130px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 20px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background:
        linear-gradient(
            135deg,
            var(--panel-2),
            var(--panel)
        );
}

.linkedin-banner-preview > div {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.linkedin-banner-preview strong {
    font-size: 18px;
    letter-spacing: .04em;
}

.linkedin-banner-preview span {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
}

.banner-developer {
    background:
        linear-gradient(
            135deg,
            var(--panel-2),
            var(--panel)
        );
}

.banner-fullstack {
    background:
        linear-gradient(
            135deg,
            var(--panel),
            var(--panel-2)
        );
}

.banner-ai {
    background:
        linear-gradient(
            135deg,
            var(--panel-2),
            var(--panel)
        );
}

.banner-dsa {
    background:
        linear-gradient(
            135deg,
            var(--panel),
            var(--panel-2)
        );
}

.banner-student {
    background:
        linear-gradient(
            135deg,
            var(--panel-2),
            var(--panel)
        );
}

.banner-builder {
    background:
        linear-gradient(
            135deg,
            var(--panel),
            var(--panel-2)
        );
}


.linkedin-banner-preview {
    min-height: 130px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 20px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background:
        linear-gradient(
            135deg,
            var(--panel-2),
            var(--panel)
        );
}

.linkedin-banner-preview > div {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.linkedin-banner-preview strong {
    font-size: 18px;
    letter-spacing: .04em;
}

.linkedin-banner-preview span {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
}

.linkedin-search-panel {
    position: relative;
}

.linkedin-search-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.linkedin-search-controls input {
    flex: 1;
    min-width: 220px;
}

.linkedin-search-controls select {
    min-width: 210px;
}

#linkedinSearchResults {
    min-height: 16px;
}

.linkedin-content-section {
    scroll-margin-top: 20px;
}

@media (max-width: 700px) {

    .linkedin-search-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .linkedin-search-controls input,
    .linkedin-search-controls select,
    .linkedin-search-controls button {
        width: 100%;
    }

}
.linkedin-quick-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.linkedin-quick-links button {
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--panel-2);
    color: var(--text);
    font-family: var(--mono);
    font-size: 11px;
    cursor: pointer;
    transition:
        background-color 180ms ease,
        color 180ms ease,
        border-color 180ms ease,
        transform 180ms ease;
}

@media (hover: hover) {
    .linkedin-quick-links button:hover {
        background: var(--panel);
        color: var(--accent);
        border-color: var(--accent-dim);
        transform: translateY(-1px);
    }
}

.linkedin-quick-links button:active {
    transform: scale(.97);
}

.linkedin-quick-links button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.linkedin-section-focus {
    border-color: var(--accent-dim) !important;
    box-shadow: 0 0 0 2px var(--accent-dim);
    transition:
        border-color 180ms ease,
        box-shadow 180ms ease;
}

.portal-access-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.portal-access-card .btn {
    align-self: flex-start;
    margin-top: 6px;
}

@media (hover: hover) {
    .portal-access-card {
        transition:
            transform 180ms ease,
            border-color 180ms ease,
            box-shadow 180ms ease;
    }

    .portal-access-card:hover {
        transform: translateY(-2px);
        border-color: var(--accent-dim);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.10);
    }
}

/* ================= LINKEDIN CONNECTION ================= */

.linkedin-connect-panel {
    margin-bottom: 16px;
}

.linkedin-connect-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 16px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel-2);
}

.linkedin-connect-box > div {
    min-width: 0;
}

.linkedin-connect-box .btn {
    flex-shrink: 0;
}

@media (hover: hover) {
    .linkedin-connect-box {
        transition:
            border-color 180ms ease,
            box-shadow 180ms ease;
    }

    .linkedin-connect-box:hover {
        border-color: var(--accent-dim);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }
}

@media (max-width: 700px) {
    .linkedin-connect-box {
        flex-direction: column;
        align-items: stretch;
    }

    .linkedin-connect-box .btn {
        width: 100%;
    }
}


/* =========================================
   CAREER OS - AUTHENTICATION UI
   ========================================= */

.auth-topbar-btn {
    height: 34px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--panel-2);
    color: var(--text);
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition:
        background-color 180ms ease,
        border-color 180ms ease,
        color 180ms ease,
        transform 180ms ease;
}

@media (hover: hover) {
    .auth-topbar-btn:hover {
        background: var(--panel);
        border-color: var(--accent-dim);
        color: var(--accent);
        transform: translateY(-1px);
    }
}

.auth-topbar-btn:active {
    transform: scale(.97);
}

.auth-avatar {
    cursor: pointer;
}


/* ---------- OVERLAY ---------- */

.auth-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(5px);
}

.auth-overlay.hidden {
    display: none;
}


/* ---------- MODAL ---------- */

.auth-modal {
    position: relative;
    width: min(460px, 100%);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--panel);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
}

.auth-close {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 24px;
    cursor: pointer;
}

.auth-close:hover {
    color: var(--text);
}


/* ---------- PROVIDERS ---------- */

.auth-provider-grid {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 20px;
}

.auth-provider-btn {
    width: 100%;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--panel-2);
    color: var(--text);
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition:
        background-color 180ms ease,
        border-color 180ms ease,
        color 180ms ease,
        transform 180ms ease;
}

@media (hover: hover) {
    .auth-provider-btn:hover {
        background: var(--panel);
        border-color: var(--accent-dim);
        color: var(--accent);
        transform: translateY(-1px);
    }
}

.auth-provider-btn:active {
    transform: scale(.98);
}

.auth-provider-icon {
    min-width: 24px;
    text-align: center;
    font-weight: 700;
}


/* ---------- DIVIDER ---------- */

.auth-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 20px 0;
    color: var(--muted);
    font-family: var(--mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background: var(--line);
}


/* ---------- FORM ---------- */

.auth-modal label {
    display: block;
    margin-bottom: 6px;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
}

.auth-modal input {
    width: 100%;
    box-sizing: border-box;
}

.auth-submit-btn {
    width: 100%;
    margin-top: 16px;
}


/* ---------- SWITCH ---------- */

.auth-switch {
    margin-top: 18px;
    text-align: center;
    color: var(--muted);
    font-size: 12px;
}

.auth-switch button {
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--accent);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}


/* ---------- PROVIDER MESSAGE ---------- */

.auth-provider-message {
    margin-top: 16px;
    padding: 12px;
    border: 1px solid var(--accent-dim);
    border-radius: 7px;
    background: var(--panel-2);
    color: var(--text);
    font-size: 12px;
    line-height: 1.5;
}

.auth-provider-message.hidden {
    display: none;
}


@media (max-width: 600px) {

    .auth-topbar-btn {
        padding: 0 10px;
    }

    .auth-modal {
        padding: 22px;
    }

}

/* =========================================
   CAREER OS
   AUTHENTICATION GATE
   ========================================= */

body.career-os-locked {
    overflow: hidden;
}


/* ---------- GATE ---------- */

.auth-gate {
    position: fixed;
    inset: 0;
    z-index: 10000;

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

    padding: 24px;

    background:
        rgba(0, 0, 0, .72);

    backdrop-filter:
        blur(8px);

    overflow-y: auto;
}


.auth-gate.hidden {
    display: none;
}


/* ---------- CARD ---------- */

.auth-gate-card {
    position: relative;

    width: min(470px, 100%);

    max-height:
        calc(100vh - 48px);

    overflow-y: auto;

    padding: 30px;

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

    border-radius: 10px;

    background:
        var(--panel);

    box-shadow:
        0 24px 70px rgba(0, 0, 0, .35);
}


/* ---------- BRAND ---------- */

.auth-brand {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 28px;

    padding-bottom: 18px;

    border-bottom:
        1px solid var(--line);
}


.auth-brandmark {
    width: 42px;
    height: 42px;

    display: flex;

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

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

    border-radius: 8px;

    background:
        var(--panel-2);

    color:
        var(--accent);

    font-family:
        var(--mono);

    font-size: 20px;

    font-weight: 700;
}


.auth-brand-name {
    font-size: 15px;
    font-weight: 700;
}


.auth-brand-sub {
    margin-top: 3px;

    color:
        var(--muted);

    font-family:
        var(--mono);

    font-size: 10px;
}


/* ---------- PROVIDERS ---------- */

.auth-provider-grid {
    display: flex;

    flex-direction: column;

    gap: 9px;

    margin-top: 20px;
}


.auth-provider-btn {
    width: 100%;

    min-height: 44px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

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

    border-radius: 7px;

    background:
        var(--panel-2);

    color:
        var(--text);

    font-family:
        var(--mono);

    font-size: 11px;

    font-weight: 600;

    cursor: pointer;

    transition:
        background-color 180ms ease,
        border-color 180ms ease,
        color 180ms ease,
        transform 180ms ease;
}


@media (hover: hover) {

    .auth-provider-btn:hover {

        background:
            var(--panel);

        border-color:
            var(--accent-dim);

        color:
            var(--accent);

        transform:
            translateY(-1px);
    }
}


.auth-provider-btn:active {

    transform:
        scale(.98);
}


.auth-provider-icon {

    min-width: 25px;

    text-align: center;

    font-weight: 700;
}


/* ---------- DIVIDER ---------- */

.auth-divider {

    display: flex;

    align-items: center;

    gap: 10px;

    margin: 20px 0;

    color:
        var(--muted);

    font-family:
        var(--mono);

    font-size: 9px;

    text-transform:
        uppercase;

    letter-spacing:
        .06em;
}


.auth-divider::before,
.auth-divider::after {

    content: "";

    height: 1px;

    flex: 1;

    background:
        var(--line);
}


/* ---------- FORM ---------- */

.auth-form-label {

    display: block;

    margin-top: 12px;

    margin-bottom: 6px;

    font-family:
        var(--mono);

    font-size: 11px;

    font-weight: 600;
}


.auth-gate-card input {

    width: 100%;

    box-sizing: border-box;
}


.auth-submit-btn {

    width: 100%;

    margin-top: 16px;
}


/* ---------- SECONDARY BUTTON ---------- */

.auth-secondary-btn {

    width: 100%;

    margin-top: 10px;

    padding: 10px;

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

    border-radius: 7px;

    background:
        transparent;

    color:
        var(--muted);

    font-family:
        var(--mono);

    font-size: 10px;

    cursor: pointer;

    transition:
        color 180ms ease,
        border-color 180ms ease;
}


.auth-secondary-btn:hover {

    color:
        var(--accent);

    border-color:
        var(--accent-dim);
}


/* ---------- SWITCH ---------- */

.auth-switch {

    margin-top: 18px;

    text-align: center;

    color:
        var(--muted);

    font-size: 12px;
}


.auth-switch button {

    border: 0;

    padding: 0;

    background:
        transparent;

    color:
        var(--accent);

    font: inherit;

    font-weight: 600;

    cursor: pointer;
}


/* ---------- PROVIDER MESSAGE ---------- */

.auth-provider-message {

    margin-top: 16px;

    padding: 12px;

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

    border-radius: 7px;

    background:
        var(--panel-2);

    color:
        var(--text);

    font-size: 11px;

    line-height: 1.5;
}


.auth-provider-message.hidden {

    display: none;
}


/* ---------- SECURITY NOTE ---------- */

.auth-security-note {

    display: flex;

    gap: 8px;

    align-items: flex-start;

    margin-top: 22px;

    padding-top: 16px;

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

    color:
        var(--muted);

    font-family:
        var(--mono);

    font-size: 9px;

    line-height: 1.5;
}


/* ---------- MOBILE ---------- */

@media (max-width: 600px) {

    .auth-gate {

        padding: 12px;

    }

    .auth-gate-card {

        padding: 22px;

        max-height:
            calc(100vh - 24px);
    }

}


.image_logo{
    size: 30px;
    padding: 5px;
    margin: 0;
}

/* =========================================================
   CAREER OS — RESPONSIVE SIDEBAR LAYOUT
   ========================================================= */

.app {
    display: flex;
    width: 100%;
    min-height: 100vh;
}

.sidebar {
    flex: 0 0 280px;
    width: 280px;
    min-width: 280px;
}

.main {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: none;
}

/* =========================================================
   CAREER OS — HABIT TRACKER V2.1
   ========================================================= */

.habit-v2-wrapper {
  display: flex;
  flex-direction: column;
  gap: 18px;
}


/* ---------- HERO ---------- */

.habit-v2-hero {
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background:
    linear-gradient(
      135deg,
      rgba(127, 127, 127, 0.08),
      rgba(127, 127, 127, 0.025)
    );
}


.habit-v2-hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}


.habit-v2-eyebrow,
.habit-section-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}


.habit-v2-hero h2 {
  margin: 7px 0 8px;
  font-size: 28px;
  line-height: 1.15;
}


.habit-v2-hero p {
  margin: 0;
  max-width: 650px;
  color: var(--sub);
  font-size: 13px;
  line-height: 1.7;
}


.habit-add-btn {
  white-space: nowrap;
}


/* ---------- STATS ---------- */

.habit-v2-stats {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 10px;
  margin-top: 22px;
}


.habit-stat {
  display: flex;
  align-items: center;
  gap: 11px;

  padding: 14px;

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

  background:
    rgba(127, 127, 127, 0.035);
}


.habit-stat-icon {
  font-size: 21px;
}


.habit-stat strong {
  display: block;
  font-size: 20px;
  line-height: 1;
}


.habit-stat span {
  display: block;
  margin-top: 5px;

  color: var(--sub);
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}


/* ---------- SECTION ---------- */

.habit-v2-section {
  padding: 20px;

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

  background:
    rgba(127, 127, 127, 0.025);
}


.habit-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 15px;

  margin-bottom: 16px;
}


.habit-section-header h3 {
  margin: 5px 0 0;
}


.habit-today-xp {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--accent);
}


/* ---------- SCORE ---------- */

.habit-score-card {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  padding: 18px;
  margin-bottom: 16px;

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

  background:
    rgba(127, 127, 127, 0.035);
}


.habit-score-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--sub);
}


.habit-score-number {
  margin-top: 3px;

  font-size: 32px;
  font-weight: 700;
}


.habit-score-number span {
  font-size: 13px;
  color: var(--sub);
  font-weight: 400;
}


.habit-score-right {
  width: 55%;
}


.habit-score-progress {
  height: 8px;

  overflow: hidden;

  border-radius: 999px;

  background:
    rgba(127, 127, 127, 0.15);
}


.habit-score-fill {
  height: 100%;

  border-radius: inherit;

  background:
    var(--accent);

  transition:
    width 0.35s ease;
}


.habit-score-caption {
  margin-top: 7px;

  text-align: right;

  font-family: var(--mono);
  font-size: 10px;

  color: var(--sub);
}


/* ---------- HABIT LIST ---------- */

.habit-v2-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}


.habit-v2-card {
  padding: 16px;

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

  background:
    rgba(127, 127, 127, 0.02);

  transition:
    transform 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease;
}


.habit-v2-card:hover {
  transform: translateY(-1px);
}


.habit-v2-card.habit-completed {
  border-color:
    rgba(127, 127, 127, 0.4);

  background:
    rgba(127, 127, 127, 0.055);
}


.habit-v2-main {
  display: flex;
  gap: 14px;
}


.habit-v2-icon {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  flex: 0 0 42px;

  border-radius: 11px;

  background:
    rgba(127, 127, 127, 0.08);

  font-size: 19px;
}


.habit-v2-info {
  flex: 1;
  min-width: 0;
}


.habit-v2-title-row {
  display: flex;
  justify-content: space-between;

  gap: 15px;
}


.habit-v2-title {
  font-weight: 650;
  font-size: 14px;
}


.habit-v2-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 8px;

  margin-top: 6px;

  font-family: var(--mono);
  font-size: 9px;

  color: var(--sub);
}


.habit-category {
  padding: 3px 7px;

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

  text-transform: uppercase;
  letter-spacing: 0.04em;
}


.habit-check-btn {
  width: 32px;
  height: 32px;

  flex: 0 0 32px;

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

  background: transparent;

  color: var(--text);

  cursor: pointer;

  font-size: 16px;
}


.habit-check-btn:hover {
  border-color: var(--accent);
}


.habit-check-btn.done {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}


.habit-target-row {
  display: flex;
  align-items: center;

  gap: 10px;

  margin-top: 13px;
}


.habit-progress-small {
  height: 5px;

  flex: 1;

  overflow: hidden;

  border-radius: 999px;

  background:
    rgba(127, 127, 127, 0.13);
}


.habit-progress-small-fill {
  height: 100%;

  border-radius: inherit;

  background:
    var(--accent);

  transition:
    width 0.25s ease;
}


.habit-value {
  min-width: 105px;

  text-align: right;

  font-family: var(--mono);
  font-size: 9px;

  color: var(--sub);
}


.habit-input-row {
  display: flex;
  align-items: center;

  gap: 7px;

  margin-top: 10px;
}


.habit-input-row input {
  width: 75px;
}


.habit-input-row > span {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--sub);
}


.habit-complete-btn {
  margin-left: auto;

  padding: 7px 11px;

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

  background: transparent;

  color: var(--text);

  cursor: pointer;

  font-size: 11px;
}


.habit-complete-btn:hover {
  border-color: var(--accent);
}


/* ---------- TEMPLATES ---------- */

.habit-template-grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 10px;
}


.habit-template-card {
  display: flex;
  flex-direction: column;

  align-items: flex-start;

  padding: 15px;

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

  background:
    rgba(127, 127, 127, 0.025);

  color: var(--text);

  cursor: pointer;

  text-align: left;

  transition:
    transform 0.15s ease,
    border-color 0.15s ease;
}


.habit-template-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
}


.habit-template-icon {
  font-size: 21px;
}


.habit-template-name {
  margin-top: 9px;

  font-size: 12px;
  font-weight: 650;
}


.habit-template-meta {
  margin-top: 5px;

  font-family: var(--mono);
  font-size: 8px;

  color: var(--sub);
}


/* ---------- HEATMAP ---------- */

.habit-heatmap {
  overflow-x: auto;
}


.habit-heatmap-grid {
  display: grid;

  grid-template-columns:
    repeat(30, 16px);

  gap: 5px;

  min-width: max-content;
}


.habit-heat-cell {
  width: 16px;
  height: 16px;

  border-radius: 4px;

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

  background:
    rgba(127, 127, 127, 0.045);
}


.habit-heat-cell.level-1 {
  background:
    rgba(127, 127, 127, 0.20);
}


.habit-heat-cell.level-2 {
  background:
    rgba(127, 127, 127, 0.42);
}


.habit-heat-cell.level-3 {
  background:
    var(--accent);
}


.habit-heatmap-legend {
  display: flex;
  align-items: center;

  justify-content: flex-end;

  gap: 5px;

  margin-top: 10px;

  font-family: var(--mono);
  font-size: 8px;

  color: var(--sub);
}


.habit-heatmap-legend i {
  width: 12px;
  height: 12px;

  display: block;

  border-radius: 3px;

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


.habit-heatmap-legend i.level-0 {
  background:
    rgba(127, 127, 127, 0.045);
}


.habit-heatmap-legend i.level-1 {
  background:
    rgba(127, 127, 127, 0.20);
}


.habit-heatmap-legend i.level-2 {
  background:
    rgba(127, 127, 127, 0.42);
}


.habit-heatmap-legend i.level-3 {
  background:
    var(--accent);
}


/* ---------- EMPTY ---------- */

.habit-empty-state {
  padding: 40px 20px;

  text-align: center;

  border: 1px dashed var(--border);
  border-radius: 13px;
}


.habit-empty-icon {
  font-size: 30px;
}


.habit-empty-state h3 {
  margin: 10px 0 5px;
}


.habit-empty-state p {
  margin: 0 auto 15px;

  max-width: 400px;

  color: var(--sub);
  font-size: 12px;
}


/* ---------- MODAL ---------- */

.habit-modal {
  position: fixed;
  inset: 0;

  z-index: 9999;

  display: grid;
  place-items: center;

  padding: 20px;
}


.habit-modal.hidden {
  display: none;
}


.habit-modal-backdrop {
  position: absolute;
  inset: 0;

  background:
    rgba(0, 0, 0, 0.62);

  backdrop-filter:
    blur(5px);
}


.habit-modal-content {
  position: relative;

  width: min(
    100%,
    500px
  );

  max-height: 90vh;

  overflow-y: auto;

  padding: 22px;

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

  background:
    var(--bg);

  box-shadow:
    0 25px 80px
    rgba(0, 0, 0, 0.35);
}


.habit-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 15px;

  margin-bottom: 20px;
}


.habit-modal-header h3 {
  margin: 5px 0 0;
}


.habit-modal-close {
  width: 32px;
  height: 32px;

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

  background: transparent;

  color: var(--text);

  cursor: pointer;

  font-size: 20px;
}


.habit-modal-content label {
  display: block;

  margin-bottom: 15px;

  font-size: 11px;
  font-weight: 600;
}


.habit-modal-content input,
.habit-modal-content select {
  display: block;

  width: 100%;

  margin-top: 6px;
}


.habit-form-grid {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 12px;
}


.habit-modal-actions {
  display: flex;

  justify-content: flex-end;

  gap: 8px;

  margin-top: 20px;
}


/* ---------- MOBILE ---------- */

@media (
  max-width: 760px
) {

  .habit-v2-hero-top {
    flex-direction: column;
  }


  .habit-v2-stats {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .habit-score-card {
    flex-direction: column;
    align-items: stretch;
  }


  .habit-score-right {
    width: 100%;
  }


  .habit-score-caption {
    text-align: left;
  }


  .habit-template-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

}


@media (
  max-width: 480px
) {

  .habit-v2-hero,
  .habit-v2-section {
    padding: 15px;
  }


  .habit-v2-hero h2 {
    font-size: 23px;
  }


  .habit-v2-stats {
    grid-template-columns:
      1fr 1fr;
  }


  .habit-stat {
    padding: 11px;
  }


  .habit-stat strong {
    font-size: 17px;
  }


  .habit-v2-main {
    gap: 10px;
  }


  .habit-v2-icon {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }


  .habit-value {
    min-width: 85px;
  }


  .habit-template-grid {
    grid-template-columns:
      1fr;
  }


  .habit-form-grid {
    grid-template-columns:
      1fr;
  }

}

/* =========================================================
   CAREER OS — HABIT VALUE ENTRY
   ========================================================= */

.habit-v2-entry {
  margin-top: 20px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
}

.habit-v2-entry-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.habit-v2-entry-label span:first-child {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.habit-v2-entry-hint {
  font-size: 12px;
  color: var(--muted);
}


/* Main input row */

.habit-v2-entry-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
}


/* Input */

.habit-v2-input-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
}

.habit-v2-value-input {
  width: 100%;
  height: 46px;
  box-sizing: border-box;

  padding: 0 90px 0 14px;

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

  background: #111821;
  color: var(--text);

  font-size: 15px;
  font-weight: 600;

  outline: none;

  transition:
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}

.habit-v2-value-input:hover {
  background: #141c26;
  border-color: rgba(255, 255, 255, 0.14);
}

.habit-v2-value-input:focus {
  background: #141c26;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}


/* Remove browser number arrows */

.habit-v2-value-input::-webkit-inner-spin-button,
.habit-v2-value-input::-webkit-outer-spin-button {
  opacity: 0;
}


/* Unit inside input */

.habit-v2-input-unit {
  position: absolute;

  right: 13px;
  top: 50%;

  transform: translateY(-50%);

  font-size: 12px;
  font-weight: 500;

  color: var(--muted);

  pointer-events: none;
}


/* Save button */

.habit-v2-save-btn {
  height: 46px;

  padding: 0 18px;

  border: 1px solid rgba(99, 102, 241, 0.35);
  border-radius: 10px;

  background: rgba(99, 102, 241, 0.12);
  color: var(--text);

  font-size: 13px;
  font-weight: 600;

  cursor: pointer;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;

  white-space: nowrap;

  transition:
    background .18s ease,
    border-color .18s ease,
    transform .18s ease;
}

.habit-v2-save-btn:hover {
  background: rgba(99, 102, 241, 0.20);
  border-color: rgba(99, 102, 241, 0.55);
  transform: translateY(-1px);
}

.habit-v2-save-btn:active {
  transform: translateY(0);
}


/* Quick add */

.habit-v2-quick-add {
  display: flex;
  align-items: center;
  gap: 7px;

  margin-top: 12px;
}

.habit-v2-quick-label {
  margin-right: 3px;

  font-size: 11px;
  font-weight: 600;

  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.habit-v2-quick-add button {
  min-width: 42px;
  height: 30px;

  padding: 0 10px;

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

  background: #151d27;
  color: var(--text);

  font-size: 12px;
  font-weight: 600;

  cursor: pointer;

  transition:
    background .18s ease,
    border-color .18s ease,
    transform .18s ease;
}

.habit-v2-quick-add button:hover {
  background: #1b2531;
  border-color: rgba(255, 255, 255, 0.14);
  transform: translateY(-1px);
}

.habit-v2-quick-add button:active {
  transform: translateY(0);
}


/* =========================================================
   PROGRESS DISPLAY
   ========================================================= */

.habit-v2-progress-text {
  display: flex;
  align-items: baseline;
  gap: 5px;

  margin-top: 6px;
}

.habit-v2-progress-text strong {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
}

.habit-v2-progress-text span {
  font-size: 13px;
  color: var(--muted);
}

.habit-v2-complete-label {
  margin-left: 7px;

  padding: 3px 8px;

  border-radius: 999px;

  background: rgba(34, 197, 94, 0.10);
  border: 1px solid rgba(34, 197, 94, 0.22);

  color: #7ee2a5 !important;

  font-size: 11px !important;
  font-weight: 600;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

  .habit-v2-entry {
    padding: 14px;
  }

  .habit-v2-entry-label {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .habit-v2-entry-row {
    flex-direction: column;
  }

  .habit-v2-save-btn {
    width: 100%;
  }

  .habit-v2-quick-add {
    flex-wrap: wrap;
  }

  .habit-v2-quick-label {
    width: 100%;
    margin-bottom: 2px;
  }

}


/* =========================================================
   LEARNING HUB
   ========================================================= */

.learning-viewer {
  margin-top: 18px;
}

.learning-player-panel,
.learning-notes-panel,
.learning-session-panel {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
}

.learning-player-header,
.learning-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.learning-player-header h3,
.learning-panel-header h3 {
  margin: 4px 0 0;
}

.learning-meta {
  color: var(--muted);
  font-size: 13px;
  margin-top: 5px;
}


/* VIDEO */

.learning-video-wrapper {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #080d13;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  overflow: hidden;
}

.learning-video-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 8px;
}

.learning-video-icon {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.08);
  font-size: 25px;
  margin-bottom: 8px;
}


/* NOTES */

.learning-notes-input {
  width: 100%;
  min-height: 220px;
  resize: vertical;
  box-sizing: border-box;

  background: #0b1118;
  color: var(--text);

  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 12px;

  padding: 16px;

  font-family: inherit;
  font-size: 14px;
  line-height: 1.65;

  outline: none;
  transition:
    border-color .2s ease,
    box-shadow .2s ease;
}

.learning-notes-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.04);
}

.learning-notes-input::placeholder {
  color: rgba(255,255,255,0.35);
}

.learning-notes-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;

  margin-top: 10px;

  color: var(--muted);
  font-size: 12px;
}

.learning-save-status {
  font-size: 12px;
  color: var(--muted);
}

.learning-save-status.saved {
  color: var(--accent);
}


/* TIMESTAMP NOTES */

.learning-timestamp-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.learning-timestamp-item {
  display: grid;
  grid-template-columns: 70px 1fr 32px;
  align-items: center;
  gap: 12px;

  padding: 12px;

  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
}

.learning-timestamp {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--accent);
}

.learning-timestamp-note {
  font-size: 13px;
  color: var(--text);
}

.learning-delete-note {
  width: 28px;
  height: 28px;

  border: 0;
  border-radius: 7px;

  background: rgba(255,255,255,0.04);
  color: var(--muted);

  cursor: pointer;
}

.learning-delete-note:hover {
  color: var(--text);
  background: rgba(255,255,255,0.08);
}


/* SESSION */

.learning-session-steps {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}

.learning-session-steps label {
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 13px;

  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;

  cursor: pointer;
}

.learning-session-steps input {
  accent-color: var(--accent);
}

.learning-complete-btn {
  width: 100%;
  border: 0;
  border-radius: 10px;
  padding: 13px 16px;

  background: var(--accent);
  color: #071018;

  font-weight: 700;
  cursor: pointer;

  transition:
    transform .2s ease,
    opacity .2s ease;
}

.learning-complete-btn:hover {
  transform: translateY(-1px);
  opacity: .9;
}


/* CONTINUE LEARNING */

.continue-learning-card {
  display: flex;
  align-items: center;
  gap: 16px;

  padding: 18px;

  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
}

.continue-learning-icon {
  width: 54px;
  height: 54px;

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

  border-radius: 12px;

  background: rgba(255,255,255,0.06);

  font-size: 23px;
}

.continue-learning-info {
  flex: 1;
}

.continue-learning-info h3 {
  margin: 3px 0;
}

.continue-learning-info p {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 13px;
}

.learning-progress-track {
  width: 100%;
  height: 6px;

  background: rgba(255,255,255,0.08);
  border-radius: 999px;

  overflow: hidden;
}

.learning-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: inherit;
  transition: width .3s ease;
}


/* EMPTY STATES */

.learning-empty {
  text-align: center;
  padding: 30px;
  color: var(--muted);
}

.learning-empty-icon {
  font-size: 32px;
  margin-bottom: 8px;
}

.learning-empty p {
  margin: 6px 0 0;
  font-size: 13px;
}

.learning-empty.small {
  padding: 18px;
}


/* MOBILE */

@media (max-width: 700px) {

  .learning-player-header,
  .learning-panel-header,
  .learning-notes-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .learning-timestamp-item {
    grid-template-columns: 60px 1fr 28px;
  }

  .continue-learning-card {
    align-items: flex-start;
  }

}