@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap");

[data-theme="peip"] {
    --c-bg:#f7f8f9;--c-surface:#ffffff;--c-surface-2:#f5f6f7;--c-border:#d4d6db;
    --c-text:#1f2937;--c-text-2:#2d3646;--c-text-3:#5a6475;
    --c-accent:#4a5f83;--c-accent-2:#4a5f83;--c-accent-light:#e8ecf2;
    --c-success:#2d6a4f;--c-warning:#92400E;--c-danger:#A33030;
    --c-nav-bg:#1f2937;--c-nav-text:rgba(180,186,196,0.75);--c-nav-active:#d4dce8;
    --r-card:16px;--r-btn:12px;
    --shadow:0 2px 8px rgba(0,0,0,0.06);--shadow-md:0 10px 30px rgba(0,0,0,0.08);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-font-smoothing:antialiased}
body{font-family:"Inter","Segoe UI",-apple-system,system-ui,sans-serif;font-size:15px;line-height:1.7;color:var(--c-text);background:linear-gradient(180deg,#f7f8f9 0%,#eef0f3 60%,#f7f8f9 100%);min-height:100vh;display:flex;flex-direction:column}
h1,h2,h3,h4{line-height:1.2;color:#4a5f83;letter-spacing:-0.2px}
h1{font-size:2.5rem;font-weight:900}
h2{font-size:1.8rem;font-weight:800}
h3{font-weight:700}
h4{font-weight:700}
a{color:var(--c-accent);text-decoration:none}
a:hover{text-decoration:underline}
p{margin-bottom:0.75rem}
p:last-child{margin-bottom:0}

/* ======= NAV ======= */
.nav{background:var(--c-nav-bg);position:sticky;top:0;z-index:100;border-bottom:1px solid rgba(255,255,255,0.06)}
.nav-inner{max-width:1100px;margin:0 auto;padding:0 1.5rem;height:60px;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.nav-brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.nav-brand-pep{font-size:1.4rem;font-weight:900;color:#FFFFFF;letter-spacing:1px}
.nav-brand-text{display:none;flex-direction:column;gap:1px}
.nav-brand-sub{font-size:11px;color:var(--c-nav-text);font-weight:600}
.nav-brand-tag{font-size:10px;color:var(--c-nav-text);font-style:italic;opacity:0.6}
@media(min-width:640px){.nav-brand-text{display:flex}}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-link{color:var(--c-nav-text);font-size:13px;font-weight:600;padding:6px 12px;border-radius:8px;text-decoration:none;transition:color 0.15s,background 0.15s;white-space:nowrap}
.nav-link:hover{color:var(--c-nav-active);background:rgba(255,255,255,0.08);text-decoration:none}
.nav-link--admin{color:#FCD34D}.nav-link--super{color:#A78BFA}.nav-link--logout{color:#FCA5A5}
.nav-user{display:flex;align-items:center;gap:2px;border-left:1px solid rgba(255,255,255,0.1);margin-left:8px;padding-left:12px}
.nav-user-name{font-size:12px;color:var(--c-nav-text);margin-right:4px;font-weight:500}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:6px;flex-direction:column;gap:4px}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--c-nav-text);border-radius:1px;transition:transform 0.2s,opacity 0.2s}
.nav-toggle.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ======= FLASH ======= */
.flash-wrap{max-width:1100px;margin:1rem auto 0;padding:0 1.5rem;display:flex;flex-direction:column;gap:8px}
.flash{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-radius:12px;font-size:13px;font-weight:500;border:1px solid transparent}
.flash--success{background:#F0FDF4;color:#166534;border-color:#BBF7D0}
.flash--danger{background:#FEF2F2;color:#991B1B;border-color:#FECACA}
.flash--warning{background:#FFFBEB;color:#92400E;border-color:#FDE68A}
.flash--info{background:#EFF6FF;color:#1E40AF;border-color:#BFDBFE}
.flash-close{background:none;border:none;cursor:pointer;font-size:18px;line-height:1;color:inherit;opacity:0.6;padding:0 4px}
.flash-close:hover{opacity:1}

/* ======= LAYOUT ======= */
.main{flex:1;max-width:1100px;margin:0 auto;padding:2rem 1.5rem 4rem;width:100%}
.footer{background:var(--c-nav-bg);margin-top:auto;padding:2rem 1.5rem;text-align:center}
.footer-inner{max-width:700px;margin:0 auto}
.footer-brand{color:#FFFFFF;font-size:13px;font-weight:700;margin-bottom:4px}
.footer-tagline{color:var(--c-nav-text);font-size:12px;margin-bottom:12px}
.footer-disclaimer{color:rgba(255,255,255,0.35);font-size:11px;line-height:1.6}

/* ======= BUTTONS ======= */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 20px;border-radius:var(--r-btn);font-family:"Inter","Segoe UI",system-ui,sans-serif;font-size:14px;font-weight:800;cursor:pointer;text-decoration:none;transition:background 0.15s,transform 0.1s,box-shadow 0.15s;border:1px solid transparent;min-height:44px}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn--primary{background:#4a5f83;color:#fff;border-color:#3a4d73;box-shadow:0 8px 18px rgba(0,0,0,0.15)}
.btn--primary:hover{background:#5a6f93}
.btn--secondary{background:#e6e7eb;color:#2d3646;border-color:#d8d9de;box-shadow:inset 0 -1px 0 rgba(255,255,255,0.8)}
.btn--outline{background:transparent;color:var(--c-text);border-color:var(--c-border);font-weight:600}
.btn--outline:hover{background:var(--c-surface-2)}
.btn--danger{background:var(--c-danger);color:#fff}
.btn--sm{padding:7px 14px;font-size:13px;min-height:36px;border-radius:10px}
.btn--lg{padding:14px 28px;font-size:16px}
.btn--full{width:100%}
.btn:disabled{opacity:0.4;cursor:not-allowed}

/* ======= CARDS ======= */
.card{background:var(--c-surface);border:1px solid #d8d9de;border-radius:var(--r-card);box-shadow:var(--shadow-md);padding:1.5rem}
.card--flat{box-shadow:none}
.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem;padding-bottom:1rem;border-bottom:1px solid #e1e3e7;gap:8px;flex-wrap:wrap}
.card-title{font-size:1rem;font-weight:700;color:var(--c-text)}
.card-sub{font-size:12px;color:var(--c-text-3);margin-top:2px;font-weight:500}

/* ======= FORMS ======= */
.form-group{margin-bottom:1.1rem}
.form-label{display:block;font-size:13px;font-weight:600;color:var(--c-text-3);margin-bottom:5px}
.form-input{width:100%;padding:10px 12px;border:1px solid var(--c-border);border-radius:10px;font-family:"Inter","Segoe UI",system-ui,sans-serif;font-size:16px;color:var(--c-text);background:var(--c-surface);transition:border-color 0.15s;appearance:none}
.form-input:focus{outline:none;border-color:var(--c-accent);box-shadow:0 0 0 3px var(--c-accent-light)}
.form-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235a6475' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px}
.form-hint{font-size:12px;color:var(--c-text-3);margin-top:4px}

/* ======= TABLE ======= */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:13px}
thead th{text-align:left;padding:8px 12px;font-size:11px;font-weight:700;letter-spacing:0.8px;text-transform:uppercase;color:var(--c-text-3);border-bottom:1px solid var(--c-border)}
tbody td{padding:10px 12px;border-bottom:1px solid #e1e3e7;color:var(--c-text-2)}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--c-surface-2)}

/* ======= BADGES ======= */
.badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:700}
.badge--user{background:var(--c-surface-2);color:var(--c-text-3)}
.badge--admin{background:#FEF9C3;color:#854D0E}
.badge--super{background:#EDE9FE;color:#5B21B6}
.badge--superadmin{background:#EDE9FE;color:#5B21B6}
.badge--success{background:#F0FDF4;color:#166534}
.badge--warning{background:#FFFBEB;color:#92400E}
.badge--danger{background:#FEF2F2;color:#991B1B}
.badge--info{background:#EFF6FF;color:#1E40AF}

/* ======= ASSESSMENT / LIKERT ======= */
.q-card{background:var(--c-surface);border:1px solid #d8d9de;border-radius:var(--r-card);padding:1.25rem 1.5rem;margin-bottom:1rem;box-shadow:var(--shadow-md)}
.q-number{font-size:11px;font-weight:700;color:var(--c-text-3);letter-spacing:0.5px;margin-bottom:4px}
.q-text{font-size:15px;color:var(--c-text);line-height:1.6;margin-bottom:4px;font-weight:500}
.q-reflect{font-size:12px;color:var(--c-text-3);font-style:italic;margin-bottom:1rem;line-height:1.5}
.likert-row{display:flex;gap:6px}
.likert-option{flex:1}
.likert-option input[type="radio"]{display:none}
.likert-label{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;border:1px solid var(--c-border);border-radius:10px;cursor:pointer;transition:all 0.12s;font-size:12px;color:var(--c-text-3);text-align:center;line-height:1.3;min-height:44px;justify-content:center}
.likert-label:hover{border-color:var(--c-accent);background:var(--c-accent-light)}
.likert-option input[type="radio"]:checked+.likert-label{background:var(--c-accent);border-color:var(--c-accent);color:#FFFFFF}
.likert-num{font-size:16px;font-weight:700}
.likert-text{font-size:12px;font-weight:500}

/* ======= PROGRESS ======= */
.progress-wrap{margin-bottom:1.5rem}
.progress-bar-outer{height:4px;background:#e6e7eb;border-radius:999px;overflow:hidden;margin-bottom:6px}
.progress-bar-inner{height:100%;background:var(--c-accent);border-radius:999px;transition:width 0.3s}
.progress-label{font-size:12px;color:var(--c-text-3);font-weight:600}

/* ======= DIMENSION BARS ======= */
.dim-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.dim-label{font-size:13px;min-width:120px;color:var(--c-text-2);font-weight:500}
.dim-track{flex:1;height:7px;background:#e6e7eb;border-radius:999px;overflow:hidden}
.dim-fill{height:100%;border-radius:999px;background:var(--c-accent);transition:width 0.6s ease}
.dim-pct{font-size:12px;color:var(--c-text-3);min-width:36px;text-align:right;font-weight:600}

/* ======= METRICS ======= */
.metric-grid{display:grid;gap:12px}
.metric-grid--2{grid-template-columns:repeat(2,1fr)}
.metric-grid--3{grid-template-columns:repeat(3,1fr)}
.metric-grid--4{grid-template-columns:repeat(4,1fr)}
.metric-card{background:var(--c-surface-2);border-radius:14px;padding:1rem;border:1px solid #e1e3e7}
.metric-card-label{font-size:11px;color:var(--c-text-3);letter-spacing:0.5px;margin-bottom:4px;font-weight:700}
.metric-card-value{font-size:1.4rem;font-weight:800;color:var(--c-text);letter-spacing:-0.2px}
.metric-card-sub{font-size:12px;color:var(--c-text-3);margin-top:2px;font-weight:500}

/* ======= HEATMAP ======= */
.heatmap-cell{padding:8px 6px;border-radius:8px;text-align:center;font-weight:600;font-size:12px}
.heat-high-pos{background:#DCFCE7;color:#14532D}
.heat-pos{background:#ECFDF5;color:#166534}
.heat-neutral{background:var(--c-surface-2);color:var(--c-text-3)}
.heat-neg{background:#FEF3C7;color:#92400E}
.heat-high-neg{background:#FEE2E2;color:#991B1B}
.heatmap-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ======= RESULTS ======= */
.results-core-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:center}
.archetype-eyebrow{font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--c-text-3);margin-bottom:4px;font-weight:700}
.archetype-name{font-size:2.2rem;font-weight:900;color:#4a5f83;margin-bottom:0.75rem;letter-spacing:-0.3px}
.narrative-box{background:var(--c-surface-2);border-left:3px solid var(--c-accent);border-radius:0 12px 12px 0;padding:1rem 1.25rem;font-size:14px;line-height:1.8;color:var(--c-text-2)}
.phase-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;border-radius:999px;font-size:12px;font-weight:700;margin:3px}
.phase-chip--best{background:#DCFCE7;color:#14532D}
.phase-chip--second{background:#DBEAFE;color:#1E40AF}
.phase-chip--lowest{background:#FEE2E2;color:#991B1B}
.flag-item{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px solid #e1e3e7;font-size:13px;color:var(--c-text-2);line-height:1.6;font-weight:500}
.flag-item:last-child{border-bottom:none}
.flag-dot{width:7px;height:7px;border-radius:50%;margin-top:6px;flex-shrink:0}
.flag-dot--friction{background:var(--c-warning)}
.flag-dot--flow{background:var(--c-success)}
.role-chips{display:flex;flex-wrap:wrap;gap:6px}
.role-chip{background:var(--c-surface-2);border:1px solid var(--c-border);border-radius:10px;padding:5px 12px;font-size:12px;color:var(--c-text-2);font-weight:500}

/* ======= LANDING ======= */
.landing-hero{min-height:80vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:4rem 1rem;gap:1.5rem}
.landing-eyebrow{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--c-text-3);font-weight:700}
.landing-title{font-size:clamp(2.2rem,5vw,3.5rem);font-weight:900;color:#4a5f83;line-height:1.1;max-width:700px;letter-spacing:-0.3px}
.landing-tagline{font-size:1.1rem;color:var(--c-text-2);max-width:500px;font-weight:500}
.landing-cta{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.landing-disclaimer{font-size:11px;color:var(--c-text-3);font-style:italic;max-width:480px;line-height:1.6;border:1px solid var(--c-border);border-radius:12px;padding:8px 14px}

/* ======= UTILITIES ======= */
.text-center{text-align:center}
.text-muted{color:var(--c-text-3);font-size:13px;font-weight:500}
.mt-1{margin-top:0.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}
.mb-1{margin-bottom:0.5rem}.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}
.gap-1{gap:0.5rem}.gap-2{gap:1rem}
.flex{display:flex}
.flex-between{display:flex;justify-content:space-between;align-items:center}
.flex-center{display:flex;align-items:center}
.flex-wrap{flex-wrap:wrap}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem}
.w-full{width:100%}
.divider{border:none;border-top:1px solid #e1e3e7;margin:1.5rem 0}
.eyebrow{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--c-text-3);font-weight:700}

/* ============================================================ */
/*  RESPONSIVE — TABLET (max-width: 768px)                      */
/* ============================================================ */
@media(max-width:768px){
  .nav-inner{height:auto;min-height:56px;padding:8px 1rem;flex-wrap:wrap}
  .nav-toggle{display:flex}
  .nav-links{display:none;width:100%;flex-direction:column;align-items:stretch;gap:0;padding:8px 0}
  .nav-links--open{display:flex}
  .nav-link{padding:10px 0;font-size:14px}
  .nav-user{flex-direction:column;align-items:stretch;border-left:none;margin-left:0;padding-left:0;padding-top:8px;margin-top:4px;border-top:1px solid rgba(255,255,255,0.1);gap:0}
  .nav-user-name{margin-bottom:4px;font-size:13px}
  .main{padding:1.5rem 1rem 3rem}
  .card{padding:1.25rem}
  h2{font-size:1.4rem}
}

/* ============================================================ */
/*  RESPONSIVE — PHONE (max-width: 600px)                       */
/* ============================================================ */
@media(max-width:600px){
  h1{font-size:1.6rem}
  h2{font-size:1.3rem}
  .archetype-name{font-size:1.6rem}
  .main{padding:1rem 0.75rem 2.5rem}
  .card{padding:1rem}

  /* Results: stack radar + bars */
  .results-core-grid{grid-template-columns:1fr}

  /* Grids become single column */
  .grid-2{grid-template-columns:1fr}
  .metric-grid--3,.metric-grid--4{grid-template-columns:repeat(2,1fr)}
  .metric-grid--2{grid-template-columns:1fr}

  /* Dim bars: shrink label */
  .dim-label{min-width:80px;font-size:12px}

  /* Landing CTA stacks */
  .landing-cta{flex-direction:column;width:100%;max-width:320px}
  .landing-cta .btn{width:100%}

  /* Flex rows wrap on mobile */
  .flex-between{flex-wrap:wrap;gap:8px}

  /* Assessment likert on mobile */
  .likert-label{min-height:52px;padding:6px 2px}
  .likert-text{display:none}
  .likert-num{font-size:18px}
  .q-card{padding:1rem}

  /* Card header wraps */
  .card-header{flex-direction:column;align-items:flex-start;gap:6px}

  /* Footer tighter */
  .footer{padding:1.5rem 1rem}
}

/* ============================================================ */
/*  RESPONSIVE — SMALL PHONE (max-width: 400px)                 */
/* ============================================================ */
@media(max-width:400px){
  h1{font-size:1.4rem}
  .archetype-name{font-size:1.4rem}
  .metric-grid--3,.metric-grid--4,.metric-grid--2{grid-template-columns:1fr}
  .metric-card-value{font-size:1.2rem}
  .main{padding:0.75rem 0.5rem 2rem}
  .card{padding:0.75rem}
  .btn--lg{padding:12px 20px;font-size:14px}
  .landing-hero{padding:2rem 0.75rem;min-height:auto}
}