.top { background: #fff; border-bottom: 1px solid #e3e8ef; padding: 17px 24px; display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap }
        .top h1 { margin: 0; font-size: 21px }
        .top.planner-header {
            padding: 14px 24px;
            border-bottom: 1px solid #cce7e2;
            background: linear-gradient(115deg, #ecfdf5, #f0fdfa 45%, #f8fafc);
            color: #134e4a
        }
        .planner-header .kita-header-title h1,
        .planner-header h1 {
            display: flex;
            align-items: center;
            gap: 11px;
            font-size: 24px;
            font-weight: 800;
            letter-spacing: -.035em;
            line-height: 1.2
        }
        .planner-header-icon {
            display: grid;
            place-items: center;
            flex: 0 0 38px;
            height: 38px;
            border: 1px solid #b3e5da;
            border-radius: 11px;
            background: #ffffffb3;
            color: #0f766e;
            box-shadow: 0 3px 10px #0f766e09
        }
        .planner-header-icon svg {
            width: 23px;
            height: 23px;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.7;
            stroke-linecap: round;
            stroke-linejoin: round
        }
        .planner-header .kita-header-title .muted,
        .planner-header .muted {
            display: flex;
            flex-wrap: wrap;
            align-items: baseline;
            gap: 3px 12px;
            margin: 9px 0 0 49px;
            max-width: none;
            color: #52716d;
            font-size: 14px;
            line-height: 1.6
        }
        .planner-header .muted strong {
            color: #0f766e;
            font-weight: 650
        }
        [data-theme=dark] .top.planner-header {
            background: linear-gradient(115deg, #153431, #162c32 45%, #182033);
            border-bottom-color: #2b4d4a;
            color: #ccfbf1
        }
        [data-theme=dark] .planner-header-icon {
            background: #1c4541;
            border-color: #32665d;
            color: #5eead4
        }
        [data-theme=dark] .planner-header .kita-header-title .muted,
        [data-theme=dark] .planner-header .muted { color: #a9c7c1 }
        [data-theme=dark] .planner-header .muted strong { color: #5eead4 }
        @media (max-width: 650px) {
            .top.planner-header { padding: 12px 16px }
            .planner-header .kita-header-title h1, .planner-header h1 { font-size: 23px }
            .planner-header .kita-header-title .muted, .planner-header .muted { margin-left: 0 }
        }