/* Web Template Creator v2 - app shell (icon rail + settings panel + workspace), PageKiln-style. Uses app.css tokens. */
.ap { min-height: 100vh; background: var(--wt-bg); }
.ap-rail { position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 1040; width: 4.25rem; display: flex; flex-direction: column; align-items: center;
  gap: .35rem; padding: .85rem 0; background: #141330; border-inline-end: 1px solid rgba(255,255,255,.06); }
.ap-rail .ap-logo { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; margin-bottom: .9rem; border-radius: .8rem; color: #fff; background: var(--wt-gradient);
  font-size: 1.2rem; box-shadow: 0 8px 20px rgba(91, 76, 240, .45); text-decoration: none; }
.ap-rail a, .ap-rail button { position: relative; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; color: #a9a8c8; background: none; border: 0;
  border-radius: .75rem; font-size: 1.2rem; text-decoration: none; transition: background .15s, color .15s; cursor: pointer; }
.ap-rail a:hover, .ap-rail button:hover { color: #fff; background: rgba(255,255,255,.08); }
.ap-rail a.active { color: #fff; background: rgba(124, 108, 255, .9); }
.ap-rail .ap-tip { position: absolute; inset-inline-start: calc(100% + .6rem); top: 50%; transform: translateY(-50%); padding: .3rem .6rem; font-size: .78rem; font-weight: 600;
  white-space: nowrap; color: #fff; background: #1e1d3a; border-radius: .4rem; opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 5; }
.ap-rail a:hover .ap-tip, .ap-rail a:focus-visible .ap-tip, .ap-rail button:hover .ap-tip { opacity: 1; }
.ap-rail .ap-spacer { flex: 1; }
.ap-main { margin-inline-start: 4.25rem; min-width: 0; }
@media (max-width: 767.98px) {
  .ap-rail { inset-block: auto 0; inset-inline: 0; width: 100%; height: 3.6rem; flex-direction: row; justify-content: space-around; padding: 0 .4rem; }
  .ap-rail .ap-logo, .ap-rail .ap-spacer, .ap-rail .ap-tip { display: none; }
  .ap-main { margin-inline-start: 0; padding-bottom: 3.8rem; }
}

/* page with panel + workspace */
.ap-split { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100vh; }
@media (min-width: 992px) { .ap-split { grid-template-columns: 24rem minmax(0, 1fr); height: 100vh; } .ap-split > * { overflow-y: auto; } }
@media (min-width: 1400px) { .ap-split { grid-template-columns: 26rem minmax(0, 1fr); } }
.ap-panel { background: var(--wt-surface); border-inline-end: 1px solid var(--wt-border); }
.ap-panel-head { padding: 1.15rem 1.25rem 1rem; border-bottom: 1px solid var(--wt-border); }
.ap-panel-head h1 { font-size: 1.25rem; margin: 0 0 .25rem; display: flex; align-items: center; gap: .55rem; }
.ap-panel-head p { margin: 0; font-size: .85rem; color: var(--wt-muted); }
.ap-sec { border-bottom: 1px solid var(--wt-border); }
.ap-sec > summary { list-style: none; display: flex; align-items: center; gap: .6rem; padding: .95rem 1.25rem; font-weight: 700; font-size: .93rem; cursor: pointer; user-select: none; }
.ap-sec > summary::-webkit-details-marker { display: none; }
.ap-sec > summary::after { content: "\F282"; font-family: bootstrap-icons; margin-inline-start: auto; font-size: .8rem; color: var(--wt-muted); transition: transform .2s; }
.ap-sec[open] > summary::after { transform: rotate(180deg); }
.ap-sec > summary .bi { color: var(--wt-primary); }
.ap-sec > summary small { font-weight: 500; color: var(--wt-muted); font-size: .75rem; }
.ap-sec-body { padding: 0 1.25rem 1.15rem; display: grid; gap: .9rem; }
.ap-label { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .45rem; font-size: .82rem; font-weight: 600; }
.ap-lock { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; padding: 0; color: var(--wt-muted); background: none; border: 1px solid transparent; border-radius: .4rem; cursor: pointer; font-size: .8rem; }
.ap-lock:hover { border-color: var(--wt-border); }
.ap-lock[aria-pressed="true"] { color: var(--wt-primary); background: rgba(var(--wt-primary-rgb), .1); }

/* tiles and chips */
.ap-tiles { display: grid; gap: .45rem; grid-template-columns: repeat(auto-fill, minmax(6.4rem, 1fr)); }
.ap-tiles.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ap-tiles.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ap-tiles.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ap-tile { position: relative; }
.ap-tile input { position: absolute; opacity: 0; pointer-events: none; }
.ap-tile label { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: .3rem; height: 100%; padding: .5rem .45rem; text-align: center; cursor: pointer;
  font-size: .74rem; font-weight: 600; line-height: 1.2; color: var(--wt-text); background: var(--wt-surface); border: 1.5px solid var(--wt-border); border-radius: .65rem; transition: border-color .12s, box-shadow .12s, background .12s; }
.ap-tile label:hover { border-color: rgba(var(--wt-primary-rgb), .55); }
.ap-tile input:checked + label { border-color: var(--wt-primary); background: rgba(var(--wt-primary-rgb), .07); box-shadow: 0 0 0 3px rgba(var(--wt-primary-rgb), .14); }
.ap-tile input:focus-visible + label { outline: 2px solid var(--wt-primary); outline-offset: 2px; }
.ap-tile label .bi { font-size: 1.2rem; color: var(--wt-primary); }
.ap-tile label small { font-weight: 500; color: var(--wt-muted); font-size: .68rem; }
.ap-tile.is-random label { border-style: dashed; }
.ap-tile .sw { display: flex; width: 100%; height: 1.4rem; border-radius: .4rem; overflow: hidden; }
.ap-tile .sw i { flex: 1; }
.ap-tile .sk { width: 100%; height: 3rem; border-radius: .4rem; background: var(--wt-surface-2); display: grid; gap: 3px; padding: 4px; }
.ap-tile .sk b { display: block; border-radius: 2px; background: rgba(var(--wt-primary-rgb), .35); }
.ap-tile .fontdemo { font-size: 1.3rem; line-height: 1; }
.ap-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.ap-chip { position: relative; }
.ap-chip input { position: absolute; opacity: 0; pointer-events: none; }
.ap-chip label, button.ap-chip-btn { display: inline-flex; align-items: center; gap: .3rem; padding: .32rem .75rem; font-size: .78rem; font-weight: 600; color: var(--wt-text);
  background: var(--wt-surface); border: 1px solid var(--wt-border); border-radius: 50rem; cursor: pointer; }
.ap-chip input:checked + label, button.ap-chip-btn.active { color: #fff; background: var(--wt-primary); border-color: var(--wt-primary); }
.ap-chip input:focus-visible + label { outline: 2px solid var(--wt-primary); outline-offset: 2px; }
.ap-chip input:disabled + label { opacity: .45; cursor: not-allowed; }

/* workspace */
.ap-work { background: color-mix(in srgb, var(--wt-bg) 70%, #e9e9f3); display: flex; flex-direction: column; min-width: 0; }
[data-ui-theme="dark"] .ap-work { background: #0b0a14; }
.ap-toolbar { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .7rem 1rem; background: color-mix(in srgb, var(--wt-surface) 92%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--wt-border); }
.ap-toolbar .sep { width: 1px; height: 1.6rem; background: var(--wt-border); margin-inline: .2rem; }
.ap-toolbar .btn { white-space: nowrap; }
.ap-seg { display: inline-flex; padding: .18rem; background: var(--wt-surface-2); border: 1px solid var(--wt-border); border-radius: .65rem; }
.ap-seg button { display: inline-grid; place-items: center; min-width: 2.1rem; height: 1.95rem; padding: 0 .5rem; color: var(--wt-muted); background: none; border: 0; border-radius: .5rem; cursor: pointer; font-size: .9rem; }
.ap-seg button.active { color: var(--wt-text); background: var(--wt-surface); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.ap-stage { flex: 1; padding: 1rem; display: flex; flex-direction: column; min-height: 0; }
.ap-frame-wrap { position: relative; flex: 1; display: flex; justify-content: center; min-height: 34rem; }
.ap-frame { width: 100%; height: 100%; min-height: 34rem; border: 1px solid var(--wt-border); border-radius: 1rem; background: #fff; box-shadow: var(--wt-shadow); transition: width .25s ease; }
.ap-frame-wrap[data-device="tablet"] .ap-frame { width: 820px; max-width: 100%; }
.ap-frame-wrap[data-device="phone"] .ap-frame { width: 400px; max-width: 100%; border-radius: 1.6rem; border-width: 8px; border-color: #1e1d2e; }
.ap-busy { position: absolute; inset: 0; display: none; place-items: center; background: rgba(255,255,255,.55); border-radius: 1rem; z-index: 2; font-weight: 600; }
[data-ui-theme="dark"] .ap-busy { background: rgba(0,0,0,.4); }
.ap-frame-wrap.is-busy .ap-busy { display: grid; }
.ap-status { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; padding: .55rem 1rem; font-size: .8rem; color: var(--wt-muted); border-top: 1px solid var(--wt-border); background: var(--wt-surface); }
.ap-status strong { color: var(--wt-text); }
.ap-results { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr)); }
.ap-card { display: flex; flex-direction: column; overflow: hidden; background: var(--wt-surface); border: 1px solid var(--wt-border); border-radius: 1rem; transition: transform .18s, box-shadow .18s; }
.ap-card:hover { transform: translateY(-2px); box-shadow: var(--wt-shadow); }
.ap-card .thumb { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--wt-surface-2); }
.ap-card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ap-card .thumb iframe { position: absolute; top: 0; left: 0; width: 400%; height: 400%; transform: scale(.25); transform-origin: 0 0; border: 0; pointer-events: none; }
.ap-card .num { position: absolute; top: .55rem; inset-inline-start: .55rem; padding: .1rem .5rem; font-size: .72rem; font-weight: 700; color: #fff; background: rgba(10,10,25,.7); border-radius: 50rem; z-index: 2; }
.ap-card .tag { position: absolute; top: .55rem; inset-inline-end: .55rem; padding: .1rem .55rem; font-size: .72rem; font-weight: 700; background: #fff; color: #1d1d2c; border-radius: 50rem; z-index: 2; }
.ap-card .body { padding: .85rem 1rem 1rem; display: grid; gap: .45rem; }
.ap-card h3 { font-size: 1.02rem; margin: 0; }
.ap-card .meta { font-size: .78rem; color: var(--wt-muted); }
.ap-card .acts { display: flex; gap: .4rem; }
.ap-empty { display: grid; place-items: center; text-align: center; gap: .75rem; padding: 3rem 1rem; color: var(--wt-muted); }
.ap-empty .bi { font-size: 2.5rem; color: var(--wt-primary); }
.ap-progress { padding: 1rem 1.25rem; border-radius: 1rem; background: var(--wt-surface); border: 1px solid var(--wt-border); }

/* composer */
.ap-list { display: grid; gap: .4rem; }
.ap-item { display: flex; align-items: center; gap: .5rem; padding: .45rem .55rem; background: var(--wt-surface-2); border: 1px solid var(--wt-border); border-radius: .6rem; font-size: .82rem; font-weight: 600; }
.ap-item .grip { color: var(--wt-muted); }
.ap-item .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-item button { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; padding: 0; color: var(--wt-muted); background: var(--wt-surface); border: 1px solid var(--wt-border); border-radius: .4rem; cursor: pointer; }
.ap-item button:hover { color: var(--wt-primary); border-color: var(--wt-primary); }

/* home dashboard */
.ap-page { padding: clamp(1rem, 3vw, 2rem); max-width: 1320px; margin-inline: auto; }
.ap-hero { position: relative; overflow: hidden; padding: clamp(1.5rem, 4vw, 2.75rem); border-radius: 1.4rem; background: var(--wt-surface); border: 1px solid var(--wt-border);
  background-image: radial-gradient(38rem 18rem at 100% 100%, rgba(var(--wt-secondary-rgb), .12), transparent 70%), radial-gradient(30rem 16rem at 0 0, rgba(var(--wt-primary-rgb), .12), transparent 70%); }
.ap-hero h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); letter-spacing: -.02em; margin: .75rem 0 .6rem; }
.ap-hero p { color: var(--wt-muted); max-width: 44rem; }
.ap-tool { display: flex; flex-direction: column; gap: .6rem; height: 100%; padding: 1.4rem; color: var(--wt-text); text-decoration: none; background: var(--wt-surface); border: 1px solid var(--wt-border);
  border-radius: 1.1rem; transition: transform .18s, box-shadow .18s, border-color .18s; }
.ap-tool:hover { transform: translateY(-3px); box-shadow: var(--wt-shadow); border-color: rgba(var(--wt-primary-rgb), .45); color: var(--wt-text); }
.ap-tool .ic { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: .9rem; font-size: 1.35rem; }
.ap-tool h2 { font-size: 1.1rem; margin: .3rem 0 0; }
.ap-tool p { margin: 0; font-size: .875rem; color: var(--wt-muted); }
.ap-tool .go { margin-top: auto; font-size: .85rem; font-weight: 600; color: var(--wt-primary); }
.ap-kpis { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.ap-kpi { padding: 1rem 1.15rem; background: var(--wt-surface); border: 1px solid var(--wt-border); border-radius: 1rem; }
.ap-kpi b { display: block; font-size: 1.6rem; letter-spacing: -.02em; }
.ap-kpi span { font-size: .8rem; color: var(--wt-muted); }
.ap-h2 { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 2rem 0 1rem; }
.ap-h2 h2 { font-size: 1.15rem; margin: 0; }
.kbd { display: inline-block; padding: .05rem .4rem; font-size: .72rem; font-family: var(--ui-font-monospace); border: 1px solid var(--wt-border); border-bottom-width: 2px; border-radius: .3rem; background: var(--wt-surface-2); }