/* --- PROP GUARD PREMIUM UI UPGRADE (FundingPips Style) --- */

/* Layout wrappers */
.premium-hero { padding-block: 80px 40px; text-align: center; }
.premium-hero .eyebrow { color: var(--gold); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 16px; display: inline-block; }
.premium-hero h1 { font-size: clamp(32px, 5vw, 56px); font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; margin-bottom: 24px; }
.premium-hero .lede { font-size: 18px; color: var(--muted); max-width: 700px; margin: 0 auto; }

.guard-layout { display: grid; grid-template-columns: 320px 1fr; gap: 40px; align-items: start; }
@media (max-width: 900px) { .guard-layout { grid-template-columns: 1fr; gap: 24px; } }

/* Sidebar */
.g-side { background: var(--panel); border: 1px solid var(--line2); border-radius: 20px; padding: 24px; box-shadow: 0 10px 30px rgba(0,0,0,.2); }
.g-side-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.g-side-head h2 { font-size: 18px; margin: 0; letter-spacing: -0.5px; }
.g-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.g-acc { width: 100%; text-align: left; background: var(--bg); border: 1px solid var(--line2); padding: 16px; border-radius: 12px; display: flex; align-items: center; gap: 16px; cursor: pointer; transition: all .2s ease; }
.g-acc:hover { border-color: rgba(255,255,255,.2); transform: translateY(-2px); }
.g-acc.on { border-color: var(--gold); background: rgba(240,190,85,.05); }
.g-acc-t { flex: 1; display: flex; flex-direction: column; }
.g-acc-t b { font-size: 15px; font-weight: 600; }
.g-acc-t small { font-size: 12px; color: var(--muted); margin-top: 4px; }
.g-note { font-size: 13px; color: var(--dim); margin-top: 24px; line-height: 1.5; }

/* Main Dashboard */
.g-main { display: flex; flex-direction: column; gap: 24px; }

/* Head Card */
.g-head { background: linear-gradient(145deg, var(--panel) 0%, var(--bg) 100%); border: 1px solid var(--line2); border-radius: 20px; padding: 32px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; box-shadow: 0 8px 24px rgba(0,0,0,.2); }
.g-head .firm { gap: 16px; display: flex; align-items: center; }
.g-head .firm>div b { font-size: 24px; letter-spacing: -0.5px; display: block; }
.g-head .firm>div small { color: var(--muted); font-size: 14px; }
.g-status { padding: 10px 20px; border-radius: 12px; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; font-weight: 800; display: flex; flex-direction: column; align-items: flex-end; }
.g-status span { font-size: 11px; opacity: 0.8; font-weight: 600; margin-bottom: 2px; }
.g-status.safe { background: rgba(79,214,158,.1); color: var(--ok); border: 1px solid rgba(79,214,158,.25); }
.g-status.careful { background: rgba(240,190,85,.1); color: var(--gold); border: 1px solid rgba(240,190,85,.3); }
.g-status.danger, .g-status.breach { background: rgba(240,138,75,.12); color: #F08A4B; border: 1px solid rgba(240,138,75,.35); }

.g-example { display: flex; align-items: center; gap: 12px; background: rgba(240,190,85,.08); border: 1px solid rgba(240,190,85,.22); color: var(--gold); padding: 16px 20px; border-radius: 12px; font-size: 15px; line-height: 1.5; }
.g-example a { color: var(--gold); text-decoration: underline; font-weight: 700; }

/* Dashboard Grid Bento Box */
.g-dashboard-wrap { display: flex; flex-direction: column; gap: 24px; }

/* Runway */
.g-runway-card { background: var(--panel); border: 1px solid var(--line2); border-radius: 20px; padding: 32px; box-shadow: 0 4px 12px rgba(0,0,0,.1); }
.g-runway-card h3 { font-size: 13px; color: var(--muted); margin: 0 0 16px; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }
.rw { position: relative; padding: 40px 10px 0; }
.rw-you { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; font-weight: 700; font-size: 18px; color: var(--text); }
.rw-track { position: relative; height: 16px; border-radius: 8px; background: var(--panel2); }
.rw-track>i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 8px; opacity: .9; }
.rw-track>i.ok, .rw-dot.ok { --c: var(--ok); }
.rw-track>i.warn, .rw-dot.warn { --c: var(--gold); }
.rw-track>i.bad, .rw-dot.bad { --c: #F08A4B; }
.rw-track>i { background: var(--c); }
.rw-mk { position: absolute; top: -10px; bottom: -10px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--dim); }
.rw-mk.target { background: var(--ok); }
.rw-dot { position: absolute; top: 50%; width: 32px; height: 32px; margin: -16px 0 0 -16px; border-radius: 50%; background: var(--bg); border: 5px solid var(--c); box-sizing: border-box; box-shadow: 0 0 10px rgba(0,0,0,.5); }
.rw-labels { position: relative; height: 24px; margin-top: 20px; font-family: var(--mono); font-size: 14px; font-weight: 600; }
.rw-labels span { position: absolute; top: 0; white-space: nowrap; color: var(--muted); }
.rw-labels span b { font-weight: 700; color: var(--text); }
.rw-labels .target { color: var(--ok); }
.rw-labels .target b { color: var(--ok); }
.rw-labels .m { transform: translateX(-50%); }
.rw-labels .r { transform: translateX(-100%); }
.rw-labels .l { margin-left: -2px; }

/* Meters Grid */
.g-meters-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media(max-width: 768px) { .g-meters-grid { grid-template-columns: 1fr; } }
.g-premium-meter { background: var(--panel); border: 1px solid var(--line2); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 4px 12px rgba(0,0,0,.1); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.g-premium-meter:hover { border-color: rgba(255,255,255,.24); transform: translateY(-3px); box-shadow: 0 12px 24px rgba(0,0,0,.2); }
.g-premium-meter-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.g-premium-meter-h span { font-size: 13px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.g-premium-meter-h b { font-size: 26px; font-family: var(--mono); color: var(--text); line-height: 1; text-align: right; white-space: nowrap; }
.g-premium-meter-h b small { font-family: var(--body); font-size: 13px; font-weight: 400; color: var(--dim); }
.g-premium-meter-h b.okc { color: var(--ok); }
.g-premium-meter-h b.badc { color: #F08A4B; }
.g-premium-track { height: 10px; background: var(--panel2); border-radius: 5px; overflow: hidden; position: relative; margin: 4px 0; }
.g-premium-track i { display: block; height: 100%; border-radius: 5px; transition: width .6s cubic-bezier(.4,0,.2,1); }
.g-premium-track i.ok { background: var(--ok); }
.g-premium-track i.warn, .g-premium-track i.gold { background: var(--gold); }
.g-premium-track i.bad { background: #F08A4B; }
.g-premium-meter>small { font-size: 14px; color: var(--dim); line-height: 1.5; }

/* Actions */
.g-actions-premium { margin-top: 10px; display: flex; gap: 16px; flex-wrap: wrap; }

/* Form Styling */
.g-form { background: var(--panel); border: 1px solid var(--line2); border-radius: 20px; padding: 32px; box-shadow: 0 10px 30px rgba(0,0,0,.2); }
.g-form h2 { font-size: 24px; margin-bottom: 24px; }
.g-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; }
@media(max-width: 640px) { .g-grid { grid-template-columns: 1fr; gap: 16px; } }
.g-grid label { display: flex; flex-direction: column; gap: 8px; font-size: 14px; font-weight: 600; color: var(--muted); }
.g-grid input, .g-grid select { padding: 14px 16px; border-radius: 10px; border: 1px solid var(--line2); background: var(--bg); color: var(--text); font-size: 16px; transition: border-color 0.2s; width: 100%; }
.g-grid input:focus, .g-grid select:focus { border-color: var(--gold); outline: none; }
.g-grid label.check { flex-direction: row; align-items: center; font-weight: 400; }
.g-grid label.check input { width: auto; margin-right: 10px; }
.g-err { color: #F08A4B; font-size: 14px; margin-bottom: 16px; font-weight: 600; }

/* Mobile adjustments */
@media (max-width: 700px) {
  .premium-hero { padding-block: 40px 20px; }
  .g-head { padding: 20px; }
  .g-runway-card { padding: 24px 16px; }
  .rw { padding: 32px 10px 0; }
  .rw-you { font-size: 15px; }
  .rw-labels { font-size: 12px; }
  .g-premium-meter { padding: 20px; }
  .g-premium-meter-h b { font-size: 22px; }
}
@media (max-width: 520px) {
  .rw-labels { display: flex; justify-content: space-between; gap: 8px; height: auto; flex-wrap: wrap; }
  .rw-labels span { position: static; transform: none !important; margin: 0 !important; }
}

/* Light Mode */
:root[data-theme=light] .g-side, :root[data-theme=light] .g-head, :root[data-theme=light] .g-runway-card, :root[data-theme=light] .g-premium-meter, :root[data-theme=light] .g-form { background: #fff; border-color: #E8E2D3; box-shadow: 0 4px 14px rgba(80,60,10,.06); }
:root[data-theme=light] .g-premium-meter:hover { border-color: #D6CCB4; }
:root[data-theme=light] .g-premium-track, :root[data-theme=light] .rw-track { background: #EEE8DA; }
:root[data-theme=light] .rw-dot { background: #fff; }
:root[data-theme=light] .g-example { background: #FBF6E8; border-color: #E2CF9A; color: #8A6400; }
:root[data-theme=light] .g-example a { color: #8A6400; }
:root[data-theme=light] .g-status.careful, :root[data-theme=light] .g-status.careful b { color: #8A6400; }
:root[data-theme=light] .rw-track>i.warn, :root[data-theme=light] .rw-dot.warn, :root[data-theme=light] .g-premium-track i.warn, :root[data-theme=light] .g-premium-track i.gold { --c: #B8820E; background: #B8820E; }
:root[data-theme=light] .rw-dot.warn { background: #fff; }
:root[data-theme=light] .rw-track>i.bad, :root[data-theme=light] .g-premium-track i.bad { background: #D9682A; }
:root[data-theme=light] .rw-dot.bad { --c: #D9682A; }