/*
 * MITENE OPS — v25 / Quiet Indigo
 * v22 index.php + v24 layout compatible. Replace style.css in full.
 * One consistent palette. No changes to PHP, data, or sending behavior.
 */
:root {
    color-scheme: light;
    --bg: #ffffff;
    --panel: #ffffff;
    --text: #202636;
    --muted: #667085;
    --line: #e1e5ec;
    --line-strong: #c9d0dc;
    --soft: #f6f7fa;
    --soft-2: #fafbfc;
    --input-bg: #f9f9f9;
    --input-border: #b4bdca;
    --primary: #4b5cdb;
    --primary-hover: #3d4ec5;
    --primary-pressed: #3341aa;
    --primary-soft: #eef1ff;
    --primary-text: #3546b6;
    --focus-ring: rgba(75, 92, 219, .16);
    --row-hover: #f5f7fc;
    --dark: #202636;
    --red: #b43b4b;
    --red-hover: #982f3d;
    --success: #216b52;
    --success-soft: #f0f8f4;
    --radius: 10px;
    --sidebar: 242px;
    --control-height: 40px;
}

/* Base */
* {
    box-sizing: border-box;
}

html {
    background: var(--bg);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: "メイリオ", Meiryo, tahoma, arial, verdana, sans-serif, "ＭＳ ゴシック", "MS Gothic";
    font-size: 14px;
    line-height: 1.6;
}

a {
    color: inherit;
    text-underline-offset: 3px;
}

button,
input,
textarea,
select {
    font: inherit;
}

button,
a,
label,
input,
select,
textarea {
    -webkit-tap-highlight-color: transparent;
}

:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

[hidden] {
    display: none !important;
}

::selection {
    background: #dfe4ff;
    color: #202636;
}

/* Desktop: a quiet, white sidebar and white workspace */
.app-shell {
    min-height: 100vh;
    background: var(--bg);
}

.app-main {
    min-width: 0;
    margin-left: var(--sidebar);
    background: var(--bg);
}

.desktop-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 60;
    width: var(--sidebar);
    display: flex;
    flex-direction: column;
    background: #fff;
    border-right: 1px solid var(--line);
    overflow-y: auto;
}

.sidebar-brand {
    min-height: 82px;
    padding: 20px 18px;
    display: flex;
    align-items: center;
    gap: 11px;
    border-bottom: 1px solid var(--line);
}

.sidebar-brand strong {
    display: block;
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
    color: #202636;
}

.sidebar-brand small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px;
}

.brand-mark {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 10px;
    background: var(--primary);
}

.brand-mark::after {
    content: "";
    position: absolute;
    inset: 9px;
    border: 2px solid rgba(255, 255, 255, .94);
    border-radius: 4px;
}

.brand-mark.small {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
    border-radius: 8px;
}

.brand-mark.small::after {
    inset: 7px;
    border-radius: 3px;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 20px 12px;
}

.nav-link {
    font-size: 15px;
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 46px;
    padding: 0 13px;
    border-radius: 8px;
    color: #596273;
    text-decoration: none;
    font-weight: 600;
    transition: background-color .15s ease, color .15s ease;
}

.nav-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .72;
    transition: opacity .15s ease, transform .15s ease;
}

.nav-link:hover {
    background: #f4f5f9;
    color: #202636;
}

.nav-link:hover .nav-icon {
    opacity: .95;
}

.nav-link.active {
    background: var(--primary-soft);
    color: var(--primary-text);
    font-weight: 700;
}

.nav-link.active .nav-icon {
    opacity: 1;
}

.nav-link.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 13px;
    bottom: 13px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--primary);
}

.nav-link.logout-link {
    margin-top: 18px;
    color: #667085;
}

.sidebar-foot {
    margin-top: auto;
    padding: 18px;
    color: #717b8c;
    font-size: 10px;
    letter-spacing: .16em;
    font-weight: 600;
}

/* Existing checkbox drawer: keep the same sibling selectors */
.site-header {
    display: none;
}

.drawer-toggle {
    position: fixed;
    left: -9999px;
    top: -9999px;
    opacity: 0;
    pointer-events: none;
}

.mobile-menu-button {
    display: none;
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--line-strong);
    background: #fff;
    border-radius: 9px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
}

.mobile-menu-button span {
    display: block;
    width: 19px;
    height: 2px;
    background: #344054;
    border-radius: 2px;
}

.mobile-menu-button:hover {
    background: #f4f5fa;
    border-color: #9da9c1;
}

.drawer-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(23, 30, 47, .38);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease;
    cursor: pointer;
}

.mobile-drawer {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 90;
    width: min(84vw, 320px);
    height: 100vh;
    height: 100dvh;
    background: #fff;
    transform: translateX(102%);
    visibility: hidden;
    transition: transform .2s ease, visibility .2s ease;
    box-shadow: -8px 0 30px rgba(23, 30, 47, .10);
    overflow-y: auto;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    -webkit-overflow-scrolling: touch;
}

.drawer-toggle:checked~.drawer-overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.drawer-toggle:checked~.mobile-drawer {
    transform: translateX(0);
    visibility: visible;
}

.drawer-head {
    height: 66px;
    padding: 0 14px 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
}

.drawer-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.drawer-brand strong {
    font-size: 16px;
    font-weight: 700;
}

.drawer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
    color: #475467;
    background: #f5f6f8;
    border: 1px solid transparent;
    border-radius: 9px;
    font-size: 26px;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
}

.drawer-close:hover {
    background: #eceff6;
    color: #202636;
}

.drawer-nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 12px;
}

.drawer-nav .nav-link {
    min-height: 48px;
}

/* Content and visual hierarchy */
main {
    max-width: 1600px;
    margin: 0 auto;
    padding: 26px 28px 40px;
    background: var(--bg);
}

.guest-shell .app-main {
    margin-left: 0;
}

.guest-shell main {
    max-width: 760px;
    padding-top: 40px;
}

.panel,
.card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(24, 32, 52, .025);
}

.panel {
    padding: 22px;
    margin-bottom: 20px;
}

/* Panels are not buttons: no colored block hover or movement. */
.panel h1 {
    color: #202636;
    margin: 0 0 16px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
}

.panel p,
.section-note,
.cast-count {
    color: var(--muted);
}

.panel p {
    line-height: 1.75;
}

.grid.cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.card {
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.card::before {
    content: none;
}

.card b {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    color: #202636;
    font-variant-numeric: tabular-nums;
}

.card span {
    color: #667085;
    font-size: 13px;
    font-weight: 500;
}

.narrow {
    max-width: 520px;
    margin: 40px auto;
}

/* Controls: neutral fields; indigo reserved for the primary action */
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
}

.form-grid>button {
    grid-column: 1 / -1;
    margin-top: 10px;
}

form {
    margin: 0;
}

label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: #344054;
    font-weight: 600;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
textarea,
select {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background: var(--input-bg);
    color: #283244;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
select {
    height: var(--control-height);
    padding: 0 11px;
}

textarea {
    display: block;
    padding: 10px 11px;
    resize: vertical;
    min-height: 120px;
    line-height: 1.6;
}

input::placeholder,
textarea::placeholder {
    color: #6b7280;
    opacity: 1;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):hover,
textarea:hover,
select:hover {
    background: #f6f7f9;
    border-color: #909dad;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
textarea:focus,
select:focus {
    outline: none;
    background: #fff;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

button,
.secondary-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--control-height);
    min-width: 78px;
    padding: 0 13px;
    border: 1px solid #c7cfda;
    border-radius: 8px;
    background: #fff;
    color: #344054;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

button:hover,
.secondary-link:hover {
    background: #f0f2f7;
    color: #202636;
    border-color: #919eb3;
}

button:active,
.secondary-link:active {
    background: #e8ecf3;
}

.send,
.bulk-btn,
.bulk-send-button {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.send:hover,
.bulk-btn:hover,
.bulk-send-button:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    color: #fff;
    box-shadow: 0 2px 5px rgba(54, 69, 172, .12);
}

.send:active,
.bulk-btn:active,
.bulk-send-button:active {
    background: var(--primary-pressed);
    border-color: var(--primary-pressed);
}

.danger {
    color: var(--red);
    border-color: #d8c7ca;
    background: #fff;
}

.danger:hover {
    color: var(--red-hover);
    border-color: #c78891;
    background: #fdf1f3;
    box-shadow: none;
}

button:disabled,
button:disabled:hover,
select:disabled {
    background: #f1f3f7;
    color: #6b7280;
    border-color: #d9dee6;
    opacity: 1;
    box-shadow: none;
    cursor: not-allowed;
}

.panel>form:not(.form-grid)>button {
    margin-top: 12px;
}

.compact-select {
    width: 100%;
    min-width: 0;
    height: 38px;
    padding: 0 8px;
    margin: 0;
}

.run-controls {
    margin: 0;
}

/* Notices, diagnostics and detail pages */
.flash {
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 9px;
    margin-bottom: 16px;
}

.flash.success {
    background: var(--success-soft);
    border-color: #cce2d7;
    color: var(--success);
}

.flash.error {
    background: #fdf2f3;
    border-color: #eed0d5;
    color: #a33445;
}

.flash.info {
    background: #f3f5fe;
    border-color: #dbe1fa;
    color: #3f509a;
}

.diag {
    padding: 12px 14px;
    background: var(--soft-2);
    border: 1px solid var(--line);
    border-radius: 9px;
    margin: 14px 0;
}

pre {
    white-space: pre-wrap;
    word-break: break-word;
    background: #202938;
    color: #e4eaf4;
    padding: 16px;
    border-radius: 9px;
    overflow: auto;
    font-size: 12px;
    line-height: 1.7;
}

dl {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 10px 14px;
}

dt {
    font-weight: 600;
    color: #475467;
}

dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.source-chip {
    display: inline-block;
    padding: 3px 9px;
    border: 1px solid #dbe1e9;
    border-radius: 6px;
    margin: 2px 4px 2px 0;
    font-size: 12px;
    color: #475467;
    background: #f6f7fa;
    white-space: nowrap;
}

/* Tables: no row cards on mobile; only the table scrolls horizontally */
.table-wrap {
    max-width: 100%;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fff;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #acb6c8 #f3f5f8;
    margin-bottom: 20px;
}

.table-wrap::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.table-wrap::-webkit-scrollbar-track {
    background: #f3f5f8;
}

.table-wrap::-webkit-scrollbar-thumb {
    background: #acb6c8;
    border: 2px solid #f3f5f8;
    border-radius: 8px;
}

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

th,
td {
    text-align: left;
    vertical-align: middle;
    padding: 10px 11px;
    border-bottom: 1px solid #e6eaf0;
}

th {
    height: 42px;
    color: #475467;
    background: #f4f6f9;
    border-bottom-color: #d8dee8;
    font-size: 12px;
    font-weight: 600;
}

td {
    color: #283244;
}

tbody tr:last-child td {
    border-bottom: 0;
}

tbody tr {
    transition: background-color .12s ease;
}

tbody tr:hover {
    background: var(--row-hover);
}

tbody tr:focus-within {
    background: #f7f8fc;
}

td a {
    color: #4255bd;
    text-decoration-color: #bdc7ec;
}

td a:hover {
    color: #283fa3;
    text-decoration: underline;
}

/* Toolbar */
.cast-list-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: end;
    gap: 20px;
    margin-bottom: 16px;
}

.cast-list-head h1 {
    margin: 0;
}

.cast-count {
    margin-top: 5px;
    font-size: 12px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

#selected-count {
    color: var(--primary-text);
    font-weight: 700;
}

.cast-toolbar {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) 164px 112px;
    gap: 9px;
    align-items: center;
    justify-self: end;
    width: min(780px, 100%);
}

.search-wrap,
.sort-wrap {
    min-width: 0;
}

.cast-toolbar .bulk-btn {
    width: 100%;
}

.admin-toolbar {
    grid-template-columns: minmax(200px, 1fr) 180px;
    width: min(650px, 100%);
}

.cast-table-wrap {
    width: 100%;
}

.cast-table {
    min-width: 1180px;
    table-layout: fixed;
    white-space: nowrap;
}

.cast-table th,
.cast-table td {
    height: 54px;
    padding: 7px 9px;
}

.cast-table th {
    height: 42px;
}

.cast-table .check-col {
    width: 44px;
    text-align: center;
}


.panel input,
.check-col input {
    width: 19px;
    height: 19px;
    margin: 0;
    vertical-align: middle;
    cursor: pointer;
    accent-color: var(--primary);
}

.cast-table tbody td:not(.actions):not(.memo-cell):not(.check-col) {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* No display:flex on td: it breaks column widths. Forms provide the alignment. */
.cast-table td.actions {
    display: table-cell;
    white-space: nowrap;
}

.cast-table td.actions>form {
    display: inline-flex;
    vertical-align: middle;
    margin: 0 7px 0 0;
}

.cast-table td.actions>form:last-child {
    margin-right: 0;
}

.cast-table td.actions button {
    height: 38px;
    font-size: 12px;
    padding: 0 9px;
}

/* Cast management */
.admin-cast-table {
    min-width: 1180px;
}

.admin-cast-table th:nth-child(1),
.admin-cast-table td:nth-child(1) {
    width: 160px;
}

.admin-cast-table th:nth-child(2),
.admin-cast-table td:nth-child(2) {
    width: 120px;
}

.admin-cast-table th:nth-child(3),
.admin-cast-table td:nth-child(3) {
    width: 80px;
}

.admin-cast-table th:nth-child(4),
.admin-cast-table td:nth-child(4) {
    width: 420px;
}

.admin-cast-table th:nth-child(5),
.admin-cast-table td:nth-child(5) {
    width: 180px;
}

.admin-cast-table th:nth-child(6),
.admin-cast-table td:nth-child(6) {
    width: 220px;
}

.memo-edit-form {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) 64px;
    gap: 8px;
    align-items: center;
    margin: 0;
}

.memo-edit-form input {
    height: 38px !important;
    min-width: 0;
    font-size: 13px;
}

.memo-edit-form button {
    width: 64px;
    min-width: 64px;
    height: 38px;
    padding: 0 8px;
    font-size: 12px;
}

.admin-actions form {
    width: 82px;
}

.admin-actions button {
    width: 82px;
    min-width: 82px;
}

/* Sending: both operation groups stay on one row, without overlapping. */
.send-cast-table {
    min-width: 1180px;
}

.send-cast-table th:nth-child(1),
.send-cast-table td:nth-child(1) {
    width: 44px;
}

.send-cast-table th:nth-child(2),
.send-cast-table td:nth-child(2) {
    width: 150px;
}

.send-cast-table th:nth-child(3),
.send-cast-table td:nth-child(3) {
    width: 102px;
}

.send-cast-table th:nth-child(4),
.send-cast-table td:nth-child(4) {
    width: 60px;
}

.send-cast-table th:nth-child(5),
.send-cast-table td:nth-child(5) {
    width: 90px;
}

.send-cast-table th:nth-child(6),
.send-cast-table td:nth-child(6) {
    width: 180px;
}

.send-cast-table th:nth-child(7),
.send-cast-table td:nth-child(7) {
    width: 554px;
}

.cast-table td.actions .run-controls,
.cast-table .operation-box {
    display: inline-grid;
    grid-template-columns: 100px 64px 82px;
    gap: 6px;
    align-items: center;
    width: 258px;
    padding: 0;
    border: 0;
    margin: 0 8px 0 0;
    background: transparent;
    vertical-align: middle;
}

.cast-table td.actions .run-controls:last-child {
    margin-right: 0;
}

.cast-table .run-controls .compact-select,
.cast-table .operation-box .compact-select {
    height: 38px;
    min-width: 0;
    padding: 0 6px;
    font-size: 12px;
}

.cast-table .run-controls button,
.cast-table .operation-box button {
    width: 82px;
    min-width: 82px;
    height: 38px;
    padding: 0 5px;
    font-size: 12px;
}

.cast-table .operation-title {
    display: none;
}

.cast-table .operation-fields {
    display: contents;
}

/* Compatibility for an older HOME execution form */
.panel>.actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.panel>.actions form {
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--soft-2);
}

.panel>.actions .run-controls {
    display: grid;
    grid-template-columns: minmax(130px, 1fr) 90px;
    gap: 8px;
}

.panel>.actions .run-controls button {
    grid-column: 1 / -1;
    width: 100%;
}

/* Bulk execution and progress */
.bulk-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.bulk-page-head h1 {
    margin: 0 0 6px;
}

.bulk-page-head p {
    margin: 0;
}

.bulk-selected-table {
    margin-top: 18px;
}

.bulk-send-panel {
    max-width: 780px;
}

.bulk-condition-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 16px 0;
}

.bulk-warning {
    padding: 12px 14px;
    background: #f6f7fa;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: #596477;
    font-size: 13px;
    margin-bottom: 16px;
}

.bulk-send-button {
    width: 100%;
    height: 44px;
    font-size: 14px;
}

.bulk-progress {
    margin-top: 20px;
    padding: 18px;
    border: 1px solid #dbe1f5;
    background: #fafbff;
    border-radius: 10px;
}

.bulk-progress-top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
}

.bulk-progress-number {
    display: flex;
    align-items: baseline;
    gap: 12px;
    min-width: 0;
    font-variant-numeric: tabular-nums;
}

.bulk-progress-number strong {
    font-size: 34px;
    font-weight: 700;
    line-height: 1;
    color: var(--primary-text);
}

.bulk-progress-number span {
    color: #475467;
    font-weight: 500;
}

.bulk-progress-eta {
    color: #475467;
    font-weight: 500;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.bulk-progress-track {
    height: 10px;
    margin: 16px 0;
    background: #e5e9f2;
    border-radius: 8px;
    overflow: hidden;
}

.bulk-progress-bar {
    height: 100%;
    width: 0;
    background: var(--primary);
    border-radius: 8px;
    transition: width .25s ease;
}

.bulk-progress-current {
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #e1e5f0;
    border-radius: 8px;
    margin-bottom: 8px;
    color: #475467;
}

.bulk-progress-current strong {
    color: #202636;
}

.bulk-progress-stats {
    color: #667085;
    font-size: 13px;
}

.bulk-progress-stats b {
    color: #344054;
}

.bulk-progress-log {
    max-height: 190px;
    overflow: auto;
    margin-top: 12px;
    border-top: 1px solid var(--line);
}

.bulk-log-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 9px 2px;
    border-bottom: 1px solid #e4e8f0;
    font-size: 13px;
}

.bulk-log-status {
    font-weight: 600;
    white-space: nowrap;
}

.bulk-log-row.ok .bulk-log-status {
    color: var(--success);
}

.bulk-log-row.error .bulk-log-status {
    color: var(--red);
}

.bulk-complete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    padding: 13px 14px;
    background: var(--success-soft);
    border: 1px solid #cce2d7;
    border-radius: 8px;
    color: var(--success);
}

.bulk-complete a {
    color: var(--success);
    font-weight: 600;
}

@media (max-width: 1260px) and (min-width: 901px) {
    :root {
        --sidebar: 220px;
    }

    main {
        padding-left: 20px;
        padding-right: 20px;
    }

    .cast-list-head {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .cast-toolbar {
        justify-self: stretch;
        width: 100%;
    }
}

@media (max-width: 900px) {
    .desktop-sidebar {
        display: none;
    }

    .app-main {
        margin-left: 0;
    }

    .site-header {
        display: block;
        position: sticky;
        top: 0;
        z-index: 50;
        background: #fff;
        border-bottom: 1px solid var(--line);
    }

    .header-inner {
        min-height: 60px;
        padding: 6px 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .brand {
        display: flex;
        align-items: center;
        gap: 9px;
        font-size: 14px;
        font-weight: 700;
    }

    .mobile-menu-button {
        display: flex;
    }

    .drawer-overlay,
    .mobile-drawer {
        display: block;
    }

    main {
        padding: 14px 10px 30px;
    }

    .panel {
        padding: 14px;
        margin-bottom: 14px;
    }

    .panel h1 {
        font-size: 18px;
        margin-bottom: 12px;
    }

    .grid.cards {
        grid-template-columns: 1fr;
        gap: 9px;
        margin-bottom: 14px;
    }

    .card {
        padding: 16px;
    }

    .card b {
        font-size: 26px;
    }

    .form-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .form-grid>button {
        width: 100%;
    }

    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    textarea,
    select {
        font-size: 16px;
    }

    :root {
        --control-height: 44px;
    }

    .cast-list-head {
        display: block;
        margin-bottom: 12px;
    }

    .cast-list-head>div:first-child {
        margin-bottom: 12px;
    }

    .cast-toolbar {
        grid-template-columns: minmax(0, 1fr) 112px;
        gap: 8px;
        width: 100%;
    }

    .search-wrap {
        grid-column: 1 / -1;
    }

    .admin-toolbar {
        grid-template-columns: minmax(0, 1fr) 160px;
        width: 100%;
    }

    .admin-toolbar .sort-wrap {
        grid-column: 1 / -1;
    }

    .cast-table th,
    .cast-table td {
        height: 58px;
        padding: 7px 9px;
    }

    .cast-table th {
        height: 44px;
    }

    .admin-cast-table {
        width: 1260px;
        min-width: 1260px;
    }

    .admin-cast-table th:nth-child(4),
    .admin-cast-table td:nth-child(4) {
        width: 468px;
    }

    .admin-cast-table th:nth-child(6),
    .admin-cast-table td:nth-child(6) {
        width: 252px;
    }

    .memo-edit-form input {
        height: 42px !important;
        font-size: 16px;
    }

    .memo-edit-form button {
        height: 42px;
        font-size: 13px;
    }

    .admin-actions form,
    .admin-actions button {
        width: 94px;
        min-width: 94px;
    }

    .cast-table td.actions button {
        height: 42px;
    }

    .send-cast-table {
        width: 1270px;
        min-width: 1270px;
    }

    .send-cast-table th:nth-child(7),
    .send-cast-table td:nth-child(7) {
        width: 644px;
    }

    .cast-table td.actions .run-controls,
    .cast-table .operation-box {
        width: 302px;
        grid-template-columns: 120px 80px 90px;
        gap: 6px;
        margin-right: 12px;
    }

    .cast-table td.actions .run-controls:last-child {
        margin-right: 0;
    }

    .cast-table .run-controls .compact-select,
    .cast-table .operation-box .compact-select {
        height: 42px;
        font-size: 16px;
        padding: 0 5px;
    }

    .cast-table .run-controls button,
    .cast-table .operation-box button {
        width: 90px;
        min-width: 90px;
        height: 42px;
        font-size: 13px;
    }

    .panel>.actions {
        grid-template-columns: 1fr;
    }

    .bulk-page-head {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .secondary-link {
        width: 100%;
    }

    .bulk-condition-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .bulk-condition-grid .compact-select {
        height: 44px;
    }

    .bulk-send-panel {
        max-width: none;
    }

    .bulk-selected-table table {
        min-width: 620px;
    }

    dl {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    dt {
        margin-top: 8px;
        font-size: 12px;
        color: #667085;
    }

    .bulk-progress {
        padding: 14px;
    }

    .bulk-progress-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .bulk-progress-number strong {
        font-size: 30px;
    }

    .bulk-progress-eta {
        white-space: normal;
    }

    .bulk-log-row {
        align-items: flex-start;
    }

    .bulk-complete {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* v27 — Settings / attendance extraction */
.settings-panel {
    max-width: 920px;
}

.settings-form {
    display: grid;
    gap: 14px;
}

.settings-form label {
    max-width: 820px;
}

.settings-form input[type="url"] {
    background: var(--input-bg);
}

.field-help {
    max-width: 100%;
    margin: 15px 0;
    padding: 11px 12px;
    background: var(--soft-2);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.7;
}

.field-help code {
    color: #344054;
    background: #eef1f5;
    padding: 1px 5px;
    border-radius: 4px;
}

.save-settings-btn {
    width: fit-content;
    min-width: 140px;
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.save-settings-btn:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    color: #fff;
}

.send-toolbar {
    grid-template-columns: minmax(220px, 1fr) 160px 178px 112px;
    width: min(980px, 100%);
}

.attendance-extract-form {
    margin: 0;
}

.attendance-extract-btn {
    width: 100%;
    color: var(--primary-text);
    border-color: #cbd3f3;
    background: var(--primary-soft);
}

.attendance-extract-btn:hover {
    color: #fff;
    background: var(--primary);
    border-color: var(--primary);
}

@media (max-width: 1260px) and (min-width: 901px) {
    .send-toolbar {
        grid-template-columns: minmax(220px, 1fr) 150px 178px 112px;
        width: 100%;
    }
}

@media (max-width: 900px) {
    .send-toolbar {
        grid-template-columns: minmax(0, 1fr) 132px;
        gap: 8px;
    }

    .send-toolbar .search-wrap {
        grid-column: 1 / -1;
    }

    .send-toolbar .sort-wrap {
        grid-column: 1 / -1;
    }

    .send-toolbar .attendance-extract-form,
    .send-toolbar #bulk-form {
        min-width: 0;
    }

    .attendance-extract-btn,
    .cast-toolbar .bulk-btn {
        width: 100%;
        height: 44px;
        min-width: 0;
        font-size: 13px;
        padding: 0 8px;
    }

    .settings-panel {
        max-width: none;
    }

    .save-settings-btn {
        width: 100%;
    }
}

/* HIMEBOT SaaS / tenant management */
.stack-form {
    display: grid;
    gap: 14px;
}

.stack-form button {
    width: 100%;
    margin-top: 4px;
}

.login-card {
    margin-top: 9vh;
}

.login-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-bottom: 22px;
    text-align: center;
}

.login-brand .brand-mark {
    margin-bottom: 4px;
}

.login-brand strong {
    font-size: 24px;
    line-height: 1.2;
}

.login-brand span:last-child {
    color: var(--muted);
    font-size: 13px;
}

.admin-login-link {
    display: block;
    margin-top: 16px;
    text-align: center;
    color: var(--muted);
    font-size: 12px;
}

.account-status-bar {
    min-height: 48px;
    padding: 8px 28px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    background: #fff;
    color: var(--muted);
    font-size: 12px;
}

.account-status-bar strong {
    color: var(--text);
    font-size: 13px;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    border: 1px solid var(--line);
}

.state-active {
    background: #eef8f3;
    color: #176a4b;
    border-color: #cce4d8;
}

.state-trial {
    background: #fff8e9;
    color: #8b6212;
    border-color: #ead9ae;
}

.state-expired,
.state-suspended {
    background: #fdf1f3;
    color: #a33445;
    border-color: #edccd2;
}

.trial-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    padding: 13px 16px;
    border: 1px solid #ead9ae;
    background: #fffaf0;
    border-radius: 10px;
}

.trial-notice strong {
    color: #7f5a13;
}

.trial-notice span {
    color: #8b6b2c;
    font-size: 12px;
}

.locked-panel {
    max-width: 760px;
    margin: 30px auto;
    text-align: center;
    padding: 38px 28px;
}

.lock-icon {
    font-size: 34px;
    margin-bottom: 8px;
}

.locked-panel>p {
    max-width: 620px;
    margin: 0 auto 22px;
}

.locked-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 22px 0;
}

.locked-meta>div {
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--soft-2);
    text-align: left;
}

.locked-meta span {
    display: block;
    color: var(--muted);
    font-size: 11px;
    margin-bottom: 4px;
}

.locked-meta strong {
    display: block;
    font-size: 14px;
    overflow-wrap: anywhere;
}

.capacity-card {
    margin-bottom: 20px;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    display: grid;
    grid-template-columns: 170px minmax(220px, 1fr);
    gap: 8px 22px;
    align-items: center;
}

.capacity-card>div:first-child span {
    display: block;
    color: var(--muted);
    font-size: 12px;
}

.capacity-card>div:first-child strong {
    display: block;
    font-size: 28px;
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
}

.capacity-copy {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.capacity-copy b {
    font-size: 14px;
}

.capacity-copy span {
    color: var(--muted);
    font-size: 12px;
}

.capacity-track {
    grid-column: 1/-1;
    height: 8px;
    overflow: hidden;
    background: #edf0f5;
    border-radius: 999px;
}

.capacity-track span {
    display: block;
    height: 100%;
    background: var(--primary);
    border-radius: inherit;
}

.capacity-card small {
    grid-column: 1/-1;
    color: var(--muted);
}


.daily-send-capacity-card {
    margin-bottom: 20px;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    display: grid;
    grid-template-columns: 230px minmax(220px, 1fr);
    gap: 8px 22px;
    align-items: center;
    box-shadow: 0 1px 3px rgba(24, 32, 51, .05);
}

.daily-send-capacity-card>div:first-child span {
    display: block;
    color: var(--muted);
    font-size: 12px;
}

.daily-send-capacity-card>div:first-child strong {
    display: block;
    font-size: 28px;
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

.daily-send-capacity-copy {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.daily-send-capacity-copy b {
    font-size: 14px;
}

.daily-send-capacity-copy span {
    color: var(--muted);
    font-size: 12px;
}

.daily-send-capacity-track {
    grid-column: 1/-1;
    height: 8px;
    overflow: hidden;
    background: #edf0f5;
    border-radius: 999px;
}

.daily-send-capacity-track span {
    display: block;
    height: 100%;
    background: var(--primary);
    border-radius: inherit;
}

.daily-send-capacity-card small {
    grid-column: 1/-1;
    color: var(--muted);
}

.daily-send-capacity-card.limit-reached {
    border-color: #e7b7bd;
    background: #fffafa;
}

.daily-send-capacity-card.limit-reached .daily-send-capacity-track span {
    background: var(--red);
}

.bulk-log-row.quota {
    font-weight: 700;
}

@media(max-width:700px) {
    .daily-send-capacity-card {
        grid-template-columns: 1fr;
        padding: 14px;
        gap: 10px;
    }

    .daily-send-capacity-card>div:first-child strong {
        font-size: 24px;
    }

    .daily-send-capacity-copy {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }
}

.switch-status {
    display: inline-flex;
    min-width: 42px;
    justify-content: center;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    border: 1px solid var(--line);
}

.switch-status.on {
    background: #eef8f3;
    color: #176a4b;
    border-color: #cce4d8;
}

.switch-status.off {
    background: #f4f5f7;
    color: #697386;
}

.row-disabled {
    opacity: .7;
}

.muted {
    color: var(--muted);
    font-size: 12px;
}

.disabled-mark {
    color: #a3abb8;
}

button.secondary {
    background: #fff;
    color: #475467;
}

.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.panel-head h1 {
    margin-bottom: 0;
}

.privacy-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 9px;
    border-radius: 999px;
    background: #f4f6f9;
    color: #667085;
    border: 1px solid var(--line);
    font-size: 11px;
    white-space: nowrap;
}

.transient-notice {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 18px 0 12px;
    padding: 12px 14px;
    border: 1px solid #cfe1d8;
    background: #f2f9f5;
    border-radius: 8px;
    color: #28634f;
}

.transient-notice span {
    font-size: 12px;
}

.tenant-create-form {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tenant-create-form>button {
    grid-column: 1/-1;
}

.tenant-table {
    min-width: 1100px;
}

.button-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 11px;
    border: 1px solid var(--line-strong);
    border-radius: 7px;
    text-decoration: none;
    font-weight: 600;
}

.button-link:hover {
    background: var(--soft);
}

.admin-tenant-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
}

.admin-tenant-head h1 {
    margin: 8px 0 8px;
}

.admin-tenant-stats {
    display: flex;
    gap: 10px;
}

.admin-tenant-stats>div {
    min-width: 130px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--soft-2);
}

.admin-tenant-stats span {
    display: block;
    color: var(--muted);
    font-size: 11px;
}

.admin-tenant-stats strong {
    display: block;
    margin-top: 2px;
    font-size: 18px;
}

.inline-reset-form {
    display: grid;
    grid-template-columns: minmax(220px, 420px) auto;
    align-items: end;
    gap: 10px;
}

.inline-reset-form button {
    margin: 0 !important;
}

@media (max-width: 900px) {
    .account-status-bar {
        padding: 8px 16px;
    }

    .trial-notice {
        align-items: flex-start;
        flex-direction: column;
    }

    .locked-meta {
        grid-template-columns: 1fr;
    }

    .capacity-card {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .capacity-copy {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }

    .capacity-track,
    .capacity-card small {
        grid-column: 1;
    }

    .tenant-create-form {
        grid-template-columns: 1fr;
    }

    .tenant-create-form>button {
        grid-column: 1;
    }

    .admin-tenant-head {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-tenant-stats {
        width: 100%;
    }

    .admin-tenant-stats>div {
        flex: 1;
        min-width: 0;
    }

    .inline-reset-form {
        grid-template-columns: 1fr;
    }

    .panel-head {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Admin usage dashboard */
.admin-dashboard-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px
}

.admin-dashboard-head h1 {
    margin: 0 0 6px;
    font-size: 26px
}

.admin-dashboard-head p {
    margin: 0;
    color: var(--muted)
}

.admin-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px
}

.admin-kpi {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 17px 18px;
    min-width: 0
}

.admin-kpi>span {
    display: block;
    color: var(--muted);
    font-size: 12px
}

.admin-kpi>strong {
    display: block;
    margin-top: 4px;
    font-size: 28px;
    line-height: 1.2;
    font-variant-numeric: tabular-nums
}

.admin-kpi>small {
    display: block;
    margin-top: 7px;
    color: var(--muted);
    font-size: 11px
}

.admin-kpi .kpi-date {
    font-size: 15px;
    line-height: 1.45;
    overflow-wrap: anywhere
}

.admin-usage-table {
    min-width: 1180px
}

.admin-usage-table td {
    vertical-align: middle
}

.admin-usage-table td strong {
    display: block;
    font-size: 14px
}

.admin-usage-table td small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px
}

.admin-usage-sub {
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px
}

.usage-mini {
    width: 120px;
    max-width: 100%;
    height: 5px;
    margin-top: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: #edf0f5
}

.usage-mini span {
    display: block;
    height: 100%;
    background: var(--primary);
    border-radius: inherit
}

.tenant-detail-kpis {
    margin-bottom: 18px
}

@media(max-width:1100px) {
    .admin-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media(max-width:700px) {
    .admin-dashboard-head {
        align-items: stretch;
        flex-direction: column
    }

    .admin-dashboard-head .button-link {
        width: 100%
    }

    .admin-kpi-grid {
        grid-template-columns: 1fr
    }

    .admin-kpi>strong {
        font-size: 24px
    }
}

/* Single-cast send progress overlay */
.send-processing-overlay[hidden] {
    display: none !important
}

.send-processing-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, .38);
    opacity: 0;
    transition: opacity .16s ease
}

.send-processing-overlay.is-visible {
    opacity: 1
}

.send-processing-card {
    width: min(440px, calc(100vw - 40px));
    background: #fff;
    border: 1px solid #e6e9f2;
    border-radius: 18px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .22);
    padding: 30px 28px;
    text-align: center
}

.send-processing-card strong {
    display: block;
    margin: 10px 0 8px;
    font-size: 22px;
    line-height: 1.4;
    color: #1f2937
}

.send-processing-card p {
    margin: 0;
    color: #596174;
    font-size: 14px;
    line-height: 1.75
}

.send-processing-spinner {
    width: 44px;
    height: 44px;
    margin: 0 auto;
    border: 4px solid #e8ebff;
    border-top-color: #5563e8;
    border-radius: 50%;
    animation: himebot-spin .8s linear infinite
}

.send-processing-warning {
    margin-top: 18px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #fff7e8;
    border: 1px solid #f4d9a2;
    color: #8a5b13;
    font-weight: 700;
    font-size: 13px;
    line-height: 1.6
}

@keyframes himebot-spin {
    to {
        transform: rotate(360deg)
    }
}

@media(max-width:640px) {
    .send-processing-overlay {
        padding: 16px
    }

    .send-processing-card {
        width: 100%;
        padding: 26px 20px;
        border-radius: 16px
    }

    .send-processing-card strong {
        font-size: 20px
    }
}

/* HIMEBOT — candidate exclusion condition */
.settings-section {
    display: grid;
    gap: 10px;
    max-width: 820px;
    padding: 2px 0 8px;
}

.settings-section+.settings-section {
    margin-top: 6px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

.settings-section h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
}

.candidate-exclude-label {
    display: grid;
    gap: 7px;
    font-weight: 600;
}

.candidate-exclude-row {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

.candidate-exclude-row input[type="number"] {
    width: 92px;
    min-width: 92px;
    background: var(--input-bg);
}

.candidate-exclude-row span {
    color: var(--text);
    font-weight: 600;
}

.settings-section .field-help strong {
    color: var(--text);
}

@media (max-width: 600px) {
    .candidate-exclude-row {
        align-items: flex-start;
    }

    .candidate-exclude-row span {
        flex: 1 1 190px;
        padding-top: 11px;
    }
}

/*追加*/

body>div.app-shell>div>main>section>form>div:nth-child(3)>label>div>input[type=number] {
    width: 80px;
}

/* =========================================================
   v28 — Readability color tuning
   Layout is intentionally unchanged.
   ========================================================= */
:root {
    --bg: #f5f7fb;
    --panel: #ffffff;
    --text: #182033;
    --muted: #5f6b7a;
    --line: #d9e0ea;
    --line-strong: #bcc7d6;
    --soft: #f3f6fa;
    --soft-2: #f8fafc;
    --input-bg: #ffffff;
    --input-border: #b8c4d3;
    --primary: #4056d6;
    --primary-hover: #3348c2;
    --primary-pressed: #293ca7;
    --primary-soft: #edf1ff;
    --primary-text: #3146b9;
    --focus-ring: rgba(64, 86, 214, .18);
    --row-hover: #f4f7ff;
    --dark: #182033;
    --red: #c23b4b;
    --red-hover: #a92f3f;
    --success: #17724f;
    --success-soft: #edf8f3;
}

/* Workspace contrast: keep existing layout, improve visual separation */
.app-shell,
.app-main,
main {
    background: var(--bg);
}

.desktop-sidebar,
.site-header,
.mobile-drawer,
.account-status-bar {
    background: #ffffff;
}

.panel,
.card,
.capacity-card,
.admin-kpi {
    background: #ffffff;
    border-color: var(--line);
    box-shadow: 0 1px 3px rgba(24, 32, 51, .05);
}

.panel h1,
.settings-section h2,
.card b,
.admin-kpi>strong,
.capacity-card>div:first-child strong {
    color: var(--text);
}

/* All form controls stay white */
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
textarea,
select,
.settings-form input[type="url"],
.candidate-exclude-row input[type="number"] {
    background: #ffffff !important;
    color: var(--text);
    border-color: var(--input-border);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):hover,
textarea:hover,
select:hover {
    background: #ffffff !important;
    border-color: #8fa0b5;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
textarea:focus,
select:focus {
    background: #ffffff !important;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

/* Default action buttons: blue and clearly actionable */
button {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
    box-shadow: 0 1px 2px rgba(33, 48, 120, .10);
}

button:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    color: #ffffff;
}

button:active {
    background: var(--primary-pressed);
    border-color: var(--primary-pressed);
}

/* Secondary / navigation actions remain neutral */
.secondary-link,
.button-link,
button.secondary {
    background: #ffffff;
    color: #3d4a5c;
    border-color: #bcc7d6;
    box-shadow: none;
}

.secondary-link:hover,
.button-link:hover,
button.secondary:hover {
    background: #f1f4f8;
    color: #202b3d;
    border-color: #95a3b7;
}

/* Stronger functional button colors */
.send,
.bulk-btn,
.bulk-send-button,
.save-settings-btn {
    background: #4056d6;
    border-color: #4056d6;
    color: #ffffff;
}

.send:hover,
.bulk-btn:hover,
.bulk-send-button:hover,
.save-settings-btn:hover {
    background: #3348c2;
    border-color: #3348c2;
    color: #ffffff;
}

.attendance-extract-btn {
    background: #0f766e;
    border-color: #0f766e;
    color: #ffffff;
}

.attendance-extract-btn:hover {
    background: #0b625c;
    border-color: #0b625c;
    color: #ffffff;
}

.danger {
    background: #ffffff;
    color: var(--red);
    border-color: #d9a7ae;
    box-shadow: none;
}

.danger:hover {
    background: #fff1f3;
    color: var(--red-hover);
    border-color: #c66f7b;
}

button:disabled,
button:disabled:hover,
select:disabled {
    background: #e8edf3 !important;
    color: #7a8594 !important;
    border-color: #d5dce5 !important;
    box-shadow: none;
}

/* Table readability */
.table-wrap {
    background: #ffffff;
    border-color: var(--line);
}

th {
    background: #eef2f7;
    color: #3e4a5b;
    border-bottom-color: #cfd7e2;
}

td {
    color: #243044;
}

tbody tr:hover {
    background: var(--row-hover);
}

/* Helpful notices/chips */
.field-help,
.bulk-warning,
.admin-tenant-stats>div,
.locked-meta>div {
    background: #f8fafc;
    border-color: #dce3ec;
}

.flash.info {
    background: #eef3ff;
    border-color: #cfd8fb;
    color: #344b9d;
}

.flash.success {
    background: #eef8f3;
    border-color: #c8e2d5;
    color: #176a4b;
}

.flash.error {
    background: #fff1f3;
    border-color: #efc8cf;
    color: #a33445;
}

/* Mobile: preserve structure, only keep the clearer palette */
@media (max-width: 900px) {
    main {
        background: var(--bg);
    }
}


/* v29 — Production environment application */
.production-apply-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    margin: 2px auto 20px;
    padding: 0 26px;

    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 10px;

    background: linear-gradient(135deg,
        #304ffe 0%,
        #536dfe 35%,
        #7c4dff 70%,
        #4f46e5 100%);

    color: #fff;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: .02em;

    box-shadow:
        0 8px 20px rgba(79, 70, 229, .28),
        inset 0 1px 0 rgba(255, 255, 255, .25);

    position: relative;
    overflow: hidden;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        filter .2s ease;
}

.production-apply-button::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 70%;
    height: 100%;

    background: linear-gradient(120deg,
        transparent 0%,
        rgba(255, 255, 255, .35) 50%,
        transparent 100%);

    transform: skewX(-20deg);
    transition: left .55s ease;
}

.production-apply-button:hover {
    transform: translateY(-2px);
    box-shadow:
        0 12px 28px rgba(79, 70, 229, .38),
        inset 0 1px 0 rgba(255, 255, 255, .3);
    filter: brightness(1.05);
}

.production-apply-button:hover::before {
    left: 140%;
}

.production-apply-button:active {
    transform: translateY(0);
    box-shadow:
        0 5px 14px rgba(79, 70, 229, .25),
        inset 0 1px 0 rgba(255, 255, 255, .2);
}

.production-apply-button:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    color: #fff;
}

.application-pending-note {
    max-width: 620px;
    margin: 0 auto 14px;
    padding: 12px 14px;
    border: 1px solid #cfd8fb;
    border-radius: 9px;
    background: #eef3ff;
    text-align: left;
}

.application-pending-note strong,
.application-pending-note span {
    display: block;
}

.application-pending-note strong {
    color: #344b9d;
}

.application-pending-note span {
    margin-top: 3px;
    color: #5c6b8e;
    font-size: 12px;
}

.application-panel {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.application-head {
    margin-bottom: 18px;
}

.application-head h1 {
    margin-top: 14px;
    margin-bottom: 6px;
}

.application-head p {
    margin: 0;
}

.application-form {
    display: grid;
    gap: 18px;
}

.application-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.application-summary>div {
    padding: 13px 14px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #f8fafc;
}

.application-summary span {
    display: block;
    color: var(--muted);
    font-size: 11px;
}

.application-summary strong {
    display: block;
    margin-top: 3px;
    overflow-wrap: anywhere;
}

.application-grid {
    align-items: end;
}

.required-mark {
    display: inline-block;
    width: fit-content;
    margin-left: 6px;
    padding: 1px 5px;
    border-radius: 4px;
    background: #fff1f3;
    color: #a33445;
    font-size: 10px;
    font-weight: 700;
    vertical-align: middle;
}

.application-note {
    display: grid;
    gap: 6px;
}

.application-agree {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 9px;
    font-weight: 500;
}

.application-agree input {
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: var(--primary);
    flex: 0 0 auto;
}

.application-submit {
    width: 100%;
    min-height: 46px;
    font-size: 14px;
}

.application-current {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.application-current strong,
.application-current span {
    display: block;
}

.application-current span {
    margin-top: 3px;
    font-size: 12px;
}

.application-admin-table {
    min-width: 1320px;
}

.application-admin-table td {
    vertical-align: top;
}

.application-admin-table td strong,
.application-admin-table td small {
    display: block;
}

.application-admin-table td small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px;
}

.application-note-cell {
    min-width: 240px;
    max-width: 360px;
    white-space: normal;
    line-height: 1.6;
}

.application-admin-actions {
    display: flex;
    gap: 7px;
    align-items: center;
}

.application-admin-actions form {
    margin: 0;
}

.application-admin-actions button {
    height: 36px;
    font-size: 12px;
}

@media (max-width: 900px) {
    .locked-panel {
        padding: 28px 16px;
    }

    .production-apply-button {
        width: 100%;
    }

    .application-summary {
        grid-template-columns: 1fr;
    }

    .application-panel {
        max-width: none;
    }

    .application-form {
        gap: 15px;
    }
}




.cast-register-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
    margin-bottom: 20px;
}

.cast-register-grid>.panel {
    margin-bottom: 0;
}

@media (max-width: 900px) {
    .cast-register-grid {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-bottom: 14px;
    }
}

/* =========================================================
   HIMEBOT Product Tour
   ========================================================= */
.himebot-tour-open {
    overflow: hidden;
}

.himebot-tour-overlay {
    position: fixed;
    inset: 0;
    z-index: 9990;
    background: rgba(15, 23, 42, .34);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.himebot-tour-target {
    position: relative !important;
    z-index: 9992 !important;
}

.himebot-tour-interactive {
    pointer-events: auto !important;
}

.himebot-tour-highlight {
    position: fixed;
    z-index: 9993;
    pointer-events: none;
    border: 3px solid var(--primary);
    border-radius: 12px;
    background: transparent;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .98), 0 6px 24px rgba(29, 50, 120, .22);
    transition: top .2s ease, left .2s ease, width .2s ease, height .2s ease;
}

.himebot-tour-callout {
    position: fixed;
    z-index: 9994;
    visibility: hidden;
    padding: 8px 12px;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 8px 22px rgba(33, 48, 120, .28);
    animation: himebotTourCalloutPulse 1.25s ease-in-out infinite;
}

.himebot-tour-callout::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -7px;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 8px solid var(--primary);
    transform: translateY(-50%);
}

.himebot-tour-callout.is-below::before {
    top: -7px;
    left: 18px;
    border-top: 0;
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
    border-bottom: 8px solid var(--primary);
    transform: none;
}

@keyframes himebotTourCalloutPulse {

    0%,
    100% {
        transform: translateY(0);
        box-shadow: 0 8px 22px rgba(33, 48, 120, .28);
    }

    50% {
        transform: translateY(-2px);
        box-shadow: 0 10px 28px rgba(33, 48, 120, .42);
    }
}

.himebot-tour-popover {
    position: fixed;
    z-index: 9995;
    width: min(390px, calc(100vw - 32px));
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 22px 70px rgba(4, 13, 35, .30);
    color: #172033;
}

.himebot-tour-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 9px;
}

.himebot-tour-step,
.himebot-tour-welcome-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 24px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary-text);
    font-size: 12px;
    font-weight: 800;
}

.himebot-tour-close {
    width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #f1f4f8;
    color: #46546b;
    font-size: 22px;
    line-height: 1;
    box-shadow: none;
}

.himebot-tour-title {
    display: block;
    margin: 0 0 8px;
    color: #172033;
    font-size: 18px;
    line-height: 1.45;
}

.himebot-tour-text {
    margin: 0;
    color: #556276;
    font-size: 13px;
    line-height: 1.8;
}

.himebot-tour-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 16px;
}

.himebot-tour-actions>div {
    display: flex;
    gap: 8px;
}

.himebot-tour-actions button,
.himebot-tour-done,
.himebot-tour-welcome-actions button {
    min-height: 40px;
    border-radius: 9px;
    padding: 0 16px;
    font-size: 13px;
    font-weight: 800;
}

.himebot-tour-skip,
.himebot-tour-back,
.himebot-tour-welcome-skip {
    border: 1px solid #d8dee9;
    background: #fff;
    color: #59667a;
}

.himebot-tour-next,
.himebot-tour-welcome-start {
    border: 1px solid var(--primary);
    background: var(--primary);
    color: #fff;
}

.himebot-tour-complete {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.himebot-tour-complete-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 13px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 28px;
    font-weight: 900;
}

.himebot-tour-done {
    width: 100%;
    margin-top: 16px;
}

.himebot-tour-welcome-wrap {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(15, 23, 42, .42);
}

.himebot-tour-welcome {
    width: min(460px, 100%);
    padding: 24px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .32);
    text-align: left;
}

.himebot-tour-welcome-badge {
    margin-bottom: 12px;
}

.himebot-tour-welcome>strong {
    display: block;
    color: #172033;
    font-size: 20px;
    line-height: 1.5;
}

.himebot-tour-welcome>p {
    margin: 10px 0 0;
    color: #5b687b;
    font-size: 13px;
    line-height: 1.8;
}

.himebot-tour-welcome-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 20px;
}

.nav-link[data-tour-start="1"] .nav-icon {
    opacity: 1;
}

@media (max-width: 700px) {
    .himebot-tour-open {
        overflow: auto;
    }

    .himebot-tour-popover {
        width: auto;
        max-height: min(46vh, 360px);
        overflow-y: auto;
        padding: 16px;
        border-radius: 13px;
    }

    .himebot-tour-title {
        font-size: 16px;
    }

    .himebot-tour-text {
        font-size: 12.5px;
        line-height: 1.7;
    }

    .himebot-tour-actions {
        align-items: stretch;
    }

    .himebot-tour-actions>div {
        flex: 1;
        justify-content: flex-end;
    }

    .himebot-tour-next {
        min-width: 92px;
    }

    .himebot-tour-welcome {
        padding: 20px 17px;
    }

    .himebot-tour-welcome-actions {
        flex-direction: column-reverse;
    }

    .himebot-tour-welcome-actions button {
        width: 100%;
    }
}



.sidebar-brand {
    min-height: 82px;
    padding: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--line);
}

.sidebar-logo {
    display: block;
    width: auto;
    max-width: 170px;
    max-height: 46px;
    object-fit: contain;
}


.mobile-logo {
    display: block;
    width: auto;
    max-width: 150px;
    max-height: 38px;
    object-fit: contain;
}

.drawer-logo {
    display: block;
    width: auto;
    max-width: 150px;
    max-height: 36px;
    object-fit: contain;
}

/* Account summary: sidebar/drawer bottom */
.logged-in-account {
    margin-top: auto;
    padding: 14px 16px 16px;
    border-top: 1px solid var(--line);
    color: #596273;
}

.logged-in-account-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.logged-in-account-head strong,
.logged-in-account>strong {
    display: block;
    width: 100%;
    color: #202636;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.logged-in-account-meta {
    display: grid;
    gap: 3px;
    margin-top: 8px;
}

.logged-in-account-meta span,
.logged-in-account-label {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
}

.logged-in-account .status-pill {
    min-height: 23px;
    padding: 2px 8px;
    font-size: 12px;
}

@media (max-width: 900px) {
    .mobile-drawer {
        display: flex;
        flex-direction: column;
    }

    .drawer-nav {
        flex: 0 0 auto;
    }

    .mobile-drawer .logged-in-account {
        margin-top: auto;
        padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    }
}

/* HIMEBOT service switch / Okini Talk */
.service-switch {
    padding: 0 14px 14px
}

.service-switch label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #7c879d;
    margin-bottom: 6px;
    margin-top: 6px;
}

.service-switch select {
    width: 100%;
    min-height: 44px;
    border: 1px solid #dfe5ef;
    border-radius: 10px;
    background: #fff;
    padding: 0 12px;
    font-weight: 700;
    color: #172033
}

.service-usage-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px
}

.service-usage-card {
    margin: 0
}

.service-check {
    display: flex !important;
    align-items: center;
    gap: 8px
}

.service-check input {
    width: auto !important
}

.badge {
    display: inline-flex;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    background: #eef2f7
}

.badge.ok,
.badge.on {
    background: #e9f8ef;
    color: #168347
}

.badge.off {
    background: #f1f3f6;
    color: #6b7280
}

.bulk-row,
.row-actions,
.back-row,
.filter-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap
}

.stack,
.control-stack {
    display: grid;
    gap: 12px
}

.action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px
}

.action-card {
    border: 1px solid #e4e8ef;
    border-radius: 12px;
    padding: 16px;
    display: grid;
    gap: 10px
}

.notice {
    padding: 14px 16px;
    border: 1px solid #dfe5ef;
    border-radius: 12px;
    background: #f8fafc;
    margin-bottom: 16px
}

.notice b,
.notice span {
    display: block
}

.muted {
    color: #6b7280
}

.success-btn {
    background: #168347;
    color: #fff;
    border: 0
}

.service-usage-card .admin-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
}

@media(max-width:800px) {

    .service-usage-grid,
    .action-grid {
        grid-template-columns: 1fr
    }

    .service-switch {
        padding: 10px 16px
    }

    .service-usage-card .admin-kpi-grid {
        grid-template-columns: 1fr 1fr
    }
}

/* 2026-09-28 — Okini Talk layout cleanup / cast bulk status */
.okini-controls {
    display: grid;
    gap: 14px;
    margin: 16px 0 18px;
}

.okini-attendance-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #f8fafc;
}

.okini-attendance-action {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.okini-attendance-form {
    margin: 0;
}

.okini-attendance-button {
    min-height: 44px;
    padding-inline: 20px;
    white-space: nowrap;
}

.okini-attendance-help {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
    text-align: right;
}

.okini-filter-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(260px, 0.8fr) auto;
    gap: 16px 18px;
    align-items: end;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
}

.okini-filter-main,
.okini-filter-bottom {
    display: contents;
}

.okini-filter-search,
.okini-filter-sort {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.okini-filter-search>span,
.okini-filter-sort>span {
    color: #344054;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
}

.okini-filter-search input,
.okini-filter-sort select {
    min-height: 46px;
    margin: 0;
}

.okini-filter-bottom {
    display: contents;
}

.okini-filter-buttons {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    flex: 0 0 auto;
    white-space: nowrap;
}

.okini-filter-buttons .btn,
.okini-filter-buttons button {
    min-width: 96px;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: 18px;
}

.okini-bulk-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 16px;
    border: 1px solid #cfe5d8;
    border-radius: 12px;
    background: #f4fbf7;
}

.okini-bulk-check-all {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 9px;
    min-width: 0;
    color: #24324a;
    font-weight: 700;
}

.okini-bulk-check-all input {
    width: 19px;
    height: 19px;
    margin: 0;
    flex: 0 0 auto;
}

.okini-bulk-check-all small {
    margin-left: 4px;
    color: #667085;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.okini-bulk-send-button {
    min-height: 44px;
    padding-inline: 20px;
    white-space: nowrap;
}

.cast-bulk-status-form {
    margin: -2px 0 14px;
}

.cast-bulk-status-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #f8fafc;
}

.cast-bulk-check-all {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    color: #344054;
    font-weight: 700;
    white-space: nowrap;
}

.cast-bulk-check-all input,
.cast-admin-check {
    width: 19px;
    height: 19px;
    margin: 0;
}

.cast-bulk-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cast-bulk-actions button {
    min-height: 40px;
    padding-inline: 16px;
}


.cast-bulk-on {
    background: #168347;
    color: #fff;
}

.cast-bulk-on:hover {
    background: #116d3a;

}

.cast-bulk-off {
    background: #fff;
    color: #475467;
    border: 1px solid #d7dce3;
}

.cast-bulk-off:hover {
    background: #f4f6f8;
        color: #475467;
}

.cast-bulk-delete {
    background: #b42318;
    color: #fff;
    border: 1px solid #b42318;
}

.cast-bulk-delete:hover {
    background: #912018;
    border-color: #912018;
}

#cast-admin-selected-count,
#okini-selected-count {
    color: var(--primary-text);
    font-weight: 800;
}

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@media (max-width: 900px) {

    .okini-attendance-bar,
    .okini-bulk-bar,
    .cast-bulk-status-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .okini-filter-panel {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .okini-filter-main {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(180px, 240px);
        gap: 12px;
        align-items: end;
    }

    .okini-filter-bottom {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding-top: 14px;
        border-top: 1px solid #edf1f6;
    }

    .okini-attendance-action,
    .okini-filter-buttons,
    .cast-bulk-actions {
        width: 100%;
    }

    .okini-attendance-action>*,
    .okini-filter-buttons>*,
    .cast-bulk-actions>* {
        flex: 1 1 0;
    }

    .okini-attendance-action form,
    .okini-attendance-action form button,
    .okini-bulk-send-button {
        width: 100%;
    }

    .okini-attendance-help {
        text-align: left;
    }
}

@media (max-width: 640px) {
    .okini-filter-main {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .okini-filter-panel,
    .okini-attendance-bar,
    .okini-bulk-bar {
        padding: 12px;
    }

    .okini-filter-buttons,
    .cast-bulk-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .cast-bulk-delete {
        grid-column: 1 / -1;
    }

    .okini-bulk-check-all {
        width: 100%;
        flex-wrap: wrap;
    }

    .okini-bulk-check-all small {
        width: 100%;
        margin-left: 28px;
    }

    .cast-bulk-check-all {
        width: 100%;
    }
}

/* Okini Talk: enable today's attending casts from cast list */
.cast-today-enable-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 12px;
    padding: 14px 16px;
    border: 1px solid #d8e1f3;
    border-radius: 12px;
    background: #f7f9ff;
}

.cast-today-enable-form {
    margin: 0;
    flex: 0 0 auto;
}

.cast-today-enable-button {
    min-height: 42px;
    padding: 0 18px;
    border: 0;
    border-radius: 9px;
    background: var(--primary);
    color: #fff;
    font-weight: 800;
    white-space: nowrap;
}

.cast-today-enable-button:hover:not(:disabled) {
    filter: brightness(.96);
}

.cast-today-enable-button:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.cast-today-enable-help {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    color: #667085;
    font-size: 13px;
    text-align: right;
}

.cast-today-enable-help small {
    color: #8a94a6;
    font-size: 12px;
}

@media (max-width: 900px) {
    .cast-today-enable-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .cast-today-enable-form,
    .cast-today-enable-button {
        width: 100%;
    }

    .cast-today-enable-help {
        align-items: flex-start;
        text-align: left;
    }
}

/* Cast list: 7-column layout after bulk selection checkbox was added */
.admin-cast-table {
    width: 100%;
    min-width: 1080px;
    table-layout: fixed;
}

.admin-cast-table th:nth-child(1),
.admin-cast-table td:nth-child(1) {
    width: 44px;
}

.admin-cast-table th:nth-child(2),
.admin-cast-table td:nth-child(2) {
    width: 160px;
}

.admin-cast-table th:nth-child(3),
.admin-cast-table td:nth-child(3) {
    width: 105px;
}

.admin-cast-table th:nth-child(4),
.admin-cast-table td:nth-child(4) {
    width: 72px;
}

.admin-cast-table th:nth-child(5),
.admin-cast-table td:nth-child(5) {
    width: 340px;
}

.admin-cast-table th:nth-child(6),
.admin-cast-table td:nth-child(6) {
    width: 150px;
}

.admin-cast-table th:nth-child(7),
.admin-cast-table td:nth-child(7) {
    width: 190px;
}

.admin-cast-table .memo-edit-form {
    grid-template-columns: minmax(120px, 1fr) 58px;
    width: 100%;
}

.admin-cast-table .memo-edit-form button {
    width: 58px;
    min-width: 58px;
}

.admin-cast-table td.actions.admin-actions {
    overflow: visible;
    text-overflow: clip;
}

.admin-cast-table .admin-actions form {
    width: auto;
    margin-right: 6px;
}

.admin-cast-table .admin-actions form:last-child {
    margin-right: 0;
}

.admin-cast-table .admin-actions button {
    width: 82px;
    min-width: 82px;
    padding-inline: 8px;
}

@media (max-width: 900px) {
    .admin-cast-table {
        width: 1080px;
        min-width: 1080px;
    }

    .admin-cast-table th:nth-child(1),
    .admin-cast-table td:nth-child(1) {
        width: 44px;
    }

    .admin-cast-table th:nth-child(2),
    .admin-cast-table td:nth-child(2) {
        width: 160px;
    }

    .admin-cast-table th:nth-child(3),
    .admin-cast-table td:nth-child(3) {
        width: 105px;
    }

    .admin-cast-table th:nth-child(4),
    .admin-cast-table td:nth-child(4) {
        width: 72px;
    }

    .admin-cast-table th:nth-child(5),
    .admin-cast-table td:nth-child(5) {
        width: 340px;
    }

    .admin-cast-table th:nth-child(6),
    .admin-cast-table td:nth-child(6) {
        width: 150px;
    }

    .admin-cast-table th:nth-child(7),
    .admin-cast-table td:nth-child(7) {
        width: 190px;
    }
}

/* 2026-09-28 — Okini Talk HOME dashboard */
.hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 190px;
    margin-bottom: 18px;
    padding: 28px 30px;
    border: 1px solid #dce3f7;
    border-radius: 18px;
    background:
        radial-gradient(circle at 92% 16%, rgba(255, 255, 255, .85) 0 0, rgba(255, 255, 255, 0) 30%),
        linear-gradient(135deg, #f5f7ff 0%, #edf1ff 52%, #f8faff 100%);
    box-shadow: 0 10px 30px rgba(43, 57, 122, .06);
}

.hero::after {
    content: "";
    position: absolute;
    right: -60px;
    bottom: -110px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: rgba(75, 92, 219, .07);
    pointer-events: none;
}

.hero>div {
    position: relative;
    z-index: 1;
    max-width: 760px;
}

.hero .eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    margin-bottom: 10px;
    padding: 0 11px;
    border: 1px solid #d2daf8;
    border-radius: 999px;
    background: rgba(255, 255, 255, .82);
    color: var(--primary-text);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .11em;
}

.hero h1 {
    margin: 0 0 10px;
    color: #1d2741;
    font-size: clamp(26px, 2.3vw, 34px);
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: -.02em;
}

.hero p {
    max-width: 680px;
    margin: 0;
    color: #5f6b80;
    font-size: 14px;
    line-height: 1.8;
}

.stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 0 0 20px;
}

.stats>div {
    position: relative;
    overflow: hidden;
    display: flex;
    min-height: 118px;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    padding: 20px 22px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(32, 38, 54, .035);
}

.stats>div::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, #6372e7 0%, #4b5cdb 100%);
}

.stats>div:nth-child(2)::before {
    background: linear-gradient(180deg, #7d86eb 0%, #5c69d9 100%);
}

.stats>div:nth-child(3)::before {
    background: linear-gradient(180deg, #46a67d 0%, #216b52 100%);
}

.stats span {
    color: #6a7487;
    font-size: 12px;
    font-weight: 700;
}

.stats b {
    color: #202a43;
    font-size: clamp(26px, 2.5vw, 34px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.02em;
}

.stats+.panel {
    padding: 0;
    overflow: hidden;
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(32, 38, 54, .035);
}

.stats+.panel>h1 {
    margin: 0;
    padding: 19px 22px;
    border-bottom: 1px solid var(--line);
    background: #fff;
    color: #202636;
    font-size: 18px;
    font-weight: 800;
}

.stats+.panel .table-wrap {
    margin: 0;
    border: 0;
    border-radius: 0;
}

.stats+.panel table {
    margin: 0;
}

.stats+.panel thead th {
    background: #f6f8fc;
    color: #596579;
    font-size: 12px;
    font-weight: 800;
}

.stats+.panel tbody td {
    height: 50px;
}

@media (max-width: 900px) {
    .hero {
        min-height: auto;
        padding: 24px;
        border-radius: 15px;
    }

    .stats {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .stats>div {
        min-height: 108px;
        padding: 18px;
    }
}

@media (max-width: 640px) {
    .hero {
        margin-bottom: 14px;
        padding: 20px 18px;
        border-radius: 13px;
    }

    .hero h1 {
        font-size: 25px;
    }

    .hero p {
        font-size: 13px;
    }

    .stats {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-bottom: 14px;
    }

    .stats>div {
        min-height: 92px;
        padding: 16px 18px;
    }

    .stats b {
        font-size: 28px;
    }

    .stats+.panel>h1 {
        padding: 16px 18px;
        font-size: 17px;
    }
}

/* 2026-09: plan management and durable-job UI; original navigation/theme retained. */
[hidden] {
    display: none !important
}

.admin-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: start
}

.admin-form-grid>label,
.admin-filter>label {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
    font-size: 14px;
    font-weight: 650
}

.admin-form-grid input:not([type=checkbox]),
.admin-form-grid select,
.admin-form-grid textarea,
.admin-filter input,
.admin-filter select {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 44px
}

.field-full {
    grid-column: 1/-1;
    min-width: 0
}

.plan-editor {
    margin: 6px 0 10px;
    padding: 20px;
    border: 1px solid #dce4f5;
    border-radius: 12px;
    background: #f8faff
}

.enterprise-fields {
    margin-top: 18px
}

.plan-quote {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 18px;
    padding: 18px;
    background: #fff;
    border: 1px solid #dce4f5;
    border-radius: 9px
}

.plan-quote strong {
    font-size: 23px;
    line-height: 1.4;
    color: #263c7b
}

.plan-quote small {
    color: #5e6c86;
    line-height: 1.7
}

.confirm-line {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start;
    gap: 9px;
    margin: 12px 0 18px;
    line-height: 1.65;
    font-weight: 500 !important
}

.confirm-line input[type=checkbox] {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin-top: 4px
}

.admin-filter {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    margin: 18px 0 24px
}

.admin-filter>label:first-of-type {
    flex: 2 1 220px
}

.admin-filter>label {
    flex: 1 1 145px
}

.admin-filter>button {
    min-height: 44px
}

.admin-contract-table td {
    vertical-align: middle
}

.admin-contract-table small,
.admin-contract-table .review-badge {
    display: block;
    margin-top: 5px
}

.review-badge {
    font-size: 12px;
    font-weight: 650;
    color: #925018
}

.create-account>summary {
    cursor: pointer;
    font-size: 17px;
    font-weight: 700;
    padding: 8px 0
}

.create-account[open]>summary {
    margin-bottom: 20px
}

.usage-main {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    margin: 14px 0
}

.usage-main strong {
    font-size: 36px;
    line-height: 1.2;
    color: #273866
}

.usage-main>span {
    color: #606b80
}

.usage-card progress {
    display: block;
    width: 100%;
    height: 10px;
    margin: 15px 0;
    accent-color: #465eca
}

.usage-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px
}

.usage-grid>div {
    display: flex;
    flex-direction: column;
    gap: 5px
}

.usage-grid span {
    font-size: 13px;
    color: #606b80
}

.usage-grid b {
    font-size: 19px
}

.service-usage-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch
}

.worker-health.is-warning {
    border-left: 4px solid #d69b37
}

.worker-health.is-ok {
    border-left: 4px solid #47977b
}

.worker-health .panel-head {
    flex-wrap: wrap;
    gap: 10px
}

.unknown-card {
    padding: 16px 0;
    border-top: 1px solid #dfe5ee
}

.unknown-card summary {
    cursor: pointer;
    line-height: 1.7;
    font-weight: 650
}

.unknown-card form {
    margin-top: 16px
}

.application-review .row-actions {
    margin-top: 18px;
    flex-wrap: wrap
}

.application-note {
    overflow-wrap: anywhere
}

.upgrade-shell {
    max-width: 780px;
    padding: 36px 18px;
    margin: auto
}

.upgrade-logo {
    display: block;
    width: 180px;
    max-width: 70%;
    height: auto;
    margin-bottom: 22px
}

.upgrade-shell p {
    line-height: 1.8
}

.upgrade-shell .stack {
    display: flex;
    flex-direction: column;
    gap: 14px
}

.panel,
.app-main,
.panel>form,
.table-wrap {
    min-width: 0
}

.panel pre {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-width: 100%
}

.job-connection-warning {
    color: #94521c
}

.logged-in-account-meta a {
    font-size: 12px;
    text-decoration: underline
}

.daily-send-capacity-card {
    margin-bottom: 18px
}

@media(max-width:800px) {
    .service-usage-grid {
        grid-template-columns: 1fr
    }

    .admin-form-grid {
        grid-template-columns: 1fr
    }

    .field-full {
        grid-column: auto
    }

    .plan-editor {
        padding: 15px
    }

    .plan-quote {
        padding: 14px
    }

    .plan-quote strong {
        font-size: 21px
    }

    .admin-filter>label {
        flex-basis: calc(50% - 12px)
    }

    .admin-filter>label:first-of-type {
        flex-basis: 100%
    }

    .admin-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .usage-main strong {
        font-size: 31px
    }
}

@media(max-width:420px) {
    .admin-filter>label {
        flex-basis: 100%
    }

    .panel-head {
        flex-wrap: wrap
    }

    .usage-grid b {
        font-size: 18px
    }

    .plan-quote strong {
        font-size: 20px
    }

    .upgrade-shell {
        padding: 16px 12px
    }
}

/* HOME visual parity: MITENE / OKINI TALK */
.home-contract-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
    display: none;
}

.home-contract-meta>span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 10px;
    border: 1px solid rgba(74, 96, 220, .14);
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
    color: #546176;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
}

.home-contract-meta .home-contract-trial {
    border-color: rgba(213, 146, 34, .22);
    background: rgba(255, 248, 230, .9);
    color: #9a6511;
}

.stats .home-plan-name {
    font-size: clamp(20px, 2vw, 28px);
    letter-spacing: -.02em;
    word-break: keep-all;
}

@media (max-width: 640px) {
    .home-contract-meta {
        gap: 6px;
        margin-top: 14px;
    }

    .home-contract-meta>span {
        min-height: 28px;
        padding: 4px 9px;
        font-size: 11px;
    }
}

/* Notices */
.notice-index-panel {
    padding: 0;
    overflow: hidden
}

.notice-index-panel .page-heading {
    padding: 28px 30px 20px;
    border-bottom: 1px solid #e6ebf2
}

.notice-index-panel .page-heading h1 {
    margin: 6px 0 8px
}

.notice-index-panel .page-heading p {
    margin: 0;
    color: #647188
}

.notice-list {
    display: flex;
    flex-direction: column
}

.notice-list-item {
    display: grid;
    grid-template-columns: 145px minmax(0, 1fr) 24px;
    gap: 18px;
    align-items: center;
    padding: 20px 28px;
    border-bottom: 1px solid #edf1f6;
    color: #1b2438;
    text-decoration: none;
    transition: .18s ease
}

.notice-list-item:last-child {
    border-bottom: 0
}

.notice-list-item:hover {
    background: #f7f9ff
}

.notice-list-item time {
    color: #7b879b;
    font-size: 13px;
    font-weight: 700
}

.notice-list-item span {
    font-weight: 700;
    line-height: 1.55
}

.notice-list-item b {
    font-size: 24px;
    color: #8792a6;
    text-align: right
}

.empty-state {
    padding: 40px 28px;
    text-align: center;
    color: #7a879a
}

.notice-detail {
    max-width: 980px;
    margin-inline: auto;
    padding: 30px 36px
}

.notice-back {
    display: inline-flex;
    margin-bottom: 22px
}

.notice-detail header {
    padding-bottom: 24px;
    border-bottom: 1px solid #e7ebf2
}

.notice-detail header time {
    display: block;
    color: #748096;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 10px
}

.notice-detail header h1 {
    margin: 0;
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.35
}

.notice-rich-body {
    padding: 28px 0 8px;
    color: #263147;
    font-size: 15px;
    line-height: 1.9
}

.notice-rich-body h2 {
    margin: 30px 0 12px;
    font-size: 22px
}

.notice-rich-body h3 {
    margin: 26px 0 10px;
    font-size: 18px
}

.notice-rich-body p {
    margin: 0 0 16px
}

.notice-rich-body ul,
.notice-rich-body ol {
    margin: 0 0 18px;
    padding-left: 1.6em
}

.notice-rich-body blockquote {
    margin: 20px 0;
    padding: 14px 18px;
    border-left: 4px solid #5367e8;
    background: #f7f8ff;
    color: #4a5670;
    border-radius: 0 10px 10px 0
}

.notice-rich-body a {
    color: #3f57d9;
    text-decoration: underline
}

.admin-notice-editor .panel-head {
    align-items: flex-start
}

.notice-editor-field {
    display: block
}

.field-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
    color: #303a50
}

.rich-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px;
    border: 1px solid #d8dfeb;
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
    background: #f6f8fb
}

.rich-toolbar button {
    min-height: 34px;
    padding: 6px 10px;
    border: 1px solid #d6ddea;
    border-radius: 7px;
    background: #fff;
    color: #2f3a51;
    box-shadow: none;
    font-size: 13px
}

.rich-toolbar button:hover {
    background: #eef2ff;
    border-color: #bfc9f5
}

.rich-editor {
    min-height: 260px;
    padding: 16px 18px;
    border: 1px solid #d8dfeb;
    border-radius: 0 0 10px 10px;
    background: #fff;
    outline: none;
    line-height: 1.8;
    overflow: auto
}

.rich-editor:focus {
    border-color: #7385eb;
    box-shadow: 0 0 0 3px rgba(83, 103, 232, .12)
}

.rich-editor h2 {
    font-size: 22px;
    margin: 24px 0 10px
}

.rich-editor p {
    margin: 0 0 14px
}

.badge.notice-published {
    background: #e8f7ef;
    color: #238051
}

.badge.notice-scheduled {
    background: #fff6dc;
    color: #96680d
}

@media(max-width:640px) {
    .notice-index-panel .page-heading {
        padding: 22px 18px 16px
    }

    .notice-list-item {
        grid-template-columns: 1fr 20px;
        gap: 6px 12px;
        padding: 16px 18px
    }

    .notice-list-item time {
        grid-column: 1;
        font-size: 12px
    }

    .notice-list-item span {
        grid-column: 1
    }

    .notice-list-item b {
        grid-column: 2;
        grid-row: 1/3;
        align-self: center
    }

    .notice-detail {
        padding: 22px 18px
    }

    .rich-toolbar {
        gap: 5px
    }

    .rich-toolbar button {
        padding: 6px 8px
    }

    .rich-editor {
        min-height: 220px;
        padding: 14px
    }
}


.logo-home-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.logo-home-link:focus-visible {
    outline: 3px solid rgba(37, 99, 235, .28);
    outline-offset: 4px;
    border-radius: 8px;
}

/* 2026-09-29 — Mitene / Okini send page layout unification */
.okini-send-toolbar .okini-search-form,
.okini-send-toolbar .okini-sort-form {
    width: 100%;
    min-width: 0;
    margin: 0;
}

.okini-send-toolbar .okini-search-form input,
.okini-send-toolbar .okini-sort-form select {
    width: 100%;
    margin: 0;
}

.okini-send-help {
    margin: 0 0 14px;
}

.okini-send-table {
    min-width: 1040px;
}

.okini-send-table th:nth-child(1),
.okini-send-table td:nth-child(1) {
    width: 52px;
    text-align: center;
}

.okini-send-table th:nth-child(2),
.okini-send-table td:nth-child(2) {
    width: 22%;
}

.okini-send-table th:nth-child(3),
.okini-send-table td:nth-child(3) {
    width: 13%;
}

.okini-send-table th:nth-child(4),
.okini-send-table td:nth-child(4) {
    width: 14%;
}

.okini-send-table th:nth-child(5),
.okini-send-table td:nth-child(5) {
    width: 14%;
}

.okini-send-table th:nth-child(6),
.okini-send-table td:nth-child(6) {
    width: 17%;
}

.okini-send-table th:nth-child(7),
.okini-send-table td:nth-child(7) {
    width: 140px;
}

.okini-send-table td:last-child .btn {
    min-width: 96px;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 900px) {

    .okini-send-toolbar .okini-search-form,
    .okini-send-toolbar .okini-sort-form {
        grid-column: 1 / -1;
    }
}




/*追加*/


#okini-recipient-filter{
    width: 200px !important;
}

input[name="candidate_exclude_sent_days"]{
     width: 80px !important;
}


.back-row a.text-link{
    margin-bottom: 10px;
}

.template-title span,.template-title{
    display: none;
}


/* input 全体のベーススタイル */
input[name="template_image"] {

  padding: 6px 11px !important;
}

/* 2026-10-01 — 店舗向け送信履歴をシンプルに表示 */
.history-page .panel-head {
    align-items: flex-start;
    margin-bottom: 16px;
}

.history-page .panel-head h1,
.history-page .panel-head p {
    margin-top: 0;
}

.history-table table,
.history-recipient-table table {
    width: 100%;
}

.history-table th,
.history-table td,
.history-recipient-table th,
.history-recipient-table td {
    vertical-align: middle;
}

.history-detail-btn {
    white-space: nowrap;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.history-status-copy {
    margin: 6px 0 0;
    color: var(--muted);
    line-height: 1.7;
}

.simple-history-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 18px;
}

.simple-history-grid > div {
    min-height: 88px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

.simple-history-grid span {
    color: var(--muted);
    font-size: 12px;
}

.simple-history-grid b {
    font-size: 18px;
    overflow-wrap: anywhere;
}

.history-count {
    font-size: 22px;
    line-height: 1;
    white-space: nowrap;
}

.history-empty-note {
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--soft-2);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.history-empty-note strong {
    font-size: 16px;
}

.history-empty-note span {
    color: var(--muted);
}

.history-simple-warning {
    margin-top: 16px;
    padding: 12px 14px;
    border-radius: var(--radius);
    background: var(--soft);
    color: var(--text);
    line-height: 1.7;
}

.simple-send-notice b {
    min-width: 100px;
}

@media (max-width: 720px) {
    .simple-history-grid {
        grid-template-columns: 1fr;
    }

    .simple-history-grid > div {
        min-height: 70px;
    }

    .history-table,
    .history-recipient-table {
        overflow: visible;
    }

    .history-table table,
    .history-table tbody,
    .history-table tr,
    .history-table td,
    .history-recipient-table table,
    .history-recipient-table tbody,
    .history-recipient-table tr,
    .history-recipient-table td {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .history-table thead,
    .history-recipient-table thead {
        display: none;
    }

    .history-table tr,
    .history-recipient-table tr {
        padding: 14px;
        margin-bottom: 12px;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: #fff;
    }

    .history-table td,
    .history-recipient-table td {
        display: grid;
        grid-template-columns: 92px minmax(0, 1fr);
        gap: 10px;
        align-items: center;
        padding: 7px 0;
        border: 0;
        text-align: left;
        overflow-wrap: anywhere;
    }

    .history-table td::before,
    .history-recipient-table td::before {
        color: var(--muted);
        font-size: 12px;
        font-weight: 700;
    }

    .history-table td:nth-child(1)::before { content: "日時"; }
    .history-table td:nth-child(2)::before { content: "キャスト"; }
    .history-table td:nth-child(3)::before { content: "結果"; }
    .history-table td:nth-child(4)::before { content: "送信人数"; }
    .history-table td:nth-child(5)::before { content: "確認"; }

    .history-recipient-table td:nth-child(1)::before { content: "No."; }
    .history-recipient-table td:nth-child(2)::before { content: "お客様名"; }
    .history-recipient-table td:nth-child(3)::before { content: "お客様ID"; }

    .history-detail-btn {
        width: 100%;
    }

    .history-count {
        font-size: 18px;
    }
}


/* 2026-10-01 — 履歴の軽量化 / コンパクト表示 */
.compact-history-head {
    align-items: center;
    margin-bottom: 10px;
}
.compact-history-head h2 { margin: 0; }
.history-more-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding-top: 12px;
}
.history-more-btn {
    min-width: 180px;
    justify-content: center;
}
.history-more-wrap span {
    color: var(--muted);
    font-size: 11px;
}

@media (max-width: 720px) {
    .history-page .panel-head { margin-bottom: 10px; }
    .history-page .panel-head h1 { font-size: 20px; margin-bottom: 3px; }
    .history-page .field-help { font-size: 11px; line-height: 1.45; }

    .history-table tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 3px 8px;
        padding: 10px 11px;
        margin-bottom: 7px;
        border-radius: 10px;
    }
    .history-table td {
        display: block;
        width: auto;
        padding: 0;
        border: 0;
        min-width: 0;
    }
    .history-table td::before { content: none !important; }
    .history-table td:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
        color: var(--muted);
        font-size: 10px;
        line-height: 1.35;
    }
    .history-table td:nth-child(2) {
        grid-column: 1;
        grid-row: 2;
        font-size: 14px;
        line-height: 1.35;
    }
    .history-table td:nth-child(3) {
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: center;
        justify-self: end;
    }
    .history-table td:nth-child(4) {
        grid-column: 1;
        grid-row: 3;
        color: var(--muted);
        font-size: 11px;
        line-height: 1.35;
    }
    .history-table td:nth-child(4)::before {
        content: "送信 ";
        display: inline;
        color: var(--muted);
        font-size: 11px;
        font-weight: 400;
    }
    .history-table td:nth-child(5) {
        grid-column: 2;
        grid-row: 3;
        align-self: center;
        justify-self: end;
    }
    .history-detail-btn {
        width: auto;
        min-height: 30px;
        padding: 5px 9px;
        border-radius: 8px;
        font-size: 11px;
        line-height: 1.2;
    }

    .history-recipient-table tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 2px 8px;
        padding: 8px 10px;
        margin-bottom: 5px;
        border-radius: 9px;
    }
    .history-recipient-table td {
        display: block;
        width: auto;
        min-width: 0;
        padding: 0;
        border: 0;
    }
    .history-recipient-table td::before { content: none !important; }
    .history-recipient-table td:nth-child(1) { display: none; }
    .history-recipient-table td:nth-child(2) {
        grid-column: 1;
        font-size: 13px;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }
    .history-recipient-table td:nth-child(3) {
        grid-column: 2;
        color: var(--muted);
        font-size: 10px;
        line-height: 1.35;
        text-align: right;
        overflow-wrap: anywhere;
    }
    .history-recipient-table td:nth-child(3)::before {
        content: "ID ";
        display: inline;
        color: var(--muted);
        font-size: 10px;
        font-weight: 400;
    }
    .history-more-wrap { padding-top: 9px; }
    .history-more-btn { width: 100%; min-height: 36px; }
    .simple-history-grid {
        grid-template-columns: repeat(3, minmax(0,1fr));
        gap: 6px;
        margin-top: 12px;
    }
    .simple-history-grid > div {
        min-height: 0;
        padding: 9px;
    }
    .simple-history-grid span { font-size: 10px; }
    .simple-history-grid b { font-size: 13px; }
}

/* 2026-10-01 — 送信履歴UI 最終微調整 */
.history-more-form {
    margin: 0;
    width: auto;
}
.history-more-btn {
    appearance: none;
    cursor: pointer;
    min-height: 40px;
    padding: 9px 22px;
    border-radius: 10px;
    font-weight: 700;
    line-height: 1.2;
}
.history-more-btn:hover {
    transform: translateY(-1px);
}
.history-more-btn:active {
    transform: translateY(0);
}
.history-table td,
.history-recipient-table td {
    vertical-align: middle;
}
.history-table td:first-child {
    white-space: nowrap;
}
.history-table td:nth-child(4) {
    white-space: nowrap;
}
.history-detail-btn {
    white-space: nowrap;
}
.history-page .panel-head {
    align-items: flex-start;
}
.history-page .panel-head .field-help {
    margin-top: 4px;
    display: none;
}

@media (min-width: 721px) {
    .history-more-wrap {
        padding-top: 14px;
    }
    .history-more-btn {
        min-width: 200px;
    }
    .history-table th,
    .history-table td {
        padding-top: 11px;
        padding-bottom: 11px;
    }
    .history-recipient-table th,
    .history-recipient-table td {
        padding-top: 9px;
        padding-bottom: 9px;
    }
}

@media (max-width: 720px) {
    .history-page {
        padding: 14px 12px;
    }
    .history-page .panel-head {
        margin-bottom: 8px;
    }
    .history-page .panel-head h1 {
        font-size: 18px;
        line-height: 1.35;
    }
    .history-page .field-help {
        margin-top: 2px;
        font-size: 10.5px;
        line-height: 1.4;
    }
    .history-table tr {
        gap: 2px 8px;
        padding: 9px 10px;
        margin-bottom: 6px;
        border-radius: 9px;
    }
    .history-table td:nth-child(1) {
        font-size: 9.5px;
    }
    .history-table td:nth-child(2) {
        font-size: 13px;
    }
    .history-table td:nth-child(3) .badge {
        padding: 4px 7px;
        font-size: 10px;
        line-height: 1.2;
    }
    .history-table td:nth-child(4) {
        font-size: 10.5px;
    }
    .history-detail-btn {
        min-height: 28px;
        padding: 4px 8px;
        border-radius: 7px;
        font-size: 10px;
    }
    .history-more-wrap {
        gap: 4px;
        padding-top: 8px;
    }
    .history-more-form {
        width: 100%;
    }
    .history-more-btn {
        width: 100%;
        min-width: 0;
        min-height: 42px;
        padding: 10px 14px;
        border-radius: 10px;
        font-size: 13px;
    }
    .history-more-wrap span {
        font-size: 10px;
    }
    .history-recipient-table tr {
        padding: 7px 9px;
        margin-bottom: 4px;
    }
    .history-recipient-table td:nth-child(2) {
        font-size: 12.5px;
    }
    .history-recipient-table td:nth-child(3) {
        max-width: 42vw;
        font-size: 9.5px;
        word-break: break-all;
    }
    .simple-history-grid {
        gap: 5px;
    }
    .simple-history-grid > div {
        padding: 8px 7px;
        border-radius: 8px;
    }
    .simple-history-grid span {
        font-size: 9.5px;
    }
    .simple-history-grid b {
        font-size: 12px;
        line-height: 1.3;
    }
    #sent-customers .panel-head {
        align-items: center;
        gap: 8px;
    }
    #sent-customers .panel-head h2 {
        margin-bottom: 2px;
        font-size: 17px;
    }
    #sent-customers .field-help {
        font-size: 10px;
    }
    .history-count {
        font-size: 16px;
    }
}

/* Cast CSV import */
.import-or{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px;font-weight:700;margin:2px 0}
.import-or::before,.import-or::after{content:"";height:1px;background:var(--line);flex:1}

/* 2026-10-01: 送信画面の表ヘッダークリック並び替え */
.send-cast-table th.sortable-th {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.send-cast-table th.sortable-th:hover {
  background: rgba(15, 23, 42, 0.045);
}
.send-cast-table th.sortable-th:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -3px;
}
.send-cast-table th.sortable-th .sort-indicator {
  display: inline-block;
  width: 1em;
  margin-left: .35em;
  opacity: .38;
  font-size: .85em;
  line-height: 1;
  vertical-align: middle;
}
.send-cast-table th.sortable-th .sort-indicator::before {
  content: "↕";
}
.send-cast-table th.sortable-th[aria-sort="ascending"] .sort-indicator,
.send-cast-table th.sortable-th[aria-sort="descending"] .sort-indicator {
  opacity: 1;
}
.send-cast-table th.sortable-th[aria-sort="ascending"] .sort-indicator::before {
  content: "↑";
}
.send-cast-table th.sortable-th[aria-sort="descending"] .sort-indicator::before {
  content: "↓";
}

/* 2026-10-01: 送信一覧のソート記号を明確化 */
.send-cast-table th.sortable-th .sort-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 24px;
  margin-left: 7px;
  padding: 0 5px;
  border: 1px solid rgba(71, 85, 105, .28);
  border-radius: 6px;
  background: #fff;
  color: #64748b;
  opacity: 1;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -2px;
  vertical-align: middle;
  box-sizing: border-box;
}
.send-cast-table th.sortable-th .sort-indicator::before {
  content: "▲▼";
}
.send-cast-table th.sortable-th:hover .sort-indicator {
  border-color: rgba(37, 99, 235, .45);
  color: #2563eb;
}
.send-cast-table th.sortable-th[aria-sort="ascending"] .sort-indicator,
.send-cast-table th.sortable-th[aria-sort="descending"] .sort-indicator {
  border-color: #2563eb;
  background: #2563eb;
  color: #fff;
  letter-spacing: 0;
}
.send-cast-table th.sortable-th[aria-sort="ascending"] .sort-indicator::before {
  content: "▲";
}
.send-cast-table th.sortable-th[aria-sort="descending"] .sort-indicator::before {
  content: "▼";
}

/* オキニトーク送信：設定・送信を明確な操作ボタンとして表示 */
.okini-send-table .okini-setting-send-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 108px;
  min-height: 40px;
  padding: 9px 14px;
  border: 0;
  border-radius: 8px;
  background: #2563eb;
  color: #fff !important;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none !important;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .12);
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.okini-send-table .okini-setting-send-btn:hover {
  background: #1d4ed8;
  box-shadow: 0 3px 8px rgba(37, 99, 235, .22);
  transform: translateY(-1px);
}
.okini-send-table .okini-setting-send-btn:active {
  transform: translateY(0);
}
.okini-send-table .okini-setting-send-btn:focus-visible {
  outline: 3px solid rgba(37, 99, 235, .28);
  outline-offset: 2px;
}

/* Cast registration / CSV import: compact collapsible panels */
.collapsible-form-panel {
    padding: 0;
    overflow: hidden;
}

.collapsible-form-panel > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 62px;
    padding: 18px 22px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    color: #202636;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
}

.collapsible-form-panel > summary::-webkit-details-marker {
    display: none;
}

.collapsible-form-panel > summary::marker {
    content: "";
}

.collapsible-form-panel > summary:hover {
    background: #f8fafc;
}

.collapsible-form-panel > summary:focus-visible {
    outline: 3px solid rgba(47, 91, 234, .18);
    outline-offset: -3px;
}

.collapsible-form-icon {
    position: relative;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border: 1px solid #d7deea;
    border-radius: 8px;
    background: #fff;
}

.collapsible-form-icon::before,
.collapsible-form-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 2px;
    border-radius: 2px;
    background: #475467;
    transform: translate(-50%, -50%);
    transition: transform .18s ease;
}

.collapsible-form-icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.collapsible-form-panel[open] .collapsible-form-icon::after {
    transform: translate(-50%, -50%) rotate(0deg);
}

.collapsible-form-panel[open] > summary {
    border-bottom: 1px solid var(--line);
}

.collapsible-form-body {
    padding: 22px;
}

.collapsible-form-body .field-help:last-child {
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .collapsible-form-panel > summary {
        min-height: 54px;
        padding: 15px 16px;
        font-size: 17px;
    }

    .collapsible-form-body {
        padding: 16px;
    }

    .collapsible-form-icon {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
    }
}

/* Cast register: open manual registration + CSV import together */
.collapsible-form-titles {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.collapsible-form-divider {
    color: var(--muted);
    font-weight: 700;
}
.cast-register-combined-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
}
.cast-register-subpanel {
    min-width: 0;
    padding: 4px 0 0;
}
.cast-register-subpanel + .cast-register-subpanel {
    border-left: 1px solid var(--line);
    padding-left: 20px;
}
.cast-register-subpanel h2 {
    margin: 0 0 14px;
    font-size: 16px;
    line-height: 1.4;
}
@media (max-width: 760px) {
    .collapsible-form-titles {
        gap: 7px;
        flex-wrap: wrap;
    }
    .cast-register-combined-body {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .cast-register-subpanel + .cast-register-subpanel {
        border-left: 0;
        border-top: 1px solid var(--line);
        padding-left: 0;
        padding-top: 18px;
    }
}

/* Individual scheduled send */
.row-action-buttons{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.schedule-send-btn{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:9px 14px;border:1px solid #2563eb;border-radius:8px;background:#fff;color:#2563eb!important;font-size:13px;font-weight:800;line-height:1.2;text-decoration:none!important;white-space:nowrap}
.schedule-send-btn:hover{background:#eff6ff}
.schedule-panel{max-width:760px}
.schedule-form{max-width:620px}
.schedule-form input[type="datetime-local"]{max-width:320px}
.schedule-submit{width:auto;min-width:220px}
@media(max-width:767px){.row-action-buttons{align-items:stretch}.row-action-buttons>a{flex:1}.schedule-submit{width:100%}}

/* オキニトーク送信：設定・送信 / 予約送信を常に横並び */
.okini-send-table .row-action-buttons {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  width: max-content;
  white-space: nowrap;
}
.okini-send-table .row-action-buttons > a {
  flex: 0 0 auto;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .okini-send-table .row-action-buttons {
    flex-wrap: nowrap;
    width: max-content;
  }
  .okini-send-table .row-action-buttons > a {
    flex: 0 0 auto;
  }
}

/* 2026-10-01: ミテネ / オキニトーク送信一覧をPC画面内に収める */
@media (min-width: 768px) {
  .send-cast-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
  }

  .send-cast-table th,
  .send-cast-table td {
    padding-left: 6px;
    padding-right: 6px;
  }

  /* 共通列幅 */
  .send-cast-table th:nth-child(1),
  .send-cast-table td:nth-child(1) { width: 38px; }
  .send-cast-table th:nth-child(2),
  .send-cast-table td:nth-child(2) { width: 106px; }
  .send-cast-table th:nth-child(3),
  .send-cast-table td:nth-child(3) { width: 82px; }
  .send-cast-table th:nth-child(4),
  .send-cast-table td:nth-child(4) { width: 76px; }
  .send-cast-table th:nth-child(5),
  .send-cast-table td:nth-child(5) { width: 78px; }
  .send-cast-table th:nth-child(6),
  .send-cast-table td:nth-child(6) { width: 128px; }

  /* ソート記号も見やすさを保ったまま省スペース化 */
  .send-cast-table th.sortable-th .sort-indicator {
    min-width: 22px;
    width: 22px;
    height: 22px;
    margin-left: 4px;
    padding: 0;
  }

  /* オキニトーク：操作列をコンパクトにして2ボタンを必ず横並び */
  .okini-send-table th:nth-child(7),
  .okini-send-table td:nth-child(7) {
    width: 192px;
  }
  .okini-send-table .row-action-buttons {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap !important;
    gap: 5px;
    width: 100%;
    min-width: 0;
    white-space: nowrap;
  }
  .okini-send-table .okini-setting-send-btn,
  .okini-send-table .schedule-send-btn {
    flex: 0 0 auto !important;
    min-width: 0;
    min-height: 36px;
    height: 36px;
    padding: 0 9px;
    border-radius: 7px;
    white-space: nowrap;
  }
  .okini-send-table .okini-setting-send-btn { width: 96px; }
  .okini-send-table .schedule-send-btn { width: 84px; }

  /* ミテネ：送信操作を1行のまま省スペース化 */
  .send-cast-table:not(.okini-send-table) th:nth-child(4),
  .send-cast-table:not(.okini-send-table) td:nth-child(4) { width: 58px; }
  .send-cast-table:not(.okini-send-table) th:nth-child(5),
  .send-cast-table:not(.okini-send-table) td:nth-child(5) { width: 74px; }
  .send-cast-table:not(.okini-send-table) th:nth-child(6),
  .send-cast-table:not(.okini-send-table) td:nth-child(6) { width: 122px; }
  .send-cast-table:not(.okini-send-table) th:nth-child(7),
  .send-cast-table:not(.okini-send-table) td:nth-child(7) {/* width: 575px; */}

  .send-cast-table:not(.okini-send-table) td.actions {
    white-space: nowrap;
    overflow: visible;
  }
  .send-cast-table:not(.okini-send-table) td.actions .run-controls {
    display: inline-grid;
    grid-template-columns: 120px 60px 92px;
    gap: 4px;
    width: 298px;
    margin-right: 5px;
    vertical-align: middle;
  }
  .send-cast-table:not(.okini-send-table) .run-controls .compact-select {
    width: 100%;
    min-width: 0;
    height: 36px;
    padding: 0 3px;
  }
  .send-cast-table:not(.okini-send-table) .run-controls button {
    width: 92px;
    min-width: 92px;
    height: 36px;
    padding: 0 4px;
  }
  .send-cast-table:not(.okini-send-table) td.actions > .schedule-send-btn {
    width: 84px;
    min-width: 84px;
    min-height: 36px;
    height: 36px;
    padding: 0 5px;
    vertical-align: middle;
  }
}

/* スマホは読みやすさを優先し、表だけ横スクロール */
@media (max-width: 767px) {
  .okini-send-table .row-action-buttons {
    display: flex;
    flex-wrap: nowrap !important;
    gap: 6px;
    width: max-content;
  }
  .okini-send-table .row-action-buttons > a {
    flex: 0 0 auto !important;
    width: auto;
  }
}

/* 2026-10-01: ミテネ / オキニトーク送信ページは利用可能な横幅を100%使用 */
@media (min-width: 768px) {
  .app-main main:has(.send-cast-table) {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
  }

  .app-main main:has(.send-cast-table) > .panel,
  .app-main main:has(.send-cast-table) .cast-table-wrap,
  .app-main main:has(.send-cast-table) .send-cast-table {
    width: 100%;
    max-width: 100%;
  }
}


/* 2026-10-02 — Latest notices on service HOME */
.home-notices {
    margin: 18px 0 16px;
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}
.home-notices-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 8px;
}
.home-notices-head h2 {
    margin: 0;
    font-size: 16px;
    line-height: 1.4;
}
.home-notice-list {
    background: #fff;
    border-top: 1px dashed #d9e1ec;
    border-bottom: 1px dashed #d9e1ec;
}
.home-notice-item {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    padding: 14px 0;
    border-bottom: 1px dashed #d9e1ec;
    color: inherit;
    text-decoration: none;
    transition: opacity .15s ease;
}
.home-notice-item:last-child { border-bottom: 0; }
.home-notice-item:hover { opacity: .78; }
.home-notice-item time {
    color: #7b8798;
    font-size: 13px;
    line-height: 1.5;
    white-space: nowrap;
    padding-left: 2px;
}
.home-notice-item span {
    min-width: 0;
    font-size: 15px;
    line-height: 1.6;
    color: #24324a;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.home-notice-empty {
    padding: 14px 2px;
    color: var(--muted);
    font-size: 13px;
}
@media (max-width: 640px) {
    .home-notices {
        margin: 14px 0;
    }
    .home-notices-head {
        align-items: flex-end;
        margin-bottom: 6px;
    }
    .home-notice-item {
        display: block;
        padding: 12px 0;
    }
    .home-notice-item time {
        display: block;
        margin-bottom: 4px;
        font-size: 12px;
    }
    .home-notice-item span {
        display: block;
        font-size: 14px;
        white-space: normal;
        line-height: 1.6;
    }
}


/* 2026-10-02 — Admin notice editor toolbar */
.admin-notice-editor .notice-editor-field {
    width: 100%;
}
.admin-notice-editor .rich-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    background: #f8fafc;
}
.admin-notice-editor .rich-toolbar button,
.admin-notice-editor .rich-format-select {
    min-height: 40px;
    height: 40px;
    padding: 0 14px;
    border: 1px solid #b8c5d6;
    border-radius: 7px;
    background: #fff;
    color: #202938;
    box-shadow: none;
    font: inherit;
    font-size: 14px;
    line-height: 1;
}
.admin-notice-editor .rich-toolbar button {
    cursor: pointer;
}
.admin-notice-editor .rich-toolbar button:hover,
.admin-notice-editor .rich-format-select:hover {
    border-color: #8fa2ba;
    background: #f8fafc;
}
.admin-notice-editor .rich-toolbar button:focus-visible,
.admin-notice-editor .rich-format-select:focus-visible {
    outline: 2px solid rgba(37, 99, 235, .25);
    outline-offset: 2px;
}
.admin-notice-editor .rich-toolbar .rich-icon-btn {
    width: 42px;
    min-width: 42px;
    padding: 0;
    text-align: center;
    font-size: 18px;
}
.admin-notice-editor .rich-format-select {
    min-width: 150px;
    padding-right: 36px;
}
.admin-notice-editor .rich-editor {
    min-height: 460px;
    max-height: 70vh;
    padding: 22px 24px;
    border: 1px solid #cbd5e1;
    border-radius: 0 0 8px 8px;
    background: #fff;
    font-size: 15px;
    line-height: 1.85;
    overflow-y: auto;
}
.admin-notice-editor .rich-editor:focus {
    border-color: #3b82f6;
    box-shadow: inset 0 0 0 1px #3b82f6;
}
.admin-notice-editor .rich-editor:empty::before {
    content: 'お知らせ本文を入力してください';
    color: #9aa4b2;
    pointer-events: none;
}
.admin-notice-editor .rich-editor h2 {
    margin: 1.4em 0 .55em;
    font-size: 1.6em;
    line-height: 1.45;
}
.admin-notice-editor .rich-editor h3 {
    margin: 1.2em 0 .5em;
    font-size: 1.3em;
    line-height: 1.5;
}
.admin-notice-editor .rich-editor blockquote {
    margin: 1em 0;
    padding: 10px 14px;
    border-left: 4px solid #cbd5e1;
    background: #f8fafc;
}
@media (max-width: 640px) {
    .admin-notice-editor .rich-toolbar {
        gap: 6px;
        padding: 8px;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    .admin-notice-editor .rich-toolbar button,
    .admin-notice-editor .rich-format-select {
        flex: 0 0 auto;
        min-height: 38px;
        height: 38px;
        padding: 0 11px;
        font-size: 13px;
    }
    .admin-notice-editor .rich-toolbar .rich-icon-btn {
        width: 38px;
        min-width: 38px;
        padding: 0;
    }
    .admin-notice-editor .rich-format-select {
        min-width: 120px;
    }
    .admin-notice-editor .rich-editor {
        min-height: 340px;
        max-height: none;
        padding: 16px;
    }
}


/* 2026-10-02 — Fix notice editor toolbar to one horizontal row */
.admin-notice-editor .rich-toolbar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}
.admin-notice-editor .stack-form .rich-toolbar button {
    width: auto !important;
    min-width: max-content;
    flex: 0 0 auto;
    margin-top: 0 !important;
}
.admin-notice-editor .rich-toolbar .rich-icon-btn {
    width: 42px !important;
    min-width: 42px !important;
}
.admin-notice-editor .rich-toolbar .rich-format-select {
    width: 150px !important;
    min-width: 150px !important;
    flex: 0 0 150px;
}
@media (max-width: 640px) {
    .admin-notice-editor .rich-toolbar .rich-icon-btn {
        width: 38px !important;
        min-width: 38px !important;
    }
    .admin-notice-editor .rich-toolbar .rich-format-select {
        width: 120px !important;
        min-width: 120px !important;
        flex-basis: 120px;
    }
}


/* 2026-10-02 — Okini Talk template replacement tags */
.okini-message-field {
    display: block;
}
.okini-template-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0 10px;
}
.okini-template-tags-label {
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
}
.okini-template-tag {
    width: auto !important;
    min-width: 0 !important;
    min-height: 32px;
    padding: 5px 12px !important;
    border: 1px solid #cfd8e6 !important;
    border-radius: 999px !important;
    background: #f7f9fc !important;
    color: #334155 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.4;
    cursor: pointer;
    box-shadow: none !important;
}
.okini-template-tag:hover {
    background: #eef3f9 !important;
    border-color: #aebcd0 !important;
}
.okini-template-tags small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 400;
}
@media (max-width: 640px) {
    .okini-template-tags {
        gap: 6px;
    }
    .okini-template-tags small {
        flex-basis: 100%;
    }
}

/* 2026-10-02 — Okini Talk message preset modal */
.okini-preset-open {
    width: auto !important;
    min-width: 0 !important;
    min-height: 32px;
    padding: 5px 12px !important;
    border: 1px solid #9fb4ff !important;
    border-radius: 999px !important;
    background: #eef3ff !important;
    color: #3556c8 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.4;
    cursor: pointer;
    box-shadow: none !important;
}
.okini-preset-open:hover { background: #e4ebff !important; }
body.modal-open { overflow: hidden; }
.okini-preset-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.okini-preset-modal.is-open { display: flex; }
.okini-preset-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .46);
}
.okini-preset-dialog {
    position: relative;
    z-index: 1;
    width: min(820px, 100%);
    max-height: min(82vh, 760px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #dbe3ef;
    border-radius: 16px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .22);
}
.okini-preset-dialog-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px 16px;
    border-bottom: 1px solid #e6ebf2;
}
.okini-preset-dialog-head h2 { margin: 0 0 4px; font-size: 20px; }
.okini-preset-dialog-head p { margin: 0; color: var(--muted); font-size: 13px; }
.okini-preset-close {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #f1f5f9 !important;
    color: #475569 !important;
    font-size: 24px !important;
    line-height: 1 !important;
    cursor: pointer;
}
.okini-preset-grid {
    overflow-y: auto;
    padding: 18px 22px 22px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.okini-preset-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    padding: 16px;
    border: 1px solid #dfe6ef;
    border-radius: 12px;
    background: #fff;
}
.okini-preset-card-head strong { font-size: 15px; color: #1e293b; }
.okini-preset-card p {
    flex: 1;
    margin: 0;
    color: #475569;
    font-size: 13px;
    line-height: 1.75;
    word-break: break-word;
}
.okini-preset-use {
    width: 100% !important;
    min-height: 38px;
    margin-top: 2px;
    border-radius: 8px !important;
    background: #eef3ff !important;
    border: 1px solid #c8d4ff !important;
    color: #3556c8 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer;
}
.okini-preset-use:hover { background: #e4ebff !important; }
@media (max-width: 640px) {
    .okini-preset-modal { padding: 12px; align-items: flex-end; }
    .okini-preset-dialog {
        width: 100%;
        max-height: 88vh;
        border-radius: 16px 16px 10px 10px;
    }
    .okini-preset-dialog-head { padding: 16px; }
    .okini-preset-grid {
        grid-template-columns: 1fr;
        padding: 14px 16px 18px;
    }
}


/* 2026-10-02 — Okini Talk preset category tabs / 50 initial greetings */
.okini-preset-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-bottom: 1px solid #e6ebf2;
    background: #fff;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.okini-preset-tab {
    width: auto !important;
    min-width: max-content !important;
    min-height: 36px;
    padding: 7px 13px !important;
    border: 1px solid #d8e0eb !important;
    border-radius: 999px !important;
    background: #f8fafc !important;
    color: #475569 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.4;
    cursor: pointer;
    box-shadow: none !important;
}
.okini-preset-tab span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 999px;
    background: #e8edf5;
    color: #64748b;
    font-size: 11px;
}
.okini-preset-tab.is-active {
    border-color: #3556c8 !important;
    background: #3556c8 !important;
    color: #fff !important;
}
.okini-preset-tab.is-active span {
    background: rgba(255,255,255,.18);
    color: #fff;
}
.okini-preset-panels {
    min-height: 0;
    flex: 1;
    overflow: hidden;
}
.okini-preset-panel {
    display: none;
    height: 100%;
    overflow-y: auto;
}
.okini-preset-panel.is-active { display: block; }
.okini-preset-panel .okini-preset-grid {
    overflow: visible;
}
.okini-preset-card-head strong {
    font-weight: 600;
}
@media (max-width: 640px) {
    .okini-preset-tabs { padding: 10px 16px; }
    .okini-preset-tab { min-height: 34px; padding: 6px 11px !important; }
}

/* 2026-10-02 — Fix preset modal scrolling: tabs fixed, template list scrolls */
.okini-preset-dialog {
    height: min(82vh, 760px);
    max-height: min(82vh, 760px);
    overflow: hidden;
}
.okini-preset-dialog-head {
    flex: 0 0 auto;
}
.okini-preset-tabs {
    flex: 0 0 auto;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}
.okini-preset-panels {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.okini-preset-panel {
    display: none;
    height: auto;
    min-height: 100%;
    overflow: visible;
}
.okini-preset-panel.is-active {
    display: block;
}
.okini-preset-panel .okini-preset-grid {
    overflow: visible;
    min-height: 0;
}
@media (max-width: 640px) {
    .okini-preset-dialog {
        height: 88vh;
        max-height: 88vh;
    }
    .okini-preset-tabs {
        overflow-x: auto;
        overflow-y: hidden;
    }
    .okini-preset-panels {
        overflow-y: auto;
        overflow-x: hidden;
    }
}


/* 2026-10-02 — Okini Talk send template: desktop two-column layout */
.okini-template-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    column-gap: 24px !important;
    row-gap: 18px;
    align-items: start;
    width: 100%;
}
.okini-template-grid > * {
    min-width: 0;
}
.okini-message-field,
.okini-image-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.okini-image-field > label {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.okini-image-field input[type="file"] {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    height: auto !important;
}
.okini-image-field .muted {
    margin: 0;
}
.okini-image-preview {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-top: 4px;
}
.okini-image-preview img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 300px;
    object-fit: contain;
    border-radius: 10px;
}
.okini-image-remove {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 8px !important;
}
.okini-image-remove input[type="checkbox"] {
    width: auto;
    margin: 0;
}
@media (max-width: 767px) {
    .okini-template-grid {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }
}

/* 2026-10-02 — Common HOME / banner management */
.common-home-section { margin:0 0 14px; }
.common-home-section-first { margin-top:0; }
.common-home-section-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.common-home-section-head h2 { margin:0; font-size:15px; line-height:1.4; }
.common-home-section-head p { margin:2px 0 0; color:var(--muted); font-size:11px; }
.common-home-service-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.common-home-service-card { min-width:0; padding:12px 14px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); }
.common-home-service-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:9px; }
.common-home-service-head h2 { margin:1px 0 0; font-size:16px; line-height:1.3; }
.common-home-service-status { flex:0 0 auto; display:inline-flex; align-items:center; min-height:22px; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:600; }
.common-home-service-status.is-on { color:var(--success); background:var(--success-soft); }
.common-home-service-status.is-off { color:var(--muted); background:var(--soft); }
.common-home-usage-numbers { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.common-home-usage-numbers>div { min-width:0; }
.common-home-usage-numbers span { display:block; margin-bottom:1px; color:var(--muted); font-size:11px; }
.common-home-usage-numbers strong { display:block; font-size:20px; line-height:1.2; letter-spacing:-.02em; }
.common-home-usage-numbers strong small { font-size:11px; color:var(--muted); font-weight:500; }
.common-home-usage-track { height:4px; margin:8px 0; overflow:hidden; border-radius:999px; background:var(--soft); }
.common-home-usage-track span { display:block; height:100%; border-radius:inherit; background:var(--primary); }
.common-home-service-link { display:inline-flex; margin-top:0; color:var(--primary-text); font-size:12px; font-weight:600; text-decoration:none; }
.common-home-disabled-copy { min-height:48px; display:flex; align-items:center; color:var(--muted); font-size:12px; }

.home-banner-section { margin:18px 0 0; }
.home-banner-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.home-banner-item { display:block; min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:var(--soft-2); text-decoration:none; }
.home-banner-item img { display:block; width:100%; aspect-ratio:16/5; object-fit:cover; }
a.home-banner-item { transition:transform .15s ease, box-shadow .15s ease; }
a.home-banner-item:hover { transform:translateY(-1px); box-shadow:0 4px 16px rgba(16,24,40,.08); }

.admin-banner-preview { max-width:720px; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:var(--soft); }
.admin-banner-preview img { display:block; width:100%; height:auto; }
.admin-banner-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.admin-banner-card { min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:#fff; }
.admin-banner-card>img { display:block; width:100%; aspect-ratio:16/5; object-fit:cover; background:var(--soft); }
.admin-banner-card-body { padding:12px; }
.admin-banner-card-body>div:first-child { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.admin-banner-card-body strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.admin-banner-card-body small { display:block; margin:5px 0 10px; color:var(--muted); }
.admin-banner-card .row-actions { display:flex; align-items:center; gap:8px; }
.admin-banner-card .row-actions form { margin:0; }
.admin-banner-editor .check-label { align-self:end; min-height:var(--control-height); display:flex; flex-direction:row; align-items:center; gap:8px; }
.admin-banner-editor .check-label input { width:auto; margin:0; }

@media (max-width: 760px) {
    .common-home-service-grid { grid-template-columns:1fr; }
    .common-home-service-card { padding:12px; }
    .common-home-usage-numbers strong { font-size:19px; }
    .home-banner-grid { grid-template-columns:1fr; gap:10px; }
    .home-banner-item img { aspect-ratio:16/5; }
    .admin-banner-list { grid-template-columns:1fr; }
}

/* 2026-10-03 — Admin notices: prevent mobile horizontal overflow */
.admin-notice-editor,
.admin-notice-editor .stack-form,
.admin-notice-editor .stack-form > *,
.admin-notice-editor label,
.admin-notice-editor .notice-editor-field,
.admin-notice-editor .rich-toolbar,
.admin-notice-editor .rich-editor {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.admin-notice-editor .stack-form {
    width: 100%;
    overflow: hidden;
}

.admin-notice-editor input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.admin-notice-editor textarea,
.admin-notice-editor select {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* The toolbar itself may scroll horizontally, but it must never widen the form. */
.admin-notice-editor .rich-toolbar {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
}

.admin-notice-editor .rich-editor {
    width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

@media (max-width: 640px) {
    .admin-notice-editor {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .admin-notice-editor .panel-head,
    .admin-notice-editor .stack-form,
    .admin-notice-editor .notice-editor-field {
        width: 100%;
        max-width: 100%;
    }

    .admin-notice-editor .rich-toolbar {
        padding: 8px;
    }

    .admin-notice-editor .rich-editor {
        min-height: 340px;
        padding: 14px;
    }
}

/* 2026-10-03 — Admin notices: full responsive mobile layout */
@media (max-width: 640px) {
    body:has(.admin-notice-editor) {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    /* On this long editing page, keep the mobile header in normal document flow. */
    body:has(.admin-notice-editor) .site-header {
        position: relative;
        top: auto;
    }

    .app-main main:has(.admin-notice-editor) {
        width: 100%;
        max-width: 100vw;
        min-width: 0;
        overflow-x: hidden;
        padding: 12px 10px 28px;
        box-sizing: border-box;
    }

    .admin-notice-editor {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding: 14px;
        box-sizing: border-box;
    }

    .admin-notice-editor .panel-head {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .admin-notice-editor .panel-head h1 {
        font-size: 20px;
        line-height: 1.45;
    }

    .admin-notice-editor .panel-head p {
        font-size: 13px;
        line-height: 1.75;
    }

    .admin-notice-editor .stack-form {
        width: 100%;
        min-width: 0;
        gap: 14px;
    }

    .admin-notice-editor label,
    .admin-notice-editor .notice-editor-field {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .admin-notice-editor input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    .admin-notice-editor textarea,
    .admin-notice-editor select {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* Responsive toolbar: show every control without widening the page. */
    .admin-notice-editor .rich-toolbar {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        gap: 6px;
        padding: 8px;
        overflow: visible !important;
        box-sizing: border-box;
    }

    .admin-notice-editor .stack-form .rich-toolbar button,
    .admin-notice-editor .rich-toolbar .rich-icon-btn {
        flex: 0 0 auto;
        width: auto !important;
        min-width: 40px !important;
        max-width: 100%;
        height: 40px;
        padding: 0 11px;
        margin: 0 !important;
        white-space: nowrap;
    }

    .admin-notice-editor .rich-toolbar .rich-format-select {
        flex: 1 1 132px !important;
        width: auto !important;
        min-width: 120px !important;
        max-width: 180px !important;
        height: 40px;
    }

    .admin-notice-editor .rich-editor {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        min-height: 280px;
        max-height: none;
        padding: 14px;
        overflow-x: hidden;
        overflow-y: auto;
        overflow-wrap: anywhere;
        word-break: break-word;
        box-sizing: border-box;
    }

    .admin-notice-editor .field-help {
        font-size: 12px;
        line-height: 1.7;
        overflow-wrap: anywhere;
    }

    .admin-notice-editor .stack-form > button,
    .admin-notice-editor .stack-form > div > button {
        width: 100%;
        max-width: 100%;
    }

    /* Notice list: switch the desktop table to mobile cards. */
    .admin-notice-editor + .panel {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding: 14px;
        overflow: hidden;
        box-sizing: border-box;
    }

    .admin-notice-editor + .panel > h2 {
        margin: 0 0 14px;
        font-size: 20px;
    }

    .admin-notice-editor + .panel .table-wrap {
        width: 100%;
        max-width: 100%;
        overflow: visible;
        border: 0;
        border-radius: 0;
        margin: 0;
        background: transparent;
    }

    .admin-notice-editor + .panel table,
    .admin-notice-editor + .panel tbody,
    .admin-notice-editor + .panel tr,
    .admin-notice-editor + .panel td {
        display: block;
        width: 100%;
        max-width: 100%;
        min-width: 0 !important;
        box-sizing: border-box;
        white-space: normal !important;
    }

    .admin-notice-editor + .panel thead {
        display: none;
    }

    .admin-notice-editor + .panel tbody {
        display: grid;
        gap: 10px;
    }

    .admin-notice-editor + .panel tbody tr {
        margin: 0;
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius: 10px;
        background: #fff;
        box-shadow: 0 1px 2px rgba(24, 32, 51, .04);
    }

    .admin-notice-editor + .panel tbody tr:hover {
        background: #fff;
    }

    .admin-notice-editor + .panel tbody td {
        position: relative;
        padding: 10px 12px;
        border-bottom: 1px solid #e7ebf1;
        font-size: 13px;
        line-height: 1.65;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .admin-notice-editor + .panel tbody td:last-child {
        border-bottom: 0;
    }

    .admin-notice-editor + .panel tbody td::before {
        display: block;
        margin-bottom: 3px;
        color: #7a879a;
        font-size: 11px;
        font-weight: 700;
        line-height: 1.4;
    }

    .admin-notice-editor + .panel tbody td:nth-child(1)::before {
        content: "投稿時間";
    }

    .admin-notice-editor + .panel tbody td:nth-child(2)::before {
        content: "タイトル";
    }

    .admin-notice-editor + .panel tbody td:nth-child(3)::before {
        content: "状態";
    }

    .admin-notice-editor + .panel tbody td:nth-child(4)::before {
        content: "操作";
    }

    .admin-notice-editor + .panel tbody td:nth-child(2) strong {
        display: block;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .admin-notice-editor + .panel .row-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
    }

    .admin-notice-editor + .panel .row-actions > * {
        min-width: 0;
        width: 100%;
        margin: 0;
    }

    .admin-notice-editor + .panel .row-actions .button-link,
    .admin-notice-editor + .panel .row-actions button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-width: 0;
        min-height: 42px;
        padding: 8px 10px;
        box-sizing: border-box;
    }
}


/* 2026-10-03 — Common HOME: notices panel + live sending progress */
.home-notices.panel {
    margin: 0 0 14px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 1px 3px rgba(24,32,51,.05);
}
.home-notices.panel .home-notices-head {
    margin-bottom: 8px;
}
.home-notices.panel .home-notice-list {
    border-top: 1px dashed #d9e1ec;
    border-bottom: 0;
    background: transparent;
}
.home-notices.panel .home-notice-item {
    padding-left: 2px;
    padding-right: 2px;
}

.common-home-live-panel {
    margin: 0 0 14px;
    padding: 14px 16px;
}
.common-home-live-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}
.common-home-live-head h2 {
    margin: 0;
    font-size: 15px;
    line-height: 1.4;
}
.common-home-live-head > span {
    color: var(--muted);
    font-size: 11px;
}
.common-home-live-list {
    display: grid;
    gap: 10px;
}
.common-home-live-job {
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--soft-2, #f8fafc);
}
.common-home-live-job-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.common-home-live-job-top > div {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.common-home-live-job-top strong {
    font-size: 14px;
    line-height: 1.4;
}
.common-home-live-status {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--primary-soft, #eef2ff);
    color: var(--primary-text);
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
}
.common-home-live-job-top > b {
    flex: 0 0 auto;
    font-size: 17px;
    line-height: 1.2;
}
.common-home-live-track {
    height: 7px;
    margin: 9px 0 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #e8edf5;
}
.common-home-live-track > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--primary);
    transition: width .3s ease;
}
.common-home-live-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px 14px;
    color: var(--muted);
    font-size: 11px;
}
.common-home-live-meta > span {
    min-width: 0;
}
.common-home-live-meta a {
    margin-left: auto;
    color: var(--primary-text);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .home-notices.panel {
        margin: 0 0 12px;
        padding: 13px 14px;
    }
    .home-notices.panel .home-notice-item {
        padding: 11px 0;
    }
    .common-home-live-panel {
        margin-bottom: 12px;
        padding: 13px 14px;
    }
    .common-home-live-head {
        display: block;
    }
    .common-home-live-head > span {
        display: block;
        margin-top: 3px;
    }
    .common-home-live-meta {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4px 10px;
    }
    .common-home-live-meta [data-live-current] {
        grid-column: 1 / -1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .common-home-live-meta a {
        grid-column: 1 / -1;
        margin-left: 0;
        margin-top: 2px;
    }
}


/* 2026-10-03 — Common HOME usability upgrade */
.common-home-cast-summary {
    color: var(--muted);
    font-size: 11px;
    white-space: nowrap;
}
.common-home-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}
.common-home-panel-head h2 {
    margin: 0;
    font-size: 15px;
    line-height: 1.4;
}
.common-home-panel-head p {
    margin: 2px 0 0;
    color: var(--muted);
    font-size: 11px;
}
.common-home-panel-head > span {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: #fff3e8;
    color: #a65313;
    font-size: 11px;
    font-weight: 700;
}

.common-home-attention {
    margin: 0 0 14px;
    padding: 14px 16px;
}
.common-home-attention-list {
    display: grid;
    gap: 8px;
}
.common-home-attention-item {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-left-width: 3px;
    border-radius: 10px;
    background: #fff;
}
.common-home-attention-item.is-warn { border-left-color: #e7a52b; background: #fffdf7; }
.common-home-attention-item.is-limit { border-left-color: #d97706; background: #fffaf2; }
.common-home-attention-item.is-error { border-left-color: #dc4c4c; background: #fff8f8; }
.common-home-attention-item.is-info { border-left-color: var(--primary); background: #f8faff; }
.common-home-attention-item > div { min-width: 0; }
.common-home-attention-item strong {
    display: block;
    margin-bottom: 2px;
    font-size: 13px;
    line-height: 1.45;
}
.common-home-attention-item span {
    display: block;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.5;
}
.common-home-attention-item a {
    color: var(--primary-text);
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.common-home-schedule {
    margin: 0 0 14px;
    padding: 14px 16px;
}
.common-home-schedule-list {
    border-top: 1px solid var(--line);
}
.common-home-schedule-row {
    display: grid;
    grid-template-columns: 132px minmax(0,1fr) 96px;
    align-items: center;
    gap: 12px;
    min-height: 42px;
    border-bottom: 1px solid var(--line);
}
.common-home-schedule-row:last-child { border-bottom: 0; }
.common-home-schedule-row time {
    color: var(--muted);
    font-size: 11px;
    white-space: nowrap;
}
.common-home-schedule-row strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
}
.common-home-schedule-row > span {
    justify-self: end;
    display: inline-flex;
    padding: 3px 7px;
    border-radius: 999px;
    background: var(--soft);
    color: var(--muted);
    font-size: 10px;
    white-space: nowrap;
}

.common-home-quick-section { margin-bottom: 14px; }
.common-home-quick-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 9px;
}
.common-home-quick-grid > a {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.common-home-quick-grid > a:hover {
    border-color: #c7d2fe;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(16,24,40,.06);
}
.common-home-quick-icon {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--primary-soft, #eef2ff);
    color: var(--primary-text);
    font-size: 14px;
    font-weight: 700;
}
.common-home-quick-grid strong {
    display: block;
    font-size: 12px;
    line-height: 1.35;
}
.common-home-quick-grid small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.35;
}

@media (max-width: 900px) {
    .common-home-quick-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 640px) {
    .common-home-section-head { align-items: flex-start; }
    .common-home-cast-summary { white-space: normal; text-align: right; }
    .common-home-attention,
    .common-home-schedule { margin-bottom: 12px; padding: 13px 14px; }
    .common-home-attention-item {
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 10px;
    }
    .common-home-attention-item a { justify-self: start; }
    .common-home-schedule-row {
        grid-template-columns: 1fr auto;
        gap: 3px 8px;
        padding: 9px 0;
    }
    .common-home-schedule-row time {
        grid-column: 1;
        font-size: 10px;
    }
    .common-home-schedule-row strong {
        grid-column: 1;
        white-space: normal;
    }
    .common-home-schedule-row > span {
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: center;
    }
    .common-home-quick-grid { gap: 8px; }
    .common-home-quick-grid > a { padding: 10px; }
    .common-home-quick-icon { flex-basis: 28px; width: 28px; height: 28px; }
}
@media (max-width: 380px) {
    .common-home-quick-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   2026-10-03 UX audit v19 — safe presentation layer
   Backend / API / worker / DB behavior intentionally untouched.
   ========================================================= */

/* --- Global resilience / accessibility --- */
.app-shell,
.app-main,
.app-main main,
.panel,
.table-wrap,
form,
label { min-width: 0; }

img, svg { max-width: 100%; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid rgba(59,130,246,.28);
    outline-offset: 2px;
}

button:disabled,
.button-link:disabled,
.btn:disabled,
input:disabled,
select:disabled {
    cursor: not-allowed;
    opacity: .55;
}

input,
select,
textarea,
button { font: inherit; }

/* Browser default file input, aligned to HIMEBOT without JS dependency. */
input[type="file"] {
    width: 100%;
    max-width: 100%;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    color: var(--text);
}
input[type="file"]::file-selector-button {
    margin-right: 10px;
    padding: 8px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #f8fafc;
    color: #334155;
    font-weight: 600;
    cursor: pointer;
}
input[type="file"]::file-selector-button:hover { background: #f1f5f9; }

/* Flash messages: easy to scan, but do not cover controls. */
.flash {
    border-radius: 10px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

/* --- Common HOME: compact contract overview --- */
.common-home-contract-strip {
    display: grid;
    grid-template-columns: 1.35fr 1fr 1fr .9fr .9fr;
    gap: 0;
    margin: 0 0 14px;
    padding: 0;
    overflow: hidden;
}
.common-home-contract-strip > div {
    min-width: 0;
    padding: 12px 14px;
    border-right: 1px solid var(--line);
}
.common-home-contract-strip > div:last-child { border-right: 0; }
.common-home-contract-strip span {
    display: block;
    margin-bottom: 3px;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.3;
}
.common-home-contract-strip strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
    font-size: 13px;
    line-height: 1.45;
}
.common-home-contract-strip small {
    margin-left: 2px;
    color: var(--muted);
    font-size: 10px;
}

.common-home-quick-grid { grid-template-columns: repeat(5,minmax(0,1fr)); }

/* HOME notices: date / title / readable excerpt. */
.home-notice-item {
    grid-template-columns: 132px minmax(0,1fr) !important;
    gap: 16px !important;
    align-items: start !important;
    padding-top: 11px !important;
    padding-bottom: 11px !important;
}
.home-notice-copy {
    min-width: 0;
    display: block;
}
.home-notice-copy strong {
    display: block;
    min-width: 0;
    color: #24324a;
    font-size: 13px;
    line-height: 1.45;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.home-notice-copy small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.45;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.home-notice-item time {
    padding-top: 1px;
    font-size: 11px !important;
}

/* --- Tables: clearer sort state and full-width toolbars --- */
.table-sort-help {
    margin: 0;
    align-self: center;
    color: var(--muted);
    font-size: 11px;
    white-space: nowrap;
}
.sortable-th {
    position: relative;
    padding-right: 26px !important;
    cursor: pointer;
    user-select: none;
}
.sortable-th::after {
    content: "↕";
    position: absolute;
    right: 9px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 12px;
    font-weight: 400;
}
.sortable-th[aria-sort="ascending"]::after { content: "↑"; color: var(--primary); }
.sortable-th[aria-sort="descending"]::after { content: "↓"; color: var(--primary); }
.sortable-th.is-sorted { color: var(--primary-text); background: #f8faff; }

.cast-toolbar.admin-toolbar {
    width: 100%;
    align-items: center;
}
.cast-toolbar.admin-toolbar .search-wrap {
    flex: 1 1 320px;
    min-width: 0;
}
.cast-toolbar.admin-toolbar .search-wrap input { width: 100%; }

/* Action groups should behave predictably. */
.row-action-buttons,
.admin-actions,
.row-actions {
    align-items: center;
}
.row-action-buttons > *,
.admin-actions > *,
.row-actions > * { min-width: 0; }

/* --- Mobile: zero horizontal page overflow, cards instead of squeezed tables --- */
@media (max-width: 767px) {
    html, body { max-width: 100%; overflow-x: hidden; }
    .app-main,
    .app-main main { width: 100%; max-width: 100%; overflow-x: clip; }

    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        max-width: 100%;
        min-height: 44px;
        box-sizing: border-box;
    }
    textarea { min-height: 110px; }
    button,
    .btn,
    .button-link {
        min-height: 42px;
    }

    /* HOME */
    .common-home-contract-strip {
        grid-template-columns: repeat(2,minmax(0,1fr));
        border-radius: 12px;
    }
    .common-home-contract-strip > div {
        padding: 10px 12px;
        border-right: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
    }
    .common-home-contract-strip > div:nth-child(2n) { border-right: 0; }
    .common-home-contract-strip > div:nth-last-child(-n+1) { border-bottom: 0; }
    .common-home-contract-strip > div:nth-child(5) { grid-column: 1 / -1; border-right: 0; border-bottom: 0; }
    .common-home-contract-strip strong { white-space: normal; overflow: visible; }

    .common-home-quick-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .home-notice-item {
        grid-template-columns: 1fr !important;
        gap: 3px !important;
        padding: 11px 0 !important;
    }
    .home-notice-item time { font-size: 10px !important; }
    .home-notice-copy strong,
    .home-notice-copy small {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
    .home-notice-copy small {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    /* Search area stacks naturally. */
    .cast-toolbar.admin-toolbar {
        display: grid;
        grid-template-columns: 1fr;
        gap: 7px;
    }
    .table-sort-help { white-space: normal; }

    /* CAST LIST -> cards */
    .cast-table-wrap { overflow: visible !important; }
    .admin-cast-table,
    .admin-cast-table tbody,
    .admin-cast-table tr,
    .admin-cast-table td { display: block; width: 100%; box-sizing: border-box; }
    .admin-cast-table thead { display: none; }
    .admin-cast-table tbody { display: grid; gap: 10px; }
    .admin-cast-table tr.cast-row {
        position: relative;
        padding: 13px 12px 12px 42px;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 1px 2px rgba(15,23,42,.03);
    }
    .admin-cast-table tr.cast-row > td {
        display: grid;
        grid-template-columns: 82px minmax(0,1fr);
        gap: 8px;
        align-items: center;
        padding: 6px 0 !important;
        border: 0 !important;
        text-align: left !important;
        overflow-wrap: anywhere;
    }
    .admin-cast-table tr.cast-row > td::before {
        color: var(--muted);
        font-size: 11px;
        line-height: 1.35;
    }
    .admin-cast-table tr.cast-row > td:nth-child(1) {
        position: absolute;
        left: 12px;
        top: 13px;
        display: block;
        width: 20px;
        padding: 0 !important;
    }
    .admin-cast-table tr.cast-row > td:nth-child(1)::before { display: none; }
    .admin-cast-table tr.cast-row > td:nth-child(2)::before { content: "キャスト"; }
    .admin-cast-table tr.cast-row > td:nth-child(3)::before { content: "ID"; }
    .admin-cast-table tr.cast-row > td:nth-child(4)::before { content: "稼働"; }
    .admin-cast-table tr.cast-row > td:nth-child(5)::before { content: "メモ"; }
    .admin-cast-table tr.cast-row > td:nth-child(6)::before { content: "最終送信"; }
    .admin-cast-table tr.cast-row > td:nth-child(7)::before { content: "操作"; }
    .admin-cast-table .memo-edit-form {
        display: grid;
        grid-template-columns: minmax(0,1fr) auto;
        gap: 6px;
        width: 100%;
    }
    .admin-cast-table .memo-edit-form input { min-width: 0; width: 100%; }
    .admin-cast-table .admin-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 7px;
        width: 100%;
    }
    .admin-cast-table .admin-actions form,
    .admin-cast-table .admin-actions button { width: 100%; }

    /* HISTORY -> cards */
    .history-table { overflow: visible !important; }
    .history-table table,
    .history-table tbody,
    .history-table tr,
    .history-table td { display: block; width: 100%; box-sizing: border-box; }
    .history-table thead { display: none; }
    .history-table tbody { display: grid; gap: 10px; }
    .history-table tbody tr {
        padding: 12px;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: #fff;
    }
    .history-table tbody td {
        display: grid;
        grid-template-columns: 88px minmax(0,1fr);
        gap: 8px;
        align-items: center;
        padding: 5px 0 !important;
        border: 0 !important;
        text-align: left !important;
        overflow-wrap: anywhere;
    }
    .history-table tbody td::before {
        color: var(--muted);
        font-size: 11px;
    }
    .history-table tbody td:nth-child(1)::before { content: "送信日時"; }
    .history-table tbody td:nth-child(2)::before { content: "キャスト"; }
    .history-table tbody td:nth-child(3)::before { content: "結果"; }
    .history-table tbody td:nth-child(4)::before { content: "送信人数"; }
    .history-table tbody td:nth-child(5)::before { content: "詳細"; }
    .history-table .history-detail-btn { width: 100%; justify-content: center; }

    /* SCHEDULE -> cards */
    .schedule-list-panel .table-wrap { overflow: visible !important; }
    .schedule-table,
    .schedule-table tbody,
    .schedule-table tr,
    .schedule-table td { display: block; width: 100%; box-sizing: border-box; }
    .schedule-table thead { display: none; }
    .schedule-table tbody { display: grid; gap: 10px; }
    .schedule-table tbody tr {
        padding: 12px;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: #fff;
    }
    .schedule-table tbody td {
        display: grid;
        grid-template-columns: 88px minmax(0,1fr);
        gap: 8px;
        align-items: center;
        padding: 5px 0 !important;
        border: 0 !important;
        text-align: left !important;
        overflow-wrap: anywhere;
    }
    .schedule-table tbody td:nth-child(1)::before { content: "予約日時"; color: var(--muted); font-size: 11px; }
    .schedule-table tbody td:nth-child(2)::before { content: "キャスト"; color: var(--muted); font-size: 11px; }
    .schedule-table tbody td:nth-child(3)::before { content: "状態"; color: var(--muted); font-size: 11px; }
    .schedule-table tbody td:nth-child(4)::before { content: "操作"; color: var(--muted); font-size: 11px; }
    .schedule-table tbody td form,
    .schedule-table tbody td button { width: 100%; }

    /* Bulk action bars: avoid compressed buttons. */
    .cast-bulk-status-bar,
    .cast-bulk-actions,
    .row-action-buttons {
        max-width: 100%;
    }
    .cast-bulk-actions {
        display: grid !important;
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 7px;
    }
    .cast-bulk-actions .cast-bulk-delete { grid-column: 1 / -1; }
    .cast-bulk-actions button { width: 100%; }
}

@media (max-width: 420px) {
    .common-home-contract-strip { grid-template-columns: 1fr; }
    .common-home-contract-strip > div,
    .common-home-contract-strip > div:nth-child(2n),
    .common-home-contract-strip > div:nth-child(5) {
        grid-column: auto;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }
    .common-home-contract-strip > div:last-child { border-bottom: 0; }
    .common-home-quick-grid { grid-template-columns: 1fr; }
}


/* 2026-10-03 common HOME visual refinement */
.common-home-overview {
    display:grid;
    grid-template-columns:minmax(220px,1.2fr) minmax(0,2fr) auto;
    align-items:center;
    gap:24px;
    padding:18px 20px;
    margin:0 0 16px;
}
.common-home-overview-title h1 {
    margin:0;
    font-size:22px;
    line-height:1.25;
}
.common-home-overview-title p {
    margin:6px 0 0;
    color:var(--muted);
    font-size:14px;
}
.common-home-overview-meta {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
}
.common-home-overview-meta > div {
    min-width:0;
}
.common-home-overview-meta span {
    display:block;
    margin-bottom:6px;
    color:var(--muted);
    font-size:12px;
}
.common-home-overview-meta strong {
    display:block;
    font-size:16px;
    line-height:1.4;
    font-weight:700;
    letter-spacing:-.01em;
}
.common-home-overview-link {
    justify-self:end;
    color:var(--text);
    font-weight:600;
    text-decoration:none;
    white-space:nowrap;
}
.common-home-overview-link:hover { color:var(--primary-text); }
.common-home-section { margin:0 0 16px; }
.common-home-section-head { margin-bottom:10px; }
.common-home-section-head h2 { font-size:17px; }
.common-home-section-head p { font-size:13px; }
.common-home-cast-summary {
    color:var(--muted);
    font-size:13px;
    font-weight:600;
}
.common-home-service-grid { gap:12px; }
.common-home-service-card {
    padding:18px 18px 16px;
    border-color:#cfd8e6;
    box-shadow:none;
}
.common-home-service-head { margin-bottom:12px; }
.common-home-service-head h2 { font-size:18px; }
.common-home-service-status { min-height:26px; padding:4px 10px; font-size:12px; }
.common-home-usage-numbers { gap:14px; }
.common-home-usage-numbers span { margin-bottom:4px; font-size:12px; }
.common-home-usage-numbers strong { font-size:21px; }
.common-home-usage-numbers strong small { margin-left:2px; font-size:12px; }
.common-home-usage-track { height:8px; margin:12px 0 14px; background:#edf1f7; }
.common-home-service-link { font-size:14px; }
.common-home-live-panel {
    margin-bottom:16px;
    padding:18px 20px;
    border-color:#c2d2fb;
    background:#fafcff;
}
.common-home-live-head { margin-bottom:12px; }
.common-home-live-head h2 { font-size:18px; }
.common-home-live-head > span { font-size:13px; }
.common-home-live-list { gap:10px; }
.common-home-live-job {
    padding:16px 16px 14px;
    border-radius:14px;
    border-color:#d8e2f5;
    background:#fff;
}
.common-home-live-job-top strong { font-size:17px; }
.common-home-live-status { font-size:12px; }
.common-home-live-job-top > b { font-size:19px; }
.common-home-live-copy {
    margin:0 0 10px;
    color:var(--muted);
    font-size:13px;
}
.common-home-live-track { height:16px; background:#edf1f7; }
.common-home-live-track > span { background:var(--primary); }
.common-home-live-meta {
    margin-top:10px;
    grid-template-columns:repeat(4,minmax(0,auto)) 1fr;
    align-items:center;
    gap:8px 16px;
    font-size:13px;
}
.common-home-live-meta > span,
.common-home-live-meta a { white-space:nowrap; }
.common-home-live-meta a { justify-self:end; }
.common-home-panel-head { margin-bottom:10px; }
.common-home-panel-head h2 { font-size:17px; }
.common-home-panel-head p { font-size:13px; }
.common-home-schedule,
.common-home-attention { padding:18px 20px; }
.common-home-schedule-row {
    grid-template-columns:146px minmax(0,1fr) auto;
    gap:14px;
    padding:14px 0;
}
.common-home-schedule-row time { font-size:13px; }
.common-home-schedule-row strong { font-size:15px; }
.common-home-schedule-row > span {
    justify-self:end;
    display:inline-flex;
    align-items:center;
    min-height:28px;
    padding:4px 12px;
    border-radius:999px;
    background:#f2f4f7;
    color:#5d6b82;
    font-size:12px;
    font-weight:700;
}
.common-home-quick-section { margin-bottom:16px; }
.common-home-quick-grid {
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:10px;
}
.common-home-quick-grid > a {
    min-height:66px;
    padding:14px 14px;
    border-color:#cfd8e6;
}
.common-home-quick-icon {
    width:30px;
    height:30px;
    font-size:16px;
    font-weight:700;
}
.common-home-quick-grid strong { font-size:15px; }
.common-home-quick-grid small { font-size:12px; }
.home-notices.panel {
    margin-bottom:16px;
    padding:18px 20px;
}
.home-notices.panel .home-notices-head { margin-bottom:8px; }
.home-notices.panel .home-notices-head h2 { font-size:17px; }
.home-notices.panel .home-notice-item {
    grid-template-columns:160px minmax(0,1fr);
    gap:18px;
    padding:14px 2px;
}
.home-notice-item time {
    color:#67758d !important;
    font-size:13px !important;
}
.home-notice-copy strong {
    margin-bottom:3px;
    font-size:15px;
}
.home-notice-copy small {
    font-size:13px;
    line-height:1.55;
    color:#7c889c;
}
@media (max-width: 1100px) {
    .common-home-overview {
        grid-template-columns:1fr;
        align-items:flex-start;
    }
    .common-home-overview-link { justify-self:start; }
    .common-home-overview-meta { grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; }
    .common-home-live-meta { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .common-home-live-meta a { justify-self:start; }
    .common-home-quick-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width: 767px) {
    .common-home-overview {
        padding:16px;
        gap:16px;
    }
    .common-home-overview-title h1 { font-size:20px; }
    .common-home-overview-title p { font-size:13px; }
    .common-home-overview-meta {
        grid-template-columns:1fr;
        gap:10px;
    }
    .common-home-overview-meta strong { font-size:15px; }
    .common-home-section-head {
        align-items:flex-start;
        gap:8px;
    }
    .common-home-cast-summary {
        font-size:12px;
        text-align:left;
    }
    .common-home-service-card { padding:16px; }
    .common-home-service-head { align-items:flex-start; }
    .common-home-usage-numbers { grid-template-columns:1fr 1fr; }
    .common-home-usage-numbers strong { font-size:18px; }
    .common-home-live-panel,
    .common-home-schedule,
    .common-home-attention,
    .home-notices.panel { padding:16px; }
    .common-home-live-meta {
        grid-template-columns:1fr;
        gap:6px;
    }
    .common-home-live-meta > span,
    .common-home-live-meta a { white-space:normal; }
    .common-home-schedule-row {
        grid-template-columns:1fr;
        gap:6px;
    }
    .common-home-schedule-row > span { justify-self:start; }
    .common-home-quick-grid { grid-template-columns:1fr; }
    .home-notices.panel .home-notice-item {
        grid-template-columns:1fr;
        gap:6px;
    }
    .home-notice-item time { font-size:12px !important; }
}


/* Global emphasis weight */
strong, b { font-weight: 700 !important; }




body > div > div > main > section > h1{
    margin-top: 20px !important;
}
/* Cast list: added date and eight-column layout. */
@media (min-width: 768px) {
    .admin-cast-table { min-width: 1240px; }
    .admin-cast-table th:nth-child(6), .admin-cast-table td:nth-child(6),
    .admin-cast-table th:nth-child(7), .admin-cast-table td:nth-child(7) { width: 160px; }
    .admin-cast-table th:nth-child(8), .admin-cast-table td:nth-child(8) { width: 190px; }
}
@media (max-width: 767px) {
    .admin-cast-table tr.cast-row > td:nth-child(6)::before { content: "追加日"; }
    .admin-cast-table tr.cast-row > td:nth-child(7)::before { content: "最終送信"; }
    .admin-cast-table tr.cast-row > td:nth-child(8)::before { content: "操作"; }
}

/* 2026-10-11: bulk scheduling inputs */
.okini-bulk-reservation{display:flex;flex-wrap:wrap;align-items:end;gap:10px}
.okini-bulk-reservation .bulk-schedule-label{display:flex;flex-direction:column;gap:4px;min-width:190px;font-size:12px}
.okini-bulk-reservation input[type="datetime-local"]{max-width:100%;min-height:40px}
.bulk-send-form input[type="datetime-local"]{max-width:100%;width:min(100%,320px)}
@media(max-width:700px){.okini-bulk-reservation{width:100%}.okini-bulk-reservation .bulk-schedule-label{min-width:0;flex:1 1 100%}.okini-bulk-reservation input[type="datetime-local"]{width:100%}.okini-bulk-reservation button{width:100%}}

/* 2026-10-11: group scheduling. Keep controls compact and accessible on mobile. */
.group-schedule-panel { display: grid; gap: 8px; width: 100%; min-width: 0; margin: 10px 0; }
.group-mode-toggle, .group-notify { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.group-mode-toggle input, .group-notify input { width: auto; flex: none; }
.group-schedule-detail { display: grid; gap: 8px; padding: 10px 0; }
.group-schedule-detail[hidden], .group-standard-time[hidden] { display: none !important; }
.group-schedule-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.group-schedule-toolbar input { flex: 1 1 180px; min-width: 0; max-width: 260px; }
.group-schedule-toolbar button { flex: 0 1 auto; }
.group-schedule-count { margin: 0; font-size: 0.9rem; }
.group-cast-time { min-width: 0; width: 210px; max-width: 100%; font: inherit; }
.group-cast-time:disabled { display: none; }
.group-cast-time.group-assigned { border-color: var(--color-primary, #278765); }
.okini-bulk-reservation .group-schedule-panel { max-width: 470px; }
.okini-send-table th, .okini-send-table td { vertical-align: middle; }
@media(max-width:700px) {
  .group-schedule-panel { width: 100%; }
  .group-schedule-toolbar { flex-direction: column; align-items: stretch; }
  .group-schedule-toolbar input { max-width: 100%; width: 100%; flex: 0 0 auto; }
  .group-schedule-toolbar button { width: 100%; }
}



/* Okini delivery cards: explicit grid, shared heights, isolated controls. */
.cast-list-head.okini-send-head{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
.okini-send-head .okini-send-toolbar{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;width:100%}
.okini-filter-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center}
.okini-send-head .okini-search-form,.okini-send-head .okini-attendance-form{grid-column:auto;width:100%;min-width:0;margin:0}
.okini-send-head #okiniBulkForm{display:block;width:100%;margin:0;padding:0;background:transparent}
.okini-compose-heading{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline;margin:0 0 12px}
.okini-compose-heading strong{font-size:15px}.okini-compose-heading span{font-size:12px;color:#64748b}
#okiniBulkForm .okini-delivery-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,1fr);gap:12px;align-items:stretch}
#okiniBulkForm .okini-control-card{display:flex;flex-direction:column;gap:10px;min-width:0;padding:16px;box-sizing:border-box;background:#f8faff;border:1px solid #dce3ef;border-radius:12px}
#okiniBulkForm .okini-card-title{display:block;font-size:13px;line-height:1.4;color:#334155;margin:0}
#okiniBulkForm .okini-control-hint,#okiniBulkForm .okini-group-date-hint,#okiniBulkForm .okini-option-note{display:block;font-size:12px;line-height:1.6;color:#64748b;margin:0}
#okiniBulkForm .okini-group-date-hint[hidden]{display:none}
#okiniBulkForm .group-standard-time{display:flex;flex-direction:column;gap:8px;min-width:0;margin:0}
#okiniBulkForm .okini-control-card input[type="datetime-local"]{width:100%;min-width:0;max-width:100%;margin:0;box-sizing:border-box}
#okiniBulkForm .group-mode-toggle,#okiniBulkForm .group-notify{display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;gap:8px;margin:0;font-size:13px;font-weight:500;line-height:1.6}
#okiniBulkForm .group-mode-toggle span,#okiniBulkForm .group-notify span{min-width:0;text-align:left}
#okiniBulkForm input[type="checkbox"]{display:inline-block;flex:0 0 16px;width:16px;height:16px;min-height:0;margin:3px 0 0;padding:0}
#okiniBulkForm .okini-action-card .bulk-btn{width:100%;min-width:0;margin:auto 0 0;justify-content:center}
.okini-send-head .okini-search-form input,.okini-send-head .attendance-extract-btn,#okiniBulkForm input[type="datetime-local"],#okiniBulkForm button{box-sizing:border-box;height:44px;min-height:44px;font-size:14px}
.okini-send-head .attendance-extract-btn,#okiniBulkForm button{display:inline-flex;align-items:center;justify-content:center;padding:0 16px;white-space:nowrap}
#okiniBulkForm .group-schedule-detail{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 16px;padding:16px;border:1px solid #dce3ef;border-radius:12px;background:#f8faff}
#okiniBulkForm .group-schedule-detail[hidden]{display:none!important}
#okiniBulkForm .group-schedule-detail>.field-help{grid-column:1/-1;margin:0;padding:0;border:0;background:none;font-size:13px;line-height:1.6}
#okiniBulkForm .group-schedule-toolbar{grid-column:1/-1;display:flex;flex-direction:row;flex-wrap:wrap;gap:10px;align-items:center}
#okiniBulkForm .group-schedule-toolbar input{flex:0 1 280px;max-width:280px;min-width:0}
#okiniBulkForm .group-schedule-toolbar button{width:auto;margin:0}
#okiniBulkForm .group-schedule-count{margin:0;font-size:13px}
@media(max-width:1150px){#okiniBulkForm .okini-delivery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#okiniBulkForm .okini-action-card{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:4px 16px;align-items:center}#okiniBulkForm .okini-action-card .bulk-btn{grid-column:2;grid-row:1/3;margin:0}}
@media(max-width:650px){.okini-filter-bar{grid-template-columns:minmax(0,1fr)}#okiniBulkForm .okini-delivery-grid{grid-template-columns:minmax(0,1fr)}#okiniBulkForm .okini-action-card{display:flex}#okiniBulkForm .group-schedule-detail{grid-template-columns:minmax(0,1fr)}#okiniBulkForm .group-schedule-toolbar input{flex:1 1 100%;max-width:100%}#okiniBulkForm .group-schedule-toolbar button{width:100%}}

/* Okini list: shared intrinsic column widths, no percentage expansion. */
.app-main main .cast-table-wrap:has(> .okini-send-table){overflow-x:auto!important;max-width:100%}
.app-main main .cast-table-wrap > table.okini-send-table{table-layout:auto;width:auto;min-width:0;max-width:none}
.app-main main .okini-send-table th:nth-child(n),
.app-main main .okini-send-table td:nth-child(n){width:auto;min-width:0;padding:12px 14px;box-sizing:border-box;text-align:left;vertical-align:middle}
.app-main main .okini-send-table th:nth-child(n){white-space:nowrap}
.app-main main .okini-send-table td:nth-child(n){white-space:normal;overflow-wrap:anywhere}
.app-main main .okini-send-table th:first-child,
.app-main main .okini-send-table td:first-child{text-align:center;width:44px;padding:12px}
.app-main main .okini-send-table td:nth-child(2){max-width:12em}
.app-main main .okini-send-table td:nth-child(3){max-width:10em}
.app-main main .okini-send-table td:nth-child(4),
.app-main main .okini-send-table td:nth-child(5){max-width:10em}
.app-main main .okini-send-table td:nth-child(6){max-width:12em}
.app-main main .okini-send-table .row-action-buttons{width:max-content;flex-wrap:nowrap;gap:8px}
.app-main main .okini-send-table .group-cast-time{width:210px;max-width:none}

/* Requested PC 2x2 / mobile ordered single-column controls. */
.okini-send-head .okini-send-toolbar{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:stretch}
.okini-send-head .okini-filter-bar{grid-column:1;grid-row:1;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-content:center;padding:16px;border:1px solid #dce3ef;border-radius:12px;background:#f8faff;min-width:0}
.okini-send-head #okiniBulkForm,
.okini-send-head #okiniBulkForm .okini-delivery-grid{display:contents}
.okini-send-head #okiniBulkForm .okini-compose-heading{display:none}
.okini-send-head #okiniBulkForm .okini-options-card{grid-column:2;grid-row:1}
.okini-send-head #okiniBulkForm .okini-date-card{grid-column:1;grid-row:2}
.okini-send-head #okiniBulkForm .okini-action-card{grid-column:2;grid-row:2;display:flex;flex-direction:column;gap:10px;align-items:stretch}
.okini-send-head #okiniBulkForm .okini-action-card .bulk-btn{width:100%;margin:auto 0 0;grid-column:auto;grid-row:auto}
.okini-send-head #okiniBulkForm .group-schedule-detail{grid-column:1/-1;grid-row:3}
@media(max-width:767px){
 .okini-send-head .okini-send-toolbar{grid-template-columns:minmax(0,1fr)}
 .okini-send-head .okini-filter-bar{grid-column:1;grid-row:1;padding:12px;grid-template-columns:minmax(0,1fr) auto;gap:8px}
 .okini-send-head .okini-filter-bar .attendance-extract-btn{padding:0 10px;font-size:12px}
 .okini-send-head .okini-filter-bar input[type="search"]{font-size:13px;padding-left:10px;padding-right:10px}
 .okini-send-head #okiniBulkForm .okini-date-card{grid-column:1;grid-row:2}
 .okini-send-head #okiniBulkForm .okini-options-card{grid-column:1;grid-row:3}
 .okini-send-head #okiniBulkForm .okini-action-card{grid-column:1;grid-row:4}
 .okini-send-head #okiniBulkForm .group-schedule-detail{grid-column:1;grid-row:5}
}

/* Mitene recipient relationship filter */
.settings-form label.mitene-related-toggle{display:flex;flex-direction:row;align-items:flex-start;gap:10px}
.settings-form .mitene-related-toggle input[type="checkbox"]{flex:0 0 18px;width:18px;height:18px;margin:3px 0 0;padding:0}