/* Costa Studio app pages (studio-*.html, studios.html): comic theme on top of costa-tokens.css */
:root,
[data-theme="light"],
[data-theme="dark"] {
  --costa-red: #e21b1b;
  --costa-red-hover: #c41515;
  --costa-red-press: #a50f0f;
  --bg: #f4f1ec;
  --bg-subtle: #f4f1ec;
  --surface: #fff;
  --surface-2: #fbd5d2;
  --surface-3: #f0e9e1;
  --surface-hover: #fff0ee;
  --overlay: rgba(17, 17, 17, 0.55);
  --text: #111;
  --text-2: #3b3833;
  --text-3: #5d5851;
  --text-on-accent: #fff;
  --border: #111;
  --border-strong: #111;
  --border-accent: #111;
  --accent: #e21b1b;
  --accent-hover: #c41515;
  --accent-press: #a50f0f;
  --accent-soft: rgba(226, 27, 27, 0.1);
  --accent-soft-2: rgba(226, 27, 27, 0.18);
  --shadow-sm: 3px 3px 0 #111;
  --shadow: 5px 5px 0 #111;
  --shadow-md: 6px 6px 0 #111;
  --shadow-lg: 9px 9px 0 #111;
  --shadow-accent: 5px 5px 0 #111;
  --font-display: "Bebas Neue", "Cairo", sans-serif;
  --font-body: "Cairo", "DM Sans", system-ui, sans-serif;
  --font-mono: "Space Mono", monospace;
  --r-sm: 12px;
  --r: 16px;
  --r-lg: 20px;
  --r-xl: 26px;
  color-scheme: light;
}
body {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: var(--font-body) !important;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(rgba(17, 17, 17, 0.1) 1.4px, transparent 1.6px) 0 0/18px 18px;
  -webkit-mask-image: linear-gradient(135deg, transparent 30%, #000);
  mask-image: linear-gradient(135deg, transparent 30%, #000);
}
h1,
h2,
h3,
.t-display,
.t-h1,
.t-h2 {
  font-family: var(--font-display) !important;
  font-weight: 400;
  letter-spacing: 0.02em;
}
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] .t-display,
html[lang="ar"] .t-h1,
html[lang="ar"] .t-h2 {
  font-family: "Cairo", sans-serif !important;
  font-weight: 900;
  letter-spacing: 0;
}
.btn {
  border: 3px solid #111 !important;
  border-radius: 50px !important;
  font-weight: 900;
  box-shadow: 4px 4px 0 #111 !important;
  transition:
    transform 0.15s,
    box-shadow 0.15s;
}
.btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 #111 !important;
}
.btn:active {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 #111 !important;
}
.btn-primary {
  background: var(--accent) !important;
  color: #fff !important;
}
.btn-secondary,
.btn-ghost {
  background: #fff !important;
  color: #111 !important;
}
.card,
.field .input,
.input,
.textarea,
select {
  border: 3px solid #111 !important;
  border-radius: var(--r-lg) !important;
  background: #fff !important;
  color: #111 !important;
}
.card {
  box-shadow: var(--shadow-md) !important;
}
.card-hover:hover {
  transform: translate(-3px, -3px) rotate(-0.3deg);
  box-shadow: var(--shadow-lg) !important;
}
.input:focus,
.textarea:focus,
select:focus {
  outline: 0;
  border-color: var(--accent) !important;
  box-shadow: 3px 3px 0 var(--accent);
}
.badge,
.credit-pill {
  border: 2px solid #111 !important;
  border-radius: 30px !important;
  font-weight: 900;
  background: #fff !important;
  color: #111 !important;
}
.badge-accent,
.badge-new {
  background: var(--accent) !important;
  color: #fff !important;
}
.badge-success {
  background: #d6f5df !important;
}
.badge-warning {
  background: #fff3c4 !important;
}
.eyebrow,
.t-label {
  font-weight: 900;
}
.icon-btn {
  border: 3px solid #111 !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: 3px 3px 0 #111;
}
aside,
.sidebar,
.topbar,
nav.side {
  background: #fff !important;
  border-color: #111 !important;
}
.sidebar,
aside {
  border-inline-end: 3px solid #111 !important;
}
.topbar {
  border-bottom: 3px solid #111 !important;
}
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

/* case studies (portfolio/*.html) */
html body {
  background-color: #f4f1ec !important;
  color: #111 !important;
}
.cs-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(244, 241, 236, 0.96) !important;
  border-bottom: 3px solid #111 !important;
  margin-inline: calc(50% - 50vw);
  padding-inline: calc(50vw - 50%) !important;
}
.cs-brand img {
  width: 40px !important;
  height: 40px !important;
  animation: cmspin 6s linear infinite;
}
@keyframes cmspin {
  to {
    transform: perspective(300px) rotateY(360deg);
  }
}
.cs-brand span {
  font-family: "Bebas Neue", sans-serif;
  font-size: 22px;
  letter-spacing: 0.04em;
}
.cs-brand b {
  color: #e21b1b;
}
.cs-back {
  border: 3px solid #111;
  border-radius: 40px;
  padding: 6px 14px;
  background: #fff;
  box-shadow: 3px 3px 0 #111;
  font-weight: 900;
  color: #111 !important;
  text-decoration: none;
}
.cs-hero,
.cs-meta,
.cs-section + .cs-section,
.cs-next {
  border-color: rgba(17, 17, 17, 0.15) !important;
}
.cs-meta {
  background: #fff;
  border: 3px solid #111 !important;
  border-radius: 20px;
  box-shadow: 5px 5px 0 #111;
  padding: 22px !important;
}
.cs-section img,
.cs-hero img,
figure img {
  border: 3px solid #111;
  border-radius: 18px;
  box-shadow: 6px 6px 0 #111;
}
@media (max-width: 700px) {
  .costa-ai-launcher {
    width: 46px !important;
    height: 46px !important;
    bottom: 14px !important;
    box-shadow: 3px 3px 0 #111 !important;
  }
}
html.cm-top .costa-ai-launcher {
  opacity: 0 !important;
  pointer-events: none !important;
}
.cs-hero h1 {
  line-height: 1.15 !important;
  margin: 10px 0 14px !important;
}
.btn,
.icon-btn,
.badge,
.credit-pill,
.cs-back {
  box-shadow: none !important;
}
.btn {
  border-radius: 999px !important;
}
.btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: none !important;
}
.btn:active {
  transform: translateY(1px) !important;
  box-shadow: none !important;
}
.cs-brand img {
  animation: none !important;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cs-brand:hover img {
  transform: perspective(300px) rotateY(360deg);
}

/* professional cursor */
html.cm-cursor,
html.cm-cursor * {
  cursor: none !important;
}
html.cm-cursor input,
html.cm-cursor textarea,
html.cm-cursor [contenteditable="true"] {
  cursor: text !important;
}
.cm-cur-dot,
.cm-cur-ring {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2147483646;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}
.cm-cur-dot {
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: #e21b1b;
}
.cm-cur-ring {
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  border-radius: 50%;
  border: 2px solid #111;
  box-sizing: border-box;
}
.cm-cur-ring::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: transparent;
  transition:
    transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
    background 0.2s,
    border-color 0.2s;
}
html.cm-cur-on .cm-cur-dot,
html.cm-cur-on .cm-cur-ring {
  opacity: 1;
}
.cm-cur-ring {
  transition:
    opacity 0.2s,
    width 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
    height 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
    margin 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
    background 0.2s,
    border-color 0.2s;
}
html.cm-cur-hot .cm-cur-ring {
  width: 58px;
  height: 58px;
  margin: -29px 0 0 -29px;
  border-color: #e21b1b;
  background: rgba(226, 27, 27, 0.12);
}
html.cm-cur-hot .cm-cur-dot {
  background: #111;
}
html.cm-cur-down .cm-cur-ring {
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
}
html.cm-cur-text .cm-cur-dot,
html.cm-cur-text .cm-cur-ring {
  opacity: 0 !important;
}
.cs-hero,
.cs-section,
.cs-section + .cs-section,
.cs-next {
  border-top: 0 !important;
  border-bottom: 0 !important;
}
.cs-scope-card,
.cs-type-card,
.cs-ba-col,
.cs-media-box {
  border: 3px solid #111 !important;
  border-radius: 20px !important;
  box-shadow: 5px 5px 0 #111 !important;
  overflow: hidden;
}
.cs-media-box img {
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.cs-chip {
  border: 2px solid #111 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}
.costa-ai-launcher,
.icon-chat {
  box-shadow: none !important;
}
.auth-tabs {
  border: 2px solid #111 !important;
  border-radius: 999px !important;
}
.auth-foot {
  border-top: 2px dashed rgba(17, 17, 17, 0.2) !important;
}
.auth-art {
  border-right: 3px solid #111 !important;
}
.cs-hero h1 {
  margin-bottom: 26px !important;
}

/* app UI: replace every 1px hairline with comic lines */
.sb-foot,
.m-foot,
.specs,
.ws-board,
.vs-gal,
.r {
  border-top: 2px dashed rgba(17, 17, 17, 0.25) !important;
}
.r {
  border-top: 0 !important;
  border-bottom: 2px dashed rgba(17, 17, 17, 0.2) !important;
}
.tb-search,
.acct-btn,
.dk-btn,
.vs-mode,
.ws-mode,
.seg,
.mk-type,
.chip,
.ratio,
.ide-back,
.ide-projbtn,
.cv-hint,
.templates-filter button,
.seg button {
  border: 2px solid #111 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}
.seg button {
  border: 0 !important;
}
.ws-canvas,
.vs-frame,
.dock,
.ws-rail-card,
.node,
.ide-start,
.track-lane {
  border: 3px solid #111 !important;
  border-radius: 20px !important;
}
.dock,
.ws-rail-card,
.node,
.ide-start {
  box-shadow: 5px 5px 0 #111 !important;
}
.ws-canvas,
.vs-frame {
  background: #fff !important;
  border-style: dashed !important;
  border-color: rgba(17, 17, 17, 0.45) !important;
}
.empty,
.dk-ref.add,
.add-card,
.shot-add {
  border: 2px dashed rgba(17, 17, 17, 0.45) !important;
  border-radius: 18px !important;
}
.track {
  border: 2px solid #111 !important;
  border-radius: 12px !important;
}
.node-head,
.cv-bar,
.ide-top,
.tabs {
  border-bottom: 3px solid #111 !important;
}
:root,
[data-theme="light"],
[data-theme="dark"] {
  --text-2: #24211d;
  --text-3: #3d3934;
}

/* ---- workspace right rail: no white slab behind the cards, room for the hard shadows ---- */
aside.ws-rail,
.ws-rail {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 8px 10px 0 !important;
  overflow: visible !important;
}
.ws-rail-card {
  background: #fff !important;
}

/* ---- studio controls ---- */
/* a select inside a chip: one border only (the chip's), not a box inside a pill */
.chip select,
.chip > select {
  border: 0 !important;
  box-shadow: none !important;
  background-color: transparent !important;
  border-radius: 999px !important;
  outline: 0;
}
/* the light/dark switch does nothing in the comic theme, so it is hidden here too */
#themeBtn { display: none !important; }

/* dock: the control chips wrap onto a second row instead of hiding Generate behind a horizontal scroll */
.dk-bar {
  flex-wrap: wrap !important;
  overflow: visible !important;
  row-gap: 10px;
}
.dk-bar .dk-go { margin-inline-start: auto; }

/* dock option panels (camera, lighting, colour, advanced...) match the white dock they open inside */
.dk-panel,
.dk-panel.open { background: #fff !important; }

/* ---- studio menus: account menu and command palette in the same comic frame as the cards ---- */
.acct-menu {
  background: #fff !important;
  border: 3px solid #111 !important;
  border-radius: 18px !important;
  box-shadow: 6px 6px 0 #111 !important;
  inset-inline-end: 6px !important;
}
.acct-head { border-bottom: 2px dashed rgba(17, 17, 17, 0.25) !important; }
.acct-item { border-radius: 12px !important; }
.acct-item:hover,
.cmdk-item:hover,
.cmdk-item.sel { background: #fde5e3 !important; color: #e21b1b !important; }
.cmdk {
  background: #fff !important;
  border: 3px solid #111 !important;
  border-radius: 22px !important;
  box-shadow: 8px 8px 0 #111 !important;
}
.cmdk-in { border-bottom: 2px solid #111 !important; }
.cmdk-in input { font-family: inherit; }
/* scrollbars: a soft thumb instead of a heavy black bar */
::-webkit-scrollbar-thumb {
  background: rgba(17, 17, 17, 0.38) !important;
  border: 3px solid transparent !important;
  background-clip: padding-box !important;
}
::-webkit-scrollbar-thumb:hover { background: rgba(17, 17, 17, 0.6) !important; background-clip: padding-box !important; }