@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&display=swap');

/* ── 変数 ─────────────────────────────────────────────────────── */
:root {
    --wsm-primary:    #1a73e8;
    --wsm-primary-h:  #1557b0;
    --wsm-danger:     #d93025;
    --wsm-surface:    #fff;
    --wsm-bg:         #f6f8fc;
    --wsm-sidebar-bg: #f6f8fc;
    --wsm-border:     #dadce0;
    --wsm-text:       #202124;
    --wsm-text-sub:   #5f6368;
    --wsm-hover:      #f1f3f4;
    --wsm-radius:     8px;
    --wsm-shadow:     0 1px 3px rgba(60,64,67,.3),0 4px 8px rgba(60,64,67,.15);
    --wsm-font:       'Noto Sans JP',sans-serif;
    --wsm-sidebar-w:  240px;
    --wsm-header-h:   60px;
}

/* ── リセット ─────────────────────────────────────────────────── */
#wsm-app *, #wsm-app *::before, #wsm-app *::after { box-sizing: border-box; margin: 0; padding: 0; }
#wsm-app { font-family: var(--wsm-font); font-size: 14px; color: var(--wsm-text); background: var(--wsm-bg); min-height: calc(100vh - 80px); }

/* ══════════════════════════════════════════════════════════════
   メインエリア
══════════════════════════════════════════════════════════════ */
.wsm-main { display: flex; flex-direction: column; min-height: calc(100vh - 80px); }

/* ── ヘッダー（2行レイアウト） ──────────────────────────── */
.wsm-header {
    background:    var(--wsm-surface);
    border-bottom: 1px solid var(--wsm-border);
    flex-shrink:   0;
    padding:       0;
}

/* 1行目：年月（左）・＋ボタン（右） */
.wsm-header-row-top {
    display:                  -webkit-flex;
    display:                  flex;
    -webkit-align-items:      center;
    align-items:              center;
    -webkit-justify-content:  space-between;
    justify-content:          space-between;
    padding:                  16px 20px 10px;
    border-bottom:            1px solid var(--wsm-border);
    box-sizing:               border-box;
}
.wsm-current-label {
    font-size:   22px;
    font-weight: 500;
    margin:      0;
    white-space: nowrap;
}

/* ＋ボタン（iOS Safari対応） */
.wsm-add-btn {
    -webkit-appearance: none;
    appearance:      none;
    width:           34px;
    min-width:       34px;
    height:          34px;
    border-radius:   50%;
    border:          1.5px solid var(--wsm-primary);
    background:      transparent;
    color:           var(--wsm-primary);
    cursor:          pointer;
    display:         -webkit-flex;
    display:         flex;
    -webkit-align-items: center;
    align-items:     center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-shrink: 0;
    flex-shrink:     0;
    padding:         0;
    margin:          0;
    -webkit-transition: background .15s, color .15s;
    transition:      background .15s, color .15s;
    box-sizing:      border-box;
}
.wsm-add-btn:hover  { background: var(--wsm-primary); color: #fff; }
.wsm-add-btn:active { opacity: .75; }

/* 2行目：ボタン群 */
.wsm-header-row-bottom {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             10px;
    padding:         10px 20px 12px;
}

/* 共通コントロールボタン */
.wsm-ctrl-btn {
    min-width:     48px;
    height:        40px;
    padding:       0 16px;
    border:        1.5px solid var(--wsm-border);
    border-radius: 8px;
    background:    var(--wsm-surface);
    font-family:   var(--wsm-font);
    font-size:     14px;
    font-weight:   500;
    color:         var(--wsm-text);
    cursor:        pointer;
    display:       inline-flex;
    align-items:   center;
    justify-content: center;
    transition:    background .15s, border-color .15s;
    white-space:   nowrap;
}
.wsm-ctrl-btn:hover { background: var(--wsm-hover); border-color: #bbb; }
.wsm-ctrl-nav { min-width: 44px; padding: 0; }
.wsm-ctrl-btn.active {
    background:   var(--wsm-primary);
    border-color: var(--wsm-primary);
    color:        #fff;
}
.wsm-ctrl-divider {
    width:        1px;
    height:       28px;
    background:   var(--wsm-border);
    margin:       0 4px;
    flex-shrink:  0;
}

/* ── 追加ボタン（青丸・テーマCSSに依存しない独立スタイル） ── */
button.wsm-fab,
button.wsm-fab:link,
button.wsm-fab:visited {
    -webkit-appearance: none !important;
    appearance:      none !important;
    display:         -webkit-inline-flex !important;
    display:         inline-flex !important;
    -webkit-align-items: center !important;
    align-items:     center !important;
    -webkit-justify-content: center !important;
    justify-content: center !important;
    width:           40px !important;
    height:          40px !important;
    min-width:       40px !important;
    min-height:      40px !important;
    border-radius:   50% !important;
    background-color: #1a73e8 !important;
    background:      #1a73e8 !important;
    color:           #ffffff !important;
    border:          none !important;
    outline:         none !important;
    cursor:          pointer !important;
    box-shadow:      0 2px 8px rgba(26,115,232,.5) !important;
    padding:         0 !important;
    margin:          0 !important;
    flex-shrink:     0 !important;
    box-sizing:      border-box !important;
    text-decoration: none !important;
    font-size:       0 !important;
    line-height:     1 !important;
    transition:      background-color .15s, box-shadow .15s !important;
}
button.wsm-fab:hover { background-color: #1557b0 !important; box-shadow: 0 4px 12px rgba(26,115,232,.6) !important; }
button.wsm-fab:active { background-color: #1044a0 !important; box-shadow: none !important; }
button.wsm-fab svg { display: block !important; width: 20px !important; height: 20px !important; stroke: #ffffff !important; }
.wsm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border: 1px solid transparent; border-radius: 24px; font-family: var(--wsm-font); font-size: 14px; font-weight: 500; cursor: pointer; transition: background .15s, box-shadow .15s; white-space: nowrap; }
.wsm-btn-primary { background: var(--wsm-primary); color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.wsm-btn-primary:hover { background: var(--wsm-primary-h); }
.wsm-btn-ghost { background: transparent; color: var(--wsm-text-sub); border-color: var(--wsm-border); }
.wsm-btn-ghost:hover { background: var(--wsm-hover); }
.wsm-btn-danger { background: transparent; color: var(--wsm-danger); border-color: var(--wsm-danger); }
.wsm-btn-danger:hover { background: #fce8e6; }
.wsm-icon-btn { background: transparent; border: none; border-radius: 50%; padding: 8px; color: var(--wsm-text-sub); cursor: pointer; transition: background .15s; display: inline-flex; align-items: center; justify-content: center; }
.wsm-icon-btn:hover { background: var(--wsm-hover); }

/* モーダル内ボタンを大きく（テーマCSSに負けないよう!important） */
#wsm-app .wsm-btn {
    padding:     14px 28px !important;
    font-size:   16px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    min-height:  48px !important;
    cursor:      pointer !important;
    border:      1.5px solid transparent !important;
    display:     inline-flex !important;
    align-items: center !important;
    gap:         8px !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    box-sizing:  border-box !important;
}
#wsm-app .wsm-btn-primary { background: #1a73e8 !important; color: #fff !important; box-shadow: 0 2px 6px rgba(26,115,232,.35) !important; }
#wsm-app .wsm-btn-primary:hover { background: #1557b0 !important; }
#wsm-app .wsm-btn-ghost { background: transparent !important; color: #5f6368 !important; border-color: #dadce0 !important; }
#wsm-app .wsm-btn-ghost:hover { background: #f1f3f4 !important; }
#wsm-app .wsm-btn-danger { background: transparent !important; color: #d93025 !important; border-color: #d93025 !important; }
#wsm-app .wsm-btn-danger:hover { background: #fce8e6 !important; }
#wsm-app .wsm-icon-btn {
    width:  40px !important; height: 40px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #5f6368 !important;
}

/* ── カレンダー本体 ──────────────────────────────────────────── */
.wsm-calendar-wrap {
    flex:       1;
    overflow-x: hidden;   /* 横スクロール禁止 */
    overflow-y: auto;     /* 縦スクロールのみ許可 */
    width:      100%;
}
#wsm-calendar-body {
    width:     100%;
    min-height: 400px;
    box-sizing: border-box;
}

/* ══════════════════════════════════════════════════════════════
   月表示
══════════════════════════════════════════════════════════════ */
.wsm-weekday-header { display: grid; grid-template-columns: repeat(7,1fr); border-bottom: 1px solid var(--wsm-border); background: var(--wsm-surface); position: sticky; top: 0; }
.wsm-weekday-header span { text-align: center; padding: 8px; font-size: 11px; font-weight: 500; color: var(--wsm-text-sub); text-transform: uppercase; letter-spacing: .5px; }
.wsm-month-body {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: minmax(100px, auto);  /* 最低100px・内容で縦に伸びる */
    border-left: 1px solid var(--wsm-border);
    width: 100%;
    box-sizing: border-box;
}
.wsm-day-cell {
    border-right:  1px solid var(--wsm-border);
    border-bottom: 1px solid var(--wsm-border);
    background:    var(--wsm-surface);
    padding:       4px;
    cursor:        pointer;
    transition:    background .1s;
    overflow:      hidden;          /* セル内は隠す（横幅を守る） */
    min-width:     0;               /* グリッドセルが縮めるよう設定 */
    box-sizing:    border-box;
}
.wsm-day-cell:hover { background: var(--wsm-hover); }
.wsm-day-cell.drag-over { background: #e8f0fe !important; outline: 2px solid #1a73e8; outline-offset: -2px; }
.wsm-day-cell.other-month { background: #fafafa; }
.wsm-day-cell.other-month .wsm-day-num { color: #ccc; }
.wsm-day-num { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; font-size: 12px; font-weight: 500; margin-bottom: 2px; }
.wsm-day-cell.today .wsm-day-num { background: var(--wsm-primary); color: #fff; }
.wsm-event-chip { display: block; font-size: 11px; font-weight: 500; color: #fff; border-radius: 4px; padding: 2px 6px; margin-bottom: 2px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: filter .1s; }
.wsm-event-chip:hover { filter: brightness(.9); }

/* 時間指定イベント：ドット表示 */
.wsm-event-dot-row { display: flex; align-items: center; gap: 4px; margin-bottom: 2px; cursor: pointer; border-radius: 4px; padding: 1px 4px; transition: background .1s; overflow: hidden; }
.wsm-event-dot-row:hover { background: var(--wsm-hover); }
.wsm-event-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.wsm-event-dot-time { font-size: 10px; color: var(--wsm-text-sub); flex-shrink: 0; }
.wsm-event-dot-title { font-size: 11px; color: var(--wsm-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.wsm-more-btn { font-size: 11px; color: var(--wsm-text-sub); cursor: pointer; padding: 1px 4px; border-radius: 4px; }
.wsm-more-btn:hover { background: var(--wsm-hover); }

/* ══════════════════════════════════════════════════════════════
   週/日表示
══════════════════════════════════════════════════════════════ */
.wsm-week-wrap, .wsm-day-wrap { display: flex; flex-direction: column; overflow: auto; }
.wsm-time-grid { display: flex; flex: 1; }
.wsm-time-gutter { width: 56px; flex-shrink: 0; border-right: 1px solid var(--wsm-border); }
.wsm-time-label { height: 48px; display: flex; align-items: flex-start; justify-content: flex-end; padding: 2px 8px 0 0; font-size: 10px; color: var(--wsm-text-sub); }
.wsm-day-columns { display: flex; flex: 1; }
.wsm-day-col { flex: 1; border-right: 1px solid var(--wsm-border); position: relative; }
.wsm-day-col-header { text-align: center; padding: 8px 4px; background: var(--wsm-surface); border-bottom: 1px solid var(--wsm-border); }
.wsm-day-col-header .num { font-size: 26px; font-weight: 300; display: block; line-height: 1.2; }
.wsm-day-col-header .name { font-size: 11px; color: var(--wsm-text-sub); }
.wsm-day-col-header.today .num { background: var(--wsm-primary); color: #fff; border-radius: 50%; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; }
.wsm-hour-slot { height: 48px; border-bottom: 1px solid #f1f3f4; cursor: pointer; }
.wsm-hour-slot:hover { background: var(--wsm-hover); }
.wsm-timed-event { position: absolute; left: 2px; right: 2px; border-radius: 4px; padding: 2px 6px; font-size: 11px; font-weight: 500; color: #fff; overflow: hidden; cursor: pointer; z-index: 2; transition: filter .1s; }
.wsm-timed-event:hover { filter: brightness(.9); }
.wsm-now-line { position: absolute; left: 0; right: 0; height: 2px; background: #ea4335; z-index: 3; }
.wsm-now-line::before { content: ''; position: absolute; left: -4px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: #ea4335; }

/* ══════════════════════════════════════════════════════════════
   リスト表示
══════════════════════════════════════════════════════════════ */
.wsm-list-view { padding: 16px 24px; }
.wsm-list-date-header { font-size: 12px; font-weight: 700; color: var(--wsm-text-sub); padding: 12px 0 6px; border-bottom: 1px solid var(--wsm-border); margin-bottom: 4px; }
.wsm-list-event { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: var(--wsm-radius); cursor: pointer; transition: background .1s; }
.wsm-list-event:hover { background: var(--wsm-hover); }
.wsm-list-color { width: 4px; height: 36px; border-radius: 4px; flex-shrink: 0; }
.wsm-list-time { font-size: 12px; color: var(--wsm-text-sub); width: 90px; flex-shrink: 0; }
.wsm-list-title { font-weight: 500; }
.wsm-list-meta { font-size: 12px; color: var(--wsm-text-sub); }
.wsm-list-empty { text-align: center; color: var(--wsm-text-sub); padding: 48px 0; }

/* ══════════════════════════════════════════════════════════════
   モーダル（#wsm-appで優先度を確保）
══════════════════════════════════════════════════════════════ */
#wsm-app .wsm-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 24px; }
#wsm-app .wsm-modal-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.45); animation: wsm-fade .2s; }
#wsm-app .wsm-modal-dialog {
    position: relative;
    background: #ffffff !important;
    border-radius: 16px !important;
    width: min(640px, calc(100vw - 48px)) !important;
    max-height: calc(100vh - 80px) !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 0 8px 40px rgba(60,64,67,.25) !important;
    animation: wsm-slide .2s ease;
    overflow: hidden !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
}
#wsm-app .wsm-modal-sm { width: min(500px, calc(100vw - 48px)) !important; }
#wsm-app .wsm-modal-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 32px 40px 24px !important;
    border-bottom: 1px solid #dadce0 !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}
#wsm-app .wsm-modal-title { font-size: 20px !important; font-weight: 500 !important; line-height: 1.3 !important; margin: 0 !important; }
#wsm-app .wsm-modal-body {
    padding: 32px 40px !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    flex: 1 !important;
    box-sizing: border-box !important;
}
#wsm-app .wsm-modal-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 24px 40px 32px !important;
    border-top: 1px solid #dadce0 !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}
#wsm-app .wsm-modal-footer-right { display: flex !important; gap: 12px !important; }

/* ── フォーム ─────────────────────────────────────────────────── */
#wsm-app .wsm-form-group { display: flex !important; flex-direction: column !important; gap: 8px !important; }
#wsm-app .wsm-form-row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 20px !important; }
#wsm-app .wsm-flex-row { flex-direction: row !important; align-items: center !important; gap: 12px !important; }
#wsm-app .wsm-label { font-size: 13px !important; font-weight: 600 !important; color: #5f6368 !important; letter-spacing: .01em !important; margin: 0 !important; }
#wsm-app .wsm-input {
    width: 100% !important;
    padding: 12px 16px !important;
    border: 1.5px solid #dadce0 !important;
    border-radius: 8px !important;
    font-family: 'Noto Sans JP', sans-serif !important;
    font-size: 14px !important;
    color: #202124 !important;
    background: #ffffff !important;
    line-height: 1.5 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}
#wsm-app .wsm-input:focus { outline: none !important; border-color: #1a73e8 !important; box-shadow: 0 0 0 3px rgba(26,115,232,.12) !important; }
#wsm-app .wsm-textarea { resize: vertical !important; min-height: 80px !important; }
#wsm-app .wsm-select { appearance: none !important; -webkit-appearance: none !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235f6368' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 12px center !important; padding-right: 40px !important; }
#wsm-app .wsm-checkbox { width: 18px !important; height: 18px !important; accent-color: #1a73e8 !important; cursor: pointer !important; flex-shrink: 0 !important; }

/* ── カラーピッカー ──────────────────────────────────────────── */
.wsm-color-picker { display: flex; gap: 8px; flex-wrap: wrap; }
.wsm-color-dot { width: 26px; height: 26px; border-radius: 50%; cursor: pointer; transition: transform .1s, box-shadow .1s; position: relative; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.wsm-color-dot:hover { transform: scale(1.15); }
.wsm-color-dot.active { box-shadow: 0 0 0 2px #fff, 0 0 0 4px currentColor; }
.wsm-color-dot.active::after { content: '✓'; position: absolute; font-size: 12px; color: #fff; font-weight: bold; }
.wsm-color-none { background: #e8eaed; }
.wsm-color-none.active::after { content: ''; }

/* ── スイッチ ─────────────────────────────────────────────────── */
.wsm-switch-label { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.wsm-switch-input { display: none; }
.wsm-switch { width: 40px; height: 22px; background: var(--wsm-border); border-radius: 11px; position: relative; transition: background .2s; flex-shrink: 0; }
.wsm-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .2s; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.wsm-switch-input:checked + .wsm-switch { background: var(--wsm-primary); }
.wsm-switch-input:checked + .wsm-switch::after { left: 21px; }

/* ── トースト ─────────────────────────────────────────────────── */
.wsm-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: #323232; color: #fff; padding: 10px 20px; border-radius: 24px; font-size: 14px; z-index: 200000; animation: wsm-fade .2s; pointer-events: none; }

/* ── 空メッセージ（未ログイン向け） ────────────────────────────── */
.wsm-notice-box { text-align: center; padding: 48px 24px; }
.wsm-notice-box p { color: var(--wsm-text-sub); margin-bottom: 16px; }
.wsm-notice-box a { color: var(--wsm-primary); }

/* ── アニメーション ──────────────────────────────────────────── */
@keyframes wsm-fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes wsm-slide { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }

/* ── レスポンシブ ─────────────────────────────────────────────── */
@media (max-width: 640px) {
    :root { --wsm-sidebar-w: 0px; }
    .wsm-sidebar { display: none; }
    .wsm-header { padding: 0 10px; }
    .wsm-current-label { font-size: 15px; }
    .wsm-form-row { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   イベント概要ポップアップ
══════════════════════════════════════════════════════════════ */
.wsm-popup { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.wsm-popup-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.3); animation: wsm-fade .15s; }
.wsm-popup-card {
    position: relative;
    background: var(--wsm-surface);
    border-radius: 12px;
    width: min(380px, calc(100vw - 32px));
    box-shadow: 0 8px 32px rgba(60,64,67,.3);
    animation: wsm-slide .18s ease;
    overflow: hidden;
}
.wsm-popup-header {
    display: flex;
    align-items: center;
    padding: 12px 12px 0;
    gap: 4px;
}
.wsm-popup-color-bar { flex: 1; }
.wsm-popup-actions { display: flex; gap: 2px; margin-left: auto; }
.wsm-popup-btn {
    width: 34px; height: 34px; border-radius: 50%; border: none;
    background: transparent; cursor: pointer; display: inline-flex;
    align-items: center; justify-content: center;
    color: var(--wsm-text-sub); transition: background .15s;
}
.wsm-popup-btn:hover { background: var(--wsm-hover); }
.wsm-popup-btn-danger:hover { background: #fce8e6; color: var(--wsm-danger); }
.wsm-popup-body { padding: 16px 24px 24px; }
.wsm-popup-title {
    font-size: 18px; font-weight: 500; margin: 0 0 14px;
    color: var(--wsm-text); line-height: 1.4;
}
.wsm-popup-meta {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 13px; color: var(--wsm-text-sub); margin-bottom: 10px;
}
.wsm-popup-meta svg { flex-shrink: 0; margin-top: 1px; }
.wsm-popup-desc {
    margin: 14px 0 0; padding: 12px; background: var(--wsm-bg);
    border-radius: 8px; font-size: 13px; color: var(--wsm-text);
    white-space: pre-wrap; line-height: 1.6; max-height: 120px; overflow-y: auto;
}
.wsm-popup-creator { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--wsm-border); }

/* 削除確認モーダル（小さめ） */
.wsm-modal-xs { width: min(400px, calc(100vw - 48px)); }

/* ── タイトル入力の強調 ──────────────────────────────────── */
.wsm-input-title { font-size: 17px !important; font-weight: 500 !important; padding: 14px 16px !important; }

/* ── フォームヒント ──────────────────────────────────────── */
.wsm-form-hint { font-size: 12px; color: var(--wsm-text-sub); margin: 6px 0 0; }

/* ══════════════════════════════════════════════════════════════
   スマホ対応：ビュー切替ボタンを常時表示
══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    .wsm-header-row-top    { padding: 14px 14px 10px; }
    .wsm-header-row-bottom { gap: 6px; padding: 8px 14px 12px; }
    .wsm-current-label     { font-size: 19px; }
    .wsm-add-btn           { width: 32px; height: 32px; font-size: 20px; }
    .wsm-ctrl-btn          { min-width: 40px; height: 38px; padding: 0 12px; font-size: 13px; }
    .wsm-ctrl-nav          { min-width: 40px; padding: 0; }
    .wsm-form-row          { grid-template-columns: 1fr; }
    .wsm-modal-dialog      { width: calc(100vw - 24px); }
    .wsm-popup-card        { width: calc(100vw - 24px); }
}