*{margin:0;padding:0;box-sizing:border-box}
:root{
  --pri:#6400F2;--pri-d:#5200d4;
  --white:#FFFFFF;--txt:#08152C;--txt2:#6B7886;--txt3:#3B3B3B;
  --gray-border:#D6D6D6;--gray-inactive:#656565;--border-card:#DFE1E3;
  --bg-page:#F4F5F6;--bg-lightest:#F9FAFB;
  --success:#4CAF50;--warning:#F59E0B;--danger:#EF4444;
  --seg-bg:#F0F0F0;--seg-active:#1B1B1B;
  --sidebar-w:18.47vw;
}

/* Scrollbar */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:rgba(0,0,0,0.02)}
::-webkit-scrollbar-thumb{background:rgba(100,0,242,0.3);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:rgba(100,0,242,0.5)}

body{
  font-family:'Open Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:var(--bg-page);color:var(--txt);
  height:100vh;overflow:hidden;
}

/* ═══════ MOBILE HEADER ═══════ */
.mobile-header{
  display:none;position:fixed;top:0;left:0;right:0;height:56px;
  background:var(--white);border-bottom:1px solid var(--gray-border);
  z-index:50;align-items:center;padding:0 1rem;gap:0.75rem;
}
.mobile-header__hamburger{
  display:flex;align-items:center;justify-content:center;
  background:none;border:none;padding:0.5rem;cursor:pointer;
  color:var(--txt);border-radius:0.375rem;
}
.mobile-header__hamburger:hover{background:var(--bg-lightest)}
.mobile-header__logo-img{
  height:28px;width:auto;object-fit:contain;
}

/* ═══════ BACKDROP ═══════ */
.backdrop{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,0.4);z-index:99;
}
.backdrop--visible{display:block;animation:fadeIn 200ms ease-out}

/* ═══════ SIDEBAR ═══════ */
.sidebar{
  display:flex;flex-direction:column;width:var(--sidebar-w);height:100vh;
  background:var(--white);border-right:1px solid var(--gray-border);
  position:fixed;top:0;left:0;z-index:100;
  transition:transform 300ms ease-out;overflow-y:auto;
}
.sidebar__logo-area{
  display:flex;flex-direction:column;align-items:center;
  padding:1.67vw 1.67vw 1.11vw;position:relative;
}
.sidebar__logo-img{
  height:2.78vw;width:auto;object-fit:contain;
}
.sidebar__badge{
  display:inline-flex;align-items:center;justify-content:center;
  margin-top:0.56vw;padding:0.208vw 1.11vw;
  border:1px solid var(--pri);color:var(--pri);
  font-family:'Poppins',sans-serif;font-size:0.83vw;font-weight:400;
  border-radius:1000px;letter-spacing:0.1em;
}
.sidebar__close{
  display:none;position:absolute;top:12px;right:12px;
  background:none;border:none;padding:6px;cursor:pointer;
  color:var(--txt);border-radius:6px;
}
.sidebar__close:hover{background:var(--bg-lightest)}
.sidebar__nav{display:flex;flex-direction:column;gap:2px;padding:1.67vw 0 0}
.sidebar__row{display:flex;align-items:center;position:relative}
.sidebar__indicator{
  width:0.556vw;height:100%;position:absolute;left:0;top:0;
  border-radius:0 0.556vw 0.556vw 0;background:transparent;
  transition:background-color 150ms ease-out;
}
.sidebar__row--active .sidebar__indicator{background:var(--pri)}
.sidebar__link{
  display:flex;align-items:center;gap:0.69vw;
  padding:0.83vw 1.11vw;padding-left:2.08vw;
  border-radius:0.833vw;color:var(--gray-inactive);
  text-decoration:none;font-family:'Open Sans',sans-serif;
  font-size:0.97vw;font-weight:400;
  transition:all 150ms ease-out;cursor:pointer;
  width:16.04vw;margin:0 auto;
}
.sidebar__link:hover:not(.sidebar__link--active){background:var(--bg-lightest)}
.sidebar__link--active{
  background:var(--pri);color:var(--white);
  font-family:'Poppins',sans-serif;
}
.sidebar__link--active .sidebar__icon{background-color:var(--white)}
.sidebar__link--active .sidebar__count{background:rgba(255,255,255,0.2);color:var(--white)}
.sidebar__icon{
  display:block;width:1.39vw;height:1.39vw;flex-shrink:0;
  background-color:var(--gray-inactive);
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  transition:background-color 150ms ease-out;
}
.icon-grid{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='8' height='8' rx='2' fill='%23000'/%3E%3Crect x='13' y='3' width='8' height='8' rx='2' fill='%23000'/%3E%3Crect x='3' y='13' width='8' height='8' rx='2' fill='%23000'/%3E%3Crect x='13' y='13' width='8' height='8' rx='2' fill='%23000'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='8' height='8' rx='2' fill='%23000'/%3E%3Crect x='13' y='3' width='8' height='8' rx='2' fill='%23000'/%3E%3Crect x='3' y='13' width='8' height='8' rx='2' fill='%23000'/%3E%3Crect x='13' y='13' width='8' height='8' rx='2' fill='%23000'/%3E%3C/svg%3E")}
.icon-lock{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='11' width='14' height='11' rx='2' fill='%23000'/%3E%3Cpath d='M8 11V7a4 4 0 018 0v4' fill='none' stroke='%23000' stroke-width='2.5'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='11' width='14' height='11' rx='2' fill='%23000'/%3E%3Cpath d='M8 11V7a4 4 0 018 0v4' fill='none' stroke='%23000' stroke-width='2.5'/%3E%3C/svg%3E")}
.icon-user{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4' fill='%23000'/%3E%3Cpath d='M20 21c0-4.4-3.6-7-8-7s-8 2.6-8 7' fill='%23000'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4' fill='%23000'/%3E%3Cpath d='M20 21c0-4.4-3.6-7-8-7s-8 2.6-8 7' fill='%23000'/%3E%3C/svg%3E")}
.icon-store{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 7l1.5-4h13L20 7H4zM4 7v14h16V7M9 21v-7h6v7'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 7l1.5-4h13L20 7H4zM4 7v14h16V7M9 21v-7h6v7'/%3E%3C/svg%3E")}
.icon-shield{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2L4 6v5c0 5.55 3.84 10.74 8 12 4.16-1.26 8-6.45 8-12V6l-8-4z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2L4 6v5c0 5.55 3.84 10.74 8 12 4.16-1.26 8-6.45 8-12V6l-8-4z'/%3E%3C/svg%3E")}
.icon-wallet{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2' y='6' width='20' height='14' rx='2' fill='%23000'/%3E%3Ccircle cx='17' cy='13' r='1.5' fill='%23fff'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2' y='6' width='20' height='14' rx='2' fill='%23000'/%3E%3Ccircle cx='17' cy='13' r='1.5' fill='%23fff'/%3E%3C/svg%3E")}
.icon-bell{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2C8.7 2 6 4.7 6 8c0 6-3 8-3 8h18s-3-2-3-8c0-3.3-2.7-6-6-6zm-2 18h4c0 1.1-.9 2-2 2s-2-.9-2-2z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2C8.7 2 6 4.7 6 8c0 6-3 8-3 8h18s-3-2-3-8c0-3.3-2.7-6-6-6zm-2 18h4c0 1.1-.9 2-2 2s-2-.9-2-2z'/%3E%3C/svg%3E")}
.sidebar__label{flex:1;line-height:1.4}
.sidebar__count{
  font-family:'Poppins',sans-serif;font-size:0.69vw;font-weight:600;
  min-width:1.39vw;height:1.39vw;display:flex;align-items:center;justify-content:center;
  border-radius:9999px;padding:0 0.35vw;
  background:var(--seg-bg);color:var(--txt);
}
.sidebar__separator{height:1px;background:var(--gray-border);margin:auto 0.83vw 0}
.sidebar__footer{
  padding:1.11vw 1.39vw;
  font-family:'Open Sans',sans-serif;font-size:0.83vw;color:var(--gray-inactive);
}
.sidebar__footer b{color:var(--txt)}
.sidebar__stats{display:flex;gap:0.83vw;flex-wrap:wrap;margin-top:0.42vw}
.sidebar__stat{display:flex;align-items:center;gap:0.28vw;font-size:0.764vw}
.sidebar__dot{width:0.556vw;height:0.556vw;border-radius:50%;flex-shrink:0}
.sidebar__dot--ok{background:var(--success)}
.sidebar__dot--partial{background:var(--warning)}
.sidebar__dot--no{background:var(--danger)}

/* ═══════ CONTENT ═══════ */
.content{
  margin-left:var(--sidebar-w);height:100vh;
  overflow-y:auto;background:var(--bg-page);padding:1.389vw;
  display:flex;flex-direction:column;
}
.content.no-scroll{overflow:hidden}

/* ═══════ SECTION HEADER ═══════ */
.section-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:1.389vw;gap:1.389vw;flex-shrink:0;
}
.section-header__left{display:flex;flex-direction:column;gap:0.278vw}
.section-header__title{
  font-family:'Poppins',sans-serif;font-size:1.667vw;font-weight:600;
  line-height:1.2;color:#000;
}
.section-header__subtitle{
  font-family:'Poppins',sans-serif;font-size:0.972vw;font-weight:400;
  color:var(--txt3);
}

/* ═══════ EXPORT BUTTON ═══════ */
.btn-export{
  display:inline-flex;align-items:center;justify-content:center;gap:0.56vw;
  padding:0 1.39vw;height:3.056vw;
  border:none;border-radius:1.111vw;
  background:var(--pri);color:var(--white);
  font-family:'Poppins',sans-serif;font-size:0.972vw;font-weight:500;
  cursor:pointer;transition:all 150ms ease-out;white-space:nowrap;
}
.btn-export:hover{background:var(--pri-d);transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,0.1)}
.btn-export:active{transform:translateY(0)}
.btn-export svg{flex-shrink:0}

/* ═══════ OVERVIEW GRID ═══════ */
.overview-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.389vw;
}
.ov-card{
  background:var(--white);border-radius:1.389vw;
  padding:1.389vw;cursor:pointer;
  transition:all 200ms ease-out;border:1px solid transparent;
}
.ov-card:hover{
  border-color:var(--gray-border);
  box-shadow:0 4px 12px rgba(0,0,0,0.06);
  transform:translateY(-2px);
}
.ov-card__title{
  font-family:'Poppins',sans-serif;font-size:1.111vw;font-weight:600;
  color:#000;margin-bottom:0.278vw;
}
.ov-card__pct{
  font-family:'Poppins',sans-serif;font-size:1.806vw;font-weight:600;
  color:#000;margin-bottom:0.556vw;
}
.ov-card__pct span{
  font-size:1.111vw;font-weight:400;color:var(--txt2);margin-left:0.278vw;
}
.ov-card__bar{
  height:0.417vw;background:rgba(0,0,0,0.08);
  border-radius:0.208vw;overflow:hidden;margin-bottom:0.833vw;
}
.ov-card__bar-fill{
  display:block;height:100%;border-radius:0.208vw;
  transition:width 600ms ease-out;
}
.ov-card__bar-fill--ok{background:var(--success)}
.ov-card__bar-fill--partial{background:var(--warning)}
.ov-card__bar-fill--full{background:var(--pri)}
.ov-card__nums{display:flex;gap:1.111vw;flex-wrap:wrap}
.ov-card__num{
  display:flex;align-items:center;gap:0.278vw;
  font-family:'Poppins',sans-serif;font-size:0.833vw;color:var(--txt2);
}
.ov-card__num b{color:var(--txt);font-weight:600}

/* ═══════ VIEW CONTROLS (Filters + Toggle) ═══════ */
.view-controls{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:1.111vw;gap:1.111vw;flex-shrink:0;
}
.view-toggle{
  display:flex;align-items:center;
  padding:0.208vw;border-radius:0.556vw;
  background:var(--seg-bg);gap:0.139vw;
}
.view-toggle__btn{
  display:flex;align-items:center;justify-content:center;
  width:2.222vw;height:2.222vw;border:none;border-radius:0.417vw;
  background:transparent;cursor:pointer;
  transition:all 150ms ease-out;color:var(--gray-inactive);
}
.view-toggle__btn:hover:not(.view-toggle__btn--active){background:rgba(0,0,0,0.04)}
.view-toggle__btn--active{background:var(--white);color:var(--txt);box-shadow:0 1px 3px rgba(0,0,0,0.08)}
.view-toggle__btn svg{width:1.111vw;height:1.111vw}

/* ═══════ FILTERS (Segment Tabs) ═══════ */
.filters{
  display:inline-flex;align-items:center;
  padding:0.208vw;border-radius:9999px;
  background:var(--seg-bg);gap:0.139vw;
}
.filters button{
  padding:0.556vw 1.111vw;border:none;border-radius:9999px;
  background:transparent;font-family:'Poppins',sans-serif;
  font-size:0.833vw;font-weight:400;color:var(--txt2);
  cursor:pointer;transition:all 150ms ease-out;white-space:nowrap;
}
.filters button:hover:not(.active){background:rgba(0,0,0,0.04)}
.filters button.active{
  background:var(--seg-active);color:var(--white);font-weight:600;
}

/* ═══════ COUNTER ═══════ */
.counter{
  font-family:'Open Sans',sans-serif;font-size:0.833vw;
  color:var(--txt2);margin-bottom:1.111vw;flex-shrink:0;
}

/* ═══════ USER STORY CARDS (List View) ═══════ */
.us{
  background:var(--white);border:1px solid var(--border-card);
  border-radius:0.833vw;margin-bottom:0.694vw;
  overflow:hidden;transition:border-color 200ms ease;
}
.us:hover{border-color:var(--gray-border)}
.us-head{
  display:flex;align-items:center;gap:0.694vw;
  padding:1.111vw;cursor:pointer;user-select:none;
  transition:background 150ms ease-out;
}
.us-head:hover{background:var(--bg-lightest)}
.us-head .st{width:0.556vw;height:0.556vw;border-radius:50%;flex-shrink:0}
.us-head .st.ok{background:var(--success)}
.us-head .st.partial{background:var(--warning)}
.us-head .st.no{background:var(--danger)}
.us-head .id{
  font-family:'Poppins',sans-serif;font-size:0.833vw;
  color:var(--pri);font-weight:600;min-width:8.33vw;
}
.us-head .title{
  font-family:'Open Sans',sans-serif;font-size:0.972vw;
  flex:1;color:var(--txt);
}
.us-head .tag{
  font-family:'Poppins',sans-serif;font-size:0.694vw;
  padding:0.208vw 0.694vw;border-radius:9999px;font-weight:600;
  white-space:nowrap;
}
.tag.ok{background:rgba(76,175,80,0.1);color:var(--success)}
.tag.partial{background:rgba(245,158,11,0.15);color:#92400E}
.tag.no{background:rgba(239,68,68,0.1);color:var(--danger)}
.us-head .arrow{
  font-size:0.69vw;color:var(--txt2);
  transition:transform 200ms ease-out;flex-shrink:0;
}
.us.open .arrow{transform:rotate(180deg)}
.us-body{
  display:none;padding:0 1.111vw 1.111vw;
  font-family:'Open Sans',sans-serif;font-size:0.972vw;
  line-height:1.7;color:var(--txt);
}
.us.open .us-body{display:block}
.us-body .role{color:var(--txt2);margin-bottom:0.694vw}
.us-body .role b{color:var(--txt);font-weight:600}
.us-body ul{padding-left:1.39vw;margin:0.417vw 0}
.us-body li{margin:0.208vw 0;font-size:0.903vw}
.us-body li.done::marker{content:'\2705 '}
.us-body li.todo::marker{content:'\274C '}
.us-body .files{
  margin-top:0.694vw;padding:0.694vw 0.833vw;
  background:var(--bg-lightest);border-radius:0.556vw;
  font-size:0.833vw;color:var(--txt2);
}
.us-body .files b{color:var(--txt);font-weight:600}
.us-body .files code{
  font-size:0.764vw;background:rgba(100,0,242,0.06);
  padding:0.139vw 0.417vw;border-radius:0.278vw;color:var(--pri);
  font-family:'SF Mono','Fira Code',Consolas,monospace;
}

/* ═══════ STEP VIEW ═══════ */
#step-view{
  display:flex;flex-direction:column;
  flex:1;min-height:0;
}
#step-card-container{
  flex:1;overflow-y:auto;padding:0.5vw 0;
}
#list-view{display:none}
.step-card{
  background:var(--white);border-radius:1.389vw;
  padding:2.222vw;max-width:55.56vw;margin:0 auto;
  box-shadow:0 1px 3px rgba(0,0,0,0.06);
}
.step-card__header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:1.111vw;
}
.step-card__id{
  font-family:'Poppins',sans-serif;font-size:0.972vw;
  font-weight:600;color:var(--pri);
  display:flex;align-items:center;gap:0.556vw;
}
.step-card__dot{width:0.694vw;height:0.694vw;border-radius:50%;flex-shrink:0}
.step-card__dot--ok{background:var(--success)}
.step-card__dot--partial{background:var(--warning)}
.step-card__dot--no{background:var(--danger)}
.step-card__tag{
  font-family:'Poppins',sans-serif;font-size:0.833vw;
  padding:0.278vw 0.833vw;border-radius:9999px;font-weight:600;
}
.step-card__title{
  font-family:'Poppins',sans-serif;font-size:1.389vw;font-weight:600;
  color:#000;margin-bottom:1.389vw;line-height:1.3;
}
.step-card__divider{
  height:1px;background:var(--border-card);margin-bottom:1.389vw;
}
.step-card__role{
  font-family:'Open Sans',sans-serif;font-size:1.042vw;
  line-height:1.7;color:var(--txt2);margin-bottom:1.667vw;
  padding:1.111vw;background:var(--bg-lightest);border-radius:0.833vw;
}
.step-card__role b{color:var(--txt);font-weight:600}
.step-card__section-title{
  font-family:'Poppins',sans-serif;font-size:1.042vw;font-weight:600;
  color:#000;margin-bottom:0.556vw;
  display:flex;align-items:center;justify-content:space-between;
}
.step-card__progress-text{
  font-family:'Poppins',sans-serif;font-size:0.833vw;font-weight:400;
  color:var(--txt2);
}
.step-card__progress-bar{
  height:0.347vw;background:rgba(0,0,0,0.08);
  border-radius:0.174vw;overflow:hidden;margin-bottom:1.111vw;
}
.step-card__progress-fill{
  height:100%;background:var(--success);border-radius:0.174vw;
  transition:width 400ms ease-out;
}
.step-card__criteria{
  list-style:none;margin-bottom:1.389vw;
}
.step-card__criterion{
  display:flex;align-items:flex-start;gap:0.833vw;
  padding:0.694vw 0;
  border-bottom:1px solid rgba(0,0,0,0.04);
  font-family:'Open Sans',sans-serif;font-size:0.972vw;
  line-height:1.5;color:var(--txt);
}
.step-card__criterion:last-child{border-bottom:none}
.step-card__check{
  width:1.389vw;height:1.389vw;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:0.694vw;color:var(--white);margin-top:0.139vw;
}
.step-card__check--done{background:var(--success)}
.step-card__check--todo{background:var(--danger)}
.step-card__files{
  padding:1.111vw;background:var(--bg-lightest);border-radius:0.833vw;
}
.step-card__files-title{
  font-family:'Poppins',sans-serif;font-size:0.903vw;font-weight:600;
  color:var(--txt);margin-bottom:0.556vw;
}
.step-card__file{
  display:inline-block;margin:0.139vw 0.278vw 0.139vw 0;
  font-size:0.764vw;background:rgba(100,0,242,0.06);
  padding:0.208vw 0.556vw;border-radius:0.278vw;color:var(--pri);
  font-family:'SF Mono','Fira Code',Consolas,monospace;
}

/* Step Navigation */
.step-nav{
  display:flex;align-items:center;justify-content:center;
  gap:1.389vw;padding:1.111vw 0 0.278vw;flex-shrink:0;
}
.step-nav__btn{
  display:inline-flex;align-items:center;justify-content:center;gap:0.556vw;
  padding:0.833vw 1.667vw;border-radius:9999px;
  font-family:'Poppins',sans-serif;font-size:0.903vw;font-weight:500;
  cursor:pointer;transition:all 150ms ease-out;
}
.step-nav__btn--prev{
  background:transparent;color:var(--txt);
  border:1.5px solid var(--gray-border);
}
.step-nav__btn--prev:hover:not(:disabled){background:var(--bg-lightest);border-color:var(--txt2)}
.step-nav__btn--next{
  background:var(--pri);color:var(--white);border:none;
}
.step-nav__btn--next:hover:not(:disabled){background:var(--pri-d);transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,0.1)}
.step-nav__btn--next:active:not(:disabled){transform:translateY(0)}
.step-nav__btn:disabled{opacity:0.4;cursor:not-allowed;transform:none!important;box-shadow:none!important}
.step-nav__counter{
  font-family:'Poppins',sans-serif;font-size:0.972vw;
  font-weight:600;color:var(--txt);
  min-width:5.56vw;text-align:center;
}
.step-nav__counter span{font-weight:400;color:var(--txt2)}

/* Keyboard hint */
.step-nav__hint{
  text-align:center;padding:0.278vw 0 0.556vw;flex-shrink:0;
  font-family:'Open Sans',sans-serif;font-size:0.694vw;color:var(--txt2);
}
.step-nav__hint kbd{
  display:inline-block;padding:0.139vw 0.417vw;
  background:var(--seg-bg);border:1px solid var(--border-card);
  border-radius:0.278vw;font-family:inherit;font-size:0.625vw;
  color:var(--gray-inactive);
}

/* ═══════ HIDDEN BY DEFAULT ═══════ */
#content{display:none}
#content.step-layout{display:flex;flex-direction:column;flex:1;min-height:0}
#home{flex-shrink:0}

/* ═══════ PRINT ═══════ */
@media print{
  .sidebar,.mobile-header,.backdrop,.view-controls,.counter,.btn-export,.step-nav,.step-nav__hint{display:none!important}
  .content{margin:0!important;padding:10px!important;height:auto!important;overflow:visible!important;display:block!important}
  #content{display:block!important}
  #home{display:none!important}
  #list-view{display:block!important}
  #step-view{display:none!important}
  .us-body{display:block!important}
  .us{break-inside:avoid;border:1px solid #ddd;margin-bottom:8px}
  .us-head .arrow{display:none}
  body{overflow:visible!important;height:auto!important}
  .section-header__title{font-size:20px!important}
  .us-head .id{font-size:11px!important;min-width:100px!important}
  .us-head .title{font-size:12px!important}
  .us-head .tag{font-size:9px!important}
  .us-body{font-size:11px!important}
  .us-body li{font-size:10px!important}
  .us-body .files{font-size:10px!important}
  .us-body .files code{font-size:9px!important}
}

/* ═══════ TABLET (<=1023px) ═══════ */
@media(max-width:1023px){
  .mobile-header{display:flex}
  .sidebar{transform:translateX(-100%);width:280px}
  .sidebar--open{transform:translateX(0)}
  .sidebar__close{display:flex;align-items:center;justify-content:center}
  .sidebar__logo-img{height:32px}
  .sidebar__badge{font-size:10px;padding:2px 12px;margin-top:6px}
  .sidebar__nav{padding-top:16px}
  .sidebar__link{
    font-size:14px;width:calc(100% - 32px);
    padding:10px 14px;padding-left:24px;border-radius:10px;
  }
  .sidebar__icon{width:18px;height:18px}
  .sidebar__count{font-size:10px;min-width:22px;height:22px;padding:0 6px}
  .sidebar__separator{margin:auto 12px 0}
  .sidebar__footer{padding:14px 16px;font-size:12px}
  .sidebar__dot{width:8px;height:8px}
  .sidebar__stats{gap:10px;margin-top:6px}
  .sidebar__stat{font-size:11px}
  .sidebar__indicator{width:4px}
  .content{margin-left:0;margin-top:56px;height:calc(100vh - 56px);padding:20px}
  .content.no-scroll{overflow:hidden}
  .section-header{flex-direction:column;align-items:flex-start;gap:12px}
  .section-header__title{font-size:22px}
  .section-header__subtitle{font-size:14px}
  .btn-export{height:42px;padding:0 18px;font-size:13px;border-radius:12px}
  .btn-export svg{width:14px;height:14px}
  .overview-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .ov-card{padding:16px;border-radius:16px}
  .ov-card__title{font-size:15px;margin-bottom:4px}
  .ov-card__pct{font-size:24px;margin-bottom:6px}
  .ov-card__pct span{font-size:14px}
  .ov-card__bar{height:5px;margin-bottom:10px}
  .ov-card__nums{gap:12px}
  .ov-card__num{font-size:12px}
  .view-controls{flex-wrap:wrap;gap:10px}
  .view-toggle__btn{width:36px;height:36px;border-radius:6px}
  .view-toggle__btn svg{width:16px;height:16px}
  .view-toggle{border-radius:8px}
  .filters{padding:3px;margin-bottom:0}
  .filters button{padding:8px 14px;font-size:12px}
  .counter{font-size:12px;margin-bottom:14px}
  .us{border-radius:10px;margin-bottom:8px}
  .us-head{padding:12px;gap:8px}
  .us-head .st{width:8px;height:8px}
  .us-head .id{font-size:11px;min-width:110px}
  .us-head .title{font-size:13px}
  .us-head .tag{font-size:10px;padding:2px 8px}
  .us-head .arrow{font-size:10px}
  .us-body{padding:0 12px 14px;font-size:13px}
  .us-body ul{padding-left:18px}
  .us-body li{font-size:12px}
  .us-body .files{font-size:11px;padding:8px 10px;border-radius:6px}
  .us-body .files code{font-size:10px}
  /* Step view tablet */
  .step-card{max-width:100%;padding:24px;border-radius:16px}
  .step-card__header{margin-bottom:14px}
  .step-card__id{font-size:13px}
  .step-card__dot{width:10px;height:10px}
  .step-card__tag{font-size:11px;padding:3px 10px}
  .step-card__title{font-size:20px;margin-bottom:16px}
  .step-card__divider{margin-bottom:16px}
  .step-card__role{font-size:14px;padding:12px;border-radius:10px;margin-bottom:20px}
  .step-card__section-title{font-size:14px;margin-bottom:8px}
  .step-card__progress-text{font-size:11px}
  .step-card__progress-bar{height:4px;margin-bottom:12px}
  .step-card__criterion{font-size:13px;gap:10px;padding:8px 0}
  .step-card__check{width:20px;height:20px;font-size:10px;margin-top:1px}
  .step-card__files{padding:12px;border-radius:10px}
  .step-card__files-title{font-size:12px;margin-bottom:6px}
  .step-card__file{font-size:10px;padding:2px 6px}
  .step-card__criteria{margin-bottom:16px}
  .step-nav{gap:16px;padding:12px 0 4px}
  .step-nav__btn{padding:10px 20px;font-size:13px}
  .step-nav__counter{font-size:14px;min-width:60px}
  .step-nav__hint{font-size:10px;padding:4px 0 8px}
  .step-nav__hint kbd{font-size:9px;padding:2px 5px}
  #step-card-container{padding:0}
}

/* ═══════ MOBILE (<=640px) ═══════ */
@media(max-width:640px){
  .content{padding:14px}
  .overview-grid{grid-template-columns:1fr;gap:10px}
  .section-header__title{font-size:18px}
  .section-header__subtitle{font-size:13px}
  .ov-card__pct{font-size:20px}
  .ov-card__pct span{font-size:12px}
  .us-head .id{min-width:auto}
  .us-head .tag{display:none}
  .filters button{padding:6px 10px;font-size:11px}
  .btn-export{height:38px;padding:0 14px;font-size:12px;border-radius:10px}
  .step-card{padding:16px;border-radius:12px}
  .step-card__title{font-size:17px;margin-bottom:12px}
  .step-card__role{font-size:13px;padding:10px;margin-bottom:14px}
  .step-card__criterion{font-size:12px;gap:8px}
  .step-card__check{width:18px;height:18px;font-size:9px}
  .step-nav__btn{padding:8px 16px;font-size:12px}
  .step-nav__counter{font-size:13px}
  .step-nav__hint{display:none}
  .content.no-scroll{padding-bottom:0}
}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}