/* StudiAI 6.5 – kundenfreundliches Dashboard */

.dashboard-customer-v65{
  width:min(1500px,calc(100% - 34px));
  max-width:1500px;
  margin:0 auto;
  padding:24px 0 70px
}
.customer-dashboard-hero{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(340px,.65fr);
  gap:16px
}
.customer-welcome-card,
.customer-next-card,
.customer-onboarding-card,
.customer-rail-card,
.customer-section{
  border:1px solid var(--line);
  background:var(--card);
  box-shadow:var(--shadow-soft)
}
.customer-welcome-card{
  position:relative;
  overflow:hidden;
  min-height:282px;
  padding:30px;
  border-radius:24px;
  display:flex;
  justify-content:space-between;
  gap:28px;
  background:
    radial-gradient(circle at 88% 10%,rgba(34,211,238,.14),transparent 30%),
    radial-gradient(circle at 8% 110%,rgba(99,91,232,.18),transparent 35%),
    linear-gradient(145deg,color-mix(in srgb,var(--card) 92%,#3478f6 8%),var(--card))
}
.customer-welcome-card::after{
  content:"";
  position:absolute;
  right:-60px;
  bottom:-95px;
  width:350px;
  height:250px;
  background:url("brand/studiai-wave.svg") center/cover no-repeat;
  opacity:.22;
  pointer-events:none
}
.customer-welcome-copy{
  position:relative;
  z-index:1;
  max-width:760px
}
.customer-welcome-card h1{
  margin:8px 0 11px;
  color:var(--ink);
  font-size:38px;
  line-height:1.08;
  letter-spacing:-1px
}
.customer-welcome-card p{
  max-width:720px;
  margin:0;
  color:var(--muted);
  font-size:15px;
  line-height:1.65
}
.customer-welcome-actions{
  display:flex;
  gap:9px;
  flex-wrap:wrap;
  margin-top:23px
}
.customer-hero-mini-stats{
  position:relative;
  z-index:1;
  align-self:center;
  width:190px;
  display:grid;
  gap:8px
}
.customer-hero-mini-stats>div{
  padding:12px 14px;
  border:1px solid color-mix(in srgb,var(--line) 76%,transparent);
  border-radius:15px;
  background:color-mix(in srgb,var(--card) 80%,transparent);
  backdrop-filter:blur(10px)
}
.customer-hero-mini-stats strong{
  display:block;
  color:var(--ink);
  font-size:20px
}
.customer-hero-mini-stats span{
  display:block;
  margin-top:2px;
  color:var(--muted);
  font-size:10px
}

.customer-next-card{
  position:relative;
  overflow:hidden;
  min-height:282px;
  padding:24px;
  border-radius:24px;
  display:flex;
  flex-direction:column
}
.customer-next-card::after{
  content:"";
  position:absolute;
  width:170px;
  height:170px;
  border-radius:50%;
  right:-55px;
  top:-65px;
  background:rgba(47,117,255,.08)
}
.customer-next-card>div,
.customer-next-card>a{position:relative;z-index:1}
.customer-next-icon{
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  margin-bottom:17px;
  border-radius:17px;
  background:linear-gradient(135deg,#3478f6,#6559e8);
  color:#fff
}
.customer-next-icon .ui-icon{width:27px;height:27px}
.customer-next-card h2{
  margin:6px 0 8px;
  color:var(--ink);
  font-size:24px;
  line-height:1.2
}
.customer-next-card p{
  margin:0 0 19px;
  color:var(--muted);
  font-size:12.5px;
  line-height:1.55
}
.customer-next-card>a{margin-top:auto}
.customer-next-due .customer-next-icon{background:linear-gradient(135deg,#f97316,#ef4444)}
.customer-next-assignment .customer-next-icon{background:linear-gradient(135deg,#8b5cf6,#ec4899)}
.customer-next-continue .customer-next-icon{background:linear-gradient(135deg,#0ea5e9,#2563eb)}
.customer-next-create .customer-next-icon{background:linear-gradient(135deg,#22c55e,#0ea5e9)}

.customer-overview-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-top:15px
}
.customer-overview-card{
  min-height:104px;
  display:flex;
  align-items:center;
  gap:13px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--card);
  box-shadow:var(--shadow-soft)
}
.customer-overview-icon{
  width:43px;
  height:43px;
  flex:0 0 43px;
  display:grid;
  place-items:center;
  border-radius:13px;
  background:color-mix(in srgb,var(--blue) 10%,var(--card));
  color:var(--blue)
}
.customer-overview-icon .ui-icon{width:21px;height:21px}
.customer-overview-card small,
.customer-overview-card span{
  display:block;
  color:var(--muted);
  font-size:10px
}
.customer-overview-card strong{
  display:block;
  margin:2px 0;
  color:var(--ink);
  font-size:21px;
  line-height:1.1
}

.customer-onboarding-card{
  position:relative;
  margin-top:16px;
  padding:22px;
  border-radius:22px
}
.customer-onboarding-card.is-hidden{display:none}
.customer-onboarding-close{
  position:absolute;
  top:14px;
  right:14px;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--card-soft);
  color:var(--muted);
  cursor:pointer
}
.customer-onboarding-close .ui-icon{width:17px;height:17px}
.customer-onboarding-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  padding-right:45px
}
.customer-onboarding-head h2{
  margin:5px 0;
  color:var(--ink);
  font-size:23px
}
.customer-onboarding-head p{
  margin:0;
  color:var(--muted)
}
.customer-onboarding-progress{
  width:190px;
  text-align:right
}
.customer-onboarding-progress strong{
  display:block;
  margin-bottom:7px;
  color:var(--ink);
  font-size:20px
}
.customer-onboarding-steps{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:9px;
  margin-top:18px
}
.customer-onboarding-step{
  display:grid;
  grid-template-columns:35px 1fr 18px;
  align-items:center;
  gap:9px;
  min-height:75px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:15px;
  background:var(--card-soft)
}
.customer-onboarding-step:hover{
  border-color:color-mix(in srgb,var(--blue) 46%,var(--line));
  transform:translateY(-1px)
}
.customer-onboarding-step.done{
  background:color-mix(in srgb,#22c55e 7%,var(--card))
}
.customer-step-number{
  width:35px;
  height:35px;
  display:grid;
  place-items:center;
  border-radius:11px;
  background:color-mix(in srgb,var(--blue) 11%,var(--card));
  color:var(--blue);
  font-weight:850
}
.customer-onboarding-step.done .customer-step-number{
  background:rgba(34,197,94,.13);
  color:#16a34a
}
.customer-step-number .ui-icon{width:18px;height:18px}
.customer-onboarding-step strong{
  display:block;
  color:var(--ink);
  font-size:11.5px
}
.customer-onboarding-step small{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:9.5px;
  line-height:1.35
}
.customer-onboarding-step>.ui-icon{
  width:17px;
  color:var(--muted)
}

.customer-action-section{margin-top:24px}
.customer-action-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:11px
}
.customer-action-card{
  position:relative;
  display:grid;
  grid-template-columns:46px 1fr 20px;
  align-items:center;
  gap:12px;
  min-height:100px;
  padding:17px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--card);
  box-shadow:var(--shadow-soft)
}
.customer-action-card:hover{
  border-color:color-mix(in srgb,var(--action-color,#3478f6) 45%,var(--line));
  transform:translateY(-2px);
  box-shadow:0 16px 34px rgba(17,43,78,.12)
}
.customer-action-card>span{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:color-mix(in srgb,var(--action-color,#3478f6) 12%,var(--card));
  color:var(--action-color,#3478f6)
}
.customer-action-card>span .ui-icon{width:23px;height:23px}
.customer-action-card strong{
  display:block;
  color:var(--ink);
  font-size:13px
}
.customer-action-card small{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:10px;
  line-height:1.4
}
.customer-action-card>.ui-icon{
  width:18px;
  color:var(--muted)
}
.action-upload{--action-color:#0ea5e9}
.action-ai{--action-color:#8b5cf6}
.action-practice{--action-color:#22c55e}
.action-exam{--action-color:#f97316}

.customer-dashboard-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 330px;
  gap:16px;
  margin-top:24px
}
.customer-dashboard-main,
.customer-dashboard-rail{min-width:0}
.customer-dashboard-main{
  display:grid;
  align-content:start;
  gap:18px
}
.customer-dashboard-rail{
  display:grid;
  align-content:start;
  gap:14px
}
.customer-section{
  padding:21px;
  border-radius:21px
}
.customer-section .section-title{margin-bottom:15px}

.customer-course-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px
}
.customer-course-card{
  position:relative;
  overflow:hidden;
  min-height:248px;
  display:flex;
  flex-direction:column;
  padding:18px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--card-soft)
}
.customer-course-card::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:var(--course-color,#3478f6)
}
.customer-course-card:hover{
  border-color:color-mix(in srgb,var(--course-color,#3478f6) 40%,var(--line));
  transform:translateY(-2px)
}
.customer-course-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:9px
}
.customer-course-code{
  color:var(--course-color,#3478f6);
  font-size:10px;
  font-weight:900;
  letter-spacing:.06em
}
.customer-course-card h3{
  margin:12px 0 7px;
  color:var(--ink);
  font-size:17px;
  line-height:1.3
}
.customer-course-card>p{
  margin:0;
  min-height:45px;
  color:var(--muted);
  font-size:11px;
  line-height:1.5
}
.customer-course-progress{
  margin-top:auto;
  padding-top:15px
}
.customer-course-progress>div:first-child{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-bottom:7px;
  color:var(--muted);
  font-size:10px
}
.customer-course-progress strong{color:var(--ink)}
.customer-course-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:13px
}
.customer-course-footer>span{
  color:var(--muted);
  font-size:10px
}

.customer-empty-state{
  display:grid;
  grid-template-columns:56px 1fr auto;
  align-items:center;
  gap:15px;
  padding:20px;
  border:1px dashed var(--line-strong);
  border-radius:17px;
  background:var(--card-soft)
}
.customer-empty-icon{
  width:56px;
  height:56px;
  display:grid;
  place-items:center;
  border-radius:17px;
  background:color-mix(in srgb,var(--blue) 10%,var(--card));
  color:var(--blue)
}
.customer-empty-icon .ui-icon{width:27px;height:27px}
.customer-empty-state h3{margin:0;color:var(--ink)}
.customer-empty-state p{margin:5px 0 0;color:var(--muted);font-size:11px}
.customer-empty-state>div:last-child{display:flex;gap:8px;flex-wrap:wrap}

.customer-assignment-list{display:grid;gap:8px}
.customer-assignment-row{
  display:grid;
  grid-template-columns:43px minmax(0,1fr) 90px auto;
  align-items:center;
  gap:12px;
  padding:13px;
  border:1px solid var(--line);
  border-radius:15px;
  background:var(--card-soft)
}
.customer-assignment-row.urgent{
  border-color:rgba(249,115,22,.35);
  background:color-mix(in srgb,#f97316 6%,var(--card))
}
.customer-assignment-icon{
  width:43px;
  height:43px;
  display:grid;
  place-items:center;
  border-radius:13px;
  background:color-mix(in srgb,#8b5cf6 10%,var(--card));
  color:#8b5cf6
}
.customer-assignment-icon .ui-icon{width:21px;height:21px}
.customer-assignment-row h3{
  margin:3px 0;
  color:var(--ink);
  font-size:14px
}
.customer-assignment-row p{
  margin:0;
  color:var(--muted);
  font-size:10px
}
.customer-assignment-date{
  text-align:right
}
.customer-assignment-date small{
  display:block;
  color:var(--muted);
  font-size:9px
}
.customer-assignment-date strong{
  color:var(--ink);
  font-size:11px
}

.customer-recommendation-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px
}
.customer-recommendation-card{
  position:relative;
  min-height:205px;
  display:flex;
  flex-direction:column;
  padding:16px;
  border:1px solid var(--line);
  border-radius:17px;
  background:var(--card-soft)
}
.customer-recommendation-card::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:3px;
  background:var(--recommend-color,#3478f6)
}
.customer-recommendation-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px
}
.customer-recommendation-head>strong{
  color:#f97316;
  font-size:10px
}
.customer-recommendation-card h3{
  margin:12px 0 7px;
  color:var(--ink);
  font-size:15px
}
.customer-recommendation-card p{
  margin:0 0 14px;
  color:var(--muted);
  font-size:10.5px;
  line-height:1.45
}
.customer-recommendation-card .btn{margin-top:auto;align-self:flex-start}
.customer-subject-list{grid-template-columns:repeat(2,minmax(0,1fr))}

.customer-rail-card{
  padding:18px;
  border-radius:19px
}
.customer-rail-card h3{
  margin:0;
  color:var(--ink);
  font-size:16px
}
.customer-rail-card p{
  color:var(--muted);
  font-size:11px;
  line-height:1.5
}
.customer-week-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px
}
.customer-week-head h3{margin-top:4px}
.customer-week-ring{
  --week-progress:0;
  width:69px;
  height:69px;
  flex:0 0 69px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:conic-gradient(#3478f6 calc(var(--week-progress)*1%),rgba(126,153,195,.15) 0);
  position:relative
}
.customer-week-ring::after{
  content:"";
  position:absolute;
  inset:7px;
  border-radius:50%;
  background:var(--card)
}
.customer-week-ring strong{
  position:relative;
  z-index:1;
  color:var(--ink);
  font-size:14px
}
.customer-week-card>.progress{margin-top:14px}
.customer-today-list{
  display:grid;
  gap:7px;
  margin-top:12px
}
.customer-today-list>a{
  display:grid;
  grid-template-columns:38px 1fr 17px;
  align-items:center;
  gap:10px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--card-soft)
}
.customer-today-list>a:hover{
  border-color:color-mix(in srgb,var(--blue) 40%,var(--line))
}
.customer-today-list>a>span{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:11px;
  background:color-mix(in srgb,var(--blue) 9%,var(--card));
  color:var(--blue)
}
.customer-today-list>a>span .ui-icon{width:19px;height:19px}
.customer-today-list strong{
  display:block;
  color:var(--ink);
  font-size:11px
}
.customer-today-list small{
  display:block;
  margin-top:2px;
  color:var(--muted);
  font-size:9px
}
.customer-today-list>a>.ui-icon{
  width:16px;
  color:var(--muted)
}
.customer-plan-card .button-stack{margin-top:14px}
.customer-help-card{
  text-align:center;
  background:
    radial-gradient(circle at 50% -10%,rgba(99,91,232,.13),transparent 38%),
    var(--card)
}
.customer-help-icon{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  margin:0 auto 12px;
  border-radius:15px;
  background:linear-gradient(135deg,#3478f6,#6559e8);
  color:#fff
}
.customer-help-icon .ui-icon{width:24px;height:24px}

:root[data-theme="dark"] .customer-welcome-card{
  background:
    radial-gradient(circle at 88% 10%,rgba(34,211,238,.10),transparent 30%),
    radial-gradient(circle at 8% 110%,rgba(99,91,232,.15),transparent 35%),
    linear-gradient(145deg,#102342,#0a172b)
}

@media(max-width:1260px){
  .customer-dashboard-hero{grid-template-columns:minmax(0,1.2fr) minmax(310px,.7fr)}
  .customer-action-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .customer-onboarding-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:1050px){
  .dashboard-customer-v65{width:calc(100% - 24px)}
  .customer-dashboard-hero{grid-template-columns:1fr}
  .customer-next-card{min-height:auto}
  .customer-dashboard-layout{grid-template-columns:1fr}
  .customer-dashboard-rail{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .dashboard-customer-v65{width:calc(100% - 18px);padding-top:14px}
  .customer-welcome-card{display:grid;min-height:auto;padding:21px}
  .customer-welcome-card h1{font-size:29px}
  .customer-hero-mini-stats{width:100%;grid-template-columns:repeat(3,minmax(0,1fr))}
  .customer-hero-mini-stats>div{text-align:center;padding:10px 7px}
  .customer-hero-mini-stats strong{font-size:17px}
  .customer-overview-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .customer-onboarding-head{display:grid;padding-right:38px}
  .customer-onboarding-progress{width:100%;text-align:left}
  .customer-onboarding-steps{grid-template-columns:1fr}
  .customer-action-grid{grid-template-columns:1fr}
  .customer-course-grid{grid-template-columns:1fr}
  .customer-assignment-row{grid-template-columns:43px 1fr auto}
  .customer-assignment-date{grid-column:2;text-align:left}
  .customer-assignment-row>.btn{grid-column:3;grid-row:1/3}
  .customer-recommendation-grid{grid-template-columns:1fr}
  .customer-subject-list{grid-template-columns:1fr}
  .customer-dashboard-rail{grid-template-columns:1fr}
  .customer-empty-state{grid-template-columns:52px 1fr}
  .customer-empty-state>div:last-child{grid-column:1/3}
}
@media(max-width:430px){
  .customer-overview-grid{grid-template-columns:1fr}
  .customer-welcome-actions{display:grid}
  .customer-hero-mini-stats{grid-template-columns:1fr}
  .customer-assignment-row{grid-template-columns:40px 1fr}
  .customer-assignment-date{grid-column:2}
  .customer-assignment-row>.btn{grid-column:1/3;grid-row:auto}
}