/* ============================================================
   PackStudio v0.5.1 — ダーク系 × ティファニーブルーアクセント
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

:root {
    --tiffany:       #0ABAB5;
    --tiffany-dark:  #089490;
    --tiffany-pale:  rgba(10,186,181,0.12);
    --tiffany-glow:  rgba(10,186,181,0.3);
    --bg:            #1a1a1a;
    --surface:       #242424;
    --surface2:      #2c2c2c;
    --surface3:      #333333;
    --border:        #383838;
    --border2:       #444444;
    --text:          #f0f0f0;
    --text2:         #b0b0b0;
    --text3:         #707070;
    --danger:        #ef5350;
    --success:       #66bb6a;
    --radius-sm:     4px;
    --radius-md:     6px;
    --radius-lg:     10px;
    --shadow-sm:     0 1px 4px rgba(0,0,0,0.3);
    --shadow-md:     0 4px 16px rgba(0,0,0,0.4);
    --shadow-lg:     0 8px 32px rgba(0,0,0,0.5);
}

/* ============================================================ アプリ */
#packstudio-app {
    display: flex; flex-direction: column;
    width: 100%; height: 90vh; min-height: 600px;
    background: var(--bg); color: var(--text);
    font-family: 'Noto Sans JP','Hiragino Sans','Yu Gothic UI',sans-serif;
    font-size: 13px; user-select: none;
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    overflow: hidden; box-shadow: var(--shadow-md);
}
#packstudio-app:-webkit-full-screen,
#packstudio-app:-moz-full-screen,
#packstudio-app:fullscreen { width:100vw;height:100vh;border-radius:0;border:none; }

/* ============================================================ ツールバー */
.ps-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    height: 50px; background: var(--surface);
    border-bottom: 2px solid var(--tiffany);
    padding: 0 14px; flex-shrink: 0; z-index: 10; gap: 0;
}
.ps-logo {
    font-size: 15px; font-weight: 800; color: var(--tiffany);
    letter-spacing: 0.12em; text-transform: uppercase; flex-shrink: 0;
}
.ps-toolbar-center { display:flex;align-items:center;gap:3px;flex:1; }
.ps-toolbar-right  { display:flex;align-items:center;gap:6px;flex-shrink:0; }
.ps-toolbar-sep    { display:inline-block;width:1px;height:22px;background:var(--border2);margin:0 6px; }

.ps-select {
    background: var(--surface2); color: var(--text);
    border: 1px solid var(--border2); border-radius: var(--radius-sm);
    padding: 0 10px; font-size: 12px; height: 30px; cursor: pointer; outline: none;
    transition: border-color 0.15s;
}
.ps-select:hover { border-color: var(--tiffany); }
.ps-select:focus { border-color: var(--tiffany); box-shadow: 0 0 0 3px var(--tiffany-glow); }
.ps-select option { background: var(--surface2); }

.ps-toggle-label {
    display:flex;align-items:center;gap:5px;
    font-size:12px;color:var(--text2);cursor:pointer;
    padding:0 8px;height:30px;border-radius:var(--radius-sm);transition:all 0.15s;
}
.ps-toggle-label:hover { background:var(--tiffany-pale);color:var(--tiffany); }
.ps-toggle-label input[type=checkbox] { accent-color:var(--tiffany);width:14px;height:14px; }

.ps-toolbar-btn {
    background: var(--surface2); color: var(--text2);
    border: 1px solid var(--border2); border-radius: var(--radius-sm);
    padding: 0 12px; font-size: 12px; height: 30px; cursor: pointer;
    transition: all 0.15s; white-space: nowrap;
}
.ps-toolbar-btn:hover  { background:var(--tiffany-pale);border-color:var(--tiffany);color:var(--tiffany); }
.ps-toolbar-btn.active { background:var(--tiffany);border-color:var(--tiffany-dark);color:#fff;font-weight:600; }

#ps-add-text-btn { background:var(--tiffany);color:#fff;border-color:var(--tiffany-dark);font-weight:600; }
#ps-add-text-btn:hover { background:var(--tiffany-dark);color:#fff; }

#ps-fullscreen-btn {
    background: var(--surface3); color: var(--text);
    border: 1px solid var(--border2); border-radius: var(--radius-sm);
    padding: 0 14px; font-size: 12px; height: 30px; cursor: pointer;
    transition: all 0.15s; white-space: nowrap;
}
#ps-fullscreen-btn:hover { background:var(--surface2);border-color:var(--tiffany);color:var(--tiffany); }

/* ============================================================ メイン */
.ps-main { display:flex;flex:1;overflow:hidden; }

.ps-canvas-area {
    flex:1;display:flex;align-items:center;justify-content:center;
    background: #111; overflow:hidden;position:relative;
}
.ps-canvas-wrapper {
    position:relative;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.08), var(--shadow-lg);
    border-radius:2px;
}
#ps-canvas { display:block;background:#fff;cursor:default;border-radius:2px; }

.ps-image-controls {
    position:absolute;bottom:14px;left:50%;transform:translateX(-50%);
    display:flex;align-items:center;gap:10px;
    background:var(--surface);border:1px solid var(--border2);
    border-radius:var(--radius-lg);padding:8px 16px;
    font-size:12px;color:var(--text);white-space:nowrap;
    box-shadow:var(--shadow-md);
}
.ps-ic-label { color:var(--text3);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em; }
.ps-ic-btn {
    background:var(--surface2);color:var(--text2);
    border:1px solid var(--border2);border-radius:var(--radius-sm);
    padding:2px 10px;cursor:pointer;font-size:15px;transition:all 0.15s;
}
.ps-ic-btn:hover { background:var(--tiffany-pale);border-color:var(--tiffany);color:var(--tiffany); }
#ps-zoom-slider { width:110px;accent-color:var(--tiffany); }
#ps-rot-input {
    width:56px;background:var(--surface2);color:var(--text);
    border:1px solid var(--border2);border-radius:var(--radius-sm);
    padding:3px 6px;font-size:12px;text-align:center;outline:none;
}
#ps-rot-input:focus { border-color:var(--tiffany);box-shadow:0 0 0 3px var(--tiffany-glow); }
#ps-zoom-val { min-width:38px;color:var(--text3);font-size:11px;font-weight:600; }

/* ============================================================ レイヤーパネル */
.ps-panel {
    width:230px;flex-shrink:0;background:var(--surface);
    border-left:1px solid var(--border);display:flex;flex-direction:column;
}
.ps-panel-header {
    height:38px;line-height:38px;padding:0 14px;
    background:var(--surface);border-bottom:2px solid var(--tiffany);
    font-size:11px;font-weight:800;color:var(--tiffany);
    text-transform:uppercase;letter-spacing:0.1em;
}
.ps-panel-body { flex:1;overflow-y:auto;padding:4px 0; }
.ps-panel-empty { padding:16px 12px;color:var(--text3);font-size:12px;text-align:center; }

.ps-layer-row {
    display:flex;align-items:center;gap:5px;
    padding:6px 10px;cursor:pointer;
    border-bottom:1px solid var(--border);
    font-size:12px;color:var(--text2);transition:background 0.1s;
}
.ps-layer-row:hover    { background:var(--tiffany-pale);color:var(--text); }
.ps-layer-row.selected { background:var(--tiffany-pale);border-left:3px solid var(--tiffany);color:var(--text); }

.ps-layer-icon {
    width:20px;height:20px;background:var(--surface3);
    border:1px solid var(--border2);border-radius:var(--radius-sm);
    display:flex;align-items:center;justify-content:center;
    font-size:10px;font-weight:800;flex-shrink:0;color:var(--tiffany);
}
.ps-layer-label { flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.ps-layer-vis,.ps-layer-btn {
    background:none;border:none;cursor:pointer;
    padding:2px 4px;font-size:11px;color:var(--text3);
    border-radius:var(--radius-sm);flex-shrink:0;transition:all 0.1s;
}
.ps-layer-vis:hover,.ps-layer-btn:hover { background:var(--surface3);color:var(--text); }
.ps-layer-del:hover { background:rgba(239,83,80,0.15)!important;color:var(--danger)!important; }

.ps-props-panel {
    border-top:2px solid var(--tiffany);padding:12px;
    font-size:12px;overflow-y:auto;max-height:280px;
    background:var(--surface2);
}
.ps-prop-row { display:flex;align-items:center;gap:8px;margin-bottom:8px; }
.ps-prop-label { width:52px;color:var(--text3);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;flex-shrink:0; }
.ps-prop-row input[type=text],
.ps-prop-row input[type=number],
.ps-prop-row select {
    flex:1;background:var(--surface);color:var(--text);
    border:1px solid var(--border2);border-radius:var(--radius-sm);
    padding:4px 8px;font-size:12px;outline:none;transition:border-color 0.15s;
}
.ps-prop-row input:focus,.ps-prop-row select:focus { border-color:var(--tiffany);box-shadow:0 0 0 3px var(--tiffany-glow); }
.ps-prop-row input[type=color] { width:36px;height:28px;padding:2px;border:1px solid var(--border2);border-radius:var(--radius-sm);cursor:pointer;background:none; }
.ps-prop-row input[type=range] { flex:1;accent-color:var(--tiffany); }
.ps-prop-row input[type=checkbox] { accent-color:var(--tiffany);width:15px;height:15px; }
.ps-props-title {
    font-size:10px;font-weight:800;color:var(--tiffany);
    text-transform:uppercase;letter-spacing:0.1em;
    margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--border);
}

/* ============================================================ 画像トレイ */
.ps-tray { flex-shrink:0;background:var(--surface);border-top:1px solid var(--border); }
.ps-tray-header {
    display:flex;align-items:center;justify-content:space-between;
    height:34px;padding:0 14px;background:var(--surface);cursor:pointer;
    font-size:11px;font-weight:800;color:var(--tiffany);
    text-transform:uppercase;letter-spacing:0.1em;
    border-bottom:1px solid var(--border);transition:background 0.15s;
}
.ps-tray-header:hover { background:var(--tiffany-pale); }
.ps-tray-arrow { font-size:10px;transition:transform 0.2s;color:var(--tiffany); }
.ps-tray.collapsed .ps-tray-arrow { transform:rotate(180deg); }
.ps-tray-body {
    display:flex;align-items:center;gap:10px;
    padding:10px 14px;height:110px;
    overflow-x:auto;overflow-y:hidden;flex-wrap:nowrap;
    background:var(--bg);
}
.ps-tray.collapsed .ps-tray-body { display:none; }
.ps-tray-empty { color:var(--text3);font-size:12px;margin:0; }

.ps-tray-item {
    position:relative;flex-shrink:0;width:80px;height:60px;
    border:2px solid var(--border2);border-radius:var(--radius-md);
    cursor:grab;overflow:hidden;transition:border-color 0.15s,box-shadow 0.15s;
    background:var(--surface2);box-shadow:var(--shadow-sm);
}
.ps-tray-item:hover  { border-color:var(--tiffany);box-shadow:0 0 0 3px var(--tiffany-glow); }
.ps-tray-item.ps-tray-used { border-color:var(--success); }
.ps-tray-item canvas { display:block; }
.ps-tray-badge {
    position:absolute;bottom:2px;left:2px;
    background:rgba(102,187,106,0.9);color:#fff;
    font-size:8px;font-weight:700;padding:2px 5px;border-radius:3px;pointer-events:none;
}
.ps-tray-del {
    position:absolute;top:2px;right:2px;width:16px;height:16px;
    background:rgba(239,83,80,0.85);color:#fff;border:none;border-radius:3px;
    font-size:9px;cursor:pointer;display:none;align-items:center;justify-content:center;padding:0;
}
.ps-tray-item:hover .ps-tray-del { display:flex; }
.ps-tray-upload {
    flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    width:70px;height:60px;border:2px dashed var(--tiffany);border-radius:var(--radius-md);
    color:var(--tiffany);font-size:10px;font-weight:700;cursor:pointer;
    transition:all 0.15s;background:var(--tiffany-pale);letter-spacing:0.05em;
}
.ps-tray-upload:hover { background:var(--tiffany);color:#fff; }
.ps-tray-upload::before { content:'＋';font-size:20px;line-height:1; }

/* ============================================================ トースト */
#ps-toast {
    position:fixed;bottom:32px;left:50%;
    transform:translateX(-50%) translateY(80px);
    background:var(--surface3);color:var(--text);
    border:1px solid var(--border2);border-radius:var(--radius-lg);
    padding:10px 18px;font-size:13px;
    display:flex;align-items:center;gap:12px;
    box-shadow:var(--shadow-lg);z-index:999999;
    transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1);white-space:nowrap;
}
#ps-toast.show { transform:translateX(-50%) translateY(0); }
#ps-toast-btn {
    background:var(--tiffany);color:#fff;border:none;
    border-radius:var(--radius-sm);padding:5px 14px;
    font-size:12px;font-weight:700;cursor:pointer;transition:background 0.15s;
}
#ps-toast-btn:hover { background:var(--tiffany-dark); }
#ps-toast-close { background:none;border:none;color:var(--text3);font-size:16px;cursor:pointer;padding:0;line-height:1; }
#ps-toast-close:hover { color:var(--text); }

/* スクロールバー */
::-webkit-scrollbar { width:5px;height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border2);border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--tiffany); }

/* ============================================================ オンボーディング */
.ps-ob-overlay {
    position:absolute;inset:0;
    background:rgba(0,0,0,0.82);
    backdrop-filter:blur(6px);
    z-index:10000;
    display:flex;align-items:center;justify-content:center;
    opacity:0;transition:opacity 0.35s ease;
}
.ps-ob-overlay.visible { opacity:1; }
.ps-ob-overlay.dim     { background:rgba(0,0,0,0.6); }
.ps-ob-overlay.exit    { opacity:0;pointer-events:none; }

.ps-ob-card {
    background:var(--surface);border:1px solid var(--border2);
    border-radius:16px;padding:36px 40px;width:600px;max-width:92vw;
    box-shadow:0 24px 64px rgba(0,0,0,0.6);
    transform:translateY(24px) scale(0.97);opacity:0;
    transition:all 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.ps-ob-card.visible { transform:translateY(0) scale(1);opacity:1; }
.ps-ob-card.exit    { transform:translateY(-20px) scale(0.96);opacity:0;transition:all 0.3s ease; }

.ps-ob-step { font-size:11px;font-weight:800;color:var(--tiffany);letter-spacing:0.15em;text-transform:uppercase;margin-bottom:8px; }
.ps-ob-title { font-size:22px;font-weight:800;color:var(--text);margin:0 0 8px; }
.ps-ob-desc  { font-size:13px;color:var(--text3);margin:0 0 24px; }

.ps-ob-size-grid {
    display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));
    gap:10px;margin-bottom:20px;
}
.ps-ob-size-tile {
    border:2px solid var(--border2);border-radius:10px;
    padding:14px 10px;text-align:center;cursor:pointer;
    transition:all 0.2s;background:var(--surface2);
}
.ps-ob-size-tile:hover {
    border-color:var(--tiffany);background:var(--tiffany-pale);
    transform:translateY(-2px);box-shadow:0 4px 12px var(--tiffany-glow);
}
.ps-ob-size-tile.selected {
    border-color:var(--tiffany);background:var(--tiffany);
    transform:translateY(-2px) scale(1.04);box-shadow:0 6px 20px var(--tiffany-glow);
}
.ps-ob-size-tile.selected .ps-ob-size-name,
.ps-ob-size-tile.selected .ps-ob-size-dim,
.ps-ob-size-tile.selected .ps-ob-size-desc { color:#fff; }
.ps-ob-size-icon { font-size:24px;margin-bottom:6px; }
.ps-ob-size-name { font-size:13px;font-weight:700;color:var(--text);margin-bottom:2px; }
.ps-ob-size-dim  { font-size:10px;color:var(--text3);margin-bottom:2px; }
.ps-ob-size-desc { font-size:10px;color:var(--tiffany);font-weight:600; }

.ps-ob-custom {
    display:flex;align-items:center;gap:8px;
    padding-top:16px;border-top:1px solid var(--border);
    font-size:12px;color:var(--text3);
}
.ps-ob-custom input {
    width:72px;padding:6px 8px;
    border:1px solid var(--border2);border-radius:6px;
    font-size:13px;text-align:center;outline:none;
    background:var(--surface2);color:var(--text);transition:border-color 0.15s;
}
.ps-ob-custom input:focus { border-color:var(--tiffany);box-shadow:0 0 0 3px var(--tiffany-glow); }
.ps-ob-btn-secondary {
    background:var(--tiffany-pale);color:var(--tiffany);
    border:1px solid var(--tiffany);border-radius:6px;
    padding:6px 14px;font-size:12px;font-weight:700;cursor:pointer;transition:all 0.15s;
}
.ps-ob-btn-secondary:hover { background:var(--tiffany);color:#fff; }

.ps-ob-panel {
    position:absolute;top:0;left:0;bottom:0;width:320px;
    background:var(--surface);border-right:1px solid var(--border2);
    box-shadow:4px 0 32px rgba(0,0,0,0.4);
    display:flex;flex-direction:column;
    transform:translateX(-100%);
    transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
    overflow:hidden;
}
.ps-ob-panel.visible { transform:translateX(0); }

.ps-ob-panel-header {
    padding:28px 24px 16px;border-bottom:2px solid var(--tiffany);flex-shrink:0;
    background:var(--surface);
}
.ps-ob-panel-title { font-size:20px;font-weight:800;color:var(--text);margin:0 0 6px; }
.ps-ob-panel-desc  { font-size:12px;color:var(--text3);margin:0; }

.ps-ob-panel-body { flex:1;overflow-y:auto;padding:16px 16px 24px;background:var(--surface); }

.ps-ob-group { margin-bottom:20px; }
.ps-ob-group-label {
    font-size:11px;font-weight:800;color:var(--tiffany);
    text-transform:uppercase;letter-spacing:0.1em;
    margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--border);
}
.ps-ob-layout-row { display:flex;flex-wrap:wrap;gap:10px; }
.ps-ob-layout-thumb { cursor:pointer;text-align:center;transition:all 0.2s; }
.ps-ob-layout-thumb canvas {
    display:block;border:2px solid var(--border2);
    border-radius:8px;transition:all 0.2s;
}
.ps-ob-layout-thumb:hover canvas {
    border-color:var(--tiffany);box-shadow:0 4px 12px var(--tiffany-glow);
    transform:translateY(-2px);
}
.ps-ob-layout-thumb.selected canvas {
    border-color:var(--tiffany);box-shadow:0 0 0 3px var(--tiffany-glow);
    transform:translateY(-2px) scale(1.05);
}
.ps-ob-layout-name { font-size:11px;color:var(--text3);margin-top:5px;transition:color 0.2s; }
.ps-ob-layout-thumb.selected .ps-ob-layout-name { color:var(--tiffany);font-weight:700; }

/* ============================================================
   v0.5.3: ガターパネル
   ============================================================ */
.ps-gutter-panel {
    position: absolute;
    top: 12px; left: 12px;
    background: var(--surface);
    border: 1px solid var(--border2);
    border-radius: var(--radius-lg);
    padding: 14px 16px;
    min-width: 240px;
    box-shadow: var(--shadow-md);
    z-index: 100;
    font-size: 12px;
    color: var(--text);
}
.ps-gutter-panel-title {
    font-size: 11px; font-weight: 800;
    color: var(--tiffany); text-transform: uppercase;
    letter-spacing: 0.1em; margin-bottom: 12px;
}
.ps-gutter-modes {
    display: flex; gap: 6px; margin-bottom: 14px;
}
.ps-gutter-mode-btn {
    flex: 1; padding: 6px 0;
    background: var(--surface2); color: var(--text2);
    border: 1px solid var(--border2); border-radius: var(--radius-sm);
    font-size: 12px; cursor: pointer; transition: all 0.15s;
}
.ps-gutter-mode-btn:hover  { border-color: var(--tiffany); color: var(--tiffany); }
.ps-gutter-mode-btn.active { background: var(--tiffany); border-color: var(--tiffany-dark); color: #fff; font-weight: 700; }

.ps-gutter-section { border-top: 1px solid var(--border); padding-top: 12px; }
.ps-gutter-row {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 8px; font-size: 12px; color: var(--text2);
}
.ps-gutter-row span:first-child { width: 40px; flex-shrink: 0; font-size: 11px; color: var(--text3); }
.ps-gutter-row input[type=color] { width: 32px; height: 26px; padding: 2px; border: 1px solid var(--border2); border-radius: 3px; cursor: pointer; background: none; }
.ps-gutter-row input[type=range] { flex: 1; accent-color: var(--tiffany); }
.ps-gutter-row select {
    flex: 1; background: var(--surface2); color: var(--text);
    border: 1px solid var(--border2); border-radius: var(--radius-sm);
    padding: 4px 8px; font-size: 12px; outline: none;
}
.ps-gutter-row select:focus { border-color: var(--tiffany); }
.ps-gutter-upload-btn {
    background: var(--tiffany-pale); color: var(--tiffany);
    border: 1px solid var(--tiffany); border-radius: var(--radius-sm);
    padding: 4px 10px; font-size: 11px; font-weight: 700; cursor: pointer;
    transition: all 0.15s;
}
.ps-gutter-upload-btn:hover { background: var(--tiffany); color: #fff; }

/* ガターパネル追加スタイル */
.ps-gutter-divider {
    height: 1px; background: var(--border);
    margin: 12px -16px;
}
.ps-gutter-panel {
    max-height: 80vh;
    overflow-y: auto;
}

.ps-gutter-sub { padding-left: 8px; margin-top: 4px; border-left: 2px solid var(--tiffany-pale); }

/* バージョン表示 */
.ps-version {
    font-size: 11px;
    color: var(--text2);
    margin-left: 10px;
    margin-right: 8px;
    font-weight: 500;
    letter-spacing: 0.02em;
    flex-shrink: 0;
    white-space: nowrap;
}

/* ============================================================
   カスタム確認ダイアログ
   ============================================================ */
#ps-confirm-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    z-index: 99999;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.2s;
}
#ps-confirm-overlay.visible { opacity: 1; }

#ps-confirm-dialog {
    background: var(--surface);
    border: 1px solid var(--border2);
    border-radius: 14px;
    padding: 28px 32px;
    min-width: 300px; max-width: 420px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.5);
    transform: translateY(16px) scale(0.97);
    transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
#ps-confirm-overlay.visible #ps-confirm-dialog {
    transform: translateY(0) scale(1);
}
#ps-confirm-icon {
    font-size: 32px; text-align: center; margin-bottom: 12px;
}
#ps-confirm-title {
    font-size: 16px; font-weight: 800; color: var(--text);
    text-align: center; margin-bottom: 8px;
}
#ps-confirm-msg {
    font-size: 13px; color: var(--text2);
    text-align: center; line-height: 1.6; margin-bottom: 24px;
}
#ps-confirm-btns {
    display: flex; gap: 10px;
}
#ps-confirm-ok {
    flex: 1; padding: 10px;
    background: var(--danger); color: #fff;
    border: none; border-radius: 8px;
    font-size: 13px; font-weight: 700; cursor: pointer;
    transition: background 0.15s;
}
#ps-confirm-ok:hover { background: #c62828; }
#ps-confirm-cancel {
    flex: 1; padding: 10px;
    background: var(--surface2); color: var(--text2);
    border: 1px solid var(--border2); border-radius: 8px;
    font-size: 13px; font-weight: 700; cursor: pointer;
    transition: all 0.15s;
}
#ps-confirm-cancel:hover { border-color: var(--tiffany); color: var(--tiffany); }