/* Craft CP component styles, extracted from the guide and scoped to
   .cp-demo so live previews render without touching the MkDocs theme.
   Design-token values come from craftcms/cms 5.x. */


:root{
  /* palette (Tailwind base + Craft's custom gray HSL ramp) */
  --white:#fff; --black:#000;
  --gray-050:hsl(212,60%,97%); --gray-100:hsl(212,50%,93%); --gray-150:hsl(212,40%,89%);
  --gray-200:hsl(212,30%,85%); --gray-300:hsl(211,13%,65%); --gray-350:hsl(211,11%,59%);
  --gray-400:hsl(210,10%,53%); --gray-500:hsl(211,12%,43%); --gray-550:hsl(210,13%,40%);
  --gray-600:hsl(209,14%,37%); --gray-700:hsl(209,18%,30%); --gray-800:hsl(209,20%,25%);
  --gray-900:hsl(210,24%,16%); --gray-1000:hsl(210,24%,10%);
  --red-050:#fef2f2; --red-100:#fee2e2; --red-300:#fca5a5; --red-600:#dc2626; --red-700:#b91c1c; --red-800:#991b1b;
  --orange-100:#ffedd5; --orange-400:#fb923c; --orange-600:#ea580c;
  --amber-100:#fef3c7; --amber-300:#fcd34d; --amber-600:#d97706; --amber-700:#b45309;
  --teal-100:#ccfbf1; --teal-300:#5eead4; --teal-550:#11a697; --teal-700:#0f766e;
  --sky-100:#e0f2fe; --sky-300:#7dd3fc; --sky-600:#0284c7; --sky-700:#0369a1;
  --blue-300:#93c5fd; --blue-600:#2563eb;

  /* semantic (from _tokens.scss) */
  --bg-error:var(--red-100); --bg-warning:var(--amber-100); --bg-success:var(--teal-100); --bg-notice:var(--sky-100);
  --bg-enabled:var(--teal-550); --bg-pending:var(--orange-400); --bg-disabled:var(--red-600);
  --fg-error:#d81f23; --fg-warning:var(--amber-700); --fg-success:var(--teal-700); --fg-notice:var(--sky-700);
  --rose-600:#e11d48;
  --fg-subtle:var(--gray-550); --fg-input:hsl(212,25%,50%);
  --border-hairline:rgb(from var(--gray-800) r g b / 10%);
  --border-hairline-medium:#cfd8e3;
  --focus-outline:#0284c7;

  /* type + surface (theme/dist/cp.css) */
  --text-color:var(--gray-700);
  --font-size:14px; --lh:1.42em;
  --sans:system-ui,BlinkMacSystemFont,-apple-system,"Segoe UI",Roboto,Oxygen,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --body-bg:var(--gray-100); --sidebar-bg:var(--gray-150);

  /* radius + spacing */
  --radius-sm:3px; --radius-md:4px; --radius-lg:5px;
  --2xs:2px; --xs:4px; --s:8px; --m:14px; --l:18px; --xl:24px;

  /* controls */
  --ui-control-height:34px; --ui-control-height-small:30px;
  --ui-control-bg:rgb(from var(--fg-input) r g b / 25%);
  --ui-control-bg-hover:rgb(from var(--fg-input) r g b / 30%);
  --ui-control-fg:var(--fg-subtle);
}



.cp-demo *{box-sizing:border-box}

.cp-demo html{scroll-behavior:smooth}

.cp-demo body{
  margin:0; font-family:var(--sans); font-size:var(--font-size); line-height:var(--lh);
  color:var(--text-color); background:var(--body-bg);
  -webkit-font-smoothing:subpixel-antialiased;
}

.cp-demo a{color:var(--sky-700); text-decoration:none}

.cp-demo a:hover{text-decoration:underline}

.cp-demo code{font-family:var(--mono); font-size:.86em}


.cp-demo .layout{display:grid; grid-template-columns:248px 1fr; min-height:100vh}



.cp-demo .sidebar{
  background:var(--gray-900); color:var(--gray-200);
  position:sticky; top:0; height:100vh; overflow-y:auto; padding:22px 0;
}

.cp-demo .sidebar .brand{padding:0 22px 18px; border-bottom:1px solid rgba(255,255,255,.08); margin-bottom:12px}

.cp-demo .sidebar .brand .mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:var(--radius-md);
  background:var(--red-600); color:#fff; font-weight:700; font-size:18px; margin-bottom:10px;
}

.cp-demo .sidebar .brand h1{font-size:15px; margin:0; color:#fff; font-weight:600; line-height:1.3}

.cp-demo .sidebar .brand p{font-size:12px; margin:4px 0 0; color:var(--gray-400)}

.cp-demo .sidebar nav{padding:0 12px}

.cp-demo .sidebar .group{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--gray-400); padding:14px 10px 6px; font-weight:600}

.cp-demo .sidebar nav a{
  display:block; color:var(--gray-200); padding:6px 10px; border-radius:var(--radius-md);
  font-size:13.5px; line-height:1.35;
}

.cp-demo .sidebar nav a:hover{background:rgba(255,255,255,.06); text-decoration:none; color:#fff}


.cp-demo .content{padding:44px 56px 120px; max-width:960px}

.cp-demo .page-head{border-bottom:1px solid var(--border-hairline); padding-bottom:26px; margin-bottom:14px}

.cp-demo .page-head .eyebrow{font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--fg-subtle); font-weight:600}

.cp-demo .page-head h1{font-size:30px; line-height:1.2; margin:8px 0 12px; color:var(--gray-900); font-weight:700; letter-spacing:-.01em}

.cp-demo .page-head p{font-size:15px; max-width:64ch; color:var(--gray-600); margin:0}

.cp-demo .page-head .version{display:inline-block; margin-top:14px; font-size:12px; background:var(--gray-200); color:var(--gray-700); padding:3px 9px; border-radius:var(--radius-lg); font-weight:500}


.cp-demo section{padding-top:52px; scroll-margin-top:20px}

.cp-demo section > h2{
  font-size:22px; color:var(--gray-900); font-weight:700; margin:0 0 6px; letter-spacing:-.01em;
  padding-bottom:8px; border-bottom:2px solid var(--gray-200);
}

.cp-demo section > .lead{color:var(--gray-600); margin:10px 0 4px; max-width:70ch}

.cp-demo h3{font-size:16px; color:var(--gray-800); margin:34px 0 4px; font-weight:600}

.cp-demo h3 .anno{font-family:var(--mono); font-size:12px; color:var(--fg-subtle); font-weight:400; margin-left:8px}



.cp-demo .demo{
  border:1px solid var(--border-hairline-medium); border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  background:#fff; padding:22px 24px; margin-top:16px;
}

.cp-demo .demo + .code{margin-top:0; border-radius:0 0 var(--radius-lg) var(--radius-lg); border-top:0}

.cp-demo .demo.row{display:flex; flex-wrap:wrap; gap:14px; align-items:flex-start}

.cp-demo .code{
  position:relative; border:1px solid var(--border-hairline-medium); border-radius:var(--radius-lg);
  background:var(--gray-900); margin-top:16px; overflow:hidden;
}

.cp-demo .code pre{margin:0; padding:16px 18px; overflow-x:auto; color:#e6edf3; font-family:var(--mono); font-size:12.5px; line-height:1.6}

.cp-demo .code .tag{position:absolute; top:0; right:0; font-size:10px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--gray-400); background:rgba(255,255,255,.06); padding:3px 8px; border-bottom-left-radius:var(--radius-md)}

.cp-demo .code .cp-copy{position:absolute; top:6px; right:64px; font-size:11px; color:var(--gray-300); background:rgba(255,255,255,.08);
  border:0; border-radius:var(--radius-md); padding:4px 9px; cursor:pointer; font-family:var(--sans)}

.cp-demo .code .cp-copy:hover{background:rgba(255,255,255,.16); color:#fff}

.cp-demo .tok-c{color:#8b98a5}
 .cp-demo .tok-k{color:#79c0ff}
 .cp-demo .tok-s{color:#a5d6ff}
 .cp-demo .tok-a{color:#7ee787}


.cp-demo .note{background:var(--sky-100); border-left:3px solid var(--sky-600); padding:11px 15px; border-radius:0 var(--radius-md) var(--radius-md) 0; margin:16px 0; font-size:13.5px; color:var(--gray-700)}

.cp-demo .note strong{color:var(--sky-700)}



.cp-demo table.ref{width:100%; border-collapse:collapse; margin-top:16px; font-size:13px}

.cp-demo table.ref th{text-align:left; font-weight:600; color:var(--gray-800); border-bottom:2px solid var(--gray-200); padding:8px 10px; font-size:12px}

.cp-demo table.ref td{border-bottom:1px solid var(--border-hairline); padding:8px 10px; vertical-align:top}

.cp-demo table.ref td code{color:var(--red-700); background:var(--gray-050); padding:1px 5px; border-radius:3px}

.cp-demo .swatch{display:inline-block; width:22px; height:22px; border-radius:var(--radius-sm); border:1px solid var(--border-hairline); vertical-align:-6px; margin-right:8px}


.cp-demo .pal{display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:8px; margin-top:16px}

.cp-demo .pal .chipc{border:1px solid var(--border-hairline); border-radius:var(--radius-md); overflow:hidden; font-size:11px}

.cp-demo .pal .chipc .sw{height:46px}

.cp-demo .pal .chipc .lb{padding:5px 7px; background:#fff}

.cp-demo .pal .chipc .lb b{display:block; color:var(--gray-800)}

.cp-demo .pal .chipc .lb span{color:var(--fg-subtle); font-family:var(--mono); font-size:10px}


.cp-demo .spacing-row{display:flex; align-items:center; gap:14px; margin:6px 0; font-size:13px}

.cp-demo .spacing-row .bar{background:var(--sky-600); height:14px; border-radius:2px}

.cp-demo .spacing-row code{color:var(--red-700)}




.cp-demo .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:var(--ui-control-height); min-height:var(--ui-control-height); padding:0 14px;
  border:1px solid transparent; border-radius:var(--radius-lg);
  font-family:inherit; font-size:14px; line-height:1; font-weight:400; cursor:pointer;
  background:var(--ui-control-bg); color:var(--gray-700); white-space:nowrap; user-select:none;
}

.cp-demo .btn:hover{background:var(--ui-control-bg-hover); text-decoration:none}

.cp-demo .btn:focus-visible{outline:none; box-shadow:0 0 0 1px #fff,0 0 0 3px var(--focus-outline)}

.cp-demo .btn.submit{background:var(--red-600); color:#fff}

.cp-demo .btn.submit:hover{background:var(--red-700)}

.cp-demo .btn.submit:active{background:var(--red-800)}

.cp-demo .btn.secondary{background:var(--gray-500); color:#fff}

.cp-demo .btn.secondary:hover{background:var(--gray-550)}

.cp-demo .btn.caution{background:var(--red-050); color:var(--fg-error)}

.cp-demo .btn.caution:hover{background:var(--red-100)}

.cp-demo .btn.dashed{background:transparent; border:1px dashed var(--gray-400); color:var(--gray-600)}

.cp-demo .btn.dashed:hover{background:var(--gray-050)}

.cp-demo .btn.small{height:var(--ui-control-height-small); min-height:var(--ui-control-height-small); font-size:13px; padding:0 11px}

.cp-demo .btn.big{height:40px; min-height:40px; padding:0 18px; font-size:15px}

.cp-demo .btn.disabled{opacity:.25; pointer-events:none}

.cp-demo .btn .cp-icon{width:16px; height:16px; display:inline-flex}

.cp-demo .btn .cp-icon svg{width:100%; height:100%; fill:currentColor}


.cp-demo .ic{width:1em; height:1em; display:inline-block; vertical-align:-0.125em; flex:0 0 auto; fill:none}

.cp-demo .fld-element-icon .ic, .cp-demo .cp-icon.medium .ic, .cp-demo .gear .ic, .cp-demo .fld-settings-gear .ic, .cp-demo .fld-add-btn .ic, .cp-demo .fld-new-tab-btn .ic{width:100%; height:100%}

.cp-demo .gear, .cp-demo .fld-settings-gear{display:inline-flex; align-items:center; justify-content:center}

.cp-demo .copytextbtn .ic{width:15px; height:15px}

.cp-demo .tip-dismiss-btn .ic{width:14px; height:14px}

.cp-demo .fld-add-btn .ic, .cp-demo .fld-new-tab-btn .ic{width:14px; height:14px}

.cp-demo .btngroup{display:inline-flex; border-radius:var(--radius-lg)}

.cp-demo .btngroup .btn{border-radius:0; margin-left:-1px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}

.cp-demo .btngroup .btn:first-child{border-radius:var(--radius-lg) 0 0 var(--radius-lg); margin-left:0}

.cp-demo .btngroup .btn:last-child{border-radius:0 var(--radius-lg) var(--radius-lg) 0}

.cp-demo .btngroup .btn.active{background:var(--gray-500); color:#fff}



.cp-demo .field{margin:0}

.cp-demo .field + .field{margin-top:24px}

.cp-demo .field > .heading{margin-bottom:5px}

.cp-demo .field > .heading > label{font-weight:600; color:var(--gray-800); font-size:13px}

.cp-demo .field > .heading > label.required::after{
  content:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 384 512'><path fill='%23e11d48' d='M192 32c17.7 0 32 14.3 32 32l0 132.5 115.6-66.8c15.3-8.8 34.9-3.6 43.7 11.7s3.6 34.9-11.7 43.7L256 251.5l115.6 66.8c15.3 8.8 20.5 28.4 11.7 43.7s-28.4 20.5-43.7 11.7L224 315.5 224 448c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-132.5L44.4 373.7c-15.3 8.8-34.9 3.6-43.7-11.7s-3.6-34.9 11.7-43.7L128 251.5 12.4 184.7C-2.9 175.9-8.1 156.3 .7 141s28.4-20.5 43.7-11.7L160 196.5 160 64c0-17.7 14.3-32 32-32z'/></svg>");
  display:inline-block; margin-inline:5px 0; vertical-align:2px; line-height:0;
}

.cp-demo .field > .instructions{color:var(--fg-subtle); font-size:12.5px; margin-bottom:6px}

.cp-demo .field > .instructions p{margin:0}

.cp-demo .field .input{position:relative}

.cp-demo .field .tip, .cp-demo .field .warning, .cp-demo .field .errors{font-size:12.5px; margin-top:6px; display:flex; gap:6px; align-items:flex-start}

.cp-demo .field .tip{color:var(--fg-notice)}
 .cp-demo .field .warning{color:var(--fg-warning)}

.cp-demo .field .errors{list-style:none; padding:0; margin:6px 0 0; color:var(--fg-error)}

.cp-demo .field .errors li{margin:0}

.cp-demo .badge-required{color:var(--fg-error)}



.cp-demo .text, .cp-demo .selectize-like, .cp-demo textarea.text, .cp-demo select.select-el{
  width:100%; height:var(--ui-control-height); padding:0 10px;
  border:1px solid var(--fg-input); border-radius:var(--radius-lg);
  background:#fff; color:var(--gray-800); font-family:inherit; font-size:14px;
}

.cp-demo textarea.text{height:auto; min-height:82px; padding:8px 10px; line-height:1.5; resize:vertical}

.cp-demo .text:focus, .cp-demo textarea.text:focus, .cp-demo select.select-el:focus{outline:none; border-color:var(--focus-outline); box-shadow:0 0 0 2px rgb(from var(--focus-outline) r g b / 30%)}

.cp-demo .text::placeholder{color:var(--gray-350)}

.cp-demo .text.fullwidth{width:100%}

.cp-demo .select-wrap{position:relative; display:inline-block; width:100%}

.cp-demo select.select-el{appearance:none; padding-right:30px; cursor:pointer}

.cp-demo .select-wrap::after{content:''; position:absolute; right:12px; top:50%; width:7px; height:7px;
  border-right:2px solid var(--fg-subtle); border-bottom:2px solid var(--fg-subtle);
  transform:translateY(-70%) rotate(45deg); pointer-events:none}



.cp-demo .checkbox-row, .cp-demo .radio-row{display:flex; align-items:center; gap:8px; margin:5px 0; cursor:pointer; font-size:13.5px; color:var(--gray-700)}

.cp-demo .cbx{width:16px; height:16px; border:1px solid var(--fg-input); border-radius:var(--radius-sm); background:#fff; position:relative; flex:0 0 auto}

.cp-demo .cbx.checked{background:var(--sky-600); border-color:var(--sky-600)}

.cp-demo .cbx.checked::after{content:''; position:absolute; left:5px; top:1.5px; width:4px; height:8px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg)}

.cp-demo .rdo{width:16px; height:16px; border:1px solid var(--fg-input); border-radius:50%; background:#fff; position:relative; flex:0 0 auto}

.cp-demo .rdo.checked{border-color:var(--sky-600)}

.cp-demo .rdo.checked::after{content:''; position:absolute; inset:3px; border-radius:50%; background:var(--sky-600)}



.cp-demo .lightswitch{display:inline-block; width:34px; height:22px; border-radius:11px; background:var(--gray-200); box-shadow:inset 0 0 0 1px rgb(from var(--fg-input) r g b / 55%); position:relative; cursor:pointer; vertical-align:middle; border:0; padding:0; transition:background-color .1s}

.cp-demo .lightswitch .handle{position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:inset 0 0 0 1px rgb(from var(--fg-input) r g b / 45%); transition:left .13s ease}

.cp-demo .lightswitch.on{background:var(--teal-550); box-shadow:inset 0 0 0 1px oklch(from var(--teal-550) calc(l - .1) c h)}

.cp-demo .lightswitch.on .handle{left:14px}

.cp-demo .lightswitch.on .handle::after{content:''; position:absolute; inset:0; margin:auto; width:10px; height:10px; background:var(--teal-550);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E") center/contain no-repeat}

.cp-demo .lightswitch.small{width:28px; height:18px; border-radius:9px}

.cp-demo .lightswitch.small .handle{width:14px; height:14px}

.cp-demo .lightswitch.small.on .handle{left:12px}

.cp-demo .lightswitch.small.on .handle::after{width:8px; height:8px}



.cp-demo .copytext{display:inline-flex; align-items:stretch; border:1px solid var(--fg-input); border-radius:var(--radius-lg); overflow:hidden; background:#fff; max-width:100%}

.cp-demo .copytext input{border:0; padding:0 10px; height:var(--ui-control-height); font-family:var(--mono); font-size:13px; color:var(--gray-800); background:transparent; min-width:220px}

.cp-demo .copytext .copytextbtn{border:0; border-left:1px solid var(--border-hairline-medium); background:var(--gray-050); padding:0 11px; cursor:pointer; color:var(--fg-subtle)}

.cp-demo .copytext .copytextbtn:hover{background:var(--gray-100); color:var(--gray-700)}



.cp-demo .status{display:inline-block; width:10px; height:10px; border-radius:50%; vertical-align:0; margin-right:6px; background:transparent; box-shadow:inset 0 0 0 2px var(--gray-350)}

.cp-demo .status.on, .cp-demo .status.live, .cp-demo .status.active, .cp-demo .status.enabled{background:var(--bg-enabled); box-shadow:none}

.cp-demo .status.off, .cp-demo .status.suspended, .cp-demo .status.expired{background:var(--bg-disabled); box-shadow:none}

.cp-demo .status.pending{background:var(--bg-pending); box-shadow:none}

.cp-demo .status.disabled, .cp-demo .status.inactive{background:var(--gray-350); box-shadow:none}

.cp-demo .status-item{font-size:13.5px; color:var(--gray-700); margin-right:20px; display:inline-flex; align-items:center}



.cp-demo .badge{display:inline-block; min-width:20px; text-align:center; padding:1px 7px; border-radius:var(--radius-lg);
  background:var(--fg-subtle); color:#fff; font-size:12px; font-weight:600; line-height:1.5}

.cp-demo .chip{display:inline-flex; align-items:center; gap:8px; padding:5px 10px; border:1px solid var(--border-hairline-medium);
  border-radius:var(--radius-lg); background:#fff; font-size:13px; color:var(--gray-800)}

.cp-demo .chip .thumb{width:20px; height:20px; border-radius:var(--radius-sm); background:var(--gray-200); flex:0 0 auto}

.cp-demo .token{display:inline-block; padding:2px 8px; border-radius:var(--radius-lg); background:var(--gray-150); color:var(--gray-700); font-size:12.5px}



.cp-demo .pane{background:#fff; border:1px solid var(--border-hairline-medium); border-radius:var(--radius-lg); padding:24px}

.cp-demo .meta{background:#fff; border:1px solid var(--border-hairline-medium); border-radius:var(--radius-lg); overflow:hidden}

.cp-demo .meta .field{padding:14px 18px; margin:0; border-bottom:1px solid var(--border-hairline)}

.cp-demo .meta .field:last-child{border-bottom:0}



.cp-demo table.data{width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--border-hairline-medium); border-radius:var(--radius-lg); overflow:hidden; font-size:13.5px}

.cp-demo table.data th{text-align:left; padding:10px 14px; font-weight:600; color:var(--gray-800); border-bottom:1px solid var(--border-hairline-medium); background:var(--gray-050); font-size:12.5px}

.cp-demo table.data td{padding:10px 14px; border-bottom:1px solid var(--border-hairline); color:var(--gray-700)}

.cp-demo table.data tbody tr:last-child td, .cp-demo table.data tr:last-child td{border-bottom:0}

.cp-demo table.data tbody tr:hover{background:var(--gray-050)}



.cp-demo .pane-tabs .scrollable{display:flex; gap:2px; border-bottom:1px solid var(--border-hairline-medium)}

.cp-demo .pane-tabs a{padding:8px 15px; font-size:13.5px; color:var(--gray-600); border-bottom:2px solid transparent; cursor:pointer; margin-bottom:-1px; text-decoration:none}

.cp-demo .pane-tabs a:hover{color:var(--gray-900)}

.cp-demo .pane-tabs a.sel{color:var(--red-700); border-bottom-color:var(--red-600); font-weight:600}



.cp-demo .toolbar{display:flex; gap:10px; align-items:center; padding:10px 12px; background:#fff; border:1px solid var(--border-hairline-medium); border-radius:var(--radius-lg)}

.cp-demo .toolbar .flex-grow{flex:1}

.cp-demo .search-container{position:relative; flex:1; max-width:280px}

.cp-demo .search-container input{width:100%; height:var(--ui-control-height); padding:0 10px 0 32px; border:1px solid var(--fg-input); border-radius:var(--radius-lg); font-size:14px}

.cp-demo .search-container::before{content:''; position:absolute; left:11px; top:50%; width:11px; height:11px; border:2px solid var(--fg-subtle); border-radius:50%; transform:translateY(-60%)}

.cp-demo .search-container::after{content:''; position:absolute; left:20px; top:20px; width:6px; height:2px; background:var(--fg-subtle); transform:rotate(45deg)}



.cp-demo .spinner{width:24px; height:24px; border:2px solid var(--gray-200); border-top-color:var(--sky-600); border-radius:50%; animation:spin .7s linear infinite; display:inline-block}

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

.cp-demo .grid2{display:grid; grid-template-columns:1fr 1fr; gap:16px}



.cp-demo .status-label{display:inline-flex; align-items:center; gap:var(--xs); padding:4px 8px 4px 6px; line-height:1.1;
  font-size:11px; font-weight:500; text-transform:uppercase; border-radius:11px; margin-right:8px;
  background-color:rgb(from var(--sl-bg) r g b / 15%)}

.cp-demo .status-label .status{margin:0; width:8px; height:8px; box-shadow:none; background:var(--sl-bg)}

.cp-demo .status-label .status-label-text{color:var(--sl-fg)}

.cp-demo .status-label.green{--sl-bg:#22c55e; --sl-fg:#14532d}

.cp-demo .status-label.teal{--sl-bg:var(--teal-550); --sl-fg:#134e4a}

.cp-demo .status-label.blue{--sl-bg:var(--blue-600); --sl-fg:#1e3a8a}

.cp-demo .status-label.amber{--sl-bg:#f59e0b; --sl-fg:#78350f}

.cp-demo .status-label.orange{--sl-bg:var(--orange-400); --sl-fg:#7c2d12}

.cp-demo .status-label.red{--sl-bg:var(--red-600); --sl-fg:#7f1d1d}

.cp-demo .status-label.gray{--sl-bg:var(--gray-400); --sl-fg:var(--gray-800)}



.cp-demo .money-container{display:inline-flex; align-items:stretch; border:1px solid var(--fg-input); border-radius:var(--radius-lg); overflow:hidden; background:#fff; max-width:220px}

.cp-demo .money-currency-label{display:flex; align-items:center; padding:0 10px; background:var(--gray-050); color:var(--fg-subtle); border-right:1px solid var(--border-hairline-medium); font-size:13px; white-space:nowrap; flex:0 0 auto}

.cp-demo .money-container input{border:0; height:var(--ui-control-height); padding:0 10px; font-size:14px; color:var(--gray-800); width:100%; text-align:right; font-variant-numeric:tabular-nums}



.cp-demo dl.meta.read-only{margin:0; background:#fff; border:1px solid var(--border-hairline-medium); border-radius:var(--radius-lg); overflow:hidden}

.cp-demo dl.meta.read-only .data{display:flex; gap:10px; padding:10px 16px; border-bottom:1px solid var(--border-hairline); font-size:13px}

.cp-demo dl.meta.read-only .data:last-child{border-bottom:0}

.cp-demo dl.meta.read-only dt.heading{margin:0; color:var(--fg-subtle); flex:0 0 40%; font-weight:500}

.cp-demo dl.meta.read-only dd.value{margin:0; color:var(--gray-800); flex:1; text-align:right; font-variant-numeric:tabular-nums}



.cp-demo .order-total{margin-top:0; border-top:0}

.cp-demo .order-total tr td{padding:7px 14px; border-bottom:1px solid var(--border-hairline)}

.cp-demo .order-total tr td:last-child{text-align:right; font-variant-numeric:tabular-nums}

.cp-demo .order-total tr.grand td{font-weight:700; color:var(--gray-900); border-bottom:0; border-top:2px solid var(--gray-200); font-size:15px}



.cp-demo .el-index{border:1px solid var(--border-hairline-medium); border-radius:var(--radius-lg); overflow:hidden; background:#fff}

.cp-demo .el-index .el-toolbar{display:flex; align-items:center; gap:10px; padding:10px 12px; border-bottom:1px solid var(--border-hairline-medium)}

.cp-demo .el-index table.data{border:0; border-radius:0}

.cp-demo .el-index .el-sources{display:flex; gap:4px; padding:8px 12px; border-bottom:1px solid var(--border-hairline); background:var(--gray-050); font-size:13px}

.cp-demo .el-index .el-sources .src{padding:4px 10px; border-radius:var(--radius-md); color:var(--gray-600); cursor:pointer}

.cp-demo .el-index .el-sources .src.sel{background:var(--gray-200); color:var(--gray-900); font-weight:600}



.cp-demo .address-card{border:1px solid var(--border-hairline-medium); border-radius:var(--radius-lg); padding:16px 18px; background:#fff; max-width:300px; font-size:13.5px; line-height:1.6}

.cp-demo .address-card .name{font-weight:600; color:var(--gray-900); margin-bottom:2px}

.cp-demo .address-card address{font-style:normal; color:var(--gray-700)}

.cp-demo .address-card .card-actions{margin-top:12px; display:flex; gap:8px}



.cp-demo .fld-workspace{background:var(--gray-100); border:1px solid var(--border-hairline-medium); border-radius:var(--radius-lg); padding:16px}

.cp-demo .fld-tab-head{font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--fg-subtle); font-weight:600; margin-bottom:10px}

.cp-demo .fld-palette{display:flex; flex-wrap:wrap; gap:10px}

.cp-demo .fld-element{position:relative; display:flex; align-items:center; gap:8px; padding:8px 12px 8px 8px;
  box-shadow:inset 0 0 0 1px var(--border-hairline); border-radius:var(--radius-md); background:#fff; cursor:grab; font-size:13px}

.cp-demo .fld-element .fld-element-icon{width:16px; height:16px; color:var(--fg-subtle); display:inline-flex; align-items:center; justify-content:center}

.cp-demo .fld-element .fld-element-icon svg{width:16px; height:16px; fill:none}

.cp-demo .fld-element h4{margin:0; font-size:13px; font-weight:500; color:var(--gray-800)}

.cp-demo .fld-element.fld-field{background:var(--gray-100); color:var(--fg-subtle); box-shadow:none}



.cp-demo .pane.tip, .cp-demo .pane.warning{position:relative; border:1px solid; border-radius:var(--radius-lg); padding:16px 18px 16px 44px; font-size:13.5px; line-height:1.5; margin:0}

.cp-demo .pane.tip{border-color:var(--sky-600); background:#f0f9ff; color:var(--fg-notice)}

.cp-demo .pane.warning{border-color:var(--amber-600); background:#fffbeb; color:var(--fg-warning)}

.cp-demo .pane.tip p, .cp-demo .pane.warning p{margin:0}

.cp-demo .pane.tip::before, .cp-demo .pane.warning::before{position:absolute; left:15px; top:15px; width:18px; height:18px; content:''; background:currentColor;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain}

.cp-demo .pane.tip::before{color:var(--sky-600); -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%23000' d='M272 384c9.6-31.9 29.5-59.1 49.2-86.2c5.2-7.1 10.4-14.2 15.4-21.4c19.8-28.5 31.4-63 31.4-100.3C368.4 75.8 288.9 0 192.4 0S16.4 75.8 16.4 176c0 37.3 11.6 71.9 31.4 100.3c5 7.2 10.2 14.3 15.4 21.4c19.8 27.1 39.7 54.4 49.2 86.2h159.6zM192.4 512c44.2 0 80-35.8 80-80v-16H112.4v16c0 44.2 35.8 80 80 80zM160.4 176c0-8.8-7.2-16-16-16s-16 7.2-16 16c0 35.3 28.7 64 64 64c8.8 0 16-7.2 16-16s-7.2-16-16-16c-17.7 0-32-14.3-32-32z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%23000' d='M272 384c9.6-31.9 29.5-59.1 49.2-86.2c5.2-7.1 10.4-14.2 15.4-21.4c19.8-28.5 31.4-63 31.4-100.3C368.4 75.8 288.9 0 192.4 0S16.4 75.8 16.4 176c0 37.3 11.6 71.9 31.4 100.3c5 7.2 10.2 14.3 15.4 21.4c19.8 27.1 39.7 54.4 49.2 86.2h159.6zM192.4 512c44.2 0 80-35.8 80-80v-16H112.4v16c0 44.2 35.8 80 80 80z'/%3E%3C/svg%3E")}

.cp-demo .pane.warning::before{color:var(--amber-600); -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23000' d='M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24V296c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0-64 0 32 32 0 1 0 64 0z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23000' d='M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24V296c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0-64 0 32 32 0 1 0 64 0z'/%3E%3C/svg%3E")}

.cp-demo .pane.dismissible{padding-right:44px}

.cp-demo .tip-dismiss-btn{position:absolute; top:14px; right:14px; width:20px; height:20px; border:0; border-radius:var(--radius-md); background:transparent; color:currentColor; cursor:pointer; opacity:.6; font-size:15px; line-height:1}

.cp-demo .tip-dismiss-btn:hover{opacity:1; background:rgb(from currentColor r g b / 12%)}



.cp-demo .fld-heading{font-size:18px; font-weight:700; color:var(--gray-900); margin:0; letter-spacing:-.01em}

.cp-demo hr.fld-rule{border:0; border-top:1px solid var(--border-hairline-medium); margin:4px 0}

.cp-demo .line-break-demo{display:flex; align-items:center; gap:10px; color:var(--fg-subtle); font-size:12px}

.cp-demo .line-break-demo::before, .cp-demo .line-break-demo::after{content:''; flex:1; height:4px; border-radius:2px;
  background-image:repeating-linear-gradient(to right,var(--gray-300) 0 8px,transparent 8px 16px)}



.cp-demo .fld-tab-wrap{background:var(--gray-100); border:1px solid var(--border-hairline-medium); border-radius:var(--radius-lg); padding:16px}

.cp-demo .fld-tab{display:inline-block; min-width:260px; vertical-align:top}

.cp-demo .fld-tab .fld-tabs{display:flex; gap:2px}

.cp-demo .fld-tab .tab{display:flex; align-items:center; gap:6px; padding:8px 14px; background:#fff; border:1px solid var(--border-hairline-medium); border-bottom:0;
  border-radius:var(--radius-md) var(--radius-md) 0 0; font-size:13.5px; cursor:grab; color:var(--gray-700)}

.cp-demo .fld-tab .tab.sel{color:var(--gray-900); font-weight:600}

.cp-demo .fld-tab .tab .fld-tab__name{margin:0}

.cp-demo .fld-tab .tab .gear{width:14px; height:14px; opacity:.45; color:var(--fg-subtle)}

.cp-demo .fld-tab .fld-tabcontent{background:#fff; border:1px solid var(--border-hairline-medium); border-radius:0 var(--radius-md) var(--radius-md) var(--radius-md); padding:12px}

.cp-demo .fld-tab .fld-tabcontent > .fld-element + .fld-element, .cp-demo .fld-tab .fld-tabcontent > .fld-element + .fld-add-btn{margin-top:8px}

.cp-demo .fld-add-btn{display:flex; align-items:center; justify-content:center; gap:6px; padding:9px; border:1px dashed var(--gray-400);
  border-radius:var(--radius-md); color:var(--gray-600); font-size:13px; cursor:pointer; background:transparent}

.cp-demo .fld-add-btn:hover{background:var(--gray-050)}

.cp-demo .fld-new-tab-btn{display:inline-flex; align-items:center; gap:6px; margin-left:8px; padding:8px 12px; border:1px dashed var(--gray-400);
  border-radius:var(--radius-md); color:var(--gray-600); font-size:13px; cursor:pointer; vertical-align:top}



.cp-demo .fld-element .cp-icon.medium{width:18px; height:18px; color:var(--fg-subtle); display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto}

.cp-demo .fld-element .field-name{display:flex; flex-direction:column; gap:2px; min-width:0}

.cp-demo .fld-element .fld-element-label{margin:0; font-size:13px; font-weight:600; color:var(--gray-800); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.cp-demo .fld-element .fld-attribute-label{font-family:var(--mono); font-size:11px; color:var(--fg-subtle)}

.cp-demo .fld-element .fld-field-indicators{display:flex; gap:4px; margin-top:2px}

.cp-demo .fld-ind{display:inline-flex; align-items:center; justify-content:center; font-size:13px}

.cp-demo .fld-ind .ic{width:13px; height:13px}

.cp-demo .fld-ind.rose{color:#e11d48}
 .cp-demo .fld-ind.sky{color:var(--sky-600)}
 .cp-demo .fld-ind.amber{color:#d97706}
 .cp-demo .fld-ind.orange{color:var(--orange-600)}

.cp-demo .fld-settings-gear{margin-left:auto; width:16px; height:16px; opacity:.4; flex:0 0 auto; color:var(--fg-subtle)}



.cp-demo .width-demo{display:flex; flex-wrap:wrap; gap:8px; background:var(--gray-100); padding:10px; border-radius:var(--radius-md)}

.cp-demo .width-demo .wf{background:#fff; box-shadow:inset 0 0 0 1px var(--border-hairline); border-radius:var(--radius-md); padding:10px 12px; font-size:12.5px; color:var(--gray-700); box-sizing:border-box}

.cp-demo .width-demo .w25{width:calc(25% - 6px)}
 .cp-demo .width-demo .w50{width:calc(50% - 4px)}
 .cp-demo .width-demo .w75{width:calc(75% - 2px)}
 .cp-demo .width-demo .w100{width:100%}



.cp-demo .cp-sidebar{width:230px; padding:0 8px; background:transparent}

.cp-demo .cp-sidebar nav ul{list-style:none; margin:0; padding:0}

.cp-demo .cp-sidebar nav li{position:relative}

.cp-demo .cp-sidebar nav li.heading > span{display:block; text-transform:uppercase; color:var(--fg-subtle); font-size:11px; font-weight:700; padding:14px 10px 5px}

.cp-demo .cp-sidebar nav a{display:flex; align-items:center; gap:8px; min-height:24px; padding:7px 14px 7px 16px; margin-bottom:1px;
  color:var(--text-color); border-radius:var(--radius-lg); font-size:13.5px; text-decoration:none; word-break:break-word}

.cp-demo .cp-sidebar nav a:hover{background:var(--gray-200); text-decoration:none}

.cp-demo .cp-sidebar nav a.sel{background:var(--gray-500); color:#fff; cursor:default}

.cp-demo .cp-sidebar nav a.sel:hover{background:var(--gray-500)}

.cp-demo .cp-sidebar nav a .badge{margin-left:auto}

.cp-demo .cp-sidebar-frame{display:grid; grid-template-columns:230px 1fr; gap:20px; background:var(--gray-100); border:1px solid var(--border-hairline-medium); border-radius:var(--radius-lg); padding:18px}

.cp-demo .cp-sidebar-frame .content-stub{background:#fff; border:1px solid var(--border-hairline-medium); border-radius:var(--radius-lg); padding:22px; color:var(--fg-subtle); font-size:13.5px}


@media (max-width:880px){
  .cp-demo .layout{grid-template-columns:1fr}

  .cp-demo .sidebar{position:static; height:auto}

  .cp-demo .content{padding:28px 20px 80px}

  .cp-demo .grid2{grid-template-columns:1fr}

}
@media (prefers-reduced-motion:reduce){.cp-demo *{animation:none!important; transition:none!important}
}


.cp-demo .modal-stage{position:relative; background:var(--gray-200); border-radius:var(--radius-lg); padding:26px; overflow:hidden; min-height:150px;
  background-image:linear-gradient(rgba(11,19,36,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(11,19,36,.04) 1px,transparent 1px); background-size:16px 16px}

.cp-demo .modal-stage.shaded::before{content:''; position:absolute; inset:0; background:rgba(11,19,36,.55); border-radius:var(--radius-lg)}

.cp-demo .modal{position:relative; background:#fff; border-radius:var(--radius-lg); box-shadow:0 6px 30px rgba(11,19,36,.28); max-width:440px; margin:0 auto; overflow:hidden}

.cp-demo .cpmodal-body{padding:20px; font-size:13.5px; color:var(--gray-700)}

.cp-demo .cpmodal-content h1{margin:0 0 10px; font-size:16px; font-weight:600; color:var(--gray-900)}

.cp-demo .modal .body{padding:20px; font-size:13.5px; color:var(--gray-700)}

.cp-demo .modal .body p, .cp-demo .cpmodal-content p{margin:0 0 8px}
 .cp-demo .modal .body p:last-child, .cp-demo .cpmodal-content p:last-child{margin:0}

.cp-demo .cpmodal-footer, .cp-demo .modal .buttons.right{background:var(--gray-100); padding:8px 14px; box-shadow:inset 0 1px 0 var(--border-hairline-medium); display:flex; justify-content:flex-end; gap:8px; align-items:center}

.cp-demo .modal.alert .body{padding-left:64px; position:relative}

.cp-demo .modal.alert .body .alert-ic{position:absolute; left:18px; top:18px; width:34px; height:34px; color:var(--amber-600)}

.cp-demo .modal.alert .body .alert-ic .ic{width:34px; height:34px}

.cp-demo .hud{position:relative; background:#fff; border-radius:var(--radius-md); box-shadow:0 4px 18px rgba(11,19,36,.24); max-width:230px; margin:0 auto}

.cp-demo .hud::after{content:''; position:absolute; left:-8px; top:22px; border:8px solid transparent; border-right-color:#fff; filter:drop-shadow(-2px 0 1px rgba(11,19,36,.06))}

.cp-demo .hud .hud-header{border-radius:var(--radius-md) var(--radius-md) 0 0; padding:9px 12px}

.cp-demo .hud .hud-header h1{margin:0; font-size:13px; font-weight:600}

.cp-demo .hud .main{padding:11px 12px; font-size:13px; color:var(--gray-700)}

.cp-demo .modal-label{font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--fg-subtle); font-weight:600; margin:0 0 6px}


.cp-demo .elementselect{display:flex; flex-direction:column; gap:7px; max-width:430px}

.cp-demo .elementselect .elements{display:flex; flex-direction:column; gap:6px}

.cp-demo .el-row{display:flex; align-items:center; gap:9px; padding:6px 9px; border:1px solid var(--border-hairline-medium); border-radius:var(--radius-md); background:#fff}

.cp-demo .el-row .thumb{width:30px; height:30px; border-radius:var(--radius-sm); background:var(--gray-200); flex:0 0 auto; display:flex; align-items:center; justify-content:center; color:var(--fg-subtle)}

.cp-demo .el-row .el-label{font-size:13px; color:var(--gray-800); font-weight:500; line-height:1.2}

.cp-demo .el-row .el-sub{font-size:12px; color:var(--fg-subtle)}

.cp-demo .el-row .move{margin-left:auto; color:var(--fg-subtle); opacity:.55; cursor:grab; width:14px; height:14px}

.cp-demo .rel-add{align-self:flex-start}

.cp-demo .el-thumbs{display:flex; gap:12px; flex-wrap:wrap}

.cp-demo .el-thumb{width:92px}

.cp-demo .el-thumb .pic{width:92px; height:92px; border-radius:var(--radius-md); background:var(--gray-150); border:1px solid var(--border-hairline-medium); display:flex; align-items:center; justify-content:center; color:var(--fg-subtle)}

.cp-demo .el-thumb .pic .ic{width:26px; height:26px}

.cp-demo .el-thumb .cap{font-size:11.5px; color:var(--gray-700); margin-top:5px; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.cp-demo .el-card{display:flex; gap:10px; padding:10px; border:1px solid var(--border-hairline-medium); border-radius:var(--radius-md); background:#fff; max-width:300px}

.cp-demo .el-card .pic{width:44px; height:44px; border-radius:var(--radius-sm); background:var(--gray-150); flex:0 0 auto; display:flex; align-items:center; justify-content:center; color:var(--fg-subtle)}

.cp-demo .el-card .cbody{display:flex; flex-direction:column; gap:3px; min-width:0}

.cp-demo .el-card .cbody .t{font-size:13px; font-weight:600; color:var(--gray-800)}

.cp-demo .el-card .cbody .d{font-size:12px; color:var(--fg-subtle)}



.cp-demo .elementselect{max-width:420px}

.cp-demo .elements{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}

.cp-demo .elements.inline{flex-direction:row; flex-wrap:wrap}

.cp-demo .el-chip{display:flex; align-items:center; gap:9px; padding:6px 9px; background:#fff; border:1px solid var(--border-hairline-medium); border-radius:var(--radius-md); box-shadow:0 1px 0 rgba(11,19,36,.03)}

.cp-demo .elements.inline .el-chip{padding:5px 9px}

.cp-demo .el-chip .el-thumb{width:30px; height:30px; border-radius:var(--radius-sm); background:var(--gray-200); flex:0 0 auto; display:flex; align-items:center; justify-content:center; color:var(--fg-subtle); overflow:hidden}

.cp-demo .el-chip .el-thumb.img{background:linear-gradient(135deg,#c7d2e0,#9fb2c8)}

.cp-demo .el-chip .el-body{display:flex; flex-direction:column; min-width:0; flex:1}

.cp-demo .el-chip .el-title{font-size:13.5px; color:var(--gray-800); font-weight:500; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.cp-demo .el-chip .el-sub{font-size:11.5px; color:var(--fg-subtle)}

.cp-demo .el-chip .el-status{margin-left:auto; flex:0 0 auto}

.cp-demo .el-chip .el-remove{margin-left:6px; width:16px; height:16px; color:var(--fg-subtle); opacity:.5; flex:0 0 auto; cursor:pointer; display:inline-flex}

.cp-demo .el-chip .el-move{width:12px; height:16px; color:var(--fg-subtle); opacity:.35; cursor:grab; flex:0 0 auto; background:radial-gradient(currentColor 1px,transparent 1.4px); background-size:4px 4px; background-position:center}


.cp-demo .elements.thumbs{flex-direction:row; flex-wrap:wrap; gap:10px}

.cp-demo .elements.thumbs .el-chip{flex-direction:column; width:96px; padding:8px; text-align:center; gap:6px; position:relative}

.cp-demo .elements.thumbs .el-chip .el-thumb{width:100%; height:70px}

.cp-demo .elements.thumbs .el-chip .el-body{align-items:center; width:100%}

.cp-demo .elements.thumbs .el-chip .el-remove{position:absolute; top:4px; right:4px; margin:0}

.cp-demo .elements.thumbs .el-chip .el-status{position:absolute; top:6px; left:6px; margin:0}


.cp-demo .elements.cards{gap:8px}

.cp-demo .elements.cards .el-card{background:#fff; border:1px solid var(--border-hairline-medium); border-radius:var(--radius-md); padding:12px; box-shadow:0 1px 0 rgba(11,19,36,.03)}

.cp-demo .elements.cards.grid{display:grid; grid-template-columns:1fr 1fr; gap:8px}

.cp-demo .el-card .el-card-head{display:flex; align-items:center; gap:8px; margin-bottom:6px}

.cp-demo .el-card .el-card-head .el-title{font-size:14px; font-weight:600; color:var(--gray-800)}

.cp-demo .el-card .el-card-meta{font-size:12px; color:var(--fg-subtle)}

.cp-demo .el-add{margin-top:8px; display:inline-flex; align-items:center; gap:6px; padding:0 12px; height:30px; border:1px dashed var(--border-hairline-medium); border-radius:var(--radius-md); background:var(--gray-050); color:var(--gray-700); font-size:13px; cursor:pointer}

.cp-demo .el-add .ic{width:13px; height:13px; color:var(--fg-subtle)}

.cp-demo .opt-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:4px}

@media (max-width:880px){.cp-demo .opt-grid{grid-template-columns:1fr}
 .cp-demo .elements.cards.grid{grid-template-columns:1fr}
}
.cp-demo .opt-cap{font-size:12px; color:var(--fg-subtle); margin:0 0 8px}
 .cp-demo .opt-cap code{font-size:11.5px}