/* Reset */
*,*::before,*::after{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--text-body-md);
  color:var(--text-primary);
  background:var(--neutral-200);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,p,figure{margin:0;}
button{font-family:inherit;cursor:pointer;}
input,textarea{font-family:inherit;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
img{max-width:100%;display:block;}
svg{display:block;flex-shrink:0;}
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:var(--radius-pill);}

/* ============ App stage (holds phone-frame or desktop shell) ============ */
#app-stage{
  min-height:100vh;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:var(--space-8) var(--space-4);
  gap:var(--space-8);
}
@media (max-width: 860px){
  #app-stage{padding:0;}
}

/* ============ Phone frame (modules A/B/C) ============ */
.phone-frame{
  width:var(--phone-width);
  height:var(--phone-height);
  background:#0c0c0c;
  border-radius:44px;
  padding:14px;
  box-shadow:var(--shadow-lg);
  position:relative;
  flex-shrink:0;
}
.phone-frame::before{
  content:"";
  position:absolute;
  top:14px;left:50%;transform:translateX(-50%);
  width:120px;height:24px;
  background:#0c0c0c;
  border-radius:0 0 16px 16px;
  z-index:5;
}
.phone-screen{
  width:100%;height:100%;
  background:var(--bg-app);
  border-radius:32px;
  overflow:hidden;
  position:relative;
  display:flex;
  flex-direction:column;
}
.phone-statusbar{
  height:34px;
  flex-shrink:0;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 22px;
  font-family:var(--font-display);
  font-weight:var(--weight-semibold);
  font-size:13px;
  color:var(--text-primary);
  background:var(--bg-app);
}
.phone-body{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
}
.screen-scroll{
  flex:1;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
}
@media (max-width:860px){
  .phone-frame{
    width:100vw;height:100vh;border-radius:0;padding:0;box-shadow:none;
  }
  .phone-frame::before{display:none;}
  .phone-screen{border-radius:0;}
  .phone-statusbar{display:none;}
}

/* ============ Desktop shell (module D) ============ */
.desktop-shell{
  width:min(1400px, 92vw);
  min-height:80vh;
  background:var(--neutral-0);
  border-radius:var(--radius-2xl);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.desktop-titlebar{
  height:40px;
  flex-shrink:0;
  display:flex;align-items:center;gap:8px;
  padding:0 var(--space-4);
  background:var(--neutral-100);
  border-bottom:1px solid var(--border-default);
}
.desktop-titlebar .dot{width:11px;height:11px;border-radius:50%;background:var(--neutral-200);}
.desktop-titlebar .label{margin-left:var(--space-2);font-size:var(--text-body-sm);color:var(--text-secondary);font-weight:var(--weight-medium);}
.desktop-body{
  flex:1;min-height:0;
  display:flex;
}
.desktop-sidebar{
  width:var(--sidebar-width);
  flex-shrink:0;
  background:var(--neutral-50);
  border-right:1px solid var(--border-default);
  padding:var(--space-5) var(--space-4);
  display:flex;flex-direction:column;
  gap:var(--space-6);
}
.desktop-content{
  flex:1;min-width:0;
  overflow-y:auto;
  padding:var(--space-6);
  background:var(--neutral-50);
}

/* ============ Utility classes ============ */
.flex{display:flex;} .inline-flex{display:inline-flex;}
.flex-col{flex-direction:column;} .flex-wrap{flex-wrap:wrap;}
.items-center{align-items:center;} .items-start{align-items:flex-start;} .items-end{align-items:flex-end;}
.justify-between{justify-content:space-between;} .justify-center{justify-content:center;} .justify-end{justify-content:flex-end;}
.flex-1{flex:1 1 0%;} .flex-shrink-0{flex-shrink:0;}
.grid{display:grid;} .grid-cols-2{grid-template-columns:repeat(2,1fr);} .grid-cols-3{grid-template-columns:repeat(3,1fr);} .grid-cols-4{grid-template-columns:repeat(4,1fr);}
.gap-1{gap:var(--space-1);} .gap-2{gap:var(--space-2);} .gap-3{gap:var(--space-3);} .gap-4{gap:var(--space-4);} .gap-5{gap:var(--space-5);} .gap-6{gap:var(--space-6);}
.p-2{padding:var(--space-2);} .p-3{padding:var(--space-3);} .p-4{padding:var(--space-4);} .p-5{padding:var(--space-5);} .p-6{padding:var(--space-6);}
.px-2{padding-left:var(--space-2);padding-right:var(--space-2);} .px-3{padding-left:var(--space-3);padding-right:var(--space-3);} .px-4{padding-left:var(--space-4);padding-right:var(--space-4);} .px-5{padding-left:var(--space-5);padding-right:var(--space-5);} .px-6{padding-left:var(--space-6);padding-right:var(--space-6);}
.py-1{padding-top:var(--space-1);padding-bottom:var(--space-1);} .py-2{padding-top:var(--space-2);padding-bottom:var(--space-2);} .py-3{padding-top:var(--space-3);padding-bottom:var(--space-3);} .py-4{padding-top:var(--space-4);padding-bottom:var(--space-4);} .py-5{padding-top:var(--space-5);padding-bottom:var(--space-5);} .py-6{padding-top:var(--space-6);padding-bottom:var(--space-6);}
.mt-1{margin-top:var(--space-1);} .mt-2{margin-top:var(--space-2);} .mt-3{margin-top:var(--space-3);} .mt-4{margin-top:var(--space-4);} .mt-5{margin-top:var(--space-5);} .mt-6{margin-top:var(--space-6);} .mt-8{margin-top:var(--space-8);}
.mb-1{margin-bottom:var(--space-1);} .mb-2{margin-bottom:var(--space-2);} .mb-3{margin-bottom:var(--space-3);} .mb-4{margin-bottom:var(--space-4);} .mb-5{margin-bottom:var(--space-5);} .mb-6{margin-bottom:var(--space-6);}
.w-full{width:100%;} .h-full{height:100%;}
.relative{position:relative;} .absolute{position:absolute;} .sticky{position:sticky;}
.z-10{z-index:10;} .z-20{z-index:20;} .z-30{z-index:30;}
.overflow-hidden{overflow:hidden;} .overflow-auto{overflow:auto;} .overflow-x-auto{overflow-x:auto;overflow-y:hidden;}
.rounded-sm{border-radius:var(--radius-sm);} .rounded-md{border-radius:var(--radius-md);} .rounded-lg{border-radius:var(--radius-lg);} .rounded-xl{border-radius:var(--radius-xl);} .rounded-2xl{border-radius:var(--radius-2xl);} .rounded-pill{border-radius:var(--radius-pill);}
.shadow-xs{box-shadow:var(--shadow-xs);} .shadow-sm{box-shadow:var(--shadow-sm);} .shadow-md{box-shadow:var(--shadow-md);} .shadow-lg{box-shadow:var(--shadow-lg);}
.border{border:1px solid var(--border-default);} .border-t{border-top:1px solid var(--border-default);} .border-b{border-bottom:1px solid var(--border-default);}
.text-display-lg{font-family:var(--font-display);font-size:var(--text-display-lg);font-weight:var(--weight-bold);line-height:var(--leading-tight);}
.text-display-md{font-family:var(--font-display);font-size:var(--text-display-md);font-weight:var(--weight-bold);line-height:var(--leading-tight);}
.text-heading-lg{font-family:var(--font-display);font-size:var(--text-heading-lg);font-weight:var(--weight-bold);line-height:var(--leading-tight);}
.text-heading-md{font-family:var(--font-display);font-size:var(--text-heading-md);font-weight:var(--weight-semibold);line-height:var(--leading-tight);}
.text-heading-sm{font-family:var(--font-display);font-size:var(--text-heading-sm);font-weight:var(--weight-semibold);line-height:var(--leading-tight);}
.text-lg{font-size:var(--text-body-lg);} .text-md{font-size:var(--text-body-md);} .text-sm{font-size:var(--text-body-sm);} .text-xs{font-size:var(--text-caption);}
.font-medium{font-weight:var(--weight-medium);} .font-semibold{font-weight:var(--weight-semibold);} .font-bold{font-weight:var(--weight-bold);} .font-extrabold{font-weight:var(--weight-extrabold);}
.font-mono{font-family:var(--font-mono);}
.text-primary{color:var(--text-primary);} .text-secondary{color:var(--text-secondary);} .text-tertiary{color:var(--text-tertiary);}
.text-brand{color:var(--color-primary);} .text-danger{color:var(--color-danger);} .text-warning{color:var(--yellow-700);}
.text-on-primary{color:var(--text-on-primary);}
.text-center{text-align:center;}
.bg-app{background:var(--bg-app);} .bg-surface{background:var(--bg-surface);} .bg-sunken{background:var(--bg-surface-sunken);}
.bg-primary{background:var(--color-primary);} .bg-primary-tint{background:var(--color-primary-tint);} .bg-primary-tint-strong{background:var(--color-primary-tint-strong);}
.bg-danger-tint{background:var(--color-danger-tint);} .bg-warning-tint{background:var(--color-warning-tint);}
.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.line-clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.hidden{display:none !important;}
.cursor-pointer{cursor:pointer;}
.transition{transition:all var(--duration-base) var(--ease-standard);}