/* Creative suite: elements library, text effects and combos, themes, command palette, preview tools. */

/* Elements */
.el-search { height: 36px; }
.el-sec { display: flex; flex-direction: column; gap: 12px; }
.el-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.el-btn { aspect-ratio: 1; border-radius: 6px; border: 1px solid var(--border); background: var(--panel); color: var(--text); display: grid; place-items: center; padding: 9px; cursor: pointer; transition: border-color .12s, color .12s, transform .12s; }
.el-btn:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.el-btn svg { display: block; overflow: visible; }

/* Text effects and combos */
.tstyle-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tstyle { position: relative; height: 78px; border-radius: 6px; border: 1px solid var(--border); background: var(--panel); display: grid; place-items: center; padding: 0 6px 12px; overflow: hidden; cursor: pointer; line-height: 1.1; white-space: nowrap; transition: border-color .12s, transform .12s; }
.tstyle:hover { border-color: var(--accent); transform: translateY(-1px); }
.tstyle em { position: absolute; left: 7px; bottom: 4px; font: 600 9px var(--mono); font-style: normal; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.tstyle.combo { height: 96px; }
.tstyle.combo svg { display: block; }
.tstyle.combo > :first-child { transform: scale(.8); }

/* Themes */
.theme-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.theme { position: relative; aspect-ratio: 1; border-radius: 6px; border: 1px solid var(--border-2); display: grid; place-items: center; cursor: pointer; overflow: hidden; padding: 0 0 12px; transition: transform .12s, border-color .12s; }
.theme:hover { transform: scale(1.04); border-color: #fff; }
.theme b { font-size: 24px; font-weight: 800; line-height: 1; }
.theme i { position: absolute; right: 6px; top: 6px; width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.theme em { position: absolute; left: 0; right: 0; bottom: 5px; text-align: center; font: 600 9px var(--mono); font-style: normal; text-transform: uppercase; letter-spacing: .05em; opacity: .85; }

/* Preview: grid, safe zones, floating toolbar */
.ov-grid, .ov-safe { position: absolute; inset: 0; pointer-events: none; }
.ov-grid i { position: absolute; background: rgba(255,255,255,.38); box-shadow: 0 0 0 .5px rgba(0,0,0,.35); }
.ov-grid i:nth-child(1), .ov-grid i:nth-child(2) { top: 0; bottom: 0; width: 1px; }
.ov-grid i:nth-child(1) { left: 33.333%; } .ov-grid i:nth-child(2) { left: 66.666%; }
.ov-grid i:nth-child(3), .ov-grid i:nth-child(4) { left: 0; right: 0; height: 1px; }
.ov-grid i:nth-child(3) { top: 33.333%; } .ov-grid i:nth-child(4) { top: 66.666%; }
.ov-safe i { position: absolute; background: repeating-linear-gradient(135deg, rgba(255,60,60,.26) 0 6px, rgba(255,60,60,.1) 6px 12px); outline: 1px dashed rgba(255,110,110,.9); outline-offset: -1px; display: grid; place-items: center; }
.ov-safe b { position: absolute; border: 1px dashed rgba(255,255,255,.75); box-shadow: 0 0 0 1px rgba(0,0,0,.3); }
.ov-safe em { font: 600 10px/1.3 var(--mono); font-style: normal; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.8); text-align: center; padding: 4px 8px; }
.ov-safe b em { position: absolute; left: 0; top: 0; }
.floatbar { position: absolute; left: 0; top: 0; z-index: 8; display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--border-2); box-shadow: 0 10px 30px rgba(0,0,0,.5); white-space: nowrap; }
.floatbar button { display: inline-flex; align-items: center; gap: 5px; height: 30px; min-width: 30px; padding: 0 7px; justify-content: center; border: 0; border-radius: 5px; background: none; color: var(--text); font: 700 12px var(--font); cursor: pointer; }
.floatbar button:hover { background: var(--panel-3); }
.floatbar button.danger:hover { color: var(--red); }
.floatbar button svg { width: 16px; height: 16px; }
.floatbar > i { width: 1px; height: 18px; background: var(--border-2); margin: 0 3px; }
.fb-color { position: relative; width: 30px; height: 30px; display: grid; place-items: center; cursor: pointer; border-radius: 5px; }
.fb-color:hover { background: var(--panel-3); }
.fb-color input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.fb-color span { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.4); }

/* Command palette */
.cmdk-btn { color: var(--muted); border-color: var(--border) !important; gap: 8px; padding: 0 8px 0 10px; }
.cmdk-btn svg { width: 14px; height: 14px; }
.cmdk-back { position: fixed; inset: 0; z-index: 5000; background: var(--backdrop); backdrop-filter: blur(3px); display: grid; justify-items: center; align-content: start; padding: 12vh 16px 16px; animation: fade .12s ease; }
.cmdk { width: min(620px, 100%); max-height: min(560px, 72vh); display: grid; grid-template-rows: auto minmax(0, 1fr); background: var(--panel); border: 1px solid var(--border-2); border-radius: 10px; box-shadow: 0 30px 80px rgba(0,0,0,.6); overflow: hidden; animation: pop .14s ease; }
.cmdk-in { display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid var(--border); }
.cmdk-in svg { width: 18px; height: 18px; color: var(--muted); flex: none; }
.cmdk-in input { flex: 1; min-width: 0; height: 52px; border: 0; outline: 0; background: none; color: var(--text); font: 500 16px var(--font); }
.cmdk-list { overflow-y: auto; padding: 6px; }
.cmdk-group { padding: 10px 10px 4px; font: 600 10px var(--mono); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.cmdk-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border: 0; border-radius: 6px; background: none; color: var(--text); font: 500 14px var(--font); text-align: left; cursor: pointer; }
.cmdk-item.on { background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent); }
.cmdk-ic { width: 22px; height: 22px; display: grid; place-items: center; color: var(--text-2); flex: none; }
.cmdk-ic svg { width: 17px; height: 17px; }
.cmdk-el { width: 20px; height: 20px; display: grid; place-items: center; }
.cmdk-emoji { font-style: normal; font-size: 17px; line-height: 1; }
.cmdk-dot { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--border-2); }
.cmdk-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk-empty { padding: 28px 12px; text-align: center; color: var(--muted); }

@media (max-width: 900px) {
  .cmdk-btn span, .cmdk-btn kbd { display: none; }
  .cmdk-btn { border-color: transparent !important; padding: 0; width: 30px; }
  .cmdk-back { padding-top: 8vh; }
  /* The phone transport has no room for the guide toggles; they stay in the search palette. */
  .tr-right .tl-toggle { display: none; }
}