* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    }

    body {
        background: linear-gradient(135deg, #0079bf 0%, #5067c5 100%);
        min-height: 100vh;
        color: #172b4d;
        overflow-x: auto;
    }

    /* ===== Top Navigation ===== */
    .top-nav {
        background: rgba(0, 0, 0, 0.15);
        backdrop-filter: blur(10px);
        padding: 8px 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .nav-left,
    .nav-right {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .nav-btn {
        background: rgba(255, 255, 255, 0.2);
        color: #fff;
        border: none;
        padding: 6px 12px;
        border-radius: 4px;
        cursor: pointer;
        font-size: 14px;
        display: flex;
        align-items: center;
        gap: 6px;
        transition: background 0.15s;
    }

    .nav-btn:hover {
        background: rgba(255, 255, 255, 0.3);
    }

    .nav-search {
        background: rgba(255, 255, 255, 0.2);
        border: none;
        padding: 6px 12px;
        border-radius: 4px;
        color: #fff;
        width: 200px;
        font-size: 14px;
    }

    .nav-search::placeholder {
        color: rgba(255, 255, 255, 0.7);
    }

    .nav-logo {
        color: #fff;
        font-weight: 700;
        font-size: 18px;
        letter-spacing: 1px;
        display: flex;
        align-items: center;
    }

    .nav-logo img {
        height: 32px;
        width: auto;
        display: block;
    }

    .nav-avatar {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: #ff5722;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        font-size: 13px;
        cursor: pointer;
    }

    .nav-sched-wrap {
        position: relative;
    }

    .nav-sched-trigger {
        position: relative;
    }

    .nav-sched-count {
        position: absolute;
        top: -5px;
        right: -5px;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        border-radius: 9px;
        background: #eb5a46;
        color: #fff;
        font-size: 11px;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
        pointer-events: none;
    }

    .nav-sched-count.hidden,
    .nav-sched-list.hidden {
        display: none !important;
    }

    .nav-sched-empty {
        padding: 16px;
        font-size: 13px;
        color: #6b778c;
        text-align: center;
        line-height: 1.45;
    }

    .nav-sched-empty.hidden {
        display: none !important;
    }

    .nav-sched-panel {
        display: none;
        position: absolute;
        right: 0;
        top: calc(100% + 6px);
        min-width: 300px;
        max-width: min(360px, calc(100vw - 28px));
        max-height: min(380px, 55vh);
        overflow-x: hidden;
        overflow-y: auto;
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
        z-index: 4000;
    }

    .nav-sched-panel.visible {
        display: block;
    }

    .nav-sched-panel-header {
        padding: 10px 14px;
        font-size: 13px;
        font-weight: 600;
        color: #5e6c84;
        border-bottom: 1px solid #ebecf0;
        white-space: nowrap;
    }

    .nav-sched-list {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .nav-sched-item {
        padding: 10px 14px;
        cursor: pointer;
        border-bottom: 1px solid #f4f5f7;
        text-align: left;
        transition: background 0.1s;
    }

    .nav-sched-item:last-child {
        border-bottom: none;
    }

    .nav-sched-item:hover,
    .nav-sched-item:focus-visible {
        background: #f4f5f7;
        outline: none;
    }

    .nav-sched-item-title {
        font-weight: 600;
        font-size: 14px;
        color: #172b4d;
    }

    .nav-sched-item-stage {
        font-size: 11px;
        color: #5e6c84;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        margin-top: 2px;
    }

    .nav-sched-item-desc {
        font-size: 13px;
        color: #172b4d;
        margin-top: 6px;
        opacity: 0.9;
    }

    /* ===== Board Header ===== */
    .board-header {
        padding: 12px 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: rgba(0, 0, 0, 0.1);
    }

    .board-header-left {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
    }

    .board-title {
        color: #fff;
        font-size: 18px;
        font-weight: 700;
        padding: 4px 8px;
        border-radius: 4px;
    }

    .board-tag {
        background: rgba(255, 255, 255, 0.2);
        color: #fff;
        padding: 4px 10px;
        border-radius: 4px;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .board-tag:hover {
        background: rgba(255, 255, 255, 0.3);
    }

    .star-icon {
        color: #fff;
        font-size: 18px;
        cursor: pointer;
    }

    .members-stack {
        display: flex;
        align-items: center;
    }

    .member-avatar {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        border: 2px solid #fff;
        margin-left: -8px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 12px;
        font-weight: 600;
    }

    .member-avatar:first-child {
        margin-left: 0;
    }

    .invite-btn {
        background: #fff;
        color: #0079bf;
        border: none;
        padding: 6px 14px;
        border-radius: 4px;
        font-weight: 600;
        cursor: pointer;
        margin-left: 8px;
    }

    .board-header-right {
        display: flex;
        gap: 8px;
    }

    /* ===== Board / Lists ===== */
    .board {
        display: flex;
        gap: 12px;
        padding: 12px 20px 20px 20px;
        overflow-x: auto;
        min-height: calc(100vh - 110px);
        align-items: flex-start;
    }

    .list {
        background: #ebecf0;
        border-radius: 8px;
        width: 340px;
        min-width: 340px;
        max-height: calc(100vh - 140px);
        display: flex;
        flex-direction: column;
        box-shadow: 0 1px 0 rgba(9, 30, 66, 0.25);
    }

    .list-header {
        padding: 10px 12px 6px 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight: 700;
        font-size: 14px;
        color: #172b4d;
    }

    .list-header-title {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .list-count {
        background: rgba(9, 30, 66, 0.08);
        color: #5e6c84;
        padding: 2px 8px;
        border-radius: 10px;
        font-size: 12px;
        font-weight: 600;
    }

    .list-total {
        background: #e3fcef;
        color: #006644;
        padding: 2px 8px;
        border-radius: 10px;
        font-size: 12px;
        font-weight: 700;
    }

    .list-total.hidden {
        display: none;
    }

    .list-menu-btn {
        background: transparent;
        border: none;
        color: #6b778c;
        cursor: pointer;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 16px;
    }

    .list-menu-btn:hover {
        background: rgba(9, 30, 66, 0.08);
    }

    .cards {
        padding: 4px 8px;
        overflow-y: auto;
        flex: 1;
    }

    /* ===== Card ===== */
    .card {
        background: #fff;
        border-radius: 6px;
        padding: 6px 10px 8px 10px;
        margin-bottom: 6px;
        box-shadow: 0 1px 0 rgba(9, 30, 66, 0.25);
        cursor: pointer;
        transition: background 0.1s;
    }

    .card:hover {
        background: #f4f5f7;
    }

    .card.dragging {
        opacity: 0.4;
        transform: rotate(3deg);
    }

    .cards.drag-over {
        background: rgba(9, 30, 66, 0.08);
        border-radius: 4px;
    }

    .card-placeholder {
        background: rgba(9, 30, 66, 0.15);
        border: 2px dashed rgba(9, 30, 66, 0.3);
        border-radius: 6px;
        margin-bottom: 8px;
        min-height: 60px;
    }

    .card-labels {
        display: flex;
        gap: 4px;
        flex-wrap: wrap;
        margin-bottom: 4px;
    }

    .label {
        height: 8px;
        min-width: 40px;
        border-radius: 4px;
        font-size: 0;
        transition: all 0.15s;
    }

    .label.expanded {
        font-size: 12px;
        color: #fff;
        font-weight: 700;
        padding: 2px 8px;
        height: auto;
        line-height: 16px;
    }

    .label-green   { background: #61bd4f; }
    .label-yellow  { background: #f2d600; }
    .label-orange  { background: #ff9f1a; }
    .label-red     { background: #eb5a46; }
    .label-purple  { background: #c377e0; }
    .label-blue    { background: #0079bf; }
    .label-sky     { background: #00c2e0; }
    .label-lime    { background: #51e898; }
    .label-pink    { background: #ff78cb; }
    .label-grey    { background: #b3bac5; }

    .card-title {
        font-size: 14px;
        color: #172b4d;
        line-height: 18px;
        margin-bottom: 3px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .card-company {
        font-size: 12px;
        color: #5e6c84;
        font-weight: 600;
    }

    .card-value {
        font-size: 13px;
        color: #61bd4f;
        font-weight: 700;
    }

    .card-meta-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 4px;
    }

    .card-people-row {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        margin-bottom: 4px;
    }

    .card-people-row .card-poc {
        margin-bottom: 0;
    }

    .card-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 4px;
    }

    .card-icons {
        display: flex;
        gap: 8px;
        color: #5e6c84;
        font-size: 12px;
        align-items: center;
    }

    .card-icon {
        display: flex;
        align-items: center;
        gap: 3px;
    }

    .card-icon.muted {
        opacity: 0.45;
    }

    .card-description {
        font-size: 12px;
        color: #5e6c84;
        line-height: 16px;
        margin-bottom: 4px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        line-clamp: 1;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .card-poc {
        font-size: 12px;
        color: #5e6c84;
        margin-bottom: 4px;
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .card-poc-label {
        font-weight: 700;
        color: #6b778c;
    }

    .card-contact-row {
        display: flex;
        gap: 4px;
        margin-bottom: 4px;
        flex-wrap: wrap;
    }

    .card-contact-link {
        color: #5e6c84;
        text-decoration: none;
        padding: 3px 6px;
        border-radius: 3px;
        font-size: 13px;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        background: #f4f5f7;
        transition: background 0.12s, color 0.12s;
    }

    .card-contact-link:hover {
        background: #deebff;
        color: #0747a6;
    }

    .li-icon {
        background: #0a66c2;
        color: #fff;
        padding: 1px 4px;
        border-radius: 2px;
        font-size: 10px;
        font-weight: 700;
        font-family: Arial, sans-serif;
        display: inline-block;
        line-height: 12px;
    }

    .card-due {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 11px;
        padding: 2px 6px;
        border-radius: 4px;
        background: #fff;
        color: #5e6c84;
        border: 1px solid #dfe1e6;
    }

    .card-due.urgent {
        background: #ec9488;
        color: #fff;
        border-color: #eb5a46;
    }

    .card-due.warning {
        background: #f5dd29;
        color: #172b4d;
        border-color: #d9b51c;
    }

    .card-avatars {
        display: flex;
    }

    .card-avatar {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        border: 2px solid #fff;
        margin-left: -6px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 10px;
        font-weight: 700;
    }

    .card-avatar:first-child {
        margin-left: 0;
    }

    /* Avatar color variations */
    .av-1 { background: #ff5722; }
    .av-2 { background: #4caf50; }
    .av-3 { background: #2196f3; }
    .av-4 { background: #9c27b0; }
    .av-5 { background: #ff9800; }
    .av-6 { background: #607d8b; }
    .av-7 { background: #e91e63; }
    .av-8 { background: #00bcd4; }

    /* ===== Add Card ===== */
    .add-card-btn {
        background: transparent;
        border: none;
        text-align: left;
        padding: 8px 12px;
        margin: 0 4px 8px 4px;
        color: #5e6c84;
        cursor: pointer;
        border-radius: 4px;
        font-size: 14px;
        display: flex;
        align-items: center;
        gap: 6px;
        width: calc(100% - 8px);
    }

    .add-card-btn:hover {
        background: rgba(9, 30, 66, 0.08);
        color: #172b4d;
    }

    /* ===== Modal ===== */
    .modal-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(9, 30, 66, 0.55);
        display: none;
        align-items: flex-start;
        justify-content: center;
        padding-top: 40px;
        z-index: 2000;
    }

    .modal-backdrop.visible {
        display: flex;
    }

    .modal {
        background: #fff;
        border-radius: 8px;
        width: 760px;
        max-width: calc(100% - 40px);
        max-height: calc(100vh - 60px);
        display: flex;
        flex-direction: column;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
        overflow: hidden;
        animation: modalIn 0.18s ease-out;
    }

    .modal .modal-body {
        overflow-y: auto;
        flex: 1;
    }

    @keyframes modalIn {
        from { opacity: 0; transform: translateY(-12px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    .modal-header {
        padding: 14px 20px;
        border-bottom: 1px solid #ebecf0;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .modal-title {
        font-size: 16px;
        font-weight: 700;
        color: #172b4d;
    }

    .modal-close {
        background: transparent;
        border: none;
        font-size: 22px;
        color: #6b778c;
        cursor: pointer;
        line-height: 1;
        padding: 4px 8px;
        border-radius: 4px;
    }

    .modal-close:hover {
        background: #ebecf0;
        color: #172b4d;
    }

    .modal-body {
        padding: 14px 18px;
    }

    .form-row {
        margin-bottom: 10px;
    }

    .form-row label {
        display: block;
        font-size: 12px;
        font-weight: 700;
        color: #5e6c84;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        margin-bottom: 6px;
    }

    .form-row input[type="text"],
    .form-row textarea {
        width: 100%;
        border: 2px solid #dfe1e6;
        border-radius: 4px;
        padding: 8px 10px;
        font-size: 14px;
        color: #172b4d;
        font-family: inherit;
        outline: none;
        transition: border-color 0.15s;
    }

    .form-row input[type="text"]:focus,
    .form-row textarea:focus {
        border-color: #0079bf;
    }

    .form-row textarea {
        resize: vertical;
        min-height: 44px;
    }

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

    .form-grid-2 .form-row {
        margin-bottom: 0;
    }

    .form-grid-2 .form-row.span-2 {
        grid-column: span 2;
    }

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

    .form-grid-3 .form-row {
        margin-bottom: 0;
    }

    .fieldset {
        border: 1px solid #dfe1e6;
        border-radius: 6px;
        padding: 12px 12px 8px 12px;
        margin: 4px 0 10px 0;
        position: relative;
        background: #fafbfc;
    }

    .fieldset-legend {
        position: absolute;
        top: -8px;
        left: 12px;
        background: #fff;
        padding: 0 8px;
        font-size: 11px;
        font-weight: 700;
        color: #5e6c84;
        text-transform: uppercase;
        letter-spacing: 0.4px;
    }

    .label-picker {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .label-chip {
        padding: 6px 12px;
        border-radius: 4px;
        font-size: 12px;
        font-weight: 700;
        color: #fff;
        cursor: pointer;
        opacity: 0.55;
        border: 2px solid transparent;
        user-select: none;
        transition: opacity 0.12s, border-color 0.12s;
    }

    button.label-chip {
        background: transparent;
        font: inherit;
        color: inherit;
    }

    .label-chip:hover {
        opacity: 0.85;
    }

    .label-chip.selected {
        opacity: 1;
        border-color: rgba(0, 0, 0, 0.25);
    }

    .modal-footer {
        padding: 12px 20px 16px 20px;
        border-top: 1px solid #ebecf0;
        display: flex;
        justify-content: flex-end;
        gap: 8px;
    }

    .btn {
        padding: 8px 16px;
        border-radius: 4px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        border: none;
        transition: background 0.12s;
    }

    .btn-primary {
        background: #0079bf;
        color: #fff;
    }

    .btn-primary:hover {
        background: #026aa7;
    }

    .btn-primary:disabled {
        background: #b3bac5;
        cursor: not-allowed;
    }

    .btn-ghost {
        background: transparent;
        color: #5e6c84;
    }

    .btn-ghost:hover {
        background: #ebecf0;
        color: #172b4d;
    }

    /* ===== Card Detail Modal ===== */
    .modal-large {
        width: 720px;
    }

    .modal-large .modal-body {
        max-height: calc(100vh - 220px);
        overflow-y: auto;
    }

    .card-detail-meta {
        font-size: 13px;
        color: #5e6c84;
        margin-top: 4px;
    }

    .card-detail-meta strong {
        color: #172b4d;
    }

    .detail-section {
        margin-bottom: 22px;
    }

    .detail-section h3 {
        font-size: 13px;
        font-weight: 700;
        color: #5e6c84;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        margin-bottom: 10px;
    }

    .detail-info-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .detail-info-pill {
        background: #f4f5f7;
        border-radius: 6px;
        padding: 8px 12px;
        font-size: 13px;
    }

    .detail-info-pill .label-text {
        font-size: 11px;
        color: #6b778c;
        font-weight: 600;
        text-transform: uppercase;
        margin-bottom: 2px;
    }

    .detail-info-pill .value-text {
        color: #172b4d;
        font-weight: 600;
        font-size: 14px;
    }

    .detail-labels {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
    }

    .detail-labels .label.expanded {
        padding: 4px 12px;
        font-size: 12px;
    }

    .contact-grid {
        display: grid;
        grid-template-columns: 110px 1fr;
        gap: 8px 12px;
        align-items: center;
    }

    .contact-label {
        font-size: 12px;
        font-weight: 700;
        color: #5e6c84;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .contact-input {
        width: 100%;
        border: 2px solid #dfe1e6;
        border-radius: 4px;
        padding: 8px 10px;
        font-size: 14px;
        color: #172b4d;
        font-family: inherit;
        outline: none;
        transition: border-color 0.15s;
    }

    .contact-input:focus {
        border-color: #0079bf;
    }

    .contact-input.with-link {
        padding-right: 80px;
    }

    .contact-input-wrap {
        position: relative;
    }

    .contact-open-link {
        position: absolute;
        right: 6px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 12px;
        color: #0079bf;
        text-decoration: none;
        padding: 4px 8px;
        border-radius: 3px;
        font-weight: 600;
    }

    .contact-open-link:hover {
        background: #deebff;
    }

    .contact-open-link.hidden {
        display: none;
    }

    /* Schedule */
    .schedule-list {
        list-style: none;
        margin-bottom: 10px;
    }

    .schedule-item {
        display: flex;
        align-items: center;
        gap: 12px;
        background: #f4f5f7;
        border-radius: 6px;
        padding: 10px 12px;
        margin-bottom: 6px;
    }

    .schedule-date {
        background: #fff;
        border: 1px solid #dfe1e6;
        border-radius: 4px;
        padding: 4px 10px;
        font-size: 12px;
        font-weight: 700;
        color: #0079bf;
        min-width: 110px;
        text-align: center;
        white-space: nowrap;
    }

    .schedule-date.past {
        color: #eb5a46;
        border-color: #eb5a46;
    }

    .schedule-date.soon {
        color: #d9870b;
        border-color: #d9870b;
    }

    .schedule-desc {
        flex: 1;
        font-size: 14px;
        color: #172b4d;
    }

    .schedule-delete,
    .comment-delete {
        background: transparent;
        border: none;
        color: #6b778c;
        cursor: pointer;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 14px;
    }

    .schedule-delete:hover,
    .comment-delete:hover {
        background: #ffe5e2;
        color: #eb5a46;
    }

    .schedule-add,
    .comment-add {
        display: flex;
        gap: 8px;
        align-items: stretch;
        margin-top: 8px;
    }

    .schedule-add input[type="text"],
    .schedule-add input[type="date"] {
        border: 2px solid #dfe1e6;
        border-radius: 4px;
        padding: 8px 10px;
        font-size: 14px;
        color: #172b4d;
        font-family: inherit;
        outline: none;
    }

    .schedule-add input[type="text"]:focus,
    .schedule-add input[type="date"]:focus {
        border-color: #0079bf;
    }

    .schedule-add input[type="text"] {
        flex: 1;
    }

    .schedule-add input[type="date"] {
        width: 160px;
    }

    .empty-hint {
        font-size: 13px;
        color: #6b778c;
        font-style: italic;
        padding: 4px 0;
    }

    /* Comments */
    .comment-add {
        flex-direction: column;
        margin-bottom: 14px;
    }

    .comment-add textarea {
        width: 100%;
        min-height: 60px;
        border: 2px solid #dfe1e6;
        border-radius: 6px;
        padding: 10px;
        font-size: 14px;
        font-family: inherit;
        color: #172b4d;
        outline: none;
        resize: vertical;
    }

    .comment-add textarea:focus {
        border-color: #0079bf;
    }

    .comment-add-actions {
        display: flex;
        justify-content: flex-end;
        margin-top: 8px;
    }

    .comment-list {
        list-style: none;
    }

    .comment-item {
        display: flex;
        gap: 10px;
        margin-bottom: 12px;
    }

    .comment-avatar {
        flex-shrink: 0;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: #0079bf;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 12px;
    }

    .comment-body {
        flex: 1;
        background: #f4f5f7;
        border-radius: 6px;
        padding: 8px 12px;
    }

    .comment-meta {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 4px;
    }

    .comment-author {
        font-weight: 700;
        font-size: 13px;
        color: #172b4d;
    }

    .comment-time {
        font-size: 11px;
        color: #6b778c;
    }

    .comment-text {
        font-size: 14px;
        color: #172b4d;
        white-space: pre-wrap;
        word-break: break-word;
    }

    .comment-actions {
        text-align: right;
        margin-top: 4px;
    }

    /* ===== Unified Activity Log ===== */
    .activity-log {
        list-style: none;
        border-top: 1px solid #ebecf0;
    }

    .log-item {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 10px 4px;
        border-bottom: 1px solid #ebecf0;
    }

    .log-item:hover {
        background: #fafbfc;
    }

    .log-type {
        flex-shrink: 0;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        padding: 3px 8px;
        border-radius: 10px;
        min-width: 86px;
        text-align: center;
    }

    .log-type.schedule {
        background: #deebff;
        color: #0747a6;
    }

    .log-type.comment {
        background: #e3fcef;
        color: #006644;
    }

    .log-type.move {
        background: #fef0d6;
        color: #974b00;
    }

    .log-type.update {
        background: #eae6ff;
        color: #403294;
    }

    .log-when {
        flex-shrink: 0;
        font-size: 12px;
        font-weight: 600;
        color: #0079bf;
        min-width: 130px;
        white-space: nowrap;
    }

    .log-when.past {
        color: #eb5a46;
    }

    .log-when.soon {
        color: #d9870b;
    }

    .log-when.muted {
        color: #6b778c;
        font-weight: 500;
    }

    .log-content {
        flex: 1;
        font-size: 14px;
        color: #172b4d;
        line-height: 20px;
        white-space: pre-wrap;
        word-break: break-word;
    }

    .log-author {
        font-weight: 700;
        color: #172b4d;
    }

    .log-delete {
        flex-shrink: 0;
        background: transparent;
        border: none;
        color: #6b778c;
        cursor: pointer;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 14px;
    }

    .log-delete:hover {
        background: #ffe5e2;
        color: #eb5a46;
    }

    .section-hint {
        font-weight: 400;
        text-transform: none;
        color: #6b778c;
        margin-left: 6px;
    }

    /* ===== List Menu Dropdown ===== */
    .list-menu {
        position: absolute;
        background: #fff;
        border-radius: 6px;
        box-shadow: 0 4px 16px rgba(9, 30, 66, 0.25);
        min-width: 180px;
        z-index: 1500;
        overflow: hidden;
        display: none;
    }

    .list-menu.visible {
        display: block;
    }

    .list-menu-header {
        padding: 10px 14px;
        font-size: 13px;
        font-weight: 700;
        color: #5e6c84;
        text-align: center;
        border-bottom: 1px solid #ebecf0;
    }

    .list-menu-item {
        display: block;
        width: 100%;
        text-align: left;
        background: transparent;
        border: none;
        padding: 8px 14px;
        font-size: 14px;
        color: #172b4d;
        cursor: pointer;
    }

    .list-menu-item:hover {
        background: #ebecf0;
    }

    .list-menu-item.danger {
        color: #eb5a46;
    }

    .list-menu-item.danger:hover {
        background: #ffe5e2;
    }

    /* ===== Inline rename input ===== */
    .list-rename-input {
        font-weight: 700;
        font-size: 14px;
        color: #172b4d;
        background: #fff;
        border: 2px solid #0079bf;
        border-radius: 4px;
        padding: 2px 6px;
        outline: none;
        width: 160px;
        font-family: inherit;
    }

    /* ===== Save Status Toast ===== */
    .save-status {
        position: fixed;
        bottom: 20px;
        right: 20px;
        background: rgba(23, 43, 77, 0.95);
        color: #fff;
        padding: 10px 16px;
        border-radius: 6px;
        font-size: 13px;
        font-weight: 500;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.25s, transform 0.25s;
        pointer-events: none;
        z-index: 1000;
    }

    .save-status.visible {
        opacity: 1;
        transform: translateY(0);
    }

    .save-status.error {
        background: #eb5a46;
    }

    /* ===== Scrollbar ===== */
    .board::-webkit-scrollbar {
        height: 12px;
    }

    .cards::-webkit-scrollbar {
        width: 8px;
    }

    .board::-webkit-scrollbar-track,
    .cards::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.1);
        border-radius: 4px;
    }

    .board::-webkit-scrollbar-thumb,
    .cards::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.3);
        border-radius: 4px;
    }

    .board::-webkit-scrollbar-thumb:hover,
    .cards::-webkit-scrollbar-thumb:hover {
        background: rgba(0, 0, 0, 0.5);
    }

    /* ===== Initial load strip (session check) ===== */
    #boot-loading.boot-loading-bar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 10000;
        background: rgba(0, 0, 0, 0.15);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding: 10px 20px;
        color: #fff;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    }

    #boot-loading .boot-loading-inner {
        display: flex;
        align-items: center;
        gap: 12px;
        max-width: 1400px;
        margin: 0 auto;
        width: 100%;
    }

    #boot-loading .boot-logo {
        height: 32px;
        width: auto;
        max-width: min(200px, 40vw);
        object-fit: contain;
        display: block;
        flex-shrink: 0;
    }

    #boot-loading .boot-brand {
        font-weight: 700;
        font-size: 17px;
        letter-spacing: 0.04em;
        white-space: nowrap;
    }

    #boot-loading .boot-status {
        margin-left: auto;
        font-size: 14px;
        font-weight: 500;
        opacity: 0.95;
    }