:root {
    --line-primary: #0d6efd;
    --line-text: #212529;
    --line-muted: #6c757d;
    --line-border: #dee2e6;
    --line-soft: #f8f9fa;
}

body {
    color: var(--line-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    letter-spacing: 0;
}

a {
    text-decoration: none;
}

.admin-header-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.admin-brand {
    align-items: center;
    color: var(--line-text);
    display: inline-flex;
    font-size: 1.05rem;
    margin-right: .75rem;
}

.admin-brand:hover {
    color: var(--line-primary);
}

.admin-brand strong {
    display: block;
    line-height: 1.2;
}

.admin-nav {
    gap: .25rem;
}

.admin-account {
    align-items: center;
    display: flex;
    gap: .75rem;
    margin-left: auto;
}

.admin-account span {
    color: var(--line-muted);
    font-size: .9rem;
}

.document-switcher {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.auth-main {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    padding: 1.5rem;
}

.auth-stack {
    display: grid;
    gap: 1rem;
    max-width: 430px;
    width: 100%;
}

.auth-panel {
    width: 100%;
}

.admin-main {
    margin-left: auto;
    margin-right: auto;
    max-width: 1600px;
    padding-bottom: 6.5rem !important;
    width: 100%;
}

.home-select {
    margin: 5rem auto 0;
    max-width: 980px;
}

.home-select-heading {
    margin-bottom: 1.5rem;
}

.home-select-heading h1 {
    font-size: 2rem;
    margin-bottom: .35rem;
}

.home-select-heading p {
    color: var(--line-muted);
    margin-bottom: 0;
}

.document-choice-card {
    background: #fff;
    border: 1px solid var(--line-border);
    border-radius: .5rem;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
    color: var(--line-text);
    display: block;
    cursor: pointer;
    min-height: 150px;
    padding: 1.5rem;
    padding-right: 4.25rem;
    position: relative;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.document-choice-card::after {
    border-right: 3px solid currentColor;
    border-top: 3px solid currentColor;
    content: "";
    height: .9rem;
    position: absolute;
    right: 1.75rem;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    transition: transform .15s ease;
    width: .9rem;
}

.document-choice-card:hover {
    border-color: var(--line-primary);
    box-shadow: 0 .5rem 1rem rgba(13, 110, 253, .12);
    color: var(--line-primary);
    transform: translateY(-2px);
}

.document-choice-card:hover::after {
    transform: translate(.25rem, -50%) rotate(45deg);
}

.document-choice-card span {
    color: var(--line-muted);
    display: block;
    font-size: .9rem;
    font-weight: 700;
    margin-bottom: .75rem;
}

.document-choice-card strong {
    display: block;
    font-size: 1.55rem;
    line-height: 1.35;
}

.content-card,
.line-toolbar,
.line-summary,
.line-table {
    width: 100%;
}

.metric-card {
    min-height: 112px;
}

.metric-card span {
    color: var(--line-muted);
    display: block;
    font-size: .85rem;
    font-weight: 700;
    margin-bottom: .45rem;
}

.metric-card strong {
    display: block;
    font-size: 2rem;
    line-height: 1;
}

.breadcrumb-line {
    align-items: center;
    color: var(--line-muted);
    display: flex;
    flex-wrap: wrap;
    font-size: .9rem;
    gap: .5rem;
    margin-bottom: 1rem;
}

.page-heading {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.page-heading h1 {
    font-size: 1.75rem;
    margin-bottom: .25rem;
}

.page-heading p,
.section-heading p {
    color: var(--line-muted);
    margin-bottom: 0;
}

.page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.section-heading {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.section-heading h2 {
    font-size: 1.35rem;
    margin-bottom: .25rem;
}

.detail-card-list {
    display: grid;
    gap: .75rem;
}

.detail-card {
    background: #fff;
    border: 1px solid var(--line-border);
    border-radius: .75rem;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .05);
    overflow: hidden;
}

.detail-card summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: .75rem;
    list-style: none;
    min-height: 4.5rem;
    padding: .85rem 1rem;
}

.detail-card summary::-webkit-details-marker {
    display: none;
}

.detail-card summary::after {
    color: var(--line-muted);
    content: "開く";
    font-size: .85rem;
    margin-left: auto;
}

.detail-card[open] summary::after {
    content: "閉じる";
}

.detail-card-body {
    border-top: 1px solid var(--line-border);
    padding: 1rem;
}

.detail-number {
    align-items: center;
    background: #e7f1ff;
    border-radius: 999px;
    color: #084298;
    display: inline-flex;
    font-weight: 700;
    height: 2.2rem;
    justify-content: center;
    min-width: 2.2rem;
}

.sort-handle {
    background: var(--line-soft);
    border: 1px solid var(--line-border);
    border-radius: .375rem;
    color: #495057;
    cursor: grab;
    font-size: .85rem;
    font-weight: 700;
    padding: .3rem .55rem;
    user-select: none;
}

.sort-handle:active {
    cursor: grabbing;
}

.detail-card.is-dragging,
tr.is-dragging {
    opacity: .55;
}

.detail-summary-thumb {
    border: 1px solid var(--line-border);
    border-radius: .375rem;
    height: 3rem;
    object-fit: cover;
    width: 3rem;
}

.detail-empty {
    color: var(--line-muted);
    font-size: .85rem;
}

.reference-card {
    background: #fff;
    border: 1px solid var(--line-border);
    border-radius: .5rem;
    height: 100%;
    padding: .75rem;
}

.reference-card-primary {
    background: #f8fbff;
}

.reference-card-title {
    color: #495057;
    font-size: .9rem;
    font-weight: 700;
    margin-bottom: .65rem;
}

.line-toolbar > .card-body {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.line-toolbar:not(.card) {
    align-items: flex-start;
    background: #fff;
    border: 1px solid var(--line-border);
    border-radius: .5rem;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding: 1rem;
}

.line-filters {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .6rem;
}

.line-summary,
.form-table {
    background: #fff;
    border: 1px solid var(--line-border);
    width: 100%;
}

.line-summary th,
.form-table th {
    background: var(--line-soft);
    width: 13rem;
}

.line-table {
    background: #fff;
    border: 1px solid var(--line-border);
    min-width: 860px;
    width: 100%;
}

.line-table th {
    background: var(--line-soft);
    color: #495057;
    white-space: nowrap;
}

.line-table th,
.line-table td,
.line-summary th,
.line-summary td,
.form-table th,
.form-table td {
    border-bottom: 1px solid var(--line-border);
    padding: .75rem;
    vertical-align: top;
}

.detail-table {
    min-width: 1180px;
}

.status-complete td {
    background: #fff8e5;
}

.text-center {
    text-align: center;
}

.form-table textarea,
.detail-table textarea {
    min-height: 7rem;
}

.detail-table textarea {
    min-height: 9rem;
}

.line-form input[type="text"],
.line-form input[type="email"],
.line-form input[type="password"],
.line-form select,
.line-form textarea {
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: .375rem;
    color: #212529;
    display: block;
    font-size: 1rem;
    line-height: 1.5;
    padding: .375rem .75rem;
    width: 100%;
}

.line-form input[type="text"]:focus,
.line-form input[type="email"]:focus,
.line-form input[type="password"]:focus,
.line-form select:focus,
.line-form textarea:focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
    outline: 0;
}

.line-form input[type="file"]:not(.image-file-input) {
    display: block;
    font-size: .9rem;
    max-width: 100%;
}

.image-list {
    display: grid;
    gap: .5rem;
}

.image-list img,
.before-image img,
.image-slot img {
    border: 1px solid var(--line-border);
    border-radius: .375rem;
    max-width: 180px;
}

img[data-action="replay-image"] {
    cursor: pointer;
}

.image-slot {
    background: var(--line-soft);
    border: 1px solid var(--line-border);
    border-radius: .375rem;
    margin-bottom: .75rem;
    padding: .75rem;
}

.image-slot-single {
    margin-bottom: 0;
}

.image-dropzone {
    align-items: center;
    background: #fff;
    border: 2px dashed #b6c4d6;
    border-radius: .375rem;
    color: var(--line-muted);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    justify-content: center;
    min-height: 8.5rem;
    overflow: hidden;
    padding: .75rem;
    position: relative;
    text-align: center;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.image-dropzone.has-file {
    border-style: solid;
}

.image-dropzone.is-dragover {
    background: #eef6ff;
    border-color: var(--line-primary);
    box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .12);
}

.image-dropzone-preview:empty {
    display: none;
}

.image-dropzone-text {
    font-size: .78rem;
    line-height: 1.45;
    pointer-events: none;
}

.image-file-input {
    cursor: pointer;
    height: 100%;
    inset: 0;
    opacity: 0;
    position: absolute;
    width: 100%;
}

.image-slot textarea {
    margin-top: .5rem;
}

.image-clear-button {
    margin-top: .5rem;
}

.image-slot-actions {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-top: .5rem;
}

.image-slot-actions .image-clear-button,
.image-slot-actions .image-create-button {
    margin-top: 0;
}

.image-field-actions {
    display: flex;
    gap: .5rem;
}

.image-editor-modal[hidden] {
    display: none;
}

.image-editor-modal {
    inset: 0;
    position: fixed;
    z-index: 1050;
}

.image-editor-backdrop {
    background: rgba(15, 23, 42, .6);
    inset: 0;
    position: absolute;
}

.image-editor-panel {
    background: #fff;
    border-radius: .5rem;
    box-shadow: 0 1.5rem 4rem rgba(15, 23, 42, .35);
    display: flex;
    flex-direction: column;
    inset: 2rem;
    min-height: 35rem;
    overflow: hidden;
    position: absolute;
}

.image-editor-header,
.image-editor-footer {
    align-items: center;
    border-color: var(--line-border);
    gap: .75rem;
    padding: .75rem 1rem;
}

.image-editor-header {
    border-bottom: 1px solid var(--line-border);
    display: grid;
    grid-template-columns: minmax(8rem, 1fr) auto minmax(8rem, 1fr);
}

.image-editor-text-toolbar[hidden],
.image-editor-shape-toolbar[hidden] {
    display: inline-flex !important;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

.image-editor-text-toolbar,
.image-editor-shape-toolbar {
    align-items: center;
    background: #f8fafc;
    border: 1px solid var(--line-border);
    border-radius: .375rem;
    display: inline-flex;
    flex-wrap: wrap;
    gap: .4rem;
    justify-self: center;
    max-width: min(52rem, 100%);
    padding: .35rem .5rem;
}

.image-editor-text-toolbar select {
    min-width: 7.5rem;
    width: auto;
}

.image-editor-toolbar-size {
    align-items: center;
    display: flex;
    gap: .25rem;
}

.image-editor-toolbar-size input {
    text-align: center;
    width: 4.5rem;
}

.image-editor-toolbar-color {
    align-items: center;
    background: #fff;
    border: 1px solid var(--line-border);
    border-radius: .375rem;
    display: inline-flex;
    font-weight: 700;
    gap: .25rem;
    height: 2rem;
    margin: 0;
    padding: .2rem .35rem;
}

.image-editor-toolbar-color input {
    border: 0;
    height: 1.3rem;
    margin: 0;
    padding: 0;
    width: 1.6rem;
}

.image-editor-toolbar-bold {
    font-weight: 700;
}

.image-editor-toolbar-bold.active {
    background: var(--line-primary);
    border-color: var(--line-primary);
    color: #fff;
}

.image-editor-header h2 {
    font-size: 1.1rem;
    font-weight: 700;
    grid-column: 1;
    justify-self: start;
    margin: 0;
}

.image-editor-header .image-editor-text-toolbar {
    grid-column: 2;
}

.image-editor-header .image-editor-shape-toolbar {
    grid-column: 2;
}

.image-editor-header [data-editor-close] {
    grid-column: 3;
    justify-self: end;
}

.image-editor-footer {
    border-top: 1px solid var(--line-border);
    display: flex;
    justify-content: flex-end;
}

.image-editor-body {
    display: grid;
    flex: 1;
    gap: 1rem;
    grid-template-columns: 16rem minmax(32rem, 1fr) 18rem;
    min-height: 0;
    overflow: hidden;
    padding: 1rem;
}

.image-editor-tools,
.image-editor-layers {
    background: var(--line-soft);
    border: 1px solid var(--line-border);
    border-radius: .375rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    min-height: 0;
    overflow: auto;
    padding: .75rem;
}

.image-editor-tools h3,
.image-editor-layers h3 {
    font-size: .95rem;
    font-weight: 700;
    margin: 0;
}

.image-editor-button-grid {
    display: grid;
    gap: .5rem;
    grid-template-columns: 1fr 1fr;
}

.image-editor-preset-label {
    color: var(--line-muted);
    font-size: .85rem;
    font-weight: 700;
}

.image-editor-preset-label select {
    margin-top: .35rem;
}

.image-editor-paste {
    align-items: center;
    background: #fff;
    border: 2px dashed #b6c4d6;
    border-radius: .375rem;
    color: var(--line-muted);
    display: flex;
    flex-direction: column;
    font-size: .9rem;
    gap: .25rem;
    justify-content: center;
    min-height: 5.5rem;
    padding: .75rem;
    text-align: center;
}

.image-editor-paste:focus,
.image-editor-paste.is-dragover {
    border-color: var(--line-primary);
    box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .12);
    outline: 0;
}

.image-editor-paste span {
    font-size: .78rem;
}

.image-editor-message {
    color: var(--bs-danger);
    font-size: .85rem;
    min-height: 1.25rem;
}

.image-editor-message.is-success {
    color: var(--bs-success);
}

.image-editor-size-row,
.image-editor-custom-size {
    display: grid;
    gap: .5rem;
    grid-template-columns: 1fr 1fr;
}

.image-editor-custom-size[hidden] {
    display: none !important;
}

.image-editor-size-row label,
.image-editor-custom-size label {
    color: var(--line-muted);
    font-size: .8rem;
    font-weight: 700;
}

.image-editor-canvas-area {
    align-items: center;
    background: #dbe3ec;
    border: 1px solid var(--line-border);
    border-radius: .375rem;
    display: flex;
    justify-content: center;
    min-height: 0;
    overflow: hidden;
    padding: 1rem;
}

.image-editor-stage {
    background:
        linear-gradient(45deg, #f8fafc 25%, transparent 25%),
        linear-gradient(-45deg, #f8fafc 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #f8fafc 75%),
        linear-gradient(-45deg, transparent 75%, #f8fafc 75%);
    background-color: #fff;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0;
    background-size: 20px 20px;
    box-shadow: 0 .5rem 1.5rem rgba(15, 23, 42, .15);
    height: 520px;
    overflow: hidden;
    position: relative;
    width: 800px;
}

.image-editor-text-edit-overlay {
    background: rgba(255, 255, 255, .96);
    border: 2px solid var(--line-primary);
    border-radius: .25rem;
    box-shadow: 0 .4rem 1rem rgba(15, 23, 42, .18);
    box-sizing: border-box;
    line-height: 1.2;
    margin: 0;
    outline: 0;
    overflow: auto;
    padding: .25rem;
    position: absolute;
    resize: both;
    z-index: 20;
}

.image-editor-layer-list {
    display: grid;
    gap: .5rem;
}

.image-editor-layer {
    align-items: center;
    background: #fff;
    border: 1px solid var(--line-border);
    border-radius: .375rem;
    display: grid;
    gap: .5rem;
    grid-template-columns: auto 1fr auto auto;
    padding: .5rem;
}

.image-editor-layer-handle {
    color: var(--line-muted);
    cursor: grab;
    font-weight: 700;
    line-height: 1;
    user-select: none;
}

.image-editor-layer.is-dragging {
    opacity: .55;
}

.image-editor-layer.is-dragging .image-editor-layer-handle {
    cursor: grabbing;
}

.image-editor-layer.is-drag-over {
    border-color: var(--line-primary);
    box-shadow: 0 0 0 .15rem rgba(13, 110, 253, .12);
}

.image-editor-layer.is-selected {
    border-color: var(--line-primary);
    box-shadow: 0 0 0 .15rem rgba(13, 110, 253, .12);
}

.image-editor-layer-name {
    cursor: pointer;
    font-size: .85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.image-editor-download[hidden] {
    display: none;
}

body.image-editor-open {
    overflow: hidden;
}

@media (max-width: 1100px) {
    .image-editor-body {
        grid-template-columns: 1fr;
        overflow: auto;
    }

    .image-editor-panel {
        inset: 1rem;
    }
}

.file-link {
    display: inline-block;
    font-size: .9rem;
    margin-bottom: .5rem;
    word-break: break-all;
}

.form-actions {
    align-items: center;
    background: rgba(255, 255, 255, .96);
    border: 1px solid var(--line-border);
    border-radius: .5rem;
    box-shadow: 0 .75rem 2rem rgba(15, 23, 42, .18);
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: flex-end;
    margin: 0;
    padding: .75rem;
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1050;
}

.form-actions .btn {
    min-width: 6rem;
}

.actions-inline {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.actions-inline a {
    border: 1px solid var(--line-border);
    border-radius: .375rem;
    color: var(--line-primary);
    display: inline-block;
    font-size: .86rem;
    padding: .25rem .5rem;
}

.actions-inline a:hover {
    background: var(--line-soft);
}

.segmented-toggle,
.status-pill-display {
    background: #edf1f5;
    border: 1px solid #cfd6df;
    border-radius: 999px;
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    min-width: 176px;
    padding: .18rem;
    position: relative;
}

.inline-toggle-form {
    margin: 0;
}

.user-type-toggle {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-width: 260px;
}

.segmented-toggle input {
    height: 1px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    width: 1px;
}

.segmented-toggle label,
.segmented-toggle .toggle-static,
.status-toggle-list a,
.status-pill-display span {
    border-radius: 999px;
    color: #64748b;
    cursor: pointer;
    font-size: .9rem;
    font-weight: 700;
    line-height: 1;
    padding: .55rem .9rem;
    text-align: center;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
    user-select: none;
}

.user-type-toggle label,
.user-type-toggle .toggle-static {
    font-size: .82rem;
    padding-inline: .65rem;
}

.status-toggle-list a:hover {
    color: var(--line-primary);
}

.segmented-toggle input:checked + label,
.segmented-toggle .toggle-static.is-selected,
.status-toggle-list a.is-selected {
    background: var(--line-primary);
    box-shadow: 0 .2rem .55rem rgba(13, 110, 253, .22);
    color: #fff;
}

.status-toggle-list a.is-disabled {
    background: #6c757d;
    box-shadow: 0 .2rem .55rem rgba(108, 117, 125, .22);
    color: #fff;
}

.segmented-toggle .toggle-static.is-locked {
    color: #94a3b8;
    cursor: not-allowed;
}

.status-pill-display {
    cursor: default;
}

.status-pill-display span {
    cursor: default;
}

.status-pill-display.is-active span:first-child,
.status-pill-display.is-disabled span:last-child {
    background: var(--line-primary);
    box-shadow: 0 .2rem .55rem rgba(13, 110, 253, .22);
    color: #fff;
}

.status-pill-display.is-disabled span:last-child {
    background: #6c757d;
    box-shadow: 0 .2rem .55rem rgba(108, 117, 125, .22);
}

.otp-setup-panel {
    align-items: center;
    background: #fff;
    border: 1px solid var(--line-border);
    border-radius: .5rem;
    display: flex;
    gap: 1.5rem;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    padding: 1.25rem;
}

.otp-setup-panel h2 {
    font-size: 1.25rem;
    margin: 0 0 .5rem;
}

.otp-setup-panel p {
    color: #495057;
    margin: 0 0 .5rem;
}

.otp-secret {
    font-size: .95rem;
}

.otp-app-name {
    font-size: .95rem;
}

.otp-secret code {
    background: #f8f9fa;
    border: 1px solid var(--line-border);
    border-radius: .375rem;
    color: #212529;
    display: inline-block;
    letter-spacing: .04em;
    padding: .25rem .45rem;
}

.otp-qr-box {
    background: #fff;
    border: 1px solid var(--line-border);
    border-radius: .5rem;
    flex: 0 0 auto;
    padding: .75rem;
}

.otp-qr-box img {
    display: block;
    height: 12rem;
    width: 12rem;
}

.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    list-style: none;
    margin: 1rem 0 0;
    padding-left: 0;
}

.pagination li {
    display: inline-flex;
}

.pagination a,
.pagination .current {
    border: 1px solid var(--line-border);
    border-radius: .375rem;
    display: inline-block;
    min-width: 2.4rem;
    padding: .35rem .65rem;
    text-align: center;
}

.pagination .current,
.pagination .active a {
    background: var(--line-primary);
    border-color: var(--line-primary);
    color: #fff;
}

.message,
.success,
.error {
    border-radius: .375rem;
    margin-bottom: 1rem;
    padding: .75rem 1rem;
}

.success {
    background: #d1e7dd;
    border: 1px solid #badbcc;
    color: #0f5132;
}

.error {
    background: #f8d7da;
    border: 1px solid #f5c2c7;
    color: #842029;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="file"],
select,
textarea {
    max-width: 100%;
}

@media (max-width: 900px) {
    .admin-header-row,
    .line-toolbar > .card-body,
    .admin-account,
    .page-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-account {
        margin-left: 0;
    }

    .form-actions {
        left: .75rem;
        right: .75rem;
        bottom: .75rem;
    }

    .form-actions .btn {
        flex: 1 1 0;
    }

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