/* WriteUrdu v2 creation-workspace layer.
   Card Studio and Templates share one visual hierarchy while their rendering,
   storage, handoff and export contracts stay owned by their existing modules. */
:root{
  --wu-create-width:1320px;
  --wu-create-ink:#14231c;
  --wu-create-muted:#627168;
  --wu-create-line:#dce7e0;
  --wu-create-surface:#fff;
  --wu-create-soft:#f3f8f5;
  --wu-create-brand:#176f45;
  --wu-create-brand-strong:#0f5534;
  --wu-create-shadow:0 18px 50px rgba(20,35,28,.08);
}

/* Shared creation-page framing */
.wu-v2-shell.card-studio-page,
.wu-v2-shell.template-library-page-body{
  color:var(--wu-create-ink);
  background:
    radial-gradient(circle at 8% 0,rgba(23,111,69,.07),transparent 28rem),
    linear-gradient(180deg,#f9fcfa 0,#f2f7f4 30rem,#fff 100%);
}
.wu-v2-shell.card-studio-page h1,
.wu-v2-shell.card-studio-page h2,
.wu-v2-shell.card-studio-page h3,
.wu-v2-shell.template-library-page-body h1,
.wu-v2-shell.template-library-page-body h2,
.wu-v2-shell.template-library-page-body h3{
  color:var(--wu-create-ink);
  font-family:Inter,"Segoe UI",Arial,sans-serif;
  font-weight:700;
}
.wu-v2-shell.card-studio-page .card-studio-topbar>div:first-child::before,
.wu-v2-shell.template-library-page-body .template-library-hero>div:first-child::before{
  display:inline-flex;
  margin:0 0 9px;
  padding:5px 9px;
  border:1px solid rgba(23,111,69,.17);
  border-radius:999px;
  color:var(--wu-create-brand-strong);
  background:rgba(23,111,69,.065);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.wu-v2-shell.card-studio-page .card-studio-topbar>div:first-child::before{content:"Create · Card Studio"}
.wu-v2-shell.template-library-page-body .template-library-hero>div:first-child::before{content:"Create · Templates"}

/* Card Studio: artboard first, controls purposeful, supporting content second. */
.wu-v2-shell.card-studio-page .card-studio-shell{
  width:min(var(--wu-create-width),calc(100% - 36px));
  padding:24px 0 56px;
}
.wu-v2-shell.card-studio-page .card-studio-topbar{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:24px;
  margin:0 0 14px;
  padding:18px 20px;
  border:1px solid var(--wu-create-line);
  border-radius:18px;
  background:rgba(255,255,255,.84);
  box-shadow:0 12px 34px rgba(20,35,28,.05);
  backdrop-filter:blur(12px);
}
.wu-v2-shell.card-studio-page .card-studio-topbar h1{
  margin:0;
  font-size:clamp(1.65rem,2.4vw,2.25rem);
  letter-spacing:-.035em;
}
.wu-v2-shell.card-studio-page .card-studio-topbar p{
  max-width:680px;
  color:var(--wu-create-muted);
}
.wu-v2-shell.card-studio-page .card-studio-top-actions{
  gap:10px;
  justify-content:flex-end;
}
.wu-v2-shell.card-studio-page .card-studio-action-group{
  padding:7px;
  border:1px solid var(--wu-create-line);
  border-radius:12px;
  background:#f8fbf9;
}
.wu-v2-shell.card-studio-page .card-studio-action-group-label{
  color:#728078;
  font-size:.63rem;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.wu-v2-shell.card-studio-page .card-studio-button{
  border-radius:9px;
  box-shadow:none;
}
.wu-v2-shell.card-studio-page .card-studio-button.primary{
  border-color:var(--wu-create-brand);
  background:var(--wu-create-brand);
}
.wu-v2-shell.card-studio-page .card-studio-button.primary:hover,
.wu-v2-shell.card-studio-page .card-studio-button.primary:focus-visible{
  border-color:var(--wu-create-brand-strong);
  background:var(--wu-create-brand-strong);
}
.wu-v2-shell.card-studio-page .card-studio-guided-header{
  margin:0 0 14px;
  padding:10px 12px;
  border:1px solid var(--wu-create-line);
  border-radius:14px;
  background:rgba(255,255,255,.82);
}
.wu-v2-shell.card-studio-page .card-studio-stepper{
  gap:5px;
}
.wu-v2-shell.card-studio-page .card-studio-step{
  min-height:48px;
  border-radius:10px;
}
.wu-v2-shell.card-studio-page .card-studio-layout{
  grid-template-columns:minmax(300px,330px) minmax(0,1fr);
  gap:18px;
}
.wu-v2-shell.card-studio-page .card-studio-panel{
  position:sticky;
  top:108px;
  max-height:calc(100vh - 126px);
  padding:15px;
  border-color:var(--wu-create-line);
  border-radius:16px;
  box-shadow:0 10px 28px rgba(20,35,28,.055);
}
.wu-v2-shell.card-studio-page .card-studio-preview{
  min-height:min(74vh,820px);
  padding:clamp(22px,3vw,40px);
  border-color:#d5e1da;
  border-radius:18px;
  box-shadow:var(--wu-create-shadow);
}
.wu-v2-shell.card-studio-page .card-studio-artboard-wrap{
  width:min(100%,1040px);
}
.wu-v2-shell.card-studio-page .card-studio-canvas{
  box-shadow:0 22px 58px rgba(11,36,23,.2);
}
.wu-v2-shell.card-studio-page .seo-content{
  width:min(1120px,calc(100% - 36px));
  margin:20px auto 0;
  padding-top:42px;
  border-top:1px solid var(--wu-create-line);
}
.wu-v2-shell.card-studio-page .seo-content>h2:first-child{
  font-size:clamp(1.45rem,2.4vw,1.9rem);
}
.wu-v2-shell.card-studio-page .seo-content-grid article{
  border-color:var(--wu-create-line);
  background:rgba(255,255,255,.78);
  box-shadow:none;
}

/* Templates: browse first, filters close to the grid, education later. */
.wu-v2-shell.template-library-page-body .template-library-page{
  width:min(1240px,calc(100% - 36px));
  padding:28px 0 70px;
}
.wu-v2-shell.template-library-page-body .template-library-hero{
  align-items:center;
  gap:28px;
  margin:0 0 16px;
  padding:24px 26px;
  border:1px solid var(--wu-create-line);
  border-radius:18px;
  background:rgba(255,255,255,.86);
  box-shadow:0 12px 34px rgba(20,35,28,.05);
}
.wu-v2-shell.template-library-page-body .template-library-hero h1{
  margin:0 0 7px;
  font-size:clamp(1.9rem,3.4vw,2.7rem);
  letter-spacing:-.04em;
}
.wu-v2-shell.template-library-page-body .template-library-hero p{
  max-width:760px;
  font-size:1rem;
}
.wu-v2-shell.template-library-page-body .template-library-local-note{
  border-radius:999px;
  white-space:nowrap;
}
.wu-v2-shell.template-library-page-body .template-library-controls{
  top:108px;
  z-index:20;
  margin-bottom:24px;
  padding:13px;
  border-radius:14px;
  box-shadow:0 12px 30px rgba(20,35,28,.07);
}
.wu-v2-shell.template-library-page-body .template-library-section{
  margin-top:26px;
}
.wu-v2-shell.template-library-page-body .template-library-section h2{
  margin-bottom:10px;
  font-size:1.3rem;
}
.wu-v2-shell.template-library-page-body .template-grid,
.wu-v2-shell.template-library-page-body .template-skeleton-grid{
  gap:15px;
}
.wu-v2-shell.template-library-page-body .template-card{
  border-radius:14px;
  box-shadow:0 7px 18px rgba(20,35,28,.045);
}
.wu-v2-shell.template-library-page-body .template-card:hover,
.wu-v2-shell.template-library-page-body .template-card:focus-within{
  transform:translateY(-2px);
  box-shadow:0 14px 28px rgba(20,35,28,.09);
}
.wu-v2-shell.template-library-page-body .template-open{
  min-height:36px;
  padding:8px 11px;
  border-color:var(--wu-create-brand);
  color:#fff;
  background:var(--wu-create-brand);
}
.wu-v2-shell.template-library-page-body .template-open:hover,
.wu-v2-shell.template-library-page-body .template-open:focus-visible{
  border-color:var(--wu-create-brand-strong);
  background:var(--wu-create-brand-strong);
}
.wu-v2-shell.template-library-page-body .template-library-guidance{
  max-width:920px;
  margin-top:52px;
  padding:26px 28px;
  border-color:var(--wu-create-line);
  background:rgba(255,255,255,.7);
  box-shadow:none;
}
.wu-v2-shell.template-library-page-body .template-library-guidance::before{
  display:block;
  margin-bottom:8px;
  color:var(--wu-create-brand-strong);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
  content:"After you choose a design";
}
.wu-v2-shell.template-library-page-body .template-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:15px;
}
.wu-v2-shell.template-library-page-body .template-hero-action{
  display:inline-flex;
  min-height:40px;
  align-items:center;
  justify-content:center;
  padding:9px 13px;
  border:1px solid #c9ddd1;
  border-radius:9px;
  color:var(--wu-create-brand-strong);
  background:#f5faf7;
  font-size:.82rem;
  font-weight:700;
  text-decoration:none;
}
.wu-v2-shell.template-library-page-body .template-hero-action.primary{
  border-color:var(--wu-create-brand);
  color:#fff;
  background:var(--wu-create-brand);
}
.wu-v2-shell.template-library-page-body .template-hero-action:hover,
.wu-v2-shell.template-library-page-body .template-hero-action:focus-visible{
  border-color:var(--wu-create-brand-strong);
  outline:none;
  box-shadow:0 0 0 3px rgba(23,111,69,.13);
}

@media(max-width:1040px){
  .wu-v2-shell.card-studio-page .card-studio-topbar{grid-template-columns:1fr}
  .wu-v2-shell.card-studio-page .card-studio-top-actions{justify-content:flex-start}
  .wu-v2-shell.card-studio-page .card-studio-panel{top:102px}
  .wu-v2-shell.template-library-page-body .template-library-controls{top:102px}
}
@media(max-width:900px){
  .wu-v2-shell.card-studio-page .card-studio-shell{width:min(100% - 20px,720px);padding-top:16px}
  .wu-v2-shell.card-studio-page .card-studio-topbar{padding:16px}
  .wu-v2-shell.card-studio-page .card-studio-panel{position:static;max-height:none}
  .wu-v2-shell.card-studio-page .card-studio-preview{min-height:0;padding:14px}
  .wu-v2-shell.card-studio-page .seo-content{width:min(100% - 22px,720px);padding-top:32px}
}
@media(max-width:720px){
  .wu-v2-shell.template-library-page-body .template-library-page{width:min(100% - 22px,700px);padding-top:16px}
  .wu-v2-shell.template-library-page-body .template-library-hero{display:block;padding:20px 18px}
  .wu-v2-shell.template-library-page-body .template-library-controls{position:static}
  .wu-v2-shell.template-library-page-body .template-library-guidance{padding:22px 18px}
}
@media(max-width:520px){
  .wu-v2-shell.card-studio-page .card-studio-top-actions{display:flex}
  .wu-v2-shell.card-studio-page .card-studio-action-group{width:100%}
  .wu-v2-shell.card-studio-page .card-studio-action-group-buttons{display:flex;flex-wrap:wrap;gap:6px}
  .wu-v2-shell.card-studio-page .card-studio-action-group-buttons>*{flex:1 1 auto}
  .wu-v2-shell.card-studio-page .card-studio-guided-header{padding:8px}
  .wu-v2-shell.template-library-page-body .template-hero-actions{display:grid;grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .wu-v2-shell.card-studio-page *,
  .wu-v2-shell.template-library-page-body *{transition:none!important}
}