/* =========================================================
   Mohett Font Setup — Thmanyah
   IMPORTANT:
   This file references font files from assets/fonts/.
   The font binaries are not bundled here. Put your licensed
   .woff2 files in assets/fonts/ using the exact names below.
   ========================================================= */

@font-face{
  font-family:"Thmanyah Sans";
  src:url("https://saadfaris.com/mohett/ui/assets/fonts/thmanyahsans-Light.woff2") format("woff2");
  font-weight:300;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"Thmanyah Sans";
  src:url("https://saadfaris.com/mohett/ui/assets/fonts/thmanyahsans-Regular.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"Thmanyah Sans";
  src:url("https://saadfaris.com/mohett/ui/assets/fonts/thmanyahsans-Medium.woff2") format("woff2");
  font-weight:500;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"Thmanyah Sans";
  src:url("https://saadfaris.com/mohett/ui/assets/fonts/thmanyahsans-Bold.woff2") format("woff2");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"Thmanyah Sans";
  src:url("https://saadfaris.com/mohett/ui/assets/fonts/thmanyahsans-Black.woff2") format("woff2");
  font-weight:900;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"Thmanyah Serif Display";
  src:url("https://saadfaris.com/mohett/ui/assets/fonts/thmanyahserifdisplay-Light.woff2") format("woff2");
  font-weight:300;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"Thmanyah Serif Display";
  src:url("https://saadfaris.com/mohett/ui/assets/fonts/thmanyahserifdisplay-Regular.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"Thmanyah Serif Display";
  src:url("https://saadfaris.com/mohett/ui/assets/fonts/thmanyahserifdisplay-Medium.woff2") format("woff2");
  font-weight:500;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"Thmanyah Serif Display";
  src:url("https://saadfaris.com/mohett/ui/assets/fonts/thmanyahserifdisplay-Bold.woff2") format("woff2");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"Thmanyah Serif Display";
  src:url("https://saadfaris.com/mohett/ui/assets/fonts/thmanyahserifdisplay-Black.woff2") format("woff2");
  font-weight:900;
  font-style:normal;
  font-display:swap;
}

:root{
  --font-sans:"Thmanyah Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display:"Thmanyah Serif Display", "Thmanyah Sans", serif;
}

html,
body,
button,
input,
textarea,
select{
  font-family:var(--font-sans);
}

h1,
h2,
.hero-title,
.section-title h2,
.chapter-card h2,
.auth-brand-v22 h3,
.auth-card-head-v22 h3,
.product-page h3,
.article-pro-body h1,
.smart-hero-v21 h3,
.compare-head-v21 h3,
.discussion-main-v21 h3,
.interest-picker-v21 h3{
  font-family:var(--font-display);
}

p,
li,
small,
textarea,
.article-pro-body p,
.comment-pro p,
.description,
.lead,
.long-text{
  font-feature-settings:"ss01" off;
}





:root{
  --bg:#F7F7F4;--ink:#28262B;--surface:#FBFBF9;--soft:#EEEEE8;--border:#EAEAEA;--muted:#848484;--muted2:#65655D;
  --red:#FF514A;--yellow:#FFF6B1;--blue:#9BA9EA;--beige:#E3C8BD;--green:#06433E;--sage:#91AB9E;--brown:#CD9677;--purple:#393156;--grayblue:#B8BFC7;--pink:#FFB3C3;
  --r:14px;--rl:24px;--rx:34px;--ease:cubic-bezier(.2,0,0,1);
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-sans),system-ui,-apple-system,"Segoe UI",sans-serif;font-feature-settings:"ss01" on;line-height:1.5}
button,input,textarea,select{font:inherit;color:inherit}button{cursor:pointer}a{text-decoration:none;color:inherit}.sf-texture{position:fixed;inset:0 0 auto;height:420px;z-index:-1;background:linear-gradient(180deg,rgba(255,255,255,.84),rgba(255,255,255,0) 55%),radial-gradient(ellipse at 36% 0%,rgba(40,38,43,.075),transparent 44%),linear-gradient(180deg,rgba(247,247,244,0),var(--bg) 90%)}
.docs-sidebar{position:fixed;inset:0 0 0 auto;width:292px;padding:26px 20px;border-left:1px solid var(--border);background:rgba(251,251,249,.64);backdrop-filter:blur(18px);overflow:auto;z-index:40}.docs-brand{border-bottom:1px solid var(--border);padding-bottom:20px;margin-bottom:16px}.brand-lockup{display:flex;align-items:flex-start;gap:16px}.logo{color:var(--ink);display:block}.tagline{font-family:"Thmanyah Serif Display";font-size:24px;line-height:1.05}.docs-brand p{color:var(--muted);font-size:14px;margin:14px 0 0}.docs-links{display:grid;gap:6px}.docs-links a{padding:11px 14px;border-radius:14px;color:var(--muted);transition:.2s var(--ease)}.docs-links a:hover{background:var(--soft);color:var(--ink)}
.docs-main{margin-right:292px;padding:34px clamp(20px,4vw,56px);max-width:1480px}.mobile-menu{display:none}
.hero{min-height:350px;display:grid;align-items:center;border:1px solid var(--border);border-radius:36px;background:rgba(251,251,249,.44);padding:clamp(26px,5vw,62px);overflow:hidden}.hero-logo{width:184px;height:auto}.hero-tagline{font-size:34px}.hero h1{font-family:"Thmanyah Serif Display";font-weight:300;font-size:clamp(46px,7vw,92px);line-height:.95;margin:40px 0 14px}.hero p{max-width:760px;color:var(--muted);font-size:clamp(17px,2vw,23px);line-height:1.85;margin:0}
.docs-section{margin-top:70px}.section-title{display:flex;align-items:flex-end;gap:16px;margin-bottom:22px}.section-title h2{font-family:"Thmanyah Serif Display";font-weight:300;font-size:clamp(36px,4vw,62px);line-height:1;margin:0}.section-title span{color:var(--muted);border-bottom:1px solid var(--border);flex:1;padding-bottom:9px}
.palette-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}.swatch{min-height:184px;background:var(--bg);color:var(--ink);padding:16px;display:flex;flex-direction:column;justify-content:space-between;border:1px solid rgba(40,38,43,.06)}.swatch:before{content:"";display:block;width:56px;height:11px;background:var(--ink);box-shadow:0 21px 0 var(--ink),0 32px 0 var(--ink)}.swatch b,.swatch small{display:block}.swatch small{opacity:.72}
.preview-panel,.layout-preview,.dropdown-demo,.form-card,.quick-panel,.empty-state,.skeleton-card,.toast{border:1px solid var(--border);background:rgba(251,251,249,.58);border-radius:28px;padding:24px}.app-toolbar{display:grid;grid-template-columns:auto minmax(260px,1fr) auto;gap:18px;align-items:center}.toolbar-right,.toolbar-left{position:relative}.split-control{position:relative;display:inline-flex;align-items:center;border:1px solid var(--border);border-radius:22px;background:rgba(251,251,249,.72);padding:5px}.split-control>span{width:1px;height:42px;background:var(--border);margin:0 10px}.btn{min-height:44px;border:0;border-radius:14px;background:transparent;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:0 18px;transition:.2s var(--ease);position:relative}.btn:hover{transform:translateY(-1px)}.btn:active{transform:scale(.98)}.btn-primary{background:var(--ink);color:var(--bg)}.btn-secondary{background:var(--surface);border:1px solid var(--border)}.btn-ghost{background:transparent}.btn-soft{background:var(--soft)}.btn-danger{background:var(--red);color:var(--ink)}.btn-icon{width:46px;padding:0;background:var(--soft)}.btn svg{width:20px;height:20px}.split-control .btn{font-size:20px;min-height:50px;border-radius:16px}
.user-chip{height:62px;border:1px solid var(--border);background:rgba(251,251,249,.72);border-radius:31px;display:flex;align-items:center;gap:12px;padding:0 10px 0 18px;font-size:18px;color:var(--muted);transition:.2s var(--ease)}.user-chip:hover{background:var(--surface)}.user-chip img{width:48px;height:48px;border-radius:50%;object-fit:cover}.user-chip svg{width:18px;height:18px}
.search{height:52px;border:1px solid var(--border);border-radius:26px;background:rgba(251,251,249,.72);display:flex;align-items:center;gap:12px;padding:0 18px;color:#5A5B60}.search.compact{height:52px}.search.large{height:64px;border-radius:32px}.search svg{width:24px;height:24px;flex:0 0 auto}.search.large svg{width:32px;height:32px}.search input{border:0;background:transparent;outline:0;width:100%;font-size:18px;color:var(--ink)}.search.large input{font-size:24px}
.dropdown{position:absolute;top:calc(100% + 10px);right:0;min-width:232px;background:rgba(251,251,249,.92);border:1px solid var(--border);border-radius:20px;padding:8px;box-shadow:0 24px 80px rgba(40,38,43,.12);backdrop-filter:blur(18px);opacity:0;transform:translateY(-6px) scale(.98);pointer-events:none;transition:.18s var(--ease);z-index:100}.dropdown.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}.dropdown button{width:100%;min-height:44px;border:0;background:transparent;border-radius:14px;padding:8px 10px;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:10px;text-align:right;color:var(--ink)}.dropdown button:hover{background:var(--soft)}.dropdown button svg{width:19px;height:19px;color:var(--muted2)}.dropdown button small{grid-column:2;color:var(--muted);font-size:12px;margin-top:-5px}.wide{min-width:310px}.user-dropdown{left:0;right:auto}.dot{width:11px;height:11px;border-radius:50%;display:inline-block}.bg-green{background:var(--green)}.bg-yellow{background:var(--yellow)}.bg-blue{background:var(--blue)}.bg-red{background:var(--red)}
.tabs{display:flex;align-items:center;gap:7px;border:1px solid var(--border);background:rgba(251,251,249,.68);border-radius:20px;padding:6px;width:min(640px,100%);margin-top:18px}.tabs button{flex:1;border:0;background:transparent;border-radius:14px;min-height:50px;font-size:22px;transition:.2s var(--ease)}.tabs button:hover{background:var(--soft)}.tabs .active{background:var(--ink);color:var(--bg)}
.layout-preview{margin-top:20px;max-width:560px}.platform-brand{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:22px}.platform-brand .logo{width:128px;height:auto}.platform-sidebar nav a{height:58px;border-bottom:1px solid #E0E0E0;display:flex;align-items:center;justify-content:flex-start;gap:18px;font-size:24px;color:var(--muted);transition:.2s}.platform-sidebar nav a:hover,.platform-sidebar nav .active{color:var(--ink)}.platform-sidebar nav a svg{width:27px;height:27px;margin-inline-start:auto}.sidebar-search{margin-bottom:16px}
.dropdown-demo{display:flex;gap:14px;align-items:flex-start;position:relative;flex-wrap:wrap}.inputs-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:16px}.input,.textarea,select.input{border:1px solid var(--border);background:rgba(251,251,249,.72);border-radius:18px;padding:0 18px;min-height:56px;outline:0;font-size:18px}.textarea{padding:16px;min-height:132px;resize:vertical;grid-column:1/-1}
.pills{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}.metric{height:34px;display:inline-flex;align-items:center;gap:7px;border:1px solid var(--soft);background:var(--surface);border-radius:999px;padding:0 13px;color:var(--muted2);font-size:16px}.metric svg{width:20px;height:20px}.metric.icon-only{width:36px;padding:0;justify-content:center;background:var(--soft);border:0}.badge{height:30px;display:inline-flex;align-items:center;border-radius:9px;padding:0 11px;font-size:14px}.badge.red{background:var(--red);color:#FFE5E4}.badge.yellow{background:var(--yellow)}.badge.blue{background:var(--blue)}.badge.beige{background:var(--beige)}.badge.green{background:var(--green);color:var(--bg)}
.button-grid{display:flex;flex-wrap:wrap;gap:12px}.button-grid .btn{min-height:48px}.quick-panel{max-width:700px}.quick-panel h3{font-family:"Thmanyah Serif Display";font-weight:300;font-size:36px;margin:0 0 20px;text-align:center}.quick-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.quick-card{min-height:136px;border:0;border-radius:24px;padding:24px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;text-align:right;color:var(--ink);transition:.2s var(--ease)}.quick-card:hover{transform:translateY(-4px)}.quick-card:active{transform:scale(.98)}.quick-card svg{width:36px;height:36px}.quick-card span{font-size:28px;line-height:1.15;align-self:flex-end}.blue{background:var(--blue)}.yellow{background:var(--yellow)}.red{background:var(--red)}.beige{background:var(--beige)}
.content-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:start}.content-card,.editorial-card{border:1px solid var(--soft);border-radius:18px;background:var(--surface);overflow:hidden;transition:.22s var(--ease)}.content-card:hover,.editorial-card:hover{transform:translateY(-4px);box-shadow:0 22px 70px rgba(40,38,43,.08)}.article-card{grid-column:span 2}.cover{height:196px;background:var(--soft);border-radius:14px;margin:10px;overflow:hidden}.cover-eye{height:300px;background:radial-gradient(circle at 52% 52%,#fff 0 8%,#000 9% 17%,#fff 18% 26%,transparent 27%),repeating-radial-gradient(circle at 52% 50%,#000 0 2px,#fff 2px 5px);filter:contrast(1.2)}.gradient-cover{background:linear-gradient(135deg,var(--sage),var(--grayblue) 45%,var(--yellow))}.font-cover{height:246px;background:#F1EED9;display:grid;place-items:center;text-align:center;color:#5E50D9}.font-cover strong{font-family:Georgia,serif;font-size:58px;line-height:.9}.font-cover b{font-size:50px;line-height:.95;color:#000}.card-body{padding:0 18px 18px}.badges{display:flex;gap:8px;margin:12px 0}.content-card h3,.editorial-card h3{font-size:22px;line-height:1.25;margin:10px 0 8px}.content-card p,.editorial-card p{color:var(--muted);font-size:16px;line-height:1.7;margin:0 0 14px}.mini .metric{height:30px;font-size:13px}.mini .metric svg{width:17px;height:17px}.editorial-card{background:var(--ink);color:var(--bg);min-height:320px;padding:26px;display:flex;flex-direction:column;justify-content:space-between}.editorial-card svg{width:40px;height:40px}.editorial-card p{color:rgba(247,247,244,.72)}.card-action{width:100%;margin-top:6px}
.form-card{display:grid;grid-template-columns:1fr 1fr;gap:16px}.form-card label{display:grid;gap:8px;color:var(--muted2)}.form-card .full{grid-column:1/-1}.switch-row{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--border);padding-top:16px}.switch{width:58px;height:32px;border:0;border-radius:99px;background:var(--soft);padding:4px;transition:.2s}.switch b{display:block;width:24px;height:24px;background:var(--surface);border-radius:50%;transition:.2s}.switch.active{background:var(--ink)}.switch.active b{transform:translateX(-26px)}.form-actions{grid-column:1/-1;display:flex;gap:10px;justify-content:flex-end}
.states-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.empty-state{text-align:center;min-height:278px;display:grid;place-items:center;align-content:center;gap:14px}.empty-state svg{width:48px;height:48px}.empty-state h3{font-size:30px;margin:0}.empty-state p{color:var(--muted);margin:0}.skeleton-card{min-height:278px;display:grid;gap:14px;align-content:start}.skeleton-card span,.skeleton-card b,.skeleton-card i{display:block;border-radius:14px;background:linear-gradient(90deg,var(--soft),#fff,var(--soft));background-size:200%;animation:shimmer 1.2s infinite}.skeleton-card span{height:142px}.skeleton-card b{height:24px}.skeleton-card b:nth-child(3){width:70%}.skeleton-card i{height:34px;width:45%}.toast{grid-column:1/-1;display:flex;gap:14px;align-items:center}.toast svg{color:var(--green);width:30px;height:30px}.toast b{font-size:20px}.toast p{margin:0;color:var(--muted)}@keyframes shimmer{to{background-position:-200% 0}}
.mobile-preview{display:grid;place-items:center}.phone{width:min(390px,100%);min-height:720px;border:1px solid var(--border);border-radius:42px;background:var(--surface);padding:22px;position:relative;overflow:hidden}.phone-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.phone-top .logo{width:112px;height:auto}.phone-top button{width:44px;height:44px;border:1px solid var(--border);border-radius:14px;background:var(--soft)}.phone-card{height:210px;border-radius:20px;background:linear-gradient(135deg,var(--sage),var(--grayblue));margin-top:16px}.phone-card.small{height:150px;background:var(--beige)}.bottom-nav{position:absolute;right:18px;left:18px;bottom:18px;height:70px;border:1px solid var(--border);background:rgba(251,251,249,.82);backdrop-filter:blur(14px);border-radius:24px;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:6px}.bottom-nav button{border:0;background:transparent;border-radius:18px;display:grid;place-items:center;color:var(--muted);font-size:11px}.bottom-nav button.active{background:var(--ink);color:var(--bg)}.bottom-nav svg{width:22px;height:22px}
.overlay{position:fixed;inset:0;background:rgba(40,38,43,.12);backdrop-filter:blur(2px);z-index:30;display:none}.overlay.show{display:block}
@media(max-width:1180px){.docs-sidebar{transform:translateX(100%);transition:.25s var(--ease)}.docs-sidebar.open{transform:translateX(0)}.docs-main{margin-right:0}.mobile-menu{display:inline-flex;position:fixed;top:16px;right:16px;z-index:35;border:1px solid var(--border);background:var(--surface);height:46px;border-radius:16px;padding:0 14px;align-items:center;gap:8px}.palette-grid{grid-template-columns:repeat(4,1fr)}.content-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.docs-main{padding:78px 16px 28px}.hero{border-radius:28px;min-height:300px}.hero-logo{width:130px}.hero-tagline{font-size:26px}.brand-lockup{gap:12px}.section-title{display:block}.section-title span{display:block;margin-top:12px}.palette-grid{grid-template-columns:repeat(2,1fr)}.app-toolbar{grid-template-columns:1fr}.toolbar-center{order:3}.split-control{width:100%;justify-content:space-between}.split-control .btn{font-size:17px;padding:0 14px}.user-chip{width:100%;justify-content:space-between}.tabs{overflow:auto;white-space:nowrap}.tabs button{font-size:18px;min-width:108px}.inputs-grid,.quick-grid,.form-card,.states-grid{grid-template-columns:1fr}.content-grid{grid-template-columns:1fr}.article-card{grid-column:auto}.quick-card span{font-size:24px}.quick-card{min-height:126px}.platform-sidebar nav a{font-size:21px}.dropdown{min-width:min(320px,calc(100vw - 44px))}.user-dropdown{right:0;left:auto}.form-actions{justify-content:stretch}.form-actions .btn{flex:1}}


/* V3 refinements: long reading text + elegant custom select */
p,
textarea,
.content-card p,
.editorial-card p,
.hero p,
.pattern p,
.empty-state p,
.toast p,
.docs-brand p,
.swatch small {
  font-feature-settings: "ss01" off;
}

.sf-long-text {
  font-feature-settings: "ss01" off;
}

/* Hide native ugly select when kept as fallback */
select.input {
  appearance: none;
  -webkit-appearance: none;
  background-image: none;
}

/* Custom select */
.select-shell {
  position: relative;
  display: grid;
  gap: 8px;
}

.select-label {
  color: var(--muted2);
}

.custom-select {
  position: relative;
}

.select-trigger {
  width: 100%;
  min-height: 56px;
  border: 1px solid var(--border);
  background: rgba(251,251,249,.72);
  border-radius: 18px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  text-align: right;
  transition: .2s var(--ease);
}

.select-trigger:hover {
  background: var(--surface);
}

.select-trigger svg {
  width: 20px;
  height: 20px;
  color: var(--muted2);
  transition: transform .2s var(--ease);
}

.custom-select.open .select-trigger svg {
  transform: rotate(180deg);
}

.select-menu {
  position: absolute;
  z-index: 130;
  top: calc(100% + 8px);
  right: 0;
  left: 0;
  border: 1px solid var(--border);
  background: rgba(251,251,249,.96);
  backdrop-filter: blur(18px);
  border-radius: 20px;
  padding: 8px;
  box-shadow: 0 24px 80px rgba(40,38,43,.12);
  opacity: 0;
  transform: translateY(-6px) scale(.98);
  pointer-events: none;
  transition: .18s var(--ease);
}

.custom-select.open .select-menu {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.select-option {
  width: 100%;
  min-height: 44px;
  border: 0;
  background: transparent;
  border-radius: 14px;
  padding: 9px 12px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  text-align: right;
}

.select-option:hover {
  background: var(--soft);
}

.select-option.active {
  background: var(--ink);
  color: var(--bg);
}

.select-option small {
  grid-column: 2 / 3;
  color: var(--muted);
  font-size: 12px;
  margin-top: -5px;
  font-feature-settings: "ss01" off;
}

.select-option.active small {
  color: rgba(247,247,244,.72);
}

.select-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
}

.select-check {
  width: 18px;
  height: 18px;
  opacity: 0;
}

.select-option.active .select-check {
  opacity: 1;
}

/* Better form layout on custom select */
.form-card .select-shell {
  align-self: start;
}


/* V4 Masonry: fixed card width per breakpoint, variable height */
.masonry-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.content-masonry {
  --mo-card-width: 292px;
  column-width: var(--mo-card-width);
  column-gap: 18px;
  width: 100%;
}

.masonry-card {
  display: inline-block;
  width: 100%;
  margin: 0 0 18px;
  break-inside: avoid;
  vertical-align: top;
}

.mo-card {
  border: 1px solid var(--soft);
  border-radius: 18px;
  background: var(--surface);
  overflow: hidden;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
  position: relative;
}

.mo-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 70px rgba(40,38,43,.08);
  border-color: rgba(40,38,43,.14);
}

.mo-body {
  padding: 16px;
}

.mo-body h3,
.mo-card h3 {
  margin: 0 0 8px;
  font-size: 22px;
  line-height: 1.25;
}

.mo-body p,
.mo-card p {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.75;
  font-feature-settings: "ss01" off;
}

.mo-cover {
  margin: 10px;
  border-radius: 14px;
  min-height: 220px;
  overflow: hidden;
}

.mo-cover-eye {
  min-height: 310px;
  background:
    radial-gradient(circle at 52% 52%, #fff 0 8%, #000 9% 17%, #fff 18% 26%, transparent 27%),
    repeating-radial-gradient(circle at 52% 50%, #000 0 2px,#fff 2px 5px);
  filter: contrast(1.2);
}

.image-only,
.video-card {
  min-height: 360px;
  background: var(--ink);
}

.image-only img,
.video-card img {
  width: 100%;
  height: 100%;
  min-height: 360px;
  display: block;
  object-fit: cover;
  transition: transform .45s var(--ease), filter .45s var(--ease);
}

.hover-reveal:hover img {
  transform: scale(1.045);
  filter: saturate(.92) contrast(.96);
}

.reveal-layer {
  position: absolute;
  inset: auto 0 0;
  padding: 18px;
  color: var(--bg);
  background: linear-gradient(180deg, transparent, rgba(40,38,43,.82));
  transform: translateY(34%);
  transition: transform .25s var(--ease);
}

.hover-reveal:hover .reveal-layer {
  transform: translateY(0);
}

.reveal-layer h3 {
  font-size: 24px;
  margin: 10px 0 4px;
}

.reveal-layer p {
  color: rgba(247,247,244,.72);
  margin: 0;
}

.font-stage {
  min-height: 260px;
  display: grid;
  place-items: center;
  text-align: center;
  background: #F1EED9;
  color: #5E50D9;
  padding: 28px;
}

.font-stage strong {
  font-family: Georgia, serif;
  font-size: 62px;
  line-height: .85;
}

.font-stage b {
  display: block;
  margin-top: 12px;
  font-size: 50px;
  line-height: .92;
  color: #000;
}

.quote-card {
  min-height: 300px;
  padding: 24px;
  background: var(--ink);
  color: var(--bg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.quote-card svg {
  width: 42px;
  height: 42px;
  opacity: .65;
}

.quote-card h3 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 32px;
  line-height: 1.35;
}

.quote-card p {
  color: rgba(247,247,244,.68);
}

.tool-card .tool-icon {
  margin: 14px 14px 0;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background: var(--blue);
}

.tool-card .tool-icon svg {
  width: 34px;
  height: 34px;
}

.collection-card {
  background: var(--beige);
}

.collection-stack {
  height: 230px;
  position: relative;
  margin: 16px;
}

.collection-stack span {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(40,38,43,.1);
  border-radius: 18px;
  transform-origin: center;
}

.collection-stack span:nth-child(1) { transform: rotate(-5deg) translate(8px, 10px); }
.collection-stack span:nth-child(2) { transform: rotate(3deg) translate(-5px, 2px); }
.collection-stack span:nth-child(3) { transform: rotate(-1deg) translate(0, -8px); }

.palette-card .mini-palette {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: 210px;
  padding: 10px;
  gap: 8px;
}

.palette-card .mini-palette span {
  border-radius: 14px;
  border: 1px solid rgba(40,38,43,.08);
}

.profile-card {
  padding: 18px;
}

.profile-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.profile-head img {
  width: 68px;
  height: 68px;
  border-radius: 22px;
  object-fit: cover;
}

.profile-head h3 {
  margin: 0 0 4px;
}

.profile-head p {
  margin: 0;
  color: var(--muted);
  font-feature-settings: "ss01" off;
}

.profile-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}

.profile-stats span {
  background: var(--soft);
  border-radius: 14px;
  padding: 10px;
  color: var(--muted2);
  font-size: 13px;
}

.profile-stats b {
  display: block;
  color: var(--ink);
  font-size: 18px;
}

.play-button {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 66px;
  height: 66px;
  border: 1px solid rgba(247,247,244,.38);
  border-radius: 999px;
  background: rgba(247,247,244,.82);
  backdrop-filter: blur(12px);
  color: var(--ink);
  display: grid;
  place-items: center;
  transition: .22s var(--ease);
}

.play-button svg {
  width: 26px;
  height: 26px;
}

.video-card:hover .play-button {
  transform: translate(-50%, -50%) scale(1.06);
}

.checklist-card ul {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: grid;
  gap: 10px;
}

.checklist-card li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted2);
  font-feature-settings: "ss01" off;
}

.checklist-card li svg {
  width: 18px;
  height: 18px;
  color: var(--green);
}

.compact-news {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px;
  min-height: 130px;
  background: var(--surface);
}

.compact-news .dot {
  margin-top: 10px;
  flex: 0 0 auto;
}

.work-card .work-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 10px;
}

.work-card .work-grid span {
  min-height: 86px;
  border-radius: 14px;
  background: var(--soft);
}

.work-card .work-grid span:nth-child(1) { background: var(--sage); min-height: 130px; }
.work-card .work-grid span:nth-child(2) { background: var(--yellow); }
.work-card .work-grid span:nth-child(3) { background: var(--blue); }
.work-card .work-grid span:nth-child(4) { background: var(--beige); min-height: 130px; margin-top: -44px; }

/* Masonry responsive fixed widths */
@media (min-width: 1500px) {
  .content-masonry { --mo-card-width: 316px; }
}

@media (max-width: 1180px) {
  .content-masonry { --mo-card-width: 280px; }
}

@media (max-width: 760px) {
  .content-masonry {
    column-width: auto;
    column-count: 1;
  }

  .masonry-card {
    display: block;
  }
}


/* V5 wow components */
.shell-preview {
  display: grid;
  grid-template-columns: 280px 1fr;
  border: 1px solid var(--border);
  border-radius: 34px;
  overflow: hidden;
  background: rgba(251,251,249,.54);
  min-height: 640px;
}

.shell-sidebar {
  border-left: 1px solid var(--border);
  padding: 22px;
  background: rgba(251,251,249,.5);
}

.shell-logo-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}

.shell-logo-row .logo { width: 118px; height: auto; }

.shell-user-mini {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 20px;
  padding: 10px;
  margin-bottom: 20px;
}

.shell-user-mini img { width: 46px; height: 46px; border-radius: 16px; object-fit: cover; }
.shell-user-mini b { display: block; }
.shell-user-mini span { color: var(--muted); font-size: 13px; }

.shell-sidebar nav {
  display: grid;
  gap: 6px;
}

.shell-sidebar nav a {
  height: 48px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  color: var(--muted);
}

.shell-sidebar nav a.active,
.shell-sidebar nav a:hover {
  background: var(--ink);
  color: var(--bg);
}

.shell-sidebar nav svg { width: 20px; height: 20px; }

.shell-content { padding: 26px; }

.shell-top {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 22px;
}

.eyebrow {
  color: var(--muted);
  font-size: 14px;
}

.shell-top h3 {
  margin: 4px 0 0;
  font-size: 34px;
  font-family: var(--font-display);
  font-weight: 300;
}

.shell-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 14px;
}

.shell-card {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 24px;
  padding: 20px;
}

.shell-card.big {
  grid-row: span 2;
  min-height: 320px;
  background:
    radial-gradient(circle at 15% 15%, rgba(255,246,177,.95), transparent 34%),
    linear-gradient(135deg, var(--surface), var(--soft));
}

.shell-card h4 {
  margin: 16px 0 8px;
  font-size: 28px;
  line-height: 1.25;
}

.shell-card p {
  color: var(--muted);
  font-feature-settings: "ss01" off;
}

.progress {
  height: 10px;
  background: rgba(40,38,43,.08);
  border-radius: 99px;
  overflow: hidden;
  margin-top: 28px;
}

.progress span {
  display: block;
  height: 100%;
  background: var(--ink);
  border-radius: inherit;
}

.stat {
  min-height: 152px;
}

.stat svg {
  color: var(--muted);
}

.stat b {
  display: block;
  font-size: 42px;
  margin-top: 16px;
}

.stat span {
  color: var(--muted);
}

.task {
  grid-column: span 2;
}

.task h4 {
  margin-top: 0;
}

.task label {
  display: flex;
  gap: 10px;
  align-items: center;
  min-height: 34px;
  color: var(--muted2);
}

.editor-preview {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 18px;
}

.editor-canvas,
.publish-panel {
  border: 1px solid var(--border);
  border-radius: 30px;
  background: rgba(251,251,249,.62);
  padding: 24px;
}

.editor-toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  padding-bottom: 14px;
  margin-bottom: 20px;
}

.editor-toolbar button {
  border: 0;
  border-radius: 12px;
  background: var(--soft);
  padding: 8px 12px;
}

.editor-toolbar .active {
  background: var(--ink);
  color: var(--bg);
}

.editor-block {
  border-radius: 18px;
  padding: 16px;
  outline: 0;
  transition: .2s var(--ease);
}

.editor-block:focus {
  box-shadow: 0 0 0 2px rgba(40,38,43,.14);
  background: var(--surface);
}

.title-block {
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 1.1;
}

.paragraph-block {
  font-size: 20px;
  line-height: 1.9;
  color: var(--muted2);
  font-feature-settings: "ss01" off;
}

.quote-block {
  margin: 12px 0;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1.35;
}

.upload-block {
  margin-top: 14px;
  border: 1.5px dashed rgba(40,38,43,.18);
  border-radius: 24px;
  min-height: 180px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  color: var(--muted);
  background: rgba(238,238,232,.45);
}

.upload-block svg { width: 42px; height: 42px; color: var(--ink); }
.upload-block b { color: var(--ink); font-size: 20px; }

.publish-panel h3 {
  margin-top: 0;
  font-size: 26px;
}

.publish-panel label {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
  color: var(--muted2);
}

.tag-input {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 54px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 18px;
  padding: 8px;
}

.tag-input span {
  background: var(--soft);
  border-radius: 99px;
  padding: 7px 10px;
}

.tag-input input {
  border: 0;
  outline: 0;
  background: transparent;
  flex: 1;
  min-width: 90px;
}

.publish-score {
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 18px 0;
}

.publish-score b {
  display: block;
  font-size: 34px;
}

.publish-score span {
  color: var(--muted);
}

.circle-progress {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: conic-gradient(var(--ink) 86%, var(--soft) 0);
  display: grid;
  place-items: center;
}

.circle-progress span {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--surface);
}

.full-btn { width: 100%; margin-top: 8px; }

.community-grid {
  display: grid;
  grid-template-columns: .9fr 1fr 1fr;
  gap: 18px;
}

.creator-card,
.comments-panel,
.activity-feed {
  border: 1px solid var(--border);
  border-radius: 28px;
  background: rgba(251,251,249,.62);
  padding: 20px;
}

.creator-cover {
  height: 110px;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--sage), var(--yellow));
}

.creator-card > img {
  width: 86px;
  height: 86px;
  object-fit: cover;
  border-radius: 28px;
  border: 6px solid var(--surface);
  margin-top: -38px;
}

.creator-card h3 {
  margin: 8px 0 4px;
  font-size: 28px;
}

.creator-card p {
  color: var(--muted);
  margin-top: 0;
  font-feature-settings: "ss01" off;
}

.creator-card div:not(.creator-cover) {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.creator-card div:not(.creator-cover) span {
  background: var(--soft);
  border-radius: 14px;
  padding: 9px 12px;
  color: var(--muted2);
}

.comments-panel h3,
.activity-feed h3 {
  margin-top: 0;
  font-size: 28px;
}

.comment {
  display: flex;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}

.comment svg {
  width: 24px;
  height: 24px;
  color: var(--muted);
  margin-top: 2px;
}

.comment p {
  margin: 4px 0 0;
  color: var(--muted);
  font-feature-settings: "ss01" off;
}

.activity {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 13px 0;
}

.activity span {
  width: 12px;
  height: 12px;
  border-radius: 99px;
  background: var(--red);
  margin-top: 8px;
}

.activity:nth-child(3) span { background: var(--blue); }
.activity:nth-child(4) span { background: var(--yellow); }
.activity:nth-child(5) span { background: var(--green); }

.activity p {
  margin: 0;
  color: var(--muted2);
  font-feature-settings: "ss01" off;
}

.analytics-grid {
  display: grid;
  grid-template-columns: .9fr 1.3fr .8fr;
  gap: 18px;
}

.metric-card,
.chart-card,
.donut-card {
  border: 1px solid var(--border);
  border-radius: 28px;
  background: rgba(251,251,249,.62);
  padding: 24px;
}

.hero-metric {
  background: var(--ink);
  color: var(--bg);
}

.hero-metric span,
.hero-metric p {
  color: rgba(247,247,244,.72);
}

.hero-metric b {
  display: block;
  font-size: 72px;
  line-height: 1;
  margin: 22px 0 12px;
}

.chart-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-head h3,
.donut-card h3 {
  margin: 0;
  font-size: 26px;
}

.chart-head span {
  color: var(--muted);
}

.bar-chart {
  height: 260px;
  display: flex;
  align-items: end;
  gap: 10px;
  padding-top: 24px;
}

.bar-chart span {
  flex: 1;
  border-radius: 99px 99px 10px 10px;
  background: linear-gradient(180deg, var(--ink), rgba(40,38,43,.35));
}

.donut {
  width: 180px;
  height: 180px;
  margin: 28px auto;
  border-radius: 50%;
  background: conic-gradient(var(--yellow) 0 48%, var(--blue) 48% 78%, var(--beige) 78% 100%);
  position: relative;
}

.donut:after {
  content: "";
  position: absolute;
  inset: 34px;
  background: var(--surface);
  border-radius: 50%;
}

.legend {
  display: grid;
  gap: 8px;
}

.legend span {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted2);
}

.legend i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.command-demo {
  border: 1px solid var(--border);
  background: rgba(251,251,249,.62);
  border-radius: 28px;
  padding: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(40,38,43,.16);
  backdrop-filter: blur(5px);
  display: none;
  z-index: 180;
}

.modal-backdrop.show {
  display: block;
}

.modal {
  position: fixed;
  z-index: 190;
  top: 50%;
  left: 50%;
  width: min(560px, calc(100vw - 32px));
  transform: translate(-50%, -48%) scale(.98);
  opacity: 0;
  pointer-events: none;
  transition: .2s var(--ease);
  border: 1px solid var(--border);
  border-radius: 30px;
  background: rgba(251,251,249,.96);
  box-shadow: 0 30px 100px rgba(40,38,43,.18);
  backdrop-filter: blur(18px);
  padding: 18px;
}

.modal.open {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  pointer-events: auto;
}

.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

.modal-head h3 {
  margin: 0;
  font-size: 28px;
}

.create-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.create-grid button {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 20px;
  min-height: 130px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  font-size: 22px;
}

.create-grid button:hover {
  background: var(--soft);
}

.create-grid svg {
  width: 34px;
  height: 34px;
}

.command-modal {
  padding: 12px;
}

.command-search {
  height: 62px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 10px;
}

.command-search svg {
  width: 24px;
  height: 24px;
  color: var(--muted);
}

.command-search input {
  border: 0;
  outline: 0;
  background: transparent;
  flex: 1;
  font-size: 20px;
}

.command-list {
  padding: 10px 0 0;
  display: grid;
  gap: 6px;
}

.command-list button {
  border: 0;
  background: transparent;
  border-radius: 16px;
  min-height: 52px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 0 12px;
  text-align: right;
}

.command-list button:hover {
  background: var(--soft);
}

.command-list svg {
  width: 22px;
  height: 22px;
  color: var(--muted);
}

kbd {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 8px;
  padding: 4px 7px;
  color: var(--muted);
  direction: ltr;
}

.bottom-sheet {
  position: fixed;
  z-index: 200;
  right: 50%;
  bottom: 0;
  width: min(520px, 100vw);
  transform: translate(50%, 105%);
  transition: .25s var(--ease);
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: 30px 30px 0 0;
  background: rgba(251,251,249,.98);
  box-shadow: 0 -30px 80px rgba(40,38,43,.14);
  padding: 14px 18px 24px;
}

.bottom-sheet.open {
  transform: translate(50%, 0);
}

.sheet-handle {
  width: 58px;
  height: 5px;
  border-radius: 99px;
  background: var(--border);
  margin: 0 auto 16px;
}

.bottom-sheet h3 {
  margin: 0 0 12px;
  font-size: 26px;
}

.bottom-sheet button {
  width: 100%;
  min-height: 54px;
  border: 0;
  background: transparent;
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: right;
  padding: 0 12px;
  font-size: 18px;
}

.bottom-sheet button:hover {
  background: var(--soft);
}

/* Stronger mobile experience */
@media(max-width: 980px) {
  .shell-preview,
  .editor-preview,
  .community-grid,
  .analytics-grid {
    grid-template-columns: 1fr;
  }

  .shell-sidebar {
    display: none;
  }

  .shell-grid {
    grid-template-columns: 1fr 1fr;
  }

  .shell-card.big,
  .task {
    grid-column: 1 / -1;
  }
}

@media(max-width: 640px) {
  .shell-top {
    display: grid;
  }

  .shell-grid {
    grid-template-columns: 1fr;
  }

  .title-block {
    font-size: 34px;
  }

  .paragraph-block {
    font-size: 17px;
  }

  .quote-block {
    font-size: 24px;
  }

  .publish-panel {
    padding: 18px;
  }

  .create-grid {
    grid-template-columns: 1fr;
  }

  .hero-metric b {
    font-size: 56px;
  }

  .bar-chart {
    height: 180px;
  }
}


/* V6 fixes */
.tabs button.active:hover,
.tabs .active:hover {
  background: var(--ink);
  color: var(--bg);
}

.platform-sidebar nav a,
.side-link {
  justify-content: flex-start;
}

.platform-sidebar nav a svg,
.side-link svg {
  order: -1;
  margin-inline-start: 0;
  margin-inline-end: 10px;
}

.command-top {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}

.command-top .command-search {
  border-bottom: 0;
  height: 54px;
}

.command-close {
  align-self: center;
}

.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.sheet-head h3 {
  margin: 0;
}

/* Mobile preview V6 */
.phone {
  overflow: hidden;
}

.phone-top {
  position: relative;
  z-index: 4;
}

.phone-icon-btn {
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--soft);
  display: grid;
  place-items: center;
  position: relative;
}

.phone-icon-btn span {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--red);
}

.phone-drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 78%;
  z-index: 20;
  background: rgba(251,251,249,.96);
  border-left: 1px solid var(--border);
  box-shadow: -20px 0 60px rgba(40,38,43,.12);
  backdrop-filter: blur(18px);
  transform: translateX(105%);
  transition: .24s var(--ease);
  padding: 22px;
}

.phone-drawer.open {
  transform: translateX(0);
}

.phone-drawer h3 {
  font-size: 28px;
  margin: 28px 0 18px;
}

.phone-drawer a {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--border);
  color: var(--muted2);
}

.drawer-close {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 14px;
  background: var(--soft);
}

.phone-notifications {
  position: absolute;
  top: 76px;
  left: 18px;
  right: 18px;
  z-index: 18;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: rgba(251,251,249,.96);
  box-shadow: 0 20px 60px rgba(40,38,43,.14);
  padding: 16px;
  opacity: 0;
  transform: translateY(-8px) scale(.98);
  pointer-events: none;
  transition: .2s var(--ease);
}

.phone-notifications.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.phone-notifications b {
  display: block;
  font-size: 20px;
  margin-bottom: 8px;
}

.phone-notifications p {
  margin: 0;
  padding: 10px 0;
  border-top: 1px solid var(--border);
  color: var(--muted2);
  font-feature-settings: "ss01" off;
}

.phone-segments {
  display: flex;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 5px;
  margin-top: 14px;
  background: var(--surface);
}

.phone-segments button {
  flex: 1;
  min-height: 38px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: var(--muted);
}

.phone-segments button.active,
.phone-segments button.active:hover {
  background: var(--ink);
  color: var(--bg);
}

.phone-quick {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin: 14px 0;
}

.phone-quick button {
  border: 0;
  min-height: 68px;
  border-radius: 18px;
  background: var(--soft);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  color: var(--ink);
}

.phone-quick button:nth-child(1) { background: var(--blue); }
.phone-quick button:nth-child(2) { background: var(--yellow); }
.phone-quick button:nth-child(3) { background: var(--beige); }

.phone-quick svg {
  width: 22px;
  height: 22px;
}

.phone-quick span {
  font-size: 12px;
}

.phone-feed {
  display: grid;
  gap: 12px;
  padding-bottom: 92px;
}

.phone-content-card {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 22px;
  padding: 16px;
  min-height: 130px;
}

.phone-content-card.large {
  min-height: 190px;
  background:
    radial-gradient(circle at 20% 10%, rgba(255,246,177,.75), transparent 40%),
    var(--surface);
}

.phone-content-card h4 {
  font-size: 22px;
  line-height: 1.25;
  margin: 16px 0 8px;
}

.phone-content-card p {
  color: var(--muted);
  margin: 0;
  font-feature-settings: "ss01" off;
}

.phone-content-card.image {
  min-height: 180px;
  background: linear-gradient(135deg, var(--sage), var(--grayblue));
}

.phone-content-card.beige {
  background: var(--beige);
}

.phone-fab {
  position: absolute;
  left: 28px;
  bottom: 104px;
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  display: grid;
  place-items: center;
  box-shadow: 0 14px 40px rgba(40,38,43,.18);
  z-index: 5;
}

.phone-fab svg {
  width: 26px;
  height: 26px;
}

.bottom-nav button:hover {
  background: var(--soft);
  color: var(--ink);
}

.bottom-nav button.active:hover {
  background: var(--ink);
  color: var(--bg);
}


/* V7 fixes */
.phone-top .logo{
  width: 118px;
  height: auto;
  color: var(--ink);
  flex: 0 0 auto;
}

.command-list button,
.bottom-sheet button,
.phone-quick button,
.phone-drawer a{
  cursor: pointer;
}

.phone-drawer a:hover,
.command-list button:hover,
.bottom-sheet button:hover{
  background: var(--soft);
  border-radius: 14px;
}

.phone-notifications p:last-child{
  border-bottom: 0;
}


/* V8: cleaner docs + version */
.version-pill{
  display:inline-flex;
  align-items:center;
  height:34px;
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:999px;
  padding:0 14px;
  color:var(--muted2);
  margin-bottom:18px;
  font-size:14px;
}

.docs-section{
  padding-top:10px;
}

.preview-panel,
.layout-preview,
.dropdown-demo,
.form-card,
.quick-panel,
.empty-state,
.skeleton-card,
.toast,
.states-showcase,
.mobile-component{
  box-shadow: 0 1px 0 rgba(40,38,43,.02);
}

/* V8: custom checkbox/radio */
.control-row{
  position:relative;
  display:flex !important;
  align-items:center;
  gap:10px;
  min-height:34px;
  cursor:pointer;
  color:var(--muted2);
  user-select:none;
  font-feature-settings:"ss01" off;
}

.control-row input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.control-row > span:first-of-type{
  width:18px;
  height:18px;
  flex:0 0 18px;
  border:1.5px solid rgba(40,38,43,.28);
  background:var(--surface);
  display:inline-grid;
  place-items:center;
  transition:.18s var(--ease);
}

.sf-checkbox + span{
  border-radius:5px;
}

.sf-radio + span{
  border-radius:999px;
}

.sf-checkbox:checked + span{
  background:var(--ink);
  border-color:var(--ink);
}

.sf-checkbox:checked + span:after{
  content:"";
  width:9px;
  height:5px;
  border-right:2px solid var(--bg);
  border-bottom:2px solid var(--bg);
  transform:rotate(45deg) translate(-1px,-1px);
}

.sf-radio:checked + span{
  border-color:var(--ink);
  box-shadow:inset 0 0 0 4px var(--surface);
  background:var(--ink);
}

.control-row:hover > span:first-of-type{
  border-color:var(--ink);
}

.control-row.disabled{
  opacity:.45;
  cursor:not-allowed;
}

.task label.control-row{
  justify-content:flex-start;
}

/* V8: states section */
.states-showcase{
  border:1px solid var(--border);
  background:rgba(251,251,249,.62);
  border-radius:30px;
  padding:24px;
  display:grid;
  gap:22px;
}

.state-group{
  border-bottom:1px solid var(--border);
  padding-bottom:22px;
}

.state-group:last-child{
  border-bottom:0;
  padding-bottom:0;
}

.state-group h3{
  margin:0 0 14px;
  font-size:24px;
}

.state-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

.btn:disabled,
.input:disabled{
  opacity:.45;
  cursor:not-allowed;
  filter:saturate(.2);
}

.state-hover{
  background:var(--soft) !important;
  transform:translateY(-1px);
}

.btn.is-active{
  box-shadow:inset 0 0 0 2px rgba(247,247,244,.45);
  transform:scale(.98);
}

.spinner{
  width:16px;
  height:16px;
  border:2px solid rgba(247,247,244,.35);
  border-top-color:var(--bg);
  border-radius:50%;
  animation:spin .8s linear infinite;
}

@keyframes spin{to{transform:rotate(360deg)}}

.inputs-state{
  display:grid;
  grid-template-columns:repeat(4, minmax(160px,1fr));
}

.focus-demo{
  box-shadow:0 0 0 3px rgba(40,38,43,.12);
  border-color:rgba(40,38,43,.35);
}

.input.error{
  border-color:var(--red);
  box-shadow:0 0 0 3px rgba(255,81,74,.12);
}

.controls-state{
  display:grid;
  grid-template-columns:repeat(5, minmax(140px,1fr));
  gap:12px;
}

.state-card-grid{
  display:grid;
  grid-template-columns:repeat(5, minmax(120px,1fr));
  gap:12px;
}

.mini-state-card{
  min-height:110px;
  border:1px solid var(--border);
  border-radius:20px;
  background:var(--surface);
  display:grid;
  place-items:center;
  color:var(--muted2);
  transition:.2s var(--ease);
}

.mini-state-card.hover{
  transform:translateY(-4px);
  box-shadow:0 20px 60px rgba(40,38,43,.08);
}

.mini-state-card.active{
  background:var(--ink);
  color:var(--bg);
}

.mini-state-card.disabled{
  opacity:.45;
}

.loading-card{
  display:grid;
  gap:10px;
  padding:18px;
  align-content:center;
}

.loading-card span,
.loading-card b{
  display:block;
  width:100%;
  height:18px;
  border-radius:99px;
  background:linear-gradient(90deg,var(--soft),#fff,var(--soft));
  background-size:200%;
  animation:shimmer 1.2s infinite;
}

.loading-card b{
  width:68%;
}

/* V8: stronger mobile UX */
.mobile-components-grid{
  margin-top:24px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

.mobile-component{
  border:1px solid var(--border);
  border-radius:26px;
  background:rgba(251,251,249,.62);
  padding:20px;
}

.mobile-component h3{
  margin:0 0 12px;
  font-size:22px;
}

.mobile-component p{
  color:var(--muted);
  margin:12px 0 0;
  font-feature-settings:"ss01" off;
}

.swipe-row{
  min-height:76px;
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:20px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:12px;
  padding:10px;
}

.swipe-row button{
  width:44px;
  height:44px;
  border:0;
  border-radius:15px;
  background:var(--soft);
  display:grid;
  place-items:center;
}

.swipe-row b{
  display:block;
}

.swipe-row span{
  color:var(--muted);
  font-size:13px;
}

.mobile-composer{
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:22px;
  padding:12px;
}

.mobile-composer textarea{
  width:100%;
  min-height:88px;
  border:0;
  outline:0;
  resize:none;
  background:transparent;
  font-feature-settings:"ss01" off;
}

.mobile-composer div{
  display:flex;
  justify-content:space-between;
  gap:8px;
}

.sheet-filter-list{
  display:grid;
  gap:10px;
  margin-bottom:18px;
}

@media(max-width:980px){
  .inputs-state,
  .controls-state,
  .state-card-grid,
  .mobile-components-grid{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:640px){
  .inputs-state,
  .controls-state,
  .state-card-grid,
  .mobile-components-grid{
    grid-template-columns:1fr;
  }

  .hero p{
    font-size:16px;
  }
}


/* V9 interactive docs */
.playground{
  display:grid;
  grid-template-columns:300px 1fr;
  gap:18px;
}

.playground-controls,
.playground-preview,
.tokens-board,
.responsive-lab{
  border:1px solid var(--border);
  border-radius:30px;
  background:rgba(251,251,249,.62);
  padding:22px;
}

.playground-controls h3{
  margin:0 0 18px;
  font-size:26px;
}

.playground-controls label{
  display:grid;
  gap:8px;
  margin-bottom:14px;
  color:var(--muted2);
}

.pg-select{
  height:48px;
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:16px;
  padding:0 12px;
  outline:0;
}

.pg-stage{
  min-height:230px;
  border:1px dashed rgba(40,38,43,.18);
  border-radius:26px;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 50% 20%, rgba(255,246,177,.38), transparent 36%),
    rgba(238,238,232,.28);
}

#pgButton.small{
  min-height:36px;
  padding:0 12px;
  font-size:14px;
}

#pgButton.large{
  min-height:58px;
  border-radius:20px;
  padding:0 28px;
  font-size:24px;
}

.code-preview{
  direction:ltr;
  text-align:left;
  white-space:pre-wrap;
  margin:16px 0 0;
  border:1px solid var(--border);
  background:var(--ink);
  color:var(--bg);
  border-radius:20px;
  padding:18px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13px;
  line-height:1.7;
}

.tokens-board{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  position:relative;
}

.token-group h3{
  margin:0 0 12px;
  font-size:24px;
}

.token-item{
  width:100%;
  min-height:52px;
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:16px;
  padding:10px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:10px;
  text-align:right;
  margin-bottom:8px;
  transition:.2s var(--ease);
}

.token-item:hover{
  transform:translateY(-1px);
  background:var(--soft);
}

.token-item span{
  width:28px;
  height:28px;
  border-radius:10px;
  border:1px solid rgba(40,38,43,.12);
}

.token-item code{
  direction:ltr;
  color:var(--muted);
  font-size:12px;
}

.token-item.simple{
  grid-template-columns:1fr auto;
}

.copy-toast{
  position:fixed;
  bottom:24px;
  right:50%;
  transform:translateX(50%) translateY(20px);
  opacity:0;
  pointer-events:none;
  z-index:300;
  background:var(--ink);
  color:var(--bg);
  border-radius:999px;
  padding:10px 16px;
  transition:.2s var(--ease);
}

.copy-toast.show{
  opacity:1;
  transform:translateX(50%) translateY(0);
}

.responsive-lab{
  display:grid;
  grid-template-columns:1.4fr .9fr .55fr;
  gap:18px;
  align-items:end;
}

.device-frame{
  border:1px solid var(--border);
  border-radius:28px;
  background:var(--surface);
  padding:14px;
}

.device-label{
  color:var(--muted);
  margin-bottom:10px;
  font-size:14px;
}

.mini-app{
  border:1px solid var(--border);
  background:var(--bg);
  border-radius:22px;
  overflow:hidden;
}

.desktop-mini{
  height:310px;
  display:grid;
  grid-template-columns:90px 1fr;
}

.desktop-mini aside{
  background:var(--soft);
  border-left:1px solid var(--border);
}

.desktop-mini main{
  padding:14px;
}

.desktop-mini header,
.tablet-mini header,
.mobile-mini header{
  height:42px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  margin-bottom:14px;
}

.mini-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
}

.mini-grid span{
  min-height:88px;
  border-radius:16px;
  background:var(--soft);
}

.mini-grid span:nth-child(1){background:var(--sage)}
.mini-grid span:nth-child(2){background:var(--yellow)}
.mini-grid span:nth-child(3){background:var(--blue)}
.mini-grid span:nth-child(4){background:var(--beige)}

.tablet-mini{
  height:360px;
  padding:14px;
}

.tablet-mini .mini-grid{
  grid-template-columns:1fr;
}

.mobile-mini{
  height:430px;
  padding:14px;
  position:relative;
}

.mobile-mini nav{
  height:36px;
  border:1px solid var(--border);
  border-radius:16px;
  margin-bottom:12px;
}

.mobile-mini > span{
  display:block;
  height:120px;
  border-radius:18px;
  background:var(--sage);
  margin-bottom:12px;
}

.mobile-mini > span:nth-of-type(2){
  height:86px;
  background:var(--beige);
}

.mobile-mini footer{
  position:absolute;
  right:14px;
  left:14px;
  bottom:14px;
  height:54px;
  border-radius:20px;
  background:var(--ink);
}

.phone-screen{
  display:none;
  gap:12px;
}

.phone-screen.active{
  display:grid;
}

.add-card{
  display:grid;
  gap:10px;
  align-content:start;
}

.profile-mini{
  text-align:center;
}

.profile-mini img{
  width:86px;
  height:86px;
  border-radius:28px;
  object-fit:cover;
  margin:0 auto 10px;
}

.profile-mini div{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:14px;
}

.profile-mini div span{
  background:var(--soft);
  border-radius:14px;
  padding:10px;
  color:var(--muted2);
}

@media(max-width:980px){
  .playground,
  .tokens-board,
  .responsive-lab{
    grid-template-columns:1fr;
  }
}


/* V10 product screens and fixes */
.quick-card{
  position:relative;
  align-items:flex-end;
  text-align:right;
}

.quick-card svg{
  position:absolute;
  top:24px;
  left:24px;
  right:auto;
}

.quick-card span{
  align-self:flex-end;
  margin-top:auto;
}

/* Product screens */
.product-screen-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}

.screen-card{
  min-height:360px;
  border:1px solid var(--border);
  border-radius:30px;
  background:rgba(251,251,249,.62);
  padding:22px;
  transition:.22s var(--ease);
  overflow:hidden;
}

.screen-card:hover{
  transform:translateY(-4px);
  box-shadow:0 22px 70px rgba(40,38,43,.08);
}

.screen-label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:34px;
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:999px;
  padding:0 12px;
  color:var(--muted2);
  font-size:13px;
  margin-bottom:18px;
}

.screen-label svg{
  width:16px;
  height:16px;
}

.screen-card h3{
  font-size:30px;
  line-height:1.2;
  margin:0 0 12px;
}

.screen-card p{
  color:var(--muted);
  font-feature-settings:"ss01" off;
  line-height:1.8;
}

.screen-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:20px 0;
}

.screen-meta span{
  background:var(--soft);
  border-radius:999px;
  padding:7px 10px;
  color:var(--muted2);
  font-size:13px;
}

.reader-actions{
  display:flex;
  gap:8px;
  margin-top:24px;
}

.tool-screen{
  background:
    radial-gradient(circle at 20% 10%, rgba(155,169,234,.55), transparent 42%),
    rgba(251,251,249,.62);
}

.tool-hero-icon{
  width:84px;
  height:84px;
  border-radius:28px;
  background:var(--blue);
  display:grid;
  place-items:center;
  margin-bottom:24px;
}

.tool-hero-icon svg{
  width:42px;
  height:42px;
}

.feature-list{
  display:grid;
  gap:8px;
  margin:18px 0;
}

.feature-list span{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--muted2);
}

.feature-list svg{
  width:18px;
  height:18px;
  color:var(--green);
}

.profile-screen{
  text-align:center;
}

.profile-cover-v10{
  height:110px;
  border-radius:24px;
  background:linear-gradient(135deg,var(--sage),var(--yellow));
  margin-bottom:-42px;
}

.profile-screen img{
  width:92px;
  height:92px;
  border-radius:30px;
  object-fit:cover;
  border:7px solid var(--surface);
}

.profile-tabs-v10{
  display:flex;
  gap:6px;
  border:1px solid var(--border);
  border-radius:18px;
  padding:5px;
  margin-top:18px;
}

.profile-tabs-v10 button{
  flex:1;
  border:0;
  background:transparent;
  border-radius:13px;
  min-height:38px;
  color:var(--muted);
}

.profile-tabs-v10 .active{
  background:var(--ink);
  color:var(--bg);
}

.collection-preview-v10{
  height:180px;
  position:relative;
  margin-bottom:22px;
}

.collection-preview-v10 span{
  position:absolute;
  inset:0;
  border-radius:24px;
  border:1px solid rgba(40,38,43,.1);
}

.collection-preview-v10 span:nth-child(1){background:var(--pink);transform:rotate(-5deg) translate(10px,10px)}
.collection-preview-v10 span:nth-child(2){background:var(--sage);transform:rotate(3deg) translate(-8px,2px)}
.collection-preview-v10 span:nth-child(3){background:var(--yellow);transform:rotate(-1deg) translate(0,-9px)}

/* Reader */
.reader-layout{
  display:grid;
  grid-template-columns:220px minmax(0,1fr) 72px;
  gap:18px;
  align-items:start;
}

.reader-toc,
.reader-article,
.reader-side-actions{
  border:1px solid var(--border);
  border-radius:30px;
  background:rgba(251,251,249,.62);
}

.reader-toc{
  padding:18px;
  position:sticky;
  top:20px;
}

.reader-toc b{
  display:block;
  margin-bottom:14px;
  font-size:20px;
}

.reader-toc a{
  display:block;
  color:var(--muted);
  padding:10px 0;
  border-bottom:1px solid var(--border);
}

.reader-toc .active{
  color:var(--ink);
}

.reader-article{
  padding:clamp(24px,4vw,52px);
}

.reader-top{
  display:flex;
  gap:10px;
  margin-bottom:24px;
}

.reader-article h1{
  font-family:var(--font-display);
  font-weight:300;
  font-size:clamp(44px,6vw,86px);
  line-height:1;
  margin:0 0 20px;
}

.reader-article p{
  font-size:20px;
  line-height:2;
  color:var(--muted2);
  font-feature-settings:"ss01" off;
}

.reader-article .lead{
  font-size:24px;
  color:var(--ink);
}

.author-row{
  display:flex;
  align-items:center;
  gap:12px;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:16px 0;
  margin:26px 0;
}

.author-row img{
  width:54px;
  height:54px;
  border-radius:18px;
  object-fit:cover;
}

.author-row b,
.author-row span{
  display:block;
}

.author-row span{
  color:var(--muted);
}

.reader-article blockquote{
  margin:28px 0;
  background:var(--ink);
  color:var(--bg);
  border-radius:28px;
  padding:28px;
  font-family:var(--font-display);
  font-size:34px;
  line-height:1.45;
}

.reader-side-actions{
  padding:10px;
  display:grid;
  gap:8px;
  position:sticky;
  top:20px;
}

.reader-side-actions button{
  width:50px;
  height:50px;
  border:0;
  border-radius:18px;
  background:var(--soft);
  display:grid;
  place-items:center;
}

/* Search page */
.search-page{
  border:1px solid var(--border);
  background:rgba(251,251,249,.62);
  border-radius:30px;
  padding:22px;
}

.search-page-head{
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  margin-bottom:16px;
}

.result-tabs{
  display:flex;
  gap:8px;
  border-bottom:1px solid var(--border);
  padding-bottom:14px;
  margin-bottom:18px;
  overflow:auto;
}

.result-tabs button{
  border:0;
  background:transparent;
  border-radius:16px;
  min-height:42px;
  padding:0 14px;
  display:flex;
  gap:8px;
  align-items:center;
  color:var(--muted);
}

.result-tabs .active{
  background:var(--ink);
  color:var(--bg);
}

.result-tabs span{
  opacity:.72;
}

.results-layout{
  display:grid;
  grid-template-columns:240px 1fr;
  gap:18px;
}

.filters-panel{
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:24px;
  padding:18px;
  align-self:start;
}

.filters-panel h3{
  margin:0 0 14px;
}

.results-list{
  display:grid;
  gap:12px;
}

.result-item,
.empty-inline{
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:24px;
  padding:18px;
}

.result-item h3{
  margin:12px 0 6px;
  font-size:26px;
}

.result-item p,
.empty-inline p{
  color:var(--muted);
  font-feature-settings:"ss01" off;
}

.empty-inline{
  display:flex;
  align-items:center;
  gap:14px;
}

.empty-inline svg{
  width:34px;
  height:34px;
  color:var(--muted);
}

.empty-inline b{
  font-size:20px;
}

/* Drawers and centers */
.drawer-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}

.drawer-preview{
  border:1px solid var(--border);
  border-radius:30px;
  background:rgba(251,251,249,.62);
  padding:20px;
  min-height:360px;
}

.drawer-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:18px;
}

.drawer-head h3{
  margin:0;
  font-size:26px;
}

.drawer-head button{
  width:38px;
  height:38px;
  border:0;
  border-radius:14px;
  background:var(--soft);
}

.collection-choice{
  min-height:58px;
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:18px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:10px;
  padding:0 12px;
  margin-bottom:10px;
}

.collection-choice span{
  width:14px;
  height:14px;
  border-radius:999px;
}

.collection-choice svg{
  opacity:0;
}

.collection-choice.active{
  background:var(--ink);
  color:var(--bg);
}

.collection-choice.active svg{
  opacity:1;
}

.notice{
  display:flex;
  gap:12px;
  padding:14px 0;
  border-bottom:1px solid var(--border);
}

.notice > span{
  width:11px;
  height:11px;
  border-radius:999px;
  background:var(--red);
  margin-top:8px;
}

.notice:nth-child(3) > span{background:var(--blue)}
.notice:nth-child(4) > span{background:var(--yellow)}

.notice p{
  margin:2px 0 0;
  color:var(--muted);
  font-feature-settings:"ss01" off;
}

.upload-row{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:12px;
  align-items:start;
  border:1px solid var(--border);
  border-radius:20px;
  background:var(--surface);
  padding:14px;
  margin-bottom:12px;
}

.upload-row > svg{
  width:30px;
  height:30px;
  color:var(--muted);
}

.upload-row b,
.upload-row span{
  display:block;
}

.upload-row span{
  color:var(--muted);
  font-size:13px;
}

.upload-row.done > svg{
  color:var(--green);
}

body.reading-mode{
  --bg:#F2EBDD;
  --surface:#FBF5E9;
  --soft:#E8DDCB;
}

@media(max-width:1100px){
  .product-screen-grid,
  .drawer-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .reader-layout{
    grid-template-columns:1fr;
  }

  .reader-toc,
  .reader-side-actions{
    position:static;
  }

  .reader-side-actions{
    display:flex;
  }
}

@media(max-width:760px){
  .product-screen-grid,
  .drawer-grid,
  .results-layout,
  .search-page-head{
    grid-template-columns:1fr;
  }

  .filters-panel{
    order:2;
  }

  .reader-article p{
    font-size:17px;
  }

  .reader-article .lead{
    font-size:20px;
  }

  .quick-card svg{
    top:18px;
    left:18px;
  }
}


/* V11 Dark Mode */
.theme-toggle{
  position:fixed;
  top:18px;
  left:18px;
  z-index:260;
  min-height:46px;
  border:1px solid var(--border);
  background:rgba(251,251,249,.72);
  backdrop-filter:blur(16px);
  border-radius:999px;
  padding:0 14px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--ink);
  box-shadow:0 14px 50px rgba(40,38,43,.08);
  transition:.22s var(--ease);
}

.theme-toggle:hover{
  transform:translateY(-1px);
  background:var(--surface);
}

.theme-toggle svg{
  width:18px;
  height:18px;
}

body.dark-mode{
  --bg:#171616;
  --ink:#F7F7F4;
  --surface:#202020;
  --soft:#2B2A28;
  --border:#343330;
  --muted:#A9A59C;
  --muted2:#C7C2B8;

  --red:#FF675F;
  --yellow:#D8C86A;
  --blue:#8C99DB;
  --beige:#B98F7E;
  --green:#91AB9E;
  --sage:#6F897C;
  --brown:#B78366;
  --purple:#B8A8FF;
  --grayblue:#89919A;
  --pink:#F0A2B3;
}

body.dark-mode .sf-texture{
  background:
    linear-gradient(180deg,rgba(23,22,22,.2),rgba(23,22,22,.98) 78%),
    radial-gradient(ellipse at 28% 0%,rgba(255,255,255,.08),transparent 48%),
    radial-gradient(ellipse at 76% 10%,rgba(155,169,234,.12),transparent 38%);
}

body.dark-mode .theme-toggle{
  background:rgba(32,32,32,.72);
  box-shadow:0 14px 50px rgba(0,0,0,.25);
}

body.dark-mode .docs-sidebar,
body.dark-mode .preview-panel,
body.dark-mode .layout-preview,
body.dark-mode .dropdown-demo,
body.dark-mode .form-card,
body.dark-mode .quick-panel,
body.dark-mode .empty-state,
body.dark-mode .skeleton-card,
body.dark-mode .toast,
body.dark-mode .states-showcase,
body.dark-mode .mobile-component,
body.dark-mode .hero,
body.dark-mode .playground-controls,
body.dark-mode .playground-preview,
body.dark-mode .tokens-board,
body.dark-mode .responsive-lab,
body.dark-mode .screen-card,
body.dark-mode .reader-toc,
body.dark-mode .reader-article,
body.dark-mode .reader-side-actions,
body.dark-mode .search-page,
body.dark-mode .drawer-preview,
body.dark-mode .shell-preview,
body.dark-mode .editor-canvas,
body.dark-mode .publish-panel,
body.dark-mode .creator-card,
body.dark-mode .comments-panel,
body.dark-mode .activity-feed,
body.dark-mode .metric-card,
body.dark-mode .chart-card,
body.dark-mode .donut-card,
body.dark-mode .command-demo{
  background:rgba(32,32,32,.64);
}

body.dark-mode .search,
body.dark-mode .input,
body.dark-mode .textarea,
body.dark-mode .pg-select,
body.dark-mode .tag-input,
body.dark-mode .modal,
body.dark-mode .bottom-sheet,
body.dark-mode .dropdown,
body.dark-mode .select-menu,
body.dark-mode .phone-notifications,
body.dark-mode .phone-drawer,
body.dark-mode .mobile-composer,
body.dark-mode .swipe-row,
body.dark-mode .result-item,
body.dark-mode .empty-inline,
body.dark-mode .filters-panel,
body.dark-mode .collection-choice,
body.dark-mode .upload-row,
body.dark-mode .token-item,
body.dark-mode .device-frame,
body.dark-mode .mini-app{
  background:rgba(32,32,32,.92);
}

body.dark-mode .btn-secondary,
body.dark-mode .btn-soft,
body.dark-mode .metric,
body.dark-mode .phone-icon-btn,
body.dark-mode .docs-links a:hover,
body.dark-mode .phone-top button,
body.dark-mode .drawer-head button,
body.dark-mode .reader-side-actions button,
body.dark-mode .phone-quick button,
body.dark-mode .swipe-row button,
body.dark-mode .mini-state-card,
body.dark-mode .shell-user-mini,
body.dark-mode .shell-card,
body.dark-mode .command-list kbd{
  background:var(--soft);
}

body.dark-mode .btn-primary,
body.dark-mode .tabs .active,
body.dark-mode .result-tabs .active,
body.dark-mode .phone-segments button.active,
body.dark-mode .bottom-nav button.active,
body.dark-mode .profile-tabs-v10 .active,
body.dark-mode .hero-metric,
body.dark-mode .quote-card,
body.dark-mode .editorial-card,
body.dark-mode .reader-article blockquote,
body.dark-mode .copy-toast{
  background:var(--ink);
  color:var(--bg);
}

body.dark-mode .font-stage,
body.dark-mode .font-cover{
  background:#2A271F;
}

body.dark-mode .cover-eye,
body.dark-mode .mo-cover-eye{
  opacity:.86;
  filter:contrast(1.05) invert(.92);
}

body.dark-mode .image-only,
body.dark-mode .video-card{
  background:#111;
}

body.dark-mode img{
  filter:saturate(.86) brightness(.86);
}

body.dark-mode .badge.yellow,
body.dark-mode .quick-card.yellow,
body.dark-mode .screen-card .badge.yellow{
  color:#28262B;
}

body.dark-mode .badge.blue,
body.dark-mode .quick-card.blue{
  color:#171616;
}

body.dark-mode .badge.beige,
body.dark-mode .quick-card.beige{
  color:#171616;
}

body.dark-mode .quick-card.red{
  color:#171616;
}

body.dark-mode .code-preview{
  background:#0F0F0F;
  border-color:#3A3935;
}

body.dark-mode .skeleton-card span,
body.dark-mode .skeleton-card b,
body.dark-mode .skeleton-card i,
body.dark-mode .loading-card span,
body.dark-mode .loading-card b{
  background:linear-gradient(90deg,var(--soft),#3A3935,var(--soft));
  background-size:200%;
}

body.dark-mode .modal-backdrop,
body.dark-mode .overlay{
  background:rgba(0,0,0,.32);
}

body.dark-mode.reading-mode{
  --bg:#211D18;
  --surface:#2A241D;
  --soft:#372F26;
  --border:#443A2F;
  --ink:#FBF5E9;
  --muted:#B7AA98;
  --muted2:#D0C4B3;
}

@media(max-width:760px){
  .theme-toggle{
    top:16px;
    left:16px;
    min-height:42px;
    padding:0 12px;
  }

  .theme-toggle span{
    display:none;
  }
}


/* V12 Arabic polish */
.quick-card{
  text-align:right !important;
  align-items:flex-start !important;
  direction:rtl;
}

.quick-card span{
  align-self:flex-start !important;
  text-align:right !important;
  width:100%;
  padding-inline-end:0;
  padding-inline-start:54px;
}

/* icon remains visually left */
.quick-card svg{
  left:24px !important;
  right:auto !important;
}

/* Hover image yellow badge must stay dark */
.reveal-layer .badge.yellow,
.hover-reveal .badge.yellow,
.badge.yellow{
  color:var(--ink) !important;
}

body.dark-mode .reveal-layer .badge.yellow,
body.dark-mode .hover-reveal .badge.yellow,
body.dark-mode .badge.yellow{
  color:#28262B !important;
}

/* Arabic direction for product screen titles and labels */
.screen-label,
.device-label,
.section-title span,
.screen-card,
.reader-layout,
.search-page,
.drawer-preview,
.playground,
.tokens-board,
.responsive-lab{
  direction:rtl;
  text-align:right;
}

.screen-card h3,
.screen-card p,
.product-screen-grid h3,
.product-screen-grid p{
  text-align:right;
}

/* Product screen grid should read RTL visually */
.product-screen-grid{
  direction:rtl;
}

/* Make English-looking technical labels less dominant if any remain */
.screen-label{
  color:var(--muted2);
}

/* Docs subtitles cleaner */
.section-title span{
  font-feature-settings:"ss01" off;
}

/* Quick cards mobile */
@media(max-width:640px){
  .quick-card span{
    padding-inline-start:44px;
  }
  .quick-card svg{
    left:18px !important;
  }
}


/* V13 — Editorial Dark Mode Pro
   دارك مود مستقل بجمالية خاصة، مو مجرد عكس ألوان */
body.dark-mode{
  --bg:#11100F;
  --ink:#F4F0E8;
  --surface:#1A1917;
  --soft:#24221F;
  --border:#34312D;
  --muted:#A59E91;
  --muted2:#CEC5B6;

  --red:#F0645E;
  --yellow:#E7D77E;
  --blue:#9AA6E8;
  --beige:#B99383;
  --green:#8FAA9B;
  --sage:#718B7F;
  --brown:#B88365;
  --purple:#B7A7F7;
  --grayblue:#8E98A1;
  --pink:#E99BAE;

  background:
    radial-gradient(circle at 14% -4%, rgba(231,215,126,.10), transparent 34%),
    radial-gradient(circle at 86% 8%, rgba(154,166,232,.11), transparent 32%),
    linear-gradient(180deg,#151412 0%, #11100F 42%, #0F0E0D 100%);
  color:var(--ink);
}

/* خلفية ناعمة فيها عمق */
body.dark-mode .sf-texture{
  opacity:1;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 48%),
    radial-gradient(ellipse at 32% 0%, rgba(231,215,126,.09), transparent 44%),
    radial-gradient(ellipse at 76% 8%, rgba(154,166,232,.10), transparent 38%),
    linear-gradient(180deg, rgba(17,16,15,0), #11100F 88%);
}

/* زر الدارك يصير جزء من الهوية */
body.dark-mode .theme-toggle{
  background:rgba(26,25,23,.78);
  color:var(--ink);
  border-color:rgba(244,240,232,.10);
  box-shadow:0 18px 60px rgba(0,0,0,.30);
}

/* الأسطح الرئيسية */
body.dark-mode .docs-sidebar,
body.dark-mode .hero,
body.dark-mode .preview-panel,
body.dark-mode .layout-preview,
body.dark-mode .dropdown-demo,
body.dark-mode .form-card,
body.dark-mode .quick-panel,
body.dark-mode .empty-state,
body.dark-mode .skeleton-card,
body.dark-mode .toast,
body.dark-mode .states-showcase,
body.dark-mode .mobile-component,
body.dark-mode .playground-controls,
body.dark-mode .playground-preview,
body.dark-mode .tokens-board,
body.dark-mode .responsive-lab,
body.dark-mode .screen-card,
body.dark-mode .reader-toc,
body.dark-mode .reader-article,
body.dark-mode .reader-side-actions,
body.dark-mode .search-page,
body.dark-mode .drawer-preview,
body.dark-mode .shell-preview,
body.dark-mode .editor-canvas,
body.dark-mode .publish-panel,
body.dark-mode .creator-card,
body.dark-mode .comments-panel,
body.dark-mode .activity-feed,
body.dark-mode .metric-card,
body.dark-mode .chart-card,
body.dark-mode .donut-card,
body.dark-mode .command-demo{
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)),
    rgba(26,25,23,.72);
  border-color:rgba(244,240,232,.10);
  box-shadow:0 1px 0 rgba(255,255,255,.025) inset, 0 24px 90px rgba(0,0,0,.16);
}

/* كروت داخلية */
body.dark-mode .content-card,
body.dark-mode .mo-card,
body.dark-mode .result-item,
body.dark-mode .empty-inline,
body.dark-mode .filters-panel,
body.dark-mode .collection-choice,
body.dark-mode .upload-row,
body.dark-mode .token-item,
body.dark-mode .device-frame,
body.dark-mode .mini-app,
body.dark-mode .phone,
body.dark-mode .phone-content-card,
body.dark-mode .mini-state-card,
body.dark-mode .shell-card,
body.dark-mode .swatch{
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)),
    var(--surface);
  border-color:rgba(244,240,232,.10);
}

/* المدخلات والقوائم */
body.dark-mode .search,
body.dark-mode .input,
body.dark-mode .textarea,
body.dark-mode .pg-select,
body.dark-mode .tag-input,
body.dark-mode .modal,
body.dark-mode .bottom-sheet,
body.dark-mode .dropdown,
body.dark-mode .select-menu,
body.dark-mode .phone-notifications,
body.dark-mode .phone-drawer,
body.dark-mode .mobile-composer,
body.dark-mode .swipe-row,
body.dark-mode .split-control,
body.dark-mode .user-chip,
body.dark-mode .tabs,
body.dark-mode .filter-group,
body.dark-mode .result-tabs,
body.dark-mode .phone-segments,
body.dark-mode .bottom-nav{
  background:rgba(26,25,23,.88);
  border-color:rgba(244,240,232,.12);
  box-shadow:0 1px 0 rgba(255,255,255,.035) inset;
}

body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select{
  color:var(--ink);
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder{
  color:rgba(244,240,232,.42);
}

/* الأزرار */
body.dark-mode .btn-primary,
body.dark-mode .tabs .active,
body.dark-mode .result-tabs .active,
body.dark-mode .phone-segments button.active,
body.dark-mode .bottom-nav button.active,
body.dark-mode .profile-tabs-v10 .active,
body.dark-mode .copy-toast,
body.dark-mode .shell-sidebar nav a.active,
body.dark-mode .shell-sidebar nav a:hover{
  background:var(--ink);
  color:#11100F;
}

body.dark-mode .btn-secondary,
body.dark-mode .btn-soft,
body.dark-mode .btn-ghost:hover,
body.dark-mode .metric,
body.dark-mode .phone-icon-btn,
body.dark-mode .docs-links a:hover,
body.dark-mode .drawer-head button,
body.dark-mode .reader-side-actions button,
body.dark-mode .phone-quick button,
body.dark-mode .swipe-row button,
body.dark-mode .command-list kbd,
body.dark-mode .tag-input span{
  background:var(--soft);
  color:var(--ink);
  border-color:rgba(244,240,232,.10);
}

body.dark-mode .btn-danger{
  background:var(--red);
  color:#11100F;
}

/* النصوص */
body.dark-mode .section-title span,
body.dark-mode .docs-brand p,
body.dark-mode .hero p,
body.dark-mode .screen-card p,
body.dark-mode .reader-article p,
body.dark-mode .result-item p,
body.dark-mode .empty-inline p,
body.dark-mode .comment p,
body.dark-mode .activity p,
body.dark-mode .notice p,
body.dark-mode .phone-content-card p,
body.dark-mode .mobile-component p,
body.dark-mode .profile-head p,
body.dark-mode .mo-body p,
body.dark-mode .content-card p{
  color:var(--muted);
}

body.dark-mode .metric,
body.dark-mode .screen-meta span,
body.dark-mode .profile-stats span,
body.dark-mode .swipe-row span,
body.dark-mode .token-item code,
body.dark-mode .result-tabs button,
body.dark-mode .phone-segments button,
body.dark-mode .bottom-nav button{
  color:var(--muted2);
}

/* الألوان السياقية في الدارك تكون غنية لكن غير صارخة */
body.dark-mode .quick-card.blue,
body.dark-mode .badge.blue,
body.dark-mode .tool-hero-icon,
body.dark-mode .tool-card .tool-icon{
  background:#8E9BDF;
  color:#12110F;
}

body.dark-mode .quick-card.yellow,
body.dark-mode .badge.yellow{
  background:#E8D978;
  color:#12110F !important;
}

body.dark-mode .quick-card.red,
body.dark-mode .badge.red{
  background:#EF625D;
  color:#12110F;
}

body.dark-mode .quick-card.beige,
body.dark-mode .badge.beige{
  background:#BA9282;
  color:#12110F;
}

body.dark-mode .badge.green{
  background:#799787;
  color:#11100F;
}

/* كروت اللون نفسها لا تصير ميتة */
body.dark-mode .swatch{
  box-shadow:0 12px 40px rgba(0,0,0,.14);
}

/* Hero وأقسام مميزة */
body.dark-mode .hero{
  background:
    radial-gradient(circle at 12% 8%, rgba(231,215,126,.08), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012)),
    rgba(26,25,23,.72);
}

/* البطاقات الداكنة لا تكون سوداء مسطحة */
body.dark-mode .hero-metric,
body.dark-mode .quote-card,
body.dark-mode .editorial-card,
body.dark-mode .reader-article blockquote{
  background:
    radial-gradient(circle at 18% 10%, rgba(231,215,126,.09), transparent 36%),
    linear-gradient(180deg, #24221F, #171615);
  color:var(--ink);
  border-color:rgba(244,240,232,.10);
}

body.dark-mode .hero-metric span,
body.dark-mode .hero-metric p,
body.dark-mode .quote-card p,
body.dark-mode .editorial-card p{
  color:rgba(244,240,232,.68);
}

/* الصور */
body.dark-mode img{
  filter:saturate(.82) brightness(.78) contrast(1.03);
}

body.dark-mode .image-only img,
body.dark-mode .video-card img{
  filter:saturate(.74) brightness(.70) contrast(1.08);
}

body.dark-mode .reveal-layer{
  background:linear-gradient(180deg, transparent, rgba(17,16,15,.92));
}

/* العين والباترن */
body.dark-mode .cover-eye,
body.dark-mode .mo-cover-eye{
  opacity:.88;
  filter:invert(.92) contrast(1.02) brightness(.8);
}

/* الكود */
body.dark-mode .code-preview{
  background:#0B0A09;
  border-color:rgba(244,240,232,.10);
  color:#F4F0E8;
}

/* الجوال */
body.dark-mode .phone{
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
    #151412;
  box-shadow:0 24px 90px rgba(0,0,0,.22);
}

body.dark-mode .phone-content-card.large{
  background:
    radial-gradient(circle at 20% 10%, rgba(231,215,126,.10), transparent 40%),
    var(--surface);
}

body.dark-mode .phone-content-card.image,
body.dark-mode .phone-card{
  background:linear-gradient(135deg, #53665D, #737B84);
}

body.dark-mode .phone-content-card.beige,
body.dark-mode .phone-card.small{
  background:#876A5F;
}

/* تشيك بوكس وراديو */
body.dark-mode .control-row > span:first-of-type{
  background:#171615;
  border-color:rgba(244,240,232,.25);
}

body.dark-mode .sf-checkbox:checked + span{
  background:var(--ink);
  border-color:var(--ink);
}

body.dark-mode .sf-checkbox:checked + span:after{
  border-color:#11100F;
}

body.dark-mode .sf-radio:checked + span{
  background:var(--ink);
  box-shadow:inset 0 0 0 4px #171615;
}

/* الرسوم */
body.dark-mode .bar-chart span{
  background:linear-gradient(180deg, var(--ink), rgba(244,240,232,.22));
}

body.dark-mode .donut:after,
body.dark-mode .circle-progress span{
  background:var(--surface);
}

/* حالات التحميل */
body.dark-mode .skeleton-card span,
body.dark-mode .skeleton-card b,
body.dark-mode .skeleton-card i,
body.dark-mode .loading-card span,
body.dark-mode .loading-card b{
  background:linear-gradient(90deg,#24221F,#38342E,#24221F);
  background-size:200%;
}

/* مودال وباك دروب */
body.dark-mode .modal-backdrop,
body.dark-mode .overlay{
  background:rgba(0,0,0,.46);
  backdrop-filter:blur(8px);
}

body.dark-mode .modal,
body.dark-mode .bottom-sheet{
  box-shadow:0 30px 110px rgba(0,0,0,.46);
}

/* وضع القراءة الداكن */
body.dark-mode.reading-mode{
  --bg:#1D1914;
  --surface:#29231C;
  --soft:#372F26;
  --border:#493E31;
  --ink:#FBF2E2;
  --muted:#BBAE9B;
  --muted2:#D7C9B6;

  background:
    radial-gradient(circle at 22% -10%, rgba(231,215,126,.09), transparent 36%),
    #1D1914;
}

/* تخفيف التوهج في الدارك */
body.dark-mode .content-card:hover,
body.dark-mode .mo-card:hover,
body.dark-mode .screen-card:hover,
body.dark-mode .token-item:hover{
  box-shadow:0 24px 80px rgba(0,0,0,.24);
  border-color:rgba(244,240,232,.18);
}


/* V14 — Fixed Brand Palette
   ألوان الهوية لا تتغير بين اللايت والدارك */
:root{
  --brand-bg:#F7F7F4;
  --brand-ink:#28262B;
  --brand-surface:#FBFBF9;
  --brand-soft:#EEEEE8;
  --brand-red:#FF514A;
  --brand-yellow:#FFF6B1;
  --brand-blue:#9BA9EA;
  --brand-beige:#E3C8BD;
  --brand-green:#06433E;
  --brand-sage:#91AB9E;
  --brand-brown:#CD9677;
  --brand-purple:#393156;
  --brand-grayblue:#B8BFC7;
  --brand-pink:#FFB3C3;
}

/* حتى في الدارك: ألوان البراند نفسها */
body.dark-mode{
  --red:var(--brand-red);
  --yellow:var(--brand-yellow);
  --blue:var(--brand-blue);
  --beige:var(--brand-beige);
  --green:var(--brand-green);
  --sage:var(--brand-sage);
  --brown:var(--brand-brown);
  --purple:var(--brand-purple);
  --grayblue:var(--brand-grayblue);
  --pink:var(--brand-pink);
}

/* لا تغيّر ألوان البطاقات السياقية */
body.dark-mode .quick-card.blue,
body.dark-mode .badge.blue,
body.dark-mode .tool-hero-icon,
body.dark-mode .tool-card .tool-icon{ background:var(--brand-blue) !important; color:var(--brand-ink) !important; }

body.dark-mode .quick-card.yellow,
body.dark-mode .badge.yellow{ background:var(--brand-yellow) !important; color:var(--brand-ink) !important; }

body.dark-mode .quick-card.red,
body.dark-mode .badge.red{ background:var(--brand-red) !important; color:var(--brand-ink) !important; }

body.dark-mode .quick-card.beige,
body.dark-mode .badge.beige{ background:var(--brand-beige) !important; color:var(--brand-ink) !important; }

body.dark-mode .badge.green{ background:var(--brand-green) !important; color:var(--brand-bg) !important; }

body.dark-mode .collection-preview-v10 span:nth-child(1){background:var(--brand-pink) !important;}
body.dark-mode .collection-preview-v10 span:nth-child(2){background:var(--brand-sage) !important;}
body.dark-mode .collection-preview-v10 span:nth-child(3){background:var(--brand-yellow) !important;}

body.dark-mode .phone-quick button:nth-child(1){background:var(--brand-blue) !important; color:var(--brand-ink) !important;}
body.dark-mode .phone-quick button:nth-child(2){background:var(--brand-yellow) !important; color:var(--brand-ink) !important;}
body.dark-mode .phone-quick button:nth-child(3){background:var(--brand-beige) !important; color:var(--brand-ink) !important;}

body.dark-mode .phone-content-card.image,
body.dark-mode .phone-card{background:linear-gradient(135deg, var(--brand-sage), var(--brand-grayblue)) !important;}

body.dark-mode .phone-content-card.beige,
body.dark-mode .phone-card.small{background:var(--brand-beige) !important; color:var(--brand-ink) !important;}

body.dark-mode .gradient-cover{background:linear-gradient(135deg,var(--brand-sage),var(--brand-grayblue) 45%,var(--brand-yellow)) !important;}

/* لوحة الألوان نفسها لا تتأثر بالدارك */
.palette-grid .swatch{
  background:var(--bg) !important;
  color:var(--ink) !important;
  cursor:pointer;
  position:relative;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), outline-color .18s var(--ease);
}

.palette-grid .swatch:hover{
  transform:translateY(-3px);
  box-shadow:0 20px 70px rgba(40,38,43,.10);
  outline:1px solid rgba(40,38,43,.12);
}

body.dark-mode .palette-grid .swatch:hover{
  box-shadow:0 20px 80px rgba(0,0,0,.32);
  outline:1px solid rgba(244,240,232,.14);
}

.palette-grid .swatch:after{
  content:"اضغط للنسخ";
  position:absolute;
  left:12px;
  bottom:12px;
  min-height:24px;
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:0 9px;
  background:rgba(255,255,255,.58);
  color:var(--ink);
  font-size:11px;
  opacity:0;
  transform:translateY(4px);
  transition:.18s var(--ease);
  backdrop-filter:blur(10px);
}

.palette-grid .swatch:hover:after{
  opacity:1;
  transform:translateY(0);
}

.palette-grid .swatch.copied:after{
  content:"تم النسخ";
  opacity:1;
  transform:translateY(0);
}

/* ثبّت ألوان Tokens Board أيضًا */
.token-item span[style*="#F7F7F4"]{background:var(--brand-bg) !important;}
.token-item span[style*="#28262B"]{background:var(--brand-ink) !important;}
.token-item span[style*="#EEEEE8"]{background:var(--brand-soft) !important;}
.token-item span[style*="#FFF6B1"]{background:var(--brand-yellow) !important;}
.token-item span[style*="#9BA9EA"]{background:var(--brand-blue) !important;}


/* V15 — Ink as the real dark background
   في الدارك مود: الحبر الأساسي #28262B هو الخلفية الفعلية */
body.dark-mode{
  --bg:var(--brand-ink);          /* #28262B */
  --ink:var(--brand-bg);          /* #F7F7F4 */
  --surface:#312F34;
  --soft:#3A383E;
  --border:rgba(247,247,244,.13);
  --muted:#BDB8B0;
  --muted2:#DDD7CC;

  background:
    radial-gradient(circle at 15% -5%, rgba(255,246,177,.10), transparent 30%),
    radial-gradient(circle at 88% 4%, rgba(155,169,234,.10), transparent 28%),
    var(--brand-ink) !important;
}

/* خلفية الصفحة الرئيسية تعتمد الحبر الأساسي بدون سواد زائد */
body.dark-mode .sf-texture{
  background:
    linear-gradient(180deg, rgba(247,247,244,.045), rgba(247,247,244,0) 45%),
    radial-gradient(ellipse at 35% 0%, rgba(255,246,177,.10), transparent 42%),
    radial-gradient(ellipse at 82% 6%, rgba(155,169,234,.10), transparent 36%),
    linear-gradient(180deg, rgba(40,38,43,0), var(--brand-ink) 90%) !important;
}

/* الأسطح فوق خلفية الحبر */
body.dark-mode .docs-sidebar,
body.dark-mode .hero,
body.dark-mode .preview-panel,
body.dark-mode .layout-preview,
body.dark-mode .dropdown-demo,
body.dark-mode .form-card,
body.dark-mode .quick-panel,
body.dark-mode .empty-state,
body.dark-mode .skeleton-card,
body.dark-mode .toast,
body.dark-mode .states-showcase,
body.dark-mode .mobile-component,
body.dark-mode .playground-controls,
body.dark-mode .playground-preview,
body.dark-mode .tokens-board,
body.dark-mode .responsive-lab,
body.dark-mode .screen-card,
body.dark-mode .reader-toc,
body.dark-mode .reader-article,
body.dark-mode .reader-side-actions,
body.dark-mode .search-page,
body.dark-mode .drawer-preview,
body.dark-mode .shell-preview,
body.dark-mode .editor-canvas,
body.dark-mode .publish-panel,
body.dark-mode .creator-card,
body.dark-mode .comments-panel,
body.dark-mode .activity-feed,
body.dark-mode .metric-card,
body.dark-mode .chart-card,
body.dark-mode .donut-card,
body.dark-mode .command-demo{
  background:
    linear-gradient(180deg, rgba(247,247,244,.055), rgba(247,247,244,.018)),
    rgba(49,47,52,.72) !important;
  border-color:rgba(247,247,244,.13) !important;
  box-shadow:0 1px 0 rgba(247,247,244,.04) inset, 0 24px 90px rgba(0,0,0,.10) !important;
}

body.dark-mode .content-card,
body.dark-mode .mo-card,
body.dark-mode .result-item,
body.dark-mode .empty-inline,
body.dark-mode .filters-panel,
body.dark-mode .collection-choice,
body.dark-mode .upload-row,
body.dark-mode .token-item,
body.dark-mode .device-frame,
body.dark-mode .mini-app,
body.dark-mode .phone,
body.dark-mode .phone-content-card,
body.dark-mode .mini-state-card,
body.dark-mode .shell-card,
body.dark-mode .swatch{
  background:
    linear-gradient(180deg, rgba(247,247,244,.045), rgba(247,247,244,.012)),
    #312F34 !important;
  border-color:rgba(247,247,244,.13) !important;
}

/* المدخلات والقوائم فوق الحبر */
body.dark-mode .search,
body.dark-mode .input,
body.dark-mode .textarea,
body.dark-mode .pg-select,
body.dark-mode .tag-input,
body.dark-mode .modal,
body.dark-mode .bottom-sheet,
body.dark-mode .dropdown,
body.dark-mode .select-menu,
body.dark-mode .phone-notifications,
body.dark-mode .phone-drawer,
body.dark-mode .mobile-composer,
body.dark-mode .swipe-row,
body.dark-mode .split-control,
body.dark-mode .user-chip,
body.dark-mode .tabs,
body.dark-mode .filter-group,
body.dark-mode .result-tabs,
body.dark-mode .phone-segments,
body.dark-mode .bottom-nav{
  background:rgba(49,47,52,.90) !important;
  border-color:rgba(247,247,244,.14) !important;
}

/* الزر الأساسي في الدارك: عكس الحبر */
body.dark-mode .btn-primary,
body.dark-mode .tabs .active,
body.dark-mode .result-tabs .active,
body.dark-mode .phone-segments button.active,
body.dark-mode .bottom-nav button.active,
body.dark-mode .profile-tabs-v10 .active,
body.dark-mode .copy-toast,
body.dark-mode .shell-sidebar nav a.active,
body.dark-mode .shell-sidebar nav a:hover{
  background:var(--brand-bg) !important;
  color:var(--brand-ink) !important;
}

/* ألوان الهوية تبقى ثابتة كما هي */
body.dark-mode .quick-card.blue,
body.dark-mode .badge.blue,
body.dark-mode .tool-hero-icon,
body.dark-mode .tool-card .tool-icon{ background:var(--brand-blue) !important; color:var(--brand-ink) !important; }

body.dark-mode .quick-card.yellow,
body.dark-mode .badge.yellow{ background:var(--brand-yellow) !important; color:var(--brand-ink) !important; }

body.dark-mode .quick-card.red,
body.dark-mode .badge.red{ background:var(--brand-red) !important; color:var(--brand-ink) !important; }

body.dark-mode .quick-card.beige,
body.dark-mode .badge.beige{ background:var(--brand-beige) !important; color:var(--brand-ink) !important; }

body.dark-mode .badge.green{ background:var(--brand-green) !important; color:var(--brand-bg) !important; }

/* Reading mode الداكن يظل مختلفًا لكنه مبني على الحبر */
body.dark-mode.reading-mode{
  --bg:#31261E;
  --surface:#3A3028;
  --soft:#493D33;
  --border:rgba(251,245,233,.14);
  --ink:#FBF5E9;
  --muted:#C8BBA8;
  --muted2:#E0D4C2;
  background:#31261E !important;
}


/* V16 — Refined first-section dark gradient + Saad avatar */
body.dark-mode{
  background:
    radial-gradient(900px 460px at 18% -8%, rgba(255,246,177,.13), transparent 62%),
    radial-gradient(780px 420px at 88% -4%, rgba(155,169,234,.11), transparent 58%),
    linear-gradient(180deg, #332F29 0%, var(--brand-ink) 245px, var(--brand-ink) 100%) !important;
}

/* المقصود بالتدرج بالبداية: خلفية أعلى الصفحة في الدارك مود */
body.dark-mode .sf-texture{
  height:520px;
  background:
    linear-gradient(180deg, rgba(247,247,244,.075) 0%, rgba(247,247,244,.025) 32%, rgba(247,247,244,0) 68%),
    radial-gradient(680px 340px at 24% 0%, rgba(255,246,177,.12), transparent 66%),
    radial-gradient(620px 320px at 82% 4%, rgba(155,169,234,.105), transparent 62%),
    linear-gradient(180deg, rgba(51,47,41,.96) 0%, rgba(40,38,43,.94) 48%, var(--brand-ink) 100%) !important;
}

/* Hero in dark gets a cleaner top glow, but still based on ink */
body.dark-mode .hero{
  background:
    radial-gradient(720px 300px at 76% 0%, rgba(247,247,244,.07), transparent 60%),
    radial-gradient(480px 260px at 24% 0%, rgba(255,246,177,.08), transparent 58%),
    linear-gradient(180deg, rgba(247,247,244,.06), rgba(247,247,244,.018)),
    rgba(49,47,52,.70) !important;
}

/* سعد فارس avatar source visual tuning */
.user-chip img,
.shell-user-mini img,
.creator-card > img,
.author-row img,
.profile-screen img,
.profile-mini img,
.profile-head img{
  object-position:center top;
}


/* V17 — temporarily hide dark toggle + icon alignment polish */
.theme-toggle{
  display:none !important;
}

/* Center all square icon-only buttons properly */
.btn-icon,
.drawer-head button,
.sheet-head .btn-icon,
.phone-icon-btn,
.phone-top button,
.reader-side-actions button,
.swipe-row button,
.play-button,
.drawer-close,
.phone-fab,
.metric.icon-only,
.bottom-nav button,
.phone-quick button{
  display:inline-grid !important;
  place-items:center !important;
  align-items:center !important;
  justify-content:center !important;
  line-height:1 !important;
  padding:0 !important;
  text-align:center !important;
}

.btn-icon svg,
.drawer-head button svg,
.sheet-head .btn-icon svg,
.phone-icon-btn svg,
.phone-top button svg,
.reader-side-actions button svg,
.swipe-row button svg,
.play-button svg,
.drawer-close svg,
.phone-fab svg,
.metric.icon-only svg{
  display:block;
  margin:0 !important;
  position:static !important;
}

/* Drawer header icons */
.drawer-head{
  align-items:center !important;
}

.drawer-head button{
  width:40px !important;
  height:40px !important;
  min-height:40px !important;
  border:0;
  border-radius:14px;
}

/* Bottom sheet close button should sit cleanly on the left */
.sheet-head{
  direction:rtl;
  display:grid !important;
  grid-template-columns:1fr 40px;
  align-items:start !important;
  gap:14px;
}

.sheet-head h3{
  grid-column:1;
  text-align:right;
  line-height:1.15;
}

.sheet-head .btn-icon{
  grid-column:2;
  width:40px !important;
  height:40px !important;
  min-height:40px !important;
  border-radius:14px;
  align-self:start;
}

/* The old full-width beige close-looking item in bottom sheet should not stretch if any icon button inherits weird styles */
.bottom-sheet .sheet-head + button.btn-icon{
  width:40px !important;
}

/* Mobile sheet options alignment */
.bottom-sheet button:not(.btn-icon){
  justify-content:flex-start;
}

.bottom-sheet button:not(.btn-icon) svg{
  margin-inline-end:0;
  margin-inline-start:8px;
}

/* Notification/upload close buttons in drawer grid */
.drawer-preview .drawer-head button{
  background:var(--soft);
  color:var(--ink);
}

@media(max-width:640px){
  .sheet-head{
    grid-template-columns:1fr 38px;
  }

  .sheet-head .btn-icon{
    width:38px !important;
    height:38px !important;
    min-height:38px !important;
  }
}


/* V18 Content Platform Components */
.platform-components-map{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:14px;
}

.platform-components-map article{
  min-height:190px;
  border:1px solid var(--border);
  border-radius:26px;
  background:rgba(251,251,249,.62);
  padding:20px;
  transition:.2s var(--ease);
}

.platform-components-map article:hover{
  transform:translateY(-4px);
  box-shadow:0 22px 70px rgba(40,38,43,.08);
}

.platform-components-map svg{
  width:34px;
  height:34px;
  color:var(--muted2);
}

.platform-components-map h3{
  margin:18px 0 8px;
  font-size:22px;
}

.platform-components-map p{
  color:var(--muted);
  font-feature-settings:"ss01" off;
  margin:0;
}

/* Author profile pro */
.author-pro{
  border:1px solid var(--border);
  border-radius:34px;
  background:rgba(251,251,249,.62);
  padding:18px;
  overflow:hidden;
}

.author-cover-pro{
  height:190px;
  border-radius:26px;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,246,177,.78), transparent 36%),
    linear-gradient(135deg,var(--sage),var(--grayblue));
}

.author-main-pro{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:18px;
  align-items:end;
  padding:0 16px 20px;
  margin-top:-54px;
}

.author-main-pro > img{
  width:118px;
  height:118px;
  border-radius:34px;
  object-fit:cover;
  object-position:center top;
  border:8px solid var(--surface);
  background:var(--surface);
}

.author-title-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.author-copy-pro h3{
  font-size:38px;
  margin:0;
}

.author-copy-pro p{
  margin:8px 0 14px;
  color:var(--muted);
  font-feature-settings:"ss01" off;
}

.author-links-pro{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.author-links-pro a{
  min-height:34px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid var(--border);
  border-radius:999px;
  padding:0 10px;
  color:var(--muted2);
  background:var(--surface);
}

.author-links-pro svg{
  width:16px;
  height:16px;
}

.author-actions-pro{
  display:flex;
  gap:8px;
  align-items:center;
}

.author-stats-pro{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin:4px 16px 16px;
}

.author-stats-pro div{
  border:1px solid var(--border);
  border-radius:20px;
  padding:14px;
  background:var(--surface);
}

.author-stats-pro b{
  display:block;
  font-size:28px;
}

.author-stats-pro span{
  color:var(--muted);
}

.author-tabs-pro{
  display:flex;
  gap:6px;
  border:1px solid var(--border);
  border-radius:22px;
  padding:6px;
  margin:0 16px 6px;
}

.author-tabs-pro button{
  flex:1;
  border:0;
  background:transparent;
  min-height:46px;
  border-radius:16px;
  color:var(--muted);
}

.author-tabs-pro button.active{
  background:var(--ink);
  color:var(--bg);
}

/* Article reader pro */
.article-pro{
  position:relative;
  display:grid;
  grid-template-columns:220px minmax(0,1fr) 64px;
  gap:18px;
  align-items:start;
}

.reading-progress{
  position:absolute;
  top:0;
  right:0;
  left:0;
  height:7px;
  border-radius:999px;
  background:var(--soft);
  overflow:hidden;
}

.reading-progress span{
  display:block;
  height:100%;
  background:var(--ink);
}

.article-pro-toc,
.article-pro-body,
.article-pro-actions{
  border:1px solid var(--border);
  border-radius:30px;
  background:rgba(251,251,249,.62);
}

.article-pro-toc{
  padding:18px;
  margin-top:24px;
  position:sticky;
  top:20px;
}

.article-pro-toc b{
  display:block;
  margin-bottom:14px;
}

.article-pro-toc a{
  display:block;
  padding:10px 0;
  color:var(--muted);
  border-bottom:1px solid var(--border);
}

.article-pro-toc a.active{
  color:var(--ink);
}

.article-pro-body{
  padding:clamp(26px,4vw,56px);
  margin-top:24px;
}

.article-kicker{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--muted);
  margin-bottom:22px;
}

.article-pro-body h1{
  font-family:var(--font-display);
  font-weight:300;
  font-size:clamp(42px,6vw,84px);
  line-height:1;
  margin:0 0 20px;
}

.article-pro-body p{
  font-size:20px;
  line-height:2;
  color:var(--muted2);
  font-feature-settings:"ss01" off;
}

.article-pro-body .lead{
  color:var(--ink);
  font-size:24px;
}

.article-author-mini{
  display:grid;
  grid-template-columns:auto 1fr auto auto;
  gap:12px;
  align-items:center;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:16px 0;
  margin:26px 0;
}

.article-author-mini img{
  width:56px;
  height:56px;
  border-radius:18px;
  object-fit:cover;
  object-position:center top;
}

.article-author-mini b,
.article-author-mini span{
  display:block;
}

.article-author-mini span{
  color:var(--muted);
}

.article-author-mini button,
.article-pro-actions button{
  border:0;
  background:var(--soft);
  border-radius:16px;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
}

.article-pro-body figure{
  margin:28px 0;
}

.article-image-placeholder{
  min-height:280px;
  border-radius:28px;
  background:linear-gradient(135deg,var(--sage),var(--grayblue));
}

.article-pro-body figcaption{
  color:var(--muted);
  margin-top:10px;
  font-size:14px;
  font-feature-settings:"ss01" off;
}

.article-pro-body blockquote{
  margin:28px 0;
  background:var(--ink);
  color:var(--bg);
  border-radius:28px;
  padding:28px;
  font-family:var(--font-display);
  font-size:34px;
  line-height:1.45;
}

.article-pro-actions{
  margin-top:24px;
  padding:10px;
  display:grid;
  gap:8px;
  position:sticky;
  top:20px;
}

/* Tool detail pro */
.tool-detail-pro{
  border:1px solid var(--border);
  border-radius:34px;
  background:rgba(251,251,249,.62);
  padding:22px;
}

.tool-detail-hero{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:18px;
  align-items:center;
  border-bottom:1px solid var(--border);
  padding-bottom:22px;
  margin-bottom:18px;
}

.tool-mark-pro{
  width:92px;
  height:92px;
  border-radius:30px;
  display:grid;
  place-items:center;
  background:var(--blue);
}

.tool-mark-pro svg{
  width:42px;
  height:42px;
}

.tool-detail-hero h3{
  font-size:38px;
  margin:10px 0 8px;
}

.tool-detail-hero p{
  color:var(--muted);
  font-feature-settings:"ss01" off;
  margin:0;
}

.tool-cta-pro{
  display:flex;
  gap:8px;
}

.tool-detail-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}

.tool-panel-pro{
  border:1px solid var(--border);
  border-radius:24px;
  background:var(--surface);
  padding:18px;
}

.tool-panel-pro h4{
  margin:0 0 14px;
  font-size:24px;
}

.tool-panel-pro dl{
  margin:0;
  display:grid;
  gap:10px;
}

.tool-panel-pro dl div{
  display:flex;
  justify-content:space-between;
  border-bottom:1px solid var(--border);
  padding-bottom:8px;
}

.tool-panel-pro dt{
  color:var(--muted);
}

.tool-panel-pro dd{
  margin:0;
}

.tool-panel-pro ul{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:10px;
}

.tool-panel-pro li,
.alternatives a{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--muted2);
}

.tool-panel-pro li svg{
  width:18px;
  height:18px;
  color:var(--green);
}

.alternatives a{
  min-height:36px;
}

.alternatives span{
  width:10px;
  height:10px;
  border-radius:999px;
  background:var(--yellow);
}

/* Advanced search pro */
.advanced-search-pro{
  display:grid;
  grid-template-columns:1fr 320px;
  gap:18px;
}

.advanced-search-main,
.advanced-filter-pro{
  border:1px solid var(--border);
  border-radius:30px;
  background:rgba(251,251,249,.62);
  padding:22px;
}

.search.xl{
  height:72px;
  border-radius:36px;
}

.search.xl input{
  font-size:22px;
}

.search-suggestions-pro{
  display:grid;
  gap:10px;
  margin-top:18px;
}

.search-suggestions-pro button{
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:20px;
  min-height:58px;
  padding:0 14px;
  display:flex;
  align-items:center;
  gap:10px;
  text-align:right;
  color:var(--muted2);
}

.search-suggestions-pro svg{
  width:22px;
  height:22px;
}

.advanced-filter-pro h3{
  margin:0 0 16px;
  font-size:26px;
}

/* Comments pro */
.comments-pro{
  border:1px solid var(--border);
  border-radius:34px;
  background:rgba(251,251,249,.62);
  padding:22px;
}

.comment-composer-pro{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:12px;
  align-items:end;
  border-bottom:1px solid var(--border);
  padding-bottom:18px;
  margin-bottom:18px;
}

.comment-composer-pro img,
.comment-pro img{
  width:52px;
  height:52px;
  border-radius:18px;
  object-fit:cover;
  object-position:center top;
}

.comment-composer-pro textarea{
  min-height:88px;
  border:1px solid var(--border);
  border-radius:22px;
  background:var(--surface);
  padding:14px;
  outline:0;
  resize:vertical;
  font-feature-settings:"ss01" off;
}

.comment-thread-pro{
  display:grid;
  gap:14px;
}

.comment-pro{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:12px;
}

.comment-pro > div{
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:24px;
  padding:16px;
}

.comment-pro.reply{
  margin-inline-start:64px;
}

.comment-pro header{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
}

.comment-pro header span{
  color:var(--muted);
}

.comment-pro p{
  color:var(--muted2);
  font-feature-settings:"ss01" off;
}

.comment-pro footer{
  display:flex;
  gap:10px;
  margin-top:10px;
}

.comment-pro footer button{
  border:0;
  background:var(--soft);
  min-height:32px;
  border-radius:999px;
  padding:0 10px;
  display:flex;
  align-items:center;
  gap:5px;
  color:var(--muted2);
}

.comment-pro footer svg{
  width:16px;
  height:16px;
}

/* Publish checklist */
.publish-checklist-pro{
  display:grid;
  grid-template-columns:320px 1fr;
  gap:18px;
}

.quality-score-pro,
.checklist-pro{
  border:1px solid var(--border);
  border-radius:30px;
  background:rgba(251,251,249,.62);
  padding:22px;
}

.score-ring-pro{
  width:150px;
  height:150px;
  border-radius:50%;
  background:conic-gradient(var(--ink) 86%, var(--soft) 0);
  display:grid;
  place-items:center;
  margin:0 auto 18px;
}

.score-ring-pro:before{
  content:"";
  position:absolute;
}

.score-ring-pro span{
  width:112px;
  height:112px;
  border-radius:50%;
  background:var(--surface);
  display:grid;
  place-items:center;
  font-size:34px;
  font-weight:700;
}

.quality-score-pro{
  text-align:center;
}

.quality-score-pro h3{
  font-size:28px;
  margin:0 0 8px;
}

.quality-score-pro p{
  color:var(--muted);
  font-feature-settings:"ss01" off;
}

.checklist-pro{
  display:grid;
  gap:12px;
}

.checklist-pro .control-row{
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:22px;
  padding:14px;
  min-height:76px;
  align-items:center;
}

.checklist-pro b,
.checklist-pro small{
  display:block;
}

.checklist-pro small{
  color:var(--muted);
  margin-top:3px;
  font-feature-settings:"ss01" off;
}

/* Dark mode readiness, even while toggle hidden */
body.dark-mode .platform-components-map article,
body.dark-mode .author-pro,
body.dark-mode .article-pro-toc,
body.dark-mode .article-pro-body,
body.dark-mode .article-pro-actions,
body.dark-mode .tool-detail-pro,
body.dark-mode .advanced-search-main,
body.dark-mode .advanced-filter-pro,
body.dark-mode .comments-pro,
body.dark-mode .quality-score-pro,
body.dark-mode .checklist-pro{
  background:rgba(49,47,52,.72) !important;
  border-color:rgba(247,247,244,.13) !important;
}

body.dark-mode .tool-panel-pro,
body.dark-mode .search-suggestions-pro button,
body.dark-mode .comment-pro > div,
body.dark-mode .comment-composer-pro textarea,
body.dark-mode .checklist-pro .control-row,
body.dark-mode .author-stats-pro div{
  background:#312F34 !important;
  border-color:rgba(247,247,244,.13) !important;
}

@media(max-width:1180px){
  .platform-components-map{
    grid-template-columns:repeat(3,1fr);
  }

  .article-pro,
  .advanced-search-pro,
  .publish-checklist-pro{
    grid-template-columns:1fr;
  }

  .article-pro-toc,
  .article-pro-actions{
    position:static;
  }

  .article-pro-actions{
    display:flex;
  }

  .tool-detail-hero{
    grid-template-columns:auto 1fr;
  }

  .tool-cta-pro{
    grid-column:1 / -1;
  }
}

@media(max-width:820px){
  .platform-components-map,
  .tool-detail-grid{
    grid-template-columns:1fr;
  }

  .author-main-pro{
    grid-template-columns:1fr;
    text-align:right;
  }

  .author-actions-pro{
    flex-wrap:wrap;
  }

  .author-stats-pro{
    grid-template-columns:repeat(2,1fr);
  }

  .author-tabs-pro{
    overflow:auto;
  }

  .comment-composer-pro{
    grid-template-columns:1fr;
  }

  .comment-pro.reply{
    margin-inline-start:24px;
  }
}

@media(max-width:640px){
  .author-stats-pro{
    grid-template-columns:1fr;
  }

  .tool-detail-hero{
    grid-template-columns:1fr;
  }

  .article-pro-body p{
    font-size:17px;
  }

  .article-pro-body .lead{
    font-size:20px;
  }
}


/* V18.1 fix: النص داخل البادجات الفاتحة يكون غامق */
.badge.yellow,
.badge.beige,
.badge.soft,
.badge.cream,
.reveal-layer .badge.yellow,
.reveal-layer .badge.beige,
.hover-reveal .badge.yellow,
.hover-reveal .badge.beige{
  color: var(--ink) !important;
}

body.dark-mode .badge.yellow,
body.dark-mode .badge.beige,
body.dark-mode .badge.soft,
body.dark-mode .badge.cream,
body.dark-mode .reveal-layer .badge.yellow,
body.dark-mode .reveal-layer .badge.beige,
body.dark-mode .hover-reveal .badge.yellow,
body.dark-mode .hover-reveal .badge.beige{
  color: #28262B !important;
}


/* V19 Platform Pages */
.page-map-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:14px;
}
.page-map-grid article{
  min-height:210px;
  border:1px solid var(--border);
  border-radius:28px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,0)),
    var(--surface);
  padding:20px;
  position:relative;
  overflow:hidden;
  transition:.22s var(--ease);
}
.page-map-grid article:before{
  content:"";
  position:absolute;
  inset:auto 16px 16px 16px;
  height:12px;
  border-radius:999px;
  background:var(--accent);
}
.page-map-grid article:hover{
  transform:translateY(-4px);
  box-shadow:0 22px 70px rgba(40,38,43,.08);
}
.page-map-grid svg{
  width:38px;height:38px;color:var(--ink);
}
.page-map-grid h3{font-size:26px;margin:18px 0 8px}
.page-map-grid p{color:var(--muted);font-feature-settings:"ss01" off;margin:0}

.product-page{
  border:1px solid var(--border);
  border-radius:36px;
  background:rgba(251,251,249,.62);
  padding:24px;
  overflow:hidden;
}
.page-hero,
.community-hero,
.directory-top,
.market-hero,
.jobs-header-v19{
  border-radius:30px;
  background:
    radial-gradient(circle at 12% 10%, rgba(255,246,177,.65), transparent 36%),
    linear-gradient(135deg, rgba(255,255,255,.5), rgba(238,238,232,.45));
  border:1px solid var(--border);
  padding:clamp(24px,4vw,44px);
  margin-bottom:18px;
}
.page-kicker{
  min-height:34px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface);
  padding:0 12px;
  color:var(--muted2);
  margin-bottom:14px;
}
.page-kicker svg{width:18px;height:18px}
.product-page h3{
  font-size:clamp(34px,5vw,64px);
  font-family:var(--font-display);
  font-weight:300;
  line-height:1;
  margin:0 0 12px;
}
.product-page p{
  color:var(--muted);
  font-feature-settings:"ss01" off;
  line-height:1.8;
}
.page-actions,.market-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}

/* Learning */
.learning-layout{
  display:grid;
  grid-template-columns:260px 1fr;
  gap:18px;
}
.page-filter,.groups-panel-v19,.jobs-filter-v19{
  border:1px solid var(--border);
  border-radius:26px;
  background:var(--surface);
  padding:18px;
  align-self:start;
}
.page-filter h4,.groups-panel-v19 h4,.jobs-filter-v19 h4{font-size:24px;margin:0 0 16px}
.path-grid{
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr;
  gap:14px;
}
.path-card,.course-card,.resource-card{
  border:1px solid var(--border);
  border-radius:26px;
  background:var(--surface);
  padding:20px;
  min-height:210px;
}
.path-card.featured{grid-row:span 2;min-height:440px;background:
  radial-gradient(circle at 12% 8%, rgba(155,169,234,.55), transparent 36%),var(--surface)}
.path-icon{
  width:72px;height:72px;border-radius:24px;background:var(--blue);
  display:grid;place-items:center;margin-bottom:24px
}
.path-icon svg{width:34px;height:34px}
.path-grid h4{font-size:28px;margin:12px 0 8px}
.path-progress{height:10px;background:var(--soft);border-radius:999px;overflow:hidden;margin:24px 0 10px}
.path-progress span{display:block;height:100%;background:var(--ink)}
.course-card footer,.market-request footer,.service-card-v19 footer{
  display:flex;justify-content:space-between;gap:10px;align-items:center;margin-top:18px
}
.course-card footer button,.market-request footer button,.service-card-v19 footer button,.job-card-v19 aside button{
  border:0;background:var(--ink);color:var(--bg);border-radius:999px;min-height:34px;padding:0 12px
}
.resource-card svg{width:42px;height:42px;color:var(--muted2)}

/* Community */
.community-hero,.jobs-header-v19,.directory-top{
  display:flex;justify-content:space-between;gap:20px;align-items:flex-end;
}
.community-layout-v19{
  display:grid;grid-template-columns:1fr 300px;gap:18px;
}
.discussion-list-v19{display:grid;gap:12px}
.discussion-card,.market-request,.service-card-v19,.job-card-v19{
  border:1px solid var(--border);border-radius:26px;background:var(--surface);padding:20px;
}
.discussion-card.hot{background:radial-gradient(circle at 10% 10%, rgba(255,81,74,.12), transparent 40%),var(--surface)}
.discussion-card h4,.market-request h4,.service-card-v19 h4{font-size:28px;margin:12px 0 8px}
.discussion-card footer{
  display:flex;flex-wrap:wrap;gap:8px;color:var(--muted);font-size:14px;margin-top:16px
}
.groups-panel-v19 a{
  min-height:46px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--border);color:var(--muted2)
}
.groups-panel-v19 a span{width:12px;height:12px;border-radius:99px}

/* Directory */
.directory-search{min-width:320px}
.directory-grid-v19{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
}
.directory-grid-v19 article,.specialty-grid-v19 article,.vendor-grid-v19 article{
  border:1px solid var(--border);border-radius:26px;background:var(--surface);padding:20px;
}
.directory-grid-v19 svg{width:38px;height:38px;color:var(--muted2)}
.directory-grid-v19 h4,.specialty-grid-v19 h4,.vendor-grid-v19 h4{font-size:26px;margin:18px 0 8px}

/* Market */
.market-hero{
  background:radial-gradient(circle at 14% 10%, rgba(255,81,74,.14), transparent 38%),linear-gradient(135deg, rgba(255,255,255,.5), rgba(238,238,232,.45));
}
.market-board{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
}

/* Jobs */
.jobs-layout-v19{display:grid;grid-template-columns:260px 1fr;gap:18px}
.job-list-v19{display:grid;gap:12px}
.job-card-v19{
  display:grid;grid-template-columns:1fr 170px;gap:16px;align-items:center;
}
.job-card-v19 h4{font-size:28px;margin:12px 0 8px}
.job-card-v19 aside{
  display:grid;gap:8px;justify-items:start;color:var(--muted)
}
.job-card-v19 aside b{color:var(--ink);font-size:20px}

/* Company */
.company-profile-v19,.specialty-page-v19,.vendor-page-v19,.company-dashboard-v19{
  border:1px solid var(--border);border-radius:36px;background:rgba(251,251,249,.62);padding:24px;overflow:hidden;
}
.company-cover-v19{
  height:190px;border-radius:30px;background:linear-gradient(135deg,var(--grayblue),var(--yellow));
}
.company-main-v19{
  display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:end;margin:-48px 16px 24px;
}
.company-logo-v19,.vendor-logo-v19{
  width:100px;height:100px;border-radius:30px;background:var(--ink);color:var(--bg);
  display:grid;place-items:center;border:8px solid var(--surface)
}
.company-logo-v19 svg,.vendor-logo-v19 svg{width:42px;height:42px}
.company-main-v19 h3,.vendor-header-v19 h3{font-size:42px;margin:0 0 8px}
.company-tags-v19{display:flex;gap:8px;flex-wrap:wrap}
.company-tags-v19 span{
  background:var(--soft);border-radius:999px;padding:7px 10px;color:var(--muted2)
}
.company-sections-v19{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px
}
.company-sections-v19 article{
  border:1px solid var(--border);border-radius:26px;background:var(--surface);padding:20px
}
.work-mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.work-mini-grid span{height:82px;border-radius:16px;background:var(--soft)}
.work-mini-grid span:nth-child(1){background:var(--sage)}
.work-mini-grid span:nth-child(2){background:var(--yellow)}
.work-mini-grid span:nth-child(3){background:var(--blue)}

/* Specialty */
.specialty-hero-v19{
  border-radius:30px;background:radial-gradient(circle at 12% 8%, rgba(255,246,177,.62), transparent 36%),var(--surface);
  border:1px solid var(--border);padding:42px;margin-bottom:18px
}
.specialty-grid-v19{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.specialty-grid-v19 ul{margin:0;padding-inline-start:20px;color:var(--muted2);line-height:1.9}

/* Vendor */
.vendor-header-v19{
  display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;border-bottom:1px solid var(--border);padding-bottom:20px;margin-bottom:18px
}
.vendor-grid-v19{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.vendor-grid-v19 b{font-size:42px;display:block}
.review-strip-v19{
  display:flex;gap:10px;overflow:auto;margin-top:14px
}
.review-strip-v19 span{
  min-width:240px;background:var(--soft);border-radius:20px;padding:16px;color:var(--muted2);font-feature-settings:"ss01" off
}

/* Company dashboard */
.company-dashboard-v19{
  display:grid;grid-template-columns:270px 1fr;gap:18px
}
.company-dashboard-v19 aside{
  border:1px solid var(--border);border-radius:28px;background:var(--surface);padding:18px
}
.company-dashboard-v19 aside h3{font-size:28px;margin:0 0 18px}
.company-dashboard-v19 aside a{
  height:46px;border-radius:16px;display:flex;align-items:center;gap:10px;padding:0 12px;color:var(--muted2)
}
.company-dashboard-v19 aside a.active,.company-dashboard-v19 aside a:hover{background:var(--ink);color:var(--bg)}
.company-dashboard-v19 main{
  border:1px solid var(--border);border-radius:28px;background:var(--surface);padding:22px
}
.dashboard-top-v19{
  display:flex;justify-content:space-between;align-items:center;margin-bottom:18px
}
.dashboard-top-v19 span{color:var(--muted)}
.dashboard-top-v19 h3{font-size:34px;margin:0}
.dashboard-metrics-v19{
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px
}
.dashboard-metrics-v19 article{
  background:var(--soft);border-radius:22px;padding:16px
}
.dashboard-metrics-v19 b{display:block;font-size:34px}
.dashboard-metrics-v19 span{color:var(--muted)}
.dashboard-table-v19{display:grid;gap:10px}
.dashboard-table-v19 div{
  min-height:58px;border:1px solid var(--border);border-radius:18px;display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;padding:0 14px
}
.dashboard-table-v19 span{color:var(--muted)}
.dashboard-table-v19 button{
  border:0;background:var(--ink);color:var(--bg);border-radius:999px;min-height:32px;padding:0 12px
}

/* Dark readiness, although hidden */
body.dark-mode .product-page,
body.dark-mode .page-map-grid article,
body.dark-mode .path-card,
body.dark-mode .course-card,
body.dark-mode .resource-card,
body.dark-mode .page-filter,
body.dark-mode .groups-panel-v19,
body.dark-mode .discussion-card,
body.dark-mode .directory-grid-v19 article,
body.dark-mode .market-request,
body.dark-mode .service-card-v19,
body.dark-mode .jobs-filter-v19,
body.dark-mode .job-card-v19,
body.dark-mode .company-profile-v19,
body.dark-mode .specialty-page-v19,
body.dark-mode .vendor-page-v19,
body.dark-mode .company-dashboard-v19,
body.dark-mode .company-sections-v19 article,
body.dark-mode .specialty-grid-v19 article,
body.dark-mode .vendor-grid-v19 article{
  background:rgba(49,47,52,.72) !important;border-color:rgba(247,247,244,.13) !important;
}

@media(max-width:1200px){
  .page-map-grid,.platform-components-map{grid-template-columns:repeat(3,1fr)}
  .learning-layout,.community-layout-v19,.jobs-layout-v19,.company-dashboard-v19{grid-template-columns:1fr}
  .path-grid,.market-board,.directory-grid-v19,.company-sections-v19,.vendor-grid-v19{grid-template-columns:repeat(2,1fr)}
  .specialty-grid-v19{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .page-map-grid,.path-grid,.market-board,.directory-grid-v19,.company-sections-v19,.vendor-grid-v19,.specialty-grid-v19{grid-template-columns:1fr}
  .community-hero,.jobs-header-v19,.directory-top,.company-main-v19,.vendor-header-v19{display:grid;grid-template-columns:1fr}
  .directory-search{min-width:0}
  .job-card-v19,.dashboard-table-v19 div{grid-template-columns:1fr}
  .dashboard-metrics-v19{grid-template-columns:repeat(2,1fr)}
}


/* V19.1 — Company dashboard sidebar spacing */
.company-dashboard-v19 aside{
  display:grid;
  align-content:start;
  gap:8px;
}

.company-dashboard-v19 aside h3{
  margin-bottom:10px !important;
}

.company-dashboard-v19 aside a{
  margin:0 !important;
}

.company-dashboard-v19 aside a.active,
.company-dashboard-v19 aside a:hover{
  transform:translateX(-2px);
}

/* Keep sidebar nav visually relaxed on small widths */
@media(max-width:760px){
  .company-dashboard-v19 aside{
    gap:7px;
  }
}


/* V20 Marketplace & Jobs Details */
.detail-map-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:14px;
}
.detail-map-grid article{
  min-height:200px;
  border:1px solid var(--border);
  border-radius:28px;
  background:var(--surface);
  padding:20px;
  transition:.2s var(--ease);
}
.detail-map-grid article:hover{
  transform:translateY(-4px);
  box-shadow:0 22px 70px rgba(40,38,43,.08);
}
.detail-map-grid svg{width:38px;height:38px;color:var(--muted2)}
.detail-map-grid h3{font-size:24px;margin:18px 0 8px}
.detail-map-grid p{color:var(--muted);font-feature-settings:"ss01" off;margin:0}

.project-detail-v20,
.job-detail-v20{
  display:grid;
  grid-template-columns:minmax(0,1fr) 330px;
  gap:18px;
}
.project-main-v20,.project-side-v20 > div,
.job-main-v20,.job-side-v20 > div,
.proposal-page-v20,.application-v20,.messages-v20,.billing-v20{
  border:1px solid var(--border);
  border-radius:34px;
  background:rgba(251,251,249,.62);
}
.project-main-v20,.job-main-v20{padding:28px}
.project-head-v20 h3,.job-title-v20 h3{
  font-family:var(--font-display);
  font-weight:300;
  font-size:clamp(40px,5vw,70px);
  line-height:1;
  margin:14px 0 12px;
}
.project-head-v20 p,.job-title-v20 p{
  font-size:20px;
  line-height:1.9;
  color:var(--muted2);
  font-feature-settings:"ss01" off;
}
.project-meta-v20,.job-meta-v20{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:18px
}
.project-meta-v20 span,.job-meta-v20 span{
  min-height:34px;display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border);
  border-radius:999px;background:var(--surface);padding:0 10px;color:var(--muted2)
}
.project-meta-v20 svg,.job-meta-v20 svg{width:16px;height:16px}
.project-section-v20,.job-section-v20{
  border-top:1px solid var(--border);margin-top:26px;padding-top:24px
}
.project-section-v20 h4,.job-section-v20 h4{
  font-size:28px;margin:0 0 14px
}
.project-section-v20 ul,.job-section-v20 ul{
  color:var(--muted2);font-feature-settings:"ss01" off;line-height:2
}
.skill-pills-v20{display:flex;flex-wrap:wrap;gap:8px}
.skill-pills-v20 span{
  background:var(--soft);border-radius:999px;padding:8px 12px;color:var(--muted2)
}
.question-list-v20{display:grid;gap:10px}
.question-list-v20 article{
  border:1px solid var(--border);border-radius:20px;background:var(--surface);padding:16px
}
.question-list-v20 p{color:var(--muted);font-feature-settings:"ss01" off;margin:6px 0 0}

.project-side-v20,.job-side-v20{display:grid;gap:14px;align-self:start}
.project-side-v20 > div,.job-side-v20 > div{padding:20px}
.budget-card-v20 b,.salary-card-v20 b{
  display:block;font-size:30px;margin:8px 0
}
.budget-card-v20 span,.salary-card-v20 span{color:var(--muted)}
.budget-card-v20 p,.client-card-v20 p,.company-mini-v20 p{
  color:var(--muted);font-feature-settings:"ss01" off
}
.client-card-v20 h4,.attachments-card-v20 h4,.company-mini-v20 h4{
  font-size:24px;margin:0 0 14px
}
.client-card-v20 div{
  display:flex;align-items:center;gap:10px
}
.client-logo-v20,.avatar-v20{
  width:42px;height:42px;border-radius:14px;background:var(--ink);color:var(--bg);
  display:grid;place-items:center;font-weight:700
}
.attachments-card-v20 a{
  min-height:42px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--border);color:var(--muted2)
}

/* Proposal */
.proposal-page-v20{
  display:grid;grid-template-columns:330px 1fr;gap:18px;padding:22px
}
.proposal-summary-v20{
  border:1px solid var(--border);border-radius:28px;background:var(--surface);padding:22px
}
.proposal-summary-v20 h3{
  font-size:34px;margin:14px 0 10px
}
.proposal-summary-v20 p,.proposal-tips-v20 li{
  color:var(--muted);font-feature-settings:"ss01" off
}
.proposal-tips-v20{
  background:var(--soft);border-radius:22px;padding:16px;margin-top:18px
}
.proposal-form-v20{
  display:grid;gap:14px
}
.proposal-form-v20 label,.application-form-v20 label{
  display:grid;gap:8px;color:var(--muted2)
}
.form-two-v20{
  display:grid;grid-template-columns:1fr 1fr;gap:14px
}
.proposal-steps-v20{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px
}
.proposal-steps-v20 article{
  border:1px solid var(--border);border-radius:20px;background:var(--surface);padding:16px
}
.proposal-steps-v20 b{
  width:34px;height:34px;border-radius:12px;background:var(--ink);color:var(--bg);display:grid;place-items:center;margin-bottom:12px
}
.proposal-upload-v20,.application-upload-v20{
  min-height:150px;border:1.5px dashed rgba(40,38,43,.18);border-radius:24px;background:var(--surface);
  display:grid;place-items:center;align-content:center;gap:8px;color:var(--muted)
}
.proposal-upload-v20 svg,.application-upload-v20 svg{width:38px;height:38px;color:var(--ink)}
.proposal-actions-v20{display:flex;gap:10px;justify-content:flex-end}

/* Job detail/application */
.apply-card-v20 b{font-size:26px;display:block}
.apply-card-v20 p{color:var(--muted);font-feature-settings:"ss01" off}
.application-v20{
  display:grid;grid-template-columns:320px 1fr;gap:18px;padding:22px
}
.application-side-v20{
  border:1px solid var(--border);border-radius:28px;background:var(--surface);padding:22px
}
.application-side-v20 h3{font-size:32px;margin:0 0 8px}
.application-side-v20 p{color:var(--muted);font-feature-settings:"ss01" off}
.application-progress-v20{
  height:10px;border-radius:999px;background:var(--soft);overflow:hidden;margin:22px 0 8px
}
.application-progress-v20 span{display:block;height:100%;background:var(--ink)}
.application-form-v20{display:grid;gap:14px}
.application-upload-v20{
  grid-template-columns:auto 1fr;place-items:center start;align-content:center;padding:22px
}
.application-upload-v20 b,.application-upload-v20 span{display:block}
.application-upload-v20 span{color:var(--muted);font-feature-settings:"ss01" off}
.checklist-mini-v20{display:grid;gap:8px}

/* Messages */

.messages-v20{
  display:grid;
  grid-template-columns:290px 1fr 260px;
  gap:0;
  overflow:hidden
}
.inbox-v20,.conversation-v20,.message-context-v20{
  padding:18px
}
.inbox-v20{
  border-left:1px solid var(--border);
  display:grid;
  align-content:start;
  gap:10px;
}
.message-context-v20{border-right:1px solid var(--border)}
.inbox-head-v20{
  display:flex;justify-content:space-between;align-items:center;margin-bottom:6px
}
.inbox-head-v20 h3{font-size:28px;margin:0}
.inbox-head-v20 button{
  width:42px;height:42px;border:0;border-radius:16px;background:var(--soft);display:grid;place-items:center;flex:0 0 auto
}
.thread-v20{
  width:100%;
  border:1px solid transparent;
  background:transparent;
  border-radius:22px;
  min-height:74px;
  padding:12px 14px;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:12px;
  text-align:right;
  align-items:center;
  margin:0;
}
.thread-v20 + .thread-v20{margin-top:2px}
.thread-v20.active,.thread-v20:hover{
  background:var(--soft);
  border-color:var(--border);
}
.thread-v20 b,.thread-v20 small{display:block}
.thread-v20 b{font-size:19px; line-height:1.2}
.thread-v20 small{color:var(--muted);font-feature-settings:"ss01" off;line-height:1.5}
.conversation-v20 header{
  display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border);padding-bottom:14px;gap:14px
}
.conversation-v20 header b,.conversation-v20 header span{display:block}
.conversation-v20 header span{color:var(--muted)}
.chat-body-v20{
  min-height:360px;display:grid;align-content:end;gap:10px;padding:18px 0
}
.bubble-v20{
  max-width:72%;border-radius:22px;padding:13px 16px;font-feature-settings:"ss01" off
}
.bubble-v20.theirs{background:var(--soft);justify-self:start}
.bubble-v20.mine{background:var(--ink);color:var(--bg);justify-self:end}
.conversation-composer-v20{
  display:grid;
  grid-template-columns:1fr 58px;
  gap:12px;
  border-top:1px solid var(--border);
  padding-top:14px;
  align-items:center;
}
.conversation-composer-v20 input{
  min-height:58px;
  width:100%;
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:999px;
  padding:0 22px;
  outline:0;
  font-size:18px;
  color:var(--ink);
  font-feature-settings:"ss01" off;
}
.conversation-composer-v20 input::placeholder{
  color:var(--muted);
  font-feature-settings:"ss01" off;
}
.send-button-v20{
  width:58px;
  height:58px;
  border:0;
  border-radius:18px;
  background:var(--ink);
  color:var(--bg);
  display:grid;
  place-items:center;
  box-shadow:0 12px 30px rgba(40,38,43,.14);
  transition:.2s var(--ease);
}
.send-button-v20:hover{
  transform:translateY(-1px);
  opacity:.94;
}
.send-button-v20 svg{
  width:22px;
  height:22px;
  stroke-width:2.1;
}
.message-context-v20 h4{font-size:24px;margin:0 0 14px}
.message-context-v20 div{
  border:1px solid var(--border);border-radius:18px;background:var(--surface);padding:14px;margin-bottom:10px
}
.message-context-v20 span,.message-context-v20 b{display:block}


/* Billing */
.billing-v20{padding:24px}
.billing-head-v20{
  border:1px solid var(--border);border-radius:30px;background:radial-gradient(circle at 12% 10%, rgba(255,246,177,.62), transparent 36%),var(--surface);
  padding:34px;margin-bottom:18px
}
.billing-head-v20 h3{
  font-family:var(--font-display);font-weight:300;font-size:clamp(36px,5vw,64px);line-height:1;margin:0 0 10px
}
.plans-v20{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px
}
.plans-v20 article{
  border:1px solid var(--border);border-radius:28px;background:var(--surface);padding:22px
}
.plans-v20 .featured-plan-v20{
  background:radial-gradient(circle at 20% 8%, rgba(155,169,234,.48), transparent 42%),var(--surface);
  transform:translateY(-8px)
}
.plans-v20 h4{font-size:32px;margin:14px 0 8px}
.plans-v20 b{font-size:28px;display:block;margin-bottom:16px}
.plans-v20 ul{color:var(--muted2);line-height:2;font-feature-settings:"ss01" off}
.invoice-strip-v20{
  margin-top:14px;border:1px solid var(--border);border-radius:24px;background:var(--surface);padding:18px;
  display:flex;justify-content:space-between;gap:16px;align-items:center
}
.invoice-strip-v20 b,.invoice-strip-v20 span{display:block}
.invoice-strip-v20 span{color:var(--muted)}

/* Dark support even if hidden */
body.dark-mode .project-main-v20,
body.dark-mode .project-side-v20 > div,
body.dark-mode .job-main-v20,
body.dark-mode .job-side-v20 > div,
body.dark-mode .proposal-page-v20,
body.dark-mode .application-v20,
body.dark-mode .messages-v20,
body.dark-mode .billing-v20,
body.dark-mode .detail-map-grid article{
  background:rgba(49,47,52,.72) !important;border-color:rgba(247,247,244,.13) !important;
}

@media(max-width:1200px){
  .detail-map-grid{grid-template-columns:repeat(3,1fr)}
  .project-detail-v20,.job-detail-v20,.proposal-page-v20,.application-v20,.messages-v20{grid-template-columns:1fr}
  .message-context-v20,.inbox-v20{border:0;border-top:1px solid var(--border)}
}
@media(max-width:760px){
  .detail-map-grid,.plans-v20,.proposal-steps-v20,.form-two-v20{grid-template-columns:1fr}
  .proposal-actions-v20,.invoice-strip-v20{display:grid}
  .bubble-v20{max-width:92%}
  .inbox-v20,.conversation-v20,.message-context-v20{padding:14px}
  .conversation-v20 header{display:grid;justify-content:stretch}
  .conversation-composer-v20{grid-template-columns:1fr 54px;gap:10px}
  .conversation-composer-v20 input{min-height:54px;font-size:17px;padding:0 18px}
  .send-button-v20{width:54px;height:54px;border-radius:16px}
  .thread-v20{min-height:70px;padding:12px}
}


/* V21 Intelligence + Workflows */
.workflow-map-v21{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:14px;
}
.workflow-map-v21 article{
  min-height:205px;
  border:1px solid var(--border);
  border-radius:28px;
  background:var(--surface);
  padding:20px;
  position:relative;
  overflow:hidden;
  transition:.22s var(--ease);
}
.workflow-map-v21 article:after{
  content:"";
  position:absolute;
  right:20px;
  left:20px;
  bottom:18px;
  height:10px;
  border-radius:999px;
  background:var(--accent);
}
.workflow-map-v21 article:hover{transform:translateY(-4px);box-shadow:0 22px 70px rgba(40,38,43,.08)}
.workflow-map-v21 svg{width:38px;height:38px;color:var(--muted2)}
.workflow-map-v21 h3{font-size:24px;margin:18px 0 8px}
.workflow-map-v21 p{color:var(--muted);font-feature-settings:"ss01" off;margin:0}

/* Smart recommendations */
.smart-layout-v21,
.proposal-compare-v21,
.project-workflow-v21,
.pipeline-v21,
.learning-path-v21,
.discussion-detail-v21,
.moderation-v21,
.onboarding-v21{
  border:1px solid var(--border);
  border-radius:36px;
  background:rgba(251,251,249,.62);
  padding:24px;
}
.smart-hero-v21{
  border:1px solid var(--border);
  border-radius:30px;
  background:radial-gradient(circle at 12% 10%, rgba(255,246,177,.62), transparent 36%), var(--surface);
  padding:34px;
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:18px;
  margin-bottom:18px;
}
.smart-hero-v21 h3,
.compare-head-v21 h3,
.discussion-main-v21 h3,
.interest-picker-v21 h3{
  font-family:var(--font-display);
  font-weight:300;
  font-size:clamp(38px,5vw,70px);
  line-height:1;
  margin:10px 0;
}
.smart-hero-v21 p,.recommendation-card-v21 p,.discussion-main-v21 p,.interest-picker-v21 p{
  color:var(--muted);
  font-feature-settings:"ss01" off;
  line-height:1.8;
}
.recommendation-grid-v21{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr 1fr;
  gap:14px;
}
.recommendation-card-v21{
  border:1px solid var(--border);
  border-radius:28px;
  background:var(--surface);
  padding:20px;
  min-height:250px;
}
.recommendation-card-v21.primary{
  background:radial-gradient(circle at 14% 10%, rgba(155,169,234,.36), transparent 38%), var(--surface);
}
.recommendation-card-v21 h4{font-size:30px;margin:14px 0 8px}
.reason-v21{
  display:flex;align-items:center;gap:8px;background:var(--soft);border-radius:18px;padding:12px;color:var(--muted2);font-feature-settings:"ss01" off
}
.recommendation-card-v21 footer{display:flex;gap:8px;margin-top:18px}
.match-v21{
  margin-top:22px;border:1px solid var(--border);border-radius:22px;padding:14px;background:var(--soft)
}
.match-v21 b{font-size:34px;display:block}
.match-v21 span{color:var(--muted)}
.mini-profile-v21{
  display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px
}
.mini-profile-v21 img{width:58px;height:58px;border-radius:20px;object-fit:cover;object-position:center top}

/* Quality assistant */
.quality-assistant-v21{
  display:grid;
  grid-template-columns:280px 1fr 260px;
  gap:18px;
}
.quality-score-card-v21,.quality-checks-v21,.smart-tags-v21{
  border:1px solid var(--border);
  border-radius:30px;
  background:rgba(251,251,249,.62);
  padding:22px;
}
.quality-ring-v21{
  width:150px;height:150px;border-radius:50%;
  background:conic-gradient(var(--ink) 91%, var(--soft) 0);
  display:grid;place-items:center;margin:0 auto 18px;
}
.quality-ring-v21 span{
  width:112px;height:112px;border-radius:50%;background:var(--surface);display:grid;place-items:center;font-size:40px;font-weight:700
}
.quality-score-card-v21{text-align:center}
.quality-score-card-v21 h3{font-size:28px;margin:0 0 8px}
.quality-score-card-v21 p{color:var(--muted);font-feature-settings:"ss01" off}
.quality-checks-v21{display:grid;gap:12px}
.check-card-v21{
  display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;border:1px solid var(--border);border-radius:22px;background:var(--surface);padding:16px
}
.check-card-v21 > i{width:34px;height:34px;border-radius:14px;display:grid;place-items:center}
.check-card-v21.done > i{background:var(--sage);color:var(--ink)}
.check-card-v21.warning > i{background:var(--yellow);color:var(--ink)}
.check-card-v21 p{color:var(--muted);font-feature-settings:"ss01" off;margin:4px 0 0}
.check-card-v21 button,.check-card-v21 span{
  border:0;background:var(--soft);border-radius:999px;padding:8px 12px;color:var(--muted2)
}
.smart-tags-v21 h4{font-size:24px;margin:0 0 14px}
.smart-tags-v21 button{
  border:0;background:var(--soft);border-radius:999px;padding:9px 12px;margin:0 0 8px 6px;color:var(--muted2)
}

/* Proposal compare */
.compare-head-v21{
  display:flex;justify-content:space-between;align-items:end;gap:18px;margin-bottom:18px
}
.compare-table-v21{
  border:1px solid var(--border);border-radius:28px;overflow:hidden;background:var(--surface)
}
.compare-row-v21{
  display:grid;
  grid-template-columns:1.4fr .7fr .7fr .6fr .7fr .6fr;
  gap:12px;
  align-items:center;
  padding:16px;
  border-bottom:1px solid var(--border);
}
.compare-row-v21:last-child{border-bottom:0}
.compare-row-v21.head{background:var(--soft);color:var(--muted2);font-size:14px}
.compare-row-v21.recommended{background:rgba(255,246,177,.38)}
.compare-row-v21 b,.compare-row-v21 small{display:block}
.compare-row-v21 small{color:var(--muted);font-feature-settings:"ss01" off}
.compare-row-v21 button{
  border:0;background:var(--ink);color:var(--bg);border-radius:999px;min-height:34px;padding:0 12px
}

/* Project workflow */
.project-workflow-v21{
  display:grid;grid-template-columns:1fr 300px;gap:18px
}
.timeline-v21{display:grid;gap:12px}
.milestone-v21{
  border:1px solid var(--border);border-radius:26px;background:var(--surface);padding:18px;
  display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center
}
.milestone-v21 > span{
  width:48px;height:48px;border-radius:18px;background:var(--soft);display:grid;place-items:center;font-weight:700
}
.milestone-v21.done > span{background:var(--sage)}
.milestone-v21.active > span{background:var(--yellow)}
.milestone-v21 h4{font-size:26px;margin:0 0 6px}
.milestone-v21 p{color:var(--muted);font-feature-settings:"ss01" off;margin:0}
.payment-card-v21{
  border:1px solid var(--border);border-radius:30px;background:var(--surface);padding:20px
}
.payment-card-v21 h3{font-size:28px;margin:0 0 16px}
.payment-card-v21 div{
  border:1px solid var(--border);border-radius:18px;padding:14px;margin-bottom:10px
}
.payment-card-v21 span,.payment-card-v21 b,.payment-card-v21 small{display:block}
.payment-card-v21 span,.payment-card-v21 small{color:var(--muted)}

/* Pipeline */
.pipeline-v21{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px
}
.pipeline-column-v21{
  border:1px solid var(--border);border-radius:28px;background:var(--surface);padding:14px;min-height:390px
}
.pipeline-column-v21 h3{
  display:flex;justify-content:space-between;align-items:center;font-size:24px;margin:0 0 12px
}
.pipeline-column-v21 h3 span{font-size:14px;color:var(--muted);background:var(--soft);border-radius:999px;padding:5px 9px}
.candidate-card-v21{
  border:1px solid var(--border);border-radius:22px;background:rgba(251,251,249,.72);padding:14px;margin-bottom:10px
}
.candidate-card-v21.highlighted{background:rgba(255,246,177,.45)}
.candidate-card-v21 img,.avatar-letter-v21{
  width:54px;height:54px;border-radius:18px;object-fit:cover;object-position:center top;margin-bottom:10px
}
.avatar-letter-v21{background:var(--ink);color:var(--bg);display:grid;place-items:center;font-size:22px;font-weight:700}
.candidate-card-v21 b,.candidate-card-v21 span{display:block}
.candidate-card-v21 p{color:var(--muted);font-feature-settings:"ss01" off;margin:6px 0}
.candidate-card-v21 span{color:var(--muted2);background:var(--soft);border-radius:999px;padding:7px 9px;display:inline-block}
.candidate-card-v21 button{
  border:0;background:var(--ink);color:var(--bg);border-radius:999px;min-height:34px;padding:0 12px
}

/* Learning path */
.learning-path-v21{
  display:grid;grid-template-columns:1fr 1fr 300px;gap:18px
}
.lesson-player-v21,.lesson-list-v21,.certificate-card-v21{
  border:1px solid var(--border);border-radius:30px;background:var(--surface);padding:22px
}
.lesson-video-v21{
  min-height:230px;border-radius:24px;background:linear-gradient(135deg,var(--sage),var(--grayblue));display:grid;place-items:center
}
.lesson-video-v21 svg{width:62px;height:62px;background:rgba(247,247,244,.75);border-radius:50%;padding:16px}
.lesson-player-v21 h3,.certificate-card-v21 h3{font-size:32px;margin:18px 0 8px}
.lesson-player-v21 p,.certificate-card-v21 p{color:var(--muted);font-feature-settings:"ss01" off}
.lesson-actions-v21{display:flex;gap:8px;margin-top:18px}
.lesson-list-v21{display:grid;gap:10px}
.lesson-item-v21{
  display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;border:1px solid var(--border);border-radius:20px;padding:14px
}
.lesson-item-v21 > span{width:42px;height:42px;border-radius:15px;background:var(--soft);display:grid;place-items:center}
.lesson-item-v21.active{background:rgba(255,246,177,.35)}
.lesson-item-v21.done > span{background:var(--sage)}
.lesson-item-v21 b,.lesson-item-v21 small{display:block}
.lesson-item-v21 small{color:var(--muted)}
.certificate-card-v21{text-align:center}
.certificate-card-v21 > svg{width:64px;height:64px;color:var(--brown);margin:10px auto}

/* Discussion detail */
.discussion-detail-v21{
  display:grid;grid-template-columns:1fr 280px;gap:18px
}
.discussion-main-v21,.discussion-side-v21{
  border:1px solid var(--border);border-radius:30px;background:var(--surface);padding:22px
}
.poll-v21{border:1px solid var(--border);border-radius:24px;background:rgba(251,251,249,.72);padding:18px;margin:24px 0}
.poll-v21 h4{font-size:24px;margin:0 0 14px}
.poll-v21 button{
  position:relative;overflow:hidden;width:100%;min-height:48px;border:1px solid var(--border);border-radius:16px;background:var(--surface);margin-bottom:8px;
  display:grid;grid-template-columns:1fr auto;align-items:center;padding:0 14px;text-align:right
}
.poll-v21 button span{position:absolute;inset:0 auto 0 0;background:rgba(155,169,234,.28);z-index:0}
.poll-v21 button b,.poll-v21 button small{position:relative;z-index:1}
.best-answer-v21{
  border:1px solid var(--border);border-radius:24px;background:rgba(145,171,158,.22);padding:18px
}
.best-answer-v21 > span{color:var(--green);font-weight:700}
.best-answer-v21 p{color:var(--muted2);font-feature-settings:"ss01" off}
.best-answer-v21 footer{display:flex;justify-content:space-between;gap:12px;align-items:center}
.best-answer-v21 button{
  border:0;background:var(--ink);color:var(--bg);border-radius:999px;min-height:34px;padding:0 12px
}
.discussion-side-v21 h4{font-size:24px;margin:0 0 14px}
.discussion-side-v21 div{border:1px solid var(--border);border-radius:18px;padding:14px;margin-bottom:10px}
.discussion-side-v21 span,.discussion-side-v21 b{display:block}
.discussion-side-v21 span{color:var(--muted)}

/* Moderation */
.moderation-v21{display:grid;grid-template-columns:240px 1fr 240px;gap:18px}
.moderation-filter-v21,.review-panel-v21,.review-score-v21{
  border:1px solid var(--border);border-radius:30px;background:var(--surface);padding:20px
}
.moderation-filter-v21 h3{font-size:26px;margin:0 0 14px}
.moderation-filter-v21 button{
  width:100%;min-height:44px;border:0;border-radius:16px;background:transparent;margin-bottom:6px;
  display:flex;justify-content:space-between;align-items:center;padding:0 12px;color:var(--muted2)
}
.moderation-filter-v21 button.active{background:var(--ink);color:var(--bg)}
.review-head-v21{display:flex;justify-content:space-between;gap:18px;align-items:start}
.review-head-v21 h3{font-size:34px;margin:12px 0 0}
.review-head-v21 > div:last-child{display:flex;gap:8px}
.review-panel-v21 p{color:var(--muted);font-feature-settings:"ss01" off;line-height:1.8}
.review-notes-v21 label{display:grid;gap:8px;color:var(--muted2)}
.review-actions-v21{display:flex;gap:8px;margin-top:12px}
.review-actions-v21 button{border:0;background:var(--soft);border-radius:999px;padding:10px 14px}
.review-score-v21 h4{font-size:24px;margin:0 0 14px}
.review-score-v21 div{border:1px solid var(--border);border-radius:18px;padding:14px;margin-bottom:10px}
.review-score-v21 span,.review-score-v21 b{display:block}

/* Onboarding */
.onboarding-v21{display:grid;grid-template-columns:280px 1fr;gap:18px}
.onboarding-steps-v21,.interest-picker-v21{
  border:1px solid var(--border);border-radius:30px;background:var(--surface);padding:22px
}
.onboarding-steps-v21 h3{font-size:28px;margin:0 0 18px}
.onboarding-steps-v21 div{
  min-height:62px;border:1px solid var(--border);border-radius:20px;padding:12px;display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;margin-bottom:10px
}
.onboarding-steps-v21 div.active{background:var(--ink);color:var(--bg)}
.onboarding-steps-v21 span{
  width:34px;height:34px;border-radius:12px;background:var(--soft);color:var(--ink);display:grid;place-items:center
}
.interest-grid-v21{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:22px 0}
.interest-grid-v21 button{
  border:1px solid var(--border);background:var(--surface);border-radius:22px;min-height:110px;display:grid;place-items:center;align-content:center;gap:8px;
  font-size:18px;color:var(--muted2)
}
.interest-grid-v21 button.active{background:var(--ink);color:var(--bg)}
.interest-grid-v21 svg{width:28px;height:28px}
.interest-picker-v21 footer{display:flex;justify-content:flex-end;gap:10px}

/* Dark readiness while hidden */
body.dark-mode .smart-layout-v21,
body.dark-mode .proposal-compare-v21,
body.dark-mode .project-workflow-v21,
body.dark-mode .pipeline-v21,
body.dark-mode .learning-path-v21,
body.dark-mode .discussion-detail-v21,
body.dark-mode .moderation-v21,
body.dark-mode .onboarding-v21,
body.dark-mode .workflow-map-v21 article,
body.dark-mode .recommendation-card-v21,
body.dark-mode .quality-score-card-v21,
body.dark-mode .quality-checks-v21,
body.dark-mode .smart-tags-v21{
  background:rgba(49,47,52,.72) !important;
  border-color:rgba(247,247,244,.13) !important;
}

@media(max-width:1200px){
  .workflow-map-v21,.interest-grid-v21{grid-template-columns:repeat(3,1fr)}
  .recommendation-grid-v21,.pipeline-v21{grid-template-columns:repeat(2,1fr)}
  .quality-assistant-v21,.project-workflow-v21,.learning-path-v21,.discussion-detail-v21,.moderation-v21,.onboarding-v21{grid-template-columns:1fr}
  .compare-row-v21{grid-template-columns:1fr 1fr 1fr;gap:10px}
}
@media(max-width:760px){
  .workflow-map-v21,.recommendation-grid-v21,.pipeline-v21,.interest-grid-v21{grid-template-columns:1fr}
  .smart-hero-v21,.compare-head-v21,.review-head-v21{display:grid}
  .compare-row-v21{grid-template-columns:1fr}
  .milestone-v21{grid-template-columns:1fr}
}


/* ===================== V22 AUTH + ADMIN ===================== */
.auth-overview-v22{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.auth-overview-v22 article,.auth-side-v22,.auth-card-v22,.register-card-v22,.register-side-v22,.admin-panel-v22,.admin-sidebar-v22,.entity-management-v22{
  border:1px solid var(--border);background:rgba(251,251,249,.72);border-radius:32px;padding:22px;
}
.auth-overview-v22 article i{width:40px;height:40px;color:var(--muted2)}
.auth-overview-v22 h3{font-size:28px;margin:14px 0 8px}
.auth-overview-v22 p,.auth-side-v22 p,.auth-card-v22 p,.register-side-v22 p{color:var(--muted);font-feature-settings:"ss01" off;line-height:1.8}
.auth-page-v22{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}
.auth-side-v22{background:radial-gradient(circle at 14% 10%, rgba(155,169,234,.25), transparent 35%), var(--surface);display:flex;flex-direction:column;justify-content:space-between;min-height:560px}
.auth-brand-v22 h3,.auth-card-head-v22 h3,.admin-brand-v22 b{font-family:var(--font-display);font-weight:300;line-height:1;font-size:clamp(34px,4vw,62px);margin:12px 0}
.auth-highlights-v22{display:grid;gap:10px;margin-top:18px}
.auth-highlights-v22 div{display:flex;align-items:center;gap:10px;background:var(--soft);padding:14px;border-radius:20px;color:var(--muted2)}
.auth-form-v22,.register-card-v22{display:grid}
.auth-card-v22{max-width:560px;width:100%;margin:auto}
.auth-card-head-v22 p{margin-top:0}
.auth-card-v22 label,.settings-fields-v22 label{display:grid;gap:8px;margin-bottom:12px;color:var(--muted2)}
.auth-row-v22{display:flex;justify-content:space-between;align-items:center;gap:14px;margin:4px 0 16px}
.checkline-v22{display:flex !important;align-items:center;gap:10px;color:var(--muted2)}
.checkline-v22 input{accent-color:var(--ink)}
.link-btn-v22{border:0;background:none;color:var(--muted2);cursor:pointer}
.auth-divider-v22{position:relative;text-align:center;margin:18px 0;color:var(--muted)}
.auth-divider-v22:before{content:"";position:absolute;inset:50% 0 auto 0;height:1px;background:var(--border)}
.auth-divider-v22 span{position:relative;background:var(--surface);padding:0 12px}
.auth-social-v22{display:grid;gap:10px}
.auth-social-v22 button{min-height:48px;border:1px solid var(--border);border-radius:18px;background:var(--surface);display:flex;align-items:center;justify-content:center;gap:10px;color:var(--muted2)}
.auth-footnote-v22{margin-top:14px;text-align:center}
.register-grid-v22{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.role-pills-v22,.interest-grid-v22,.entity-tabs-v22,.mini-tabs-v22,.summary-tabs-editor-v22,.trend-pills-v22,.tag-pairs-v22{display:flex;gap:8px;flex-wrap:wrap}
.role-pills-v22 button,.interest-grid-v22 button,.entity-tabs-v22 button,.mini-tabs-v22 button,.trend-pills-v22 span,.tag-pairs-v22 span{border:1px solid var(--border);background:var(--surface);border-radius:999px;padding:10px 14px;color:var(--muted2)}
.role-pills-v22 button.active,.interest-grid-v22 button.active,.entity-tabs-v22 button.active,.mini-tabs-v22 button.active{background:var(--ink);color:var(--bg)}
.register-actions-v22{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}
.progress-mini-v22{display:grid;gap:10px}
.progress-mini-v22 div{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;padding:12px;border:1px solid var(--border);border-radius:20px;background:var(--surface)}
.progress-mini-v22 span{width:36px;height:36px;border-radius:12px;background:var(--soft);display:grid;place-items:center}
.progress-mini-v22 div.active{background:var(--ink);color:var(--bg)}
.progress-mini-v22 div.active span{color:var(--ink)}
.register-tip-v22{margin-top:14px;padding:18px;border-radius:24px;background:var(--soft)}
.register-tip-v22 h4{font-size:24px;margin:0 0 8px}

.admin-shell-v22{display:grid;grid-template-columns:280px 1fr;gap:18px}
.admin-sidebar-v22 nav{display:grid;gap:6px;margin-top:14px}
.admin-sidebar-v22 nav a{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 12px;border-radius:16px;color:var(--muted2)}
.admin-sidebar-v22 nav a.active{background:var(--ink);color:var(--bg)}
.admin-brand-v22 small{display:block;color:var(--muted);font-feature-settings:"ss01" off}
.admin-topbar-v22,.panel-head-v22,.admin-actions-v22{display:flex;align-items:center;justify-content:space-between;gap:10px}
.admin-main-v22{display:grid;gap:16px}
.admin-kpis-v22{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.admin-kpis-v22 article{border:1px solid var(--border);background:rgba(251,251,249,.72);border-radius:28px;padding:18px}
.admin-kpis-v22 span,.admin-kpis-v22 small{display:block;color:var(--muted)}
.admin-kpis-v22 b{display:block;font-size:38px;margin:10px 0}
.admin-grid-v22,.admin-content-v22,.library-layout-v22,.taxonomy-grid-v22,.home-editor-v22,.search-admin-v22,.discovery-grid-v22,.settings-layout-v22{display:grid;grid-template-columns:1.3fr 1fr;gap:14px}
.admin-grid-v22 .wide,.admin-content-v22 .wide,.library-layout-v22 .wide,.search-admin-v22 .wide{grid-column:span 1}
.admin-panel-v22.wide{grid-column:span 2}
.panel-head-v22 h3{font-size:28px;margin:0}
.panel-head-v22 button,.table-row-v22 button{border:0;background:var(--soft);border-radius:999px;padding:9px 12px;color:var(--muted2)}
.summary-cards-v22,.entity-grid-v22,.media-grid-v22{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.summary-cards-v22 article,.entity-grid-v22 article,.media-grid-v22 article{border:1px solid var(--border);background:var(--surface);border-radius:22px;padding:16px}
.summary-cards-v22 article{display:flex;gap:12px;align-items:center}
.summary-cards-v22 article i,.entity-grid-v22 article i{width:34px;height:34px;color:var(--muted2)}
.summary-cards-v22 span,.entity-grid-v22 span,.media-grid-v22 span{display:block;color:var(--muted);font-feature-settings:"ss01" off}
.stack-list-v22,.check-tasks-v22{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.stack-list-v22 li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border:1px solid var(--border);border-radius:18px;background:var(--surface)}
.stack-list-v22 li b,.stack-list-v22.muted li b{font-size:14px;background:var(--soft);padding:6px 8px;border-radius:999px;color:var(--muted2)}
.check-tasks-v22 li{display:flex;align-items:center;gap:10px;padding:10px 0}
.check-tasks-v22 input{accent-color:var(--ink)}
.check-tasks-v22.compact li{padding:4px 0}
.thumb{height:112px;border-radius:18px;margin-bottom:10px;background:var(--soft)}
.thumb.sage{background:var(--sage)} .thumb.blue{background:var(--blue)} .thumb.yellow{background:var(--yellow)} .thumb.beige{background:var(--beige)} .thumb.ink{background:var(--ink)} .thumb.red{background:var(--red)}
.admin-table-v22{border:1px solid var(--border);border-radius:26px;overflow:hidden;background:var(--surface)}
.table-row-v22{display:grid;grid-template-columns:1.3fr .8fr .8fr .8fr .6fr;gap:10px;align-items:center;padding:14px 16px;border-bottom:1px solid var(--border)}
.table-row-v22.head{background:var(--soft);color:var(--muted2);font-size:14px}
.table-row-v22:last-child{border-bottom:0}
.summary-tabs-editor-v22 article{flex:1;min-width:140px;padding:16px;border:1px solid var(--border);border-radius:22px;background:var(--surface)}
.summary-tabs-editor-v22 article.active{background:rgba(255,246,177,.5)}
.summary-tabs-editor-v22 article b,.summary-tabs-editor-v22 article span{display:block}
.summary-tabs-editor-v22 article span{color:var(--muted)}
.analytics-bars-v22{display:grid;gap:10px}
.analytics-bars-v22 div{display:grid;grid-template-columns:160px 1fr auto;gap:12px;align-items:center}
.analytics-bars-v22 b{height:14px;border-radius:999px;background:linear-gradient(90deg,var(--ink),var(--blue));display:block}
.analytics-bars-v22 small{color:var(--muted)}
.discovery-grid-v22{grid-template-columns:repeat(3,1fr)}
.settings-fields-v22{display:grid;gap:10px}

@media(max-width:1200px){
  .auth-page-v22,.admin-shell-v22,.admin-grid-v22,.admin-content-v22,.library-layout-v22,.taxonomy-grid-v22,.home-editor-v22,.search-admin-v22,.discovery-grid-v22,.settings-layout-v22{grid-template-columns:1fr}
  .admin-panel-v22.wide{grid-column:span 1}
  .admin-kpis-v22,.summary-cards-v22,.entity-grid-v22,.media-grid-v22{grid-template-columns:repeat(2,1fr)}
  .auth-overview-v22{grid-template-columns:1fr}
}
@media(max-width:760px){
  .register-grid-v22,.admin-kpis-v22,.summary-cards-v22,.entity-grid-v22,.media-grid-v22,.table-row-v22,.discovery-grid-v22{grid-template-columns:1fr}
  .auth-row-v22,.register-actions-v22,.admin-topbar-v22,.panel-head-v22{display:grid}
  .table-row-v22{gap:6px}
}


/* ===================== V22.1 AUTH + ADMIN SPACING FIXES ===================== */
#login-page .auth-card-v22,
#register-page .register-card-v22,
#register-page .register-side-v22,
#admin-dashboard .admin-sidebar-v22,
#admin-dashboard .admin-panel-v22,
#admin-content .admin-panel-v22,
#admin-library .admin-panel-v22,
#admin-taxonomies .admin-panel-v22,
#admin-directory .entity-management-v22,
#admin-homepage .admin-panel-v22,
#admin-search .admin-panel-v22,
#admin-discovery .admin-panel-v22,
#admin-settings .admin-panel-v22{
  padding:28px;
}

.auth-page-v22{
  gap:24px;
  align-items:start;
}

.auth-card-head-v22{
  margin-bottom:12px;
}

.auth-card-head-v22 h3{
  font-size:clamp(40px, 4vw, 68px);
  margin:0 0 10px;
}

.auth-card-v22,
.register-card-v22,
.register-side-v22{
  gap:16px;
}

.register-card-v22{
  align-content:start;
}

.register-card-v22 > label:not(.checkline-v22){
  display:block;
  margin:2px 0 -2px;
  color:var(--muted2);
  font-size:15px;
  font-weight:600;
}

.register-grid-v22{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px 20px;
  margin-bottom:6px;
}

.register-grid-v22 label,
.auth-card-v22 label,
.settings-fields-v22 label{
  gap:10px;
  font-size:15px;
  line-height:1.5;
}

.register-grid-v22 .input,
.auth-card-v22 .input,
.settings-fields-v22 .input,
.settings-fields-v22 .select,
.settings-fields-v22 .textarea{
  min-height:58px;
}

.settings-fields-v22 .textarea{
  min-height:120px;
}

.role-pills-v22,
.interest-grid-v22,
.entity-tabs-v22,
.mini-tabs-v22,
.summary-tabs-editor-v22,
.trend-pills-v22,
.tag-pairs-v22{
  gap:12px;
}

.role-pills-v22 button,
.interest-grid-v22 button,
.entity-tabs-v22 button,
.mini-tabs-v22 button,
.trend-pills-v22 span,
.tag-pairs-v22 span{
  padding:12px 18px;
  min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}

.checkline-v22{
  margin-top:2px;
}

.register-actions-v22{
  margin-top:8px;
  padding-top:8px;
}

.progress-mini-v22{
  gap:12px;
}

.progress-mini-v22 div{
  min-height:66px;
  padding:14px 16px;
}

.register-tip-v22{
  margin-top:4px;
  padding:20px;
}

/* Admin layout polish */
.admin-shell-v22{
  grid-template-columns:320px minmax(0,1fr);
  gap:24px;
  align-items:start;
}

.admin-sidebar-v22{
  align-self:start;
  position:sticky;
  top:18px;
}

.admin-brand-v22{
  padding-bottom:16px;
  margin-bottom:16px;
  border-bottom:1px solid var(--border);
}

.admin-brand-v22 b{
  display:block;
  font-size:clamp(26px, 2.4vw, 38px);
  line-height:1.18;
  margin:0 0 6px;
}

.admin-sidebar-v22 nav{
  gap:10px;
  margin-top:0;
}

.admin-sidebar-v22 nav a{
  min-height:52px;
  padding:0 14px;
  border-radius:18px;
  flex-direction:row-reverse;
  justify-content:flex-end;
  text-align:right;
}

.admin-sidebar-v22 nav a span{
  flex:1;
  line-height:1.4;
}

.admin-main-v22{
  gap:20px;
  min-width:0;
}

.admin-topbar-v22{
  gap:14px;
  padding:2px 0;
}

.admin-actions-v22{
  gap:10px;
  flex-wrap:wrap;
}

.admin-kpis-v22{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}

.admin-kpis-v22 article{
  padding:22px;
}

.admin-kpis-v22 b{
  font-size:34px;
  margin:12px 0 6px;
  line-height:1;
}

.admin-grid-v22,
.admin-content-v22,
.library-layout-v22,
.taxonomy-grid-v22,
.home-editor-v22,
.search-admin-v22,
.discovery-grid-v22,
.settings-layout-v22{
  gap:18px;
  align-items:start;
}

.panel-head-v22{
  gap:14px;
  margin-bottom:18px;
  flex-wrap:wrap;
}

.panel-head-v22 h3{
  font-size:32px;
  line-height:1.2;
}

.panel-head-v22 button,
.table-row-v22 button{
  padding:10px 14px;
  min-height:42px;
}

.summary-cards-v22,
.entity-grid-v22,
.media-grid-v22{
  gap:14px;
}

.summary-cards-v22 article,
.entity-grid-v22 article,
.media-grid-v22 article{
  padding:18px;
  min-height:118px;
}

.summary-cards-v22 article{
  align-items:flex-start;
}

.summary-cards-v22 article div,
.entity-grid-v22 article{
  min-width:0;
}

.entity-grid-v22{
  grid-template-columns:repeat(4,minmax(0,1fr));
}

.entity-grid-v22 article{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:8px;
}

.entity-grid-v22 article i{
  margin-bottom:4px;
}

.entity-grid-v22 article b,
.summary-cards-v22 article b,
.media-grid-v22 article b,
.stack-list-v22 li span,
.table-row-v22 span,
.table-row-v22 button,
.analytics-bars-v22 span{
  line-height:1.45;
}

.stack-list-v22,
.check-tasks-v22{
  gap:10px;
}

.stack-list-v22 li{
  padding:14px 16px;
  min-height:58px;
}

.check-tasks-v22 li{
  padding:8px 0;
}

.entity-management-v22{
  padding:28px;
  display:grid;
  gap:18px;
}

.admin-table-v22{
  border-radius:24px;
}

.table-row-v22{
  padding:16px 18px;
  min-height:62px;
}

.summary-tabs-editor-v22 article{
  min-height:96px;
  padding:18px;
}

.analytics-bars-v22{
  gap:14px;
}

.analytics-bars-v22 div{
  gap:14px;
}

.settings-fields-v22{
  gap:14px;
}

/* Better responsive behavior */
@media (max-width: 1360px){
  .admin-shell-v22{
    grid-template-columns:280px minmax(0,1fr);
  }
  .admin-kpis-v22,
  .summary-cards-v22,
  .entity-grid-v22,
  .media-grid-v22{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 1200px){
  .auth-page-v22,
  .admin-shell-v22,
  .admin-grid-v22,
  .admin-content-v22,
  .library-layout-v22,
  .taxonomy-grid-v22,
  .home-editor-v22,
  .search-admin-v22,
  .discovery-grid-v22,
  .settings-layout-v22{
    grid-template-columns:1fr;
  }

  .admin-sidebar-v22{
    position:static;
  }

  .admin-panel-v22.wide{
    grid-column:span 1;
  }
}

@media (max-width: 760px){
  #login-page .auth-card-v22,
  #register-page .register-card-v22,
  #register-page .register-side-v22,
  #admin-dashboard .admin-sidebar-v22,
  #admin-dashboard .admin-panel-v22,
  #admin-content .admin-panel-v22,
  #admin-library .admin-panel-v22,
  #admin-taxonomies .admin-panel-v22,
  #admin-directory .entity-management-v22,
  #admin-homepage .admin-panel-v22,
  #admin-search .admin-panel-v22,
  #admin-discovery .admin-panel-v22,
  #admin-settings .admin-panel-v22{
    padding:22px;
    border-radius:28px;
  }

  .auth-card-head-v22 h3{
    font-size:clamp(34px, 11vw, 54px);
  }

  .register-grid-v22,
  .admin-kpis-v22,
  .summary-cards-v22,
  .entity-grid-v22,
  .media-grid-v22,
  .table-row-v22,
  .discovery-grid-v22{
    grid-template-columns:1fr;
  }

  .role-pills-v22,
  .interest-grid-v22,
  .register-actions-v22,
  .admin-topbar-v22,
  .panel-head-v22{
    display:grid;
  }

  .role-pills-v22 button,
  .interest-grid-v22 button,
  .register-actions-v22 .btn,
  .admin-actions-v22 .btn{
    width:100%;
  }

  .panel-head-v22{
    align-items:start;
  }

  .table-row-v22{
    gap:8px;
  }
}


/* ===================== V23 ADMIN PRO ===================== */
.mini-tabs-v23,.filters-row-v23,.chip-row-v23,.bulk-actions-v23,.roles-cards-v23{display:flex;flex-wrap:wrap;gap:10px}
.mini-tabs-v23 button,.filter-chip-v23,.chip,.bulk-actions-v23 button{border:1px solid var(--border);background:var(--surface);color:var(--ink);border-radius:999px;padding:10px 14px;font:inherit;cursor:pointer;transition:.2s ease}
.mini-tabs-v23 button.active,.filter-chip-v23.active,.chip.active{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.mini-tabs-v23 button:hover,.filter-chip-v23:hover,.chip:hover,.bulk-actions-v23 button:hover{transform:translateY(-1px)}
.bulk-actions-v23 .danger{background:#fff0ef;border-color:#ffcdc9;color:#9f2f2a}

.admin-form-layout-v23,.roles-grid-v23,.admin-mobile-preview-v23{display:grid;grid-template-columns:1.6fr .95fr;gap:18px;align-items:start}
.editor-form-v23,.meta-stack-v23,.team-list-v23,.seo-fields-v23{display:grid;gap:16px}
.field-grid-v23{display:grid;gap:16px}
.field-grid-v23.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.field-grid-v23.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.editor-form-v23 label>span,.settings-fields-v22 label,.field-grid-v23 label>span{display:block;margin-bottom:10px;color:var(--muted2);font-size:14px;font-weight:700}
.rich-editor-v23{border:1px solid var(--border);border-radius:24px;overflow:hidden;background:var(--surface)}
.editor-toolbar-v23{display:flex;flex-wrap:wrap;gap:8px;padding:14px;border-bottom:1px solid var(--border);background:var(--surface-2)}
.editor-toolbar-v23 button{border:1px solid var(--border);background:var(--surface);color:var(--ink);border-radius:12px;padding:8px 12px;font:inherit;cursor:pointer}
.editor-surface-v23{min-height:240px;padding:18px;line-height:1.9;color:var(--muted2)}
.editor-actions-v23{display:flex;gap:10px;justify-content:flex-start;flex-wrap:wrap}
.meta-panel-v23 .panel-head-v22.with-top{margin-top:6px;padding-top:6px;border-top:1px solid var(--border)}
.panel-soft-v23{border:1px solid var(--border);background:var(--surface-2);border-radius:22px;padding:16px;display:grid;gap:4px}
.panel-soft-v23 span{color:var(--muted2);font-size:14px}.panel-soft-v23 b{font-size:22px}.panel-soft-v23 small{color:var(--muted)}
.upload-drop-v23{border:1.5px dashed var(--border);border-radius:24px;padding:24px 16px;display:grid;place-items:center;gap:10px;text-align:center;background:linear-gradient(180deg,var(--surface),var(--surface-2))}
.upload-drop-v23 i{width:28px;height:28px;color:var(--muted2)}
.review-list-v23 li{padding:10px 0}

.roles-cards-v23{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.role-card-v23{border:1px solid var(--border);background:var(--surface);border-radius:24px;padding:18px;display:flex;justify-content:space-between;gap:14px;align-items:flex-start;cursor:pointer;transition:.2s ease}
.role-card-v23.active,.role-card-v23:hover{background:var(--surface-2);border-color:rgba(40,38,43,.18);box-shadow:0 10px 24px rgba(40,38,43,.06)}
.role-card-v23 div{display:grid;gap:5px}.role-card-v23 b{font-size:20px}.role-card-v23 span,.role-card-v23 small{color:var(--muted2)}
.team-list-v23{list-style:none;padding:0;margin:0}.team-list-v23 li{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--border)}.team-list-v23 li:last-child{border-bottom:none}.team-list-v23 div{display:grid;gap:4px}.team-list-v23 span,.team-list-v23 small{color:var(--muted2)}
.permission-panel-v23{margin-top:18px}
.permission-matrix-v23{display:grid;gap:10px}
.permission-row-v23{display:grid;grid-template-columns:1.5fr repeat(4,minmax(88px,1fr));gap:10px;align-items:center;padding:12px 14px;border:1px solid var(--border);border-radius:20px;background:var(--surface)}
.permission-row-v23.head{background:var(--surface-2);font-weight:700}.permission-row-v23 label{display:grid;place-items:center}

.ops-panel-v23{display:grid;gap:16px}
.table-controls-v23{display:grid;gap:14px}
.table-utility-v23{display:flex;flex-wrap:wrap;gap:10px}
.bulk-bar-v23{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 18px;border:1px solid var(--border);border-radius:22px;background:linear-gradient(180deg,var(--surface-2),var(--surface))}
.bulk-bar-v23 div:first-child{display:grid;gap:4px}.bulk-bar-v23 span{color:var(--muted2)}
.data-table-v23{display:grid;gap:10px}
.data-row-v23{display:grid;grid-template-columns:44px 1.8fr .9fr .9fr .9fr .9fr .8fr .7fr;gap:12px;align-items:center;padding:14px 16px;border:1px solid var(--border);border-radius:22px;background:var(--surface)}
.data-row-v23.head{background:var(--surface-2);font-weight:700}
.data-row-v23.selected{box-shadow:0 0 0 2px rgba(40,38,43,.08) inset}
.data-row-v23 span b{display:block;margin-bottom:2px}.data-row-v23 span small{color:var(--muted2);display:block}
.data-row-v23 button{border:1px solid var(--border);background:var(--surface-2);color:var(--ink);padding:10px 12px;border-radius:14px;font:inherit;cursor:pointer}
.table-check{display:grid;place-items:center;position:relative}.table-check input{position:absolute;opacity:0;inset:0;cursor:pointer}.table-check span{width:20px;height:20px;border:1.5px solid var(--border-strong, var(--border));border-radius:7px;background:var(--surface);display:block;position:relative}.table-check input:checked+span{background:var(--ink);border-color:var(--ink)}.table-check input:checked+span:after{content:"";position:absolute;inset:4px;border:2px solid var(--bg);border-top:none;border-right:none;transform:rotate(-45deg);width:7px;height:4px;right:4px;top:5px}
.status-dot{display:inline-block;width:10px;height:10px;border-radius:999px;margin-left:8px;vertical-align:middle}.status-dot.published{background:#06433E}.status-dot.review{background:#CD9677}.status-dot.draft{background:#B8BFC7}

.phone-admin-v23{width:min(100%,380px);margin-inline:auto;background:var(--surface);border:1px solid var(--border);border-radius:36px;padding:18px;display:grid;gap:14px;box-shadow:0 24px 50px rgba(40,38,43,.08)}
.phone-admin-top-v23{display:grid;grid-template-columns:48px 1fr 48px;gap:10px;align-items:center}.phone-admin-top-v23 b{text-align:center;font-size:22px}.phone-admin-top-v23 button,.phone-admin-actions-v23 button,.phone-admin-list-v23 button{border:1px solid var(--border);background:var(--surface-2);color:var(--ink);border-radius:16px;padding:10px;font:inherit;cursor:pointer}
.phone-admin-search-v23{display:flex;align-items:center;gap:10px;border:1px solid var(--border);border-radius:18px;padding:0 14px;min-height:52px;background:var(--surface-2)}.phone-admin-search-v23 input{border:none;background:transparent;outline:none;width:100%;font:inherit;color:var(--ink)}
.phone-admin-stats-v23{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.phone-admin-stats-v23 article,.phone-admin-cards-v23 article{border:1px solid var(--border);background:var(--surface-2);border-radius:22px;padding:16px}.phone-admin-stats-v23 span,.phone-admin-cards-v23 span{color:var(--muted2)}.phone-admin-stats-v23 b{display:block;font-size:28px;margin-top:6px}
.phone-admin-cards-v23{display:grid;gap:10px}.phone-admin-actions-v23{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.phone-admin-actions-v23 button.active{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.phone-admin-list-v23{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--border)}.phone-admin-list-v23:last-child{border-bottom:none}.phone-admin-list-v23 div{display:grid;gap:4px}.phone-admin-list-v23 small{color:var(--muted2)}
.mobile-notes-v23{align-self:start}

/* deeper admin polish */
.admin-sidebar-v22 nav a:hover{background:var(--surface-2);border-color:rgba(40,38,43,.16)}
.admin-panel-v22,.entity-management-v22{box-shadow:0 10px 24px rgba(40,38,43,.04)}
.admin-topbar-v22 .search.compact{min-height:56px}.admin-actions-v22 .btn{min-height:48px}
.admin-table-v22,.data-table-v23,.permission-matrix-v23,.roles-cards-v23,.media-grid-v22,.entity-grid-v22{min-width:0}

@media (max-width: 1280px){
  .roles-cards-v23{grid-template-columns:1fr}
  .data-row-v23{grid-template-columns:44px 1.8fr .9fr .9fr .9fr .9fr .8fr .8fr}
}
@media (max-width: 1100px){
  .admin-form-layout-v23,.roles-grid-v23,.admin-mobile-preview-v23{grid-template-columns:1fr}
  .permission-row-v23{grid-template-columns:1.3fr repeat(4,minmax(72px,1fr))}
}
@media (max-width: 860px){
  .field-grid-v23.two,.field-grid-v23.three,.phone-admin-stats-v23{grid-template-columns:1fr}
  .bulk-bar-v23,.data-row-v23{grid-template-columns:1fr}
  .data-row-v23.head{display:none}
  .data-row-v23{gap:8px;padding:16px}
  .data-row-v23 > span,.data-row-v23 > label{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .data-row-v23 > span:before{content:attr(data-label);color:var(--muted2)}
}
@media (max-width: 760px){
  .permission-row-v23{grid-template-columns:1fr 1fr;gap:8px}
  .permission-row-v23.head{display:none}
  .permission-row-v23 span{grid-column:1/-1;font-weight:700}
  .bulk-bar-v23,.editor-actions-v23,.table-utility-v23,.bulk-actions-v23,.mini-tabs-v23,.filters-row-v23{display:grid}
  .bulk-actions-v23 button,.table-utility-v23 .btn,.editor-actions-v23 .btn{width:100%}
  .phone-admin-actions-v23{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* ===================== V24 ORDER + MOBILE EXPANSION ===================== */
.admin-sidebar-v22 nav a{
  flex-direction:row;
  justify-content:space-between;
  gap:12px;
}
.admin-sidebar-v22 nav a span{flex:unset}
.admin-sidebar-v22 nav a i{order:2;flex-shrink:0}
.admin-sidebar-v22 nav a span{order:1}

.settings-select-v24{display:grid;gap:10px}
.settings-select-v24 .custom-select,
.settings-select-v24 .select-trigger{width:100%}
.settings-select-v24 .select-trigger{min-height:58px;border-radius:18px;background:rgba(251,251,249,.72)}
.settings-select-v24 .select-menu{width:100%}

.mobile-pages-grid-v24{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.mobile-mini-card-v24{border:1px solid var(--border);background:rgba(251,251,249,.64);border-radius:28px;padding:18px;display:grid;gap:14px}
.mobile-mini-card-v24 h4{margin:0;font-size:24px}
.mobile-mini-card-v24 p{margin:0;color:var(--muted2)}
.mini-phone-v24{border:1px solid var(--border);background:var(--surface);border-radius:30px;padding:14px;display:grid;gap:12px;min-height:320px}
.mini-phone-top-v24{display:flex;align-items:center;justify-content:space-between;gap:10px}.mini-phone-top-v24 b{font-size:18px}.mini-phone-top-v24 span{color:var(--muted2);font-size:13px}
.mini-search-v24{display:flex;align-items:center;gap:10px;min-height:48px;border:1px solid var(--border);background:var(--surface-2);border-radius:16px;padding:0 14px;color:var(--muted2)}
.mini-results-v24,.mini-chat-v24{display:grid;gap:4px;padding:12px 14px;border:1px solid var(--border);background:var(--surface-2);border-radius:18px}
.mini-results-v24>div{padding:10px 0;border-bottom:1px solid var(--border)}.mini-results-v24>div:last-child{border-bottom:none;padding-bottom:0}.mini-results-v24>div:first-child{padding-top:0}
.mini-results-v24 small,.mini-chat-v24 small,.mini-save-card-v24 small,.mini-profile-body-v24 small{color:var(--muted2)}
.mini-chip-row-v24{display:flex;flex-wrap:wrap;gap:8px}.mini-chip-row-v24 span{padding:8px 12px;border:1px solid var(--border);border-radius:999px;background:var(--surface-2);color:var(--muted2)}.mini-chip-row-v24 span.active{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.mini-save-card-v24{padding:18px;border-radius:20px;display:grid;gap:6px}.mini-save-card-v24.sage{background:rgba(197,212,205,.9)}.mini-save-card-v24.rose{background:rgba(232,206,197,.9)}
.mini-profile-head-v24{height:108px;border-radius:22px;background:linear-gradient(135deg,rgba(215,202,243,.9),rgba(197,212,205,.9))}
.mini-profile-body-v24{display:grid;gap:8px;text-align:center;padding:4px 8px}.mini-stats-v24{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}.mini-stats-v24 span{padding:7px 10px;background:var(--surface-2);border:1px solid var(--border);border-radius:999px;color:var(--muted2)}.mini-profile-body-v24 button{border:1px solid var(--border);background:var(--ink);color:var(--bg);min-height:42px;border-radius:14px;font:inherit}

@media(max-width:980px){
  .mobile-pages-grid-v24{grid-template-columns:1fr}
}
@media(max-width:760px){
  .admin-sidebar-v22 nav a{min-height:50px;padding:0 12px}
  .settings-select-v24 .select-trigger{min-height:56px}
}

/* ===================== V25 ADMIN FIXES ===================== */
.docs-links-grouped{
  display:grid;
  gap:18px;
}
.docs-nav-group{
  display:grid;
  gap:6px;
  padding-top:4px;
}
.docs-nav-label{
  margin:0 0 6px;
  padding:0 14px;
  color:var(--muted2);
  font-size:12px;
  font-weight:800;
}
.docs-chapter{
  padding-top:0;
}
.chapter-card{
  padding:28px 32px;
  border:1px solid var(--border);
  border-radius:32px;
  background:linear-gradient(180deg,rgba(251,251,249,.9),rgba(246,245,240,.92));
  display:grid;
  gap:10px;
}
.chapter-pill{
  display:inline-flex;
  width:max-content;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(57,49,86,.08);
  color:var(--ink);
  font-size:12px;
  font-weight:800;
}
.chapter-card h2,
.chapter-card p{
  margin:0;
}
.chapter-card p{color:var(--muted2);max-width:720px}

.admin-sidebar-v22 nav a{
  flex-direction:row;
  justify-content:flex-start;
  align-items:center;
  gap:14px;
  text-align:right;
  direction:rtl;
  padding-inline:16px;
  border:1px solid transparent;
  transition:background .2s ease,border-color .2s ease,transform .2s ease,color .2s ease;
}
.admin-sidebar-v22 nav a span{
  order:1;
  flex:1;
  text-align:right;
}
.admin-sidebar-v22 nav a i{
  order:0;
  flex-shrink:0;
}
.admin-sidebar-v22 nav a:hover{
  background:rgba(57,49,86,.06);
  border-color:rgba(57,49,86,.12);
  transform:translateX(-2px);
}
.admin-sidebar-v22 nav a.active{
  background:var(--ink);
  color:var(--bg);
  border-color:var(--ink);
}

.settings-layout-v22,
.admin-form-layout-v23,
.roles-grid-v23,
.admin-mobile-preview-v23{
  align-items:start;
}
.settings-fields-v22,
.editor-form-v23,
.seo-fields-v23{
  display:grid;
  gap:18px;
}
.settings-fields-v22 label,
.editor-form-v23 > label,
.field-grid-v23 > label,
.field-grid-v23 > .select-shell,
.seo-fields-v23 label{
  display:grid;
  gap:10px;
  width:100%;
  min-width:0;
}
.settings-fields-v22 label > span,
.editor-form-v23 label > span,
.seo-fields-v23 label > span{
  font-weight:700;
}
.admin-panel-v22 .input,
.admin-panel-v22 .textarea,
.admin-panel-v22 .select,
.admin-panel-v22 .rich-editor-v23,
.admin-panel-v22 .upload-drop-v23,
.admin-panel-v22 .chip-row-v23,
.admin-panel-v22 .select-trigger,
.admin-panel-v22 .select-menu{
  width:100%;
}
.admin-panel-v22 .textarea{
  min-height:132px;
  resize:vertical;
}
.admin-select-grid-v25,
.settings-fields-v22 .settings-select-v24,
.settings-fields-v22 .admin-select-v25{
  width:100%;
}
.admin-select-v25,
.settings-select-v24{
  display:grid;
  gap:10px;
}
.admin-select-v25 .custom-select,
.settings-select-v24 .custom-select{
  width:100%;
}
.admin-select-v25 .select-trigger,
.settings-select-v24 .select-trigger{
  min-height:58px;
  width:100%;
  border-radius:18px;
  background:rgba(251,251,249,.78);
  border:1px solid var(--border);
  padding-inline:16px;
}
.admin-select-v25 .select-menu,
.settings-select-v24 .select-menu{
  width:100%;
  border-radius:20px;
}
.admin-select-v25 .select-option,
.settings-select-v24 .select-option{
  min-height:46px;
}
.admin-check-list-v25{
  gap:12px;
}
.admin-check-list-v25 li{
  display:block;
}
.admin-check-list-v25 .control-row{
  width:100%;
  min-height:52px;
  padding:0 2px;
  justify-content:flex-start;
}
.admin-check-list-v25 .control-row > span + *{
  margin-inline-start:0;
}
.permission-row-v23{
  align-items:center;
}
.permission-check-v25{
  display:flex;
  justify-content:center;
  align-items:center;
}
.permission-check-v25 .sf-checkbox + span{
  margin:0;
}
.permission-check-v25 input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.panel-soft-v23{
  min-height:108px;
  justify-content:center;
}
.phone-admin-v23{
  grid-template-rows:auto auto auto auto auto auto auto;
  padding-bottom:18px;
}
.phone-admin-top-v23{
  direction:rtl;
}
.phone-admin-search-v23{
  direction:rtl;
  min-height:52px;
  padding-inline:14px;
  justify-content:space-between;
}
.phone-admin-search-v23 input{
  border:none;
  background:transparent;
  outline:none;
  width:100%;
  font:inherit;
  text-align:right;
}
.phone-admin-stats-v23{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.phone-admin-stats-v23 article{
  min-height:92px;
}
.phone-admin-cards-v23 article{
  text-align:right;
}
.phone-admin-actions-v23{
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.phone-admin-actions-v23 button{
  min-height:42px;
}
.phone-admin-list-v23{
  align-items:center;
  gap:12px;
}
.phone-admin-list-v23 > div{
  min-width:0;
}
.phone-admin-bottom-v25{
  margin-top:8px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  border:1px solid var(--border);
  background:rgba(251,251,249,.8);
  border-radius:22px;
  padding:8px;
}
.phone-admin-bottom-v25 button{
  border:none;
  background:transparent;
  border-radius:16px;
  min-height:58px;
  display:grid;
  place-items:center;
  gap:4px;
  font:inherit;
  color:var(--muted2);
}
.phone-admin-bottom-v25 button.active{
  background:var(--ink);
  color:var(--bg);
}
.mobile-notes-v23 .stack-list-v22 li{
  min-height:54px;
}

@media (max-width:1180px){
  .admin-form-layout-v23{grid-template-columns:1fr}
  .meta-panel-v23{position:static}
}
@media (max-width:980px){
  .roles-grid-v23,
  .admin-mobile-preview-v23,
  .settings-layout-v22{grid-template-columns:1fr}
}
@media (max-width:760px){
  .chapter-card{padding:22px}
  .admin-sidebar-v22 nav a{padding-inline:14px;min-height:54px}
  .admin-select-v25 .select-trigger,
  .settings-select-v24 .select-trigger{min-height:56px}
  .phone-admin-actions-v23,
  .phone-admin-bottom-v25{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* ===================== V25.1 ADMIN CRITICAL FIXES ===================== */

/* Fix the permission matrix checkbox visibility */
.permission-check-v25{
  position:relative;
  min-height:34px;
  display:flex !important;
  align-items:center;
  justify-content:center;
}
.permission-check-v25 input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.permission-check-v25 > span{
  width:20px;
  height:20px;
  flex:0 0 20px;
  border:1.5px solid rgba(40,38,43,.28);
  background:var(--surface);
  border-radius:6px;
  display:grid;
  place-items:center;
  transition:.18s var(--ease);
}
.permission-check-v25 input:checked + span{
  background:var(--ink);
  border-color:var(--ink);
}
.permission-check-v25 input:checked + span:after{
  content:"";
  width:9px;
  height:5px;
  border-right:2px solid var(--bg);
  border-bottom:2px solid var(--bg);
  transform:rotate(45deg) translate(-1px,-1px);
}

/* Clean the publish sidebar: no weird empty feeling, right aligned, tighter blocks */
.meta-panel-v23{
  align-self:start;
}
.meta-stack-v23{
  gap:12px;
}
.meta-stack-v23 .panel-soft-v23{
  min-height:auto;
  padding:18px 20px;
  align-content:start;
  justify-content:start;
  align-items:start;
  text-align:right;
}
.panel-soft-v23 b{
  line-height:1.35;
}
.panel-soft-v23 span,
.panel-soft-v23 small{
  text-align:right;
}
.meta-panel-v23 .panel-head-v22{
  justify-content:space-between;
  text-align:right;
}
.meta-panel-v23 .panel-head-v22 h3{
  text-align:right;
}

/* Better spacing for the editor and admin forms */
.admin-form-layout-v23{
  grid-template-columns:minmax(0,1.35fr) minmax(340px,.65fr);
  gap:24px;
}
.editor-form-v23{
  gap:20px;
}
.field-grid-v23{
  gap:18px;
}
.field-grid-v23.two{
  grid-template-columns:repeat(2,minmax(260px,1fr));
}
.field-grid-v23.three{
  grid-template-columns:repeat(3,minmax(220px,1fr));
}
.admin-panel-v22 .input,
.admin-panel-v22 .textarea,
.admin-select-v25 .select-trigger,
.settings-select-v24 .select-trigger{
  box-sizing:border-box;
}
.admin-panel-v22 .input,
.admin-panel-v22 .textarea{
  text-align:right;
  direction:rtl;
}
.admin-select-v25 .select-trigger,
.settings-select-v24 .select-trigger{
  justify-content:space-between;
  direction:rtl;
}
.admin-select-v25 .select-menu,
.settings-select-v24 .select-menu{
  inset-inline:auto 0;
  direction:rtl;
  text-align:right;
}

/* Permission matrix: align and make it readable */
.permission-matrix-v23{
  gap:12px;
}
.permission-row-v23{
  grid-template-columns:minmax(220px,1.25fr) repeat(4,minmax(110px,1fr));
  min-height:58px;
  padding:12px 18px;
  overflow:visible;
}
.permission-row-v23.head{
  min-height:54px;
}
.permission-row-v23 > span:first-child{
  text-align:right;
}
.permission-row-v23 b{
  text-align:center;
}

/* Admin sidebar: icon on the right, text after it, no washed active/hover */
.admin-sidebar-v22 nav a{
  direction:rtl;
  justify-content:flex-start;
  gap:14px;
  color:var(--muted2);
}
.admin-sidebar-v22 nav a i{
  order:0;
}
.admin-sidebar-v22 nav a span{
  order:1;
  text-align:right;
  flex:1;
}
.admin-sidebar-v22 nav a:hover{
  background:rgba(40,38,43,.06);
  color:var(--ink);
  border-color:rgba(40,38,43,.12);
}
.admin-sidebar-v22 nav a.active,
.admin-sidebar-v22 nav a.active:hover{
  background:var(--ink);
  color:var(--bg);
  border-color:var(--ink);
}

/* Admin mobile: fix cramped cards and readable direction */
.phone-admin-v23{
  width:min(100%,410px);
  gap:16px;
}
.phone-admin-stats-v23 article,
.phone-admin-cards-v23 article{
  text-align:right;
}
.phone-admin-cards-v23 article{
  min-height:auto;
  padding:16px 18px;
}
.phone-admin-cards-v23 article b,
.phone-admin-cards-v23 article span{
  display:block;
  line-height:1.55;
}
.phone-admin-actions-v23 button,
.phone-admin-bottom-v25 button{
  white-space:nowrap;
}
.phone-admin-list-v23{
  direction:rtl;
}
.phone-admin-list-v23 button{
  flex-shrink:0;
}

/* All admin check rows use the system checkbox shape */
.admin-check-list-v25 .control-row{
  direction:rtl;
  text-align:right;
  gap:10px;
}
.admin-check-list-v25 .control-row > span:first-of-type{
  margin:0;
}

/* Chapter separation stronger */
.docs-nav-label{
  border-top:1px solid var(--border);
  padding-top:12px;
}
.docs-nav-group:first-child .docs-nav-label{
  border-top:0;
  padding-top:0;
}

@media (max-width:1180px){
  .admin-form-layout-v23{
    grid-template-columns:1fr;
  }
}
@media (max-width:900px){
  .field-grid-v23.two,
  .field-grid-v23.three,
  .permission-row-v23{
    grid-template-columns:1fr;
  }
  .permission-row-v23.head{
    display:none;
  }
  .permission-row-v23{
    align-items:start;
    gap:12px;
  }
  .permission-check-v25{
    justify-content:space-between;
    flex-direction:row-reverse;
  }
}