
/* ── DiTa Digital Maturity Platform ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
*{margin:0;padding:0;box-sizing:border-box;}
html,body{font-family:'Inter',system-ui,sans-serif;background:#fff;color:#0F172A;min-height:100vh;}
a{color:#2563EB;text-decoration:none;}
::-webkit-scrollbar{width:5px;}::-webkit-scrollbar-thumb{background:#E2E8F0;border-radius:3px;}

/* LAYOUT */
.page{min-height:100vh;display:flex;flex-direction:column;}
.header{display:flex;align-items:center;justify-content:space-between;padding:14px 28px;border-bottom:1px solid #E2E8F0;background:#fff;position:sticky;top:0;z-index:100;box-shadow:0 1px 3px rgba(0,0,0,0.06);}
.wrap{flex:1;padding:28px 20px;max-width:720px;margin:0 auto;width:100%;}
.wrap-wide{flex:1;padding:28px 20px;max-width:1060px;margin:0 auto;width:100%;}

/* LOGO */
.logo{font-size:24px;font-weight:900;letter-spacing:-1px;color:#0F172A;}
.logo span{color:#2563EB;}
.badge-basic{background:#EFF6FF;color:#2563EB;border:1px solid #BFDBFE;border-radius:6px;padding:3px 10px;font-size:11px;font-weight:700;letter-spacing:1px;}

/* BUTTONS */
.btn-primary{display:inline-block;background:#2563EB;color:#fff;border:none;border-radius:8px;padding:11px 24px;font-size:13px;font-weight:700;cursor:pointer;transition:all .2s;font-family:inherit;text-align:center;}
.btn-primary:hover{background:#1D4ED8;}
.btn-primary:disabled{background:#CBD5E1;cursor:not-allowed;}
.btn-outline{display:inline-block;background:#fff;color:#475569;border:1px solid #E2E8F0;border-radius:8px;padding:9px 16px;font-size:13px;cursor:pointer;transition:all .2s;font-family:inherit;}
.btn-outline:hover{background:#F8FAFC;}
.btn-full{width:100%;}
.btn-purple{background:#7C3AED;}.btn-purple:hover{background:#6D28D9;}
.btn-red{background:#DC2626;}.btn-red:hover{background:#B91C1C;}

/* CARDS */
.card{background:#fff;border:1px solid #E2E8F0;border-radius:14px;padding:24px 20px;box-shadow:0 2px 8px rgba(0,0,0,0.05);}
.sec{background:#fff;border:1px solid #E2E8F0;border-radius:14px;padding:22px;margin-bottom:16px;box-shadow:0 1px 3px rgba(0,0,0,0.04);}
.sec-title{font-size:14px;font-weight:700;color:#2563EB;margin-bottom:14px;}

/* FORMS */
.field{margin-bottom:16px;}
.field label{display:block;font-size:11px;letter-spacing:1px;color:#64748B;margin-bottom:6px;font-weight:600;}
.field input,.field select,.field textarea{width:100%;background:#fff;border:1px solid #E2E8F0;border-radius:8px;padding:10px 12px;color:#0F172A;font-size:13px;outline:none;font-family:inherit;transition:border-color .2s;}
.field input:focus,.field select:focus,.field textarea:focus{border-color:#2563EB;box-shadow:0 0 0 3px #2563EB15;}
.field .err{color:#DC2626;font-size:11px;margin-top:4px;display:block;}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.divider{border-top:1px solid #E2E8F0;margin:18px 0;}
.sec-label{font-size:10px;letter-spacing:2px;color:#94A3B8;margin-bottom:12px;font-weight:700;display:block;}

/* CHECKBOXES */
.chk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:7px;margin-bottom:4px;}
.chk-item{display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid #E2E8F0;border-radius:8px;cursor:pointer;transition:all .2s;user-select:none;}
.chk-item.selected{background:#2563EB10;border-color:#2563EB;}
.chk-item .chk-icon{color:#CBD5E1;font-size:14px;}
.chk-item.selected .chk-icon{color:#2563EB;}
.chk-item span{font-size:12px;color:#64748B;}
.chk-item.selected span{color:#0F172A;}

/* GOALS */
.goals-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin:20px 0;}
.goal-card{background:#fff;border:1px solid #E2E8F0;border-radius:12px;padding:16px;cursor:pointer;display:flex;flex-direction:column;align-items:center;transition:all .2s;position:relative;text-align:center;}
.goal-card:hover{border-color:#2563EB;background:#2563EB06;}
.goal-card.selected{border-color:#2563EB;background:#2563EB08;}
.goal-card .goal-icon{font-size:26px;margin-bottom:8px;}
.goal-card .goal-label{font-size:12px;color:#64748B;}
.goal-card.selected .goal-label{color:#0F172A;font-weight:700;}
.goal-card .goal-check{position:absolute;top:8px;right:10px;color:#2563EB;font-weight:700;}

/* PROGRESS */
.progress-bar{flex:1;height:6px;background:#E2E8F0;border-radius:3px;}
.progress-fill{height:100%;background:#2563EB;border-radius:3px;transition:width .4s;}
.progress-row{display:flex;align-items:center;gap:12px;margin-bottom:18px;}
.progress-label{color:#2563EB;font-size:12px;font-weight:700;min-width:52px;text-align:right;}
.dim-tabs{display:flex;gap:5px;margin-bottom:18px;flex-wrap:wrap;}
.dim-tab{font-size:10px;padding:3px 8px;border-radius:10px;border:1px solid #E2E8F0;background:#F8FAFC;color:#CBD5E1;}
.dim-tab.active{background:var(--dc)15;border-color:var(--dc);color:var(--dc);}

/* QUESTION CARD */
.q-card{background:#fff;border:1px solid #E2E8F0;border-radius:14px;padding:26px 22px;margin-bottom:20px;box-shadow:0 2px 8px rgba(0,0,0,0.05);}
.q-dim{display:flex;align-items:center;gap:6px;margin-bottom:12px;}
.q-dim-label{font-size:10px;letter-spacing:2px;font-weight:700;}
.q-text{font-size:19px;font-weight:700;color:#0F172A;line-height:1.5;margin-bottom:14px;}
.q-hint{background:#EFF6FF;border:1px solid #BFDBFE;border-radius:8px;padding:10px 14px;font-size:12px;color:#3B82F6;line-height:1.6;margin-bottom:4px;}
.choice-list{display:flex;flex-direction:column;gap:8px;margin-top:18px;}
.choice-btn{border:1px solid #E2E8F0;border-radius:10px;padding:12px 14px;cursor:pointer;display:flex;align-items:center;gap:12px;text-align:left;font-size:13px;transition:all .2s;width:100%;background:#fff;font-family:inherit;}
.choice-btn:hover{border-color:#2563EB;background:#2563EB06;}
.choice-btn.selected{border-color:#2563EB;background:#2563EB10;color:#0F172A;}
.choice-letter{width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;background:#F1F5F9;color:#94A3B8;}
.choice-btn.selected .choice-letter{background:#2563EB;color:#fff;}
.yn-btns{display:flex;gap:12px;margin-top:20px;}
.yn-btn{flex:1;border:2px solid #E2E8F0;border-radius:10px;padding:15px 0;cursor:pointer;font-size:15px;font-weight:700;transition:all .2s;background:#fff;font-family:inherit;}
.yn-btn.yes.selected{border-color:#16A34A;background:#F0FDF4;color:#16A34A;}
.yn-btn.no.selected{border-color:#DC2626;background:#FEF2F2;color:#DC2626;}
.multi-hint{color:#94A3B8;font-size:11px;margin-top:4px;}
.text-answer{width:100%;border:1px solid #E2E8F0;border-radius:8px;padding:10px 12px;font-size:13px;font-family:inherit;resize:vertical;min-height:80px;margin-top:18px;outline:none;}
.text-answer:focus{border-color:#2563EB;box-shadow:0 0 0 3px #2563EB15;}

/* NAV BTNS */
.q-nav{display:flex;gap:12px;justify-content:space-between;flex-wrap:wrap;}

/* REPORT */
.report-hero{display:flex;justify-content:space-between;align-items:center;background:#F8FAFC;border:1px solid #E2E8F0;border-radius:16px;padding:28px 32px;margin-bottom:20px;flex-wrap:wrap;gap:16px;}
.report-meta{font-size:10px;letter-spacing:3px;color:#94A3B8;margin-bottom:6px;}
.report-company{font-size:26px;font-weight:800;color:#0F172A;margin-bottom:4px;}
.report-sub{color:#64748B;font-size:13px;margin-bottom:14px;}
.maturity-badge{border:1px solid;border-radius:8px;padding:6px 16px;font-size:12px;font-weight:700;display:inline-block;}
.maturity-msg{color:#64748B;font-size:13px;line-height:1.7;max-width:400px;margin-top:10px;}
.charts-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
.chart-card{background:#fff;border:1px solid #E2E8F0;border-radius:12px;padding:18px 14px;}
.chart-title{font-size:12px;color:#94A3B8;margin-bottom:10px;font-weight:600;}
.chart-desc{font-size:11px;color:#94A3B8;line-height:1.6;margin-top:10px;padding-top:10px;border-top:1px solid #E2E8F0;font-style:italic;}
.dim-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin-bottom:16px;}
.dim-card{background:#fff;border:1px solid #E2E8F0;border-radius:10px;padding:13px;}
.dim-name{font-size:11px;font-weight:600;}
.dim-score{font-size:13px;font-weight:800;}
.dim-bar-bg{background:#E2E8F0;border-radius:3px;height:5px;margin:5px 0 3px;}
.dim-bar-fill{height:100%;border-radius:3px;}
.dim-mat{font-size:10px;}
.gap-card{border-left:3px solid #DC2626;background:#FEF2F2;border-radius:0 8px 8px 0;padding:14px 16px;margin-bottom:10px;}
.gap-title{font-weight:700;color:#0F172A;margin-bottom:4px;font-size:14px;}
.gap-detail{color:#64748B;font-size:13px;line-height:1.7;}
.str-card{border-left:3px solid #16A34A;background:#F0FDF4;border-radius:0 8px 8px 0;padding:14px 16px;margin-bottom:10px;}
.phase-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.phase-card{background:#F8FAFC;border-radius:10px;padding:16px;}
.phase-label{border-radius:6px;padding:4px 10px;font-size:11px;font-weight:700;display:inline-block;margin-bottom:8px;}
.phase-focus{color:#64748B;font-size:11px;margin-bottom:10px;font-style:italic;line-height:1.5;}
.phase-step{display:flex;gap:6px;color:#475569;font-size:12px;line-height:1.5;margin-bottom:6px;}
.qw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;}
.qw-card{background:#F8FAFC;border:1px solid #E2E8F0;border-radius:10px;padding:18px;}
.qw-title{font-weight:700;font-size:13px;color:#0F172A;line-height:1.4;}
.qw-impact{border-radius:5px;padding:2px 8px;font-size:11px;font-weight:700;float:right;}
.qw-desc{color:#64748B;font-size:12px;line-height:1.6;margin:8px 0;}
.qw-meta{color:#94A3B8;font-size:11px;}
.cta-box{background:#EFF6FF;border:1px solid #2563EB33;border-radius:14px;padding:28px;text-align:center;margin-bottom:16px;}
.cta-title{font-size:19px;font-weight:800;color:#0F172A;margin:12px 0 8px;}
.upsell-box{border:1px solid #7C3AED33;border-radius:14px;padding:22px;margin-bottom:16px;display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;}
.disclaimer{border-top:1px solid #E2E8F0;margin-top:28px;padding-top:16px;text-align:center;color:#94A3B8;font-size:11px;line-height:1.7;max-width:680px;margin-left:auto;margin-right:auto;}
.dev-gap{border-left:4px solid #DC2626;background:#FEF2F2;border:1px solid #FECACA;border-radius:14px;padding:16px 20px;margin-bottom:16px;}

/* ADMIN */
.admin-layout{display:flex;height:calc(100vh - 57px);overflow:hidden;}
.admin-list{width:300px;flex-shrink:0;border-right:1px solid #E2E8F0;display:flex;flex-direction:column;background:#fff;overflow:hidden;}
.admin-list-scroll{flex:1;overflow-y:auto;padding:8px;}
.admin-detail{flex:1;overflow-y:auto;background:#F8FAFC;}
.admin-detail-empty{flex:1;display:flex;align-items:center;justify-content:center;color:#94A3B8;font-size:13px;}
.sub-card{border-radius:0 10px 10px 0;padding:12px 14px;margin-bottom:6px;cursor:pointer;transition:all .2s;border:1px solid #E2E8F0;}
.sub-card:hover{background:#2563EB06;}
.sub-card.selected{background:#2563EB08;border-color:#2563EB;}
.sub-company{font-size:13px;font-weight:700;color:#0F172A;margin-bottom:2px;}
.sub-meta{font-size:10px;color:#94A3B8;}
.sub-score{font-size:18px;font-weight:800;text-align:right;}
.mini-bars{display:flex;gap:2px;margin-top:6px;}
.mini-bar-bg{flex:1;height:3px;background:#E2E8F0;border-radius:2px;}
.mini-bar-fill{height:100%;border-radius:2px;}
.detail-hdr{display:flex;justify-content:space-between;padding:14px 20px;border-bottom:1px solid #E2E8F0;position:sticky;top:0;background:#fff;z-index:10;flex-wrap:wrap;gap:8px;}
.detail-body{padding:16px 20px;}
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;margin-bottom:4px;}
.info-item p:first-child{color:#94A3B8;font-size:9px;letter-spacing:1px;}
.info-item p:last-child{color:#0F172A;font-size:11px;font-weight:500;}
.ans-item{margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid #F1F5F9;}
.ans-q{color:#374151;font-size:12px;font-weight:600;margin-bottom:2px;}
.ans-a{color:#64748B;font-size:12px;}
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin-bottom:20px;}
.kpi-card{background:#fff;border:1px solid #E2E8F0;border-radius:12px;padding:16px 18px;}
.kpi-label{color:#94A3B8;font-size:10px;letter-spacing:1px;margin-bottom:6px;}
.kpi-val{font-size:26px;font-weight:800;}
.analytics-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
.analytics-card{background:#fff;border:1px solid #E2E8F0;border-radius:12px;padding:18px;}
.analytics-title{color:#64748B;font-size:12px;font-weight:600;margin-bottom:14px;letter-spacing:.5px;}
.bar-row{margin-bottom:10px;}
.bar-label{display:flex;justify-content:space-between;margin-bottom:3px;font-size:12px;}
.bar-bg{background:#E2E8F0;border-radius:3px;height:5px;}
.bar-fill{height:100%;border-radius:3px;}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;z-index:300;}
.modal{background:#fff;border-radius:14px;padding:28px;width:320px;box-shadow:0 20px 60px rgba(0,0,0,.15);}
.admin-info{background:#EFF6FF;border:1px solid #BFDBFE;border-radius:8px;padding:12px 16px;font-size:12px;color:#3B82F6;margin-bottom:10px;line-height:1.6;}

/* TABS */
.tabs{display:flex;border-bottom:1px solid #E2E8F0;background:#fff;padding:0 16px;}
.tab-btn{padding:12px 16px;font-size:13px;font-weight:600;background:transparent;border:none;border-bottom:2px solid transparent;color:#64748B;cursor:pointer;font-family:inherit;}
.tab-btn.active{color:#2563EB;border-bottom-color:#2563EB;}

/* SVG RING */
.score-ring{flex-shrink:0;}

/* CONSENT BOX */
.consent-box{background:#F8FAFC;border:1px solid #E2E8F0;border-radius:10px;padding:16px;}
.consent-label{display:flex;align-items:flex-start;gap:10px;cursor:pointer;margin-top:10px;}
.consent-label input{margin-top:2px;accent-color:#2563EB;width:15px;height:15px;flex-shrink:0;}
.consent-label span{font-size:13px;color:#0F172A;font-weight:600;}

/* INFO BOX */
.info-box{background:#EFF6FF;border:1px solid #BFDBFE;border-radius:10px;padding:14px 18px;margin-bottom:20px;}
.info-box-title{color:#2563EB;font-weight:700;font-size:14px;margin-bottom:4px;}
.info-box-text{color:#3B82F6;font-size:13px;line-height:1.6;}

/* SPINNER */
.spinner{width:32px;height:32px;border:3px solid #E2E8F0;border-top-color:#2563EB;border-radius:50%;animation:spin .8s linear infinite;margin:0 auto;}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
.fade-in{animation:fadeIn .3s ease;}
.hidden{display:none!important;}

/* TOAST */
.toast{position:fixed;bottom:24px;right:24px;background:#0F172A;color:#fff;padding:12px 20px;border-radius:10px;font-size:13px;z-index:999;animation:fadeIn .3s ease;}

/* RESPONSIVE */
@media(max-width:640px){
  .grid2{grid-template-columns:1fr;}
  .charts-row{grid-template-columns:1fr;}
  .phase-grid{grid-template-columns:1fr;}
  .analytics-grid{grid-template-columns:1fr;}
  .admin-layout{flex-direction:column;height:auto;}
  .admin-list{width:100%;height:300px;}
  .header{padding:12px 16px;}
  .wrap,.wrap-wide{padding:20px 14px;}
  .report-hero{padding:20px;}
  h1{font-size:20px!important;}
}

@media print{
  .header,.no-print{display:none!important;}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  .fade-in{animation:none!important;}
  body{padding:0;}
  .wrap-wide{max-width:100%;padding:10px;}
}
