domma-cms 0.76.0 → 0.77.1

package/admin/js/templates/project-detail.html

@@ -1,152 +1,90 @@
-<style>
-    .pd-wrap { display: flex; flex-direction: column; gap: 1.5rem; }
-
-    /* ── Hero ─────────────────────────────────────────────────────────── */
-    .pd-hero {
-        display: flex;
-        gap: 1.25rem;
-        align-items: flex-start;
-        padding: 1.5rem;
-        border: 1px solid var(--dm-border, rgba(255,255,255,.08));
-        border-radius: 14px;
-        background:
-            radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--dm-primary) 12%, transparent), transparent 55%),
-            var(--dm-card-bg, rgba(255,255,255,.04));
-        position: relative;
-        overflow: hidden;
-    }
-    .pd-hero::before {
-        content: '';
-        position: absolute;
-        top: 0; bottom: 0; left: 0;
-        width: 4px;
-        background: linear-gradient(180deg, var(--dm-primary), var(--dm-primary-dark));
-    }
-    .pd-hero-icon {
-        width: 64px; height: 64px;
-        flex-shrink: 0;
-        border-radius: 16px;
-        display: flex; align-items: center; justify-content: center;
-        background: linear-gradient(135deg, color-mix(in srgb, var(--dm-primary) 28%, transparent), color-mix(in srgb, var(--dm-primary-dark) 28%, transparent));
-        color: var(--dm-primary);
-        box-shadow: 0 6px 18px color-mix(in srgb, var(--dm-primary) 18%, transparent);
-    }
-    .pd-hero-icon svg, .pd-hero-icon span[data-icon] { width: 32px; height: 32px; }
-    .pd-hero-main { flex: 1; min-width: 0; }
-    .pd-hero-top {
-        display: flex; align-items: flex-start; justify-content: space-between;
-        gap: 1rem; flex-wrap: wrap;
-    }
-    .pd-title { font-size: 1.6rem; font-weight: 700; margin: 0; line-height: 1.15; }
-    .pd-actions { display: flex; gap: .5rem; flex-shrink: 0; }
-    .pd-desc { color: var(--dm-text-muted, #888); margin: .5rem 0 0; max-width: 64ch; }
-    .pd-desc:empty { display: none; }
-
-    /* ── Meta badges ──────────────────────────────────────────────────── */
-    .pd-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; }
-    .pd-meta-badge {
-        display: inline-flex; align-items: center; gap: .45rem;
-        padding: .4rem .7rem;
-        border-radius: 999px;
-        font-size: .8rem; line-height: 1;
-        border: 1px solid transparent;
-    }
-    .pd-meta-badge svg, .pd-meta-badge span[data-icon] { width: 14px; height: 14px; }
-    .pd-meta-k { color: var(--dm-text-muted, #999); font-weight: 500; }
-    .pd-meta-v { font-weight: 600; }
-
-    /* ── Section header ───────────────────────────────────────────────── */
-    .pd-section-head {
-        display: flex; align-items: baseline; gap: .6rem;
-        margin: 0 0 .35rem;
-    }
-    .pd-section-title {
-        font-size: 1rem; font-weight: 600; margin: 0;
-        display: flex; align-items: center; gap: .5rem;
-    }
-    .pd-section-title svg, .pd-section-title span[data-icon] {
-        width: 17px; height: 17px; color: var(--dm-text-muted, #888);
-    }
-    .pd-total { font-size: .8rem; color: var(--dm-text-muted, #888); }
-    .pd-hint { color: var(--dm-text-muted, #888); margin: 0 0 .9rem; font-size: .82rem; }
-
-    /* ── Artefact stat tiles (each with a + to create one) ────────────── */
-    .pd-tiles {
-        display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
-        gap: .85rem;
-    }
-    .pd-tile {
-        position: relative;
-        border: 1px solid var(--dm-border, rgba(255,255,255,.08));
-        border-left: 3px solid var(--c, #5b8cff);
-        border-radius: 11px;
-        background: var(--dm-card-bg, rgba(255,255,255,.04));
-        transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
-    }
-    .pd-tile--link:hover {
-        transform: translateY(-2px);
-        box-shadow: var(--dm-shadow-lg);
-        border-color: var(--c, #5b8cff);
-    }
-    .pd-tile-link {
-        display: flex; align-items: center; gap: .85rem;
-        padding: .9rem 1rem; padding-right: 2.6rem;   /* room for the + */
-        text-decoration: none; color: inherit;
-    }
-    .pd-tile-link--empty { opacity: .55; }
-    .pd-tile-chip {
-        width: 40px; height: 40px; flex-shrink: 0;
-        border-radius: 10px;
-        display: flex; align-items: center; justify-content: center;
-    }
-    .pd-tile-chip svg, .pd-tile-chip span[data-icon] { width: 20px; height: 20px; }
-    .pd-tile-body { display: flex; flex-direction: column; min-width: 0; }
-    .pd-tile-count { font-size: 1.5rem; font-weight: 700; line-height: 1; }
-    .pd-tile-label {
-        font-size: .78rem; color: var(--dm-text-muted, #888);
-        margin-top: .2rem; text-transform: uppercase; letter-spacing: .03em;
-    }
-    .pd-tile-add {
-        position: absolute; top: 8px; right: 8px;
-        width: 26px; height: 26px; border-radius: 7px;
-        display: flex; align-items: center; justify-content: center;
-        border: 1px solid var(--dm-border, rgba(255,255,255,.12));
-        background: var(--dm-card-bg, rgba(255,255,255,.05));
-        color: var(--c, #5b8cff);
-        cursor: pointer; opacity: .7;
-        transition: opacity .14s ease, background .14s ease, border-color .14s ease, transform .14s ease;
-    }
-    .pd-tile-add:hover {
-        opacity: 1; transform: scale(1.08);
-        border-color: var(--c, #5b8cff);
-        background: var(--dm-hover-bg);
-    }
-    .pd-tile-add svg, .pd-tile-add span[data-icon] { width: 15px; height: 15px; }
-</style>
+<!-- A project's overview. Bound with M.applyBindings - see admin/js/views/project-detail.js, which also
+     inserts the tile template (the router renders a templateUrl through _.render, eating any {{…}}).
+     No page heading: the Tool banner is the heading ("Projects › <name>"), with Settings in it. -->
+<div class="pdx">
+    <p class="pdx-alert" data-bind-hidden="!off.value">
+        <span data-icon="alert-triangle" data-icon-size="16"></span>
+        <span>This project is <strong>disabled</strong>: its public pages 404 and its external API does not answer. Editing it here carries on.</span>
+        <button type="button" class="btn btn-sm btn-primary" data-on-click="enable" data-bind-disabled="busy.value">Enable</button>
+    </p>
+    <p class="pdx-alert is-bad" data-bind-hidden="!loadError.value">
+        <span data-bind-text="loadError.value"></span>
+        <button type="button" class="btn btn-sm btn-ghost" data-on-click="retry">Try again</button>
+    </p>
 
-<div class="pd-wrap">
-    <div class="pd-hero">
-        <div class="pd-hero-icon"><span id="pd-icon" data-icon="folder"></span></div>
-        <div class="pd-hero-main">
-            <div class="pd-hero-top">
-                <h2 class="pd-title"><span id="pd-name">Project</span></h2>
-                <div class="pd-actions">
-                    <a class="btn btn-secondary btn-sm" href="#/projects"><span data-icon="arrow-left"></span> Projects</a>
-                    <a class="btn btn-secondary btn-sm" id="pd-settings"><span data-icon="settings"></span> Settings</a>
-                </div>
+    <div class="pdx-hero">
+        <div class="pdx-hero-icon" aria-hidden="true"><span data-icon="folder" data-icon-size="32"></span></div>
+        <div class="pdx-hero-main">
+            <strong class="pdx-name" data-bind-text="name.value"></strong>
+            <p class="pdx-desc" data-bind-hidden="!description.value" data-bind-text="description.value"></p>
+            <div class="pdx-chips">
+                <span class="pdx-chip is-warn" data-bind-hidden="!off.value">Disabled</span>
+                <span class="pdx-chip is-ok" data-bind-hidden="off.value || loading.value">Enabled</span>
+                <span class="pdx-chip" data-bind-hidden="!builtIn.value" title="Built in - cannot be deleted">Built in</span>
+                <span class="pdx-chip" data-bind-text="rootText.value"></span>
+                <span data-help-title="Root URL" data-help="Pages whose address starts with the project's root URL are filed under it without being tagged one by one. Change it, or the name, icon and order, on the project's Settings (banner)."></span>
+            </div>
+            <div class="pdx-meta">
+                <span data-bind-hidden="!created.value"><span data-icon="calendar" data-icon-size="13"></span> Created <b data-bind-text="created.value"></b></span>
+                <span data-bind-hidden="!creator.value"><span data-icon="user" data-icon-size="13"></span> by <b data-bind-text="creator.value"></b></span>
+                <span data-bind-hidden="!updated.value" data-bind-title="updatedTitle.value"><span data-icon="clock" data-icon-size="13"></span> Changed <b data-bind-text="updated.value"></b></span>
             </div>
-            <p id="pd-desc" class="pd-desc"></p>
-            <div id="pd-meta" class="pd-meta"></div>
         </div>
     </div>
 
-    <section>
-        <div class="pd-section-head">
-            <h3 class="pd-section-title"><span data-icon="layers"></span> Artefacts in this project</h3>
-            <span id="pd-total" class="pd-total"></span>
+    <div class="pdx-card">
+        <div class="pdx-card-title">
+            <span data-icon="layers" data-icon-size="16"></span> Artefacts in this project
+            <small class="pdx-muted" data-bind-text="totalText.value"></small>
+            <span data-help-title="Artefacts" data-help="Everything filed under this project, by type. Click a type to open its list (or, when there are none, to make the first). The + makes a new one filed under this project - pages, collections, menus and blocks in a quick panel here, the rest in their own editor. Right-click a type (or ⋮, or Shift+F10) for both."></span>
         </div>
-        <p class="pd-hint">Click the <strong>+</strong> on any card to create one, filed under this project automatically.</p>
-        <div id="pd-counts"></div>
-    </section>
+        <p class="pdx-note" data-bind-hidden="!loading.value">Loading…</p>
+        <div class="pdx-tiles" data-each="tiles.value key=key"></div>
+    </div>
 </div>
+
+<style>
+.pdx { display: flex; flex-direction: column; gap: .9rem; }
+.pdx [hidden] { display: none !important; }
+.pdx-alert { margin: 0; display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; padding: .6rem .8rem; border-radius: var(--dm-radius-md);
+    background: color-mix(in srgb, var(--dm-warning, var(--dm-primary)) 16%, transparent); color: var(--dm-text); }
+.pdx-alert.is-bad { background: color-mix(in srgb, var(--dm-danger) 14%, transparent); }
+.pdx-alert > span:not([data-icon]) { flex: 1; min-width: 12rem; }
+.pdx-hero { display: flex; gap: 1.1rem; align-items: flex-start; padding: 1.1rem 1.25rem; border: 1px solid var(--dm-border);
+    border-left: 4px solid var(--dm-primary); border-radius: var(--dm-radius-md);
+    background: radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--dm-primary) 10%, transparent), transparent 55%), var(--dm-surface); }
+.pdx-hero-icon { width: 56px; height: 56px; flex-shrink: 0; border-radius: var(--dm-radius-md); display: flex; align-items: center; justify-content: center;
+    color: var(--dm-primary); background: color-mix(in srgb, var(--dm-primary) 16%, transparent); }
+.pdx-hero-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .4rem; }
+.pdx-name { font-size: var(--dm-text-xl, 1.4rem); line-height: 1.2; }
+.pdx-desc { margin: 0; color: var(--dm-text-muted); max-width: 64ch; }
+.pdx-chips { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
+.pdx-chip { display: inline-flex; align-items: center; font-size: var(--dm-text-xs); font-weight: 600; padding: .1rem .55rem; border-radius: 999px; white-space: nowrap;
+    background: color-mix(in srgb, var(--dm-text) 10%, transparent); color: var(--dm-text-muted); }
+.pdx-chip.is-ok { background: color-mix(in srgb, var(--dm-success) 16%, transparent); color: var(--dm-success); }
+.pdx-chip.is-warn { background: color-mix(in srgb, var(--dm-warning, var(--dm-danger)) 18%, transparent); color: var(--dm-warning, var(--dm-danger)); }
+.pdx-meta { display: flex; flex-wrap: wrap; gap: .9rem; color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.pdx-meta > span { display: inline-flex; align-items: center; gap: .3rem; }
+.pdx-meta b { color: var(--dm-text); font-weight: 600; }
+.pdx-card { border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); padding: .8rem .95rem; display: flex; flex-direction: column; gap: .7rem; }
+.pdx-card-title { display: flex; align-items: center; gap: .45rem; font-weight: 600; }
+.pdx-muted { color: var(--dm-text-muted); font-weight: 400; font-size: var(--dm-text-sm); }
+.pdx-note { margin: 0; color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.pdx-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .7rem; }
+.pdx-tile { position: relative; display: flex; align-items: center; gap: .75rem; padding: .75rem .8rem; cursor: pointer;
+    border: 1px solid var(--dm-border); border-left: 3px solid var(--c, var(--dm-primary)); border-radius: var(--dm-radius-md); background: var(--dm-surface);
+    transition: border-color .14s ease, background .14s ease; }
+.pdx-tile:hover, .pdx-tile:focus-visible { border-color: var(--c, var(--dm-primary)); background: var(--dm-table-hover-bg, var(--dm-surface-raised)); outline: none; }
+.pdx-tile.is-empty .pdx-tile-chip, .pdx-tile.is-empty .pdx-tile-body { opacity: .55; }
+.pdx-tile-chip { width: 38px; height: 38px; flex-shrink: 0; border-radius: var(--dm-radius-md); display: flex; align-items: center; justify-content: center;
+    color: var(--c, var(--dm-primary)); background: color-mix(in srgb, var(--c, var(--dm-primary)) 14%, transparent); }
+.pdx-tile-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+.pdx-tile-body strong { font-size: 1.4rem; line-height: 1; font-variant-numeric: tabular-nums; }
+.pdx-tile-body small { color: var(--dm-text-muted); font-size: var(--dm-text-xs); text-transform: uppercase; letter-spacing: .03em; margin-top: .2rem; }
+.pdx-tile-actions { display: flex; flex-direction: column; gap: .2rem; align-self: flex-start; }
+.pdx-add, .pdx-kebab { border: 1px solid transparent; background: none; cursor: pointer; color: var(--dm-text-muted); border-radius: var(--dm-radius-sm);
+    width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; font-size: var(--dm-text-base); line-height: 1; padding: 0; }
+.pdx-add { color: var(--c, var(--dm-primary)); border-color: var(--dm-border); font-weight: 700; }
+.pdx-add:hover, .pdx-kebab:hover { color: var(--dm-primary); border-color: var(--c, var(--dm-primary)); }
+@media (max-width: 640px) { .pdx-hero { flex-direction: column; } }
+</style>

package/admin/js/templates/project-settings.html

@@ -1,67 +1,102 @@
-<div class="page-header">
-    <h2><span id="ps-icon" data-icon="settings"></span> <span id="ps-title">Project settings</span></h2>
-    <div class="header-actions">
-        <a class="btn btn-secondary" id="ps-back"><span data-icon="arrow-left"></span> Back to project</a>
-        <button class="btn btn-primary" id="ps-save"><span data-icon="check"></span> Save</button>
-    </div>
-</div>
+<!-- A project's settings. Bound with M.applyBindings - see admin/js/views/project-settings.js.
+     No page heading: the Tool banner is the heading ("Projects › <name>"), with Save, Overview and All projects. -->
+<div class="psx">
+    <p class="psx-alert is-bad" data-bind-hidden="!errorText.value" data-bind-text="errorText.value"></p>
 
-<div class="card">
-    <div class="card-header">
-        <span data-icon="info"></span> Project details
+    <div class="psx-unsaved" data-bind-hidden="!dirty.value">
+        <span><span data-icon="edit" data-icon-size="14"></span> You have unsaved changes.</span>
+        <span class="psx-spacer"></span>
+        <button type="button" class="btn btn-sm btn-ghost" data-on-click="discard">Discard</button>
+        <button type="button" class="btn btn-sm btn-primary" data-on-click="save" data-bind-disabled="cannot.value">
+            <span data-icon="save" data-icon-size="13"></span> Save</button>
     </div>
-    <div class="card-body">
-        <div class="grid grid-cols-2 dm-pe-grid">
-            <div class="form-group">
-                <label for="ps-slug">Slug</label>
-                <input type="text" id="ps-slug" name="slug" class="form-input" disabled>
-                <small class="form-hint">Immutable after create</small>
+
+    <div class="psx-card">
+        <div class="psx-card-title">Project details
+            <span data-help-title="Project details" data-help="A project groups pages, collections, forms and the rest for the sidebar, and can limit what a user sees. Ctrl+S saves; leaving with unsaved changes asks first and keeps them for your next visit."></span>
+        </div>
+        <div class="psx-grid">
+            <div>
+                <label class="form-label" for="psx-name">Name <span class="text-danger">*</span></label>
+                <input id="psx-name" type="text" class="form-input" maxlength="80" data-model="name.value">
+                <small class="psx-err" data-bind-hidden="!nameErr.value" data-bind-text="nameErr.value"></small>
             </div>
-            <div class="form-group">
-                <label for="ps-name">Name <span class="required">*</span></label>
-                <input type="text" id="ps-name" name="name" class="form-input" required>
+            <div>
+                <label class="form-label" for="psx-slug">Slug
+                    <span data-help="The project's id - in its admin addresses and in every artefact filed under it. It cannot be changed."></span></label>
+                <input id="psx-slug" type="text" class="form-input font-mono" disabled>
             </div>
-            <div class="form-group col-span-2">
-                <label for="ps-description">Description</label>
-                <textarea id="ps-description" name="description" class="form-input" rows="2"></textarea>
+            <div class="psx-wide">
+                <label class="form-label" for="psx-description">Description</label>
+                <textarea id="psx-description" class="form-input" rows="2" maxlength="300" data-model="description.value"></textarea>
             </div>
-            <div class="form-group">
-                <label for="ps-icon">Icon</label>
-                <div id="ps-icon-mount"></div>
-                <small class="form-hint">Click <code>⊞</code> to browse Domma icons</small>
+            <div>
+                <label class="form-label" for="psx-icon">Icon
+                    <span data-help="Shown beside the project in the sidebar and on its overview. Type a Domma icon name or browse with the grid button."></span></label>
+                <div class="psx-icon-mount"></div>
             </div>
-            <div class="form-group">
-                <label for="ps-rootUrl">Root URL</label>
-                <input type="text" id="ps-rootUrl" name="rootUrl" class="form-input" placeholder="/members">
-                <small class="form-hint">URL prefix for auto-inheritance (must start with /)</small>
+            <div>
+                <label class="form-label" for="psx-rootUrl">Root URL
+                    <span data-help-title="Root URL" data-help="Pages under this address are filed under the project without being tagged one by one - with /members, a page at /members/join belongs here. Leave it empty to file pages by hand. The core project owns /."></span></label>
+                <input id="psx-rootUrl" type="text" class="form-input font-mono" placeholder="/members" data-model="rootUrl.value" data-bind-disabled="rootLocked">
+                <small class="psx-err" data-bind-hidden="!rootErr.value" data-bind-text="rootErr.value"></small>
+                <small class="psx-hint" data-bind-hidden="!rootLocked">Locked - a built-in project.</small>
             </div>
-            <div class="form-group">
-                <label for="ps-sortOrder">Sort order</label>
-                <input type="number" id="ps-sortOrder" name="sortOrder" class="form-input" value="0">
-                <small class="form-hint">Lower = higher in the sidebar</small>
+            <div>
+                <label class="form-label" for="psx-sortOrder">Sort order
+                    <span data-help="Lower numbers come first, in Manage projects and in the sidebar."></span></label>
+                <input id="psx-sortOrder" type="number" class="form-input" data-model="sortOrder.value">
             </div>
-            <div class="form-group col-span-2" id="ps-enabled-group">
-                <label class="dm-checkbox-label" style="display:inline-flex;align-items:center;gap:.5rem;">
-                    <input type="checkbox" id="ps-enabled" name="enabled" checked>
-                    <span>Enabled</span>
-                </label>
-                <small class="form-hint">Off = hard kill-switch: public pages 404 and the external API stops responding. Admin editing of its artefacts is unaffected.</small>
+            <div class="psx-setting" data-bind-hidden="!canToggle">
+                <label class="form-label" for="psx-enabled">Enabled
+                    <span data-help="Off is a hard switch: the project's public pages 404 and its external API stops answering. Editing it in the admin carries on."></span></label>
+                <input id="psx-enabled" type="checkbox" class="form-switch" data-model="enabled.value">
             </div>
         </div>
     </div>
-</div>
 
-<div class="card" id="ps-danger-zone" style="border-color:#c33;">
-    <div class="card-header"><h3>Danger zone</h3></div>
-    <div class="card-body">
-        <p>Untagging removes <code>meta.project</code> from every artefact currently tagged with this project. The artefacts remain (untagged); the project record is unchanged.</p>
-        <p>
-            <button class="btn btn-warning" id="ps-untag-all"><span data-icon="tag"></span> Untag all artefacts</button>
-        </p>
-        <hr>
-        <p>Deleting a project is only possible when no artefacts are tagged. The server returns an explanatory error otherwise.</p>
-        <p>
-            <button class="btn btn-danger" id="ps-delete"><span data-icon="trash"></span> Delete project</button>
-        </p>
+    <div class="psx-card psx-danger" data-bind-hidden="!dangerShown">
+        <div class="psx-card-title">Danger zone
+            <span data-help-title="Danger zone" data-help="Untagging takes the project tag off everything filed under it: the artefacts stay and belong to Core. A project can only be deleted once nothing is filed under it. Both ask first."></span>
+        </div>
+        <p class="psx-note" data-bind-text="filedText.value"></p>
+        <div class="psx-danger-row" data-bind-hidden="!canUntag">
+            <span><strong>Untag everything</strong><small>Everything filed here goes back to Core. The project is kept.</small></span>
+            <button type="button" class="btn btn-sm btn-warning" data-on-click="untagAll" data-bind-disabled="noneFiled.value || busy.value">
+                <span data-icon="tag" data-icon-size="13"></span> Untag all…</button>
+        </div>
+        <div class="psx-danger-row" data-bind-hidden="!canDelete">
+            <span><strong>Delete this project</strong><small data-bind-text="deleteHint.value"></small></span>
+            <button type="button" class="btn btn-sm btn-danger" data-on-click="remove" data-bind-disabled="deleteBlocked.value">
+                <span data-icon="trash" data-icon-size="13"></span> Delete…</button>
+        </div>
     </div>
 </div>
+
+<style>
+.psx { display: flex; flex-direction: column; gap: .9rem; }
+.psx [hidden] { display: none !important; }
+.psx-alert { margin: 0; padding: .6rem .8rem; border-radius: var(--dm-radius-md); color: var(--dm-text); background: color-mix(in srgb, var(--dm-danger) 14%, transparent); }
+.psx-unsaved { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: .5rem; padding: .5rem .8rem; border-radius: var(--dm-radius-md);
+    border: 1px solid color-mix(in srgb, var(--dm-warning, var(--dm-primary)) 40%, transparent);
+    background: color-mix(in srgb, var(--dm-warning, var(--dm-primary)) 14%, var(--dm-surface)); color: var(--dm-text); }
+.psx-unsaved > span:first-child { display: inline-flex; align-items: center; gap: .4rem; }
+.psx-unsaved .btn, .psx-danger-row .btn { display: inline-flex; align-items: center; gap: .3rem; }
+.psx-spacer { flex: 1; }
+.psx-card { border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); padding: .8rem .95rem; display: flex; flex-direction: column; gap: .75rem; }
+.psx-card-title { display: flex; align-items: center; gap: .35rem; font-weight: 600; }
+.psx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
+.psx-wide { grid-column: 1 / -1; }
+.psx .form-label { display: flex; align-items: center; gap: .3rem; }
+.psx-err { display: block; color: var(--dm-danger); font-size: var(--dm-text-xs); margin-top: .25rem; }
+.psx-hint { display: block; color: var(--dm-text-muted); font-size: var(--dm-text-xs); margin-top: .25rem; }
+.psx-note { margin: 0; color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.psx-setting { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
+.psx-setting .form-label { margin: 0; }
+.psx-danger { border-color: color-mix(in srgb, var(--dm-danger) 45%, var(--dm-border)); }
+.psx-danger .psx-card-title { color: var(--dm-danger); }
+.psx-danger-row { display: flex; align-items: center; gap: .8rem; padding: .55rem 0; border-top: 1px solid var(--dm-border); }
+.psx-danger-row > span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+.psx-danger-row small { color: var(--dm-text-muted); font-size: var(--dm-text-xs); }
+@media (max-width: 640px) { .psx-grid { grid-template-columns: 1fr; } .psx-danger-row { flex-wrap: wrap; } }
+</style>