* { font-family: -apple-system, 'SF Pro Text', 'Helvetica Neue', sans-serif; }
.main  { padding-top: var(--nav-h); min-height: 100vh; }
.page  { padding: 20px 20px 60px; }

/* ── Hero ── */
.dash-hero {
  padding: 28px 32px;
  display: grid;
  grid-template-columns: 1fr 185px 185px;
  gap: 0;
  align-items: center;
  margin-bottom: 16px;
}
.dash-hero-left { position:relative; z-index:1; }
.dash-title { font-size:clamp(1.3rem,2.4vw,2rem); font-weight:700; color:var(--text-primary); line-height:1.1; margin-bottom:8px; letter-spacing:-.5px; }
.dash-sub   { font-size:11.5px; color:var(--text-secondary); line-height:1.6; margin-bottom:12px; }
.dash-hero-pills { display:flex; gap:5px; flex-wrap:wrap; }
.dash-hero-pill {
  font-size:10px; font-weight:600; padding:3px 9px;
  border-radius:99px; background:var(--card-secondary);
  border:1px solid var(--border); color:var(--text-secondary); letter-spacing:.02em;
}
.dash-hero-pill-live { background:rgba(52,199,89,.12); border-color:rgba(52,199,89,.35); color:#1a7a32; }

/* Next holiday highlight */
.dash-next-hol {
  margin-top: 12px;
  background: rgba(255,59,48,.07);
  border: 1px solid rgba(255,59,48,.22);
  border-radius: 9px; padding: 8px 12px;
  display: inline-flex; flex-direction: column; gap: 2px;
}
.dash-next-hol-name { font-size: 12.5px; font-weight: 700; color: #FF3B30; line-height: 1.2; }
.dash-next-hol-sub  { font-size: 9.5px; font-weight: 600; color: rgba(255,59,48,.7); text-transform: uppercase; letter-spacing: .07em; }

/* Middle + Right stats sidebars */
.dash-hero-sidebar {
  display: flex; flex-direction: column; gap: 0;
  border-left: 1px solid var(--border); padding-left: 22px; padding-right: 22px;
}
.dash-hero-sidebar.last { padding-right: 0; }
.dash-hero-stat {
  padding: 7px 0; border-bottom: 1px solid var(--border);
}
.dash-hero-stat:first-child { padding-top: 0; }
.dash-hero-stat:last-child  { border-bottom: none; padding-bottom: 0; }
.dash-hero-stat-val {
  font-size: 13px; font-weight: 600; color: var(--text-primary);
  letter-spacing: -.2px; line-height: 1.3; margin-bottom: 2px;
  display: inline-flex; align-items: center; gap: 4px;
}
.dash-hero-stat-lbl {
  font-size: 9px; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .08em;
}
.dash-live-dot  { width:5px; height:5px; border-radius:50%; background:#34c759; flex-shrink:0; animation:live-pulse 1.8s ease-in-out infinite; }
.dash-live-dot.gold { background:#d97706; }
@keyframes live-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.75)} }

/* ── Layout ── */
.dash-layout {
  display:grid;
  grid-template-columns: 1fr 260px;
  gap:16px;
  align-items:start;
}

/* ── Tool cards ── */
.dash-tools { display:flex; flex-direction:column; gap:14px; }
.tool-section-title {
  font-size:10.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; color:var(--text-muted);
  display:flex; align-items:center; gap:6px;
}
.tool-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }

.tool-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:16px; padding:20px;
  display:flex; flex-direction:column; gap:12px;
  text-decoration:none; color:inherit;
  box-shadow:0 1px 4px rgba(0,0,0,.06);
  transition:box-shadow .18s, transform .18s;
  position:relative; overflow:hidden;
}
.tool-card:hover { box-shadow:0 8px 28px rgba(0,0,0,.12); transform:translateY(-2px); }
.tool-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  border-radius:16px 16px 0 0;
}
.tool-card.fuel::before     { background:linear-gradient(90deg,#c45000,#ff8c00); }
.tool-card.calendar::before { background:linear-gradient(90deg,var(--brand),#5ac8fa); }
.tool-card.forex::before    { background:linear-gradient(90deg,#1a7a32,#34c759); }
.tool-card.map::before      { background:linear-gradient(90deg,#6b21a8,#a855f7); }
.tool-card.nepse::before    { background:linear-gradient(90deg,#9d174d,#ec4899); }
.tool-card.gold::before     { background:linear-gradient(90deg,#92400e,#d97706); }
.tool-card.weather::before  { background:linear-gradient(90deg,#0058b8,#5ac8fa); }
.tool-card.nea::before      { background:linear-gradient(90deg,#78350f,#f59e0b); }
.tool-card.remit::before    { background:linear-gradient(90deg,#1e3a8a,#3b82f6); }
.tool-card.vtax::before     { background:linear-gradient(90deg,#374151,#6b7280); }
.tool-card.insure::before   { background:linear-gradient(90deg,#7c3aed,#c084fc); }
.tool-card.converter::before { background:linear-gradient(90deg,#3730a3,#6366f1); }
.tool-card.weather .tool-icon { background:#e8f4ff; }
h2.tool-section-title { margin:0; }
h3.card-mini-title    { margin:0; }

.tool-card-header { display:flex; align-items:flex-start; justify-content:space-between; }
.tool-icon {
  width:44px; height:44px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; flex-shrink:0;
}
.tool-card.fuel     .tool-icon { background:#fff0e0; }
.tool-card.calendar .tool-icon { background:#e8f4ff; }
.tool-card.forex    .tool-icon { background:#e6f9ee; }
.tool-card.map      .tool-icon { background:#f3eeff; }
.tool-card.gold     .tool-icon { background:#fef3c7; }
.tool-card.nea      .tool-icon { background:#fef9c3; }
.tool-card.remit    .tool-icon { background:#eff6ff; }
.tool-card.vtax     .tool-icon { background:#f3f4f6; }
.tool-card.insure   .tool-icon { background:#f5f3ff; }

.tool-arrow { font-size:18px; color:var(--text-muted); opacity:.4; transition:opacity .15s, transform .15s; }
.tool-card:hover .tool-arrow { opacity:1; transform:translate(2px,-2px); }

.tool-name { font-size:13px; font-weight:700; color:var(--text-primary); margin-bottom:3px; }
.tool-desc { font-size:11.5px; color:var(--text-secondary); line-height:1.6; }

.tool-preview {
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  padding-top:10px; border-top:1px solid var(--border);
}
.tool-preview-item { flex:1; min-width:55px; }
.tool-preview-val  { font-size:16px; font-weight:700; color:var(--text-primary); line-height:1; }
.tool-preview-lbl  { font-size:9px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em; margin-top:2px; }
.tool-card.fuel     .tool-preview-val { color:#c45000; }
.tool-card.calendar .tool-preview-val { color:var(--brand); }
.tool-card.forex    .tool-preview-val { color:#1a7a32; }
.tool-card.map      .tool-preview-val { color:#6b21a8; }
.tool-card.gold     .tool-preview-val { color:#b45309; }

.tool-live-badge {
  display:inline-flex; align-items:center; gap:4px;
  font-size:9px; font-weight:600;
  background:rgba(52,199,89,.12); color:#1a7a32;
  border:1px solid rgba(52,199,89,.3);
  padding:2px 7px; border-radius:99px;
}
.tool-info-badge {
  display:inline-flex; align-items:center; gap:4px;
  font-size:9px; font-weight:600;
  background:rgba(0,113,227,.08); color:#0058b8;
  border:1px solid rgba(0,113,227,.2);
  padding:2px 7px; border-radius:99px;
}

/* ── Sidebar ── */
.dash-sidebar { display:flex; flex-direction:column; gap:12px; }

.profile-mini {
  background:var(--card); border:1px solid var(--border);
  border-radius:16px; padding:20px;
  box-shadow:0 1px 4px rgba(0,0,0,.06);
}
.profile-mini-top { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.profile-mini-photo {
  width:52px; height:52px; border-radius:14px;
  object-fit:cover; border:2px solid var(--border);
  background:var(--bg-secondary); flex-shrink:0;
}
.profile-mini-name { font-size:15px; font-weight:700; color:var(--text-primary); margin-bottom:2px; letter-spacing:-.3px; }
.profile-mini-role { font-size:11px; color:var(--text-muted); }
.profile-mini-bio  { font-size:12px; color:var(--text-secondary); line-height:1.7; margin-bottom:12px; }
.profile-mini-stats { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:12px; }
.profile-mini-stat  { background:var(--bg-secondary); border-radius:10px; padding:10px 12px; }
.profile-mini-stat-val { font-size:20px; font-weight:700; color:var(--text-primary); line-height:1; }
.profile-mini-stat-lbl { font-size:9.5px; color:var(--text-muted); margin-top:2px; text-transform:uppercase; letter-spacing:.05em; }
.profile-mini-btns { display:flex; gap:6px; }
.profile-mini-btns a {
  flex:1; display:flex; align-items:center; justify-content:center; gap:5px;
  padding:7px 10px; border-radius:10px; font-size:11.5px; font-weight:600;
  text-decoration:none; transition:all .15s;
}
.btn-dark { background:var(--text-primary); color:var(--bg); }
.btn-dark:hover { opacity:.88; }
.btn-outline { background:var(--bg-secondary); color:var(--text-primary); border:1px solid var(--border); }
.btn-outline:hover { border-color:var(--brand); color:var(--brand); }

.skills-card, .contact-card-mini {
  background:var(--card); border:1px solid var(--border);
  border-radius:16px; padding:16px 18px;
  box-shadow:0 1px 4px rgba(0,0,0,.06);
  overflow:visible;
}
.card-mini-title { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); margin-bottom:10px; }
.skill-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.skill-pill {
  position:relative; display:flex; flex-direction:column; align-items:center;
  gap:5px; padding:10px 4px 8px;
  background:var(--bg-secondary); border:1px solid var(--border);
  border-radius:12px; cursor:default; transition:background .15s, border-color .15s;
}
.skill-pill:hover { background:rgba(0,122,255,.07); border-color:rgba(0,122,255,.3); }
.skill-pill .icon { font-size:20px; color:var(--brand); }
.skill-pill-name { font-size:8.5px; font-weight:600; color:var(--text-muted); text-align:center; text-transform:uppercase; letter-spacing:.04em; line-height:1.2; }
/* Tooltip */
.skill-pill-tip {
  pointer-events:none; opacity:0; transform:translateY(4px);
  transition:opacity .18s, transform .18s;
  position:absolute; bottom:calc(100% + 8px); left:50%; translate:-50% 0;
  width:150px; background:var(--text-primary); color:#fff;
  border-radius:10px; padding:9px 11px; z-index:200;
  box-shadow:0 6px 20px rgba(0,0,0,.22);
}
.skill-pill:hover .skill-pill-tip { opacity:1; transform:translateY(0); }
.skill-pill-tip::after {
  content:''; position:absolute; top:100%; left:50%; translate:-50% 0;
  border:5px solid transparent; border-top-color:var(--text-primary);
}
.skill-tip-name { font-size:11px; font-weight:700; margin-bottom:3px; }
.skill-tip-desc { font-size:10px; color:rgba(255,255,255,.65); line-height:1.5; }
.contact-row-mini { display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:8px; font-size:11.5px; color:var(--text-secondary); text-decoration:none; transition:background .12s; }
.contact-row-mini:hover { background:var(--bg-secondary); color:var(--brand); }
.contact-row-mini .icon { font-size:15px; color:var(--text-muted); flex-shrink:0; }
.contact-row-mini:hover .icon { color:var(--brand); }

/* ── Responsive ── */
@media (max-width:860px) {
  .dash-layout  { grid-template-columns:1fr; }
  .dash-sidebar { flex-direction:row; flex-wrap:wrap; gap:12px; }
  .dash-sidebar > * { flex:1; min-width:260px; }
  .dash-hero    { grid-template-columns:1fr; gap:0; }
  .dash-hero-sidebar, .dash-hero-sidebar.last {
    border-left:none; padding-left:0; padding-right:0;
    border-top:1px solid var(--border); padding-top:12px; margin-top:4px;
    flex-direction:row; flex-wrap:wrap; gap:0;
  }
  .dash-hero-sidebar .dash-hero-stat {
    flex:1; min-width:80px; border-bottom:none;
    border-right:1px solid var(--border); padding:0 12px 0 0; margin-right:12px;
  }
  .dash-hero-sidebar .dash-hero-stat:last-child { border-right:none; margin-right:0; }
  /* Tooltip: flip to show below when sidebar is row-direction at bottom */
  .skill-pill-tip {
    bottom:auto; top:calc(100% + 8px); transform:translateY(-4px);
  }
  .skill-pill:hover .skill-pill-tip { transform:translateY(0); }
  .skill-pill-tip::after {
    top:auto; bottom:100%;
    border-top-color:transparent; border-bottom-color:var(--text-primary);
  }
  .skill-grid { grid-template-columns:repeat(5,1fr); }
}
@media (max-width:580px) {
  .page { padding:12px 12px 40px; }
  .dash-hero { padding:16px 14px; }
  .tool-grid  { grid-template-columns:1fr 1fr; }
  .dash-hero-sidebar .dash-hero-stat { min-width:60px; padding:0 8px 0 0; margin-right:8px; }
  .dash-sidebar { flex-direction:column; }
  .dash-sidebar > * { min-width:unset; }
  .profile-mini-btns { flex-direction:column; }
  .profile-mini-btns a { justify-content:center; }
  .skill-grid { grid-template-columns:repeat(5,1fr); }
  .skill-pill .icon { font-size:17px; }
  .skill-pill-name { font-size:7.5px; }
  .contact-row-mini { font-size:10.5px; }
}
/* ── Weather strip ── */
.wx-strip {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  background:var(--card); border:1px solid var(--border);
  border-radius:14px; padding:10px 16px;
  margin-bottom:16px; box-shadow:0 1px 4px rgba(0,0,0,.05);
}
.wx-strip-label {
  font-size:9.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.07em; color:var(--text-muted);
  display:flex; align-items:center; gap:4px; flex-shrink:0;
  padding-right:8px; border-right:1px solid var(--border);
  margin-right:4px;
}
.wx-strip-label .icon { font-size:14px; color:var(--brand); }
.wx-city-pill {
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 11px; border-radius:99px;
  background:var(--bg-secondary); border:1px solid var(--border);
  font-size:11.5px; font-weight:600; color:var(--text-primary);
  text-decoration:none; transition:all .18s; cursor:pointer;
  white-space:nowrap;
}
.wx-city-pill.loaded { border-color:transparent; color:#fff; }
.wx-city-pill.loaded .wx-pill-name,
.wx-city-pill.loaded .wx-pill-temp,
.wx-city-pill.loaded .wx-pill-icon { color:#fff; }
.wx-city-pill.loaded:hover { filter:brightness(1.1); }
.wx-city-pill:not(.loaded) .wx-pill-name { color:var(--text-secondary); }
.wx-city-pill .wx-pill-icon { font-size:14px; color:inherit; opacity:.9; }
.wx-city-pill .wx-pill-temp { font-weight:800; }
.wx-city-pill .wx-pill-name { font-size:10.5px; font-weight:500; opacity:.8; }
.wx-pill-aqi {
  font-size:9px; font-weight:700; padding:1px 5px;
  border-radius:99px; background:rgba(255,255,255,.25);
  letter-spacing:.02em; display:none;
}
.wx-strip-more {
  margin-left:auto; font-size:10.5px; font-weight:600;
  color:var(--brand); text-decoration:none; display:flex; align-items:center; gap:3px;
  white-space:nowrap;
}
.wx-strip-more:hover { text-decoration:underline; }
@media (max-width:640px) {
  .wx-strip { gap:6px; padding:8px 12px; }
  .wx-strip-label { display:none; }
  .wx-strip-more { margin-left:0; }
}
@media (max-width:380px) {
  .tool-grid { grid-template-columns:1fr; }
  .dash-hero-stat-val { font-size:11px; }
  .skill-pill { padding:8px 3px 6px; }
}
.skill-pill.skill-pill-focus .skill-pill-tip { opacity:1; transform:translateY(0); }
.skill-pill:focus { outline:2px solid var(--brand); outline-offset:2px; }
[data-theme=dark] .skill-pill-tip::after { border-top-color:var(--text-primary); border-bottom-color:var(--text-primary); }