:root {
    --workspace-ink: #20302b;
    --workspace-muted: #65756e;
    --workspace-line: #dce5df;
    --workspace-green: #176957;
    --workspace-green-soft: #e9f3ee;
    --workspace-coral: #bf6c4a;
}

body {
    color: var(--workspace-ink);
    font-family: "Noto Sans JP Variable", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
    letter-spacing: 0;
}

body.auth-page-bg {
    font-family: "Noto Sans JP Variable", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
    letter-spacing: 0;
}

body:has(.app-header) {
    background: #f2f5f3;
    --app-ink: var(--workspace-ink);
    --app-muted: var(--workspace-muted);
    --app-line: var(--workspace-line);
    --app-accent: var(--workspace-green);
    --app-accent-dark: #125746;
    --app-soft-accent: var(--workspace-green-soft);
    --accent: var(--workspace-green);
    --soft-accent: var(--workspace-green-soft);
    --primary: var(--workspace-green);
}

.app-header {
    position: relative;
    border-top: 3px solid var(--workspace-green);
    background: #fff;
    box-shadow: 0 1px 0 var(--workspace-line);
    backdrop-filter: none;
}

.app-header nav { background: transparent; }
.app-header .nav-link { gap: .5rem; border-radius: .375rem; color: #53635c; font-weight: 600; }
.app-header .nav-link:hover, .app-header .nav-link:focus-visible { background: var(--workspace-green-soft); color: var(--workspace-green); }
.workspace-brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--workspace-ink); text-decoration: none; }
.workspace-brand-logo { display: block; width: auto; height: 2rem; max-width: 10rem; object-fit: contain; }
.workspace-dropdown > summary { cursor: pointer; list-style: none; }
.workspace-dropdown > summary::-webkit-details-marker { display: none; }
.workspace-menu { z-index: 60; width: 14rem; margin-top: .55rem; padding: .35rem; border: 1px solid var(--workspace-line); border-radius: .5rem; background: white; box-shadow: 0 12px 30px #1e35271a; }
.workspace-menu-right { right: 0; width: 12rem; }
.workspace-menu a { border-radius: .3rem; }
.workspace-menu a:hover { background: var(--workspace-green-soft); color: var(--workspace-green); }
.workspace-icon-link { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border-radius: .375rem; }
.workspace-icon-link:hover { background: var(--workspace-green-soft); }
.workspace-account { display: flex; align-items: center; gap: .5rem; min-height: 2.5rem; color: #485b52; font-size: .875rem; }
.workspace-mobile-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .25rem; padding-top: .5rem; }
.workspace-mobile-nav a { display: flex; min-height: 2.75rem; align-items: center; justify-content: center; gap: .35rem; border-radius: .375rem; color: #53635c; font-size: .75rem; font-weight: 600; text-decoration: none; }
.workspace-mobile-nav a:hover { background: var(--workspace-green-soft); color: var(--workspace-green); }
.app-main { min-height: calc(100vh - 9rem); background: linear-gradient(180deg, #f8faf8 0, #f1f5f2 22rem); }
.app-main > div { padding-top: 1.5rem; }
.app-breadcrumb { padding-top: 0; color: var(--workspace-muted); }
.app-footer { margin-top: 0; padding: 1.5rem 0; border-color: var(--workspace-line); }
.workspace-overview-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.workspace-overview-heading h1 { margin: .25rem 0 0; color: var(--workspace-ink); font-size: 1.5rem; font-weight: 700; line-height: 1.3; }
.workspace-overview-count { display: inline-flex; align-items: center; gap: .4rem; color: var(--workspace-muted); font-size: .8rem; font-weight: 600; white-space: nowrap; }
.workspace-section-icon { margin-right: .4rem; color: var(--workspace-green); }
.workspace-task-panel { border: 1px solid var(--workspace-line); border-radius: .5rem; background: #fff; box-shadow: 0 2px 8px #1c3e2b0a; }
body:has(.app-header) .app-main > div,
body:has(.app-header) .app-main .grid,
body:has(.app-header) .app-main .grid > * { min-width: 0; }

body:has(.app-header) .card,
body:has(.app-header) .workspace-card,
body.page-tascook-mypage .calendar-container,
body.page-history-group .calendar-card {
    border: 1px solid var(--workspace-line);
    border-radius: .5rem;
    background: #fff;
    box-shadow: 0 2px 8px #1c3e2b0a;
}
body:has(.app-header) .btn { border-radius: .375rem; font-weight: 600; }
body:has(.app-header) .btn-primary { border-color: var(--workspace-green); background: var(--workspace-green); color: white; }
body:has(.app-header) .btn-primary:hover { border-color: #125746; background: #125746; }
body:has(.app-header) .app-main .btn-primary { border-color: var(--workspace-green); background: var(--workspace-green); color: white; }
body:has(.app-header) .app-main .btn-primary:hover { border-color: #125746; background: #125746; }
body:has(.app-header) .app-main .bg-blue-600 { background-color: var(--workspace-green); }
body:has(.app-header) .app-main .hover\:bg-blue-700:hover { background-color: #125746; }
body:has(.app-header) .app-main .bg-blue-50,
body:has(.app-header) .app-main .bg-blue-100 { background-color: var(--workspace-green-soft); }
body:has(.app-header) .app-main .text-blue-600,
body:has(.app-header) .app-main .text-blue-700,
body:has(.app-header) .app-main .text-blue-800 { color: var(--workspace-green); }
body:has(.app-header) .btn-secondary { border-color: #dce5df; background: #edf2ef; color: #344a40; }
body:has(.app-header) .btn-secondary:hover { background: #e1ebe4; }
body:has(.app-header) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
body:has(.app-header) select,
body:has(.app-header) textarea { border-color: #cddad1; border-radius: .375rem; }
body:has(.app-header) input:focus, body:has(.app-header) select:focus, body:has(.app-header) textarea:focus { outline-color: var(--workspace-green); }
body:has(.app-header) .workspace-page-heading { padding: .25rem 0 1rem; border: 0; background: transparent; box-shadow: none; }
body:has(.app-header) .workspace-page-heading-label { color: var(--workspace-green); }
body:has(.app-header) .workspace-page-heading h1 { color: var(--workspace-ink); font-size: 1.6rem; }
body:has(.app-header) .workspace-page-heading p { color: var(--workspace-muted); }
body:has(.app-header) .master-hero { padding: .25rem 0 1rem; border: 0; background: transparent; box-shadow: none; }
body:has(.app-header) .master-hero h1 { color: var(--workspace-ink); font-size: 1.6rem; }
body:has(.app-header) .master-hero-label { color: var(--workspace-green); }
body.page-tascook-task-jisseki .form-control { min-width: 0; }
body.page-tascook-task-cut .app-main .max-w-6xl { width: 100%; max-width: 100%; min-width: 0; }
body.page-tascook-task-cut .timeline-container,
body.page-tascook-task-cut .timeline { min-width: 0; max-width: 100%; }
body.page-tascook-task-cut .timeline-label span { display: block; max-width: 4.5rem; overflow-wrap: anywhere; }
body.page-history-chart .container-max { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
body.page-history-chart .charts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; }
body.page-history-chart .chart-card,
body.page-history-chart .chart-container { min-width: 0; }
body.page-tascook-mypage .task-list-item, body.page-tascook-group .task-list-item { border-left-color: var(--task-accent, var(--workspace-green)); }
body.page-tascook-mypage .task-list-item:hover, body.page-tascook-group .task-list-item:hover { background: #f1f7f3; }
body.page-tascook-mypage .task-progress-bar, body.page-tascook-group .task-progress-bar { background: var(--workspace-green); }

#calendar { min-width: 0; }
#calendar .fc { color: var(--workspace-ink); font-family: inherit; }
#calendar .fc-toolbar h2 { font-size: 1.15rem; font-weight: 700; }
#calendar .fc-button-primary { border-color: #cddbd1; background: #fff; color: #43574c; box-shadow: none; }
#calendar .fc-button-primary:hover, #calendar .fc-button-primary:not(:disabled).fc-button-active { border-color: var(--workspace-green); background: var(--workspace-green); color: #fff; }
#calendar .fc-event { border-radius: .25rem; }
#calendar .fc-list-item-title { overflow-wrap: anywhere; }

@media (max-width: 767px) {
    .workspace-account > span { display: none; }
    .workspace-mobile-nav a { flex-direction: column; gap: .15rem; }
    .app-main > div { padding-top: .75rem; }
    .app-header .space-x-4 > :not([hidden]) ~ :not([hidden]) { margin-left: .25rem; }
    .workspace-overview-heading { align-items: center; }
    .workspace-overview-heading h1 { font-size: 1.25rem; }
}

@media (max-width: 640px) {
    #calendar .fc-toolbar.fc-header-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem .4rem; margin-bottom: 1rem; }
    #calendar .fc-toolbar .fc-center { grid-column: 1 / -1; grid-row: 1; text-align: center; }
    #calendar .fc-toolbar .fc-left { grid-column: 1; grid-row: 2; }
    #calendar .fc-toolbar .fc-right { grid-column: 2; grid-row: 2; }
    #calendar .fc-toolbar h2 { font-size: 1rem; }
    #calendar .fc-toolbar > * > :not(:first-child) { margin-left: .3rem; }
    #calendar .fc-button { padding: .45rem .5rem; font-size: .75rem; }
    #calendar .fc-list-item td { padding: .65rem .4rem; }
    body.page-history-group .calendar-card, .inline-style-499aa7553c { padding: .75rem; }
}

@media (max-width: 768px) {
    body.page-history-chart .charts-grid { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
    body.page-history-chart .chart-card { padding: 1rem; }
    body.page-history-chart .chart-container { height: 18rem; }
}